Web Component that extends a textarea element with code editor behavior.
# web
# view source
example/web.ts
import { TextAreaCodeElement } from 'textarea-code'
customElements.define('textarea-code', TextAreaCodeElement, {
extends: 'textarea',
})
document.body.innerHTML = /*html*/ `
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body,
textarea {
background: #292827;
color: #fff;
caret-color: #fff;
}
textarea {
font-family: monospace;
font-size: 10pt;
line-height: 16px;
padding: 0;
margin: 0;
}
</style>
<textarea id="output" is="textarea-code" rows="15" cols="60" tab-size="2" tab-style="spaces"></textarea>
`
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
}
}
`
# Buffer
src/buffer.ts#L19
# getRange
()
src/buffer.ts#L66 # moveCaretEnd
(withSelection)
src/buffer.ts#L264
# withSelection
boolean
moveCaretEnd(withSelection) =>
- void
# moveCaretHome
(withSelection)
src/buffer.ts#L257
# withSelection
boolean
moveCaretHome(withSelection) =>
- void
# moveCaretLines
(lines, withSelection)
src/buffer.ts#L272 # moveCaretTo
(Point, selection, direction)
src/buffer.ts#L124 # replaceBlock
(replacer)
src/buffer.ts#L144 # setSelectionRange
(start, end, direction)
src/buffer.ts#L118 # getPositionFromLineCol
(value, point)
src/buffer.ts#L102
# value
string
getPositionFromLineCol(value, point) =>
- number
# TextAreaCodeElement
src/textarea-code.ts#L10
# $
src/sigl/dist/types/sigl.d.ts#L25 Context<TextAreaCodeElement & JsxContext<TextAreaCodeElement> & Omit<{
<T>(ctor) =>
- CleanClass<T>
<T>(ctx) =>
- Wrapper<T>
},
"transition"
>> # context
src/sigl/dist/types/sigl.d.ts#L26 ContextClass<TextAreaCodeElement & JsxContext<TextAreaCodeElement> & Omit<{
<T>(ctor) =>
- CleanClass<T>
<T>(ctx) =>
- Wrapper<T>
},
"transition"
>> # onmounted
EventHandler<TextAreaCodeElement, CustomEvent<any>>
# onunmounted
EventHandler<TextAreaCodeElement, CustomEvent<any>>
# created
(ctx)
# ctx
Context<TextAreaCodeElement & JsxContext<TextAreaCodeElement> & Omit<{
<T>(ctor) =>
- CleanClass<T>
<T>(ctx) =>
- Wrapper<T>
},
"transition"
>> created(ctx) =>
- void
# mounted
($)
src/textarea-code.ts#L21
# $
Context<TextAreaCodeElement & JsxContext<TextAreaCodeElement> & Omit<{
<T>(ctor) =>
- CleanClass<T>
<T>(ctx) =>
- Wrapper<T>
},
"transition"
>> mounted($) =>
- void
# on
(name)
on<K>(name) =>
- On<Fn<[ EventHandler<TextAreaCodeElement, LifecycleEvents & object [K]> ], Off>>
# toJSON
()
toJSON() =>
- Pick<TextAreaCodeElement, keyof TextAreaCodeElement>
All contributions are welcome!