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

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";
@@ -18,7 +19,7 @@ export function createUi(editor, options) {
     const appliedClasses = new Map();
     const parts = new Map();
     const part = (el, name) => {
-        el.setAttribute("data-rk-part", name);
+        el.setAttribute("data-rte-part", name);
         let set = parts.get(name);
         if (!set)
             parts.set(name, (set = new Set()));
@@ -28,7 +29,7 @@ export function createUi(editor, options) {
         return el;
     };
     const message = (key, fallback = "", values = {}) => text(style.messages, key, fallback, values);
-    root.classList.add("rk-root");
+    root.classList.add("rte-root");
     part(root, "root");
     const toolbarEl = part(document.createElement("div"), "toolbar");
     const contentEl = part(document.createElement("div"), "content");
@@ -81,9 +82,9 @@ export function createUi(editor, options) {
             : 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);
+        set("data-rte-theme", next.theme);
+        set("data-rte-scheme", next.scheme);
+        set("data-rte-density", next.density);
         for (const name of [...appliedTokens])
             if (!(next.tokens && name in next.tokens)) {
                 root.style.removeProperty(name);
@@ -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);
     }
@@ -127,7 +130,7 @@ export function createUi(editor, options) {
             return undefined;
         if (item.kind === "select") {
             const select = part(document.createElement("select"), "select");
-            select.setAttribute("data-rk-item", item.id);
+            select.setAttribute("data-rte-item", item.id);
             for (const o of item.options) {
                 const option = document.createElement("option");
                 option.value = String(o.value);
@@ -141,14 +144,14 @@ export function createUi(editor, options) {
         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);
+            el.setAttribute("data-rte-part", "button");
+            el.setAttribute("data-rte-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);
+        button.setAttribute("data-rte-item", item.id);
         const icon = part(document.createElement("span"), "icon");
         icon.setAttribute("aria-hidden", "true");
         if (setIcon(icon, iconFor(state.icon))) {
@@ -168,7 +171,7 @@ export function createUi(editor, options) {
         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);
+        trigger.setAttribute("data-rte-item", item.id);
         const icon = part(document.createElement("span"), "icon");
         icon.setAttribute("aria-hidden", "true");
         if (setIcon(icon, iconFor(state.icon))) {
@@ -197,8 +200,8 @@ export function createUi(editor, options) {
             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);
+            entry.setAttribute("data-rte-menuitem", "");
+            entry.setAttribute("data-rte-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) {
@@ -222,7 +225,7 @@ export function createUi(editor, options) {
                     popup.style.translate = `${Math.round(dx)}px`;
             },
             onSelect: (entry) => {
-                const id = entry.getAttribute("data-rk-menu-item") ?? "";
+                const id = entry.getAttribute("data-rte-menu-item") ?? "";
                 const child = menuItems.get(id);
                 if (child?.kind === "dialog") {
                     openDialog(child, trigger);
@@ -235,25 +238,25 @@ export function createUi(editor, options) {
                 editor.focus();
             },
         });
-        for (const entry of popup.querySelectorAll("[data-rk-menu-item]")) {
-            if (menuItems.get(entry.getAttribute("data-rk-menu-item") ?? "")?.kind === "toggle")
+        for (const entry of popup.querySelectorAll("[data-rte-menu-item]")) {
+            if (menuItems.get(entry.getAttribute("data-rte-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") ?? "";
+        for (const entry of toolbarEl.querySelectorAll("[data-rte-menu-item]")) {
+            const id = entry.getAttribute("data-rte-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"]');
+            const words = entry.querySelector('[data-rte-part="label"]');
             if (words)
                 words.textContent = label;
-            const keys = entry.querySelector('[data-rk-part="menu-keys"]');
+            const keys = entry.querySelector('[data-rte-part="menu-keys"]');
             if (keys)
                 keys.textContent = state.shortcutLabel ?? "";
             if (state.shortcut)
@@ -302,17 +305,17 @@ export function createUi(editor, options) {
         menuEntries();
     }
     function names() {
-        for (const el of toolbarEl.querySelectorAll("[data-rk-item]")) {
-            const id = el.getAttribute("data-rk-item") ?? "";
+        for (const el of toolbarEl.querySelectorAll("[data-rte-item]")) {
+            const id = el.getAttribute("data-rte-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);
+            el.setAttribute("data-rte-tip", state.shortcutLabel ? `${label} (${state.shortcutLabel})` : label);
             if (el.tagName === "BUTTON") {
-                const word = el.querySelector('[data-rk-part="label"]');
+                const word = el.querySelector('[data-rte-part="label"]');
                 if (word)
                     word.textContent = label;
             }
@@ -329,10 +332,10 @@ export function createUi(editor, options) {
     });
     let drawn = "";
     const onToolbarClick = (e) => {
-        const el = e.target?.closest("[data-rk-item]");
+        const el = e.target?.closest("[data-rte-item]");
         if (!el)
             return;
-        const item = toolbar.items.find((i) => i.id === el.getAttribute("data-rk-item"));
+        const item = toolbar.items.find((i) => i.id === el.getAttribute("data-rte-item"));
         const state = item ? toolbar.state(item.id) : undefined;
         if (item?.kind === "toggle" && state && !state.disabled) {
             const group = item.group === "align" || item.group === "lists";
@@ -353,7 +356,7 @@ export function createUi(editor, options) {
         let entry = dialogs.get(item.id);
         if (!entry) {
             const element = part(document.createElement("dialog"), "dialog");
-            const titleId = `rk-dialog-title-${++counter}`;
+            const titleId = `rte-dialog-title-${++counter}`;
             element.setAttribute("aria-labelledby", titleId);
             const form = document.createElement("form");
             form.noValidate = true;
@@ -361,7 +364,7 @@ export function createUi(editor, options) {
             title.id = titleId;
             form.appendChild(title);
             for (const field of item.fields) {
-                const inputId = `rk-field-${++counter}`;
+                const inputId = `rte-field-${++counter}`;
                 const label = part(document.createElement("label"), "field-label");
                 label.htmlFor = inputId;
                 label.textContent = field.label;
@@ -385,7 +388,7 @@ export function createUi(editor, options) {
                 if (field.required)
                     input.required = true;
                 const error = part(document.createElement("span"), "field-error");
-                error.setAttribute("data-rk-error", field.name);
+                error.setAttribute("data-rte-error", field.name);
                 if (field.type === "checkbox") {
                     const row = part(document.createElement("div"), "field-check");
                     row.append(input, label);
@@ -433,7 +436,7 @@ export function createUi(editor, options) {
         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}"]`);
+            const err = entry.form.querySelector(`[data-rte-error="${f.name}"]`);
             if (err)
                 err.textContent = "";
         }
@@ -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,8 +483,9 @@ export function createUi(editor, options) {
             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"])
+            contentEl.replaceWith(...contentEl.childNodes);
+            root.classList.remove("rte-root");
+            for (const name of ["data-rte-theme", "data-rte-scheme", "data-rte-density", "data-rte-part"])
                 root.removeAttribute(name);
             for (const t of appliedTokens)
                 root.style.removeProperty(t);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathkit/rte-ui",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.5",
   "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.5 <0.2.0",
+    "@rathkit/rte-headless": ">=0.1.0-alpha.5 <0.2.0",
+    "@rathkit/rte-themes": ">=0.1.0-alpha.5 <0.2.0",
+    "@rathkit/rte-icons": ">=0.1.0-alpha.5 <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
       }
     ]
   }