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

package/README.md

@@ -2,7 +2,7 @@
 
 > **Alpha** (0.1.0-alpha.0). Not for production: the APIs will change between releases. Published to the `next` tag only.
 
-The styled interface: a toolbar, menus, dialogs, find bar, status line and tooltips on the headless layer, themeable by preset, tokens, icons, classes and messages.
+The styled interface: a toolbar, menus, dialogs, find bar, status line and tooltips on the headless layer, with an optional selection toolbar and context menu, themeable by preset, tokens, icons, classes and messages.
 
 ## Install
 

package/css/base.css

@@ -107,6 +107,14 @@
   [data-rk-part="menu-keys"] { color: var(--rk-fg-muted); font-size: 0.85em; }
   [data-rk-part="menu-separator"] { height: var(--rk-border-width); margin: var(--rk-space-1) var(--rk-space-2); background: var(--rk-border-subtle); }
 
+  /* ---- the selection toolbar: a short row of controls over selected text ---- */
+  [data-rk-part="floating"] {
+    position: absolute; z-index: 15; display: flex; align-items: center; gap: var(--rk-space-1); padding: var(--rk-space-1);
+    background: var(--rk-surface-raised); border: var(--rk-border-width) solid var(--rk-border); border-radius: var(--rk-radius-m); box-shadow: var(--rk-shadow-popover);
+  }
+  [data-rk-part="floating"][hidden] { display: none; }
+  [data-rk-part="floating"] [data-rk-part="separator"] { align-self: stretch; margin-block: var(--rk-space-1); }
+
   /* ---- tooltip: the control's name and key, shown near it on hover and keyboard focus ---- */
   [data-rk-part="tooltip"] {
     position: absolute; z-index: 20; max-width: 20rem; padding: var(--rk-space-1) var(--rk-space-2); font-size: 0.85em; line-height: 1.35;
@@ -252,7 +260,7 @@
     [data-rk-part="content"] img[data-rk-image-selected] { outline-color: Highlight; }
     .rk-root :focus-visible, .rk-root:focus-within { outline-color: Highlight; }
     [data-rk-part="separator"], [data-rk-part="menu-separator"] { background: CanvasText; }
-    [data-rk-part="menu"] { border-color: CanvasText; background: Canvas; }
+    [data-rk-part="menu"], [data-rk-part="floating"] { border-color: CanvasText; background: Canvas; }
     ::highlight(rk-find) { background-color: Mark; color: MarkText; }
     ::highlight(rk-find-current) { background-color: Highlight; color: HighlightText; }
     [data-rk-part="find-field"] { border-color: ButtonText; }

package/dist/element-define.d.ts

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

package/dist/element-define.js

@@ -0,0 +1,2 @@
+import { define } from "./element.js";
+define();

package/dist/element.d.ts

@@ -0,0 +1,23 @@
+import type { StyleProvider, Ui } from "./types.ts";
+export declare class RkUi extends HTMLElement {
+    static observedAttributes: string[];
+    private current;
+    private extra;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    /** The interface, once it is built. */
+    get ui(): Ui | undefined;
+    /**
+     * Everything about the look that attributes cannot say: icons, messages, tokens, classes. The `theme`, `scheme` and `density`
+     * attributes win over the same names here.
+     */
+    get styleProvider(): StyleProvider;
+    set styleProvider(style: StyleProvider);
+    private readonly onReady;
+    private look;
+    private attach;
+    private detach;
+}
+/** Registers <rk-ui>. Safe to call more than once. */
+export declare function define(name?: string): void;

package/dist/element.js

@@ -0,0 +1,62 @@
+import { createStandardUi } from "./standard.js";
+const STYLE_ATTRIBUTES = ["theme", "scheme", "density"];
+export class RkUi extends HTMLElement {
+    static observedAttributes = [...STYLE_ATTRIBUTES, "selection-toolbar", "context-menu", "status"];
+    current;
+    extra = {};
+    connectedCallback() {
+        this.addEventListener("rk-ready", this.onReady);
+        this.attach();
+    }
+    disconnectedCallback() {
+        this.removeEventListener("rk-ready", this.onReady);
+        this.detach();
+    }
+    attributeChangedCallback(name) {
+        if (!this.current)
+            return;
+        if (STYLE_ATTRIBUTES.includes(name))
+            this.current.setStyle(this.look());
+        else {
+            this.detach();
+            this.attach();
+        }
+    }
+    get ui() { return this.current; }
+    get styleProvider() { return this.extra; }
+    set styleProvider(style) {
+        this.extra = style;
+        this.current?.setStyle(this.look());
+    }
+    onReady = () => { if (!this.current)
+        this.attach(); };
+    look() {
+        const given = {};
+        for (const name of STYLE_ATTRIBUTES) {
+            const value = this.getAttribute(name);
+            if (value)
+                given[name] = value;
+        }
+        return { ...this.extra, ...given };
+    }
+    attach() {
+        const host = this.querySelector("rk-editor");
+        const editor = host?.editor;
+        if (!host || !editor || this.current)
+            return;
+        this.current = createStandardUi(editor, {
+            root: host, style: this.look(),
+            selectionToolbar: this.hasAttribute("selection-toolbar"),
+            contextMenu: this.hasAttribute("context-menu"),
+            status: this.getAttribute("status") !== "false",
+        });
+    }
+    detach() {
+        this.current?.destroy();
+        this.current = undefined;
+    }
+}
+export function define(name = "rk-ui") {
+    if (!customElements.get(name))
+        customElements.define(name, RkUi);
+}

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-rk-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-rk-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-rk-item]")].map((el) => el.getAttribute("data-rk-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-rk-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-rk-context", "");
+        const anchor = document.createElement("button");
+        anchor.type = "button";
+        anchor.hidden = true;
+        anchor.setAttribute("aria-label", message("context.label"));
+        anchor.id = `rk-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-rk-menuitem", "");
+                entry.setAttribute("data-rk-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-rk-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-rk-menu-item]")) {
+                const id = entry.getAttribute("data-rk-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-rk-part="label"]');
+                if (name)
+                    name.textContent = label;
+                const keys = entry.querySelector('[data-rk-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-rk-menu-item]")].map((el) => el.getAttribute("data-rk-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/types.d.ts

@@ -2,9 +2,9 @@ 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";
+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. */
@@ -59,6 +59,17 @@ export interface UiOptions {
     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.

package/dist/ui.js

@@ -1,5 +1,6 @@
 import { checkFields, createAnnouncer, createDialog, createMenu, createToolbar, createTooltip } from "@rathkit/rte-headless";
 import { createFindBar } from "./findbar.js";
+import { createFloating } from "./floating.js";
 import { setIcon } from "./icon.js";
 import { createShortcuts } from "./shortcuts.js";
 import { createSourceView } from "./source.js";
@@ -107,6 +108,7 @@ export function createUi(editor, options) {
             draw();
             findBar?.refresh();
             shortcuts.refresh();
+            floating?.refresh();
         }
         syncDialogs();
     }
@@ -114,6 +116,7 @@ export function createUi(editor, options) {
         return name === undefined ? undefined : style.icons?.[name];
     }
     let unbind;
+    let floating;
     function labelOf(item) {
         return message(`item.${item.id}`, toolbar.state(item.id)?.label ?? item.id);
     }
@@ -442,6 +445,13 @@ export function createUi(editor, options) {
     }
     drawn = toolbar.items.map((i) => i.id).join("\u0000");
     applyStyle(options.style ?? {});
+    floating = options.selectionToolbar || options.contextMenu
+        ? createFloating({
+            editor, root, selectionToolbar: options.selectionToolbar === true, contextMenu: options.contextMenu === true,
+            part: (el, name) => part(el, name), message: (key, fallback) => message(key, fallback), icon: (name) => iconFor(name),
+            openDialog,
+        })
+        : undefined;
     if (stopStatus)
         showStatus();
     return {
@@ -456,6 +466,7 @@ export function createUi(editor, options) {
             tipEl.remove();
             stopStatus?.();
             findBar?.destroy();
+            floating?.destroy();
             sourceView?.destroy();
             removeSourceItem?.();
             shortcuts.destroy();
@@ -472,6 +483,7 @@ export function createUi(editor, options) {
             announcer.destroy();
             toolbar.destroy();
             toolbarEl.remove();
+            contentEl.replaceWith(...contentEl.childNodes);
             root.classList.remove("rk-root");
             for (const name of ["data-rk-theme", "data-rk-scheme", "data-rk-density", "data-rk-part"])
                 root.removeAttribute(name);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathkit/rte-ui",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.4",
   "description": "The styled editor interface: a toolbar and dialogs on the headless layer, themeable with tokens, presets, icons and messages.",
   "keywords": [
     "rich-text",
@@ -24,7 +24,8 @@
   },
   "type": "module",
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "./dist/element-define.js"
   ],
   "engines": {
     "node": ">=22.14.0"
@@ -49,13 +50,21 @@
       "types": "./dist/standard.d.ts",
       "default": "./dist/standard.js"
     },
+    "./element": {
+      "types": "./dist/element.d.ts",
+      "default": "./dist/element.js"
+    },
+    "./element/define": {
+      "types": "./dist/element-define.d.ts",
+      "default": "./dist/element-define.js"
+    },
     "./base.css": "./css/base.css"
   },
   "peerDependencies": {
-    "@rathkit/rte-core": ">=0.1.0-alpha.3 <0.2.0",
-    "@rathkit/rte-headless": ">=0.1.0-alpha.3 <0.2.0",
-    "@rathkit/rte-themes": ">=0.1.0-alpha.3 <0.2.0",
-    "@rathkit/rte-icons": ">=0.1.0-alpha.3 <0.2.0"
+    "@rathkit/rte-core": ">=0.1.0-alpha.4 <0.2.0",
+    "@rathkit/rte-headless": ">=0.1.0-alpha.4 <0.2.0",
+    "@rathkit/rte-themes": ">=0.1.0-alpha.4 <0.2.0",
+    "@rathkit/rte-icons": ">=0.1.0-alpha.4 <0.2.0"
   },
   "peerDependenciesMeta": {
     "@rathkit/rte-core": {
@@ -93,6 +102,11 @@
         "name": "ui with default icons",
         "entry": "dist/standard.js",
         "gzipKB": 30
+      },
+      {
+        "name": "ui element",
+        "entry": "dist/element.js",
+        "gzipKB": 30
       }
     ]
   }