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

package/dist/findbar.js

@@ -9,7 +9,7 @@ export function createFindBar(options) {
     bar.setAttribute("role", "search");
     bar.hidden = true;
     const field = (label, name) => {
-        const id = `rk-find-${++counter}`;
+        const id = `rte-find-${++counter}`;
         const wrap = part(document.createElement("div"), "find-row");
         const text = part(document.createElement("label"), "find-label");
         text.htmlFor = id;
@@ -33,7 +33,7 @@ export function createFindBar(options) {
         else
             b.textContent = label;
         b.setAttribute("aria-label", label);
-        b.setAttribute("data-rk-tip", label);
+        b.setAttribute("data-rte-tip", label);
         return b;
     };
     const textButton = (label) => {
@@ -66,7 +66,7 @@ export function createFindBar(options) {
         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));
+            el.setAttribute("data-rte-tip", message(key));
         }
         replaceOne.textContent = message("find.replace");
         replaceAll.textContent = message("find.replaceAll");
@@ -82,8 +82,8 @@ export function createFindBar(options) {
         if (!highlights || !Highlight || !editor.rangeFor)
             return;
         if (!state.open || state.matches.length === 0) {
-            highlights.delete("rk-find");
-            highlights.delete("rk-find-current");
+            highlights.delete("rte-find");
+            highlights.delete("rte-find-current");
             return;
         }
         const ranges = [];
@@ -97,11 +97,11 @@ export function createFindBar(options) {
             else
                 ranges.push(range);
         });
-        highlights.set("rk-find", new Highlight(...ranges));
+        highlights.set("rte-find", new Highlight(...ranges));
         if (current)
-            highlights.set("rk-find-current", new Highlight(current));
+            highlights.set("rte-find-current", new Highlight(current));
         else
-            highlights.delete("rk-find-current");
+            highlights.delete("rte-find-current");
     };
     const render = () => {
         const state = info();
@@ -179,8 +179,8 @@ export function createFindBar(options) {
             if (announceTimer)
                 clearTimeout(announceTimer);
             const highlights = registry();
-            highlights?.delete("rk-find");
-            highlights?.delete("rk-find-current");
+            highlights?.delete("rte-find");
+            highlights?.delete("rte-find-current");
             bar.remove();
         },
     };

package/dist/floating.d.ts

@@ -0,0 +1,24 @@
+import type { UiItem } from "@rathkit/rte-core";
+import type { UiEditor } from "./types.ts";
+export declare const FLOATING_SLOT = "toolbar.floating";
+export declare const CONTEXT_SLOT = "menu.context";
+type Dialog = Extract<UiItem, {
+    kind: "dialog";
+}>;
+export interface FloatingOptions {
+    readonly editor: UiEditor;
+    readonly root: HTMLElement;
+    readonly selectionToolbar: boolean;
+    readonly contextMenu: boolean;
+    readonly part: <E extends HTMLElement>(el: E, name: string) => E;
+    readonly message: (key: string, fallback?: string) => string;
+    readonly icon: (name: string | undefined) => string | (() => Node) | undefined;
+    readonly openDialog: (item: Dialog, opener: HTMLElement) => void;
+}
+export interface Floating {
+    /** Words or icons may have changed: draw again. */
+    refresh(): void;
+    destroy(): void;
+}
+export declare function createFloating(options: FloatingOptions): Floating;
+export {};

package/dist/floating.js

@@ -0,0 +1,286 @@
+import { createMenu, createToolbar } from "@rathkit/rte-headless";
+import { setIcon } from "./icon.js";
+export const FLOATING_SLOT = "toolbar.floating";
+export const CONTEXT_SLOT = "menu.context";
+function copyItems(editor, ids) {
+    const main = editor.ui.items("toolbar.main");
+    const out = [];
+    ids.forEach(([id, group], index) => {
+        const found = main.find((i) => i.id === id);
+        if (found && found.kind !== "menu" && found.kind !== "separator" && found.kind !== "select" && found.kind !== "panel")
+            out.push({ ...found, group, order: index });
+    });
+    return out;
+}
+const SELECTION_DEFAULTS = [["bold", "text"], ["italic", "text"], ["underline", "text"], ["strike", "text"], ["code", "text"], ["link", "link"], ["unlink", "link"], ["clear-format", "clear"]];
+const CONTEXT_DEFAULTS = [["undo", "history"], ["redo", "history"], ["bold", "text"], ["italic", "text"], ["underline", "text"], ["strike", "text"], ["code", "text"], ["link", "link"], ["unlink", "link"], ["clear-format", "clear"]];
+let counter = 0;
+export function createFloating(options) {
+    const { editor, root, part, message } = options;
+    const stops = [];
+    const redraws = [];
+    const seed = (slot, ids) => {
+        if (editor.ui.items(slot).length > 0)
+            return;
+        const removers = copyItems(editor, ids).map((item) => editor.ui.add(slot, item));
+        stops.push(() => removers.forEach((remove) => remove()));
+    };
+    const returnTo = document.createElement("button");
+    returnTo.type = "button";
+    returnTo.hidden = true;
+    returnTo.focus = () => editor.focus();
+    root.appendChild(returnTo);
+    stops.push(() => returnTo.remove());
+    const iconInto = (el, name) => {
+        const holder = part(document.createElement("span"), "icon");
+        holder.setAttribute("aria-hidden", "true");
+        if (!setIcon(holder, options.icon(name)))
+            return false;
+        el.appendChild(holder);
+        return true;
+    };
+    if (options.selectionToolbar) {
+        seed(FLOATING_SLOT, SELECTION_DEFAULTS);
+        const toolbar = createToolbar(editor, { slot: FLOATING_SLOT, label: message("floating.label") });
+        const bar = part(document.createElement("div"), "floating");
+        bar.hidden = true;
+        root.appendChild(bar);
+        const draw = () => {
+            const controls = [];
+            let group;
+            for (const item of toolbar.items) {
+                if (item.kind !== "button" && item.kind !== "toggle" && item.kind !== "dialog")
+                    continue;
+                const next = item.group ?? "";
+                if (group !== undefined && next !== group)
+                    controls.push(part(document.createElement("span"), "separator"));
+                group = next;
+                const button = part(document.createElement("button"), "button");
+                button.type = "button";
+                button.setAttribute("data-rte-item", item.id);
+                const state = toolbar.state(item.id);
+                const label = message(`item.${item.id}`, state?.label ?? item.id);
+                button.setAttribute("aria-label", label);
+                button.setAttribute("data-rte-tip", state?.shortcutLabel ? `${label} (${state.shortcutLabel})` : label);
+                if (!iconInto(button, state?.icon)) {
+                    const words = part(document.createElement("span"), "label");
+                    words.textContent = label;
+                    button.appendChild(words);
+                }
+                controls.push(button);
+            }
+            bar.replaceChildren(...controls);
+            unbind?.();
+            unbind = toolbar.bind(bar, { onOpen: (item) => { if (item.kind === "dialog")
+                    options.openDialog(item, returnTo); } });
+        };
+        let unbind;
+        draw();
+        const stopItems = toolbar.subscribe(() => {
+            const drawn = [...bar.querySelectorAll("[data-rte-item]")].map((el) => el.getAttribute("data-rte-item")).join("\u0000");
+            if (drawn !== toolbar.items.filter((i) => i.kind === "button" || i.kind === "toggle" || i.kind === "dialog").map((i) => i.id).join("\u0000"))
+                draw();
+        });
+        let pointerDown = false;
+        let touched = false;
+        let dismissedFor = "";
+        let timer;
+        const focused = () => {
+            const active = root.getRootNode().activeElement;
+            return !!active && (editor.element.contains(active) || bar.contains(active));
+        };
+        const selectionKey = () => {
+            const { anchor, focus } = editor.snapshot.selection;
+            return `${anchor.path.join()}:${anchor.offset}-${focus.path.join()}:${focus.offset}`;
+        };
+        const hasSelection = () => {
+            const s = editor.snapshot.selection;
+            return s.anchor.offset !== s.focus.offset || s.anchor.path.join() !== s.focus.path.join();
+        };
+        const place = () => {
+            const selection = root.ownerDocument.getSelection();
+            const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+            const rect = range?.getBoundingClientRect();
+            if (!rect || (rect.width === 0 && rect.height === 0)) {
+                bar.hidden = true;
+                return;
+            }
+            const box = root.getBoundingClientRect();
+            const left0 = box.left + root.clientLeft;
+            const top0 = box.top + root.clientTop;
+            bar.hidden = false;
+            const above = rect.top - top0 - bar.offsetHeight - 8;
+            const top = above >= 0 ? above : rect.bottom - top0 + 8;
+            const left = Math.max(0, Math.min(rect.left + rect.width / 2 - left0 - bar.offsetWidth / 2, root.clientWidth - bar.offsetWidth));
+            bar.style.top = `${Math.round(top)}px`;
+            bar.style.left = `${Math.round(left)}px`;
+        };
+        const update = () => {
+            timer = undefined;
+            const show = hasSelection() && !pointerDown && !touched && dismissedFor !== selectionKey() && focused();
+            if (show)
+                place();
+            else if (!bar.contains(root.getRootNode().activeElement))
+                bar.hidden = true;
+        };
+        const schedule = () => { timer ??= setTimeout(update, 80); };
+        stops.push(editor.subscribe(schedule));
+        const on = (target, type, handler, capture = false) => {
+            target.addEventListener(type, handler, capture);
+            stops.push(() => target.removeEventListener(type, handler, capture));
+        };
+        on(editor.element, "pointerdown", (e) => { pointerDown = true; touched = e.pointerType === "touch"; if (!bar.hidden && !bar.contains(e.target))
+            bar.hidden = true; });
+        on(root.ownerDocument, "pointerup", () => { if (pointerDown) {
+            pointerDown = false;
+            schedule();
+        } }, true);
+        on(root.ownerDocument, "pointercancel", () => { pointerDown = false; }, true);
+        on(editor.element, "focusout", (e) => { if (!bar.contains(e.relatedTarget))
+            schedule(); });
+        on(bar, "focusout", (e) => { if (!editor.element.contains(e.relatedTarget) && !bar.contains(e.relatedTarget))
+            schedule(); });
+        on(root.ownerDocument.defaultView ?? window, "scroll", () => { if (!bar.hidden)
+            place(); }, true);
+        on(root.ownerDocument.defaultView ?? window, "resize", () => { if (!bar.hidden)
+            place(); });
+        on(editor.element, "keydown", (e) => {
+            touched = false;
+            if (e.key === "F10" && e.altKey && !bar.hidden) {
+                e.preventDefault();
+                bar.querySelector("[data-rte-item][tabindex='0']")?.focus();
+            }
+        });
+        on(bar, "keydown", (e) => { if (e.key === "Escape") {
+            e.preventDefault();
+            dismissedFor = selectionKey();
+            bar.hidden = true;
+            editor.focus();
+        } });
+        redraws.push(draw);
+        stops.push(() => { stopItems(); unbind?.(); toolbar.destroy(); if (timer)
+            clearTimeout(timer); bar.remove(); });
+    }
+    if (options.contextMenu) {
+        seed(CONTEXT_SLOT, CONTEXT_DEFAULTS);
+        const toolbar = createToolbar(editor, { slot: CONTEXT_SLOT });
+        const popup = part(document.createElement("div"), "menu");
+        popup.setAttribute("data-rte-context", "");
+        const anchor = document.createElement("button");
+        anchor.type = "button";
+        anchor.hidden = true;
+        anchor.setAttribute("aria-label", message("context.label"));
+        anchor.id = `rte-context-anchor-${++counter}`;
+        anchor.focus = () => editor.focus();
+        root.append(anchor, popup);
+        const entries = new Map();
+        let menu;
+        let at = { x: 0, y: 0 };
+        const draw = () => {
+            menu?.destroy();
+            entries.clear();
+            const children = [];
+            let group;
+            for (const item of toolbar.items) {
+                if (item.kind !== "button" && item.kind !== "toggle" && item.kind !== "dialog")
+                    continue;
+                const next = item.group ?? "";
+                if (group !== undefined && next !== group) {
+                    const rule = part(document.createElement("div"), "menu-separator");
+                    rule.setAttribute("role", "separator");
+                    children.push(rule);
+                }
+                group = next;
+                entries.set(item.id, item);
+                const entry = part(document.createElement("button"), "menu-item");
+                entry.type = "button";
+                entry.setAttribute("data-rte-menuitem", "");
+                entry.setAttribute("data-rte-menu-item", item.id);
+                if (item.kind === "toggle")
+                    entry.setAttribute("role", "menuitemcheckbox");
+                entry.append(part(document.createElement("span"), "label"), part(document.createElement("span"), "menu-keys"));
+                children.push(entry);
+            }
+            popup.replaceChildren(...children);
+            menu = createMenu({
+                trigger: anchor, menu: popup,
+                onOpen: () => {
+                    popup.style.position = "fixed";
+                    popup.style.insetBlockStart = popup.style.insetInlineStart = "auto";
+                    const w = popup.offsetWidth;
+                    const h = popup.offsetHeight;
+                    const view = root.ownerDocument.documentElement;
+                    popup.style.left = `${Math.max(4, Math.min(at.x, view.clientWidth - w - 4))}px`;
+                    popup.style.top = `${Math.max(4, Math.min(at.y, view.clientHeight - h - 4))}px`;
+                },
+                onSelect: (entry) => {
+                    const id = entry.getAttribute("data-rte-menu-item") ?? "";
+                    const item = entries.get(id);
+                    if (item?.kind === "dialog") {
+                        options.openDialog(item, returnTo);
+                        return;
+                    }
+                    toolbar.activate(id);
+                    editor.focus();
+                },
+            });
+            words();
+        };
+        const words = () => {
+            anchor.setAttribute("aria-label", message("context.label"));
+            for (const entry of popup.querySelectorAll("[data-rte-menu-item]")) {
+                const id = entry.getAttribute("data-rte-menu-item") ?? "";
+                const item = entries.get(id);
+                const state = toolbar.state(id);
+                if (!item || !state)
+                    continue;
+                const label = message(`item.${id}`, state.label);
+                const name = entry.querySelector('[data-rte-part="label"]');
+                if (name)
+                    name.textContent = label;
+                const keys = entry.querySelector('[data-rte-part="menu-keys"]');
+                if (keys)
+                    keys.textContent = state.shortcutLabel ?? "";
+                entry.setAttribute("aria-disabled", String(state.disabled));
+                if (item.kind === "toggle")
+                    entry.setAttribute("aria-checked", String(state.pressed === true));
+            }
+        };
+        draw();
+        const stopState = toolbar.subscribe(() => {
+            const drawn = [...popup.querySelectorAll("[data-rte-menu-item]")].map((el) => el.getAttribute("data-rte-menu-item")).join("\u0000");
+            if (drawn !== toolbar.items.filter((i) => i.kind === "button" || i.kind === "toggle" || i.kind === "dialog").map((i) => i.id).join("\u0000"))
+                draw();
+            else
+                words();
+        });
+        const onContextMenu = (e) => {
+            if ((e.shiftKey && e.button === 2) || e.pointerType === "touch")
+                return;
+            if (toolbar.items.length === 0)
+                return;
+            e.preventDefault();
+            let x = e.clientX;
+            let y = e.clientY;
+            if (x === 0 && y === 0) {
+                const selection = root.ownerDocument.getSelection();
+                const rect = selection && selection.rangeCount > 0 ? selection.getRangeAt(0).getBoundingClientRect() : editor.element.getBoundingClientRect();
+                x = rect.left;
+                y = rect.bottom;
+            }
+            at = { x, y };
+            words();
+            menu?.close(false);
+            menu?.open();
+        };
+        editor.element.addEventListener("contextmenu", onContextMenu);
+        redraws.push(draw);
+        stops.push(() => { editor.element.removeEventListener("contextmenu", onContextMenu); stopState(); menu?.destroy(); toolbar.destroy(); anchor.remove(); popup.remove(); });
+    }
+    return {
+        refresh: () => { for (const redraw of redraws)
+            redraw(); },
+        destroy: () => { for (const stop of stops.splice(0).reverse())
+            stop(); },
+    };
+}

package/dist/messages.js

@@ -1,5 +1,7 @@
 export const DEFAULT_MESSAGES = {
     "toolbar.label": "Formatting",
+    "floating.label": "Selection formatting",
+    "context.label": "Editing commands",
     "dialog.ok": "OK",
     "dialog.cancel": "Cancel",
     "field.required": "{label} is required.",

package/dist/shortcuts.js

@@ -3,9 +3,9 @@ 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}`;
+    const titleId = `rte-shortcuts-title-${++counter}`;
     element.setAttribute("aria-labelledby", titleId);
-    element.setAttribute("data-rk-shortcuts", "");
+    element.setAttribute("data-rte-shortcuts", "");
     const title = options.part(document.createElement("h2"), "dialog-title");
     title.id = titleId;
     const table = options.part(document.createElement("table"), "shortcuts");

package/dist/source.js

@@ -8,25 +8,25 @@ export function createSourceView(options) {
     content.appendChild(area);
     let original = "";
     let opener;
-    const button = () => toolbar.querySelector('[data-rk-item="source"]');
+    const button = () => toolbar.querySelector('[data-rte-item="source"]');
     const close = (apply) => {
         if (area.hidden)
             return;
         const changed = area.value !== original;
         area.hidden = true;
-        content.removeAttribute("data-rk-source");
+        content.removeAttribute("data-rte-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");
+        (opener ?? button())?.removeAttribute("data-rte-busy");
     };
     const open = (from) => {
         opener = from;
         original = editor.getHtml?.("\n") ?? "";
         area.value = original;
         area.hidden = false;
-        content.setAttribute("data-rk-source", "");
+        content.setAttribute("data-rte-source", "");
         button()?.setAttribute("aria-pressed", "true");
         area.focus();
         area.setSelectionRange(0, 0);
@@ -34,8 +34,8 @@ export function createSourceView(options) {
     const guard = (e) => {
         if (area.hidden)
             return;
-        const control = e.target?.closest("[data-rk-item]");
-        if (!control || control.getAttribute("data-rk-item") === "source")
+        const control = e.target?.closest("[data-rte-item]");
+        if (!control || control.getAttribute("data-rte-item") === "source")
             return;
         if (e.type === "keydown" && !["Enter", " "].includes(e.key))
             return;
@@ -61,7 +61,7 @@ export function createSourceView(options) {
             toolbar.removeEventListener("click", guard, true);
             toolbar.removeEventListener("keydown", guard, true);
             area.remove();
-            content.removeAttribute("data-rk-source");
+            content.removeAttribute("data-rte-source");
         },
     };
 }

package/dist/standard.d.ts

@@ -1,5 +1,2 @@
-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

@@ -3,4 +3,3 @@ 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

@@ -1,10 +1,10 @@
 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";
+/** The parts the interface is made of. Selectors and `classes` address them by these names (as `data-rte-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" | "floating" | "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"
+export type MessageKey = "toolbar.label" | "floating.label" | "context.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. */
@@ -52,13 +52,24 @@ export type UiEditor = HeadlessEditor & {
     }): Range | null;
 };
 export interface UiOptions {
-    /** The element the interface is built in. It gets the `rk-root` class. */
+    /** The element the interface is built in. It gets the `rte-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;
+    /**
+     * A short row of formatting controls over selected text (the items of the `toolbar.floating` slot; when the slot is empty it gets the
+     * common formatting controls). Default: off. It stays out of the way of touch selection, and Alt+F10 moves the focus into it.
+     */
+    readonly selectionToolbar?: boolean;
+    /**
+     * A menu of commands at the pointer on a right click (the items of the `menu.context` slot; when empty it gets undo, redo and the common
+     * formatting controls). Default: off. It replaces the browser's menu, spelling suggestions included, so Shift + right click still opens the
+     * browser's own, and a touch long-press is left to the browser.
+     */
+    readonly contextMenu?: boolean;
     /**
      * 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.