@rathkit/rte-ui 0.0.0-stage → 0.1.0-alpha.0

package/dist/findbar.js

@@ -0,0 +1,187 @@
+import { setIcon } from "./icon.js";
+const registry = () => globalThis.CSS?.highlights;
+const HighlightCtor = () => globalThis.Highlight;
+const MOST_PAINTED = 2000;
+export function createFindBar(options) {
+    const { editor, part, message } = options;
+    let counter = 0;
+    const bar = part(document.createElement("div"), "findbar");
+    bar.setAttribute("role", "search");
+    bar.hidden = true;
+    const field = (label, name) => {
+        const id = `rk-find-${++counter}`;
+        const wrap = part(document.createElement("div"), "find-row");
+        const text = part(document.createElement("label"), "find-label");
+        text.htmlFor = id;
+        text.textContent = label;
+        const input = part(document.createElement("input"), "find-field");
+        input.id = id;
+        input.type = "text";
+        input.name = name;
+        input.autocomplete = "off";
+        input.spellcheck = false;
+        wrap.append(text, input);
+        return { wrap, input, text };
+    };
+    const iconButton = (name, label) => {
+        const b = part(document.createElement("button"), "button");
+        b.type = "button";
+        const i = part(document.createElement("span"), "icon");
+        i.setAttribute("aria-hidden", "true");
+        if (setIcon(i, options.icon(name)))
+            b.appendChild(i);
+        else
+            b.textContent = label;
+        b.setAttribute("aria-label", label);
+        b.setAttribute("data-rk-tip", label);
+        return b;
+    };
+    const textButton = (label) => {
+        const b = part(document.createElement("button"), "action");
+        b.type = "button";
+        b.textContent = label;
+        return b;
+    };
+    const find = field("", "find");
+    const replace = field("", "replace");
+    const count = part(document.createElement("span"), "find-count");
+    const previous = iconButton("chevron-up", "");
+    const next = iconButton("chevron-down", "");
+    const matchCase = part(document.createElement("button"), "button");
+    matchCase.type = "button";
+    matchCase.textContent = "Aa";
+    const wholeWord = part(document.createElement("button"), "button");
+    wholeWord.type = "button";
+    wholeWord.textContent = "ab";
+    const replaceOne = textButton("");
+    const replaceAll = textButton("");
+    const close = iconButton("close", "");
+    const first = part(document.createElement("div"), "find-line");
+    first.append(find.wrap, previous, next, matchCase, wholeWord, count, close);
+    const second = part(document.createElement("div"), "find-line");
+    second.append(replace.wrap, replaceOne, replaceAll);
+    bar.append(first, second);
+    const words = () => {
+        find.text.textContent = message("find.find");
+        replace.text.textContent = message("find.replaceWith");
+        for (const [el, key] of [[previous, "find.previous"], [next, "find.next"], [close, "find.close"], [matchCase, "find.matchCase"], [wholeWord, "find.wholeWord"]]) {
+            el.setAttribute("aria-label", message(key));
+            el.setAttribute("data-rk-tip", message(key));
+        }
+        replaceOne.textContent = message("find.replace");
+        replaceAll.textContent = message("find.replaceAll");
+    };
+    words();
+    const info = () => editor.commands.state("find.set").value;
+    let lastOpens = -1;
+    let lastCount = "";
+    let announceTimer;
+    const paint = (state) => {
+        const highlights = registry();
+        const Highlight = HighlightCtor();
+        if (!highlights || !Highlight || !editor.rangeFor)
+            return;
+        if (!state.open || state.matches.length === 0) {
+            highlights.delete("rk-find");
+            highlights.delete("rk-find-current");
+            return;
+        }
+        const ranges = [];
+        let current;
+        state.matches.slice(0, MOST_PAINTED).forEach((m, i) => {
+            const range = editor.rangeFor?.({ path: [...m.path], offset: m.from }, { path: [...m.path], offset: m.to });
+            if (!range)
+                return;
+            if (i === state.index)
+                current = range;
+            else
+                ranges.push(range);
+        });
+        highlights.set("rk-find", new Highlight(...ranges));
+        if (current)
+            highlights.set("rk-find-current", new Highlight(current));
+        else
+            highlights.delete("rk-find-current");
+    };
+    const render = () => {
+        const state = info();
+        bar.hidden = !state.open;
+        if (!state.open) {
+            paint(state);
+            lastOpens = state.opens;
+            return;
+        }
+        if (state.query !== find.input.value)
+            find.input.value = state.query;
+        matchCase.setAttribute("aria-pressed", String(state.matchCase));
+        wholeWord.setAttribute("aria-pressed", String(state.wholeWord));
+        const text = state.query === "" ? "" : state.matches.length === 0 ? message("find.none")
+            : state.index >= 0 ? message("find.count", "", { current: String(state.index + 1), total: String(state.matches.length) })
+                : message("find.total", "", { total: String(state.matches.length) });
+        count.textContent = text;
+        if (text !== lastCount) {
+            lastCount = text;
+            if (announceTimer)
+                clearTimeout(announceTimer);
+            if (text !== "")
+                announceTimer = setTimeout(() => options.announce(text), 500);
+        }
+        for (const b of [previous, next, replaceOne, replaceAll])
+            b.setAttribute("aria-disabled", String(state.matches.length === 0));
+        paint(state);
+        if (state.opens !== lastOpens) {
+            lastOpens = state.opens;
+            find.input.focus();
+            find.input.select();
+        }
+        if (state.index >= 0 && editor.rangeFor) {
+            const m = state.matches[state.index];
+            const at = m && editor.rangeFor({ path: [...m.path], offset: m.from }, { path: [...m.path], offset: m.to });
+            (at?.startContainer instanceof Element ? at.startContainer : at?.startContainer.parentElement)?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+        }
+    };
+    const run = (name, arg) => { editor.commands.run(name, arg); };
+    const onFind = () => run("find.set", { query: find.input.value });
+    find.input.addEventListener("input", onFind);
+    find.input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            run(e.shiftKey ? "find.previous" : "find.next");
+        }
+    });
+    replace.input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            run("find.replace", { with: replace.input.value });
+        }
+    });
+    bar.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            run("find.close");
+        }
+    });
+    previous.addEventListener("click", () => run("find.previous"));
+    next.addEventListener("click", () => run("find.next"));
+    matchCase.addEventListener("click", () => run("find.set", { matchCase: matchCase.getAttribute("aria-pressed") !== "true" }));
+    wholeWord.addEventListener("click", () => run("find.set", { wholeWord: wholeWord.getAttribute("aria-pressed") !== "true" }));
+    replaceOne.addEventListener("click", () => run("find.replace", { with: replace.input.value }));
+    replaceAll.addEventListener("click", () => run("find.replaceAll", { with: replace.input.value }));
+    close.addEventListener("click", () => run("find.close"));
+    const stop = editor.commands.subscribe("find.set", render);
+    render();
+    return {
+        element: bar,
+        refresh() { words(); render(); },
+        destroy() {
+            stop();
+            if (announceTimer)
+                clearTimeout(announceTimer);
+            const highlights = registry();
+            highlights?.delete("rk-find");
+            highlights?.delete("rk-find-current");
+            bar.remove();
+        },
+    };
+}

package/dist/icon.d.ts

@@ -0,0 +1,2 @@
+/** True when something was drawn. */
+export declare function setIcon(target: HTMLElement, source: string | (() => Node) | undefined): boolean;

package/dist/icon.js

@@ -0,0 +1,25 @@
+const cache = new Map();
+function parse(svg) {
+    const hit = cache.get(svg);
+    if (hit !== undefined)
+        return hit;
+    const template = document.createElement("template");
+    template.innerHTML = svg;
+    const ok = template.content.childElementCount === 1 && template.content.firstElementChild?.localName === "svg" && !template.content.querySelector("script, foreignObject, [onload], [onclick], [onerror]");
+    const fragment = ok ? template.content : null;
+    cache.set(svg, fragment);
+    return fragment;
+}
+export function setIcon(target, source) {
+    if (source === undefined) {
+        target.replaceChildren();
+        return false;
+    }
+    const node = typeof source === "function" ? source() : parse(source)?.cloneNode(true);
+    if (!node) {
+        target.replaceChildren();
+        return false;
+    }
+    target.replaceChildren(node);
+    return true;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { createUi } from "./ui.ts";
+export { DEFAULT_MESSAGES } from "./messages.ts";
+export type { MessageKey, PartContext, PartName, StyleProvider, Ui, UiEditor, UiOptions } from "./types.ts";

package/dist/index.js

@@ -0,0 +1,2 @@
+export { createUi } from "./ui.js";
+export { DEFAULT_MESSAGES } from "./messages.js";

package/dist/messages.d.ts

@@ -0,0 +1,3 @@
+import type { MessageKey } from "./types.ts";
+export declare const DEFAULT_MESSAGES: Readonly<Record<string, string>>;
+export declare function text(table: Partial<Record<MessageKey, string>> | undefined, key: MessageKey, fallback?: string, values?: Record<string, string>): string;

package/dist/messages.js

@@ -0,0 +1,34 @@
+export const DEFAULT_MESSAGES = {
+    "toolbar.label": "Formatting",
+    "dialog.ok": "OK",
+    "dialog.cancel": "Cancel",
+    "field.required": "{label} is required.",
+    "field.url": "{label} must be a web, mail or phone address.",
+    "toggle.on": "{label} on",
+    "toggle.off": "{label} off",
+    "status.word": "{count} word",
+    "status.words": "{count} words",
+    "status.characters": "{count} characters",
+    "status.selection": "{selected} of {total} words",
+    "source.label": "HTML source",
+    "shortcuts.title": "Keyboard shortcuts",
+    "shortcuts.action": "Action",
+    "shortcuts.keys": "Keys",
+    "shortcuts.close": "Close",
+    "find.find": "Find",
+    "find.replaceWith": "Replace with",
+    "find.previous": "Previous match",
+    "find.next": "Next match",
+    "find.close": "Close find and replace",
+    "find.matchCase": "Match case",
+    "find.wholeWord": "Whole word",
+    "find.replace": "Replace",
+    "find.replaceAll": "Replace all",
+    "find.none": "No matches",
+    "find.count": "{current} of {total}",
+    "find.total": "{total} matches",
+};
+export function text(table, key, fallback = "", values = {}) {
+    const raw = table?.[key] ?? DEFAULT_MESSAGES[key] ?? fallback;
+    return raw.replace(/\{(\w+)\}/g, (_, name) => values[name] ?? "");
+}

package/dist/shortcuts.d.ts

@@ -0,0 +1,14 @@
+import type { UiEditor } from "./types.ts";
+export interface ShortcutsOptions {
+    readonly editor: UiEditor;
+    readonly root: HTMLElement;
+    readonly part: <E extends HTMLElement>(el: E, name: string) => E;
+    readonly message: (key: string) => string;
+}
+export interface Shortcuts {
+    open(opener: HTMLElement): void;
+    /** Words may have changed: write them again. */
+    refresh(): void;
+    destroy(): void;
+}
+export declare function createShortcuts(options: ShortcutsOptions): Shortcuts;

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;