drab/dist/editor/index.d.ts

Interactivity for You

import { Base, type BaseAttributes } from "../base/index.js";
export type EditorAttributes = BaseAttributes;
export type EditorTriggerAttributes = {
    "data-value": string;
    "data-key": string;
    "data-type": "block" | "wrap" | "inline";
};
/**
 * A piece of content to insert into the `textarea`.
 */
export type ContentElement = {
    /** How to insert the content. */
    type: "block" | "inline" | "wrap";
    /** The value to insert. */
    value: string;
    /** An optional keyboard shortcut. */
    key?: string;
};
/**
 * 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.
 */
export declare class Editor extends Base {
    #private;
    /** The characters that will be automatically closed when typed. */
    keyPairs: {
        [key: string]: string;
    };
    constructor();
    /** The `content`, expects an `HTMLTextAreaElement`. */
    get textArea(): HTMLTextAreaElement;
    /** The current `value` of the `textarea`. */
    get text(): string;
    set text(value: string);
    mount(): void;
}