diff --git a/README.md b/README.md index f0f6f1b..89473ff 100644 --- a/README.md +++ b/README.md @@ -1,77 +1,97 @@ -
-adds code editor behavior to a
+ -- 🔧 Install - · 🧩 Example - · 📜 API docs - · 🔥 Releases - · 💪🏼 Contribute - · 🖐️ Help -
+Web Component that extends a textarea element with code editor behavior. -*** +
+npm i textarea-code
+ |
+pnpm add textarea-code
+ |
+yarn add textarea-code
+ |
web
view source
-Or directly from [jsDelivr](https://www.jsdelivr.com/): +```ts +import { TextAreaCodeElement } from 'textarea-code' -```js -import { TextAreaCodeElement } from 'https://cdn.jsdelivr.net/gh/stagas/textarea-code/textarea-code.min.js' +customElements.define('textarea-code', TextAreaCodeElement, { + extends: 'textarea', +}) + +document.body.innerHTML = /*html*/ ` + + +` + +const output = document.getElementById('output') as TextAreaCodeElement + +output.textContent = `\ +if (e.altKey || (cmdKey && e.shiftKey)) { + if (['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown'].includes(e.key)) { + e.preventDefault() + this.buffer.moveLines( + { + ArrowUp: -1, + ArrowDown: 1, + PageUp: -this.pageSize, + PageDown: this.pageSize, + }[e.key as 'ArrowUp'] + ) + return + } +} +` ``` -Only ~**2.6kb** minified + brotli! - -## Features - -* Tab/Shift + Tab Indent/unindent selection or line -* Cmd + / - Toggle single comment in selection or line -* Cmd + Shift + / - Toggle double comment in selection or position -* Cmd + Shift + d - Duplicate line or selection -* Alt + Up / Alt + Down - Move lines or selection up or down -* Shift + Del - Delete line -* Enter after `({[` indents one position +
+
options
numberOfLines
tab
value
deleteLine
()
deleteLine() =>
duplicate
()
duplicate() =>
getArea
({ end, start }) {
}
getArea({ end, start }) =>
getLineCol
(n) number#
n
getLineCol(n) =>
getRange
() indent
(unindent) boolean#
unindent
indent(unindent) =>
lineAt
(line) number#
line
lineAt(line) =>
moveCaretEnd
(withSelection) boolean#
withSelection
moveCaretEnd(withSelection) =>
moveCaretHome
(withSelection) boolean#
withSelection
moveCaretHome(withSelection) =>
moveCaretLines
(lines, withSelection) moveCaretTo
(Point, selection, direction) moveLines
(diff) number#
diff
moveLines(diff) =>
replaceBlock
(replacer) replaceBlock(replacer) =>
scrollIntoView
(pos) number#
pos
scrollIntoView(pos) =>
setSelectionRange
(start, end, direction) toggleDoubleComment
()
toggleDoubleComment() =>
toggleSingleComment
()
toggleSingleComment() =>
getPositionFromLineCol
(value, point) string#
value
getPositionFromLineCol(value, point) =>
TextAreaCodeElement
pageSize
number
tabSize
= 2
number
tabStyle
= 'spaces'
"spaces"
| "tabs"
viewHeight
number
Options
Point
SelectionDirection
"forward"
| "backward"
| "none"
#
src/textarea-code.ts#L11comments
='// /* */'
string