drab - editor

import "drab/editor/define";

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

Overview

Defined in: editor/index.ts:54

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

Defined in: editor/index.ts:68

Returns

Editor

Overrides

Base.constructor

Properties

keyPairs

keyPairs: object

Defined in: editor/index.ts:59

The characters that will be automatically closed when typed.

Index Signature

[key: string]: string

Accessors

event

Get Signature

get event(): keyof HTMLElementEventMap

Defined in: base/index.ts:42

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";

Returns

keyof HTMLElementEventMap

Set Signature

set event(value): void

Defined in: base/index.ts:46

Parameters

value

keyof HTMLElementEventMap

Returns

void

Inherited from

Base.event

text

Get Signature

get text(): string

Defined in: editor/index.ts:85

The current value of the textarea.

Returns

string

Set Signature

set text(value): void

Defined in: editor/index.ts:89

Parameters

value

string

Returns

void

textArea

Get Signature

get textArea(): HTMLTextAreaElement

Defined in: editor/index.ts:80

The content, expects an HTMLTextAreaElement.

Returns

HTMLTextAreaElement

Methods

announce()

announce(message): void

Defined in: base/index.ts:53

Parameters

message

string

message to announce to screen readers

Returns

void

Inherited from

Base.announce

connectedCallback()

connectedCallback(): void

Defined in: base/index.ts:171

Called when custom element is added to the page.

Returns

void

Inherited from

Base.connectedCallback

destroy()

destroy(): void

Defined in: base/index.ts:178

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

disconnectedCallback()

disconnectedCallback(): void

Defined in: base/index.ts:181

Called when custom element is removed from the page.

Returns

void

Inherited from

Base.disconnectedCallback

getContent()

getContent<T>(instance): T

Defined in: base/index.ts:74

Type Parameters

• T extends HTMLElement = HTMLElement

Parameters

instance

() => T

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

Returns

T

The element that matches the content selector.

Default

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

Inherited from

Base.getContent

getTrigger()

getTrigger<T>(): NodeListOf<T>

Defined in: base/index.ts:61

Type Parameters

• T extends HTMLElement = HTMLElement

Returns

NodeListOf<T>

All of the elements that match the trigger selector.

Default

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

Inherited from

Base.getTrigger

mount()

mount(): void

Defined in: editor/index.ts:343

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.

Returns

void

Overrides

Base.mount

safeListener()

safeListener<K, T>(type, listener, element, options): void

Defined in: base/index.ts:136

Wrapper around document.body.addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.

swapContent(revert): void

Defined in: base/index.ts:93

Finds the HTMLElement | HTMLTemplateElement via the swap selector and swaps this.content() with the content of the element found.

triggerListener<T, K>(listener, type, options?): void

Defined in: base/index.ts:153