@rathkit/rte-element 0.1.0-alpha.4 → 0.2.0-beta.0

package/README.md

@@ -1,8 +1,8 @@
 # @rathkit/rte-element
 
-> **Alpha** (0.1.0-alpha.0). Not for production: the APIs will change between releases. Published to the `next` tag only.
+> **Beta.** Not for production yet: the APIs may still change between releases. Published to the `next` tag only.
 
-The editor as custom elements, `<rk-editor>` and `<rk-toolbar>`, for any page or framework: form-associated (it submits its value, resets, restores), with properties, attributes and events.
+The editor as custom elements, `<rte-editor>` and `<rte-toolbar>`, for any page or framework: form-associated (it submits its value, resets, restores), with properties, attributes and events.
 
 ## Install
 
@@ -20,10 +20,10 @@ This package has no dependencies of its own. It works with `@rathkit/rte-core`,
 </script>
 
 <form>
-  <rk-editor name="body" label="Body"><p>Start here</p></rk-editor>
+  <rte-editor name="body" label="Body"><p>Start here</p></rte-editor>
 </form>
 <script>
-  document.querySelector("rk-editor").addEventListener("rk-change", (e) => console.log(e.detail.html));
+  document.querySelector("rte-editor").addEventListener("rte-change", (e) => console.log(e.detail.html));
 </script>
 ```
 

package/dist/editor-element.d.ts

@@ -1,8 +1,8 @@
 import type { Editor } from "@rathkit/rte-core/dom";
 import { type StandardOptions } from "@rathkit/rte-core/standard";
 /** Options an app can only pass as code (functions, plugin lists): everything in the standard editor's options except what attributes control. */
-export type RkEditorOptions = Omit<StandardOptions, "element" | "html" | "readOnly">;
-export declare class RkEditor extends HTMLElement {
+export type RteElementOptions = Omit<StandardOptions, "element" | "html" | "readOnly" | "disabled">;
+export declare class RteEditorElement extends HTMLElement {
     static formAssociated: boolean;
     static observedAttributes: string[];
     private internals;
@@ -13,9 +13,13 @@ export declare class RkEditor extends HTMLElement {
     private opts;
     private stop;
     private atFocus;
+    /** Whether a disabled `<fieldset>` around the element disables it. */
+    private formDisabled;
     private resolveReady;
     private ready;
     constructor();
+    /** Problems found before there is an editor to report them, on the same channel (`options.onWarning`, else the console). */
+    private warn;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
@@ -33,16 +37,18 @@ export declare class RkEditor extends HTMLElement {
     set value(html: string);
     get readOnly(): boolean;
     set readOnly(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
     /** The editor inside, once it exists: for commands, plugins and subscriptions. */
     get editor(): Editor | undefined;
     /** Resolves with the editor once the element is connected and the editor is built. */
     whenReady(): Promise<Editor>;
     /** Options only code can give (an upload function, more plugins). Set them before the element is connected. */
-    get options(): RkEditorOptions;
-    set options(options: RkEditorOptions);
+    get options(): RteElementOptions;
+    set options(options: RteElementOptions);
     focus(): void;
     private changed;
-    private lastSent;
+    private announce;
     /** Brings the form value and validity up to date. */
     private sync;
     private isEmpty;

package/dist/editor-element.js

@@ -1,5 +1,5 @@
 import { createEditor } from "@rathkit/rte-core/standard";
-export class RkEditor extends HTMLElement {
+export class RteEditorElement extends HTMLElement {
     static formAssociated = true;
     static observedAttributes = ["value", "readonly", "disabled", "label", "required", "placeholder"];
     internals;
@@ -10,12 +10,19 @@ export class RkEditor extends HTMLElement {
     opts = {};
     stop;
     atFocus = "";
+    formDisabled = false;
     resolveReady;
     ready = new Promise((resolve) => { this.resolveReady = resolve; });
     constructor() {
         super();
         this.internals = typeof this.attachInternals === "function" ? this.attachInternals() : undefined;
     }
+    warn(warning) {
+        try {
+            (this.opts.onWarning ?? ((w) => console.warn(`[rte] ${w.code}: ${w.message}`)))(warning);
+        }
+        catch { }
+    }
     connectedCallback() {
         if (this.current)
             return;
@@ -27,30 +34,42 @@ export class RkEditor extends HTMLElement {
             this.defaultHtml = this.hasAttribute("value") ? (this.getAttribute("value") ?? "") : this.html;
         this.replaceChildren();
         const surface = document.createElement("div");
-        surface.setAttribute("data-rk-surface", "");
+        surface.setAttribute("data-rte-surface", "");
         this.appendChild(surface);
         this.surface = surface;
         const label = this.getAttribute("label");
         if (label)
             surface.setAttribute("aria-label", label);
         else if (!this.hasAttribute("aria-label") && !this.hasAttribute("aria-labelledby"))
-            console.warn("[rte] <rk-editor> has no name: give it a label attribute.");
+            this.warn({ code: "missing-label", message: "<rte-editor> has no name: give it a label attribute." });
         const maxLength = Number.parseInt(this.getAttribute("maxlength") ?? "", 10);
         const spellcheck = this.getAttribute("spellcheck");
+        const profile = this.getAttribute("content");
+        const known = profile === "strict" || profile === "standard" || profile === "loose";
+        if (profile !== null && !known)
+            this.warn({ code: "bad-option", message: `<rte-editor content="${profile}"> is not a content profile: use strict, standard or loose.` });
         const editor = createEditor({
-            ...this.opts, element: surface, html: this.html, readOnly: this.hasAttribute("readonly") || this.hasAttribute("disabled"),
+            ...this.opts, element: surface, html: this.html, readOnly: this.hasAttribute("readonly"), disabled: this.hasAttribute("disabled") || this.formDisabled,
             ...(this.hasAttribute("placeholder") ? { placeholder: this.getAttribute("placeholder") ?? "" } : {}),
+            ...(known ? { content: { ...this.opts.content, profile } } : {}),
             ...(Number.isFinite(maxLength) && maxLength >= 0 ? { maxLength } : {}),
             ...(spellcheck === "true" || spellcheck === "false" ? { spellcheck: spellcheck === "true" } : {}),
             ...(this.hasAttribute("autofocus") ? { autofocus: true } : {}),
         });
         this.current = editor;
-        this.stop = editor.subscribe(() => this.changed());
+        const offs = [
+            editor.on("change", (html) => this.changed(html)),
+            editor.on("focus", () => this.announce("rte-focus", {})),
+            editor.on("blur", () => this.announce("rte-blur", {})),
+            editor.on("selection", (selection) => this.announce("rte-selection", { selection })),
+        ];
+        this.stop = () => { for (const off of offs)
+            off(); };
         surface.addEventListener("focusin", this.onFocusIn);
         surface.addEventListener("focusout", this.onFocusOut);
         this.sync();
         this.resolveReady?.(editor);
-        this.dispatchEvent(new CustomEvent("rk-ready", { bubbles: true, composed: true, detail: { editor } }));
+        this.announce("rte-ready", { editor });
     }
     disconnectedCallback() {
         const editor = this.current;
@@ -71,7 +90,8 @@ export class RkEditor extends HTMLElement {
                 this.value = value;
         }
         else if (name === "readonly" || name === "disabled") {
-            this.current?.setReadOnly(this.hasAttribute("readonly") || this.hasAttribute("disabled"));
+            this.current?.setReadOnly(this.hasAttribute("readonly"));
+            this.current?.setDisabled(this.hasAttribute("disabled") || this.formDisabled);
         }
         else if (name === "placeholder") {
             this.current?.setPlaceholder(value ?? "");
@@ -85,7 +105,7 @@ export class RkEditor extends HTMLElement {
         }
     }
     formResetCallback() { this.value = this.defaultHtml; }
-    formDisabledCallback(disabled) { this.current?.setReadOnly(disabled || this.hasAttribute("readonly")); }
+    formDisabledCallback(disabled) { this.formDisabled = disabled; this.current?.setDisabled(disabled || this.hasAttribute("disabled")); }
     formStateRestoreCallback(state) { if (typeof state === "string")
         this.value = state; }
     get form() { return this.internals?.form ?? null; }
@@ -105,25 +125,25 @@ export class RkEditor extends HTMLElement {
     }
     get readOnly() { return this.hasAttribute("readonly"); }
     set readOnly(value) { this.toggleAttribute("readonly", value); }
+    get disabled() { return this.hasAttribute("disabled") || this.formDisabled; }
+    set disabled(value) { this.toggleAttribute("disabled", value); }
     get editor() { return this.current; }
     whenReady() { return this.ready; }
     get options() { return this.opts; }
     set options(options) {
         if (this.current)
-            console.warn("[rte] <rk-editor> options set after it was connected have no effect.");
+            this.warn({ code: "late-options", message: "<rte-editor> options set after it was connected have no effect." });
         this.opts = options;
     }
     focus() { this.current?.focus(); }
-    changed() {
-        const html = this.value;
-        if (html === this.lastSent)
-            return;
-        this.lastSent = html;
+    changed(html) {
         this.sync();
-        this.dispatchEvent(new CustomEvent("rk-change", { bubbles: true, composed: true, detail: { html } }));
+        this.announce("rte-change", { html });
         this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
     }
-    lastSent = "";
+    announce(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }));
+    }
     sync() {
         const html = this.value;
         this.internals?.setFormValue(html);
@@ -132,7 +152,26 @@ export class RkEditor extends HTMLElement {
         else
             this.internals?.setValidity({});
     }
-    isEmpty(html) { return html.replace(/<[^>]*>/g, "").replace(/&nbsp;/g, "").trim() === "" && !html.includes("<img"); }
+    isEmpty(html) {
+        if (html.includes("<img"))
+            return false;
+        let text = "";
+        let open = -1;
+        for (let i = 0; i < html.length; i++) {
+            const ch = html[i];
+            if (open >= 0) {
+                if (ch === ">")
+                    open = -1;
+            }
+            else if (ch === "<")
+                open = i;
+            else
+                text += ch;
+        }
+        if (open >= 0)
+            text += html.slice(open);
+        return text.replace(/&nbsp;/g, "").trim() === "";
+    }
     onFocusIn = () => { this.atFocus = this.value; };
     onFocusOut = () => { if (this.value !== this.atFocus)
         this.dispatchEvent(new Event("change", { bubbles: true })); };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import { RkEditor, type RkEditorOptions } from "./editor-element.ts";
-import { RkToolbar } from "./toolbar-element.ts";
-export { RkEditor, RkToolbar, type RkEditorOptions };
+import { RteEditorElement, type RteElementOptions } from "./editor-element.ts";
+import { RteToolbarElement } from "./toolbar-element.ts";
+export { RteEditorElement, RteToolbarElement, type RteElementOptions };
 /** Registers the elements. Safe to call more than once. */
 export declare function define(names?: {
     readonly editor?: string;

package/dist/index.js

@@ -1,11 +1,11 @@
-import { RkEditor } from "./editor-element.js";
-import { RkToolbar } from "./toolbar-element.js";
-export { RkEditor, RkToolbar };
+import { RteEditorElement } from "./editor-element.js";
+import { RteToolbarElement } from "./toolbar-element.js";
+export { RteEditorElement, RteToolbarElement };
 export function define(names = {}) {
-    const editor = names.editor ?? "rk-editor";
-    const toolbar = names.toolbar ?? "rk-toolbar";
+    const editor = names.editor ?? "rte-editor";
+    const toolbar = names.toolbar ?? "rte-toolbar";
     if (!customElements.get(editor))
-        customElements.define(editor, RkEditor);
+        customElements.define(editor, RteEditorElement);
     if (!customElements.get(toolbar))
-        customElements.define(toolbar, RkToolbar);
+        customElements.define(toolbar, RteToolbarElement);
 }

package/dist/toolbar-element.d.ts

@@ -1,4 +1,4 @@
-export declare class RkToolbar extends HTMLElement {
+export declare class RteToolbarElement extends HTMLElement {
     static observedAttributes: string[];
     private toolbar;
     private unbind;
@@ -7,7 +7,7 @@ export declare class RkToolbar extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
-    /** The editor this toolbar belongs to: the element named by `for`, else the nearest <rk-editor> beside or around it. */
+    /** The editor this toolbar belongs to: the element named by `for`, else the nearest <rte-editor> beside or around it. */
     private target;
     private teardown;
     private build;

package/dist/toolbar-element.js

@@ -1,5 +1,5 @@
 import { createToolbar } from "@rathkit/rte-headless";
-export class RkToolbar extends HTMLElement {
+export class RteToolbarElement extends HTMLElement {
     static observedAttributes = ["for", "label", "slot-name"];
     toolbar;
     unbind;
@@ -13,7 +13,7 @@ export class RkToolbar extends HTMLElement {
         const id = this.getAttribute("for");
         if (id)
             return this.ownerDocument.getElementById(id);
-        return (this.parentElement?.querySelector("rk-editor") ?? this.closest("rk-editor"));
+        return (this.parentElement?.querySelector("rte-editor") ?? this.closest("rte-editor"));
     }
     teardown() {
         this.unwatch?.();
@@ -27,7 +27,7 @@ export class RkToolbar extends HTMLElement {
         const host = this.target();
         if (!host)
             return;
-        await customElements.whenDefined("rk-editor");
+        await customElements.whenDefined("rte-editor");
         const editor = await host.whenReady();
         if (ticket !== this.building || !this.isConnected)
             return;
@@ -44,7 +44,7 @@ export class RkToolbar extends HTMLElement {
                 }
                 else if (item.kind === "select") {
                     const select = document.createElement("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);
@@ -56,13 +56,13 @@ export class RkToolbar extends HTMLElement {
                 else if (item.kind !== "menu") {
                     const button = document.createElement("button");
                     button.type = "button";
-                    button.setAttribute("data-rk-item", item.id);
+                    button.setAttribute("data-rte-item", item.id);
                     button.textContent = toolbar.state(item.id)?.label ?? item.id;
                     controls.push(button);
                 }
             }
             this.replaceChildren(...controls);
-            this.unbind = toolbar.bind(this, { onOpen: (item, control) => this.dispatchEvent(new CustomEvent("rk-open", { bubbles: true, composed: true, detail: { item, control } })) });
+            this.unbind = toolbar.bind(this, { onOpen: (item, control) => this.dispatchEvent(new CustomEvent("rte-open", { bubbles: true, composed: true, detail: { item, control } })) });
         };
         draw();
         this.unwatch = editor.ui.subscribe(this.getAttribute("slot-name") ?? "toolbar.main", draw);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rathkit/rte-element",
-  "version": "0.1.0-alpha.4",
-  "description": "The editor as a custom element, <rk-editor>, for any page or framework: form-associated, with properties, attributes and events.",
+  "version": "0.2.0-beta.0",
+  "description": "The editor as a custom element, <rte-editor>, for any page or framework: form-associated, with properties, attributes and events.",
   "keywords": [
     "rich-text",
     "editor",
@@ -50,8 +50,8 @@
     }
   },
   "peerDependencies": {
-    "@rathkit/rte-core": ">=0.1.0-alpha.4 <0.2.0",
-    "@rathkit/rte-headless": ">=0.1.0-alpha.4 <0.2.0"
+    "@rathkit/rte-core": ">=0.2.0-beta.0 <0.3.0",
+    "@rathkit/rte-headless": ">=0.2.0-beta.0 <0.3.0"
   },
   "peerDependenciesMeta": {
     "@rathkit/rte-core": {