textarea-code

Web Component that extends a textarea element with code editor behavior.

npm i textarea-code

pnpm add textarea-code

yarn add textarea-code

Examples

# web

Try it live

# 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
  }
}
`

API

# Buffer

src/buffer.ts#L19

# constructor(textarea, insert, options)

src/buffer.ts#L24

# new Buffer()

Buffer

# textarea

HTMLTextAreaElement

# insert(text)
# text

string

insert(text)  =>

void

# options  =  {}

Partial<Options>

# insert

src/buffer.ts#L21

# (text)
# text

string

(text)  =>

void

# options

src/buffer.ts#L22

Options

# numberOfLines

src/buffer.ts#L42

# tab

src/buffer.ts#L38

# value

src/buffer.ts#L34

# deleteLine()

src/buffer.ts#L362

deleteLine()  =>

void

# duplicate()

src/buffer.ts#L334

duplicate()  =>

void

# getArea({ end, start })

src/buffer.ts#L112

{

# end

src/buffer.ts#L112

Point

# start

src/buffer.ts#L112

Point

}

getArea({ end, start })  =>

[ number, number ]

# getLineCol(n)

src/buffer.ts#L83

# n

number

getLineCol(n)  =>

Point

# getPositionFromLineCol(pos)

src/buffer.ts#L98

# pos

Point

getPositionFromLineCol(pos)  =>

number

# getRange()

src/buffer.ts#L66

getRange()  =>

{
# caretIndex  =  ...

number

# end

Point

# hasSelection  =  ...

boolean

# head

Point

# selectionDirection

"forward" | "backward" | "none"

# selectionEnd

number

# selectionStart

number

# start

Point

# tail

Point

}

# indent(unindent)

src/buffer.ts#L241

# unindent

boolean

indent(unindent)  =>

void

# lineAt(line)

src/buffer.ts#L50

# line

number

lineAt(line)  =>

string

# 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

# lines

number

# withSelection

boolean

moveCaretLines(lines, withSelection)  =>

void

# moveCaretTo(Point, selection, direction)

src/buffer.ts#L124

Point

# selection

null | Point

# direction  =  ...

"forward" | "backward" | "none"

moveCaretTo(Point, selection, direction)  =>

void

# moveLines(diff)

src/buffer.ts#L281

# diff

number

moveLines(diff)  =>

void

# replaceBlock(replacer)

src/buffer.ts#L144

# replacer(text, startLine)
# text

string

# startLine

number

replacer(text, startLine)  =>

{
# diff

src/buffer.ts#L145

number

# left

src/buffer.ts#L145

Point

# text

src/buffer.ts#L145

string

}

replaceBlock(replacer)  =>

void

# scrollIntoView(pos)

src/buffer.ts#L54

# pos

number

scrollIntoView(pos)  =>

void

# setSelectionRange(start, end, direction)

src/buffer.ts#L118

# start

number

# end

number

# direction

SelectionDirection

setSelectionRange(start, end, direction)  =>

void

# toggleDoubleComment()

src/buffer.ts#L210

toggleDoubleComment()  =>

void

# toggleSingleComment()

src/buffer.ts#L186

toggleSingleComment()  =>

void

# getLineCol(value, n)

src/buffer.ts#L85

# value

string

# n

number

getLineCol(value, n)  =>

Point

# getPositionFromLineCol(value, point)

src/buffer.ts#L102

# value

string

# point

Point

getPositionFromLineCol(value, point)  =>

number

# lineAt(value, line)

src/buffer.ts#L46

# value

string

# line

number

lineAt(value, line)  =>

string

# TextAreaCodeElement

src/textarea-code.ts#L10

# constructor(args)

# new TextAreaCodeElement()

TextAreaCodeElement

# args

any []

# $
src/sigl/dist/types/sigl.d.ts#L25
Context<TextAreaCodeElement & JsxContext<TextAreaCodeElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

# buffer

src/textarea-code.ts#L15

Buffer

# comments  =  '// /* */'

src/textarea-code.ts#L13

string

# context

src/sigl/dist/types/sigl.d.ts#L26

ContextClass<TextAreaCodeElement & JsxContext<TextAreaCodeElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

# dispatch

src/sigl/dist/types/events.d.ts#L4

Dispatch<

# (name, detail, init)
# name

Event | Narrow<K, string>

# detail

E

# init

CustomEventInit<any>

<K, E>(name, detail, init)  =>

any

>

# host

src/sigl/dist/types/sigl.d.ts#L24

TextAreaCodeElement

# lineHeight  =  16

src/textarea-code.ts#L18

number

# onKeyDown

src/textarea-code.ts#L19

EventHandler<TextAreaCodeElement, KeyboardEvent>

# onmounted

EventHandler<TextAreaCodeElement, CustomEvent<any>>

# onunmounted

EventHandler<TextAreaCodeElement, CustomEvent<any>>

# pageSize

src/textarea-code.ts#L16

number

# tabSize  =  2

src/textarea-code.ts#L11

number

# tabStyle  =  'spaces'

src/textarea-code.ts#L12

"spaces" | "tabs"

# viewHeight

src/textarea-code.ts#L17

number

# created(ctx)

# ctx
Context<TextAreaCodeElement & JsxContext<TextAreaCodeElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

created(ctx)  =>

void

# mounted($)

src/textarea-code.ts#L21

# $
Context<TextAreaCodeElement & JsxContext<TextAreaCodeElement> & Omit<{

# ctor

Class<T>

<T>(ctor)  =>

CleanClass<T>
# ctx

T | Class<T>

<T>(ctx)  =>

Wrapper<T>
} & __module & {
# Boolean

src/sigl/dist/types/index.d.ts#L9

undefined | boolean

# Number

src/sigl/dist/types/index.d.ts#L8

undefined | number

# String

src/sigl/dist/types/index.d.ts#L7

undefined | string

}, "transition">>

mounted($)  =>

void

# on(name)

# name

K

on<K>(name)  =>

On<Fn<[ EventHandler<TextAreaCodeElement, LifecycleEvents & object [K]> ], Off>>

# toJSON()

toJSON()  =>

Pick<TextAreaCodeElement, keyof TextAreaCodeElement>

# Options

src/buffer.ts#L11

# comments

src/buffer.ts#L14

[ string, string, string ]

# tabSize

src/buffer.ts#L13

number

# tabStyle

src/buffer.ts#L12

"spaces" | "tabs"

# Point

src/types.ts#L3

# col

src/types.ts#L5

number

# line

src/types.ts#L4

number

# SelectionDirection

src/types.ts#L1

"forward" | "backward" | "none"

Credits

• sigl by stagas – Web framework

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas