nexus-shared 1.1.20 → 2.0.0

package/dist/Helpers/RichTextHelpers.js

@@ -0,0 +1,1072 @@
+import { safeUrl } from "./MarkdownHelpers.js";
+import { DEFAULT_FIELD_NAME, maxLengthMessage, minLengthMessage, requiredMessage } from "./ValidationHelpers.js";
+// ---------------------------------------------------------------------------------------------------------------
+// Public API
+/**
+ * The HTML a rich text editor stores: only the tags, attributes, and styles it makes, rebuilt from scratch, so script,
+ * event handlers, `javascript:` links, and foreign styles cannot pass. Pastes from Word and Google Docs keep their
+ * bold, italic, underline, colors, lists, and tables. Empty text gives "".
+ *
+ * @example sanitizeRichText('<p onclick="x()">Hi <b>there</b><script>alert(1)</script></p>') // '<p>Hi <strong>there</strong></p>'
+ */
+export function sanitizeRichText(html, options = {}) {
+    return html ? emit(cleanDocument(html, options), {}) : "";
+}
+/** The same HTML as `sanitizeRichText`, one block per line and indented, for a source view. */
+export function formatRichTextHtml(html, options = {}) {
+    return html ? emitPretty(cleanDocument(html, options), 0) : "";
+}
+/**
+ * The text a reader sees: one line per paragraph, heading, or list item, line breaks kept, table cells separated by
+ * tabs, and spaces collapsed. Tokens stay as written.
+ */
+export function richTextToPlainText(html) {
+    return html ? analyze(html).text : "";
+}
+/** Whether rich text has nothing a reader sees: no text and no image. A rule or an empty table counts as empty. */
+export function isRichTextEmpty(html) {
+    return html ? analyze(html).empty : true;
+}
+/**
+ * HTML for display (`RichTextView`): sanitized, with tokens filled from `values` and, with `newTab`, links to other
+ * sites opening in a new tab.
+ */
+export function renderRichTextHtml(html, options = {}) {
+    if (!html)
+        return "";
+    const { tokenFormat = "{{key}}", values, newTab } = options;
+    return emit(cleanDocument(html, options), {
+        text: values ? text => fillTokens(text, tokenFormat, values) : undefined,
+        attrs: newTab ? linkInNewTab : undefined,
+    });
+}
+/** HTML for the editor itself: sanitized, with each token shown as a chip that is edited as one piece. */
+export function richTextToEditorHtml(html, options = {}) {
+    if (!html)
+        return "";
+    const { tokenFormat, tokens } = options;
+    if (!tokenFormat)
+        return emit(cleanDocument(html, options), { rename: highlightAsSpan });
+    const known = tokens ? new Map(tokens.map(token => [token.key, token])) : null;
+    return emit(cleanDocument(html, options), { text: text => tokenChips(text, tokenFormat, known), rename: highlightAsSpan });
+}
+/** The HTML of one token chip, as the editor inserts it. */
+export function richTextTokenChip(key, format, token, known = true) {
+    const raw = formatRichTextToken(key, format);
+    const title = known ? (token?.description ? `${raw}: ${token.description}` : raw) : `Unknown field: ${raw}`;
+    return (`<span class="nx-rte__token" contenteditable="false" data-token="${escapeAttribute(raw)}"${known ? "" : ' data-unknown=""'}` +
+        ` title="${escapeAttribute(title)}">${escapeText(token?.label || key)}</span>`);
+}
+/** A token as the template engine reads it: `|Key|` or `{{Key}}`. */
+export function formatRichTextToken(key, format) {
+    return format === "|key|" ? `|${key}|` : `{{${key}}}`;
+}
+/** The keys of the tokens in the text, each once, in the order they first appear. */
+export function findRichTextTokens(html, format) {
+    const keys = new Set();
+    for (const match of richTextToPlainText(html).matchAll(tokenPattern(format)))
+        keys.add(match[1]);
+    return [...keys];
+}
+/** Fills the tokens in sanitized HTML with values, as text. Tokens without a value stay as they are. */
+export function fillRichTextTokens(html, values, format = "{{key}}") {
+    return renderRichTextHtml(html, { tokenFormat: format, values, images: true });
+}
+/** Checks rich text against its rules and returns the first message, or `null`. Lengths count the plain text. */
+export function validateRichText(html, rules, fieldName = DEFAULT_FIELD_NAME) {
+    const value = html ?? "";
+    const { text, empty } = value ? analyze(value) : { text: "", empty: true };
+    if (!empty) {
+        const { minLength, maxLength } = rules;
+        if (minLength && text.length < minLength)
+            return minLengthMessage(fieldName, minLength);
+        if (maxLength && text.length > maxLength)
+            return maxLengthMessage(fieldName, maxLength);
+    }
+    else if (rules.required) {
+        return requiredMessage(fieldName);
+    }
+    return rules.validate?.(value, text) || null;
+}
+// The last text read: an editor asks for the text, the count, and the rules of the same value right after each other.
+let lastAnalysis = null;
+function analyze(html) {
+    if (lastAnalysis?.html === html)
+        return lastAnalysis.result;
+    const nodes = cleanDocument(html, { images: true });
+    const writer = { text: "" };
+    writePlain(nodes, writer);
+    const text = writer.text
+        .split("\n")
+        .map(line => line.replace(/ {2,}/g, " ").trim())
+        .join("\n")
+        .trim();
+    const result = { text, empty: !text && !hasTag(nodes, "img") };
+    lastAnalysis = { html, result };
+    return result;
+}
+const VOID_TAGS = new Set(["area", "base", "basefont", "bgsound", "br", "col", "embed", "frame", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]);
+/** Elements whose content is not HTML: skipped whole, with their content. */
+const RAW_TEXT_TAGS = new Set(["script", "style", "textarea", "title", "xmp", "iframe", "noembed", "noframes", "noscript"]);
+const HEADINGS = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
+const CELLS = new Set(["td", "th"]);
+const SECTIONS = new Set(["thead", "tbody", "tfoot"]);
+const TABLE_PARTS = new Set(["table", "caption", "thead", "tbody", "tfoot", "tr", "td", "th"]);
+/** Start tags that close an open paragraph. */
+const CLOSES_P = new Set([
+    "address", "article", "aside", "blockquote", "center", "details", "dialog", "dir", "div", "dl", "dd", "dt", "fieldset",
+    "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hgroup", "hr", "li", "main",
+    "menu", "nav", "ol", "p", "pre", "section", "summary", "table", "ul",
+]);
+const BUTTON_SCOPE = new Set(["td", "th", "table", "caption", "button", "marquee", "object", "template"]);
+const LIST_SCOPE = new Set([...BUTTON_SCOPE, "ul", "ol"]);
+const ROW_SCOPE = new Set(["tr", "table", "template"]);
+const TABLE_SCOPE = new Set(["table", "template"]);
+const TAG_NAME = /[a-zA-Z][^\t\n\f\r />]*/y;
+const END_TAG = /<\/([a-zA-Z][^\t\n\f\r />]*)[^>]*>?/y;
+const ATTR_NAME = /[^\t\n\f\r />][^\t\n\f\r />=]*/y;
+const UNQUOTED = /[^\t\n\f\r >]*/y;
+const CLOSING_TAG = /<\/([a-zA-Z][a-zA-Z0-9]*)[\t\n\f\r />]/g;
+function isSpaceCode(code) {
+    return code === 32 || code === 9 || code === 10 || code === 12 || code === 13;
+}
+function skipSpaces(html, index) {
+    while (index < html.length && isSpaceCode(html.charCodeAt(index)))
+        index++;
+    return index;
+}
+function parseHtml(html) {
+    const root = { tag: "#root", attrs: new Map(), children: [] };
+    const stack = [root];
+    const length = html.length;
+    const current = () => stack[stack.length - 1];
+    function addText(text) {
+        if (!text)
+            return;
+        const children = current().children;
+        const decoded = decodeEntities(text);
+        const last = children.length - 1;
+        if (typeof children[last] === "string")
+            children[last] = children[last] + decoded;
+        else
+            children.push(decoded);
+    }
+    /** Closes the nearest open element named in `tags`, unless a boundary comes first. */
+    function closeInScope(tags, boundaries) {
+        for (let k = stack.length - 1; k > 0; k--) {
+            const tag = stack[k].tag;
+            if (typeof tags === "string" ? tag === tags : tags.has(tag)) {
+                stack.length = k;
+                return;
+            }
+            if (boundaries.has(tag))
+                return;
+        }
+    }
+    function openTag(tag, attrs) {
+        if (tag === "html" || tag === "body") {
+            // The body's content follows, so a head left open ends here.
+            if (tag === "body")
+                closeInScope("head", TABLE_SCOPE);
+            return;
+        }
+        if (tag === "li")
+            closeInScope("li", LIST_SCOPE);
+        else if (tag === "dd" || tag === "dt")
+            closeInScope(new Set(["dd", "dt"]), LIST_SCOPE);
+        else if (CELLS.has(tag))
+            closeInScope(CELLS, ROW_SCOPE);
+        else if (tag === "tr")
+            closeInScope("tr", TABLE_SCOPE);
+        else if (SECTIONS.has(tag)) {
+            closeInScope("tr", TABLE_SCOPE);
+            closeInScope(SECTIONS, TABLE_SCOPE);
+        }
+        else if (tag === "a")
+            closeInScope("a", BUTTON_SCOPE);
+        if (CLOSES_P.has(tag))
+            closeInScope("p", BUTTON_SCOPE);
+        if (HEADINGS.has(tag) && HEADINGS.has(current().tag))
+            stack.pop();
+        const element = { tag, attrs, children: [] };
+        current().children.push(element);
+        if (!VOID_TAGS.has(tag))
+            stack.push(element);
+    }
+    function closeTag(tag) {
+        // "</br>" is read as "<br>", as browsers do.
+        if (tag === "br") {
+            current().children.push({ tag: "br", attrs: new Map(), children: [] });
+            return;
+        }
+        const tablePart = TABLE_PARTS.has(tag);
+        for (let k = stack.length - 1; k > 0; k--) {
+            const open = stack[k].tag;
+            if (open === tag) {
+                stack.length = k;
+                return;
+            }
+            // An end tag does not reach out of a table cell or a table, except the table's own parts.
+            if (!tablePart && (open === "td" || open === "th" || open === "caption" || open === "table"))
+                return;
+            if (tablePart && open === "table")
+                return;
+        }
+    }
+    let index = 0;
+    while (index < length) {
+        const open = html.indexOf("<", index);
+        if (open < 0) {
+            addText(html.slice(index));
+            break;
+        }
+        addText(html.slice(index, open));
+        index = open;
+        const next = html.charCodeAt(open + 1);
+        if (html.startsWith("<!--", open)) {
+            const end = html.indexOf("-->", open + 4);
+            index = end < 0 ? length : end + 3;
+        }
+        else if (next === 33 || next === 63) {
+            // "<!DOCTYPE …>", "<![CDATA[…]]>", "<?xml …?>": comments here.
+            const end = html.indexOf(">", open + 2);
+            index = end < 0 ? length : end + 1;
+        }
+        else if (next === 47) {
+            END_TAG.lastIndex = open;
+            const match = END_TAG.exec(html);
+            if (match) {
+                closeTag(match[1].toLowerCase());
+                index = END_TAG.lastIndex;
+            }
+            else {
+                const end = html.indexOf(">", open + 2);
+                index = end < 0 ? length : end + 1;
+            }
+        }
+        else if ((next >= 65 && next <= 90) || (next >= 97 && next <= 122)) {
+            const tag = readTag(html, open + 1);
+            // The input ends inside a tag: the tag is dropped.
+            if (!tag)
+                break;
+            index = tag.end;
+            if (tag.name === "plaintext")
+                break;
+            if (RAW_TEXT_TAGS.has(tag.name))
+                index = skipRawText(html, tag.name, index);
+            else
+                openTag(tag.name, tag.attrs);
+        }
+        else {
+            addText("<");
+            index = open + 1;
+        }
+    }
+    return root;
+}
+function readTag(html, from) {
+    TAG_NAME.lastIndex = from;
+    const name = TAG_NAME.exec(html)[0].toLowerCase();
+    const attrs = new Map();
+    let index = TAG_NAME.lastIndex;
+    while (index < html.length) {
+        const code = html.charCodeAt(index);
+        if (code === 62)
+            return { name, attrs, end: index + 1 };
+        if (code === 47 || isSpaceCode(code)) {
+            index++;
+            continue;
+        }
+        ATTR_NAME.lastIndex = index;
+        const attrName = ATTR_NAME.exec(html)[0].toLowerCase();
+        index = ATTR_NAME.lastIndex;
+        let look = skipSpaces(html, index);
+        let value = "";
+        if (html.charCodeAt(look) === 61) {
+            look = skipSpaces(html, look + 1);
+            const quote = html[look];
+            if (quote === '"' || quote === "'") {
+                const close = html.indexOf(quote, look + 1);
+                if (close < 0)
+                    return null;
+                value = html.slice(look + 1, close);
+                index = close + 1;
+            }
+            else {
+                UNQUOTED.lastIndex = look;
+                value = UNQUOTED.exec(html)[0];
+                index = UNQUOTED.lastIndex;
+            }
+        }
+        if (!attrs.has(attrName))
+            attrs.set(attrName, decodeEntities(value));
+    }
+    return null;
+}
+/** Skips the content of a script, style, or similar element, up to and past its end tag. */
+function skipRawText(html, tag, from) {
+    CLOSING_TAG.lastIndex = from;
+    for (let match = CLOSING_TAG.exec(html); match; match = CLOSING_TAG.exec(html)) {
+        if (match[1].toLowerCase() === tag) {
+            const end = html.indexOf(">", match.index);
+            return end < 0 ? html.length : end + 1;
+        }
+    }
+    return html.length;
+}
+// ---------------------------------------------------------------------------------------------------------------
+// Entities
+const NAMED_ENTITIES = new Map();
+// Latin-1, U+00A0 to U+00FF, in order.
+const LATIN1 = "nbsp iexcl cent pound curren yen brvbar sect uml copy ordf laquo not shy reg macr deg plusmn sup2 sup3 acute micro para " +
+    "middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest Agrave Aacute Acirc Atilde Auml Aring AElig Ccedil Egrave Eacute " +
+    "Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute " +
+    "THORN szlig agrave aacute acirc atilde auml aring aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde " +
+    "ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml";
+LATIN1.split(" ").forEach((name, k) => NAMED_ENTITIES.set(name, String.fromCharCode(0xa0 + k)));
+const OTHER_ENTITIES = "amp:38 lt:60 gt:62 quot:34 apos:39 OElig:338 oelig:339 Scaron:352 scaron:353 Yuml:376 fnof:402 circ:710 tilde:732 " +
+    "ensp:8194 emsp:8195 thinsp:8201 zwnj:8204 zwj:8205 lrm:8206 rlm:8207 ndash:8211 mdash:8212 lsquo:8216 rsquo:8217 " +
+    "sbquo:8218 ldquo:8220 rdquo:8221 bdquo:8222 dagger:8224 Dagger:8225 bull:8226 hellip:8230 permil:8240 prime:8242 " +
+    "Prime:8243 lsaquo:8249 rsaquo:8250 euro:8364 trade:8482 larr:8592 uarr:8593 rarr:8594 darr:8595 harr:8596 minus:8722 " +
+    "infin:8734 ne:8800 le:8804 ge:8805";
+for (const pair of OTHER_ENTITIES.split(" ")) {
+    const [name, code] = pair.split(":");
+    NAMED_ENTITIES.set(name, String.fromCharCode(Number(code)));
+}
+/** Names browsers also read without the closing semicolon. */
+const LEGACY_ENTITIES = new Set(["amp", "lt", "gt", "quot", "nbsp", "copy", "reg"]);
+/** Numeric references from 0x80 to 0x9F mean Windows-1252 characters, as in browsers. */
+const WINDOWS_1252 = [
+    0x20ac, 0x81, 0x201a, 0x192, 0x201e, 0x2026, 0x2020, 0x2021, 0x2c6, 0x2030, 0x160, 0x2039, 0x152, 0x8d, 0x17d, 0x8f,
+    0x90, 0x2018, 0x2019, 0x201c, 0x201d, 0x2022, 0x2013, 0x2014, 0x2dc, 0x2122, 0x161, 0x203a, 0x153, 0x9d, 0x17e, 0x178,
+];
+const ENTITY = /&(?:#(\d{1,8})|#[xX]([0-9a-fA-F]{1,7})|([A-Za-z][A-Za-z0-9]{1,31}));?/g;
+const REPLACEMENT = String.fromCharCode(0xfffd);
+function decodeEntities(text) {
+    if (!text.includes("&"))
+        return text;
+    return text.replace(ENTITY, (whole, decimal, hex, name) => {
+        if (name !== undefined) {
+            const char = NAMED_ENTITIES.get(name);
+            return char !== undefined && (whole.endsWith(";") || LEGACY_ENTITIES.has(name)) ? char : whole;
+        }
+        const code = decimal !== undefined ? Number.parseInt(decimal, 10) : Number.parseInt(hex, 16);
+        if (code === 0 || code > 0x10ffff || (code >= 0xd800 && code <= 0xdfff))
+            return REPLACEMENT;
+        if (code >= 0x80 && code <= 0x9f)
+            return String.fromCharCode(WINDOWS_1252[code - 0x80]);
+        return String.fromCodePoint(code);
+    });
+}
+const BLOCK_TAGS = new Set(["p", "h1", "h2", "h3", "h4", "h5", "h6", "blockquote", "pre", "ul", "ol", "li", "table", "caption", "thead", "tbody", "tfoot", "tr", "td", "th", "hr"]);
+const VOID_OUTPUT = new Set(["br", "hr", "img"]);
+/** Elements dropped with their content: not text a reader sees, or not safe to keep. */
+const DROPPED_TAGS = new Set([
+    "head", "template", "svg", "math", "select", "option", "optgroup", "datalist", "object", "embed", "applet", "frameset",
+    "frame", "canvas", "audio", "video", "picture", "map", "area", "input", "meta", "link", "base", "col", "colgroup",
+    "source", "track", "param", "wbr", "rt", "rp", "keygen", "basefont", "bgsound", "noscript", "style", "script",
+]);
+/** Containers that become a paragraph when they hold only text, and disappear around blocks otherwise. */
+const DIV_LIKE = new Set([
+    "div", "center", "section", "article", "header", "footer", "main", "nav", "aside", "figure", "figcaption", "address",
+    "hgroup", "details", "summary", "dialog", "fieldset", "form", "legend", "dl",
+]);
+const FORMAT_TAGS = new Set(["b", "strong", "i", "em", "cite", "dfn", "var", "u", "ins", "s", "strike", "del", "sub", "sup", "span", "font", "mark"]);
+const CODE_TAGS = new Set(["code", "tt", "kbd", "samp"]);
+/** Inline elements the output keeps. */
+const INLINE_OUTPUT = new Set(["strong", "em", "u", "s", "sub", "sup", "code", "a", "span", "mark"]);
+const ALIGNMENTS = new Set(["left", "center", "right", "justify"]);
+const CONTROL_CHARACTERS = /[\x00-\x08\x0B\x0E-\x1F\x7F]/g;
+/** Zero-width spaces and byte order marks: pastes bring them, and the editor puts them around token chips. */
+const INVISIBLE_CHARACTERS = new RegExp(`[${String.fromCharCode(0x200b)}${String.fromCharCode(0xfeff)}]`, "g");
+const NBSP = String.fromCharCode(0xa0);
+const isBlock = (node) => typeof node !== "string" && BLOCK_TAGS.has(node.tag);
+const isBreak = (node) => typeof node !== "string" && node?.tag === "br";
+const element = (tag, attrs = [], children = []) => ({ tag, attrs, children });
+function cleanDocument(html, options) {
+    const context = { images: Boolean(options.images), inline: false, pre: false, link: false };
+    const blocks = wrapInlineRuns(trimFlow(cleanNodes(parseHtml(html).children, context)));
+    // Blank lines at the start and the end of the text are not kept.
+    while (blocks.length && isBlankBlock(blocks[0]))
+        blocks.shift();
+    while (blocks.length && isBlankBlock(blocks[blocks.length - 1]))
+        blocks.pop();
+    return blocks;
+}
+function cleanNodes(nodes, context) {
+    const out = [];
+    for (const node of nodes) {
+        if (typeof node === "string")
+            pushText(out, cleanText(node, context.pre), context.pre);
+        else
+            for (const item of cleanElement(node, context))
+                pushNode(out, item, context.pre);
+    }
+    // A block inside text keeps its content, on lines of its own.
+    return context.inline && out.some(isBlock) ? flatten(out, context.pre) : out;
+}
+function cleanText(text, pre) {
+    const clean = text.replace(CONTROL_CHARACTERS, "").replace(INVISIBLE_CHARACTERS, "");
+    return pre ? clean.replace(/\r\n?/g, "\n") : clean.replace(/[\t\n\f\r ]+/g, " ");
+}
+function pushNode(out, node, pre) {
+    if (typeof node === "string")
+        pushText(out, node, pre);
+    else
+        out.push(node);
+}
+function pushText(out, text, pre) {
+    if (!text)
+        return;
+    const last = out.length - 1;
+    if (typeof out[last] === "string") {
+        const joined = out[last] + text;
+        out[last] = pre ? joined : joined.replace(/ {2,}/g, " ");
+    }
+    else
+        out.push(text);
+}
+function cleanElement(raw, context) {
+    const { tag } = raw;
+    // Namespaced tags from Word ("o:p", "w:sdt") hold text.
+    if (tag.includes(":"))
+        return cleanNodes(raw.children, context);
+    if (DROPPED_TAGS.has(tag))
+        return [];
+    const style = parseStyle(raw.attrs.get("style"));
+    if (tag === "br")
+        return [element("br")];
+    if (tag === "hr")
+        return [element("hr")];
+    if (tag === "img")
+        return cleanImage(raw, context);
+    if (tag === "p" || HEADINGS.has(tag) || tag === "dt" || tag === "dd" || tag === "legend") {
+        const children = blockColor(trimFlow(cleanNodes(raw.children, { ...context, inline: true })), style);
+        return children.length ? [element(HEADINGS.has(tag) ? tag : "p", alignAttrs(raw, style), children)] : [];
+    }
+    if (DIV_LIKE.has(tag)) {
+        const children = blockColor(cleanNodes(raw.children, context), style);
+        if (context.inline || children.some(isBlock))
+            return children;
+        const trimmed = trimFlow(children);
+        const align = tag === "center" ? [["style", "text-align: center"]] : alignAttrs(raw, style);
+        return trimmed.length ? [element("p", align, trimmed)] : [];
+    }
+    if (tag === "blockquote") {
+        const children = trimFlow(cleanNodes(raw.children, { ...context, inline: false }));
+        return children.length ? [element("blockquote", [], children)] : [];
+    }
+    if (tag === "pre" || tag === "listing") {
+        const children = cleanNodes(raw.children, { ...context, inline: true, pre: true });
+        // A line break at the end of the last line does not show.
+        if (isBreak(children[children.length - 1]) && children.length > 1 && !isBreak(children[children.length - 2]))
+            children.pop();
+        return children.length ? [element("pre", [], children)] : [];
+    }
+    if (tag === "ul" || tag === "ol" || tag === "dir" || tag === "menu")
+        return cleanList(raw, context);
+    if (tag === "table")
+        return cleanTable(raw, context);
+    // Parts found outside their table or list read as what they hold.
+    if (tag === "li" || CELLS.has(tag) || tag === "caption") {
+        const children = trimFlow(cleanNodes(raw.children, { ...context, inline: true }));
+        return children.length ? [element("p", alignAttrs(raw, style), children)] : [];
+    }
+    if (tag === "tr" || SECTIONS.has(tag))
+        return cleanNodes(raw.children, context);
+    if (tag === "a")
+        return cleanLink(raw, context);
+    // A token chip from the editor is its token again.
+    const token = raw.attrs.get("data-token")?.trim();
+    if (tag === "span" && token && TOKEN_TEXT.test(token))
+        return [token];
+    if (FORMAT_TAGS.has(tag) || CODE_TAGS.has(tag))
+        return cleanFormat(raw, style, context);
+    // Anything else (abbr, label, small, custom elements) keeps its content.
+    return cleanNodes(raw.children, context);
+}
+function cleanImage(raw, context) {
+    const src = context.images ? safeUrl(raw.attrs.get("src") ?? "", "image") : null;
+    if (!src)
+        return [];
+    const attrs = [
+        ["src", src],
+        ["alt", (raw.attrs.get("alt") ?? "").trim()],
+    ];
+    for (const name of ["width", "height"]) {
+        const value = raw.attrs.get(name)?.trim();
+        if (value && /^\d{1,4}$/.test(value))
+            attrs.push([name, value]);
+    }
+    return [element("img", attrs)];
+}
+function cleanLink(raw, context) {
+    const href = raw.attrs.get("href");
+    const url = href === undefined || context.link ? null : safeUrl(href);
+    const inner = { ...context, link: context.link || Boolean(url) };
+    if (!url)
+        return cleanNodes(raw.children, inner);
+    const attrs = [["href", url]];
+    const title = raw.attrs.get("title")?.trim();
+    if (title)
+        attrs.push(["title", title]);
+    // A link around blocks (a card on a web page) links the text of each block.
+    if (hasBlockContent(raw))
+        return wrapInlineContent(cleanNodes(raw.children, inner), run => [element("a", attrs, run)]);
+    const children = cleanNodes(raw.children, { ...inner, inline: true });
+    return children.length ? [element("a", attrs, children)] : [];
+}
+function cleanFormat(raw, style, context) {
+    const format = formatFromStyle(style);
+    const { tag } = raw;
+    if (tag === "b" || tag === "strong")
+        format.bold = !isNormal(style.get("font-weight"));
+    else if (tag === "i" || tag === "em" || tag === "cite" || tag === "dfn" || tag === "var")
+        format.italic = !isNormal(style.get("font-style"));
+    else if (tag === "u" || tag === "ins")
+        format.underline = true;
+    else if (tag === "s" || tag === "strike" || tag === "del")
+        format.strike = true;
+    else if (tag === "sub" || tag === "sup")
+        format.script = tag;
+    else if (tag === "mark")
+        format.mark = true;
+    else if (tag === "font")
+        format.color ??= textColor(raw.attrs.get("color"));
+    else if (CODE_TAGS.has(tag))
+        format.code = true;
+    // Around blocks (Google Docs wraps a whole paste in `<b style="font-weight:normal">`): the format goes inside each block.
+    if (hasBlockContent(raw))
+        return wrapInlineContent(cleanNodes(raw.children, context), run => applyFormat(run, format));
+    return applyFormat(cleanNodes(raw.children, { ...context, inline: true }), format);
+}
+function applyFormat(children, format) {
+    if (!children.length)
+        return [];
+    let nodes = children;
+    if (format.code)
+        nodes = [element("code", [], nodes)];
+    if (format.script)
+        nodes = [element(format.script, [], nodes)];
+    if (format.strike)
+        nodes = [element("s", [], nodes)];
+    if (format.underline)
+        nodes = [element("u", [], nodes)];
+    if (format.italic)
+        nodes = [element("em", [], nodes)];
+    if (format.bold)
+        nodes = [element("strong", [], nodes)];
+    if (format.background || format.mark) {
+        const styles = [format.background && `background-color: ${format.background}`, format.color && `color: ${format.color}`].filter(Boolean);
+        nodes = [element("mark", styles.length ? [["style", styles.join("; ")]] : [], nodes)];
+    }
+    else if (format.color) {
+        nodes = [element("span", [["style", `color: ${format.color}`]], nodes)];
+    }
+    return nodes;
+}
+function formatFromStyle(style) {
+    const weight = style.get("font-weight") ?? "";
+    const decoration = `${style.get("text-decoration") ?? ""} ${style.get("text-decoration-line") ?? ""}`;
+    const align = style.get("vertical-align");
+    const background = parseColor(style.get("background-color") ?? style.get("background") ?? "");
+    return {
+        bold: weight === "bold" || weight === "bolder" || Number(weight) >= 600,
+        italic: /^(italic|oblique)/.test(style.get("font-style") ?? ""),
+        underline: decoration.includes("underline"),
+        strike: decoration.includes("line-through"),
+        script: align === "super" ? "sup" : align === "sub" ? "sub" : null,
+        code: false,
+        mark: false,
+        color: textColor(style.get("color")),
+        // White "highlights" come with text copied from web pages; they are page backgrounds, not highlights.
+        background: background === "#ffffff" ? null : background,
+    };
+}
+/** A text color worth keeping: black is the default color of pasted text, and would vanish in a dark theme. */
+function textColor(value) {
+    const color = value ? parseColor(value) : null;
+    return color === "#000000" ? null : color;
+}
+const isNormal = (value) => value === "normal" || value === "lighter" || (Number(value) > 0 && Number(value) < 600);
+/** Whether an element holds a block, directly or through inline elements. */
+function hasBlockContent(raw) {
+    return raw.children.some(child => typeof child !== "string" &&
+        !DROPPED_TAGS.has(child.tag) &&
+        (CLOSES_P.has(child.tag) || TABLE_PARTS.has(child.tag) || DIV_LIKE.has(child.tag) || hasBlockContent(child)));
+}
+/** Wraps each run of inline content, inside blocks too, e.g. to keep a format that was around several paragraphs. */
+function wrapInlineContent(nodes, wrap) {
+    const out = [];
+    let run = [];
+    const flush = () => {
+        if (run.some(node => typeof node !== "string" || node.trim()))
+            out.push(...wrap(run));
+        run = [];
+    };
+    for (const node of nodes) {
+        if (isBlock(node)) {
+            flush();
+            out.push(node.tag === "hr" ? node : element(node.tag, node.attrs, wrapInlineContent(node.children, wrap)));
+        }
+        else
+            run.push(node);
+    }
+    flush();
+    return out;
+}
+/** A text color set on a block (Word writes `<p style="color: …">`) goes on the block's text. */
+function blockColor(children, style) {
+    const color = textColor(style.get("color"));
+    return color ? wrapInlineContent(children, run => [element("span", [["style", `color: ${color}`]], run)]) : children;
+}
+function cleanList(raw, context) {
+    const inner = { ...context, inline: false };
+    const items = [];
+    let loose = [];
+    const flushLoose = () => {
+        const children = loose.length ? trimFlow(cleanNodes(loose, inner)) : [];
+        loose = [];
+        if (children.length)
+            items.push(element("li", [], children));
+    };
+    for (const child of raw.children) {
+        if (typeof child !== "string" && child.tag === "li") {
+            flushLoose();
+            items.push(element("li", alignAttrs(child, parseStyle(child.attrs.get("style"))), withoutPlaceholder(trimFlow(cleanNodes(child.children, inner)))));
+        }
+        else if (typeof child !== "string" && (child.tag === "ul" || child.tag === "ol")) {
+            // A list straight inside a list (as editors make it on Tab) belongs to the item before it.
+            const nested = cleanList(child, context);
+            const last = items[items.length - 1];
+            if (last && !loose.some(node => typeof node !== "string" || node.trim()))
+                last.children.push(...nested);
+            else {
+                flushLoose();
+                if (nested.length)
+                    items.push(element("li", [], nested));
+            }
+            loose = [];
+        }
+        else
+            loose.push(child);
+    }
+    flushLoose();
+    if (!items.length)
+        return [];
+    const attrs = [];
+    if (raw.tag === "ol") {
+        const start = raw.attrs.get("start")?.trim();
+        if (start && /^\d{1,9}$/.test(start) && Number(start) !== 1)
+            attrs.push(["start", String(Number(start))]);
+        const type = raw.attrs.get("type")?.trim();
+        if (type && /^[aAiI]$/.test(type))
+            attrs.push(["type", type]);
+    }
+    return [element(raw.tag === "ol" ? "ol" : "ul", attrs, items)];
+}
+function cleanTable(raw, context) {
+    // Content that sits in a table outside its cells shows before the table, as browsers show it.
+    const before = [];
+    const parts = [];
+    let caption = null;
+    let loose = [];
+    const flushLoose = () => {
+        const rows = loose.length ? collectRows(loose, context, before) : [];
+        loose = [];
+        if (rows.length)
+            parts.push(element("tbody", [], rows));
+    };
+    for (const child of raw.children) {
+        if (typeof child !== "string" && SECTIONS.has(child.tag)) {
+            flushLoose();
+            const rows = collectRows(child.children, context, before);
+            if (rows.length)
+                parts.push(element(child.tag, [], rows));
+        }
+        else if (typeof child !== "string" && child.tag === "caption") {
+            const children = trimFlow(cleanNodes(child.children, { ...context, inline: true }));
+            if (!caption && children.length)
+                caption = element("caption", [], children);
+        }
+        else
+            loose.push(child);
+    }
+    flushLoose();
+    if (!parts.length)
+        return before;
+    return [...before, element("table", [], caption ? [caption, ...parts] : parts)];
+}
+function collectRows(nodes, context, before) {
+    const rows = [];
+    let cells = [];
+    const flushCells = () => {
+        if (cells.length)
+            rows.push(element("tr", [], cells.map(cell => cleanCell(cell, context))));
+        cells = [];
+    };
+    for (const node of nodes) {
+        if (typeof node === "string") {
+            if (node.trim())
+                before.push(...wrapInlineRuns([cleanText(node, false)]));
+        }
+        else if (node.tag === "tr") {
+            flushCells();
+            const rowCells = [];
+            for (const child of node.children) {
+                if (typeof child !== "string" && CELLS.has(child.tag))
+                    rowCells.push(cleanCell(child, context));
+                else if (typeof child !== "string")
+                    before.push(...wrapInlineRuns(cleanElement(child, { ...context, inline: false })));
+                else if (child.trim())
+                    before.push(...wrapInlineRuns([cleanText(child, false)]));
+            }
+            if (rowCells.length)
+                rows.push(element("tr", [], rowCells));
+        }
+        else if (CELLS.has(node.tag))
+            cells.push(node);
+        else if (SECTIONS.has(node.tag)) {
+            flushCells();
+            rows.push(...collectRows(node.children, context, before));
+        }
+        else
+            before.push(...wrapInlineRuns(cleanElement(node, { ...context, inline: false })));
+    }
+    flushCells();
+    return rows;
+}
+function cleanCell(raw, context) {
+    const attrs = [];
+    for (const name of ["colspan", "rowspan"]) {
+        const value = raw.attrs.get(name)?.trim();
+        if (value && /^\d{1,4}$/.test(value) && Number(value) > 1)
+            attrs.push([name, String(Math.min(Number(value), 1000))]);
+    }
+    attrs.push(...alignAttrs(raw, parseStyle(raw.attrs.get("style"))));
+    return element(raw.tag, attrs, withoutPlaceholder(trimFlow(cleanNodes(raw.children, { ...context, inline: false }))));
+}
+/** An empty cell or list item holds a line break only so the browser can put the caret there; it shows nothing. */
+function withoutPlaceholder(children) {
+    return children.length === 1 && isBreak(children[0]) ? [] : children;
+}
+function alignAttrs(raw, style) {
+    const value = style.get("text-align") ?? raw.attrs.get("align")?.trim().toLowerCase();
+    return value && ALIGNMENTS.has(value) ? [["style", `text-align: ${value}`]] : [];
+}
+/** Inline content left at the top level, or among blocks, goes into paragraphs. */
+function wrapInlineRuns(nodes) {
+    const out = [];
+    let run = [];
+    const flush = () => {
+        const trimmed = trimRun(run);
+        if (trimmed.length)
+            out.push(element("p", [], trimmed));
+        run = [];
+    };
+    for (const node of nodes) {
+        if (isBlock(node)) {
+            flush();
+            out.push(node);
+        }
+        else
+            run.push(node);
+    }
+    flush();
+    return out;
+}
+/** Blocks inside inline content: their content stays, each block on lines of its own. */
+function flatten(nodes, pre) {
+    const out = [];
+    for (const node of nodes) {
+        if (!isBlock(node)) {
+            pushNode(out, node, pre);
+            continue;
+        }
+        const inner = node.tag === "hr" ? [] : flatten(node.children, pre);
+        if (!inner.length)
+            continue;
+        if (out.length && !isBreak(out[out.length - 1]))
+            out.push(element("br"));
+        for (const item of inner)
+            pushNode(out, item, pre);
+        out.push(element("br"));
+    }
+    while (isBreak(out[out.length - 1]))
+        out.pop();
+    return out;
+}
+/**
+ * Removes what does not show in a block's content: spaces at the start and the end of each run of text (at the
+ * edges of the block, and next to blocks inside it), and a single line break at the end of a run.
+ */
+function trimFlow(nodes) {
+    const out = [];
+    let run = [];
+    const flush = () => {
+        out.push(...trimRun(run));
+        run = [];
+    };
+    for (const node of nodes) {
+        if (isBlock(node)) {
+            flush();
+            out.push(node);
+        }
+        else
+            run.push(node);
+    }
+    flush();
+    return out;
+}
+function trimRun(run) {
+    const nodes = run.slice();
+    trimStart(nodes);
+    trimEnd(nodes);
+    // A line break at the end of a line of text does not show.
+    if (isBreak(nodes[nodes.length - 1]) && nodes.length > 1 && !isBreak(nodes[nodes.length - 2])) {
+        nodes.pop();
+        trimEnd(nodes);
+    }
+    return nodes;
+}
+function trimStart(nodes) {
+    while (nodes.length) {
+        const first = nodes[0];
+        if (typeof first === "string") {
+            const text = first.replace(/^ +/, "");
+            if (text) {
+                nodes[0] = text;
+                return;
+            }
+        }
+        else if (INLINE_OUTPUT.has(first.tag)) {
+            const children = first.children.slice();
+            trimStart(children);
+            if (children.length) {
+                nodes[0] = { ...first, children };
+                return;
+            }
+        }
+        else
+            return;
+        nodes.shift();
+    }
+}
+function trimEnd(nodes) {
+    while (nodes.length) {
+        const index = nodes.length - 1;
+        const last = nodes[index];
+        if (typeof last === "string") {
+            const text = last.replace(/ +$/, "");
+            if (text) {
+                nodes[index] = text;
+                return;
+            }
+        }
+        else if (INLINE_OUTPUT.has(last.tag)) {
+            const children = last.children.slice();
+            trimEnd(children);
+            if (children.length) {
+                nodes[index] = { ...last, children };
+                return;
+            }
+        }
+        else
+            return;
+        nodes.pop();
+    }
+}
+/** A paragraph or heading with nothing but line breaks: an empty line. */
+function isBlankBlock(node) {
+    return (node.tag === "p" || HEADINGS.has(node.tag)) && node.children.every(isBreak);
+}
+function hasTag(nodes, tag) {
+    return nodes.some(node => typeof node !== "string" && (node.tag === tag || hasTag(node.children, tag)));
+}
+// ---------------------------------------------------------------------------------------------------------------
+// Styles and colors
+function parseStyle(style) {
+    const map = new Map();
+    if (!style)
+        return map;
+    for (const part of style.split(";")) {
+        const colon = part.indexOf(":");
+        if (colon < 0)
+            continue;
+        const name = part.slice(0, colon).trim().toLowerCase();
+        const value = part
+            .slice(colon + 1)
+            .replace(/!\s*important/i, "")
+            .trim()
+            .toLowerCase();
+        // Escapes and functions other than colors are never needed, so a value with them is ignored.
+        if (name && value && !/[\\<>]|url\(|expression|var\(/.test(value))
+            map.set(name, value);
+    }
+    return map;
+}
+const NAMED_COLORS = {
+    black: "#000000", white: "#ffffff", red: "#ff0000", green: "#008000", blue: "#0000ff", yellow: "#ffff00",
+    orange: "#ffa500", purple: "#800080", gray: "#808080", grey: "#808080", silver: "#c0c0c0", maroon: "#800000",
+    navy: "#000080", teal: "#008080", olive: "#808000", lime: "#00ff00", aqua: "#00ffff", cyan: "#00ffff",
+    fuchsia: "#ff00ff", magenta: "#ff00ff", pink: "#ffc0cb", brown: "#a52a2a",
+};
+/** A CSS color as `#rrggbb`: hex, `rgb()`, `rgba()`, or a common name. Transparent and unknown colors give `null`. */
+export function parseColor(value) {
+    const text = value.trim().toLowerCase();
+    const named = NAMED_COLORS[text];
+    if (named)
+        return named;
+    const hex = /^#([0-9a-f]{3,8})$/.exec(text)?.[1];
+    if (hex) {
+        if (hex.length === 3 || hex.length === 4) {
+            if (hex[3] === "0")
+                return null;
+            return `#${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
+        }
+        if (hex.length === 6)
+            return `#${hex}`;
+        if (hex.length === 8)
+            return hex.endsWith("00") ? null : `#${hex.slice(0, 6)}`;
+        return null;
+    }
+    const rgb = /^rgba?\(([^)]*)\)$/.exec(text)?.[1];
+    if (rgb) {
+        const parts = rgb.split(/[\s,/]+/).filter(Boolean);
+        if (parts.length !== 3 && parts.length !== 4)
+            return null;
+        const channels = parts.slice(0, 3).map(part => (part.endsWith("%") ? (Number.parseFloat(part) / 100) * 255 : Number(part)));
+        if (channels.some(channel => !Number.isFinite(channel)))
+            return null;
+        if (parts[3] !== undefined) {
+            const alpha = parts[3].endsWith("%") ? Number.parseFloat(parts[3]) / 100 : Number(parts[3]);
+            if (!Number.isFinite(alpha) || alpha <= 0)
+                return null;
+        }
+        return `#${channels.map(channel => Math.round(Math.min(255, Math.max(0, channel))).toString(16).padStart(2, "0")).join("")}`;
+    }
+    return null;
+}
+function emit(nodes, options) {
+    let html = "";
+    for (const node of nodes) {
+        if (typeof node === "string") {
+            html += options.text ? options.text(node) : escapeText(node);
+            continue;
+        }
+        const [tag, attrs] = options.rename ? options.rename(node.tag, node.attrs) : [node.tag, node.attrs];
+        html += `<${tag}${attrText(options.attrs ? options.attrs(tag, attrs) : attrs)}>`;
+        if (!VOID_OUTPUT.has(tag))
+            html += `${emit(node.children, options)}</${tag}>`;
+    }
+    return html;
+}
+/** Containers whose parts go on lines of their own in the source view. */
+const PRETTY_CONTAINERS = new Set(["ul", "ol", "table", "thead", "tbody", "tfoot", "tr"]);
+function emitPretty(nodes, depth) {
+    const indent = "  ".repeat(depth);
+    const lines = [];
+    let run = [];
+    const flush = () => {
+        if (run.length)
+            lines.push(indent + emit(run, {}));
+        run = [];
+    };
+    for (const node of nodes) {
+        if (!isBlock(node)) {
+            run.push(node);
+            continue;
+        }
+        flush();
+        const open = `${indent}<${node.tag}${attrText(node.attrs)}>`;
+        if (node.tag === "hr")
+            lines.push(open);
+        else if (PRETTY_CONTAINERS.has(node.tag) || (node.tag !== "pre" && node.children.some(isBlock))) {
+            lines.push(open, emitPretty(node.children, depth + 1), `${indent}</${node.tag}>`);
+        }
+        else
+            lines.push(`${open}${emit(node.children, {})}</${node.tag}>`);
+    }
+    flush();
+    return lines.join("\n");
+}
+/** Plain text: a block starts a line, a line break adds one, and table cells are separated by tabs. */
+function writePlain(nodes, writer) {
+    const newLine = () => {
+        if (writer.text && !writer.text.endsWith("\n"))
+            writer.text += "\n";
+    };
+    for (const node of nodes) {
+        if (typeof node === "string") {
+            writer.text += node.replaceAll(NBSP, " ");
+            continue;
+        }
+        if (node.tag === "br")
+            writer.text += "\n";
+        else if (CELLS.has(node.tag)) {
+            if (writer.text && !writer.text.endsWith("\n"))
+                writer.text += "\t";
+            writePlain(node.children, writer);
+        }
+        else if (BLOCK_TAGS.has(node.tag)) {
+            newLine();
+            writePlain(node.children, writer);
+            newLine();
+        }
+        else
+            writePlain(node.children, writer);
+    }
+}
+function attrText(attrs) {
+    return attrs.map(([name, value]) => ` ${name}="${escapeAttribute(value)}"`).join("");
+}
+function escapeText(text) {
+    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replaceAll(NBSP, "&nbsp;");
+}
+function escapeAttribute(text) {
+    return text.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+/**
+ * The editor shows highlights as styled spans, as browsers make them, so the browser's own "clear formatting" and
+ * highlight commands work on them. The stored HTML has `mark` again.
+ */
+function highlightAsSpan(tag, attrs) {
+    if (tag !== "mark")
+        return [tag, attrs];
+    return ["span", attrs.length ? attrs : [["style", "background-color: #fef08a"]]];
+}
+function linkInNewTab(tag, attrs) {
+    if (tag !== "a" || !/^https?:\/\//i.test(attrs[0]?.[1] ?? ""))
+        return attrs;
+    return [...attrs, ["target", "_blank"], ["rel", "noopener noreferrer"]];
+}
+// ---------------------------------------------------------------------------------------------------------------
+// Tokens
+/** A whole token in either format, as a chip's `data-token` holds it. */
+const TOKEN_TEXT = /^(?:\|[A-Za-z_][A-Za-z0-9_.]*\||\{\{\s*[A-Za-z_][A-Za-z0-9_.]*\s*\}\})$/;
+function tokenPattern(format) {
+    return format === "|key|" ? /\|([A-Za-z_][A-Za-z0-9_.]*)\|/g : /\{\{\s*([A-Za-z_][A-Za-z0-9_.]*)\s*\}\}/g;
+}
+function tokenChips(text, format, known) {
+    let html = "";
+    let last = 0;
+    for (const match of text.matchAll(tokenPattern(format))) {
+        const key = match[1];
+        const token = known?.get(key) ?? null;
+        html += escapeText(text.slice(last, match.index)) + richTextTokenChip(key, format, token, !known || Boolean(token));
+        last = match.index + match[0].length;
+    }
+    return html + escapeText(text.slice(last));
+}
+function fillTokens(text, format, values) {
+    let html = "";
+    let last = 0;
+    for (const match of text.matchAll(tokenPattern(format))) {
+        const key = match[1];
+        if (!Object.hasOwn(values, key))
+            continue;
+        html += escapeText(text.slice(last, match.index)) + escapeText(String(values[key] ?? ""));
+        last = match.index + match[0].length;
+    }
+    return html + escapeText(text.slice(last));
+}