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

package/dist/ui.js

@@ -0,0 +1,482 @@
+import { checkFields, createAnnouncer, createDialog, createMenu, createToolbar, createTooltip } from "@rathkit/rte-headless";
+import { createFindBar } from "./findbar.js";
+import { setIcon } from "./icon.js";
+import { createShortcuts } from "./shortcuts.js";
+import { createSourceView } from "./source.js";
+import { text } from "./messages.js";
+let counter = 0;
+const sameEntries = (a, b) => {
+    const x = Object.entries(a ?? {});
+    const y = Object.entries(b ?? {});
+    return x.length === y.length && x.every(([k, v], i) => y[i]?.[0] === k && Object.is(y[i]?.[1], v));
+};
+export function createUi(editor, options) {
+    const { root } = options;
+    const slot = options.slot ?? "toolbar.main";
+    let style = {};
+    const appliedTokens = new Set();
+    const appliedClasses = new Map();
+    const parts = new Map();
+    const part = (el, name) => {
+        el.setAttribute("data-rk-part", name);
+        let set = parts.get(name);
+        if (!set)
+            parts.set(name, (set = new Set()));
+        set.add(el);
+        for (const cls of style.classes?.[name]?.split(/\s+/).filter(Boolean) ?? [])
+            el.classList.add(cls);
+        return el;
+    };
+    const message = (key, fallback = "", values = {}) => text(style.messages, key, fallback, values);
+    root.classList.add("rk-root");
+    part(root, "root");
+    const toolbarEl = part(document.createElement("div"), "toolbar");
+    const contentEl = part(document.createElement("div"), "content");
+    const statusEl = part(document.createElement("div"), "status");
+    root.append(toolbarEl, contentEl);
+    contentEl.appendChild(editor.element);
+    let statusTimer;
+    const showStatus = () => {
+        statusTimer = undefined;
+        const counts = editor.counts?.();
+        if (!counts)
+            return;
+        const words = counts.document.words;
+        statusEl.textContent = counts.selection.words > 0
+            ? message("status.selection", "", { selected: String(counts.selection.words), total: String(words) })
+            : `${message(words === 1 ? "status.word" : "status.words", "", { count: String(words) })} · ${message("status.characters", "", { count: String(counts.document.characters) })}`;
+    };
+    const findBar = editor.commands.list().some((c) => c.name === "find.set")
+        ? createFindBar({ editor, part: (el, name) => part(el, name), message: (key, fallback, values) => message(key, fallback, values), icon: (name) => iconFor(name), announce: (m) => announcer.announce(m) })
+        : undefined;
+    if (findBar)
+        root.insertBefore(findBar.element, contentEl);
+    const stopStatus = editor.counts && options.status !== false ? editor.subscribe(() => { statusTimer ??= setTimeout(showStatus, 150); }) : undefined;
+    if (stopStatus)
+        root.appendChild(statusEl);
+    const announcer = createAnnouncer(root);
+    const tipEl = part(document.createElement("div"), "tooltip");
+    root.appendChild(tipEl);
+    const tooltip = createTooltip({
+        container: root, popup: tipEl,
+        onShow: (target, popup) => {
+            const box = root.getBoundingClientRect();
+            const at = target.getBoundingClientRect();
+            popup.style.top = `${Math.round(at.bottom - box.top + 6)}px`;
+            popup.style.left = `${Math.round(Math.max(0, Math.min(at.left - box.left, box.width - popup.offsetWidth)))}px`;
+        },
+    });
+    const removeSourceItem = editor.getHtml ? editor.ui.add(slot, { kind: "panel", id: "source", name: "source", label: "HTML source", icon: "source", group: "tools", order: 1 }) : undefined;
+    const removeShortcutsItem = editor.ui.add(slot, { kind: "panel", id: "shortcuts", name: "shortcuts", label: "Keyboard shortcuts", icon: "keyboard", group: "tools", order: 2 });
+    const toolbar = createToolbar(editor, { slot, label: message("toolbar.label") });
+    const shortcuts = createShortcuts({ editor, root, part: (el, name) => part(el, name), message: (key) => message(key) });
+    const sourceView = editor.getHtml ? createSourceView({ editor, content: contentEl, toolbar: toolbarEl, part: (el, name) => part(el, name), message: (key) => message(key), announce: (m) => announcer.announce(m) }) : undefined;
+    const iconSpans = new Map();
+    const dialogs = new Map();
+    function applyStyle(given) {
+        const previous = style;
+        const base = options.defaults;
+        const next = base
+            ? { ...given, icons: { ...base.icons, ...given.icons }, messages: { ...base.messages, ...given.messages } }
+            : given;
+        style = next;
+        const set = (name, value) => (value === undefined ? root.removeAttribute(name) : root.setAttribute(name, value));
+        set("data-rk-theme", next.theme);
+        set("data-rk-scheme", next.scheme);
+        set("data-rk-density", next.density);
+        for (const name of [...appliedTokens])
+            if (!(next.tokens && name in next.tokens)) {
+                root.style.removeProperty(name);
+                appliedTokens.delete(name);
+            }
+        for (const [name, value] of Object.entries(next.tokens ?? {})) {
+            root.style.setProperty(name, value);
+            appliedTokens.add(name);
+        }
+        for (const [name, classes] of appliedClasses)
+            for (const el of parts.get(name) ?? [])
+                el.classList.remove(...classes);
+        appliedClasses.clear();
+        for (const [name, value] of Object.entries(next.classes ?? {})) {
+            const classes = value.split(/\s+/).filter(Boolean);
+            appliedClasses.set(name, classes);
+            for (const el of parts.get(name) ?? [])
+                el.classList.add(...classes);
+        }
+        if (!sameEntries(previous.icons, next.icons) || !sameEntries(previous.messages, next.messages) || previous.parts !== next.parts) {
+            draw();
+            findBar?.refresh();
+            shortcuts.refresh();
+        }
+        syncDialogs();
+    }
+    function iconFor(name) {
+        return name === undefined ? undefined : style.icons?.[name];
+    }
+    let unbind;
+    function labelOf(item) {
+        return message(`item.${item.id}`, toolbar.state(item.id)?.label ?? item.id);
+    }
+    function control(item) {
+        if (item.kind === "separator")
+            return part(document.createElement("span"), "separator");
+        if (item.kind === "panel" && item.name !== "source" && item.name !== "shortcuts")
+            return undefined;
+        const state = toolbar.state(item.id);
+        if (!state)
+            return undefined;
+        if (item.kind === "select") {
+            const select = part(document.createElement("select"), "select");
+            select.setAttribute("data-rk-item", item.id);
+            for (const o of item.options) {
+                const option = document.createElement("option");
+                option.value = String(o.value);
+                option.textContent = o.label;
+                select.appendChild(option);
+            }
+            return select;
+        }
+        if (item.kind === "menu")
+            return menuControl(item, state);
+        const customize = style.parts?.button;
+        if (customize) {
+            const el = customize({ item, state, run: (value) => toolbar.activate(item.id, value) });
+            el.setAttribute("data-rk-part", "button");
+            el.setAttribute("data-rk-item", item.id);
+            (parts.get("button") ?? parts.set("button", new Set()).get("button"))?.add(el);
+            return el;
+        }
+        const button = part(document.createElement("button"), "button");
+        button.type = "button";
+        button.setAttribute("data-rk-item", item.id);
+        const icon = part(document.createElement("span"), "icon");
+        icon.setAttribute("aria-hidden", "true");
+        if (setIcon(icon, iconFor(state.icon))) {
+            iconSpans.set(icon, state.icon ?? "");
+            button.appendChild(icon);
+        }
+        else {
+            const label = part(document.createElement("span"), "label");
+            label.textContent = labelOf(item);
+            button.appendChild(label);
+        }
+        return button;
+    }
+    const menus = [];
+    const menuItems = new Map();
+    function menuControl(item, state) {
+        const host = part(document.createElement("span"), "menu-host");
+        const trigger = part(document.createElement("button"), "button");
+        trigger.type = "button";
+        trigger.setAttribute("data-rk-item", item.id);
+        const icon = part(document.createElement("span"), "icon");
+        icon.setAttribute("aria-hidden", "true");
+        if (setIcon(icon, iconFor(state.icon))) {
+            iconSpans.set(icon, state.icon ?? "");
+            trigger.appendChild(icon);
+        }
+        else {
+            const label = part(document.createElement("span"), "label");
+            label.textContent = labelOf(item);
+            trigger.appendChild(label);
+        }
+        const caret = part(document.createElement("span"), "icon");
+        caret.setAttribute("aria-hidden", "true");
+        if (setIcon(caret, iconFor("chevron-down")))
+            trigger.appendChild(caret);
+        const popup = part(document.createElement("div"), "menu");
+        for (const child of item.items) {
+            if (child.kind === "separator") {
+                const rule = part(document.createElement("div"), "menu-separator");
+                rule.setAttribute("role", "separator");
+                popup.appendChild(rule);
+                continue;
+            }
+            if (child.kind !== "button" && child.kind !== "toggle" && child.kind !== "dialog")
+                continue;
+            menuItems.set(child.id, child);
+            const entry = part(document.createElement("button"), "menu-item");
+            entry.type = "button";
+            entry.setAttribute("data-rk-menuitem", "");
+            entry.setAttribute("data-rk-menu-item", child.id);
+            const words = part(document.createElement("span"), "label");
+            const keys = part(document.createElement("span"), "menu-keys");
+            if (child.kind !== "dialog" && child.swatch) {
+                const swatch = part(document.createElement("span"), "swatch");
+                swatch.setAttribute("aria-hidden", "true");
+                swatch.style.backgroundColor = child.swatch;
+                entry.append(swatch);
+            }
+            entry.append(words, keys);
+            popup.appendChild(entry);
+        }
+        host.append(trigger, popup);
+        const menu = createMenu({
+            trigger, menu: popup,
+            onOpen: () => {
+                popup.style.translate = "";
+                const box = popup.getBoundingClientRect();
+                const width = document.documentElement.clientWidth;
+                const dx = box.right > width - 4 ? width - 4 - box.right : box.left < 4 ? 4 - box.left : 0;
+                if (dx !== 0)
+                    popup.style.translate = `${Math.round(dx)}px`;
+            },
+            onSelect: (entry) => {
+                const id = entry.getAttribute("data-rk-menu-item") ?? "";
+                const child = menuItems.get(id);
+                if (child?.kind === "dialog") {
+                    openDialog(child, trigger);
+                    return;
+                }
+                if (toolbar.activate(id) && child?.kind === "toggle") {
+                    const now = toolbar.state(id);
+                    announcer.announce(message(now?.pressed ? "toggle.on" : "toggle.off", "", { label: labelOf(child) }));
+                }
+                editor.focus();
+            },
+        });
+        for (const entry of popup.querySelectorAll("[data-rk-menu-item]")) {
+            if (menuItems.get(entry.getAttribute("data-rk-menu-item") ?? "")?.kind === "toggle")
+                entry.setAttribute("role", "menuitemcheckbox");
+        }
+        menus.push(menu);
+        return host;
+    }
+    function menuEntries() {
+        for (const entry of toolbarEl.querySelectorAll("[data-rk-menu-item]")) {
+            const id = entry.getAttribute("data-rk-menu-item") ?? "";
+            const child = menuItems.get(id);
+            const state = toolbar.state(id);
+            if (!child || !state)
+                continue;
+            const label = labelOf(child);
+            const words = entry.querySelector('[data-rk-part="label"]');
+            if (words)
+                words.textContent = label;
+            const keys = entry.querySelector('[data-rk-part="menu-keys"]');
+            if (keys)
+                keys.textContent = state.shortcutLabel ?? "";
+            if (state.shortcut)
+                entry.setAttribute("aria-keyshortcuts", state.shortcut);
+            else
+                entry.removeAttribute("aria-keyshortcuts");
+            entry.setAttribute("aria-disabled", String(state.disabled));
+            if (child.kind === "toggle")
+                entry.setAttribute("aria-checked", String(state.pressed === true));
+        }
+    }
+    function draw() {
+        unbind?.();
+        for (const menu of menus.splice(0))
+            menu.destroy();
+        menuItems.clear();
+        iconSpans.clear();
+        for (const name of ["button", "select", "separator", "icon", "label", "menu-host", "menu", "menu-item", "menu-separator", "menu-keys", "swatch"]) {
+            const kept = new Set();
+            for (const el of parts.get(name) ?? [])
+                if (!toolbarEl.contains(el))
+                    kept.add(el);
+            parts.set(name, kept);
+        }
+        const controls = [];
+        let group;
+        for (const item of toolbar.items) {
+            const next = item.group ?? "";
+            if (group !== undefined && next !== group && item.kind !== "separator")
+                controls.push(part(document.createElement("span"), "separator"));
+            group = next;
+            const el = control(item);
+            if (el)
+                controls.push(el);
+        }
+        toolbarEl.replaceChildren(...controls);
+        unbind = toolbar.bind(toolbarEl, { onOpen: (item, opener) => { if (item.kind === "dialog")
+                openDialog(item, opener);
+            else if (item.kind === "panel" && item.name === "source")
+                sourceView?.toggle(opener);
+            else if (item.kind === "panel" && item.name === "shortcuts")
+                shortcuts.open(opener); } });
+        toolbarEl.removeEventListener("click", onToolbarClick);
+        toolbarEl.addEventListener("click", onToolbarClick);
+        names();
+        menuEntries();
+    }
+    function names() {
+        for (const el of toolbarEl.querySelectorAll("[data-rk-item]")) {
+            const id = el.getAttribute("data-rk-item") ?? "";
+            const item = toolbar.items.find((i) => i.id === id);
+            const state = toolbar.state(id);
+            if (!item || !state)
+                continue;
+            const label = labelOf(item);
+            el.setAttribute("aria-label", label);
+            el.setAttribute("data-rk-tip", state.shortcutLabel ? `${label} (${state.shortcutLabel})` : label);
+            if (el.tagName === "BUTTON") {
+                const word = el.querySelector('[data-rk-part="label"]');
+                if (word)
+                    word.textContent = label;
+            }
+        }
+    }
+    toolbar.subscribe(names);
+    toolbar.subscribe(menuEntries);
+    const stopRedraw = toolbar.subscribe(() => {
+        const ids = toolbar.items.map((i) => i.id).join("\u0000");
+        if (ids !== drawn) {
+            drawn = ids;
+            draw();
+        }
+    });
+    let drawn = "";
+    const onToolbarClick = (e) => {
+        const el = e.target?.closest("[data-rk-item]");
+        if (!el)
+            return;
+        const item = toolbar.items.find((i) => i.id === el.getAttribute("data-rk-item"));
+        const state = item ? toolbar.state(item.id) : undefined;
+        if (item?.kind === "toggle" && state && !state.disabled) {
+            const group = item.group === "align" || item.group === "lists";
+            announcer.announce(group ? labelOf(item) : message(state.pressed ? "toggle.on" : "toggle.off", "", { label: labelOf(item) }));
+        }
+    };
+    function syncDialogs() {
+        for (const [id, d] of dialogs) {
+            const item = toolbar.items.find((i) => i.id === id) ?? menuItems.get(id);
+            if (!item || item.kind !== "dialog")
+                continue;
+            d.title.textContent = labelOf(item);
+            d.ok.textContent = message("dialog.ok");
+            d.cancel.textContent = message("dialog.cancel");
+        }
+    }
+    function openDialog(item, opener) {
+        let entry = dialogs.get(item.id);
+        if (!entry) {
+            const element = part(document.createElement("dialog"), "dialog");
+            const titleId = `rk-dialog-title-${++counter}`;
+            element.setAttribute("aria-labelledby", titleId);
+            const form = document.createElement("form");
+            form.noValidate = true;
+            const title = part(document.createElement("h2"), "dialog-title");
+            title.id = titleId;
+            form.appendChild(title);
+            for (const field of item.fields) {
+                const inputId = `rk-field-${++counter}`;
+                const label = part(document.createElement("label"), "field-label");
+                label.htmlFor = inputId;
+                label.textContent = field.label;
+                const input = (field.type === "choice" ? part(document.createElement("select"), "field") : part(document.createElement("input"), "field"));
+                input.id = inputId;
+                input.name = field.name;
+                if (field.type === "choice") {
+                    for (const choice of field.choices ?? []) {
+                        const option = document.createElement("option");
+                        option.value = choice.value;
+                        option.textContent = choice.label;
+                        input.appendChild(option);
+                    }
+                }
+                else {
+                    input.type = field.type === "checkbox" ? "checkbox" : "text";
+                    if (field.type === "url")
+                        input.inputMode = "url";
+                    input.autocomplete = "off";
+                }
+                if (field.required)
+                    input.required = true;
+                const error = part(document.createElement("span"), "field-error");
+                error.setAttribute("data-rk-error", field.name);
+                if (field.type === "checkbox") {
+                    const row = part(document.createElement("div"), "field-check");
+                    row.append(input, label);
+                    form.append(row, error);
+                }
+                else
+                    form.append(label, input, error);
+            }
+            const actions = part(document.createElement("div"), "actions");
+            const ok = part(document.createElement("button"), "action");
+            ok.type = "submit";
+            ok.setAttribute("data-primary", "");
+            const cancel = part(document.createElement("button"), "action");
+            cancel.type = "button";
+            actions.append(cancel, ok);
+            form.appendChild(actions);
+            element.appendChild(form);
+            root.appendChild(element);
+            const from = { opener };
+            const dialog = createDialog({ dialog: element, editor, get opener() { return from.opener; } });
+            cancel.addEventListener("click", () => dialog.close("cancel"));
+            form.addEventListener("submit", (e) => {
+                e.preventDefault();
+                const check = checkFields(form, item.fields, { required: message("field.required", "", { label: "{label}" }), url: message("field.url") }, (m) => announcer.announce(m));
+                if (!check.ok)
+                    return;
+                dialog.close("submit");
+                editor.commands.run(item.command, check.values);
+            });
+            entry = { dialog, element, form, title, ok, cancel, from };
+            dialogs.set(item.id, entry);
+            syncDialogs();
+        }
+        const current = editor.commands.state(item.command).value;
+        for (const f of item.fields) {
+            const input = entry.form.querySelector(`[name="${f.name}"]`);
+            if (!input)
+                continue;
+            const given = current !== null && typeof current === "object" ? current[f.name] : item.fields.length === 1 ? current : undefined;
+            if (f.type === "checkbox")
+                input.checked = given === true;
+            else
+                input.value = typeof given === "string" ? given : "";
+        }
+        for (const f of item.fields) {
+            const bad = entry.form.querySelector(`[name="${f.name}"]`);
+            bad?.removeAttribute("aria-invalid");
+            const err = entry.form.querySelector(`[data-rk-error="${f.name}"]`);
+            if (err)
+                err.textContent = "";
+        }
+        entry.from.opener = opener;
+        entry.dialog.open();
+    }
+    drawn = toolbar.items.map((i) => i.id).join("\u0000");
+    applyStyle(options.style ?? {});
+    if (stopStatus)
+        showStatus();
+    return {
+        root, toolbar,
+        setStyle: applyStyle,
+        announce: (m) => announcer.announce(m),
+        destroy() {
+            unbind?.();
+            for (const menu of menus.splice(0))
+                menu.destroy();
+            tooltip.destroy();
+            tipEl.remove();
+            stopStatus?.();
+            findBar?.destroy();
+            sourceView?.destroy();
+            removeSourceItem?.();
+            shortcuts.destroy();
+            removeShortcutsItem();
+            if (statusTimer)
+                clearTimeout(statusTimer);
+            statusEl.remove();
+            stopRedraw();
+            toolbarEl.removeEventListener("click", onToolbarClick);
+            for (const d of dialogs.values()) {
+                d.dialog.destroy();
+                d.element.remove();
+            }
+            announcer.destroy();
+            toolbar.destroy();
+            toolbarEl.remove();
+            root.classList.remove("rk-root");
+            for (const name of ["data-rk-theme", "data-rk-scheme", "data-rk-density", "data-rk-part"])
+                root.removeAttribute(name);
+            for (const t of appliedTokens)
+                root.style.removeProperty(t);
+        },
+    };
+}

package/package.json

@@ -1,6 +1,99 @@
 {
   "name": "@rathkit/rte-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0-alpha.0",
+  "description": "The styled editor interface: a toolbar and dialogs on the headless layer, themeable with tokens, presets, icons and messages.",
+  "keywords": [
+    "rich-text",
+    "editor",
+    "wysiwyg",
+    "contenteditable",
+    "zero-dependencies",
+    "typescript",
+    "toolbar",
+    "theming"
+  ],
+  "license": "Apache-2.0",
+  "homepage": "https://rathkit.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rathkit/rte.git",
+    "directory": "packages/rte-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/rathkit/rte/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "engines": {
+    "node": ">=22.14.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true,
+    "tag": "next"
+  },
+  "files": [
+    "dist",
+    "NOTICE",
+    "css",
+    "!dist/**/*.map"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./standard": {
+      "types": "./dist/standard.d.ts",
+      "default": "./dist/standard.js"
+    },
+    "./base.css": "./css/base.css"
+  },
+  "peerDependencies": {
+    "@rathkit/rte-core": ">=0.1.0-alpha.0 <0.2.0",
+    "@rathkit/rte-headless": ">=0.1.0-alpha.0 <0.2.0",
+    "@rathkit/rte-themes": ">=0.1.0-alpha.0 <0.2.0",
+    "@rathkit/rte-icons": ">=0.1.0-alpha.0 <0.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@rathkit/rte-core": {
+      "optional": true
+    },
+    "@rathkit/rte-headless": {
+      "optional": true
+    },
+    "@rathkit/rte-themes": {
+      "optional": true
+    },
+    "@rathkit/rte-icons": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@rathkit/rte-core": "workspace:*",
+    "@rathkit/rte-headless": "workspace:*",
+    "@rathkit/rte-themes": "workspace:*",
+    "@rathkit/rte-icons": "workspace:*"
+  },
+  "scripts": {
+    "build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json && tsc -p tsconfig.build.js.json",
+    "typecheck": "tsc -p tsconfig.json",
+    "test": "node -e \"process.exit(0)\""
+  },
+  "rathkit": {
+    "budgets": [
+      {
+        "name": "ui",
+        "entry": "dist/index.js",
+        "gzipKB": 25
+      },
+      {
+        "name": "ui with default icons",
+        "entry": "dist/standard.js",
+        "gzipKB": 30
+      }
+    ]
+  }
+}