@rathkit/rte-ui 0.0.0 → 0.1.0-alpha.3

package/dist/shortcuts.js

@@ -0,0 +1,68 @@
+import { createDialog } from "@rathkit/rte-headless";
+let counter = 0;
+export function createShortcuts(options) {
+    const { editor, root, message } = options;
+    const element = options.part(document.createElement("dialog"), "dialog");
+    const titleId = `rk-shortcuts-title-${++counter}`;
+    element.setAttribute("aria-labelledby", titleId);
+    element.setAttribute("data-rk-shortcuts", "");
+    const title = options.part(document.createElement("h2"), "dialog-title");
+    title.id = titleId;
+    const table = options.part(document.createElement("table"), "shortcuts");
+    const actions = options.part(document.createElement("div"), "actions");
+    const done = options.part(document.createElement("button"), "action");
+    done.type = "button";
+    done.setAttribute("data-primary", "");
+    actions.appendChild(done);
+    element.append(title, table, actions);
+    root.appendChild(element);
+    const from = { opener: null };
+    const dialog = createDialog({ dialog: element, editor, get opener() { return from.opener; } });
+    done.addEventListener("click", () => dialog.close("cancel"));
+    const words = () => {
+        title.textContent = message("shortcuts.title");
+        done.textContent = message("shortcuts.close");
+    };
+    words();
+    const fill = () => {
+        const labels = new Map(editor.commands.list().map((c) => [c.name, c.label]));
+        const head = document.createElement("thead");
+        const headRow = document.createElement("tr");
+        for (const key of ["shortcuts.action", "shortcuts.keys"]) {
+            const th = document.createElement("th");
+            th.scope = "col";
+            th.textContent = message(key);
+            headRow.appendChild(th);
+        }
+        head.appendChild(headRow);
+        const body = document.createElement("tbody");
+        const seen = new Set();
+        for (const binding of editor.keymap.list()) {
+            if (seen.has(binding.command))
+                continue;
+            seen.add(binding.command);
+            const keys = editor.keymap.shortcutFor(binding.command);
+            if (!keys)
+                continue;
+            const row = document.createElement("tr");
+            const what = document.createElement("td");
+            what.textContent = labels.get(binding.command) ?? binding.command;
+            const how = document.createElement("td");
+            const kbd = document.createElement("kbd");
+            kbd.textContent = keys;
+            how.appendChild(kbd);
+            row.append(what, how);
+            body.appendChild(row);
+        }
+        table.replaceChildren(head, body);
+    };
+    return {
+        open(opener) {
+            from.opener = opener;
+            fill();
+            dialog.open();
+        },
+        refresh: words,
+        destroy() { dialog.destroy(); element.remove(); },
+    };
+}

package/dist/source.d.ts

@@ -0,0 +1,15 @@
+import type { UiEditor } from "./types.ts";
+export interface SourceViewOptions {
+    readonly editor: UiEditor;
+    readonly content: HTMLElement;
+    readonly toolbar: HTMLElement;
+    readonly part: <E extends HTMLElement>(el: E, name: string) => E;
+    readonly message: (key: string) => string;
+    readonly announce: (message: string) => void;
+}
+export interface SourceView {
+    toggle(opener: HTMLElement): void;
+    readonly isOpen: boolean;
+    destroy(): void;
+}
+export declare function createSourceView(options: SourceViewOptions): SourceView;

package/dist/source.js

@@ -0,0 +1,67 @@
+export function createSourceView(options) {
+    const { editor, content, toolbar } = options;
+    const area = options.part(document.createElement("textarea"), "source");
+    area.hidden = true;
+    area.spellcheck = false;
+    area.setAttribute("aria-label", options.message("source.label"));
+    area.setAttribute("autocapitalize", "off");
+    content.appendChild(area);
+    let original = "";
+    let opener;
+    const button = () => toolbar.querySelector('[data-rk-item="source"]');
+    const close = (apply) => {
+        if (area.hidden)
+            return;
+        const changed = area.value !== original;
+        area.hidden = true;
+        content.removeAttribute("data-rk-source");
+        button()?.setAttribute("aria-pressed", "false");
+        if (apply && changed)
+            editor.commands.run("document.setHtml", { html: area.value });
+        editor.focus();
+        (opener ?? button())?.removeAttribute("data-rk-busy");
+    };
+    const open = (from) => {
+        opener = from;
+        original = editor.getHtml?.("\n") ?? "";
+        area.value = original;
+        area.hidden = false;
+        content.setAttribute("data-rk-source", "");
+        button()?.setAttribute("aria-pressed", "true");
+        area.focus();
+        area.setSelectionRange(0, 0);
+    };
+    const guard = (e) => {
+        if (area.hidden)
+            return;
+        const control = e.target?.closest("[data-rk-item]");
+        if (!control || control.getAttribute("data-rk-item") === "source")
+            return;
+        if (e.type === "keydown" && !["Enter", " "].includes(e.key))
+            return;
+        e.preventDefault();
+        e.stopImmediatePropagation();
+    };
+    toolbar.addEventListener("click", guard, true);
+    toolbar.addEventListener("keydown", guard, true);
+    area.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            close(false);
+        }
+    });
+    return {
+        toggle(from) { if (area.hidden)
+            open(from);
+        else
+            close(true); },
+        get isOpen() { return !area.hidden; },
+        destroy() {
+            toolbar.removeEventListener("click", guard, true);
+            toolbar.removeEventListener("keydown", guard, true);
+            area.remove();
+            content.removeAttribute("data-rk-source");
+        },
+    };
+}

package/dist/standard.d.ts

@@ -0,0 +1,5 @@
+import { createUi } from "./ui.ts";
+import type { Ui, UiEditor, UiOptions } from "./types.ts";
+export declare function createStandardUi(editor: UiEditor, options: UiOptions): Ui;
+export { createUi };
+export type { Ui, UiEditor, UiOptions };

package/dist/standard.js

@@ -0,0 +1,6 @@
+import { defaultIcons } from "@rathkit/rte-icons";
+import { createUi } from "./ui.js";
+export function createStandardUi(editor, options) {
+    return createUi(editor, { ...options, defaults: { ...options.defaults, icons: { ...defaultIcons, ...options.defaults?.icons } } });
+}
+export { createUi };

package/dist/types.d.ts

@@ -0,0 +1,76 @@
+import type { Toolbar, ItemState, HeadlessEditor } from "@rathkit/rte-headless";
+import type { Counts, UiItem } from "@rathkit/rte-core";
+import type { TokenName } from "@rathkit/rte-themes";
+/** The parts the interface is made of. Selectors and `classes` address them by these names (as `data-rk-part`). */
+export type PartName = "root" | "toolbar" | "button" | "select" | "separator" | "icon" | "label" | "content" | "menu-host" | "menu" | "menu-item" | "menu-separator" | "menu-keys" | "swatch" | "tooltip" | "status" | "source" | "shortcuts" | "findbar" | "find-line" | "find-row" | "find-label" | "find-field" | "find-count" | "dialog" | "dialog-title" | "field-label" | "field-check" | "field" | "field-error" | "actions" | "action";
+/** Words the interface says. Each has a default in English; this table is also the way to translate it. */
+export type MessageKey = "toolbar.label" | "dialog.ok" | "dialog.cancel" | "field.required" | "field.url" | "toggle.on" | "toggle.off" | "status.word" | "status.words" | "status.characters" | "status.selection" | "source.label" | "shortcuts.title" | "shortcuts.action" | "shortcuts.keys" | "shortcuts.close" | "find.find" | "find.replaceWith" | "find.previous" | "find.next" | "find.close" | "find.matchCase" | "find.wholeWord" | "find.replace" | "find.replaceAll" | "find.none" | "find.count" | "find.total"
+/** Rename any item: `item.bold`, `item.link`, and so on. */
+ | `item.${string}`;
+/** What a replacement part gets: the same headless state the default part uses, and a way to run the item. */
+export interface PartContext {
+    readonly item: UiItem;
+    readonly state: ItemState;
+    /** Runs the item's command (a toggle or button) or, for a select, with the chosen value. */
+    run(value?: unknown): boolean;
+}
+/** Everything about how the interface looks, as plain data. No code is needed for the first four. */
+export interface StyleProvider {
+    /** A preset name from `@rathkit/rte-themes` (`light`, `dark`, `auto`, `high-contrast`). Load that theme's CSS file. */
+    readonly theme?: string;
+    readonly scheme?: "light" | "dark";
+    readonly density?: "compact" | "comfortable";
+    /** Token values, applied as custom properties on the root: beats the preset. */
+    readonly tokens?: Partial<Record<TokenName, string>>;
+    /** SVG markup (trusted: it is yours) or a function that makes a node. Missing names fall back to the defaults, if any. */
+    readonly icons?: Readonly<Record<string, string | (() => Node)>>;
+    /** Extra classes added to every element of a part, for utility-class systems. */
+    readonly classes?: Partial<Record<PartName, string>>;
+    readonly messages?: Partial<Record<MessageKey, string>>;
+    /** The one code hook, a last resort: replace the element of a part. It must follow the same accessibility rules. */
+    readonly parts?: {
+        readonly button?: (context: PartContext) => HTMLElement;
+    };
+}
+/** What the interface needs of an editor: the headless needs, and the element that is the editing surface. */
+export type UiEditor = HeadlessEditor & {
+    readonly element: HTMLElement;
+    /** Words and characters, for the status line. Without it there is no status line. */
+    counts?(): {
+        readonly document: Counts;
+        readonly selection: Counts;
+    };
+    /** The document as HTML, for the source view. Without it there is no source view. */
+    getHtml?(separator?: string): string;
+    /** The part of the page between two positions, for painting matches. Without it matches are not painted. */
+    rangeFor?(from: {
+        path: number[];
+        offset: number;
+    }, to: {
+        path: number[];
+        offset: number;
+    }): Range | null;
+};
+export interface UiOptions {
+    /** The element the interface is built in. It gets the `rk-root` class. */
+    readonly root: HTMLElement;
+    readonly style?: StyleProvider;
+    /** A line under the writing area with the number of words and characters. Default: on, when the editor can count. */
+    readonly status?: boolean;
+    /** Which set of interface items to draw. Default: the main toolbar. */
+    readonly slot?: string;
+    /**
+     * Style that every `setStyle` is layered on top of: icons and messages given here stay unless the new style gives the same name.
+     * This is how the standard interface keeps its default icons when the theme is switched.
+     */
+    readonly defaults?: Pick<StyleProvider, "icons" | "messages">;
+}
+export interface Ui {
+    readonly root: HTMLElement;
+    readonly toolbar: Toolbar;
+    /** Changes how the interface looks, now: nothing is rebuilt. */
+    setStyle(next: StyleProvider): void;
+    /** Says something to assistive technology. */
+    announce(message: string): void;
+    destroy(): void;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui.d.ts

@@ -0,0 +1,2 @@
+import type { Ui, UiEditor, UiOptions } from "./types.ts";
+export declare function createUi(editor: UiEditor, options: UiOptions): Ui;