editor

Source

<drab-editor>
    <textarea
        data-content
        class="input mb-2 h-36"
        placeholder="asterisk: ctrl+i, anchor: ctrl+["
    ></textarea>
    <div class="flex gap-2">
        <button
            data-trigger
            data-value="&#8226; "
            data-type="block"
            data-key="i"
            class="button button-primary"
        >
            Bullet
        </button>
        <button
            data-trigger
            data-value="# "
            data-type="block"
            class="button button-primary"
        >
            Heading
        </button>
        <button
            data-trigger
            data-value="*"
            data-type="wrap"
            class="button button-primary italic"
        >
            Italic
        </button>
        <button
            data-trigger
            data-value="[text](href)"
            data-type="inline"
            data-key="["
            class="button button-primary"
        >
            Anchor
        </button>
    </div>
</drab-editor>

Overview

Enhances the textarea element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, the text value is just a string, so you can easily store it in a database or manipulate it without learning a separate API.

data-value

Set the value of the text to be inserted using the data-value attribute on the trigger.

data-type

Set the data-type attribute of the trigger to specify how the content should be inserted into the textarea.

block will be inserted at the beginning of the selected line.
wrap will be inserted before and after the current selection.
inline will be inserted at the current selection.

data-key

Add a ctrl/meta keyboard shortcut for the content based on the data-key attribute.

Other features:

Automatically adds closing characters for keyPairs. For example, when typing (, ) will be inserted and typed over when reached. All content with data-type="wrap" is also added to keyPairs.
Highlights the first word of the text inserted if it contains letters.
Automatically increments/decrements ordered lists.
Adds the starting character to the next line for block content.
On double click, highlight is corrected to only highlight the current word without space around it.
tab key will indent and not change focus if the selection is within a code block (three backticks).
When text is highlighted and a wrap character keyPair is typed, the highlighted text will be wrapped with the character instead of removing it. For example, if a word is highlighted and the " character is typed, the work will be surrounded by "s.

Extends

Base

Constructors

new Editor()

new Editor(): Editor

Properties

#listenerController

private #listenerController: AbortController

To clean up event listeners added to document when the element is removed.

Inherited from

Base.#listenerController

Source

src/package/base/index.ts:17

#openChars

private #openChars: string[] = []

Array of keyPair characters that have been opened.

Source

src/package/editor/index.ts:51

keyPairs

keyPairs: object

The characters that will be automatically closed when typed.

Index signature

[key: string]: string

Source

src/package/editor/index.ts:54

Accessors

#contentElements

get private #contentElements(): ContentElement[]

An array of ContentElements derived from each trigger’s data attributes.

Returns

ContentElement[]

Source

src/package/editor/index.ts:89

#currentBlock

get private #currentBlock(): number

splits the content by ““`” and finds the current index of the selectionStart

@returns current codeblock (index) of selectionStart

Returns

number

Source

src/package/editor/index.ts:103

#selectionEnd

get private #selectionEnd(): number

Gets the end position of the selection

Returns

number

Source

src/package/editor/index.ts:116

#selectionStart

get private #selectionStart(): number

Gets the start position of the selection.

Returns

number

Source

src/package/editor/index.ts:121

event

get event(): keyof HTMLElementEventMap

Event for the trigger to execute.

For example, set to "mouseover" to execute the event when the user hovers the mouse over the trigger, instead of when they click it.

Default

"click";

set event(value): void

Parameters

• value: keyof HTMLElementEventMap

Returns

keyof HTMLElementEventMap

Source

src/package/base/index.ts:30

text

get text(): string

The current value of the textarea.

set text(value): void

Parameters

• value: string

Returns

string

Source

src/package/editor/index.ts:80

textArea

get textArea(): HTMLTextAreaElement

The content, expects an HTMLTextAreaElement.

Returns

HTMLTextAreaElement

Source

src/package/editor/index.ts:75

Methods

#addContent()

private #addContent(el): Promise<void>

Inserts the text and then sets the caret position based on the ContentElement selected.

Parameters

• el: ContentElement

selected content element

Returns

Promise<void>

Source

src/package/editor/index.ts:227

#correctFollowing()

private #correctFollowing(currentLineNumber, decrement): void

Increments/decrements the start of following lines if they are numbers

Prevents this:

1. presses enter here when two items in list
2.
2.

Instead:

1.
2.
3.

Parameters

• currentLineNumber: number

• decrement: boolean= false

if following lines should be decremented instead of incremented

Returns

void

Source

src/package/editor/index.ts:311

#getContentElement()

private #getContentElement(trigger): ContentElement

Parameters

• trigger: HTMLElement

The trigger html element.

Returns

ContentElement

The ContentElement based on the trigger’s attributes.

Source

src/package/editor/index.ts:134

#getLineInfo()

private #getLineInfo(): object

Returns

object

lines as an array, current line number, current column number

columnNumber

columnNumber: number

lineNumber

lineNumber: number = i

lines

lines: string[]

Example

const { lines, lineNumber, columnNumber } = getLineInfo();

Source

src/package/editor/index.ts:269

#getRepeat()

private #getRepeat(str): string

checks if there is a block element or a number at the beginning of the string

Parameters

• str: undefined | string

Returns

string

what is found, or the empty string

Source

src/package/editor/index.ts:242

#insertText()

private #insertText(el, selectionStart, selectionEnd): Promise<void>

Inserts text into the textarea based on the display property of the ContentElement.

Parameters

• el: ContentElement

the content element

• selectionStart: number

current start position the selection

• selectionEnd: number

current end position of the selection

Returns

Promise<void>

Source

src/package/editor/index.ts:149

#setCaretPosition()

private #setCaretPosition(text, selectionStart, selectionEnd): Promise<void>

Sets the caret position after text is inserted based on the length of the text.
Highlights text if the content contains any letters.

Parameters

• text: string

• selectionStart: number

current start position the selection

• selectionEnd: number

current end position of the selection

Returns

Promise<void>

Source

src/package/editor/index.ts:191

#setSelectionRange()

private #setSelectionRange(start, end): void

Sets the current cursor selection in the textarea

Parameters

• start: number

• end: number

Returns

void

Source

src/package/editor/index.ts:126

connectedCallback()

connectedCallback(): void

Called when custom element is added to the page.

Returns

void

Inherited from

Base.connectedCallback

Source

src/package/base/index.ts:155

destroy()

destroy(): void

Passed into disconnectedCallback, since Base needs to run disconnectedCallback as well. It is overridden in each element that needs to run disconnectedCallback.

Returns

void

Inherited from

Base.destroy

Source

src/package/base/index.ts:162

disconnectedCallback()

disconnectedCallback(): void

Called when custom element is removed from the page.

Returns

void

Inherited from

Base.disconnectedCallback

Source

src/package/base/index.ts:167

getContent()

getContent<T>(instance): T

Type parameters

• T extends HTMLElement = HTMLElement

Parameters

• instance= undefined

The instance of the desired element, ex: HTMLDialogElement. Defaults to HTMLElement.

Returns

T

The element that matches the content selector.

Inherited from

Base.getContent

Default

this.querySelector("[data-content]");

Source

src/package/base/index.ts:55

getTrigger()

getTrigger<T>(): NodeListOf<T>

Type parameters

• T extends HTMLElement = HTMLElement

Returns

NodeListOf<T>

All of the elements that match the trigger selector.

Inherited from

Base.getTrigger

Default

this.querySelectorAll("[data-trigger]");

Source

src/package/base/index.ts:42

mount()

mount(): void

Passed into queueMicrotask in connectedCallback. It is overridden in each component that needs to run connectedCallback.

The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn’t necessary, but when client side rendering, the HTML within the custom element isn’t available before connectedCallback is called. By waiting until the next microtask, the HTML content is available—then for example, listeners can be attached to elements inside.