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

package/README.md

@@ -1,6 +1,6 @@
 # @rathkit/rte-headless
 
-> **Alpha** (0.1.0-alpha.0). Not for production: the APIs will change between releases. Published to the `next` tag only.
+> **Alpha.** Not for production: the APIs will change between releases. Published to the `next` tag only.
 
 How a toolbar, menu, dialog, tooltip and live announcement should behave for the keyboard and assistive technology, with no markup or CSS of its own. Draw the elements yourself and this makes them behave (roving focus, ARIA state, focus returned to the editor); also external stores for any framework.
 
@@ -23,12 +23,12 @@ surface.setAttribute("aria-label", "Body");
 document.body.append(surface);
 const editor = createEditor({ element: surface, html: "<p>Hello</p>" });
 
-// Draw the controls yourself and mark each with data-rk-item="<id>"; the toolbar makes them behave.
+// Draw the controls yourself and mark each with data-rte-item="<id>"; the toolbar makes them behave.
 const bar = document.createElement("div");
 const toolbar = createToolbar(editor, { label: "Formatting" });
 for (const item of toolbar.items.filter((i) => i.kind === "button" || i.kind === "toggle")) {
   const button = document.createElement("button");
-  button.setAttribute("data-rk-item", item.id);
+  button.setAttribute("data-rte-item", item.id);
   button.textContent = toolbar.state(item.id).label;
   bar.append(button);
 }

package/dist/dialog.d.ts

@@ -24,7 +24,7 @@ export interface FormCheck {
 }
 /**
  * Checks a dialog's form against the fields an item asked for. Each field that is missing or wrong gets `aria-invalid` and is tied to
- * its message by `aria-describedby`; put an element marked `data-rk-error="<field name>"` where the message should appear. The first
+ * its message by `aria-describedby`; put an element marked `data-rte-error="<field name>"` where the message should appear. The first
  * bad field takes the focus, and the messages are announced when an announcer is given.
  */
 export declare function checkFields(form: HTMLElement, fields: readonly Field[], messages?: {

package/dist/dialog.js

@@ -104,14 +104,14 @@ export function checkFields(form, fields, messages = {}, announce) {
             problem = messages.required ?? `${field.label} is required.`;
         else if (value !== "" && field.type === "url" && /^\s*(javascript|vbscript|data):/i.test(value))
             problem = messages.url ?? `${field.label} must be a web, mail or phone address.`;
-        const slot = form.querySelector(`[data-rk-error="${field.name}"]`);
+        const slot = form.querySelector(`[data-rte-error="${field.name}"]`);
         if (slot)
             slot.textContent = problem;
         if (problem) {
             input.setAttribute("aria-invalid", "true");
             if (slot) {
                 if (!slot.id)
-                    slot.id = uniqueId("rk-error");
+                    slot.id = uniqueId("rte-error");
                 input.setAttribute("aria-describedby", slot.id);
             }
             problems.push(problem);

package/dist/disclosure.js

@@ -3,7 +3,7 @@ export const uniqueId = (prefix) => `${prefix}-${++counter}`;
 export function createDisclosure(options) {
     const { trigger, popup } = options;
     if (!popup.id)
-        popup.id = uniqueId("rk-popup");
+        popup.id = uniqueId("rte-popup");
     trigger.setAttribute("aria-haspopup", options.kind ?? "true");
     trigger.setAttribute("aria-controls", popup.id);
     let isOpen = false;

package/dist/index.d.ts

@@ -4,5 +4,5 @@ export { createDisclosure, type Disclosure, type DisclosureOptions } from "./dis
 export { createMenu, type Menu, type MenuOptions } from "./menu.ts";
 export { checkFields, createDialog, type Dialog, type DialogOptions, type FormCheck } from "./dialog.ts";
 export { commandStore, selectStore, snapshotStore, toReadable, type ExternalStore, type Readable } from "./stores.ts";
-export type { HeadlessEditor, Unsubscribe } from "./types.ts";
+export type { HeadlessEditor } from "./types.ts";
 export { createTooltip, type Tooltip, type TooltipOptions } from "./tooltip.ts";

package/dist/menu.js

@@ -2,10 +2,10 @@ import { createDisclosure, uniqueId } from "./disclosure.js";
 export function createMenu(options) {
     const { trigger, menu } = options;
     if (!trigger.id)
-        trigger.id = uniqueId("rk-menu-button");
+        trigger.id = uniqueId("rte-menu-button");
     menu.setAttribute("role", "menu");
     menu.setAttribute("aria-labelledby", trigger.id);
-    const items = () => [...menu.querySelectorAll("[data-rk-menuitem]")];
+    const items = () => [...menu.querySelectorAll("[data-rte-menuitem]")];
     let typed = "";
     let typedTimer;
     const disclosure = createDisclosure({
@@ -82,7 +82,7 @@ export function createMenu(options) {
         }
     };
     const onClick = (e) => {
-        const item = e.target?.closest("[data-rk-menuitem]");
+        const item = e.target?.closest("[data-rte-menuitem]");
         if (item && menu.contains(item))
             choose(item);
     };

package/dist/toolbar.d.ts

@@ -37,7 +37,7 @@ export interface Toolbar {
     activate(id: string, value?: unknown): boolean;
     /** Called, once per turn, when the items or the state of any of them change. */
     subscribe(callback: () => void): Unsubscribe;
-    /** Makes the elements a person's own interface drew behave. Mark each with `data-rk-item="<id>"`. */
+    /** Makes the elements a person's own interface drew behave. Mark each with `data-rte-item="<id>"`. */
     bind(root: HTMLElement, options?: BindOptions): Unsubscribe;
     destroy(): void;
 }

package/dist/toolbar.js

@@ -78,12 +78,12 @@ export function createToolbar(editor, options = {}) {
         root.setAttribute("aria-orientation", options.orientation ?? "horizontal");
         if (options.label)
             root.setAttribute("aria-label", options.label);
-        const controls = () => [...root.querySelectorAll("[data-rk-item]")];
+        const controls = () => [...root.querySelectorAll("[data-rte-item]")];
         let current = 0;
         const sync = () => {
             const all = controls();
             all.forEach((control, index) => {
-                const s = state(control.getAttribute("data-rk-item") ?? "");
+                const s = state(control.getAttribute("data-rte-item") ?? "");
                 if (!s)
                     return;
                 control.setAttribute("aria-disabled", String(s.disabled));
@@ -110,9 +110,9 @@ export function createToolbar(editor, options = {}) {
             all.forEach((c, i) => { c.tabIndex = i === current ? 0 : -1; });
             all[current]?.focus();
         };
-        const control = (target) => (target instanceof Element ? target.closest("[data-rk-item]") : null);
+        const control = (target) => (target instanceof Element ? target.closest("[data-rte-item]") : null);
         const press = (el) => {
-            const id = el.getAttribute("data-rk-item") ?? "";
+            const id = el.getAttribute("data-rte-item") ?? "";
             const item = find(id);
             if (!item || el.getAttribute("aria-disabled") === "true")
                 return;
@@ -137,7 +137,7 @@ export function createToolbar(editor, options = {}) {
             const el = control(e.target);
             if (!el || el.tagName !== "SELECT")
                 return;
-            const item = find(el.getAttribute("data-rk-item") ?? "");
+            const item = find(el.getAttribute("data-rte-item") ?? "");
             if (item?.kind !== "select")
                 return;
             const chosen = item.options.find((o) => String(o.value) === el.value);

package/dist/tooltip.js

@@ -1,11 +1,11 @@
 import { uniqueId } from "./disclosure.js";
-const TIP = "[data-rk-tip]";
+const TIP = "[data-rte-tip]";
 export function createTooltip(options) {
     const { container, popup } = options;
     const delay = options.delay ?? 500;
     const grace = options.grace ?? 150;
     if (!popup.id)
-        popup.id = uniqueId("rk-tooltip");
+        popup.id = uniqueId("rte-tooltip");
     popup.setAttribute("role", "tooltip");
     popup.hidden = true;
     let shown;
@@ -25,7 +25,7 @@ export function createTooltip(options) {
     };
     const show = (target) => {
         clear();
-        const text = target.getAttribute("data-rk-tip");
+        const text = target.getAttribute("data-rte-tip");
         if (!text)
             return;
         shown = target;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathkit/rte-headless",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.5",
   "description": "How a toolbar, menu, dialog or announcement should behave for keyboard and assistive technology, with no markup or CSS of its own.",
   "keywords": [
     "rich-text",
@@ -45,7 +45,7 @@
     }
   },
   "peerDependencies": {
-    "@rathkit/rte-core": ">=0.1.0-alpha.3 <0.2.0"
+    "@rathkit/rte-core": ">=0.1.0-alpha.5 <0.2.0"
   },
   "peerDependenciesMeta": {
     "@rathkit/rte-core": {