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

package/README.md

@@ -1,6 +1,6 @@
 # @rathkit/rte-core
 
-> **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.
 
 The editor itself: the document model, HTML import and export, editing operations, commands and keys, the plugin host, the browser view, and the free plugins (lists, tables, find and replace, word-processor lists, SVG, images). The model does not touch the DOM, so it also runs in Node.
 

package/dist/autoformat/autoformat.js

@@ -73,7 +73,19 @@ export function spanShortcut(doc, sel, typed) {
     }
     return undefined;
 }
-const ADDRESS = /(?:https?:\/\/|www\.)[^\s<>"]+$/i;
+const ADDRESS_START = /(?:https?:\/\/|www\.)/gi;
+const ADDRESS_BREAK = /[\s<>"]/;
+function addressAtEnd(text) {
+    let from = text.length;
+    while (from > 0 && !ADDRESS_BREAK.test(text[from - 1]))
+        from--;
+    ADDRESS_START.lastIndex = from;
+    for (let m = ADDRESS_START.exec(text); m; m = ADDRESS_START.exec(text)) {
+        if (m.index + m[0].length < text.length)
+            return { index: m.index, text: text.slice(m.index) };
+    }
+    return undefined;
+}
 export function addressShortcut(doc, sel, typed) {
     if (typed !== " " || !isCollapsed(sel))
         return undefined;
@@ -83,10 +95,13 @@ export function addressShortcut(doc, sel, typed) {
     const content = getContent(doc, path);
     const offset = sel.anchor.offset;
     const before = inlineText(sliceInline(content, 0, offset));
-    const m = ADDRESS.exec(before);
+    const m = addressAtEnd(before);
     if (!m)
         return undefined;
-    const word = m[0].replace(/[.,;:!?)\]'"]+$/, "");
+    let stop = m.text.length;
+    while (stop > 0 && ".,;:!?)]'\"".includes(m.text[stop - 1]))
+        stop--;
+    const word = m.text.slice(0, stop);
     if (word.replace(/^(?:https?:\/\/|www\.)/i, "").length < 3 || !/[a-z0-9]/i.test(word.replace(/^(?:https?:\/\/|www\.)/i, "")))
         return undefined;
     const start = m.index;

package/dist/base64.js

@@ -1,6 +1,10 @@
 const B64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
 export function decodeBase64(input) {
-    const text = input.replace(/\s+/g, "").replace(/=+$/, "");
+    const spaced = input.replace(/\s+/g, "");
+    let end = spaced.length;
+    while (end > 0 && spaced[end - 1] === "=")
+        end--;
+    const text = spaced.slice(0, end);
     if (/[^A-Za-z0-9+/]/.test(text))
         return undefined;
     const out = new Uint8Array(Math.floor((text.length * 3) / 4));

package/dist/dom/index.d.ts

@@ -1,2 +1,2 @@
-export { Editor, type EditorOptions } from "./view.ts";
+export { Editor, type EditorEvents, type EditorOptions } from "./view.ts";
 export { renderDoc, posFromDom, domFromPos } from "./render.ts";

package/dist/dom/render.js

@@ -44,6 +44,13 @@ function renderInline(parent, content, options) {
                 parent.appendChild(gap);
             }
         }
+        else if (node.type === "note") {
+            const mark = document.createElement("sup");
+            mark.setAttribute("data-rte-note", node.id);
+            mark.setAttribute("contenteditable", "false");
+            mark.setAttribute("role", "doc-noteref");
+            parent.appendChild(mark);
+        }
         else if (node.type === "image") {
             const img = document.createElement("img");
             if (isRemote(node.src) && !options.loadRemoteImages)
@@ -104,14 +111,21 @@ function renderList(list, path, options) {
         el.setAttribute("start", String(list.start));
     if (list.style !== undefined)
         el.style.listStyleType = list.style;
+    if (list.notes) {
+        el.setAttribute("data-rte-notes", "");
+        el.setAttribute("role", "doc-endnotes");
+        el.setAttribute("aria-label", "Notes");
+    }
     list.items.forEach((item, i) => {
         const itemPath = [...path, i];
         const li = tag("li", itemPath);
-        if (item.content.length === 0 && item.sublists.length > 0)
+        if (list.notes && item.id)
+            li.setAttribute("data-rte-note-id", item.id);
+        if (item.bare === true && item.content.length === 0 && (item.children[0]?.type === "ul" || item.children[0]?.type === "ol"))
             li.style.listStyleType = "none";
         if (item.checked !== undefined) {
             li.style.listStyleType = "none";
-            li.setAttribute("data-rk-task", item.checked ? "done" : "open");
+            li.setAttribute("data-rte-task", item.checked ? "done" : "open");
             const box = document.createElement("span");
             box.setAttribute("data-rte-check", "");
             box.setAttribute("role", "checkbox");
@@ -121,7 +135,7 @@ function renderList(list, path, options) {
             li.appendChild(box);
         }
         renderInline(li, item.content, options);
-        item.sublists.forEach((sub, k) => li.appendChild(renderList(sub, [...itemPath, k], options)));
+        item.children.forEach((child, k) => li.appendChild(renderBlock(child, [...itemPath, k], options)));
         el.appendChild(li);
     });
     return el;
@@ -281,17 +295,14 @@ export function renderDoc(doc, root, options = { loadRemoteImages: false }, cach
     });
     cache.dirty.clear();
     cache.claimed.clear();
-    const keep = new Set(wanted);
-    for (const node of [...root.childNodes])
-        if (!keep.has(node))
-            root.removeChild(node);
-    let cursor = root.firstChild;
-    for (const el of wanted) {
-        if (cursor === el)
-            cursor = cursor.nextSibling;
-        else
-            root.insertBefore(el, cursor);
-    }
+    reconcile(root, wanted);
+    root.querySelectorAll("sup[data-rte-note]").forEach((mark, i) => {
+        const n = String(i + 1);
+        if (mark.textContent !== n) {
+            mark.textContent = n;
+            mark.setAttribute("aria-label", `Footnote ${n}`);
+        }
+    });
 }
 function* inlineItems(container) {
     const stack = [[...container.childNodes].reverse()];
@@ -307,7 +318,7 @@ function* inlineItems(container) {
         else if (node instanceof Element) {
             if (node.hasAttribute("data-rte-ph") || node.hasAttribute("data-rte-check") || node.hasAttribute("data-rte-caption") || BLOCK_TAGS.has(node.tagName))
                 continue;
-            if (node.tagName === "BR" || node.tagName === "IMG")
+            if (node.tagName === "BR" || node.tagName === "IMG" || node.hasAttribute("data-rte-note"))
                 yield node;
             else
                 stack.push([...node.childNodes].reverse());

package/dist/dom/view.d.ts

@@ -1,5 +1,7 @@
 import type { Engine } from "../engine.ts";
 import type { Plugin } from "../plugin.ts";
+import type { ContentOptions } from "../policy.ts";
+import type { Warning } from "../warning.ts";
 import { type Doc, type MarkType } from "../model.ts";
 import { type ClipboardData, type PasteHandler } from "../paste.ts";
 import { type Pos, type Selection } from "../path.ts";
@@ -7,7 +9,10 @@ export interface EditorOptions {
     readonly element: HTMLElement;
     readonly html?: string;
     readonly pasteHandlers?: readonly PasteHandler[];
+    /** No edits; the page can still be focused, selected and copied from. Default false. */
     readonly readOnly?: boolean;
+    /** Read-only, and also out of the tab order and not focusable: for a field that does not apply now. Default false. */
+    readonly disabled?: boolean;
     /** Draw remote (`http`, `https`) images. Off by default, so pasting never makes the browser fetch anything. */
     readonly loadRemoteImages?: boolean;
     /** Called with the `inputType` of input the editor does not handle. That input is blocked, not applied. */
@@ -15,12 +20,16 @@ export interface EditorOptions {
     /** Plugins to add: lists, for one (`@rathkit/rte-core/lists`). With none, the editor has only what is built in. */
     readonly plugins?: readonly Plugin[];
     /**
-     * A hint shown while the document is empty. The editor marks itself `data-rk-empty` when empty, says the hint to assistive
-     * technology (`aria-placeholder`) and puts it in the custom property `--rk-placeholder`; the styled interface draws it.
+     * A hint shown while the document is empty. The editor marks itself `data-rte-empty` when empty, says the hint to assistive
+     * technology (`aria-placeholder`) and puts it in the custom property `--rte-placeholder`; the styled interface draws it.
      */
     readonly placeholder?: string;
     /** The most text the document may hold, in characters. Typing and pasting past it are refused (see `onMaxLength`). */
     readonly maxLength?: number;
+    /** Told about problems the editor carried on from (a plugin that threw, content that was refused): see docs/ERRORS.md. Default: the console. */
+    readonly onWarning?: (warning: Warning) => void;
+    /** What is kept and dropped when HTML is read: a profile and single choices on top of it. See docs/CONTENT-POLICY.md. */
+    readonly content?: ContentOptions;
     /** Called when an edit is refused for being past `maxLength`, with the limit and what the length would have been. */
     readonly onMaxLength?: (info: {
         readonly limit: number;
@@ -32,12 +41,29 @@ export interface EditorOptions {
     readonly autofocus?: boolean;
 }
 type Listener = (editor: Editor) => void;
+/**
+ * What an editor reports, by name (`editor.on(name, listener)`). Every package that wraps the editor reports the same five things
+ * with the same timing; see docs/EVENTS.md.
+ * - `change`: the document's HTML, after an edit that altered it. Not for `setHtml`, and not for a selection that moved.
+ * - `focus` and `blur`: the editor's own focus moved in or out.
+ * - `selection`: the selection moved or changed.
+ */
+export interface EditorEvents {
+    change: (html: string) => void;
+    focus: (editor: Editor) => void;
+    blur: (editor: Editor) => void;
+    selection: (selection: Selection) => void;
+}
 export declare class Editor {
     readonly element: HTMLElement;
     /** The editor's state, commands, keys and plugins. It has no DOM, so everything it does can be driven without a page. */
     readonly engine: Engine;
     private composing;
     private reading;
+    private userReadOnly;
+    private isDisabled;
+    private ownTabindex;
+    private savedTabindex;
     private readonly loadRemoteImages;
     private readonly unhandled;
     private dragSource;
@@ -45,9 +71,12 @@ export declare class Editor {
     /** Notices changes to the page that the editor did not make, so the block they touched is drawn again from the model. */
     private readonly observer;
     private readonly cleanups;
-    private readonly cellMarks;
-    private readonly imageSelection;
-    private readonly tableGrips;
+    private readonly changeListeners;
+    /** Set while `setHtml` replaces the document, so replacing it is not reported as an edit. */
+    private replacing;
+    /** Lets each `change` listener forget what it last reported, after the document was replaced. */
+    private readonly resyncs;
+    private readonly viewHost;
     constructor(options: EditorOptions);
     get doc(): Doc;
     get selection(): Selection;
@@ -57,7 +86,10 @@ export declare class Editor {
     rangeFor(from: Pos, to: Pos): Range | null;
     get canUndo(): boolean;
     get canRedo(): boolean;
+    /** Whether edits are refused: read-only, or disabled. */
     get readOnly(): boolean;
+    /** Whether the editor is disabled: read-only and out of the tab order. */
+    get disabled(): boolean;
     /** Named commands and their state: `editor.commands.run("format.bold")`, `editor.commands.state("format.bold")`. */
     get commands(): Engine["commands"];
     /** Interface items (toolbar buttons and the like) that the editor and its plugins offer. */
@@ -69,6 +101,7 @@ export declare class Editor {
     subscribe: Engine["subscribe"];
     select: Engine["select"];
     /** Adds a plugin. Returns a function that removes it. */
+    /** Adds a plugin, with its page-facing part if it has one. Returns what takes both away again. */
     use: Engine["use"];
     /** The document as HTML. `separator` goes between blocks (a newline makes it readable). */
     getHtml(separator?: string): string;
@@ -76,9 +109,19 @@ export declare class Editor {
     remoteImages(): string[];
     /** Sets the hint shown while the document is empty ("" for none). */
     setPlaceholder(text: string): void;
-    /** Replaces the whole document and empties the history. */
+    /** Replaces the whole document and empties the history. Reported to nobody as a `change`, like setting the value of a text field. */
     setHtml(html: string): void;
+    /** Listens for `change`, `focus`, `blur` or `selection` (see `EditorEvents`). Returns a function that stops listening. */
+    on<K extends keyof EditorEvents>(event: K, listener: EditorEvents[K]): () => void;
+    /** Read-only on or off. While the editor is disabled it stays read-only whatever this says. */
     setReadOnly(value: boolean): void;
+    /** Disabled on or off. Disabled is read-only, not focusable and out of the tab order. */
+    setDisabled(value: boolean): void;
+    /**
+     * The page attributes that say what the editor allows: editable, read-only (focusable, `aria-readonly`) or disabled (not
+     * focusable, `aria-disabled`). Only the attributes this sets are touched; a `tabindex` the page gave is its own.
+     */
+    private applyAccess;
     /** Calls back after the document or selection changed, once per turn. Same as `subscribe`, kept for older callers. */
     onChange(listener: Listener): () => void;
     destroy(): void;
@@ -104,6 +147,8 @@ export declare class Editor {
      * Brings the editor's selection up to date from the page. Only while the editor has the focus: when focus is somewhere else (a dialog,
      * a toolbar button) the page's selection is not the editor's business, and the editor keeps the selection it had.
      */
+    /** Set while a selection is read when some point had to be moved to a text position. */
+    private fellBack;
     private readSelection;
     /**
      * A point on the page as a position in the document. Some browsers report a selection that spans whole blocks (select all, in Firefox)
@@ -124,6 +169,8 @@ export declare class Editor {
      */
     private deleteVisualLine;
     private onPaste;
+    /** What copy, cut and drag write: the model's own HTML and text, then whatever formats plugins add. */
+    private copyFormats;
     /** Copy and cut write the model's own HTML and text, not the page's markup. */
     private onCopy;
     private onDragStart;
@@ -135,5 +182,11 @@ export declare class Editor {
     private pasteFiles;
     /** Keys go through the key map: a chord bound to a command runs it, and the event is stopped if the command changed something. */
     private onKeyDown;
+    /**
+     * Backspace at the very start of the document, and Delete at the very end, change something here (a code block or heading becomes a
+     * paragraph, a rule goes) but there is nothing for the browser to delete, so WebKit sends no input event for them. They are handled
+     * from the key instead.
+     */
+    private keyAtDocumentEdge;
 }
 export {};