nexus-shared 1.1.20 → 2.0.0

package/dist/Components/Inputs/RichTextEditor.js

@@ -0,0 +1,1170 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconAlignCenter, iconAlignJustified, iconAlignLeft, iconAlignRight, iconArrowBackUp, iconArrowForwardUp, iconBlockquote, iconBold, iconBraces, iconChevronDown, iconClearFormatting, iconCode, iconColumnInsertLeft, iconColumnInsertRight, iconColumnRemove, iconH1, iconH2, iconH3, iconItalic, iconLink, iconList, iconListNumbers, iconPencil, iconPilcrow, iconRowInsertBottom, iconRowInsertTop, iconRowRemove, iconSeparatorHorizontal, iconSourceCode, iconStrikethrough, iconSubscript, iconSuperscript, iconTable, iconTextColor, iconTextSize, iconTrash, iconUnderline, InlineIcon, } from "nexus-icons";
+import { useEffect, useEffectEvent, useId, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { safeUrl } from "../../Helpers/MarkdownHelpers.js";
+import { formatRichTextHtml, parseColor, richTextToEditorHtml, richTextTokenChip, richTextToPlainText, sanitizeRichText, validateRichText, } from "../../Helpers/RichTextHelpers.js";
+import { Menu } from "../Documents/Menu.js";
+import { TabButtons } from "../Documents/TabButtons.js";
+import { EditorCount, useEditorShell, writeEditorCount } from "./EditorShell.js";
+import { Field } from "./Field.js";
+import { isFirstInvalid, useInputField } from "./InputField.js";
+import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
+import { ColorPanel, LinkPanel, ToolPanel } from "./RichTextParts.js";
+/** The default toolbar. `token` shows only when the editor has `tokens`. */
+export const RICH_TEXT_TOOLBAR = [
+    "undo",
+    "redo",
+    "|",
+    "block",
+    "|",
+    "bold",
+    "italic",
+    "underline",
+    "strikethrough",
+    "color",
+    "|",
+    "link",
+    "bulletList",
+    "numberedList",
+    "align",
+    "|",
+    "table",
+    "rule",
+    "clear",
+    "|",
+    "token",
+];
+const MODES = {
+    edit: { label: "Edit", icon: iconPencil },
+    html: { label: "HTML", icon: iconSourceCode },
+};
+const BLOCKS = {
+    p: { label: "Paragraph", icon: iconPilcrow, keys: "Ctrl+Alt+0" },
+    h1: { label: "Heading 1", icon: iconH1, keys: "Ctrl+Alt+1" },
+    h2: { label: "Heading 2", icon: iconH2, keys: "Ctrl+Alt+2" },
+    h3: { label: "Heading 3", icon: iconH3, keys: "Ctrl+Alt+3" },
+    blockquote: { label: "Quote", icon: iconBlockquote, keys: "Ctrl+Shift+." },
+    pre: { label: "Code block", icon: iconSourceCode },
+};
+const ALIGNS = {
+    left: { label: "Align left", icon: iconAlignLeft, command: "justifyLeft", keys: "Ctrl+Shift+L" },
+    center: { label: "Center", icon: iconAlignCenter, command: "justifyCenter", keys: "Ctrl+Shift+E" },
+    right: { label: "Align right", icon: iconAlignRight, command: "justifyRight", keys: "Ctrl+Shift+R" },
+    justify: { label: "Justify", icon: iconAlignJustified, command: "justifyFull", keys: "Ctrl+Shift+J" },
+};
+/** Plain buttons. `state` is the command whose state shows as pressed. */
+const BUTTONS = {
+    undo: { label: "Undo", icon: iconArrowBackUp, keys: "Ctrl+Z" },
+    redo: { label: "Redo", icon: iconArrowForwardUp, keys: "Ctrl+Y" },
+    bold: { label: "Bold", icon: iconBold, keys: "Ctrl+B", state: "bold" },
+    italic: { label: "Italic", icon: iconItalic, keys: "Ctrl+I", state: "italic" },
+    underline: { label: "Underline", icon: iconUnderline, keys: "Ctrl+U", state: "underline" },
+    strikethrough: { label: "Strikethrough", icon: iconStrikethrough, keys: "Ctrl+Shift+X", state: "strikeThrough" },
+    code: { label: "Code", icon: iconCode, keys: "Ctrl+E", state: "code" },
+    subscript: { label: "Subscript", icon: iconSubscript, keys: "Ctrl+,", state: "subscript" },
+    superscript: { label: "Superscript", icon: iconSuperscript, keys: "Ctrl+.", state: "superscript" },
+    bulletList: { label: "Bulleted list", icon: iconList, keys: "Ctrl+Shift+8", state: "insertUnorderedList" },
+    numberedList: { label: "Numbered list", icon: iconListNumbers, keys: "Ctrl+Shift+7", state: "insertOrderedList" },
+    quote: { label: "Quote", icon: iconBlockquote, keys: "Ctrl+Shift+.", state: "quote" },
+    rule: { label: "Horizontal line", icon: iconSeparatorHorizontal },
+    clear: { label: "Clear formatting", icon: iconClearFormatting, keys: "Ctrl+\\" },
+};
+/** Commands of plain buttons. */
+const COMMANDS = {
+    undo: "undo",
+    redo: "redo",
+    bold: "bold",
+    italic: "italic",
+    underline: "underline",
+    strikethrough: "strikeThrough",
+    subscript: "subscript",
+    superscript: "superscript",
+    bulletList: "insertUnorderedList",
+    numberedList: "insertOrderedList",
+    rule: "insertHorizontalRule",
+    clear: "removeFormat",
+};
+/** Browser formatting a key can start without the toolbar (Ctrl+B, Ctrl+I, Ctrl+U), and the tool that allows it. */
+const NATIVE_FORMATS = {
+    formatBold: "bold",
+    formatItalic: "italic",
+    formatUnderline: "underline",
+    formatStrikeThrough: "strikethrough",
+    formatSubscript: "subscript",
+    formatSuperscript: "superscript",
+};
+const ALL_MODES = ["edit", "html"];
+const EMPTY_HTML = "<p><br></p>";
+/** Block tags in sanitized HTML. */
+const BLOCK_MARKUP = /<(?:p|h[1-6]|ul|ol|li|table|blockquote|pre|hr)[\s>]/;
+/** Around token chips, so the browser keeps them inside their paragraph. The value drops them. */
+const ZERO_WIDTH = String.fromCharCode(0x200b);
+/** Above this many characters of HTML, the value follows typing after a short pause instead of every frame. */
+const LARGE_HTML = 60_000;
+/**
+ * A rich text editor: formatted text edited in place, with a toolbar and shortcuts, text colors and highlights, links,
+ * lists, alignment, tables, template tokens as chips, an HTML view, a height handle, and full screen. The value is
+ * HTML, sanitized on every change (`sanitizeRichText`), so a page can store it and show it with `RichTextView`.
+ * Editing goes through the browser, so Ctrl+Z undoes typing and toolbar changes alike, and typing re-renders nothing.
+ * Pastes from Word, Google Docs, and web pages keep their formatting and lose everything else.
+ *
+ * @example <RichTextEditor name="description" label="Room description" heightKey="room-description" maxLength={5000} />
+ */
+export function RichTextEditor(props) {
+    const { id, name, form, label, hint, placeholder, defaultValue, value, onValueChange, defaultMode = "edit", mode: modeProp, onModeChange, modes = ALL_MODES, toolbar = RICH_TEXT_TOOLBAR, tokens, tokenFormat = "{{key}}", height = 280, minHeight = 120, maxHeight = 960, resizable = true, heightKey, fullscreen: canFullscreen = true, showCount = true, spellCheck = true, autoFocus, readOnly, disabled, readOnlyMessage = "Read-only: this text cannot be changed.", validateOn = "blur", required, minLength, maxLength, validate, onFocus, onBlur, className, style, ref, } = props;
+    const [initialHtml] = useState(() => sanitizeRichText(value ?? defaultValue ?? ""));
+    const [modeState, setModeState] = useState(() => (modes.includes(defaultMode) ? defaultMode : (modes[0] ?? "edit")));
+    const mode = modeProp ?? modeState;
+    const [caret, setCaret] = useState({ block: "p", align: "left", inTable: false });
+    const [colors, setColors] = useState({ color: null, background: null });
+    const [link, setLink] = useState({ href: null, askText: false });
+    const contentRef = useRef(null);
+    const sourceRef = useRef(null);
+    const toolsRef = useRef(null);
+    const countRef = useRef(null);
+    const linkPanelRef = useRef(null);
+    const savedRangeRef = useRef(null);
+    const dirtyRef = useRef(false);
+    const syncRef = useRef({ frame: 0, timer: 0 });
+    const toolbarFrameRef = useRef(0);
+    const editedRef = useRef(false);
+    const sourceDirtyRef = useRef(false);
+    const draggingRef = useRef(false);
+    // Focus went into the editor's own toolbar, menus, or panels: the selection comes back when it returns.
+    const restoreRef = useRef(false);
+    const caretRef = useRef(caret);
+    const editable = !readOnly && !disabled;
+    const labelId = `${useId()}-label`;
+    const rules = { required, minLength, maxLength, validate };
+    const field = useInputField({ ...props, validateOn, onChange: undefined, onBlur: undefined, onInvalid: undefined, ref: undefined }, {
+        check: (element, fieldName) => validateRichText(element.value, rules, fieldName),
+        checkKeys: [value, required, minLength, maxLength, validate],
+        onReset: element => {
+            editedRef.current = false;
+            showValue(element.value);
+        },
+    });
+    // Tools that render: a token menu needs tokens.
+    const items = tidyToolbar(toolbar.filter(item => item !== "token" || Boolean(tokens?.length)));
+    const tools = new Set(items.filter((item) => item !== "|"));
+    const firstTool = items.findIndex(item => item !== "|");
+    const shell = useEditorShell({
+        height,
+        minHeight,
+        maxHeight,
+        resizable,
+        storageKey: heightKey && `nx-rte-height:${heightKey}`,
+        fullscreen: canFullscreen,
+        disabled,
+        focusTarget: box => box.querySelector(mode === "html" ? ".nx-rte__source" : ".nx-rte__content"),
+    });
+    const readOnlyNotice = useReadOnlyNotice(Boolean(readOnly) && !disabled, contentRef, readOnlyMessage, {
+        keys: ["Enter"],
+        anchor: target => target.closest(".nx-editor__frame")?.querySelector(".nx-editor__bar") ?? null,
+        align: "end",
+    });
+    const editorHtml = (html) => (html ? richTextToEditorHtml(html, { tokenFormat, tokens }) : EMPTY_HTML);
+    const [initialEditorHtml] = useState(() => editorHtml(initialHtml));
+    // ---- Value ----
+    /** The value after a change: counts, the form's value, validation, and `onValueChange`. */
+    function commit(html) {
+        const hidden = field.elementRef.current;
+        if (!hidden)
+            return;
+        if (showCount)
+            writeEditorCount(countRef.current, richTextToPlainText(html), maxLength);
+        if (hidden.value === html)
+            return;
+        hidden.value = html;
+        field.change();
+        onValueChange?.(html);
+    }
+    /** Reads the editor into the value, if it changed since the last time. */
+    function flush() {
+        const sync = syncRef.current;
+        cancelAnimationFrame(sync.frame);
+        window.clearTimeout(sync.timer);
+        if (!dirtyRef.current || !contentRef.current)
+            return;
+        dirtyRef.current = false;
+        commit(sanitizeRichText(contentRef.current.innerHTML));
+    }
+    /** Typing, a paste, or a command changed the editor: the value follows once per frame, or after a pause in long texts. */
+    function contentChanged() {
+        dirtyRef.current = true;
+        editedRef.current = true;
+        markEmpty();
+        const sync = syncRef.current;
+        cancelAnimationFrame(sync.frame);
+        window.clearTimeout(sync.timer);
+        if ((field.elementRef.current?.value.length ?? 0) > LARGE_HTML)
+            sync.timer = window.setTimeout(flush, 300);
+        else
+            sync.frame = requestAnimationFrame(flush);
+    }
+    /** Shows a value that did not come from typing: a reset, a controlled value, or `setValue`. */
+    function showValue(html) {
+        const content = contentRef.current;
+        if (content) {
+            content.innerHTML = editorHtml(html);
+            markEmpty();
+        }
+        if (sourceRef.current)
+            sourceRef.current.value = formatRichTextHtml(html);
+        dirtyRef.current = false;
+        if (showCount)
+            writeEditorCount(countRef.current, richTextToPlainText(html), maxLength);
+    }
+    /** The placeholder shows while the editor holds nothing but an empty paragraph. */
+    function markEmpty() {
+        const content = contentRef.current;
+        if (!content)
+            return;
+        const first = content.firstElementChild;
+        const empty = !content.textContent &&
+            content.children.length <= 1 &&
+            (!first || first.tagName === "P" || first.tagName === "BR") &&
+            !content.querySelector("hr, table, img, ul, ol, [data-token]");
+        content.toggleAttribute("data-empty", empty);
+    }
+    // The last change is never lost: an editor removed within a frame of typing (a popup that closes) keeps it.
+    const flushOnUnmount = useEffectEvent(() => flush());
+    useLayoutEffect(() => () => {
+        flushOnUnmount();
+        cancelAnimationFrame(toolbarFrameRef.current);
+    }, []);
+    // The toolbar follows the caret while the text has focus. One listener for the editor's life, so none is left behind.
+    const onSelectionChange = useEffectEvent(() => {
+        if (document.activeElement === contentRef.current)
+            queueToolbar();
+    });
+    useEffect(() => {
+        const listener = () => onSelectionChange();
+        document.addEventListener("selectionchange", listener);
+        return () => document.removeEventListener("selectionchange", listener);
+    }, []);
+    // A controlled value set by the page.
+    useEffect(() => {
+        const hidden = field.elementRef.current;
+        if (value === undefined || !hidden)
+            return;
+        const html = sanitizeRichText(value);
+        if (html === hidden.value)
+            return;
+        hidden.value = html;
+        showValue(html);
+    }, [value]);
+    // Browser formatting keys (Ctrl+B on any layout, Cmd+B) work only for the tools the toolbar lists.
+    useEffect(() => {
+        const content = contentRef.current;
+        if (!content)
+            return;
+        const onBeforeInput = (event) => {
+            const tool = NATIVE_FORMATS[event.inputType];
+            if (tool && !tools.has(tool))
+                event.preventDefault();
+        };
+        content.addEventListener("beforeinput", onBeforeInput);
+        return () => content.removeEventListener("beforeinput", onBeforeInput);
+    });
+    // The label names the editor; a click on it focuses the text, as a click on an input's label does.
+    useEffect(() => {
+        const labelElement = document.getElementById(labelId);
+        if (!labelElement)
+            return;
+        const onClick = () => focusEditor();
+        labelElement.addEventListener("click", onClick);
+        return () => labelElement.removeEventListener("click", onClick);
+    });
+    useEffect(() => {
+        if (autoFocus)
+            focusEditor();
+    }, []);
+    // ---- Views ----
+    function changeMode(next) {
+        if (next === mode)
+            return;
+        if (modeProp === undefined)
+            setModeState(next);
+        onModeChange?.(next);
+    }
+    useLayoutEffect(() => {
+        const hidden = field.elementRef.current;
+        if (!hidden)
+            return;
+        if (mode === "html") {
+            flush();
+            if (sourceRef.current)
+                sourceRef.current.value = formatRichTextHtml(hidden.value);
+        }
+        else if (sourceDirtyRef.current) {
+            sourceDirtyRef.current = false;
+            showValue(hidden.value);
+        }
+    }, [mode]);
+    function sourceChanged() {
+        const source = sourceRef.current;
+        if (!source)
+            return;
+        sourceDirtyRef.current = true;
+        editedRef.current = true;
+        commit(sanitizeRichText(source.value));
+    }
+    // ---- Selection ----
+    function focusEditor() {
+        if (disabled)
+            return;
+        if (mode === "html")
+            sourceRef.current?.focus();
+        else
+            contentRef.current?.focus();
+    }
+    /**
+     * Focuses the editor with the selection it had when focus went into its toolbar (a menu, a panel), or at the end of
+     * the text when it has none. While the user works in the text, its selection is the live one and stays.
+     */
+    function restoreSelection() {
+        const content = contentRef.current;
+        if (!content)
+            return;
+        if (document.activeElement !== content)
+            content.focus({ preventScroll: true });
+        if (restoreRef.current)
+            applySavedSelection();
+        if (!selectionRange(content)) {
+            const range = document.createRange();
+            range.selectNodeContents(content.lastElementChild ?? content);
+            range.collapse(false);
+            setSelection(range);
+        }
+    }
+    /** Puts back the selection saved when focus went into the toolbar. */
+    function applySavedSelection() {
+        restoreRef.current = false;
+        const content = contentRef.current;
+        const saved = savedRangeRef.current;
+        if (content && saved && content.contains(saved.commonAncestorContainer))
+            setSelection(saved);
+    }
+    function queueToolbar() {
+        cancelAnimationFrame(toolbarFrameRef.current);
+        toolbarFrameRef.current = requestAnimationFrame(updateToolbar);
+    }
+    /** The toolbar follows the caret: pressed buttons, the block type, the alignment, and whether it is in a table. */
+    function updateToolbar() {
+        const content = contentRef.current;
+        const range = content && selectionRange(content);
+        if (!content || !range)
+            return;
+        savedRangeRef.current = range.cloneRange();
+        for (const button of toolsRef.current?.querySelectorAll("[data-state]") ?? []) {
+            button.setAttribute("aria-pressed", String(commandState(content, button.dataset.state)));
+        }
+        const next = readCaret(content, range);
+        const current = caretRef.current;
+        if (next.block !== current.block || next.align !== current.align || next.inTable !== current.inTable) {
+            caretRef.current = next;
+            setCaret(next);
+        }
+    }
+    // ---- Editing ----
+    /** Runs a browser editing command on the selection, so Ctrl+Z undoes it. */
+    function exec(command, argument) {
+        if (!editable || !contentRef.current)
+            return false;
+        restoreSelection();
+        document.execCommand("defaultParagraphSeparator", false, "p");
+        const done = document.execCommand(command, false, argument);
+        queueToolbar();
+        return done;
+    }
+    function insertHtml(html) {
+        exec("insertHTML", html);
+    }
+    function runTool(tool) {
+        if (!editable)
+            return;
+        if (tool === "quote")
+            toggleQuote();
+        else if (tool === "code")
+            toggleCode();
+        else if (tool === "link")
+            linkPanelRef.current?.open();
+        else if (tool === "rule") {
+            restoreSelection();
+            moveAfterTextBlock();
+            exec("insertHorizontalRule");
+        }
+        else if (COMMANDS[tool])
+            exec(COMMANDS[tool]);
+    }
+    function setBlock(type) {
+        const content = contentRef.current;
+        if (!content)
+            return;
+        restoreSelection();
+        const current = readCaret(content, selectionRange(content)).block;
+        if (type === "blockquote" || (type === "p" && current === "blockquote")) {
+            toggleQuote();
+            return;
+        }
+        // Choosing the block it is in already turns it back into a paragraph.
+        const target = type !== "p" && current === type ? "p" : type;
+        exec("formatBlock", `<${target}>`);
+    }
+    /**
+     * Quotes the selected paragraphs, or takes them out of their quote. The browser's indent command wraps paragraphs
+     * in a quote and keeps each one a paragraph; in a list it would nest the list, so a list item is quoted as a block.
+     */
+    function toggleQuote() {
+        const content = contentRef.current;
+        if (!content)
+            return;
+        restoreSelection();
+        if (closestInSelection(content, "blockquote"))
+            exec("outdent");
+        else if (closestInSelection(content, "li"))
+            exec("formatBlock", "<blockquote>");
+        else
+            exec("indent");
+    }
+    /** A table or a line goes after the heading or the code block the caret is in, not inside it. */
+    function moveAfterTextBlock() {
+        const content = contentRef.current;
+        const block = content && closestInSelection(content, "pre, h1, h2, h3, h4, h5, h6");
+        if (!block)
+            return;
+        const range = document.createRange();
+        range.setStartAfter(block);
+        setSelection(range);
+    }
+    /**
+     * Enter on an empty last line of a quote or a code block leaves it, as Enter on an empty list item leaves a list.
+     * Returns whether it did.
+     */
+    function leaveBlock(content) {
+        const range = selectionRange(content);
+        if (!range?.collapsed)
+            return false;
+        // A quote of paragraphs: its empty last paragraph moves out.
+        const line = closestInSelection(content, "blockquote > p");
+        if (line) {
+            if (line !== line.parentElement.lastElementChild || !isBlank(line))
+                return false;
+            exec("outdent");
+            return true;
+        }
+        // A code block, or a quote of lines: the empty last line goes, and a paragraph starts after the block.
+        const block = closestInSelection(content, "pre, blockquote");
+        if (!block || elementOf(range.startContainer)?.closest("p, li, td, th, h1, h2, h3, h4, h5, h6, pre, blockquote") !== block)
+            return false;
+        const empty = emptyLastLine(block, range);
+        if (!empty)
+            return false;
+        if (empty === "all") {
+            if (block.tagName === "PRE")
+                exec("formatBlock", "<p>");
+            else
+                exec("outdent");
+            return true;
+        }
+        setSelection(empty);
+        document.execCommand("delete");
+        const after = document.createRange();
+        after.setStartAfter(block);
+        setSelection(after);
+        document.execCommand("insertHTML", false, '<p data-nx-caret=""><br></p>');
+        placeCaretAtMark();
+        return true;
+    }
+    function setAlign(align) {
+        exec(ALIGNS[align].command);
+    }
+    function toggleCode() {
+        const content = contentRef.current;
+        if (!content)
+            return;
+        restoreSelection();
+        const code = closestInSelection(content, "code");
+        if (code && !code.closest("pre")) {
+            selectNode(code);
+            exec("insertText", code.textContent ?? "");
+        }
+        else {
+            const text = document.getSelection()?.toString() || "code";
+            insertHtml(`<code>${escapeHtml(text)}</code>`);
+        }
+    }
+    function applyColor(kind, color) {
+        restoreSelection();
+        document.execCommand("styleWithCSS", false, "true");
+        // "currentcolor" and "transparent" take the color off: the value leaves them out.
+        exec(kind === "color" ? "foreColor" : "hiliteColor", color ?? (kind === "color" ? "currentcolor" : "transparent"));
+        document.execCommand("styleWithCSS", false, "false");
+    }
+    function readColors() {
+        const content = contentRef.current;
+        if (!content)
+            return;
+        const range = selectionRange(content) ?? savedRangeRef.current;
+        const start = range && elementOf(range.startContainer);
+        setColors({ color: styleColor(content, start, "color"), background: styleColor(content, start, "backgroundColor") });
+    }
+    function readLink() {
+        const content = contentRef.current;
+        if (!content)
+            return;
+        const range = selectionRange(content) ?? savedRangeRef.current;
+        const anchor = closestInSelection(content, "a[href]", range);
+        setLink({ href: anchor?.getAttribute("href") ?? null, askText: !anchor && Boolean(range?.collapsed ?? true) });
+    }
+    function applyLink(url, text) {
+        const content = contentRef.current;
+        if (!content)
+            return;
+        restoreSelection();
+        const anchor = closestInSelection(content, "a[href]");
+        const href = escapeAttribute(url);
+        if (anchor) {
+            selectNode(anchor);
+            insertHtml(`<a href="${href}">${anchor.innerHTML}</a>`);
+        }
+        else if (document.getSelection()?.isCollapsed ?? true) {
+            insertHtml(`<a href="${href}">${escapeHtml(text || url.replace(/^(mailto|tel):/, ""))}</a>`);
+        }
+        else
+            exec("createLink", url);
+    }
+    function removeLink() {
+        const content = contentRef.current;
+        if (!content)
+            return;
+        restoreSelection();
+        const anchor = closestInSelection(content, "a[href]");
+        if (anchor)
+            selectNode(anchor);
+        exec("unlink");
+    }
+    function insertToken(key) {
+        const content = contentRef.current;
+        if (!content || !editable)
+            return;
+        const token = tokens?.find(item => item.key === key) ?? null;
+        restoreSelection();
+        // Chrome moves a non-editable chip inserted at the start or the end of a block out of the block; between two
+        // zero-width spaces it stays inside. The value leaves them out.
+        document.execCommand("insertText", false, ZERO_WIDTH + ZERO_WIDTH);
+        const range = selectionRange(content);
+        if (range?.startContainer.nodeType === Node.TEXT_NODE && range.startOffset > 0) {
+            const between = document.createRange();
+            between.setStart(range.startContainer, range.startOffset - 1);
+            setSelection(between);
+        }
+        insertHtml(richTextTokenChip(key, tokenFormat, token, !tokens || Boolean(token)).replace("<span ", '<span data-nx-caret="" '));
+        // The caret goes after the chip, past its zero-width space.
+        const chip = content.querySelector("[data-nx-caret]");
+        if (!chip)
+            return;
+        chip.removeAttribute("data-nx-caret");
+        const after = document.createRange();
+        const next = chip.nextSibling;
+        if (next?.nodeType === Node.TEXT_NODE && next.textContent?.startsWith(ZERO_WIDTH))
+            after.setStart(next, 1);
+        else
+            after.setStartAfter(chip);
+        setSelection(after);
+    }
+    /** Inserts pasted or dropped content: HTML sanitized, plain text as paragraphs, a URL over selected text as a link. */
+    function insertContent(html, text) {
+        const selection = document.getSelection();
+        const url = text.trim();
+        if (!html && selection && !selection.isCollapsed && /^https?:\/\/\S+$/i.test(url) && safeUrl(url) && tools.has("link")) {
+            exec("createLink", url);
+            return;
+        }
+        const content = contentRef.current;
+        if (!content)
+            return;
+        restoreSelection();
+        const lines = (html ? richTextToPlainText(sanitizeRichText(html)) : text).replace(/\r\n?/g, "\n");
+        // A code block takes text.
+        if (closestInSelection(content, "pre")) {
+            if (lines)
+                exec("insertText", lines);
+            return;
+        }
+        if (!html && !lines.includes("\n") && !hasToken(lines, tokenFormat)) {
+            if (lines)
+                exec("insertText", lines);
+            return;
+        }
+        const clean = richTextToEditorHtml(html || plainTextToHtml(lines), { tokenFormat, tokens });
+        if (!clean)
+            return;
+        // One paragraph goes into the line at the caret; blocks start after a heading, as the browser would put them inside it.
+        const single = /^<p>([\s\S]*)<\/p>$/.exec(clean);
+        if (single && !BLOCK_MARKUP.test(single[1]))
+            insertHtml(single[1]);
+        else {
+            moveAfterTextBlock();
+            insertHtml(clean);
+        }
+    }
+    // ---- Tables ----
+    function insertTable() {
+        const head = `<thead><tr>${'<th data-nx-caret=""><br></th>'}${"<th><br></th>".repeat(2)}</tr></thead>`;
+        const body = `<tbody>${`<tr>${"<td><br></td>".repeat(3)}</tr>`.repeat(2)}</tbody>`;
+        restoreSelection();
+        moveAfterTextBlock();
+        insertHtml(`<table>${head}${body}</table><p><br></p>`);
+        placeCaretAtMark();
+    }
+    /**
+     * Changes a table's rows or columns. The table is rebuilt and put back in one step, so Ctrl+Z undoes the change
+     * as one edit.
+     */
+    function editTable(action) {
+        const content = contentRef.current;
+        if (!content || !editable)
+            return;
+        if (action === "insert") {
+            insertTable();
+            return;
+        }
+        restoreSelection();
+        const cell = closestInSelection(content, "td, th");
+        const table = cell?.closest("table");
+        if (!cell || !table)
+            return;
+        const row = cell.parentElement;
+        const rowIndex = [...table.rows].indexOf(row);
+        const column = cell.cellIndex;
+        const copy = table.cloneNode(true);
+        const rows = [...copy.rows];
+        const blankCell = (like) => {
+            const next = document.createElement(like?.tagName === "TH" ? "th" : "td");
+            next.innerHTML = "<br>";
+            return next;
+        };
+        let target = null;
+        switch (action) {
+            case "rowAbove":
+            case "rowBelow": {
+                const source = rows[rowIndex];
+                const inserted = document.createElement("tr");
+                for (const item of source.cells)
+                    inserted.append(blankCell(source.parentElement?.tagName === "THEAD" && action === "rowBelow" ? undefined : item));
+                // A row below the header row starts the body.
+                if (action === "rowBelow" && source.parentElement?.tagName === "THEAD") {
+                    const body = copy.tBodies[0] ?? copy.appendChild(document.createElement("tbody"));
+                    body.prepend(inserted);
+                }
+                else
+                    source.parentElement.insertBefore(inserted, action === "rowAbove" ? source : source.nextSibling);
+                target = inserted.cells[Math.min(column, inserted.cells.length - 1)] ?? null;
+                break;
+            }
+            case "columnLeft":
+            case "columnRight":
+                for (const item of rows) {
+                    const reference = item.cells[column] ?? null;
+                    const added = blankCell(item.cells[0]);
+                    if (action === "columnLeft")
+                        item.insertBefore(added, reference);
+                    else
+                        item.insertBefore(added, reference?.nextSibling ?? null);
+                    if (item === rows[rowIndex])
+                        target = added;
+                }
+                break;
+            case "deleteRow":
+                rows[rowIndex].remove();
+                target = copy.rows[Math.min(rowIndex, copy.rows.length - 1)]?.cells[column] ?? null;
+                break;
+            case "deleteColumn":
+                for (const item of rows) {
+                    item.cells[column]?.remove();
+                    if (!item.cells.length)
+                        item.remove();
+                }
+                target = copy.rows[rowIndex]?.cells[Math.max(0, column - 1)] ?? null;
+                break;
+            case "deleteTable":
+                break;
+        }
+        for (const section of [...copy.querySelectorAll("thead, tbody, tfoot")])
+            if (!section.querySelector("tr"))
+                section.remove();
+        selectNode(table);
+        if (action === "deleteTable" || !copy.rows.length) {
+            insertHtml(EMPTY_HTML);
+            return;
+        }
+        target?.setAttribute("data-nx-caret", "");
+        insertHtml(copy.outerHTML);
+        placeCaretAtMark();
+    }
+    /** Moves the caret into the cell marked while a table was built, and removes the mark. */
+    function placeCaretAtMark() {
+        const mark = contentRef.current?.querySelector("[data-nx-caret]");
+        if (!mark)
+            return;
+        mark.removeAttribute("data-nx-caret");
+        placeCaret(mark);
+        queueToolbar();
+    }
+    /** Tab moves to the next cell, Shift+Tab to the one before; Tab in the last cell adds a row. */
+    function moveCell(cell, back) {
+        const table = cell.closest("table");
+        const cells = [...table.querySelectorAll("th, td")].filter(item => item.closest("table") === table);
+        const index = cells.indexOf(cell);
+        const next = cells[index + (back ? -1 : 1)];
+        if (next) {
+            // The next cell's text is selected, so typing replaces it.
+            placeCaret(next, true);
+            queueToolbar();
+        }
+        else if (!back) {
+            editTable("rowBelow");
+            const selection = document.getSelection();
+            const row = selection?.rangeCount ? elementOf(selection.getRangeAt(0).startContainer)?.closest("tr") : null;
+            if (row?.cells[0])
+                placeCaret(row.cells[0]);
+        }
+    }
+    // ---- Events ----
+    function handleKeyDown(event) {
+        readOnlyNotice.onKeyDown(event);
+        if (event.defaultPrevented || !editable || event.nativeEvent.isComposing)
+            return;
+        const content = event.currentTarget;
+        const plain = !event.ctrlKey && !event.metaKey && !event.altKey;
+        if (event.key === "Enter" && plain && !event.shiftKey && leaveBlock(content)) {
+            event.preventDefault();
+            return;
+        }
+        if (event.key === "Tab" && plain) {
+            const cell = closestInSelection(content, "td, th");
+            if (cell) {
+                event.preventDefault();
+                moveCell(cell, event.shiftKey);
+                return;
+            }
+            if (closestInSelection(content, "li") && (tools.has("bulletList") || tools.has("numberedList"))) {
+                event.preventDefault();
+                exec(event.shiftKey ? "outdent" : "indent");
+            }
+            return;
+        }
+        const action = shortcut(event);
+        if (!action)
+            return;
+        if (action.type === "tool") {
+            if (!tools.has(action.tool)) {
+                // Browser formatting that the toolbar does not offer stays off.
+                if (action.tool in NATIVE_FORMATS_BY_TOOL)
+                    event.preventDefault();
+                return;
+            }
+            event.preventDefault();
+            runTool(action.tool);
+        }
+        else if (action.type === "block" && tools.has("block")) {
+            event.preventDefault();
+            setBlock(action.block);
+        }
+        else if (action.type === "align" && tools.has("align")) {
+            event.preventDefault();
+            setAlign(action.align);
+        }
+    }
+    function handlePaste(event) {
+        event.preventDefault();
+        if (!editable)
+            return;
+        insertContent(event.clipboardData.getData("text/html"), event.clipboardData.getData("text/plain"));
+    }
+    function handleDrop(event) {
+        // A move inside the editor stays the browser's own.
+        if (draggingRef.current && editable)
+            return;
+        event.preventDefault();
+        if (!editable)
+            return;
+        const html = event.dataTransfer.getData("text/html");
+        const text = event.dataTransfer.getData("text/plain");
+        if (!html && !text)
+            return;
+        const range = caretRangeAt(event.clientX, event.clientY);
+        if (range && event.currentTarget.contains(range.startContainer)) {
+            event.currentTarget.focus({ preventScroll: true });
+            const selection = document.getSelection();
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+            savedRangeRef.current = range;
+        }
+        insertContent(html, text);
+    }
+    function handleFocus(event) {
+        // Back from a menu or a panel (Esc, or a choice): the selection it acted on comes back.
+        if (restoreRef.current)
+            applySavedSelection();
+        if (editable)
+            document.execCommand("defaultParagraphSeparator", false, "p");
+        queueToolbar();
+        onFocus?.(event);
+    }
+    function handleBlur(event) {
+        // The selection a menu or a panel acts on: the one at this moment, not the last one the toolbar saw.
+        const range = selectionRange(event.currentTarget);
+        if (range)
+            savedRangeRef.current = range.cloneRange();
+        flush();
+        readOnlyNotice.hide();
+        // Focus that moves into the editor's own toolbar or panels has not left the field.
+        const next = event.relatedTarget;
+        const inFrame = Boolean(next && event.currentTarget.closest(".nx-editor__frame")?.contains(next));
+        restoreRef.current = inFrame;
+        if (!inFrame && validateOn !== "submit" && (editedRef.current || field.elementRef.current?.value))
+            field.touch();
+        onBlur?.(event);
+    }
+    /** A press in the text places the caret there, whatever selection a menu left to come back to. */
+    function handleMouseDown() {
+        restoreRef.current = false;
+    }
+    function handleClick(event) {
+        if (document.getSelection()?.isCollapsed ?? true)
+            readOnlyNotice.onClick(event);
+    }
+    function handleInvalid(event) {
+        field.controlProps.onInvalid(event);
+        if (isFirstInvalid(event.currentTarget))
+            focusEditor();
+    }
+    useImperativeHandle(ref, () => ({
+        getValue: () => {
+            flush();
+            return field.elementRef.current?.value ?? "";
+        },
+        setValue: html => {
+            const hidden = field.elementRef.current;
+            if (!hidden)
+                return;
+            const clean = sanitizeRichText(html);
+            hidden.defaultValue = clean;
+            hidden.value = clean;
+            showValue(clean);
+            field.change();
+        },
+        insertText: text => exec("insertText", text),
+        insertHtml: html => insertHtml(richTextToEditorHtml(html, { tokenFormat, tokens })),
+        insertToken,
+        focus: focusEditor,
+        get element() {
+            return contentRef.current;
+        },
+    }));
+    // ---- Toolbar ----
+    const blockItems = Object.keys(BLOCKS).map(type => ({
+        value: type,
+        label: BLOCKS[type].label,
+        icon: _jsx(InlineIcon, { icon: BLOCKS[type].icon }),
+        shortcut: BLOCKS[type].keys,
+        checked: caret.block === type,
+    }));
+    const alignItems = Object.keys(ALIGNS).map(align => ({
+        value: align,
+        label: ALIGNS[align].label,
+        icon: _jsx(InlineIcon, { icon: ALIGNS[align].icon }),
+        shortcut: ALIGNS[align].keys,
+        checked: caret.align === align,
+    }));
+    const tableItems = [
+        { value: "insert", label: "Insert table", icon: _jsx(InlineIcon, { icon: iconTable }), disabled: caret.inTable },
+        { separator: true },
+        { value: "rowAbove", label: "Row above", icon: _jsx(InlineIcon, { icon: iconRowInsertTop }), disabled: !caret.inTable },
+        { value: "rowBelow", label: "Row below", icon: _jsx(InlineIcon, { icon: iconRowInsertBottom }), disabled: !caret.inTable },
+        { value: "columnLeft", label: "Column left", icon: _jsx(InlineIcon, { icon: iconColumnInsertLeft }), disabled: !caret.inTable },
+        { value: "columnRight", label: "Column right", icon: _jsx(InlineIcon, { icon: iconColumnInsertRight }), disabled: !caret.inTable },
+        { separator: true },
+        { value: "deleteRow", label: "Delete row", icon: _jsx(InlineIcon, { icon: iconRowRemove }), disabled: !caret.inTable },
+        { value: "deleteColumn", label: "Delete column", icon: _jsx(InlineIcon, { icon: iconColumnRemove }), disabled: !caret.inTable },
+        { value: "deleteTable", label: "Delete table", icon: _jsx(InlineIcon, { icon: iconTrash }), tone: "danger", disabled: !caret.inTable },
+    ];
+    const tokenItems = [];
+    let group;
+    for (const token of tokens ?? []) {
+        if (token.group && token.group !== group)
+            tokenItems.push({ heading: token.group });
+        group = token.group;
+        tokenItems.push({ value: token.key, label: token.label ?? token.key, description: token.description ?? tokenText(token.key, tokenFormat) });
+    }
+    /** Props of a toolbar button that opens a menu: it keeps the editor's focus and selection on press. */
+    const menuButton = (index, label, keys) => ({
+        type: "button",
+        className: "nx-editor__tool",
+        tabIndex: index === firstTool ? 0 : -1,
+        "aria-label": label,
+        title: keys ? `${label} (${keys})` : label,
+        onMouseDown: (event) => event.preventDefault(),
+    });
+    function renderTool(item, index) {
+        const tabIndex = index === firstTool ? 0 : -1;
+        switch (item) {
+            case "block": {
+                const current = BLOCKS[caret.block]?.label ?? "Heading";
+                return (_jsx(Menu, { items: blockItems, kind: "radio", "aria-label": "Text style", onSelect: setBlock, children: _jsxs("button", { ...menuButton(index, `Text style: ${current}`), className: "nx-editor__tool nx-rte__block", title: "Text style", children: [_jsx("span", { className: "nx-rte__block-label", children: current }), _jsx(InlineIcon, { icon: iconChevronDown })] }) }, index));
+            }
+            case "align":
+                return (_jsx(Menu, { items: alignItems, kind: "radio", "aria-label": "Alignment", onSelect: setAlign, children: _jsx("button", { ...menuButton(index, "Alignment"), children: _jsx(InlineIcon, { icon: ALIGNS[caret.align].icon }) }) }, index));
+            case "table":
+                return (_jsx(Menu, { items: tableItems, "aria-label": "Table", onSelect: editTable, children: _jsx("button", { ...menuButton(index, "Table"), "aria-pressed": caret.inTable, children: _jsx(InlineIcon, { icon: iconTable }) }) }, index));
+            case "token":
+                return (_jsx(Menu, { items: tokenItems, "aria-label": "Insert a field", onSelect: insertToken, children: _jsxs("button", { ...menuButton(index, "Insert a field"), className: "nx-editor__tool nx-rte__insert", children: [_jsx(InlineIcon, { icon: iconBraces }), _jsx("span", { className: "nx-rte__insert-label", children: "Field" })] }) }, index));
+            case "color":
+                return (_jsx(ToolPanel, { label: "Text color and highlight", icon: _jsx(InlineIcon, { icon: iconTextColor }), tabIndex: tabIndex, onOpen: readColors, children: close => (_jsx(ColorPanel, { color: colors.color, background: colors.background, onPick: (kind, color) => {
+                            close();
+                            applyColor(kind, color);
+                        } })) }, index));
+            case "link":
+                return (_jsx(ToolPanel, { ref: linkPanelRef, label: "Link", shortcut: "Ctrl+K", icon: _jsx(InlineIcon, { icon: iconLink }), tabIndex: tabIndex, onOpen: readLink, "data-state": "link", children: close => (_jsx(LinkPanel, { href: link.href, askText: link.askText, onApply: (url, text) => {
+                            close();
+                            applyLink(url, text);
+                        }, onRemove: () => {
+                            close();
+                            removeLink();
+                        }, onCancel: () => {
+                            close();
+                            restoreSelection();
+                        } })) }, index));
+            default: {
+                const button = BUTTONS[item];
+                if (!button)
+                    return null;
+                return (_jsx("button", { type: "button", className: "nx-editor__tool", tabIndex: tabIndex, "aria-label": button.label, "aria-keyshortcuts": button.keys?.replace("Ctrl", "Control"), "aria-pressed": button.state ? false : undefined, "data-state": button.state, title: button.keys ? `${button.label} (${button.keys})` : button.label, 
+                    // The editor keeps focus and its selection.
+                    onMouseDown: event => event.preventDefault(), onClick: () => runTool(item), children: _jsx(InlineIcon, { icon: button.icon }) }, index));
+            }
+        }
+    }
+    const describedBy = field.controlProps["aria-describedby"];
+    return (_jsxs(_Fragment, { children: [_jsxs(Field, { controlId: field.controlId, labelId: labelId, messageId: field.messageId, label: label, required: required, hint: hint, error: field.error, disabled: disabled, readOnly: readOnly, multiline: true, className: cx("nx-editor", "nx-rte", className), style: style, children: [_jsxs("div", { ref: shell.frameRef, className: "nx-editor__frame", "data-fullscreen": shell.fullscreen || undefined, onKeyDown: shell.onFrameKeyDown, children: [_jsxs("div", { className: "nx-editor__bar", children: [modes.length > 1 && (_jsx(TabButtons, { "aria-label": "View", size: "sm", labels: "selected", options: modes.map(option => ({ value: option, label: MODES[option].label, icon: _jsx(InlineIcon, { icon: MODES[option].icon }), disabled })), value: mode, onChange: changeMode, 
+                                        // An id that matches no form: the view is never sent with the form around the editor.
+                                        form: `${field.controlId}-view`, className: "nx-editor__modes" })), editable && mode === "edit" && firstTool >= 0 && (_jsx("div", { ref: toolsRef, role: "toolbar", "aria-label": "Formatting", "aria-controls": field.controlId, className: "nx-editor__tools", onKeyDown: shell.moveTool, children: items.map((item, index) => (item === "|" ? _jsx("span", { className: "nx-editor__divider", "aria-hidden": "true" }, index) : renderTool(item, index))) })), _jsxs("span", { className: "nx-editor__end", children: [readOnlyNotice.lock, shell.fullscreenButton] })] }), _jsxs("div", { ref: shell.bodyRef, className: "nx-editor__body", "data-mode": mode, style: shell.bodyStyle, children: [_jsx("div", { ref: contentRef, id: field.controlId, className: "nx-rte__content nx-richtext", role: "textbox", "aria-multiline": "true", "aria-labelledby": label !== undefined && label !== null && label !== "" ? labelId : undefined, "aria-label": label ? undefined : props["aria-label"], "aria-describedby": describedBy, "aria-invalid": field.controlProps["aria-invalid"], "aria-required": required || undefined, "aria-readonly": readOnly || undefined, "aria-disabled": disabled || undefined, "aria-placeholder": placeholder, "data-placeholder": placeholder, "data-empty": initialHtml ? undefined : "", contentEditable: editable, suppressContentEditableWarning: true, spellCheck: spellCheck, tabIndex: disabled ? -1 : 0, dangerouslySetInnerHTML: { __html: initialEditorHtml }, onInput: contentChanged, onKeyDown: handleKeyDown, onKeyUp: queueToolbar, onPaste: handlePaste, onDrop: handleDrop, onDragStart: () => {
+                                            draggingRef.current = true;
+                                        }, onDragEnd: () => {
+                                            draggingRef.current = false;
+                                        }, onFocus: handleFocus, onBlur: handleBlur, onMouseDown: handleMouseDown, onClick: handleClick }), mode === "html" && (_jsx("textarea", { ref: sourceRef, className: "nx-field__control nx-rte__source", "aria-label": "HTML source", "aria-describedby": describedBy, spellCheck: false, readOnly: !editable, disabled: disabled, onInput: sourceChanged, onKeyDown: readOnlyNotice.onKeyDown, onBlur: () => {
+                                            if (validateOn !== "submit" && editedRef.current)
+                                                field.touch();
+                                        } }))] }), shell.footer(_jsxs(_Fragment, { children: [_jsx(InlineIcon, { icon: iconTextSize }), _jsx("span", { children: "Rich text" })] }), showCount && _jsx(EditorCount, { ref: countRef, text: richTextToPlainText(initialHtml), maxLength: maxLength }))] }), _jsx("textarea", { ref: field.controlProps.ref, name: name, form: form, defaultValue: initialHtml, disabled: disabled, readOnly: readOnly, className: "nx-rte__value", tabIndex: -1, "aria-hidden": "true", onInvalid: handleInvalid })] }), readOnlyNotice.notice] }));
+}
+// ---------------------------------------------------------------------------------------------------------------
+// Helpers
+const NATIVE_FORMATS_BY_TOOL = Object.fromEntries(Object.values(NATIVE_FORMATS).map(tool => [tool, true]));
+/** The action of a shortcut, by key position for digits and punctuation so it works on any keyboard layout. */
+function shortcut(event) {
+    if (!(event.ctrlKey || event.metaKey) || event.getModifierState("AltGraph"))
+        return null;
+    const tool = (name) => ({ type: "tool", tool: name });
+    if (event.altKey) {
+        if (event.shiftKey)
+            return null;
+        const blocks = { Digit0: "p", Digit1: "h1", Digit2: "h2", Digit3: "h3" };
+        const block = blocks[event.code];
+        return block ? { type: "block", block } : null;
+    }
+    if (event.shiftKey) {
+        switch (event.code) {
+            case "KeyX":
+                return tool("strikethrough");
+            case "Digit7":
+                return tool("numberedList");
+            case "Digit8":
+                return tool("bulletList");
+            case "Period":
+                return tool("quote");
+            case "KeyL":
+                return { type: "align", align: "left" };
+            case "KeyE":
+                return { type: "align", align: "center" };
+            case "KeyR":
+                return { type: "align", align: "right" };
+            case "KeyJ":
+                return { type: "align", align: "justify" };
+            default:
+                return null;
+        }
+    }
+    switch (event.key.toLowerCase()) {
+        case "b":
+            return tool("bold");
+        case "i":
+            return tool("italic");
+        case "u":
+            return tool("underline");
+        case "k":
+            return tool("link");
+        case "e":
+            return tool("code");
+        case "\\":
+            return tool("clear");
+    }
+    if (event.code === "Comma")
+        return tool("subscript");
+    if (event.code === "Period")
+        return tool("superscript");
+    return null;
+}
+/** Drops dividers at the ends and next to each other. */
+function tidyToolbar(items) {
+    const out = [];
+    for (const item of items) {
+        if (item === "|" && (!out.length || out[out.length - 1] === "|"))
+            continue;
+        out.push(item);
+    }
+    while (out[out.length - 1] === "|")
+        out.pop();
+    return out;
+}
+function elementOf(node) {
+    if (!node)
+        return null;
+    return node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+}
+/** The selection's range, when it is inside `content`. */
+function selectionRange(content) {
+    const selection = document.getSelection();
+    if (!selection?.rangeCount)
+        return null;
+    const range = selection.getRangeAt(0);
+    return content.contains(range.commonAncestorContainer) ? range : null;
+}
+/** The nearest element matching `selector` around the start of the selection, inside `content`. */
+function closestInSelection(content, selector, range = selectionRange(content)) {
+    const found = elementOf(range?.startContainer)?.closest(selector);
+    return found && found !== content && content.contains(found) ? found : null;
+}
+/** Puts the caret at the start of an element, or selects its content. */
+function placeCaret(element, select = false) {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    if (!select)
+        range.collapse(true);
+    setSelection(range);
+}
+function selectNode(node) {
+    const range = document.createRange();
+    range.selectNode(node);
+    setSelection(range);
+}
+function setSelection(range) {
+    const selection = document.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+}
+/** A line with nothing a reader sees: no text, token, image, or table. */
+function isBlank(element) {
+    return !element.textContent?.replaceAll(ZERO_WIDTH, "").trim() && !element.querySelector("img, table, hr, [data-token]");
+}
+/**
+ * In a block whose lines are separated by line breaks (a code block, a quote without paragraphs), the range from the
+ * break before the caret to the block's end, when the caret is on an empty last line. "all" when the block has no
+ * text at all, `null` otherwise.
+ */
+function emptyLastLine(block, caret) {
+    const after = document.createRange();
+    after.setStart(caret.startContainer, caret.startOffset);
+    after.setEnd(block, block.childNodes.length);
+    const rest = after.cloneContents();
+    // Only the browser's placeholder break may follow the caret, maybe inside a format.
+    if (rest.textContent?.replaceAll(ZERO_WIDTH, "") || rest.querySelector("img, table, hr, [data-token]") || rest.querySelectorAll("br").length > 1)
+        return null;
+    if (!block.textContent?.replaceAll(ZERO_WIDTH, "").trim())
+        return "all";
+    const before = document.createRange();
+    before.setStart(block, 0);
+    before.setEnd(caret.startContainer, caret.startOffset);
+    let last = before.cloneContents().lastChild;
+    while (last?.lastChild)
+        last = last.lastChild;
+    if (last?.nodeName !== "BR")
+        return null;
+    const breaks = [...block.querySelectorAll("br")].filter(br => caret.comparePoint(br, 0) < 0);
+    const lastBreak = breaks[breaks.length - 1];
+    if (!lastBreak)
+        return null;
+    const line = document.createRange();
+    line.setStartBefore(lastBreak);
+    line.setEnd(block, block.childNodes.length);
+    return line;
+}
+function readCaret(content, range) {
+    const start = elementOf(range?.startContainer);
+    const inside = (element) => (element && element !== content && content.contains(element) ? element : null);
+    const heading = inside(start?.closest("h1, h2, h3, h4, h5, h6, pre"));
+    const block = heading ? heading.tagName.toLowerCase() : inside(start?.closest("blockquote")) ? "blockquote" : "p";
+    const aligned = inside(start?.closest("p, h1, h2, h3, h4, h5, h6, li, td, th, blockquote, pre"));
+    const textAlign = aligned ? getComputedStyle(aligned).textAlign : "left";
+    const align = textAlign === "center" || textAlign === "right" || textAlign === "justify" ? textAlign : "left";
+    return { block, align, inTable: Boolean(inside(start?.closest("td, th"))) };
+}
+/** Whether a toolbar button's command is on at the selection. */
+function commandState(content, state) {
+    if (state === "link")
+        return Boolean(closestInSelection(content, "a[href]"));
+    if (state === "code")
+        return Boolean(closestInSelection(content, "code"));
+    if (state === "quote")
+        return Boolean(closestInSelection(content, "blockquote"));
+    try {
+        return document.queryCommandState(state);
+    }
+    catch {
+        return false;
+    }
+}
+/** The color set on the nearest element around `start` that has one, as `#rrggbb`. */
+function styleColor(content, start, property) {
+    for (let element = start; element && element !== content; element = element.parentElement) {
+        const color = element.style?.[property];
+        if (color)
+            return parseColor(color);
+    }
+    return null;
+}
+function caretRangeAt(x, y) {
+    const doc = document;
+    if (doc.caretPositionFromPoint) {
+        const position = doc.caretPositionFromPoint(x, y);
+        if (!position)
+            return null;
+        const range = document.createRange();
+        range.setStart(position.offsetNode, position.offset);
+        return range;
+    }
+    return doc.caretRangeFromPoint?.(x, y) ?? null;
+}
+function hasToken(text, format) {
+    return format === "|key|" ? /\|[A-Za-z_][A-Za-z0-9_.]*\|/.test(text) : /\{\{\s*[A-Za-z_][A-Za-z0-9_.]*\s*\}\}/.test(text);
+}
+function tokenText(key, format) {
+    return format === "|key|" ? `|${key}|` : `{{${key}}}`;
+}
+/** Plain text as paragraphs: a blank line starts a paragraph, a single line break stays a line break. */
+function plainTextToHtml(text) {
+    return text
+        .split(/\n{2,}/)
+        .map(paragraph => `<p>${escapeHtml(paragraph).replace(/\n/g, "<br>")}</p>`)
+        .join("");
+}
+function escapeHtml(text) {
+    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttribute(text) {
+    return escapeHtml(text).replace(/"/g, "&quot;");
+}