@crisp-ui-kit/crisp 0.50.0 → 0.52.0

package/dist/esm/product/richtext/richtext.js

@@ -1,19 +1,139 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Bold, Heading1, Heading2, Italic, Link2, List, ListOrdered, Quote, Strikethrough, Underline, } from "lucide-react";
+import { Baseline, Bold, Heading1, Heading2, Heading3, Highlighter, Image as ImageIcon, Italic, Link2, List, ListOrdered, Pilcrow, Search, Strikethrough, } from "lucide-react";
 import * as React from "react";
+import { useListboxKeyboard } from "../../components/select/index.js";
+import { matchMentionTrigger } from "../../core/index.js";
 import { richtextRecipe } from "./richtext.recipe.js";
+export const RICHTEXT_COLOR_TONES = [
+    { id: "grey", label: "Grey", text: "rgba(0,0,0,0.63)", highlight: "#F6F7F7" },
+    { id: "red", label: "Red", text: "#EB3B3B", highlight: "#FFEBEB" },
+    { id: "orange", label: "Orange", text: "#C95908", highlight: "#FEEEE1" },
+    { id: "yellow", label: "Yellow", text: "#CF8300", highlight: "#FFF3CC" },
+    {
+        id: "light-green",
+        label: "Light green",
+        text: "#748700",
+        highlight: "#F4FBCB",
+    },
+    { id: "green", label: "Green", text: "#02AD6E", highlight: "#E0FCED" },
+    { id: "teal", label: "Teal", text: "#0D99BD", highlight: "#DDF7FF" },
+    { id: "blue", label: "Blue", text: "#266DF0", highlight: "#E5EEFF" },
+    { id: "purple", label: "Purple", text: "#864AFF", highlight: "#F5F0FF" },
+    { id: "violet", label: "Violet", text: "#CD33DE", highlight: "#FDEDFF" },
+    { id: "magenta", label: "Magenta", text: "#E0387E", highlight: "#FEECF3" },
+    { id: "brown", label: "Brown", text: "#8C7D00", highlight: "#FDF7C4" },
+];
+const BLOCK_MENU_ITEMS = [
+    { id: "h1", label: "Heading 1", description: "Large section heading" },
+    { id: "h2", label: "Heading 2", description: "Medium section heading" },
+    { id: "h3", label: "Heading 3", description: "Small section heading" },
+    {
+        id: "body",
+        label: "Body",
+        description: "Just start typing with plain text",
+    },
+    {
+        id: "ul",
+        label: "Bulleted list",
+        description: "Create a simple bulleted list",
+    },
+    {
+        id: "ol",
+        label: "Numbered list",
+        description: "Create a list with numbering",
+    },
+    { id: "image", label: "Image", description: "Upload an image" },
+];
+const filterBlockItems = (query) => {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return BLOCK_MENU_ITEMS;
+    return BLOCK_MENU_ITEMS.filter((item) => item.label.toLowerCase().includes(q));
+};
+/**
+ * Is there an active "/query" block-insert trigger ending at the caret? The
+ * same word-boundary rule as a mention trigger: `/` must start a word (text
+ * start, or preceded by whitespace) and nothing between it and the caret may
+ * contain whitespace. A pure function, kept local rather than imported from
+ * a shared primitive — this component doesn't currently depend on one.
+ */
+function matchSlashTrigger(textBeforeCaret, trigger = "/") {
+    const start = textBeforeCaret.lastIndexOf(trigger);
+    if (start === -1)
+        return null;
+    const before = start > 0 ? textBeforeCaret[start - 1] : undefined;
+    if (before !== undefined && !/\s/.test(before))
+        return null;
+    const query = textBeforeCaret.slice(start + trigger.length);
+    if (/\s/.test(query))
+        return null;
+    return { query, start };
+}
 const exec = (cmd, value) => document.execCommand(cmd, false, value);
 /**
- * A block rich-text editor — measured from a notes editor. A large title,
- * a prose body (headings, lists, quote, marks, links), and a floating toolbar
- * that appears over a text selection. Built on contentEditable, dependency-free.
+ * A block rich-text editor — measured from Attio's own notes editor. A large
+ * title, a prose body (h1/h2/h3, bulleted/numbered lists, an image block,
+ * marks), a floating selection toolbar, a searchable block-type menu, and a
+ * caret-anchored mention trigger. Built on contentEditable, dependency-free.
  * Uncontrolled: seed with `defaultTitle`/`defaultHtml`, read via `onChange`.
+ * Imperative actions (`insertMention`, `focus`) go through a ref handle
+ * rather than a new prop each — the rest of the surface stays uncontrolled.
+ *
+ * **No underline, no inline code, no blockquote** — all three confirmed
+ * absent from Attio's live toolbar (7 controls) and its exhaustive 7-item
+ * block-type menu; the generic baseline this component used to ship
+ * overshot Attio on all three. `.crisp-rte-body blockquote` still renders
+ * correctly for content pasted in from elsewhere — only the control for it
+ * is gone.
+ *
+ * **The block menu's own chrome (356px, radius 12px, `elevation.floating`,
+ * a "Search items…" input, 7 rows at 52px with a 16px icon) was measured
+ * through the in-editor "Insert" button, not the toolbar's "Body ▾".**
+ * Clicking "Body ▾" itself was tried repeatedly, with both synthetic and
+ * real CDP-dispatched trusted clicks, single- and multi-step sessions, and
+ * consistently closed the ENTIRE note a fraction of a second after opening
+ * something (confirmed via a 0/50/150/400ms readback: the toolbar portal was
+ * still there at +50ms, everything was gone by +150ms) — a nested-popover
+ * dismissable-layer interaction synthetic input in this environment could
+ * not reliably drive. The Insert button opens the identical shape ("The
+ * same-shaped popover... is also what opens from the 'Body' button" — the
+ * source measurement's own finding, and Insert's own DOM confirms the exact
+ * same `role="dialog"`/search-input/`role="option"` structure), so the
+ * chrome below is that measurement, reused for both entry points. What's
+ * NOT independently confirmed is "Body ▾"'s own anchor side — Insert opens
+ * `data-side="right"` (it sits at the end of a line, with no room below);
+ * the toolbar sits at the TOP of the selection, so this component opens the
+ * menu below it, a reasoned default rather than a reading. The `/`-in-body
+ * trigger, and the "@" mention trigger, both anchor at the caret and do not
+ * steal focus from the body — the toolbar's own "Body ▾" click DOES focus a
+ * real search input, since there's no in-document query to read a filter
+ * from until one exists.
+ *
+ * Not built: Attio's own separate "Insert" trigger button (a third way to
+ * reach the identical menu, sitting at the end of the body's last line) —
+ * only the two entry points #426 asked for.
  */
-export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, titleLabel = "Title", bodyLabel = "Note body", linkPromptLabel = "Link URL", ...rest }) {
+export const RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, titleLabel = "Title", bodyLabel = "Note body", linkPromptLabel = "Link URL", imagePromptLabel = "Image URL", textColorLabel = "Text", highlightColorLabel = "Highlight", clearColorLabel = "Default", blockMenuLabel = "Body", blockMenuSearchPlaceholder = "Search items…", blockMenuEmptyLabel = "No matching blocks", mentionTrigger = "@", renderMentionPicker, readOnly = false, ...rest }, ref) {
     const titleRef = React.useRef(null);
     const bodyRef = React.useRef(null);
     const [bar, setBar] = React.useState(null);
     const [active, setActive] = React.useState({});
+    const [swatchPanel, setSwatchPanel] = React.useState(null);
+    const [blockMenu, setBlockMenu] = React.useState(null);
+    // The Range covering a live "/query" (trigger included), mirroring the
+    // mention primitive below — only set in "slash" mode.
+    const slashRangeRef = React.useRef(null);
+    const blockSearchRef = React.useRef(null);
+    const [mention, setMention] = React.useState(null);
+    // The Range covering the live "@query" text (trigger included) — kept
+    // outside state since it's DOM identity, not a value to render from.
+    const mentionRangeRef = React.useRef(null);
+    // Wraps whatever `renderMentionPicker` returns, `display: contents` so it
+    // affects no layout — exists only so `updateMention` can tell "focus moved
+    // into the consumer's own picker" apart from "focus left the editor
+    // entirely", the same distinction `updateBar` already makes for the block
+    // menu's search input below.
+    const mentionPickerRef = React.useRef(null);
     const syncEmpty = (el) => {
         if (el)
             el.toggleAttribute("data-empty", (el.textContent ?? "") === "");
@@ -38,8 +158,7 @@ export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlace
         const sel = window.getSelection();
         let node = sel?.anchorNode;
         while (node && node !== bodyRef.current) {
-            if (node.nodeType === 1 &&
-                /^(H1|H2|H3|BLOCKQUOTE|LI)$/.test(node.tagName))
+            if (node.nodeType === 1 && /^(H1|H2|H3|LI)$/.test(node.tagName))
                 return node.tagName.toLowerCase();
             node = node.parentElement;
         }
@@ -47,6 +166,15 @@ export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlace
     };
     // biome-ignore lint/correctness/useExhaustiveDependencies: blockTag only reads stable refs
     const updateBar = React.useCallback(() => {
+        if (readOnly)
+            return;
+        // The block menu's own search input lives outside `body`, and opening
+        // it (a "toolbar"-mode menu autofocuses it) moves the document
+        // selection there deliberately — that is not the user clicking away
+        // from their text selection, and must not tear the toolbar (and the
+        // menu it owns) down out from under them the instant it opens.
+        if (document.activeElement === blockSearchRef.current)
+            return;
         const sel = window.getSelection();
         const body = bodyRef.current;
         if (!sel ||
@@ -55,11 +183,13 @@ export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlace
             !body ||
             !body.contains(sel.anchorNode)) {
             setBar(null);
+            setSwatchPanel(null);
             return;
         }
         const rect = sel.getRangeAt(0).getBoundingClientRect();
         if (rect.width === 0 && rect.height === 0) {
             setBar(null);
+            setSwatchPanel(null);
             return;
         }
         setBar({ x: rect.left + rect.width / 2, y: rect.top - 8 });
@@ -67,20 +197,132 @@ export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlace
         setActive({
             bold: document.queryCommandState("bold"),
             italic: document.queryCommandState("italic"),
-            underline: document.queryCommandState("underline"),
             strikeThrough: document.queryCommandState("strikeThrough"),
             h1: tag === "h1",
             h2: tag === "h2",
+            h3: tag === "h3",
             ul: document.queryCommandState("insertUnorderedList"),
             ol: document.queryCommandState("insertOrderedList"),
-            blockquote: tag === "blockquote",
         });
+    }, [readOnly]);
+    const closeBlockMenu = React.useCallback(() => {
+        slashRangeRef.current = null;
+        setBlockMenu(null);
+    }, []);
+    /** Mirrors the mention-trigger detection below: only handles the caret
+     * landing inside a text node (the common case while typing), and only
+     * ever auto-closes a "slash"-mode menu — a "toolbar"-mode menu's search
+     * input isn't inside the body, so focusing it moves the selection out of
+     * `body` entirely, which must not be read as "the trigger went away". */
+    const updateSlashTrigger = React.useCallback(() => {
+        if (readOnly)
+            return;
+        const body = bodyRef.current;
+        const sel = window.getSelection();
+        if (!body ||
+            !sel?.isCollapsed ||
+            sel.rangeCount === 0 ||
+            !body.contains(sel.anchorNode)) {
+            if (blockMenu?.mode === "slash")
+                closeBlockMenu();
+            return;
+        }
+        const range = sel.getRangeAt(0);
+        const node = range.startContainer;
+        if (node.nodeType !== Node.TEXT_NODE) {
+            if (blockMenu?.mode === "slash")
+                closeBlockMenu();
+            return;
+        }
+        const textBefore = (node.textContent ?? "").slice(0, range.startOffset);
+        const match = matchSlashTrigger(textBefore);
+        if (!match) {
+            if (blockMenu?.mode === "slash")
+                closeBlockMenu();
+            return;
+        }
+        const triggerRange = document.createRange();
+        triggerRange.setStart(node, match.start);
+        triggerRange.setEnd(node, range.startOffset);
+        slashRangeRef.current = triggerRange;
+        const rect = triggerRange.getBoundingClientRect();
+        setBlockMenu({
+            anchor: { x: rect.left, y: rect.bottom + 4 },
+            query: match.query,
+            highlighted: 0,
+            mode: "slash",
+        });
+    }, [readOnly, blockMenu, closeBlockMenu]);
+    const closeMention = React.useCallback(() => {
+        mentionRangeRef.current = null;
+        setMention(null);
     }, []);
+    /**
+     * Is the caret sitting right after an "@query"? Only handles the caret
+     * landing inside a text node — the common case while typing — the same
+     * scope `updateBar`'s own selection reading keeps to. A Range spanning
+     * element boundaries (the caret at the very start of the body, a fresh
+     * empty paragraph) has no "text before it" to search and correctly finds
+     * no trigger.
+     *
+     * Does NOT auto-close while focus sits inside the consumer's own picker
+     * (`mentionPickerRef`) — a picker with its own search field would
+     * otherwise close itself the instant that field took focus, since focus
+     * moving there also moves the document selection out of `body`. This is
+     * the same distinction `updateBar` already draws for the block menu's own
+     * search input, made while merging the two features together.
+     */
+    const updateMention = React.useCallback(() => {
+        if (readOnly)
+            return;
+        if (mentionPickerRef.current?.contains(document.activeElement))
+            return;
+        const body = bodyRef.current;
+        const sel = window.getSelection();
+        if (!body ||
+            !sel?.isCollapsed ||
+            sel.rangeCount === 0 ||
+            !body.contains(sel.anchorNode)) {
+            closeMention();
+            return;
+        }
+        const range = sel.getRangeAt(0);
+        const node = range.startContainer;
+        if (node.nodeType !== Node.TEXT_NODE) {
+            closeMention();
+            return;
+        }
+        const textBefore = (node.textContent ?? "").slice(0, range.startOffset);
+        const match = matchMentionTrigger(textBefore, mentionTrigger);
+        if (!match) {
+            closeMention();
+            return;
+        }
+        const triggerRange = document.createRange();
+        triggerRange.setStart(node, match.start);
+        triggerRange.setEnd(node, range.startOffset);
+        mentionRangeRef.current = triggerRange;
+        const rect = triggerRange.getBoundingClientRect();
+        setMention({
+            query: match.query,
+            anchor: { x: rect.left, y: rect.bottom },
+        });
+    }, [readOnly, mentionTrigger, closeMention]);
     React.useEffect(() => {
-        const h = () => updateBar();
+        if (readOnly)
+            return;
+        const h = () => {
+            updateBar();
+            updateSlashTrigger();
+            updateMention();
+        };
         document.addEventListener("selectionchange", h);
         return () => document.removeEventListener("selectionchange", h);
-    }, [updateBar]);
+    }, [updateBar, updateSlashTrigger, updateMention, readOnly]);
+    React.useEffect(() => {
+        if (blockMenu?.mode === "toolbar")
+            blockSearchRef.current?.focus();
+    }, [blockMenu?.mode]);
     const run = (cmd, value) => {
         bodyRef.current?.focus();
         exec(cmd, value);
@@ -88,14 +330,140 @@ export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlace
         syncEmpty(bodyRef.current);
         emit();
     };
-    const toggleBlock = (tag) => {
-        run("formatBlock", blockTag() === tag ? "p" : tag);
-    };
     const addLink = () => {
         const url = window.prompt(linkPromptLabel);
         if (url)
             run("createLink", url);
     };
+    const addImage = () => {
+        const url = window.prompt(imagePromptLabel);
+        if (url)
+            run("insertImage", url);
+    };
+    /** Setting a block type FROM THE MENU is a choice, not a toggle — picking
+     * "Heading 1" always makes it a heading 1, unlike the old discrete
+     * H1 button, which flipped back to a paragraph if it already was one. */
+    const applyBlockItem = (id) => {
+        switch (id) {
+            case "h1":
+            case "h2":
+            case "h3":
+                run("formatBlock", id);
+                break;
+            case "body":
+                run("formatBlock", "p");
+                break;
+            case "ul":
+                run("insertUnorderedList");
+                break;
+            case "ol":
+                run("insertOrderedList");
+                break;
+            case "image":
+                addImage();
+                break;
+        }
+    };
+    const filteredBlockItems = blockMenu ? filterBlockItems(blockMenu.query) : [];
+    const pickBlockItem = (item) => {
+        if (blockMenu?.mode === "slash" && slashRangeRef.current) {
+            const range = slashRangeRef.current;
+            const sel = window.getSelection();
+            range.deleteContents();
+            sel?.removeAllRanges();
+            sel?.addRange(range);
+        }
+        applyBlockItem(item.id);
+        closeBlockMenu();
+    };
+    /** The WAI-ARIA popup-listbox model (↑/↓ wrapping, Home/End, Enter,
+     * Escape, Tab-to-dismiss) — shared with Select/MultiSelect rather than
+     * hand-rolled a third time (#198's own reasoning). Wired to both the
+     * toolbar search input and, for the "/" case where focus never leaves the
+     * body, the body's own keydown handler. */
+    const { onKeyDown: onBlockMenuKeyDown } = useListboxKeyboard({
+        enabledIndexes: filteredBlockItems.map((_, i) => i),
+        highlight: blockMenu?.highlighted ?? -1,
+        setHighlight: (index) => setBlockMenu((cur) => cur && { ...cur, highlighted: index }),
+        commit: () => {
+            const item = filteredBlockItems[blockMenu?.highlighted ?? -1];
+            if (item)
+                pickBlockItem(item);
+        },
+        close: closeBlockMenu,
+    });
+    const toggleBlockMenuFromToolbar = () => {
+        if (!bar)
+            return;
+        setBlockMenu((cur) => cur?.mode === "toolbar"
+            ? null
+            : {
+                anchor: { x: bar.x, y: bar.y },
+                query: "",
+                highlighted: 0,
+                mode: "toolbar",
+            });
+    };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: syncEmpty only reads/writes stable refs, same as run()'s own call to it just below
+    const insertMention = React.useCallback((item) => {
+        const body = bodyRef.current;
+        const sel = window.getSelection();
+        if (!body || !sel)
+            return;
+        body.focus();
+        const range = mentionRangeRef.current ??
+            (sel.rangeCount > 0 ? sel.getRangeAt(0) : null);
+        if (!range)
+            return;
+        const chip = document.createElement("span");
+        chip.className = "crisp-rte-mention";
+        chip.contentEditable = "false";
+        chip.dataset.mentionId = item.id;
+        chip.textContent = `${mentionTrigger}${item.label}`;
+        range.deleteContents();
+        range.insertNode(chip);
+        // A non-breaking space right after the chip, so the caret has plain
+        // text to land in — inserting a caret directly against a
+        // contentEditable=false node's edge is where it can get stuck jumping
+        // back INTO the atomic chip instead of past it.
+        const space = document.createTextNode(" ");
+        chip.after(space);
+        const after = document.createRange();
+        after.setStartAfter(space);
+        after.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(after);
+        closeMention();
+        syncEmpty(bodyRef.current);
+        emit();
+    }, [mentionTrigger, closeMention, emit]);
+    React.useImperativeHandle(ref, () => ({
+        insertMention,
+        focus: () => bodyRef.current?.focus(),
+    }), [insertMention]);
+    const applyTextColor = (tone) => {
+        run("foreColor", tone.text);
+        setSwatchPanel(null);
+    };
+    const applyHighlight = (tone) => {
+        run("hiliteColor", tone.highlight);
+        setSwatchPanel(null);
+    };
+    // "Clear" reads the field's own current computed color rather than a
+    // fixed literal — execCommand bakes whatever value it's given into the
+    // HTML as-is, and a literal here would silently stop matching either
+    // theme the moment the reader's isn't the one this was written in.
+    const clearTextColor = () => {
+        const current = bodyRef.current
+            ? getComputedStyle(bodyRef.current).color
+            : undefined;
+        run("foreColor", current);
+        setSwatchPanel(null);
+    };
+    const clearHighlight = () => {
+        run("hiliteColor", "transparent");
+        setSwatchPanel(null);
+    };
     // mousedown on the toolbar must not clear the selection
     const keepSel = (e) => e.preventDefault();
     /**
@@ -105,13 +473,62 @@ export function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlace
      * screen-reader user there is a state here that does not exist.
      */
     const tool = (key, label, icon, onClick, toggles = true) => (_jsx("button", { type: "button", className: "crisp-rte-tool", "aria-label": label, "aria-pressed": toggles ? !!active[key] : undefined, "data-active": active[key] ? "" : undefined, onMouseDown: keepSel, onClick: onClick, children: icon }));
+    /** Text/Highlight: a labelled tool that opens a swatch picker instead of
+     * toggling directly — `aria-expanded` says whether its panel is open, not
+     * whether a mark is applied (there's no single "on" state once 12 tones
+     * are all valid choices). */
+    const colorTool = (key, label, icon) => (_jsxs("button", { type: "button", className: "crisp-rte-tool crisp-rte-tool--labelled", "aria-label": label, "aria-expanded": swatchPanel === key, "aria-haspopup": "true", onMouseDown: keepSel, onClick: () => setSwatchPanel((cur) => (cur === key ? null : key)), children: [icon, _jsx("span", { children: label })] }));
     const ic = { size: 15, strokeWidth: 2 };
-    return (_jsxs("div", { className: richtextRecipe({ className }), ...rest, children: [_jsx("div", { ref: titleRef, className: "crisp-rte-title", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-label": titleLabel, "data-placeholder": titlePlaceholder, onInput: () => {
-                    syncEmpty(titleRef.current);
-                    emit();
-                } }), _jsx("div", { ref: bodyRef, className: "crisp-rte-body", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-multiline": "true", "aria-label": bodyLabel, "data-placeholder": placeholder, onInput: () => {
-                    syncEmpty(bodyRef.current);
-                    emit();
-                }, onMouseUp: updateBar, onKeyUp: updateBar }), bar && (_jsxs("div", { className: "crisp-rte-toolbar", style: { left: bar.x, top: bar.y }, children: [tool("bold", "Bold", _jsx(Bold, { ...ic }), () => run("bold")), tool("italic", "Italic", _jsx(Italic, { ...ic }), () => run("italic")), tool("underline", "Underline", _jsx(Underline, { ...ic }), () => run("underline")), tool("strikeThrough", "Strikethrough", _jsx(Strikethrough, { ...ic }), () => run("strikeThrough")), tool("link", "Link", _jsx(Link2, { ...ic }), addLink, false), _jsx("span", { className: "crisp-rte-tool-sep" }), tool("h1", "Heading 1", _jsx(Heading1, { ...ic }), () => toggleBlock("h1")), tool("h2", "Heading 2", _jsx(Heading2, { ...ic }), () => toggleBlock("h2")), tool("ul", "Bullet list", _jsx(List, { ...ic }), () => run("insertUnorderedList")), tool("ol", "Numbered list", _jsx(ListOrdered, { ...ic }), () => run("insertOrderedList")), tool("blockquote", "Quote", _jsx(Quote, { ...ic }), () => toggleBlock("blockquote"))] }))] }));
-}
+    const menuIc = { size: 16, strokeWidth: 2, "aria-hidden": true };
+    const BLOCK_MENU_ICONS = {
+        h1: _jsx(Heading1, { ...menuIc }),
+        h2: _jsx(Heading2, { ...menuIc }),
+        h3: _jsx(Heading3, { ...menuIc }),
+        body: _jsx(Pilcrow, { ...menuIc }),
+        ul: _jsx(List, { ...menuIc }),
+        ol: _jsx(ListOrdered, { ...menuIc }),
+        image: _jsx(ImageIcon, { ...menuIc }),
+    };
+    return (_jsxs("div", { className: richtextRecipe({ className }), ...rest, children: [_jsx("div", { ref: titleRef, className: "crisp-rte-title", contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", tabIndex: readOnly ? -1 : 0, "aria-label": titleLabel, "aria-readonly": readOnly || undefined, "data-placeholder": titlePlaceholder, onInput: readOnly
+                    ? undefined
+                    : () => {
+                        syncEmpty(titleRef.current);
+                        emit();
+                    } }), _jsx("div", { ref: bodyRef, className: "crisp-rte-body", contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", tabIndex: readOnly ? -1 : 0, "aria-multiline": "true", "aria-label": bodyLabel, "aria-readonly": readOnly || undefined, "data-placeholder": placeholder, onInput: readOnly
+                    ? undefined
+                    : () => {
+                        syncEmpty(bodyRef.current);
+                        updateSlashTrigger();
+                        updateMention();
+                        emit();
+                    }, onMouseUp: readOnly
+                    ? undefined
+                    : () => {
+                        updateBar();
+                        updateSlashTrigger();
+                        updateMention();
+                    }, onKeyUp: readOnly
+                    ? undefined
+                    : () => {
+                        updateBar();
+                        updateSlashTrigger();
+                        updateMention();
+                    }, onKeyDown: readOnly || blockMenu?.mode !== "slash"
+                    ? undefined
+                    : onBlockMenuKeyDown }), bar && (_jsxs("div", { className: "crisp-rte-toolbar", style: { left: bar.x, top: bar.y }, children: [_jsx("button", { type: "button", className: "crisp-rte-tool crisp-rte-tool--labelled", "aria-label": blockMenuLabel, "aria-expanded": blockMenu?.mode === "toolbar", "aria-haspopup": "true", onMouseDown: keepSel, onClick: toggleBlockMenuFromToolbar, children: _jsx("span", { children: blockMenuLabel }) }), _jsx("span", { className: "crisp-rte-tool-sep" }), colorTool("text", textColorLabel, _jsx(Baseline, { ...ic })), colorTool("highlight", highlightColorLabel, _jsx(Highlighter, { ...ic })), _jsx("span", { className: "crisp-rte-tool-sep" }), tool("link", "Link", _jsx(Link2, { ...ic }), addLink, false), _jsx("span", { className: "crisp-rte-tool-sep" }), tool("bold", "Bold", _jsx(Bold, { ...ic }), () => run("bold")), tool("italic", "Italic", _jsx(Italic, { ...ic }), () => run("italic")), tool("strikeThrough", "Strikethrough", _jsx(Strikethrough, { ...ic }), () => run("strikeThrough"))] })), blockMenu && (blockMenu.mode === "slash" || bar) && (_jsxs("div", { className: "crisp-rte-blockmenu", style: { left: blockMenu.anchor.x, top: blockMenu.anchor.y }, children: [blockMenu.mode === "toolbar" && (_jsxs("div", { className: "crisp-rte-blockmenu-search", children: [_jsx(Search, { size: 14, strokeWidth: 2, "aria-hidden": "true" }), _jsx("input", { ref: blockSearchRef, className: "crisp-rte-blockmenu-input", placeholder: blockMenuSearchPlaceholder, "aria-label": blockMenuSearchPlaceholder, value: blockMenu.query, onChange: (e) => setBlockMenu((cur) => cur && { ...cur, query: e.target.value, highlighted: 0 }), onKeyDown: onBlockMenuKeyDown })] })), _jsx("div", { role: "listbox", className: "crisp-rte-blockmenu-list", children: filteredBlockItems.length === 0 ? (_jsx("div", { className: "crisp-rte-blockmenu-empty", children: blockMenuEmptyLabel })) : (filteredBlockItems.map((item, i) => (_jsxs("button", { type: "button", role: "option", "aria-selected": i === blockMenu.highlighted, className: "crisp-rte-blockmenu-item", "data-highlighted": i === blockMenu.highlighted ? "" : undefined, onMouseEnter: () => setBlockMenu((cur) => cur && { ...cur, highlighted: i }), onMouseDown: keepSel, onClick: () => pickBlockItem(item), children: [BLOCK_MENU_ICONS[item.id], _jsxs("span", { className: "crisp-rte-blockmenu-item-text", children: [_jsx("span", { className: "crisp-rte-blockmenu-item-label", children: item.label }), _jsx("span", { className: "crisp-rte-blockmenu-item-desc", children: item.description })] })] }, item.id)))) })] })), bar && swatchPanel && (_jsxs("div", { className: "crisp-rte-swatchpanel", style: { left: bar.x, top: bar.y }, children: [RICHTEXT_COLOR_TONES.map((tone) => (_jsx("button", { type: "button", className: "crisp-rte-swatch", "aria-label": tone.label, style: {
+                            background: swatchPanel === "highlight" ? tone.highlight : tone.text,
+                        }, onMouseDown: keepSel, onClick: () => swatchPanel === "highlight"
+                            ? applyHighlight(tone)
+                            : applyTextColor(tone) }, tone.id))), _jsx("button", { type: "button", className: "crisp-rte-swatch crisp-rte-swatch--none", "aria-label": clearColorLabel, onMouseDown: keepSel, onClick: swatchPanel === "highlight" ? clearHighlight : clearTextColor })] })), mention &&
+                renderMentionPicker &&
+                (() => {
+                    const rendered = renderMentionPicker({
+                        query: mention.query,
+                        anchor: mention.anchor,
+                        select: insertMention,
+                        close: closeMention,
+                    });
+                    return rendered == null ? null : (_jsx("div", { ref: mentionPickerRef, style: { display: "contents" }, children: rendered }));
+                })()] }));
+});
 RichTextEditor.displayName = "RichTextEditor";

package/dist/esm/product/richtext/richtext.recipe.js

@@ -1,9 +1,30 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c } from "../../tokens/index.js";
-// A block rich-text editor — measured from a Notes editor: a large 32/36
-// title, a 14/20 prose body (headings, lists, quote, code, marks, links), and a
-// floating selection toolbar. Built on contentEditable so it stays dependency-
-// free. Placeholders show via [data-empty]::before.
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// A block rich-text editor — measured from Attio's own notes editor: a large
+// 32/36 title, a 14/20 prose body (h1/h2/h3, lists, an image block, marks),
+// and a floating selection toolbar. Built on contentEditable so it stays
+// dependency-free. Placeholders show via [data-empty]::before.
+//
+// The toolbar (#426) is Attio's OWN measured chrome, not the generic dark
+// pill this file used to ship: white, `border-radius: 10px` (a genuinely
+// measured value with no match in the radius scale — kept raw rather than
+// rounded to the nearest token, same reasoning as `elevation.field`'s two
+// raw layers), and `elevation.floating`'s exact shadow — which the live
+// toolbar's own 4-layer box-shadow matched value-for-value when re-checked.
+// Icon color reproduces the measured `rgba(0,0,0,0.63)` via the same
+// color-mix-over-fgPrimary idiom the placeholder rule above already uses,
+// rather than reaching for `fgMuted` (a different, unrelated gray).
+//
+// `.crisp-rte-blockmenu*` is the block-type menu ("Body ▾" and "/"), also
+// measured live: width 356px (raw — close to but not the same as the
+// popover family's 360px max-width, so kept as its own measured number,
+// not rounded to match), `elevation.floating` again (the identical shadow
+// the toolbar itself carries — both are the same floating tier), radius
+// `xl` (12px, an exact token match this time), rows at the measured 52px
+// with 6px 8px padding and a 16px icon. See richtext.tsx's own doc comment
+// for how this was measured (through the "Insert" button, not "Body ▾" —
+// "Body ▾" itself closed the whole note before a submenu could render, in
+// every attempt).
 const config = defineRecipe({
     name: "richtext",
     base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${c.font.sans}; color: ${c.fgPrimary};
@@ -25,13 +46,42 @@ const config = defineRecipe({
     & .crisp-rte-body code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: ${c.text.md}; padding: 1px ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }
     & .crisp-rte-body a { color: ${c.bgBrandSolid}; text-decoration: underline; text-underline-offset: 2px; }
     & .crisp-rte-body strong { font-weight: ${c.weight.semibold}; }
+    & .crisp-rte-body img { display: block; max-width: 100%; border-radius: ${c.radius.md}; }
+    /* Not measured against Attio (#428) — nothing in a read-only pass over
+       app.attio.com had a live @mention rendered to read computed styles
+       from, and typing one to create one is off-limits there. Reused
+       verbatim from the one measured "brand" tag/chip this repo already
+       has (RecordsTable/MultiSelect's [data-tone="brand"]) rather than
+       inventing a new color or shape. */
+    & .crisp-rte-mention { display: inline; border-radius: ${c.radius.chip}; padding: 0 ${c.space["1"]}; background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); font-weight: ${c.weight.medium}; cursor: default; }
 
-    & .crisp-rte-toolbar { position: fixed; z-index: 70; display: inline-flex; align-items: center; gap: 2px; padding: ${c.space["0.5"]}; border-radius: ${c.radius.md}; background: #20242c; box-shadow: 0 8px 28px -6px rgba(0,0,0,0.36), 0 2px 6px -2px rgba(0,0,0,0.24); transform: translate(-50%, -100%); opacity: 1; transition: opacity 0.1s ease; }
+    & .crisp-rte-toolbar { position: fixed; z-index: 70; display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; background: ${c.bgSurface}; box-shadow: ${e.floating}; transform: translate(-50%, -100%); opacity: 1; transition: opacity 0.1s ease; }
     & .crisp-rte-toolbar { @starting-style { opacity: 0; } }
-    & .crisp-rte-tool { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; margin: 0; border: none; border-radius: ${c.radius.sm}; background: none; color: rgba(255,255,255,0.86); font-family: inherit; cursor: pointer; transition: background-color .1s; }
-    & .crisp-rte-tool:hover { background: rgba(255,255,255,0.12); color: #fff; }
-    & .crisp-rte-tool[data-active] { color: ${c.bgBrandSolid}; }
-    & .crisp-rte-tool-sep { width: 1px; height: 16px; margin: 0 2px; background: rgba(255,255,255,0.16); }`,
+    & .crisp-rte-tool { display: inline-flex; align-items: center; justify-content: center; gap: ${c.space["1"]}; min-width: 30px; height: 28px; padding: 0 7px; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); font-family: inherit; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; cursor: pointer; transition: background-color .1s; }
+    & .crisp-rte-tool--labelled { width: auto; }
+    & .crisp-rte-tool:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+    & .crisp-rte-tool[data-active], & .crisp-rte-tool[aria-expanded="true"] { background: color-mix(in srgb, ${c.bgBrandSolid} 12%, transparent); color: ${c.bgBrandSolid}; }
+    & .crisp-rte-tool-sep { width: 1px; height: 16px; margin: 0 2px; background: ${c.borderSubtle}; }
+
+    & .crisp-rte-swatchpanel { position: fixed; z-index: 71; display: grid; grid-template-columns: repeat(4, 1fr); gap: ${c.space["1"]}; width: 168px; padding: ${c.space["1.5"]}; border-radius: ${c.radius.lg}; background: ${c.bgSurface}; box-shadow: ${e.floating}; transform: translate(-50%, ${c.space["1.5"]}); opacity: 1; transition: opacity 0.1s ease; }
+    & .crisp-rte-swatchpanel { @starting-style { opacity: 0; } }
+    & .crisp-rte-swatch { width: 28px; height: 28px; padding: 0; margin: 0; border: none; border-radius: 50%; background: none; font-family: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 10%, transparent); cursor: pointer; }
+    & .crisp-rte-swatch--none { background: ${c.bgSurface}; position: relative; }
+    & .crisp-rte-swatch--none::after { content: ""; position: absolute; inset: 6px; border-top: 1.5px solid color-mix(in srgb, ${c.fgPrimary} 40%, transparent); transform: rotate(-45deg); }
+
+    & .crisp-rte-blockmenu { position: fixed; z-index: 71; box-sizing: border-box; width: 356px; padding: 0; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: ${e.floating}; opacity: 1; transition: opacity 0.1s ease; }
+    & .crisp-rte-blockmenu { @starting-style { opacity: 0; } }
+    & .crisp-rte-blockmenu-search { display: flex; align-items: center; gap: ${c.space["1.5"]}; padding: ${c.space["2.5"]} ${c.space["3"]}; border-bottom: 1px solid ${c.borderSubtle}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .crisp-rte-blockmenu-input { flex: 1; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; height: 20px; color: ${c.fgPrimary}; }
+    & .crisp-rte-blockmenu-input::placeholder { color: color-mix(in srgb, ${c.fgPrimary} 40%, transparent); }
+    & .crisp-rte-blockmenu-list { display: flex; flex-direction: column; padding: ${c.space["1.5"]}; gap: ${c.space.px}; }
+    & .crisp-rte-blockmenu-item { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: 52px; padding: ${c.space["1.5"]} ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; text-align: start; cursor: pointer; }
+    & .crisp-rte-blockmenu-item svg { flex-shrink: 0; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .crisp-rte-blockmenu-item[data-highlighted] { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }
+    & .crisp-rte-blockmenu-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+    & .crisp-rte-blockmenu-item-label { font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-rte-blockmenu-item-desc { font-size: ${c.text.sm}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
+    & .crisp-rte-blockmenu-empty { padding: ${c.space["4"]} ${c.space["3"]}; text-align: center; font-size: ${c.text.md}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],