@teamofsilicons/silicon-ui 0.0.0-stage → 0.1.0

package/components/rich-text-editor/rich-text-editor.js

@@ -0,0 +1,1733 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion, useTransform } from "motion/react";
+import { ArrowLeft, Bold, Check, Code, Heading1, Heading2, Heading3, Italic, Link, List, ListOrdered, Minus, Pilcrow, Quote, SquareCode, Strikethrough, Unlink } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./rich-text-editor.module.css";
+const ZWSP = /\u200b/g;
+const escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+const safeUrl = (url) => /^(https?:|mailto:|tel:|\/|#)/i.test(url.trim());
+/** Adds a scheme to bare domains so `example.com/docs` becomes a working link. */
+export function normalizeUrl(input) {
+    const url = input.trim();
+    if (!url)
+        return "";
+    if (/^[a-z][a-z\d+.-]*:/i.test(url) || url.startsWith("/") || url.startsWith("#"))
+        return url;
+    if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(url))
+        return `mailto:${url}`;
+    return `https://${url}`;
+}
+function inlineMarkdown(text) {
+    const codes = [];
+    let out = escapeHtml(text).replace(/`([^`]+)`/g, (_, code) => `\u0000${codes.push(code) - 1}\u0000`);
+    out = out.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_, label, url) => safeUrl(url) ? `<a href="${url}">${label}</a>` : label);
+    out = out.replace(/(\*\*|__)(?=\S)([\s\S]*?\S)\1/g, "<strong>$2</strong>");
+    out = out.replace(/~~(?=\S)([\s\S]*?\S)~~/g, "<s>$1</s>");
+    out = out.replace(/(^|[^\w*])\*(?=\S)([^*]*?\S)\*(?!\*)/g, "$1<em>$2</em>");
+    out = out.replace(/(^|[^\w_])_(?=\S)([^_]*?\S)_(?![\w_])/g, "$1<em>$2</em>");
+    return out.replace(/\u0000(\d+)\u0000/g, (_, index) => `<code>${codes[Number(index)]}</code>`);
+}
+function listMarkdown(lines) {
+    const items = lines.map(line => {
+        const match = /^(\s*)([-*+]|\d+[.)])\s+(.*)$/.exec(line);
+        return { indent: match[1].replace(/\t/g, "  ").length, tag: /\d/.test(match[2]) ? "ol" : "ul", text: match[3] };
+    });
+    let html = "";
+    const stack = [];
+    for (const item of items) {
+        while (stack.length > 1 && item.indent < stack[stack.length - 1].indent)
+            html += `</li></${stack.pop().tag}>`;
+        const top = stack[stack.length - 1];
+        if (!top || item.indent > top.indent) {
+            html += `<${item.tag}><li>`;
+            stack.push({ indent: item.indent, tag: item.tag });
+        }
+        else if (top.tag !== item.tag) {
+            html += `</li></${top.tag}><${item.tag}><li>`;
+            top.tag = item.tag;
+        }
+        else
+            html += "</li><li>";
+        html += inlineMarkdown(item.text);
+    }
+    while (stack.length)
+        html += `</li></${stack.pop().tag}>`;
+    return html;
+}
+/** Converts Markdown to the editor's HTML: headings (three levels), lists, quotes, fenced code, rules, and inline marks. */
+export function markdownToHtml(markdown) {
+    const lines = markdown.replace(/\r\n?/g, "\n").split("\n");
+    const out = [];
+    const paragraph = [];
+    const flush = () => { if (paragraph.length) {
+        out.push(`<p>${inlineMarkdown(paragraph.join(" "))}</p>`);
+        paragraph.length = 0;
+    } };
+    const isItem = (line) => /^\s*([-*+]|\d+[.)])\s+/.test(line);
+    for (let index = 0; index < lines.length;) {
+        const line = lines[index];
+        if (/^\s*```/.test(line)) {
+            flush();
+            const code = [];
+            index++;
+            while (index < lines.length && !/^\s*```/.test(lines[index]))
+                code.push(lines[index++]);
+            index++;
+            out.push(`<pre>${escapeHtml(code.join("\n")) || "<br>"}</pre>`);
+            continue;
+        }
+        if (!line.trim()) {
+            flush();
+            index++;
+            continue;
+        }
+        const heading = /^(#{1,6})\s+(.*)$/.exec(line);
+        if (heading) {
+            flush();
+            const level = Math.min(3, heading[1].length);
+            out.push(`<h${level}>${inlineMarkdown(heading[2])}</h${level}>`);
+            index++;
+            continue;
+        }
+        if (/^ {0,3}([-*_])( *\1){2,} *$/.test(line)) {
+            flush();
+            out.push("<hr>");
+            index++;
+            continue;
+        }
+        if (/^\s*>/.test(line)) {
+            flush();
+            const quote = [];
+            while (index < lines.length && /^\s*>/.test(lines[index]))
+                quote.push(lines[index++].replace(/^\s*>\s?/, ""));
+            out.push(`<blockquote>${quote.map(inlineMarkdown).join("<br>")}</blockquote>`);
+            continue;
+        }
+        if (isItem(line)) {
+            flush();
+            const items = [];
+            while (index < lines.length && isItem(lines[index]))
+                items.push(lines[index++]);
+            out.push(listMarkdown(items));
+            continue;
+        }
+        paragraph.push(line.trim());
+        index++;
+    }
+    flush();
+    return out.join("") || "<p><br></p>";
+}
+function wrapMark(inner, mark) {
+    const match = /^(\s*)([\s\S]*?)(\s*)$/.exec(inner);
+    return match[2] ? `${match[1]}${mark}${match[2]}${mark}${match[3]}` : inner;
+}
+function inlineToMarkdown(node) {
+    let out = "";
+    node.childNodes.forEach(child => {
+        if (child.nodeType === Node.TEXT_NODE) {
+            out += child.data.replace(ZWSP, "");
+            return;
+        }
+        if (child.nodeType !== Node.ELEMENT_NODE)
+            return;
+        const element = child;
+        switch (element.nodeName) {
+            case "BR":
+                out += "\n";
+                break;
+            case "STRONG":
+            case "B":
+                out += wrapMark(inlineToMarkdown(element), "**");
+                break;
+            case "EM":
+            case "I":
+                out += wrapMark(inlineToMarkdown(element), "_");
+                break;
+            case "S":
+            case "STRIKE":
+            case "DEL":
+                out += wrapMark(inlineToMarkdown(element), "~~");
+                break;
+            case "CODE":
+                out += `\`${(element.textContent ?? "").replace(ZWSP, "")}\``;
+                break;
+            case "A":
+                out += `[${inlineToMarkdown(element)}](${element.getAttribute("href") ?? ""})`;
+                break;
+            case "UL":
+            case "OL": break;
+            default: out += inlineToMarkdown(element);
+        }
+    });
+    return out;
+}
+function listToMarkdown(list, indent) {
+    let number = 1;
+    return Array.from(list.children).filter(item => item.nodeName === "LI").map(item => {
+        const marker = list.nodeName === "OL" ? `${number++}. ` : "- ";
+        const nested = Array.from(item.children).filter(child => child.nodeName === "UL" || child.nodeName === "OL").map(child => listToMarkdown(child, indent + " ".repeat(marker.length)));
+        return [`${indent}${marker}${inlineToMarkdown(item).trim()}`, ...nested].join("\n");
+    }).join("\n");
+}
+function blockToMarkdown(node) {
+    if (node.nodeType === Node.TEXT_NODE)
+        return node.data.replace(ZWSP, "").trim();
+    if (node.nodeType !== Node.ELEMENT_NODE)
+        return "";
+    const element = node;
+    switch (element.nodeName) {
+        case "H1": return `# ${inlineToMarkdown(element).trim()}`;
+        case "H2": return `## ${inlineToMarkdown(element).trim()}`;
+        case "H3": return `### ${inlineToMarkdown(element).trim()}`;
+        case "HR": return "---";
+        case "PRE": return `\`\`\`\n${(element.textContent ?? "").replace(ZWSP, "").replace(/\n$/, "")}\n\`\`\``;
+        case "UL":
+        case "OL": return listToMarkdown(element, "");
+        case "BLOCKQUOTE": {
+            const blocks = Array.from(element.children).some(child => BLOCK_TAGS.has(child.nodeName));
+            const body = blocks ? Array.from(element.childNodes).map(blockToMarkdown).filter(Boolean).join("\n\n") : inlineToMarkdown(element).trim();
+            return body.split("\n").map(line => line ? `> ${line}` : ">").join("\n");
+        }
+        default: return inlineToMarkdown(element).trim();
+    }
+}
+/** Converts editor HTML (or an element) to Markdown. */
+export function htmlToMarkdown(input) {
+    const root = typeof input === "string" ? parseHtml(input) : input;
+    return Array.from(root.childNodes).map(blockToMarkdown).filter(Boolean).join("\n\n");
+}
+function parseHtml(html) {
+    const template = document.createElement("template");
+    template.innerHTML = html;
+    const root = document.createElement("div");
+    root.appendChild(template.content);
+    return root;
+}
+const insertAfter = (reference, ...nodes) => { let at = reference; nodes.forEach(node => { at.parentNode.insertBefore(node, at.nextSibling); at = node; }); };
+const insertBefore = (reference, ...nodes) => nodes.forEach(node => reference.parentNode.insertBefore(node, reference));
+const replaceNode = (old, ...nodes) => { insertBefore(old, ...nodes); old.parentNode.removeChild(old); };
+const appendNodes = (parent, ...nodes) => nodes.forEach(node => parent.appendChild(node));
+const INLINE_MAP = { B: "strong", STRONG: "strong", I: "em", EM: "em", S: "s", STRIKE: "s", DEL: "s", CODE: "code", A: "a", BR: "br" };
+const BLOCK_MAP = { P: "p", H1: "h1", H2: "h2", H3: "h3", H4: "h3", H5: "h3", H6: "h3", UL: "ul", OL: "ol", LI: "li", BLOCKQUOTE: "blockquote", PRE: "pre", HR: "hr" };
+const DROP = new Set(["SCRIPT", "STYLE", "META", "LINK", "TITLE", "TEMPLATE", "IFRAME", "OBJECT", "EMBED", "SVG", "CANVAS", "IMG", "VIDEO", "AUDIO", "INPUT", "BUTTON", "SELECT", "TEXTAREA", "HEAD"]);
+const BLOCK_TAGS = new Set(["P", "H1", "H2", "H3", "LI", "PRE", "BLOCKQUOTE", "DIV", "UL", "OL", "HR"]);
+/** Keeps only the tags the editor understands and drops every attribute except safe link targets. Bold and italic spans from other editors become marks. */
+export function sanitizeHtml(html) {
+    const source = new DOMParser().parseFromString(html, "text/html").body;
+    const out = document.createElement("div");
+    const convert = (from, into) => {
+        from.childNodes.forEach(child => {
+            if (child.nodeType === Node.TEXT_NODE) {
+                into.appendChild(document.createTextNode(child.data));
+                return;
+            }
+            if (child.nodeType !== Node.ELEMENT_NODE)
+                return;
+            const element = child;
+            if (DROP.has(element.nodeName))
+                return;
+            const style = element.getAttribute("style") ?? "";
+            let tag = INLINE_MAP[element.nodeName] ?? BLOCK_MAP[element.nodeName];
+            if (element.nodeName === "B" && /font-weight:\s*(normal|[1-4]00)/.test(style))
+                tag = "";
+            if (element.nodeName === "SPAN")
+                tag = /font-weight:\s*(bold|[6-9]00)/.test(style) ? "strong" : /font-style:\s*italic/.test(style) ? "em" : /line-through/.test(style) ? "s" : "";
+            if (!tag) {
+                convert(element, into);
+                return;
+            }
+            const next = document.createElement(tag);
+            if (tag === "a") {
+                const href = element.getAttribute("href") ?? "";
+                if (!safeUrl(href)) {
+                    convert(element, into);
+                    return;
+                }
+                next.setAttribute("href", href);
+            }
+            if (tag === "pre")
+                next.textContent = element.textContent ?? "";
+            else if (tag !== "br" && tag !== "hr")
+                convert(element, next);
+            into.appendChild(next);
+        });
+    };
+    convert(source, out);
+    // Inline runs at the top level become paragraphs; whitespace between blocks disappears.
+    const fixed = document.createElement("div");
+    let run = null;
+    Array.from(out.childNodes).forEach(node => {
+        const block = node.nodeType === Node.ELEMENT_NODE && BLOCK_TAGS.has(node.nodeName);
+        if (block) {
+            run = null;
+            fixed.appendChild(node);
+            return;
+        }
+        if (node.nodeType === Node.TEXT_NODE && !node.data.trim() && !run)
+            return;
+        if (!run) {
+            run = document.createElement("p");
+            fixed.appendChild(run);
+        }
+        run.appendChild(node);
+    });
+    fixed.querySelectorAll("li > p").forEach(paragraph => replaceNode(paragraph, ...Array.from(paragraph.childNodes)));
+    // The editor keeps typed whitespace, so formatting whitespace between blocks and list items has to go.
+    [fixed, ...Array.from(fixed.querySelectorAll("ul, ol, blockquote, li"))].forEach(parent => Array.from(parent.childNodes).forEach(node => {
+        if (isText(node) && !node.data.trim() && (parent === fixed || parent.nodeName === "UL" || parent.nodeName === "OL" || (node.previousSibling && BLOCK_TAGS.has(node.previousSibling.nodeName)) || (node.nextSibling && BLOCK_TAGS.has(node.nextSibling.nodeName))))
+            node.remove();
+    }));
+    return fixed.innerHTML;
+}
+/* ------------------------------------------------------------------------------------------------
+ * DOM helpers. Positions are stored as character offsets where every block start and line break
+ * counts as one character, so the caret survives any rewrite that keeps the text.
+ * ---------------------------------------------------------------------------------------------- */
+const COUNTED = new Set(["P", "H1", "H2", "H3", "LI", "PRE", "BLOCKQUOTE", "DIV"]);
+const isElement = (node) => !!node && node.nodeType === Node.ELEMENT_NODE;
+const isText = (node) => !!node && node.nodeType === Node.TEXT_NODE;
+function pointToOffset(root, container, offset) {
+    let count = 0, found = -1;
+    const visit = (node) => {
+        if (found >= 0)
+            return;
+        if (isText(node)) {
+            if (node === container)
+                found = count + offset;
+            else
+                count += node.data.length;
+            return;
+        }
+        if (!isElement(node))
+            return;
+        if (node !== root && COUNTED.has(node.nodeName))
+            count += 1;
+        if (node.nodeName === "BR" || node.nodeName === "HR")
+            count += 1;
+        const children = node.childNodes;
+        for (let index = 0; index < children.length; index++) {
+            if (node === container && index === offset) {
+                found = count;
+                return;
+            }
+            visit(children[index]);
+            if (found >= 0)
+                return;
+        }
+        if (node === container)
+            found = count;
+    };
+    visit(root);
+    return found < 0 ? count : found;
+}
+function offsetToPoint(root, target) {
+    let count = 0;
+    let result = null;
+    const visit = (node) => {
+        if (result)
+            return;
+        if (isText(node)) {
+            if (target <= count + node.data.length) {
+                result = [node, Math.max(0, target - count)];
+                return;
+            }
+            count += node.data.length;
+            return;
+        }
+        if (!isElement(node))
+            return;
+        if (node !== root && COUNTED.has(node.nodeName))
+            count += 1;
+        if (node.nodeName === "BR" || node.nodeName === "HR") {
+            if (count === target && node.parentNode) {
+                result = [node.parentNode, Array.prototype.indexOf.call(node.parentNode.childNodes, node)];
+                return;
+            }
+            count += 1;
+            return;
+        }
+        node.childNodes.forEach(visit);
+        if (!result && count === target && node !== root && COUNTED.has(node.nodeName))
+            result = [node, node.childNodes.length];
+    };
+    visit(root);
+    if (result)
+        return result;
+    const last = root.lastChild;
+    return last && isElement(last) && last.nodeName !== "HR" ? [last, last.childNodes.length] : [root, root.childNodes.length];
+}
+function readOffsets(root) {
+    const selection = window.getSelection();
+    if (!selection?.rangeCount)
+        return null;
+    const range = selection.getRangeAt(0);
+    if (!root.contains(range.startContainer) || !root.contains(range.endContainer))
+        return null;
+    return { start: pointToOffset(root, range.startContainer, range.startOffset), end: pointToOffset(root, range.endContainer, range.endOffset) };
+}
+function writeOffsets(root, offsets) {
+    const selection = window.getSelection();
+    if (!selection)
+        return;
+    const range = document.createRange();
+    if (!offsets) {
+        range.selectNodeContents(root.lastElementChild ?? root);
+        range.collapse(false);
+    }
+    else {
+        const [startNode, startOffset] = offsetToPoint(root, offsets.start);
+        const [endNode, endOffset] = offsets.end === offsets.start ? [startNode, startOffset] : offsetToPoint(root, offsets.end);
+        range.setStart(startNode, startOffset);
+        range.setEnd(endNode, endOffset);
+    }
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+/** The visible band of the nearest scrolling or clipping ancestor, so floating layers flip before they get cut off. */
+function clipBand(element) {
+    let top = 0, bottom = window.innerHeight;
+    for (let node = element.parentElement; node; node = node.parentElement) {
+        const style = getComputedStyle(node);
+        if (style.overflowY !== "visible" || style.overflowX !== "visible") {
+            const rect = node.getBoundingClientRect();
+            top = Math.max(top, rect.top);
+            bottom = Math.min(bottom, rect.bottom);
+        }
+    }
+    return { top, bottom };
+}
+function placeCaret(node, offset) {
+    const selection = window.getSelection();
+    if (!selection)
+        return;
+    const range = document.createRange();
+    range.setStart(node, offset);
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+function placeAtStart(element) {
+    const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+    const first = walker.nextNode();
+    if (first)
+        placeCaret(first, 0);
+    else
+        placeCaret(element, 0);
+}
+/** The nearest block around a node: a paragraph, heading, list item, quote, or code block. */
+function blockAt(root, node) {
+    let current = node;
+    while (current && current !== root) {
+        if (isElement(current) && COUNTED.has(current.nodeName))
+            return current;
+        current = current.parentNode;
+    }
+    return null;
+}
+const visibleText = (element) => (element.textContent ?? "").replace(ZWSP, "");
+function ensureFilled(element) {
+    if (element.nodeName === "HR")
+        return;
+    if (!visibleText(element) && !element.querySelector("br, hr, ul, ol"))
+        element.appendChild(document.createElement("br"));
+}
+function textBefore(block, range) {
+    const before = document.createRange();
+    before.setStart(block, 0);
+    before.setEnd(range.startContainer, range.startOffset);
+    return before.toString().replace(ZWSP, "").replace(/\u00a0/g, " ");
+}
+function atBlockStart(block, range) {
+    if (!range.collapsed)
+        return false;
+    const before = document.createRange();
+    before.setStart(block, 0);
+    before.setEnd(range.startContainer, range.startOffset);
+    return !before.toString().replace(ZWSP, "") && !before.cloneContents().querySelector("br, hr");
+}
+function moveChildren(from, to) {
+    while (from.firstChild)
+        to.appendChild(from.firstChild);
+}
+/** Plain text of a block, with line breaks for `<br>`, for moving content into a code block. */
+function plainText(element) {
+    let out = "";
+    const walk = (node) => node.childNodes.forEach(child => {
+        if (isText(child))
+            out += child.data.replace(ZWSP, "");
+        else if (child.nodeName === "BR")
+            out += "\n";
+        else
+            walk(child);
+    });
+    walk(element);
+    return out.replace(/\n$/, "");
+}
+function linesToNodes(text) {
+    const nodes = [];
+    text.replace(/\n$/, "").split("\n").forEach((line, index) => {
+        if (index)
+            nodes.push(document.createElement("br"));
+        if (line)
+            nodes.push(document.createTextNode(line));
+    });
+    return nodes;
+}
+function mergeAdjacentLists(list) {
+    const next = list.nextElementSibling;
+    if (next && next.nodeName === list.nodeName) {
+        moveChildren(next, list);
+        next.remove();
+    }
+    const previous = list.previousElementSibling;
+    if (previous && previous.nodeName === list.nodeName) {
+        moveChildren(list, previous);
+        list.remove();
+        return previous;
+    }
+    return list;
+}
+/** Moves a list item one level out. A top level item leaves the list and becomes a paragraph between its halves. */
+function outdent(item) {
+    const list = item.parentElement;
+    const parentItem = list.parentElement;
+    const following = [];
+    for (let node = item.nextSibling; node; node = node.nextSibling)
+        following.push(node);
+    if (parentItem?.nodeName === "LI") {
+        if (following.length) {
+            const sub = document.createElement(list.nodeName.toLowerCase());
+            following.forEach(node => sub.appendChild(node));
+            item.appendChild(sub);
+        }
+        insertAfter(parentItem, item);
+        if (!list.children.length)
+            list.remove();
+        return item;
+    }
+    const paragraph = document.createElement("p");
+    const nested = [];
+    Array.from(item.childNodes).forEach(child => { if (child.nodeName === "UL" || child.nodeName === "OL")
+        nested.push(child);
+    else
+        paragraph.appendChild(child); });
+    ensureFilled(paragraph);
+    const tail = following.length || nested.length ? document.createElement(list.nodeName.toLowerCase()) : null;
+    if (tail) {
+        nested.forEach(sub => sub.childNodes.length && Array.from(sub.childNodes).forEach(node => tail.appendChild(node)));
+        following.forEach(node => tail.appendChild(node));
+    }
+    insertAfter(list, paragraph);
+    if (tail)
+        insertAfter(paragraph, tail);
+    item.remove();
+    if (!list.children.length)
+        list.remove();
+    return paragraph;
+}
+function indent(item) {
+    const previous = item.previousElementSibling;
+    if (!previous || previous.nodeName !== "LI")
+        return false;
+    const listTag = item.parentElement.nodeName;
+    let sub = previous.lastElementChild;
+    if (!sub || (sub.nodeName !== "UL" && sub.nodeName !== "OL")) {
+        sub = document.createElement(listTag.toLowerCase());
+        previous.appendChild(sub);
+    }
+    sub.appendChild(item);
+    return true;
+}
+/** Turns one block into another type, keeping its content. Choosing the type a block already has turns it back into a paragraph. */
+function convertBlock(block, type) {
+    if (block.nodeName === "LI") {
+        const list = block.parentElement;
+        if (type === "ul" || type === "ol") {
+            if (list.nodeName.toLowerCase() === type)
+                return outdent(block);
+            const swapped = document.createElement(type);
+            moveChildren(list, swapped);
+            replaceNode(list, swapped);
+            return block;
+        }
+        const paragraph = outdent(block);
+        return paragraph.nodeName === "P" && type !== "p" ? convertBlock(paragraph, type) : paragraph;
+    }
+    if (type === "ul" || type === "ol") {
+        const item = document.createElement("li");
+        if (block.nodeName === "PRE")
+            appendNodes(item, ...linesToNodes(block.textContent ?? ""));
+        else
+            moveChildren(block, item);
+        ensureFilled(item);
+        const list = document.createElement(type);
+        list.appendChild(item);
+        replaceNode(block, list);
+        mergeAdjacentLists(list);
+        return item;
+    }
+    const tag = block.nodeName.toLowerCase() === type ? "p" : type;
+    const next = document.createElement(tag);
+    if (tag === "pre")
+        next.textContent = plainText(block);
+    else if (block.nodeName === "PRE")
+        appendNodes(next, ...linesToNodes(block.textContent ?? ""));
+    else
+        moveChildren(block, next);
+    ensureFilled(next);
+    replaceNode(block, next);
+    return next;
+}
+/** Makes sure a paragraph follows a block the caret cannot type after, such as a rule or a code block at the end. */
+function paragraphAfter(block) {
+    const next = block.nextElementSibling;
+    if (next && next.nodeName === "P")
+        return next;
+    const paragraph = document.createElement("p");
+    paragraph.appendChild(document.createElement("br"));
+    insertAfter(block, paragraph);
+    return paragraph;
+}
+/** Repairs what browsers leave behind: styled spans from merges, stray inline content at the top level, and an empty root. */
+function tidy(root) {
+    const loose = Array.from(root.childNodes).some(node => (isText(node) && node.data.trim()) || (isElement(node) && !BLOCK_TAGS.has(node.nodeName)));
+    const dirty = loose || !root.firstChild || root.querySelector("span, font, [style], div, b, i, strike");
+    if (!dirty)
+        return;
+    const offsets = readOffsets(root);
+    root.querySelectorAll("[style]").forEach(element => {
+        const style = element.getAttribute("style") ?? "";
+        if (element.nodeName === "SPAN" && /font-weight:\s*(bold|[6-9]00)/.test(style))
+            replaceNode(element, Object.assign(document.createElement("strong"), { innerHTML: element.innerHTML }));
+        else
+            element.removeAttribute("style");
+    });
+    const rename = (selector, tag) => root.querySelectorAll(selector).forEach(element => {
+        const next = document.createElement(tag);
+        moveChildren(element, next);
+        replaceNode(element, next);
+    });
+    rename("b", "strong");
+    rename("i", "em");
+    rename("strike", "s");
+    rename(":scope > div", "p");
+    root.querySelectorAll("span, font, div").forEach(element => replaceNode(element, ...Array.from(element.childNodes)));
+    let run = null;
+    Array.from(root.childNodes).forEach(node => {
+        if (isElement(node) && BLOCK_TAGS.has(node.nodeName)) {
+            run = null;
+            return;
+        }
+        if (isText(node) && !node.data.trim() && !run) {
+            node.remove();
+            return;
+        }
+        if (!run) {
+            run = document.createElement("p");
+            insertBefore(node, run);
+        }
+        run.appendChild(node);
+    });
+    if (!root.firstChild)
+        root.innerHTML = "<p><br></p>";
+    if (root.contains(document.activeElement) || document.activeElement === root)
+        writeOffsets(root, offsets);
+}
+/** A clean copy for output: canonical tags, no attributes but links, no invisible helpers, no trailing empty lines. */
+function cleanClone(root) {
+    const clone = root.cloneNode(true);
+    clone.querySelectorAll("*").forEach(element => {
+        Array.from(element.attributes).forEach(attribute => { if (!(element.nodeName === "A" && attribute.name === "href"))
+            element.removeAttribute(attribute.name); });
+    });
+    const walker = document.createTreeWalker(clone, NodeFilter.SHOW_TEXT);
+    const empty = [];
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        node.data = node.data.replace(ZWSP, "");
+        if (!node.data)
+            empty.push(node);
+    }
+    empty.forEach(node => node.remove());
+    clone.querySelectorAll("p, h1, h2, h3, li, blockquote").forEach(block => {
+        const last = block.lastChild;
+        if (last?.nodeName === "BR" && visibleText(block))
+            last.remove();
+    });
+    clone.querySelectorAll("pre").forEach(pre => { pre.textContent = (pre.textContent ?? "").replace(/\n$/, ""); });
+    while (clone.lastElementChild && clone.lastElementChild.nodeName !== "HR" && !visibleText(clone.lastElementChild) && clone.children.length > 1)
+        clone.lastElementChild.remove();
+    return clone;
+}
+function plainOutput(clone) {
+    return Array.from(clone.querySelectorAll("p, h1, h2, h3, li, blockquote, pre")).filter(block => !block.querySelector("p, li")).map(block => (block.textContent ?? "").trim()).filter(Boolean).join("\n");
+}
+const icon = { size: 16, strokeWidth: 1.75, "aria-hidden": true };
+const SLASH_ITEMS = [
+    { type: "p", label: "Text", hint: "", keywords: "paragraph plain body", icon: _jsx(Pilcrow, { ...icon }) },
+    { type: "h1", label: "Heading 1", hint: "#", keywords: "title h1 large", icon: _jsx(Heading1, { ...icon }) },
+    { type: "h2", label: "Heading 2", hint: "##", keywords: "subtitle h2 section", icon: _jsx(Heading2, { ...icon }) },
+    { type: "h3", label: "Heading 3", hint: "###", keywords: "h3 small", icon: _jsx(Heading3, { ...icon }) },
+    { type: "ul", label: "Bulleted list", hint: "-", keywords: "bullet unordered ul points", icon: _jsx(List, { ...icon }) },
+    { type: "ol", label: "Numbered list", hint: "1.", keywords: "ordered ol steps numbers", icon: _jsx(ListOrdered, { ...icon }) },
+    { type: "blockquote", label: "Quote", hint: ">", keywords: "blockquote citation callout", icon: _jsx(Quote, { ...icon }) },
+    { type: "pre", label: "Code block", hint: "```", keywords: "pre snippet monospace", icon: _jsx(SquareCode, { ...icon }) },
+    { type: "hr", label: "Divider", hint: "---", keywords: "rule hr line separator", icon: _jsx(Minus, { ...icon }) },
+];
+const { spring, duration, ease, blur } = motionTokens;
+const enter = [...ease.enter];
+const standard = [...ease.standard];
+const physical = (visualDuration, bounce) => {
+    const root = 2 * Math.PI / (visualDuration * 1.2);
+    return { type: "spring", stiffness: root * root, damping: 2 * (1 - bounce) * root, mass: 1 };
+};
+const MORPH = physical(spring.morph.visualDuration, .12), GLIDE = physical(.3, .08), GROW = physical(spring.smooth.visualDuration, 0);
+const TRAVEL = 18;
+const faceVariants = {
+    hidden: (direction) => ({ opacity: 0, x: direction * TRAVEL, filter: `blur(${blur.subtle}px)` }),
+    shown: { opacity: 1, x: 0, filter: "blur(0px)", transition: { x: MORPH, opacity: { duration: .2, ease: enter, delay: .03 }, filter: { duration: .2, ease: enter, delay: .03 } } },
+    gone: (direction) => ({ opacity: 0, x: direction * -TRAVEL, filter: `blur(${blur.subtle}px)`, transition: { x: MORPH, opacity: { duration: .12, ease: standard }, filter: { duration: .12, ease: standard } } }),
+};
+const fadeVariants = { hidden: { opacity: 0 }, shown: { opacity: 1, transition: { duration: .14 } }, gone: { opacity: 0, transition: { duration: .1 } } };
+/** A toolbar face reports its natural size while current, so the shared surface can spring to it. */
+function Face({ direction, reduced, onSize, children }) {
+    const ref = useRef(null);
+    const present = useIsPresent();
+    useLayoutEffect(() => {
+        const node = ref.current;
+        if (!node || !present)
+            return;
+        const report = () => onSize(node.offsetWidth, node.offsetHeight);
+        report();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(report);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [onSize, present]);
+    return _jsx(motion.div, { ref: ref, className: styles.face, custom: direction, variants: reduced ? fadeVariants : faceVariants, initial: "hidden", animate: "shown", exit: "gone", inert: !present || undefined, children: children });
+}
+function ToolButton({ label, pressed, shortcut, onPress, children }) {
+    return _jsx("button", { type: "button", className: styles.tool, "aria-label": label, "aria-pressed": pressed, title: shortcut ? `${label} (${shortcut})` : label, onMouseDown: event => event.preventDefault(), onClick: onPress, children: children });
+}
+/**
+ * A light rich text editor on contentEditable. Markdown shortcuts as you type, a floating selection toolbar that morphs into a link field,
+ * a slash menu for blocks, its own undo history, and HTML plus Markdown output. No dependencies beyond Motion and icons.
+ */
+export const RichTextEditor = forwardRef(function RichTextEditor({ value, defaultValue, defaultMarkdown, onChange, onHistoryChange, placeholder = "Start writing", blockHint = "Type / for blocks", readOnly = false, autoFocus = false, "aria-label": ariaLabel = "Editor", className, style, }, ref) {
+    const reduced = !!useReducedMotion();
+    const uid = useId();
+    const rootRef = useRef(null);
+    const editorRef = useRef(null);
+    const busy = useRef(false);
+    const dragging = useRef(false);
+    const lastInput = useRef("");
+    const lastEmitted = useRef(null);
+    const history = useRef({ stack: [], index: -1 });
+    const callbacks = useRef({ onChange, onHistoryChange });
+    useEffect(() => { callbacks.current = { onChange, onHistoryChange }; }, [onChange, onHistoryChange]);
+    const [empty, setEmpty] = useState(true);
+    const [formats, setFormats] = useState({ bold: false, italic: false, strike: false, code: false, link: null, block: "p" });
+    const [bar, setBar] = useState(null);
+    const [face, setFace] = useState("format");
+    const [linkDraft, setLinkDraft] = useState("");
+    const [slash, setSlash] = useState(null);
+    const [slashActive, setSlashActive] = useState(0);
+    const [announce, setAnnounce] = useState("");
+    const faceRef = useRef(face);
+    const slashRef = useRef(slash);
+    const savedRange = useRef(null);
+    const linkInputRef = useRef(null);
+    const hinted = useRef(null);
+    useEffect(() => { faceRef.current = face; }, [face]);
+    useEffect(() => { slashRef.current = slash; }, [slash]);
+    /* Output and history. */
+    const emit = useCallback(() => {
+        const editor = editorRef.current;
+        if (!editor)
+            return;
+        const clone = cleanClone(editor);
+        const html = clone.innerHTML;
+        const text = plainOutput(clone);
+        const isEmpty = !text && !clone.querySelector("hr");
+        lastEmitted.current = html;
+        setEmpty(isEmpty);
+        callbacks.current.onChange?.({ html, markdown: htmlToMarkdown(clone), text, empty: isEmpty });
+    }, []);
+    const reportHistory = useCallback(() => {
+        const { stack, index } = history.current;
+        callbacks.current.onHistoryChange?.({ canUndo: index > 0, canRedo: index < stack.length - 1 });
+    }, []);
+    const record = useCallback((kind, boundary = false) => {
+        const editor = editorRef.current;
+        if (!editor)
+            return;
+        const snap = { html: editor.innerHTML.replace(/ data-hint=""/g, ""), selection: readOffsets(editor), kind, at: Date.now() };
+        const state = history.current;
+        const top = state.stack[state.index];
+        if (top && top.html === snap.html) {
+            top.selection = snap.selection;
+            return;
+        }
+        if (kind === "type" && top?.kind === "type" && state.index > 0 && snap.at - top.at < 1000 && !boundary) {
+            state.stack[state.index] = { ...snap, at: top.at };
+        }
+        else {
+            state.stack = state.stack.slice(0, state.index + 1);
+            state.stack.push(snap);
+            if (state.stack.length > 300)
+                state.stack.shift();
+            state.index = state.stack.length - 1;
+        }
+        reportHistory();
+    }, [reportHistory]);
+    const restore = useCallback((snap) => {
+        const editor = editorRef.current;
+        if (!editor)
+            return;
+        editor.innerHTML = snap.html;
+        hinted.current = null;
+        editor.focus({ preventScroll: true });
+        writeOffsets(editor, snap.selection);
+        emit();
+        reportHistory();
+    }, [emit, reportHistory]);
+    const undo = useCallback(() => {
+        const state = history.current;
+        if (state.index <= 0)
+            return;
+        state.index -= 1;
+        setSlash(null);
+        restore(state.stack[state.index]);
+        setAnnounce("Undone");
+    }, [restore]);
+    const redo = useCallback(() => {
+        const state = history.current;
+        if (state.index >= state.stack.length - 1)
+            return;
+        state.index += 1;
+        setSlash(null);
+        restore(state.stack[state.index]);
+        setAnnounce("Redone");
+    }, [restore]);
+    /* Selection driven chrome: block hint, active formats, the slash query, and the toolbar. */
+    const sync = useCallback(() => {
+        const editor = editorRef.current, root = rootRef.current;
+        if (!editor || !root || busy.current)
+            return;
+        const selection = window.getSelection();
+        const inside = !!selection?.rangeCount && editor.contains(selection.anchorNode);
+        const range = inside ? selection.getRangeAt(0) : null;
+        const block = range ? blockAt(editor, range.startContainer) : null;
+        const hint = range?.collapsed && block && !visibleText(block) && block.nodeName !== "PRE" ? block : null;
+        if (hinted.current !== hint) {
+            hinted.current?.removeAttribute("data-hint");
+            hint?.setAttribute("data-hint", "");
+            hinted.current = hint;
+        }
+        if (!range) {
+            if (faceRef.current !== "link")
+                setBar(null);
+            setSlash(null);
+            return;
+        }
+        const start = isElement(range.startContainer) ? range.startContainer : range.startContainer.parentElement;
+        const within = (selector) => { const found = start?.closest(selector); return !!found && editor.contains(found); };
+        const anchor = start?.closest("a");
+        const listItem = block?.nodeName === "LI" ? block.parentElement?.nodeName.toLowerCase() ?? "ul" : null;
+        const next = {
+            bold: within("strong, b"), italic: within("em, i"), strike: within("s, strike, del"),
+            code: within("code") && !within("pre"),
+            link: anchor && editor.contains(anchor) ? anchor.getAttribute("href") : null,
+            block: listItem ?? block?.nodeName.toLowerCase() ?? "p",
+        };
+        setFormats(current => Object.keys(next).every(key => current[key] === next[key]) ? current : next);
+        const open = slashRef.current;
+        if (open) {
+            const valid = range.collapsed && range.startContainer === open.node && range.startOffset > open.offset && open.node.data[open.offset] === "/";
+            const query = valid ? open.node.data.slice(open.offset + 1, range.startOffset) : "";
+            if (!valid || query.length > 24 || /^\s/.test(query) || /\s\s/.test(query))
+                setSlash(null);
+            else if (query !== open.query)
+                setSlash({ ...open, query });
+        }
+        const inCode = !!start?.closest("pre");
+        if (range.collapsed || dragging.current || inCode || slashRef.current || readOnly) {
+            if (faceRef.current !== "link")
+                setBar(null);
+            return;
+        }
+        const rects = range.getClientRects();
+        const rect = rects.length ? rects[0] : range.getBoundingClientRect();
+        const whole = range.getBoundingClientRect();
+        const box = root.getBoundingClientRect();
+        const below = rect.top - clipBand(root).top < 60;
+        setBar({ x: whole.left + whole.width / 2 - box.left, y: below ? whole.bottom - box.top + 8 : rect.top - box.top - 8, below });
+    }, [readOnly]);
+    const run = useCallback((change) => {
+        const editor = editorRef.current;
+        if (!editor)
+            return;
+        busy.current = true;
+        try {
+            change();
+            tidy(editor);
+        }
+        finally {
+            busy.current = false;
+        }
+        record("command");
+        emit();
+        sync();
+    }, [emit, record, sync]);
+    /* Content in and out. */
+    const load = useCallback((html) => {
+        const editor = editorRef.current;
+        if (!editor)
+            return;
+        editor.innerHTML = sanitizeHtml(html) || "<p><br></p>";
+        editor.querySelectorAll("p, h1, h2, h3, li, blockquote, pre").forEach(block => ensureFilled(block));
+        hinted.current = null;
+    }, []);
+    const initial = useRef({ value, defaultValue, defaultMarkdown, autoFocus });
+    useLayoutEffect(() => {
+        const editor = editorRef.current;
+        if (!editor)
+            return;
+        const start = initial.current;
+        load(start.value ?? start.defaultValue ?? (start.defaultMarkdown !== undefined ? markdownToHtml(start.defaultMarkdown) : "<p><br></p>"));
+        history.current = { stack: [{ html: editor.innerHTML, selection: null, kind: "command", at: 0 }], index: 0 };
+        emit();
+        reportHistory();
+        if (start.autoFocus) {
+            editor.focus();
+            writeOffsets(editor, null);
+        }
+    }, [emit, load, reportHistory]);
+    useEffect(() => {
+        if (value === undefined || value === lastEmitted.current)
+            return;
+        load(value);
+        record("command");
+        emit();
+    }, [emit, load, record, value]);
+    /* Markdown shortcuts, applied right after the character that completes them. */
+    const shortcut = useCallback((data) => {
+        const editor = editorRef.current;
+        const selection = window.getSelection();
+        if (!editor || !data || !selection?.rangeCount)
+            return false;
+        const range = selection.getRangeAt(0);
+        if (!range.collapsed)
+            return false;
+        const block = blockAt(editor, range.startContainer);
+        if (!block || block.nodeName === "PRE")
+            return false;
+        const before = textBefore(block, range);
+        const plainBlock = block.nodeName === "P" || block.nodeName === "DIV";
+        if (data === " " && plainBlock && block.parentElement === editor) {
+            const rule = [[/^# $/, "h1"], [/^## $/, "h2"], [/^### $/, "h3"], [/^[-*+] $/, "ul"], [/^\d+[.)] $/, "ol"], [/^> $/, "blockquote"]];
+            const match = rule.find(([pattern]) => pattern.test(before));
+            if (match) {
+                const prefix = document.createRange();
+                prefix.setStart(block, 0);
+                prefix.setEnd(range.startContainer, range.startOffset);
+                prefix.deleteContents();
+                const next = convertBlock(block, match[1]);
+                placeAtStart(next);
+                return true;
+            }
+        }
+        if (data === "-" && plainBlock && block.parentElement === editor && before === "---" && visibleText(block) === "---") {
+            const rule = document.createElement("hr");
+            replaceNode(block, rule);
+            placeAtStart(paragraphAfter(rule));
+            return true;
+        }
+        if (data === "`" && plainBlock && block.parentElement === editor && before === "```" && visibleText(block) === "```") {
+            block.textContent = "";
+            const next = convertBlock(block, "pre");
+            placeAtStart(next);
+            return true;
+        }
+        const node = range.startContainer;
+        if (!isText(node) || node.parentElement?.closest("code"))
+            return false;
+        const text = node.data.slice(0, range.startOffset);
+        const inline = [
+            [/(\*\*|__)([^*_\s](?:[^*_]*[^*_\s])?)\1$/, "strong"],
+            [/~~([^~\s](?:[^~]*[^~\s])?)~~$/, "s"],
+            [/`([^`]+)`$/, "code"],
+            [/(?:^|[^*\w])(\*([^*\s](?:[^*]*[^*\s])?)\*)$/, "em"],
+            [/(?:^|[^_\w])(_([^_\s](?:[^_]*[^_\s])?)_)$/, "em"],
+        ];
+        for (const [pattern, tag] of inline) {
+            const match = pattern.exec(text);
+            if (!match)
+                continue;
+            const whole = tag === "em" ? match[1] : match[0];
+            const inner = tag === "em" ? match[2] : tag === "code" ? match[1] : tag === "s" ? match[1] : match[2];
+            const from = range.startOffset - whole.length;
+            node.splitText(range.startOffset);
+            const middle = node.splitText(from);
+            const element = document.createElement(tag);
+            element.textContent = inner;
+            replaceNode(middle, element);
+            // A zero width space after the mark keeps the next keystroke outside it; output strips it.
+            const exit = document.createTextNode("\u200b");
+            insertAfter(element, exit);
+            placeCaret(exit, 1);
+            return true;
+        }
+        return false;
+    }, []);
+    const openSlashIfTyped = useCallback((data) => {
+        const editor = editorRef.current, root = rootRef.current;
+        const selection = window.getSelection();
+        if (data !== "/" || !editor || !root || !selection?.rangeCount)
+            return;
+        const range = selection.getRangeAt(0);
+        const node = range.startContainer;
+        if (!range.collapsed || !isText(node) || node.parentElement?.closest("pre, code"))
+            return;
+        const offset = range.startOffset - 1;
+        if (node.data[offset] !== "/" || (offset > 0 && !/[\s\u00a0\u200b]/.test(node.data[offset - 1])))
+            return;
+        const mark = document.createRange();
+        mark.setStart(node, offset);
+        mark.setEnd(node, offset + 1);
+        const rect = mark.getBoundingClientRect(), box = root.getBoundingClientRect();
+        const band = clipBand(root);
+        const above = band.bottom - rect.bottom < 330 && rect.top - band.top > band.bottom - rect.bottom;
+        const room = above ? rect.top - band.top - 12 : band.bottom - rect.bottom - 12;
+        setSlash({ node, offset, query: "", x: Math.max(0, Math.min(rect.left - box.left - 8, box.width - 244)), y: above ? rect.top - box.top - 6 : rect.bottom - box.top + 6, above, max: Math.max(150, room) });
+        setSlashActive(0);
+        setBar(null);
+    }, []);
+    const slashResults = useMemo(() => {
+        const query = slash?.query.trim().toLowerCase() ?? "";
+        if (!query)
+            return SLASH_ITEMS;
+        return SLASH_ITEMS.filter(item => `${item.label} ${item.keywords}`.toLowerCase().split(/\s+/).some(word => word.startsWith(query)) || item.label.toLowerCase().includes(query));
+    }, [slash?.query]);
+    const slashIndex = Math.min(slashActive, Math.max(0, slashResults.length - 1));
+    const slashOpen = !!slash && slashResults.length > 0;
+    const applyBlock = useCallback((type, target) => {
+        const editor = editorRef.current;
+        const selection = window.getSelection();
+        if (!editor || !selection?.rangeCount)
+            return;
+        const range = selection.getRangeAt(0);
+        const offsets = readOffsets(editor);
+        const block = target ?? blockAt(editor, range.startContainer);
+        if (!block)
+            return;
+        if (type === "hr") {
+            const top = block.nodeName === "LI" ? block.closest("ul, ol") : block;
+            const rule = document.createElement("hr");
+            if (!visibleText(block) && block.nodeName !== "LI")
+                replaceNode(block, rule);
+            else
+                insertAfter(top, rule);
+            placeAtStart(paragraphAfter(rule));
+            return;
+        }
+        // Several selected blocks turn together; if every one already has the type, they all turn back into paragraphs.
+        const blocks = range.collapsed ? [block] : Array.from(editor.querySelectorAll("p, h1, h2, h3, li, blockquote, pre")).filter(candidate => range.intersectsNode(candidate) && !candidate.querySelector("p, li"));
+        const current = (candidate) => candidate.nodeName === "LI" ? candidate.parentElement.nodeName.toLowerCase() : candidate.nodeName.toLowerCase();
+        const allSame = blocks.every(candidate => current(candidate) === type);
+        blocks.forEach(candidate => {
+            if (allSame)
+                convertBlock(candidate, type);
+            else if (current(candidate) !== type)
+                convertBlock(candidate, type);
+        });
+        writeOffsets(editor, offsets);
+        if (type === "pre") {
+            const pre = blockAt(editor, window.getSelection()?.anchorNode ?? null);
+            if (pre && !pre.nextElementSibling)
+                paragraphAfter(pre);
+        }
+    }, []);
+    const chooseSlash = (item) => {
+        const open = slashRef.current;
+        const editor = editorRef.current;
+        if (!item || !open || !editor)
+            return;
+        const selection = window.getSelection();
+        const caret = selection?.rangeCount && selection.getRangeAt(0).startContainer === open.node ? selection.getRangeAt(0).startOffset : open.offset + 1 + open.query.length;
+        setSlash(null);
+        run(() => {
+            open.node.deleteData(open.offset, Math.max(1, caret - open.offset));
+            const block = blockAt(editor, open.node);
+            placeCaret(open.node, open.offset);
+            if (block) {
+                ensureFilled(block);
+                applyBlock(item.type, block);
+            }
+        });
+        setAnnounce(`${item.label} added`);
+    };
+    /* Inline marks and links. */
+    const toggleMark = (mark) => run(() => {
+        const editor = editorRef.current;
+        const selection = window.getSelection();
+        if (!selection?.rangeCount)
+            return;
+        const range = selection.getRangeAt(0);
+        if (mark !== "code") {
+            document.execCommand("styleWithCSS", false, "false");
+            document.execCommand(mark === "strike" ? "strikeThrough" : mark);
+            return;
+        }
+        const startElement = isElement(range.startContainer) ? range.startContainer : range.startContainer.parentElement;
+        const code = startElement?.closest("code");
+        if (code && editor.contains(code) && !code.closest("pre")) {
+            const text = document.createTextNode(code.textContent ?? "");
+            replaceNode(code, text);
+            const next = document.createRange();
+            next.selectNodeContents(text);
+            selection.removeAllRanges();
+            selection.addRange(next);
+            return;
+        }
+        if (range.collapsed || blockAt(editor, range.startContainer) !== blockAt(editor, range.endContainer))
+            return;
+        const element = document.createElement("code");
+        element.textContent = range.toString();
+        range.deleteContents();
+        range.insertNode(element);
+        const next = document.createRange();
+        next.selectNodeContents(element);
+        selection.removeAllRanges();
+        selection.addRange(next);
+    });
+    const openLink = () => {
+        const editor = editorRef.current;
+        const selection = window.getSelection();
+        if (!editor || !selection?.rangeCount)
+            return;
+        let range = selection.getRangeAt(0);
+        const startElement = isElement(range.startContainer) ? range.startContainer : range.startContainer.parentElement;
+        const existing = startElement?.closest("a");
+        if (existing && editor.contains(existing)) {
+            range = document.createRange();
+            range.selectNodeContents(existing);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+        if (range.collapsed)
+            return;
+        savedRange.current = range.cloneRange();
+        setLinkDraft(existing?.getAttribute("href") ?? "");
+        setFace("link");
+        faceRef.current = "link";
+        sync();
+        requestAnimationFrame(() => linkInputRef.current?.focus({ preventScroll: true }));
+    };
+    const closeLink = (focusEditor = true) => {
+        setFace("format");
+        faceRef.current = "format";
+        const editor = editorRef.current, range = savedRange.current;
+        savedRange.current = null;
+        if (focusEditor && editor && range) {
+            editor.focus({ preventScroll: true });
+            const selection = window.getSelection();
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+        }
+        sync();
+    };
+    const applyLink = (remove = false) => {
+        const range = savedRange.current;
+        const editor = editorRef.current;
+        const url = normalizeUrl(linkDraft);
+        if (!range || !editor) {
+            closeLink();
+            return;
+        }
+        editor.focus({ preventScroll: true });
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+        run(() => {
+            const startElement = isElement(range.startContainer) ? range.startContainer : range.startContainer.parentElement;
+            const existing = startElement?.closest("a");
+            if (remove || !url) {
+                if (existing && editor.contains(existing))
+                    replaceNode(existing, ...Array.from(existing.childNodes));
+                else
+                    document.execCommand("unlink");
+                return;
+            }
+            if (existing && editor.contains(existing) && range.toString() === existing.textContent) {
+                existing.setAttribute("href", url);
+                return;
+            }
+            if (blockAt(editor, range.startContainer) !== blockAt(editor, range.endContainer)) {
+                document.execCommand("createLink", false, url);
+                return;
+            }
+            const contents = range.extractContents();
+            contents.querySelectorAll("a").forEach(anchor => replaceNode(anchor, ...Array.from(anchor.childNodes)));
+            const anchor = document.createElement("a");
+            anchor.setAttribute("href", url);
+            anchor.appendChild(contents);
+            range.insertNode(anchor);
+            const after = document.createRange();
+            after.setStartAfter(anchor);
+            after.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(after);
+        });
+        savedRange.current = null;
+        setFace("format");
+        faceRef.current = "format";
+        setBar(null);
+        setAnnounce(remove || !url ? "Link removed" : "Link added");
+    };
+    /* Keyboard. Enter, Backspace at a block edge, and history go through beforeinput so mobile keyboards behave the same. */
+    const enterKey = useCallback((soft) => {
+        const editor = editorRef.current;
+        const selection = window.getSelection();
+        if (!selection?.rangeCount)
+            return;
+        let range = selection.getRangeAt(0);
+        if (!range.collapsed) {
+            range.deleteContents();
+            range = selection.getRangeAt(0);
+        }
+        const block = blockAt(editor, range.startContainer);
+        if (!block)
+            return;
+        if (block.nodeName === "PRE") {
+            const full = block.textContent ?? "";
+            const caret = textBefore(block, range).length;
+            const head = full.slice(0, caret), tail = full.slice(caret);
+            if (!tail.replace(/\n$/, "") && head.endsWith("\n") && !soft) {
+                block.textContent = head.slice(0, -1) || "";
+                ensureFilled(block);
+                const paragraph = document.createElement("p");
+                paragraph.appendChild(document.createElement("br"));
+                insertAfter(block, paragraph);
+                placeAtStart(paragraph);
+                return;
+            }
+            block.textContent = head + "\n" + (tail || "\n");
+            placeCaret(block.firstChild, caret + 1);
+            return;
+        }
+        if (soft) {
+            const br = document.createElement("br");
+            range.insertNode(br);
+            if (!br.nextSibling || (isText(br.nextSibling) && !br.nextSibling.data && !br.nextSibling.nextSibling))
+                insertAfter(br, document.createElement("br"));
+            const after = document.createRange();
+            after.setStartAfter(br);
+            after.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(after);
+            return;
+        }
+        if (block.nodeName === "LI" && !visibleText(block) && !block.querySelector("ul, ol")) {
+            placeAtStart(outdent(block));
+            return;
+        }
+        if (block.nodeName === "BLOCKQUOTE" && !visibleText(block)) {
+            placeAtStart(convertBlock(block, "p"));
+            return;
+        }
+        const tail = document.createRange();
+        tail.setStart(range.startContainer, range.startOffset);
+        tail.setEnd(block, block.childNodes.length);
+        const atEnd = !tail.toString().replace(ZWSP, "") && !tail.cloneContents().querySelector("ul, ol");
+        const heading = /^H[1-3]$/.test(block.nodeName);
+        const fragment = tail.extractContents();
+        const next = document.createElement(heading && atEnd ? "p" : block.nodeName.toLowerCase());
+        if (!(heading && atEnd))
+            next.appendChild(fragment);
+        // Formatting open at the caret carries into the new line only when there is text to carry.
+        if (heading && atEnd)
+            next.appendChild(document.createElement("br"));
+        insertAfter(block, next);
+        block.querySelectorAll(":scope > br:last-child").forEach(br => { if (visibleText(block))
+            br.remove(); });
+        ensureFilled(block);
+        ensureFilled(next);
+        if (!visibleText(next))
+            next.querySelectorAll("strong, em, s, code, a").forEach(element => { if (!visibleText(element))
+                element.remove(); });
+        ensureFilled(next);
+        placeAtStart(next);
+    }, []);
+    const backspaceAtStart = useCallback(() => {
+        const editor = editorRef.current;
+        const selection = window.getSelection();
+        if (!selection?.rangeCount)
+            return false;
+        const range = selection.getRangeAt(0);
+        const block = blockAt(editor, range.startContainer);
+        if (!block || !atBlockStart(block, range))
+            return false;
+        if (/^(H[1-3]|BLOCKQUOTE|PRE)$/.test(block.nodeName)) {
+            placeAtStart(convertBlock(block, "p"));
+            return true;
+        }
+        if (block.nodeName === "LI") {
+            placeAtStart(outdent(block));
+            return true;
+        }
+        const previous = block.previousElementSibling;
+        if (previous?.nodeName === "HR") {
+            previous.remove();
+            return true;
+        }
+        if (!previous && !visibleText(block) && block.nextElementSibling) {
+            const next = block.nextElementSibling;
+            block.remove();
+            placeAtStart(next);
+            return true;
+        }
+        return false;
+    }, []);
+    useEffect(() => {
+        const editor = editorRef.current;
+        if (!editor)
+            return;
+        const onBeforeInput = (event) => {
+            if (readOnly)
+                return;
+            switch (event.inputType) {
+                case "historyUndo":
+                    event.preventDefault();
+                    undo();
+                    return;
+                case "historyRedo":
+                    event.preventDefault();
+                    redo();
+                    return;
+                case "insertParagraph":
+                case "insertLineBreak":
+                    event.preventDefault();
+                    if (slashRef.current)
+                        return;
+                    run(() => enterKey(event.inputType === "insertLineBreak"));
+                    return;
+                case "deleteContentBackward": {
+                    const selection = window.getSelection();
+                    if (!selection?.rangeCount || !selection.getRangeAt(0).collapsed)
+                        return;
+                    busy.current = true;
+                    let handled = false;
+                    try {
+                        handled = backspaceAtStart();
+                    }
+                    finally {
+                        busy.current = false;
+                    }
+                    if (handled) {
+                        event.preventDefault();
+                        tidy(editor);
+                        record("command");
+                        emit();
+                        sync();
+                    }
+                    return;
+                }
+                case "insertText": {
+                    // Typing into an emptied editor lands in a paragraph, never loose at the root.
+                    const selection = window.getSelection();
+                    if (!selection?.rangeCount || blockAt(editor, selection.anchorNode) || editor.querySelector("p, h1, h2, h3, li, pre, blockquote"))
+                        return;
+                    event.preventDefault();
+                    const paragraph = document.createElement("p");
+                    const text = document.createTextNode(event.data ?? "");
+                    paragraph.appendChild(text);
+                    editor.replaceChildren(paragraph);
+                    placeCaret(text, text.length);
+                    record("type");
+                    emit();
+                    sync();
+                    return;
+                }
+                case "insertFromDrop":
+                    event.preventDefault();
+                    return;
+                case "formatUnderline":
+                    event.preventDefault();
+                    return;
+            }
+        };
+        editor.addEventListener("beforeinput", onBeforeInput);
+        return () => editor.removeEventListener("beforeinput", onBeforeInput);
+    }, [backspaceAtStart, emit, enterKey, readOnly, record, redo, run, sync, undo]);
+    const onInput = (event) => {
+        if (busy.current)
+            return;
+        const editor = editorRef.current;
+        const native = event.nativeEvent;
+        if (native.isComposing)
+            return;
+        busy.current = true;
+        let converted = false;
+        try {
+            tidy(editor);
+            if (native.inputType === "insertText")
+                converted = shortcut(native.data);
+        }
+        finally {
+            busy.current = false;
+        }
+        if (converted) {
+            tidy(editor);
+            record("command");
+            setAnnounce("Formatted");
+        }
+        else
+            record("type", native.data === " " || native.inputType !== lastInput.current);
+        lastInput.current = native.inputType;
+        emit();
+        if (!converted && native.inputType === "insertText")
+            openSlashIfTyped(native.data);
+        sync();
+    };
+    const focusToolbar = () => rootRef.current?.querySelector(`[data-toolbar="${uid}"] button`)?.focus();
+    const onKeyDown = (event) => {
+        if (readOnly)
+            return;
+        const mod = event.metaKey || event.ctrlKey;
+        const key = event.key.toLowerCase();
+        if (slashOpen) {
+            if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                event.preventDefault();
+                setSlashActive((slashIndex + (event.key === "ArrowDown" ? 1 : -1) + slashResults.length) % slashResults.length);
+                return;
+            }
+            if (event.key === "Enter" || event.key === "Tab") {
+                event.preventDefault();
+                chooseSlash(slashResults[slashIndex]);
+                return;
+            }
+            if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                setSlash(null);
+                return;
+            }
+        }
+        if (mod && key === "z") {
+            event.preventDefault();
+            if (event.shiftKey)
+                redo();
+            else
+                undo();
+            return;
+        }
+        if (mod && key === "y") {
+            event.preventDefault();
+            redo();
+            return;
+        }
+        if (mod && !event.shiftKey && key === "b") {
+            event.preventDefault();
+            toggleMark("bold");
+            return;
+        }
+        if (mod && !event.shiftKey && key === "i") {
+            event.preventDefault();
+            toggleMark("italic");
+            return;
+        }
+        if (mod && event.shiftKey && key === "x") {
+            event.preventDefault();
+            toggleMark("strike");
+            return;
+        }
+        if (mod && key === "e") {
+            event.preventDefault();
+            toggleMark("code");
+            return;
+        }
+        if (mod && key === "k") {
+            event.preventDefault();
+            openLink();
+            return;
+        }
+        if (mod && key === "u") {
+            event.preventDefault();
+            return;
+        }
+        if (event.altKey && event.key === "F10" && bar) {
+            event.preventDefault();
+            focusToolbar();
+            return;
+        }
+        if (event.key === "Tab") {
+            const editor = editorRef.current;
+            const selection = window.getSelection();
+            const block = selection?.rangeCount ? blockAt(editor, selection.anchorNode) : null;
+            if (block?.nodeName === "LI") {
+                event.preventDefault();
+                run(() => {
+                    const offsets = readOffsets(editor);
+                    if (event.shiftKey)
+                        outdent(block);
+                    else
+                        indent(block);
+                    writeOffsets(editor, offsets);
+                });
+            }
+            else if (block?.nodeName === "PRE" && !event.shiftKey) {
+                event.preventDefault();
+                run(() => {
+                    const range = selection.getRangeAt(0);
+                    range.deleteContents();
+                    const spaces = document.createTextNode("  ");
+                    range.insertNode(spaces);
+                    placeCaret(spaces, 2);
+                    block.normalize();
+                });
+            }
+        }
+    };
+    const onPaste = (event) => {
+        if (readOnly)
+            return;
+        event.preventDefault();
+        const editor = editorRef.current;
+        const html = event.clipboardData.getData("text/html");
+        const text = event.clipboardData.getData("text/plain");
+        run(() => {
+            const selection = window.getSelection();
+            if (!selection?.rangeCount)
+                return;
+            const range = selection.getRangeAt(0);
+            range.deleteContents();
+            const block = blockAt(editor, range.startContainer);
+            const markdownish = /(^|\n)\s*(#{1,3}\s|[-*+]\s|\d+[.)]\s|>|```)|\*\*|`[^`]+`|\[[^\]]+\]\(/.test(text);
+            const source = html ? sanitizeHtml(html) : markdownish || text.includes("\n\n") ? markdownToHtml(text) : "";
+            const fragment = source ? parseHtml(source) : null;
+            const single = fragment && fragment.children.length === 1 && fragment.firstElementChild.nodeName === "P";
+            // Plain text, code blocks, and list items take the text as it is; everything else keeps its structure.
+            if (!fragment || !block || block.nodeName === "PRE" || (block.nodeName === "LI" && !single)) {
+                const plain = block?.nodeName === "PRE" ? text : text.replace(/\s*\n\s*/g, " ");
+                const node = document.createTextNode(plain);
+                range.insertNode(node);
+                placeCaret(node, node.length);
+                return;
+            }
+            if (single) {
+                const nodes = Array.from(fragment.firstElementChild.childNodes);
+                const last = nodes[nodes.length - 1];
+                const holder = document.createDocumentFragment();
+                nodes.forEach(node => holder.appendChild(node));
+                range.insertNode(holder);
+                if (last) {
+                    const after = document.createRange();
+                    after.setStartAfter(last);
+                    after.collapse(true);
+                    selection.removeAllRanges();
+                    selection.addRange(after);
+                }
+                return;
+            }
+            const tail = document.createRange();
+            tail.setStart(range.startContainer, range.startOffset);
+            tail.setEnd(block, block.childNodes.length);
+            const rest = document.createElement(block.nodeName === "LI" ? "p" : block.nodeName.toLowerCase());
+            rest.appendChild(tail.extractContents());
+            const top = block.nodeName === "LI" ? block.closest("ul, ol") : block;
+            const blocks = Array.from(fragment.childNodes);
+            let anchor = top;
+            blocks.forEach(node => { insertAfter(anchor, node); if (isElement(node))
+                anchor = node; });
+            if (visibleText(rest) || rest.querySelector("br")) {
+                insertAfter(anchor, rest);
+                ensureFilled(rest);
+            }
+            if (!visibleText(block) && block.nodeName === "P")
+                block.remove();
+            const end = document.createRange();
+            end.selectNodeContents(anchor);
+            end.collapse(false);
+            selection.removeAllRanges();
+            selection.addRange(end);
+        });
+    };
+    /* Selection events. */
+    useEffect(() => {
+        let frame = 0;
+        const onChange = () => { cancelAnimationFrame(frame); frame = requestAnimationFrame(sync); };
+        const onUp = () => { if (!dragging.current)
+            return; dragging.current = false; onChange(); };
+        document.addEventListener("selectionchange", onChange);
+        document.addEventListener("pointerup", onUp);
+        return () => { cancelAnimationFrame(frame); document.removeEventListener("selectionchange", onChange); document.removeEventListener("pointerup", onUp); };
+    }, [sync]);
+    useEffect(() => {
+        if (face !== "link")
+            return;
+        const down = (event) => { if (!rootRef.current?.querySelector(`[data-toolbar="${uid}"]`)?.contains(event.target)) {
+            savedRange.current = null;
+            setFace("format");
+            faceRef.current = "format";
+            setBar(null);
+        } };
+        document.addEventListener("pointerdown", down);
+        return () => document.removeEventListener("pointerdown", down);
+    }, [face, uid]);
+    useImperativeHandle(ref, () => ({
+        focus: () => editorRef.current?.focus(),
+        getHTML: () => editorRef.current ? cleanClone(editorRef.current).innerHTML : "",
+        getMarkdown: () => editorRef.current ? htmlToMarkdown(cleanClone(editorRef.current)) : "",
+        getText: () => editorRef.current ? plainOutput(cleanClone(editorRef.current)) : "",
+        setHTML: html => { load(html); record("command"); emit(); },
+        setMarkdown: markdown => { load(markdownToHtml(markdown)); record("command"); emit(); },
+        clear: () => { load("<p><br></p>"); record("command"); emit(); },
+        undo,
+        redo,
+        get element() { return editorRef.current; },
+    }), [emit, load, record, redo, undo]);
+    /* Toolbar geometry: one surface whose size springs between faces and whose position glides with the selection. */
+    const tx = useMotionValue(0), ty = useMotionValue(0), tw = useMotionValue(0), th = useMotionValue(0);
+    const shown = useRef(false);
+    /* Until a face has reported its size the surface has nothing to show, so it stays hidden rather than flashing a 1px dot. */
+    const toolbarVisibility = useTransform(tw, width => width > 0 ? "visible" : "hidden");
+    const targetSize = useRef({ width: 0, height: 0 });
+    const onFaceSize = useCallback((width, height) => {
+        targetSize.current = { width, height };
+        if (!shown.current || reduced || tw.get() === 0) {
+            tw.jump(width);
+            th.jump(height);
+            return;
+        }
+        animate(tw, width, MORPH);
+        animate(th, height, MORPH);
+    }, [reduced, th, tw]);
+    const toolbarOpen = !!bar && !readOnly;
+    // A fresh toolbar is placed, not glided, and stays "fresh" until it has painted once, so a selection that settles in the same
+    // frame cannot send it sliding in from its last spot or from the root's corner. Motion resets a remounted element's bound
+    // values to what they held at render (Strict Mode does this on every open in development), so the placement is applied
+    // again once mounting is done. Its size is left alone on close so the exit keeps its shape instead of collapsing.
+    const placedFrame = useRef(0);
+    const placement = useRef(null);
+    const place = useCallback(() => {
+        const at = placement.current;
+        if (!at)
+            return;
+        const { width, height } = targetSize.current;
+        if (tx.get() !== at.x)
+            tx.jump(at.x);
+        if (ty.get() !== at.y)
+            ty.jump(at.y);
+        if (width && tw.get() !== width) {
+            tw.jump(width);
+            th.jump(height);
+        }
+    }, [th, tw, tx, ty]);
+    useLayoutEffect(() => {
+        if (!bar) {
+            shown.current = false;
+            placement.current = null;
+            cancelAnimationFrame(placedFrame.current);
+            return;
+        }
+        const root = rootRef.current;
+        const half = (targetSize.current.width || 280) / 2;
+        const x = root ? Math.max(half + 4, Math.min(bar.x, root.offsetWidth - half - 4)) : bar.x;
+        if (!shown.current || reduced) {
+            placement.current = { x, y: bar.y };
+            place();
+            cancelAnimationFrame(placedFrame.current);
+            placedFrame.current = requestAnimationFrame(() => { place(); shown.current = true; placement.current = null; });
+            return;
+        }
+        animate(tx, x, GLIDE);
+        animate(ty, bar.y, GLIDE);
+    }, [bar, place, reduced, tx, ty]);
+    useEffect(() => { if (bar)
+        place(); }, [bar, place]);
+    useEffect(() => () => cancelAnimationFrame(placedFrame.current), []);
+    const direction = face === "link" ? 1 : -1;
+    /* Slash menu geometry: the highlight glides between rows and the panel springs to its rows. */
+    const listRef = useRef(null);
+    const hy = useMotionValue(0), hh = useMotionValue(0), panelHeight = useMotionValue("auto");
+    const panelBody = useRef(null);
+    const slashPanel = useRef(null);
+    const slashMax = slash?.max ?? 320;
+    const panelSized = useRef(false);
+    const highlightPlaced = useRef(false);
+    useLayoutEffect(() => {
+        const row = listRef.current?.querySelector(`[data-index="${slashIndex}"]`);
+        if (!row)
+            return;
+        if (reduced || !highlightPlaced.current || hh.get() === 0) {
+            hy.jump(row.offsetTop);
+            hh.jump(row.offsetHeight);
+            highlightPlaced.current = true;
+            return;
+        }
+        animate(hy, row.offsetTop, GLIDE);
+        animate(hh, row.offsetHeight, GLIDE);
+        // A short panel scrolls to keep the active row in view.
+        const panel = slashPanel.current;
+        if (panel) {
+            const top = row.offsetTop + 6, bottom = top + row.offsetHeight;
+            if (top - 6 < panel.scrollTop)
+                panel.scrollTop = top - 6;
+            else if (bottom + 6 > panel.scrollTop + panel.clientHeight)
+                panel.scrollTop = bottom + 6 - panel.clientHeight;
+        }
+    }, [hh, hy, reduced, slashIndex, slashResults, slashOpen]);
+    useLayoutEffect(() => {
+        // The highlight keeps its row while the menu fades out; the next open places it fresh.
+        if (!slashOpen) {
+            panelSized.current = false;
+            highlightPlaced.current = false;
+            return;
+        }
+        const body = panelBody.current;
+        if (!body)
+            return;
+        const fit = () => {
+            const target = Math.min(body.offsetHeight, slashMax);
+            if (!panelSized.current || reduced) {
+                panelHeight.jump(target);
+                panelSized.current = true;
+                return;
+            }
+            animate(panelHeight, target, GROW);
+        };
+        fit();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(fit);
+        observer.observe(body);
+        return () => observer.disconnect();
+    }, [hh, panelHeight, reduced, slashMax, slashOpen]);
+    const onToolbarKey = (event) => {
+        if (face !== "format")
+            return;
+        const buttons = Array.from(event.currentTarget.querySelectorAll("button"));
+        const at = buttons.indexOf(document.activeElement);
+        if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+            event.preventDefault();
+            buttons[(at + (event.key === "ArrowRight" ? 1 : -1) + buttons.length) % buttons.length]?.focus();
+        }
+        else if (event.key === "Escape") {
+            event.preventDefault();
+            editorRef.current?.focus();
+            sync();
+        }
+    };
+    const optionId = (index) => `${uid}-slash-${index}`;
+    const cssVars = { "--placeholder": JSON.stringify(placeholder), "--hint": JSON.stringify(blockHint) };
+    return _jsxs("div", { ref: rootRef, className: [styles.root, className].filter(Boolean).join(" "), style: style, children: [_jsx("div", { ref: editorRef, className: styles.editor, style: cssVars, contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", "aria-multiline": "true", "aria-label": ariaLabel, "aria-readonly": readOnly || undefined, "aria-controls": slashOpen ? `${uid}-slash` : undefined, "aria-activedescendant": slashOpen ? optionId(slashIndex) : undefined, "data-empty": empty || undefined, spellCheck: true, onInput: onInput, onKeyDown: onKeyDown, onPaste: onPaste, onDrop: event => event.preventDefault(), onPointerDown: () => { dragging.current = true; }, onCompositionEnd: () => { record("type", true); emit(); } }), _jsx("span", { className: styles.srOnly, "aria-live": "polite", children: announce }), _jsx(AnimatePresence, { children: toolbarOpen && _jsx(motion.div, { "data-toolbar": uid, role: "toolbar", "aria-label": "Formatting", className: styles.toolbar, "data-below": bar.below || undefined, style: { left: tx, top: ty, width: tw, height: th, visibility: toolbarVisibility, transformOrigin: bar.below ? "50% 0" : "50% 100%" }, initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .94, y: bar.below ? -4 : 4 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: reduced ? { opacity: 0 } : { opacity: 0, scale: .96, transition: { duration: duration.exit * .8, ease: standard } }, transition: reduced ? { duration: duration.fast } : { ...spring.snappy, opacity: { duration: duration.fast, ease: enter } }, onKeyDown: onToolbarKey, children: _jsx(AnimatePresence, { initial: false, custom: direction, children: face === "format" ? _jsx(Face, { direction: direction, reduced: reduced, onSize: onFaceSize, children: _jsxs("div", { className: styles.row, children: [_jsx(ToolButton, { label: "Bold", pressed: formats.bold, shortcut: "\u2318B", onPress: () => toggleMark("bold"), children: _jsx(Bold, { ...icon }) }), _jsx(ToolButton, { label: "Italic", pressed: formats.italic, shortcut: "\u2318I", onPress: () => toggleMark("italic"), children: _jsx(Italic, { ...icon }) }), _jsx(ToolButton, { label: "Strikethrough", pressed: formats.strike, shortcut: "\u2318\u21E7X", onPress: () => toggleMark("strike"), children: _jsx(Strikethrough, { ...icon }) }), _jsx(ToolButton, { label: "Inline code", pressed: formats.code, shortcut: "\u2318E", onPress: () => toggleMark("code"), children: _jsx(Code, { ...icon }) }), _jsx(ToolButton, { label: formats.link ? "Edit link" : "Link", pressed: !!formats.link, shortcut: "\u2318K", onPress: openLink, children: _jsx(Link, { ...icon }) }), _jsxs("span", { className: styles.blockTools, children: [_jsx("span", { className: styles.divider, "aria-hidden": "true" }), _jsx(ToolButton, { label: "Heading 1", pressed: formats.block === "h1", onPress: () => run(() => applyBlock("h1")), children: _jsx(Heading1, { ...icon }) }), _jsx(ToolButton, { label: "Heading 2", pressed: formats.block === "h2", onPress: () => run(() => applyBlock("h2")), children: _jsx(Heading2, { ...icon }) }), _jsx(ToolButton, { label: "Quote", pressed: formats.block === "blockquote", onPress: () => run(() => applyBlock("blockquote")), children: _jsx(Quote, { ...icon }) })] })] }) }, "format") : _jsx(Face, { direction: direction, reduced: reduced, onSize: onFaceSize, children: _jsxs("form", { className: styles.linkRow, onSubmit: event => { event.preventDefault(); applyLink(); }, children: [_jsx("button", { type: "button", className: styles.tool, "aria-label": "Back to formatting", onClick: () => closeLink(), children: _jsx(ArrowLeft, { ...icon }) }), _jsx("input", { ref: linkInputRef, className: styles.linkInput, value: linkDraft, onChange: event => setLinkDraft(event.target.value), onKeyDown: event => { if (event.key === "Escape") {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            closeLink();
+                                        } }, placeholder: "Paste or type a link", "aria-label": "Link address", inputMode: "url", autoComplete: "off", spellCheck: false }), formats.link && _jsx("button", { type: "button", className: styles.tool, "aria-label": "Remove link", onClick: () => applyLink(true), children: _jsx(Unlink, { ...icon }) }), _jsx("button", { type: "submit", className: styles.apply, "aria-label": "Apply link", "data-ready": !!linkDraft.trim() || undefined, children: _jsx(Check, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] }) }, "link") }) }, "toolbar") }), _jsx(AnimatePresence, { children: slashOpen && slash && _jsx(motion.div, { ref: slashPanel, className: styles.slash, "data-above": slash.above || undefined, style: { left: slash.x, top: slash.y, height: panelHeight, maxHeight: slashMax, transformOrigin: slash.above ? "16px 100%" : "16px 0" }, initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .96, y: slash.above ? 4 : -4 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: reduced ? { opacity: 0 } : { opacity: 0, scale: .97, transition: { duration: duration.exit * .8, ease: standard } }, transition: reduced ? { duration: duration.fast } : { ...spring.snappy, opacity: { duration: duration.fast, ease: enter } }, onMouseDown: event => event.preventDefault(), children: _jsx("div", { ref: panelBody, className: styles.slashBody, children: _jsxs("ul", { ref: listRef, id: `${uid}-slash`, role: "listbox", "aria-label": "Blocks", className: styles.slashList, children: [_jsx(motion.li, { "aria-hidden": "true", className: styles.slashHighlight, style: { y: hy, height: hh } }), slashResults.map((item, index) => _jsxs("li", { id: optionId(index), role: "option", "aria-selected": index === slashIndex, "data-index": index, className: styles.slashOption, onPointerMove: () => { if (index !== slashIndex)
+                                        setSlashActive(index); }, onClick: () => chooseSlash(item), children: [_jsx("span", { className: styles.slashIcon, children: item.icon }), _jsx("span", { className: styles.slashLabel, children: item.label }), item.hint && _jsx("kbd", { className: styles.slashHint, children: item.hint })] }, item.type))] }) }) }, `${slash.offset}-${slash.y}`) })] });
+});
+export default RichTextEditor;