@rathkit/rte-core 0.1.0-alpha.4 → 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

@@ -112,7 +112,7 @@ function renderList(list, path, options) {
     if (list.style !== undefined)
         el.style.listStyleType = list.style;
     if (list.notes) {
-        el.setAttribute("data-rk-notes", "");
+        el.setAttribute("data-rte-notes", "");
         el.setAttribute("role", "doc-endnotes");
         el.setAttribute("aria-label", "Notes");
     }
@@ -120,12 +120,12 @@ function renderList(list, path, options) {
         const itemPath = [...path, i];
         const li = tag("li", itemPath);
         if (list.notes && item.id)
-            li.setAttribute("data-rk-note-id", item.id);
-        if (item.content.length === 0 && (item.children[0]?.type === "ul" || item.children[0]?.type === "ol"))
+            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");

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;
@@ -46,6 +72,10 @@ export declare class Editor {
     private readonly observer;
     private readonly cleanups;
     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;
@@ -56,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. */
@@ -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)
@@ -137,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 {};

package/dist/dom/view.js

@@ -1,11 +1,11 @@
 import { createEngine } from "../core.js";
-import { caret, clampPos, deleteBackward, deleteForward, deleteSelection, deleteToEdge, deleteWord, extractSelection, insertBlocks, insertLineBreak, insertText, isCollapsed, moveSelection, selectedText, splitBlock, transposeChars, } from "../edit.js";
+import { caret, clampPos, deleteBackward, deleteForward, deleteSelection, deleteToEdge, deleteWord, extractSelection, insertBlocks, insertLineBreak, endAtBlockEnd, insertText, isCollapsed, moveSelection, selectedText, splitBlock, transposeChars, } from "../edit.js";
 import { exportHtml } from "../export.js";
 import { ops } from "../ops.js";
 import { importBlocks, importHtml } from "../import.js";
 import { inlineLength } from "../model.js";
 import { pasteBlocks } from "../paste.js";
-import { cellChain, getContent, setContent } from "../path.js";
+import { cellChain, containerPaths, getContent, pathKey, setContent } from "../path.js";
 import { tableFromText } from "../tablefill.js";
 import { imageSelection } from "../imageselect.js";
 import { containerAt, createRenderCache, domFromPos, posFromDom, renderDoc } from "./render.js";
@@ -23,6 +23,10 @@ export class Editor {
     engine;
     composing = false;
     reading = false;
+    userReadOnly = false;
+    isDisabled = false;
+    ownTabindex = false;
+    savedTabindex = null;
     loadRemoteImages;
     unhandled;
     dragSource = null;
@@ -42,15 +46,19 @@ export class Editor {
     });
     cleanups = [];
     changeListeners = new Set();
+    replacing = false;
+    resyncs = new Set();
     viewHost;
     constructor(options) {
         this.element = options.element;
         this.loadRemoteImages = options.loadRemoteImages ?? false;
         this.unhandled = options.onUnhandledInput;
         this.engine = createEngine({
-            readOnly: options.readOnly ?? false,
+            readOnly: (options.readOnly ?? false) || (options.disabled ?? false),
             beforeAccess: () => this.readSelection(),
             focus: () => this.element.focus(),
+            ...(options.content ? { content: options.content } : {}),
+            ...(options.onWarning ? { onWarning: options.onWarning } : {}),
             ...(options.maxLength !== undefined ? { maxLength: options.maxLength } : {}),
             ...(options.onMaxLength ? { onMaxLength: options.onMaxLength } : {}),
         });
@@ -63,10 +71,18 @@ export class Editor {
             domFromPos: (pos) => domFromPos(this.element, pos),
         };
         this.engine.pasteHandlers.push(...(options.pasteHandlers ?? []));
-        for (const plugin of options.plugins ?? [])
-            this.use(plugin);
+        for (const plugin of options.plugins ?? []) {
+            try {
+                this.use(plugin);
+            }
+            catch (error) {
+                this.engine.report({ code: "plugin-rejected", plugin: plugin.id, message: `${plugin.id} was not added: ${error instanceof Error ? error.message : String(error)}`, error });
+            }
+        }
         this.engine.setDocument(importHtml(options.html ?? "", this.engine.importOptions));
-        this.element.setAttribute("contenteditable", this.engine.readOnly ? "false" : "true");
+        this.userReadOnly = options.readOnly ?? false;
+        this.isDisabled = options.disabled ?? false;
+        this.applyAccess();
         this.element.setAttribute("role", "textbox");
         this.element.setAttribute("aria-multiline", "true");
         this.element.style.whiteSpace = "pre-wrap";
@@ -110,6 +126,15 @@ export class Editor {
         this.listen(this.element, "compositionstart", () => { this.composing = true; });
         this.listen(this.element, "compositionend", () => { this.composing = false; this.reconcileFromDom(); });
         this.listen(document, "selectionchange", () => this.readSelection());
+        this.listen(this.element, "pointerup", () => this.readSelection());
+        this.listen(this.element, "mouseup", (e) => {
+            if (e.detail >= 3) {
+                this.readSelection();
+                const trimmed = endAtBlockEnd(this.engine.document, this.engine.selection);
+                if (trimmed !== this.engine.selection)
+                    this.engine.setSelection(trimmed);
+            }
+        });
         this.observer.observe(this.element, { subtree: true, childList: true, characterData: true, attributes: true });
         if (options.autofocus)
             this.focus();
@@ -130,6 +155,7 @@ export class Editor {
     get canUndo() { return this.engine.canUndo; }
     get canRedo() { return this.engine.canRedo; }
     get readOnly() { return this.engine.readOnly; }
+    get disabled() { return this.isDisabled; }
     get commands() { return this.engine.commands; }
     get ui() { return this.engine.ui; }
     get keymap() { return this.engine.keymap; }
@@ -138,9 +164,9 @@ export class Editor {
     select = (selector, onChange, equals) => this.engine.select(selector, onChange, equals);
     use = (plugin) => {
         const remove = this.engine.use(plugin);
-        const stop = plugin.view?.(this.viewHost);
+        const stop = this.engine.attempt(plugin.id, "its page part", () => plugin.view?.(this.viewHost), () => undefined);
         return () => { if (stop)
-            stop(); remove(); };
+            this.engine.attempt(plugin.id, "taking its page part away", stop, undefined); remove(); };
     };
     getHtml(separator = "") { return exportHtml(this.engine.document, separator); }
     remoteImages() {
@@ -161,19 +187,98 @@ export class Editor {
     setPlaceholder(text) {
         if (text === "") {
             this.element.removeAttribute("aria-placeholder");
-            this.element.style.removeProperty("--rk-placeholder");
+            this.element.style.removeProperty("--rte-placeholder");
         }
         else {
             this.element.setAttribute("aria-placeholder", text);
-            this.element.style.setProperty("--rk-placeholder", `"${text.replace(/[\\"]/g, "\\$&").replace(/\n/g, "\\A ")}"`);
+            this.element.style.setProperty("--rte-placeholder", `"${text.replace(/[\\"]/g, "\\$&").replace(/\n/g, "\\A ")}"`);
         }
     }
     setHtml(html) {
-        this.engine.setDocument(importHtml(html, this.engine.importOptions));
+        this.replacing = true;
+        try {
+            this.engine.setDocument(importHtml(html, this.engine.importOptions));
+        }
+        finally {
+            this.replacing = false;
+        }
+        for (const resync of this.resyncs)
+            resync();
+    }
+    on(event, listener) {
+        const given = listener;
+        const call = (...args) => this.engine.attempt(undefined, `your ${event} listener`, () => given(...args), undefined, "listener-failed");
+        let last = event === "change" ? this.getHtml() : "";
+        const resync = () => { if (event === "change")
+            last = this.getHtml(); };
+        const handler = (change) => {
+            if (this.replacing)
+                return;
+            if (event === "change") {
+                if (!change.docChanged)
+                    return;
+                const html = this.getHtml();
+                if (html === last)
+                    return;
+                last = html;
+                call(html);
+            }
+            else if (event === "selection") {
+                if (change.selectionChanged)
+                    call(this.selection);
+            }
+            else if (change.focusMoved && this.engine.snapshot.focused === (event === "focus"))
+                call(this);
+        };
+        this.resyncs.add(resync);
+        this.changeListeners.add(handler);
+        return () => { this.resyncs.delete(resync); this.changeListeners.delete(handler); };
     }
     setReadOnly(value) {
-        this.engine.setReadOnly(value);
-        this.element.setAttribute("contenteditable", value ? "false" : "true");
+        this.userReadOnly = value;
+        this.applyAccess();
+    }
+    setDisabled(value) {
+        this.isDisabled = value;
+        this.applyAccess();
+    }
+    applyAccess() {
+        const el = this.element;
+        const off = this.userReadOnly || this.isDisabled;
+        this.engine.setReadOnly(off);
+        el.setAttribute("contenteditable", off ? "false" : "true");
+        if (this.userReadOnly && !this.isDisabled)
+            el.setAttribute("aria-readonly", "true");
+        else
+            el.removeAttribute("aria-readonly");
+        if (this.isDisabled)
+            el.setAttribute("aria-disabled", "true");
+        else
+            el.removeAttribute("aria-disabled");
+        if (off && !this.isDisabled) {
+            if (!el.hasAttribute("tabindex")) {
+                el.setAttribute("tabindex", "0");
+                this.ownTabindex = true;
+            }
+        }
+        else if (this.ownTabindex) {
+            el.removeAttribute("tabindex");
+            this.ownTabindex = false;
+        }
+        if (this.isDisabled) {
+            if (el.hasAttribute("tabindex")) {
+                this.savedTabindex = el.getAttribute("tabindex");
+                el.removeAttribute("tabindex");
+            }
+            if (el.contains(el.ownerDocument.activeElement))
+                el.ownerDocument.activeElement?.blur();
+        }
+        else if (this.savedTabindex !== null) {
+            el.setAttribute("tabindex", this.savedTabindex);
+            this.savedTabindex = null;
+        }
+        for (const listener of [...this.changeListeners])
+            listener({ docChanged: false, selectionChanged: false, focusMoved: false });
     }
     onChange(listener) {
         return this.engine.subscribe(() => listener(this));
@@ -250,13 +355,14 @@ export class Editor {
     draw() {
         renderDoc(this.engine.document, this.element, { loadRemoteImages: this.loadRemoteImages }, this.renderCache);
         const blocks = this.engine.document.blocks;
-        this.element.toggleAttribute("data-rk-empty", blocks.length === 1 && blocks[0]?.type === "p" && blocks[0].content.length === 0);
+        this.element.toggleAttribute("data-rte-empty", blocks.length === 1 && blocks[0]?.type === "p" && blocks[0].content.length === 0);
         this.observer.takeRecords();
         this.writeSelection();
     }
     setSelection(sel) {
         this.engine.setSelection({ anchor: clampPos(this.engine.document, sel.anchor), focus: clampPos(this.engine.document, sel.focus) });
     }
+    fellBack = false;
     readSelection(force = false) {
         if (!force && !this.element.contains(document.activeElement))
             return;
@@ -267,6 +373,7 @@ export class Editor {
             return;
         const first = domSel.rangeCount > 1 ? domSel.getRangeAt(0) : undefined;
         const last = first ? domSel.getRangeAt(domSel.rangeCount - 1) : undefined;
+        this.fellBack = false;
         const anchor = first ? this.posOf(first.startContainer, first.startOffset) : this.posOf(domSel.anchorNode, domSel.anchorOffset);
         const focus = last ? this.posOf(last.endContainer, last.endOffset) : this.posOf(domSel.focusNode, domSel.focusOffset);
         if (!anchor || !focus)
@@ -279,17 +386,33 @@ export class Editor {
         finally {
             this.reading = false;
         }
+        if (this.fellBack && isCollapsed(this.engine.selection))
+            this.writeSelection();
     }
     posOf(node, offset) {
         const direct = node !== this.element ? posFromDom(this.element, node, offset) : null;
         if (direct || !(node instanceof Element))
             return direct;
         const containers = (el) => (el.hasAttribute("data-rte") ? [el, ...el.querySelectorAll("[data-rte]")] : [...el.querySelectorAll("[data-rte]")]);
-        const at = node.children[offset];
-        const first = at ? containers(at)[0] : undefined;
+        this.fellBack = true;
+        let first;
+        for (let i = offset; i < node.children.length && !first; i++)
+            first = containers(node.children[i])[0];
         if (first)
             return posFromDom(this.element, first, 0);
         const all = containers(node);
+        if (all.length === 0 && node !== this.element) {
+            for (let from = node; from && from !== this.element; from = from.parentElement) {
+                for (let next = from.nextElementSibling; next; next = next.nextElementSibling) {
+                    const there = containers(next)[0];
+                    if (there)
+                        return posFromDom(this.element, there, 0);
+                }
+            }
+            const every = [...this.element.querySelectorAll("[data-rte]")];
+            const end = every[every.length - 1];
+            return end ? posFromDom(this.element, end, end.childNodes.length) : null;
+        }
         const last = all[all.length - 1];
         return last ? posFromDom(this.element, last, last.childNodes.length) : null;
     }
@@ -320,7 +443,7 @@ export class Editor {
             return;
         const domSel = document.getSelection();
         const raw = domSel?.focusNode && this.element.contains(domSel.focusNode) ? posFromDom(this.element, domSel.focusNode, domSel.focusOffset) : null;
-        this.apply("type", (doc) => {
+        this.apply("compose", (doc) => {
             const next = setContent(doc, path, first.content);
             return { doc: next, selection: raw ? caret(clampPos(next, raw)) : caret(clampPos(next, this.engine.selection.focus)) };
         });
@@ -500,12 +623,7 @@ export class Editor {
         const formats = { "text/html": exportHtml({ blocks }), "text/plain": selectedText(this.engine.document, this.engine.selection) };
         for (const formatter of this.engine.copyFormatters) {
             let added;
-            try {
-                added = formatter(blocks);
-            }
-            catch (error) {
-                this.engine.warn(`A copy formatter failed: ${String(error)}`);
-            }
+            added = formatter(blocks);
             for (const [type, value] of Object.entries(added ?? {}))
                 if (/^[a-z]+\/[a-z0-9.+-]+$/i.test(type) && typeof value === "string")
                     formats[type] = value;
@@ -590,7 +708,28 @@ export class Editor {
     onKeyDown(event) {
         if (this.composing || event.isComposing)
             return;
-        if (this.engine.handleKey(event))
+        if (this.engine.handleKey(event)) {
             event.preventDefault();
+            return;
+        }
+        this.keyAtDocumentEdge(event);
+    }
+    keyAtDocumentEdge(event) {
+        if ((event.key !== "Backspace" && event.key !== "Delete") || event.ctrlKey || event.metaKey || event.altKey || event.shiftKey || this.engine.readOnly)
+            return;
+        this.engine.refresh();
+        const sel = this.engine.selection;
+        if (!isCollapsed(sel))
+            return;
+        const paths = containerPaths(this.engine.document);
+        const edge = paths[event.key === "Backspace" ? 0 : paths.length - 1];
+        const here = sel.focus;
+        if (!edge || pathKey(here.path) !== pathKey(edge) || here.offset !== (event.key === "Backspace" ? 0 : inlineLength(getContent(this.engine.document, edge))))
+            return;
+        event.preventDefault();
+        if (event.key === "Backspace")
+            this.apply("delete", (doc, s) => deleteBackward(doc, s, this.engine.behaviors));
+        else
+            this.apply("delete", deleteForward);
     }
 }

package/dist/edit.d.ts

@@ -20,6 +20,12 @@ export declare function insertLineBreak(doc: Doc, sel: Selection): EditResult;
 export declare function splitBlock(doc: Doc, sel: Selection, behaviors?: Behaviors): EditResult;
 export declare function deleteBackward(doc: Doc, sel: Selection, behaviors?: Behaviors): EditResult;
 export declare function deleteForward(doc: Doc, sel: Selection): EditResult;
+/**
+ * A selection of whole blocks that a browser made by running its end on to the start of the next block (a triple click in Chrome and
+ * Safari does this) ends at the end of the last selected block instead, so what is typed or deleted never reaches into the next one.
+ * Anything else is returned as it was.
+ */
+export declare function endAtBlockEnd(doc: Doc, sel: Selection): Selection;
 /** Deletes back to the start of the previous word (or forward to the end of the next). At a block edge it joins blocks like Backspace. */
 export declare function deleteWord(doc: Doc, sel: Selection, direction: "backward" | "forward", behaviors?: Behaviors): EditResult;
 /** Deletes from the caret to the start or end of the block. */