@crisp-ui-kit/crisp 0.51.0 → 0.52.0

package/dist/types/product/richtext/richtext.d.ts

@@ -1,8 +1,49 @@
 import * as React from "react";
+import { type MentionAnchor } from "../../core";
 export type RichTextValue = {
     title: string;
     html: string;
 };
+/**
+ * A named text-color / highlight-color pair — the 12 tones Attio's own note
+ * editor offers as inline marks (measured live, read-only, 2026-09-24;
+ * re-verified against the same note before shipping — see HANDOFF). Exported
+ * so a consumer wanting the same palette elsewhere (a tag picker, a legend)
+ * doesn't have to re-type it.
+ */
+export type RichTextColorTone = {
+    id: string;
+    label: string;
+    /** Value passed to `execCommand("foreColor", …)`. */
+    text: string;
+    /** Value passed to `execCommand("hiliteColor", …)`. */
+    highlight: string;
+};
+export declare const RICHTEXT_COLOR_TONES: RichTextColorTone[];
+/** A reference to insert as an atomic mention chip (#428). */
+export type RichTextMention = {
+    id: string;
+    label: string;
+};
+/** State handed to `renderMentionPicker` each time it's asked to show. */
+export type RichTextMentionTriggerState = {
+    /** Text typed after the trigger character so far. */
+    query: string;
+    /** Where to anchor the picker, in viewport coordinates. */
+    anchor: MentionAnchor;
+    /** Insert `mention` as a chip in place of the "@query" text, and dismiss. */
+    select: (mention: RichTextMention) => void;
+    /** Dismiss without inserting anything — e.g. on Escape or an outside click. */
+    close: () => void;
+};
+export type RichTextEditorHandle = {
+    /** Insert `mention` as an atomic, non-editable chip — in place of the
+     * active "@query" trigger text when one is open, otherwise at the current
+     * caret (or the end of the body, with no caret in it at all). */
+    insertMention: (mention: RichTextMention) => void;
+    /** Focus the body editor. */
+    focus: () => void;
+};
 export type RichTextEditorProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onChange" | "placeholder"> & {
     /** Accessible name for the title field. */
     titleLabel?: string;
@@ -10,21 +51,141 @@ export type RichTextEditorProps = Omit<React.ComponentPropsWithoutRef<"div">, "c
     bodyLabel?: string;
     /** Message shown when asking for a link URL. */
     linkPromptLabel?: string;
+    /** Message shown when asking for an image URL. Attio uploads a file
+     * through its own storage; crisp is dependency-free, so this follows the
+     * same `window.prompt` pattern as `linkPromptLabel` rather than inventing
+     * an upload pipeline. */
+    imagePromptLabel?: string;
+    /** The text-color picker's trigger button — its visible label and
+     * accessible name (default "Text", matching Attio's own copy). */
+    textColorLabel?: string;
+    /** The highlight-color picker's trigger button (default "Highlight"). */
+    highlightColorLabel?: string;
+    /** aria-label for each picker's "clear" swatch. */
+    clearColorLabel?: string;
+    /** The block-type toolbar button — visible label and accessible name
+     * (default "Body", matching Attio's own copy for the current-block
+     * indicator, even though the seven choices behind it include far more
+     * than "Body"). */
+    blockMenuLabel?: string;
+    /** Placeholder for the block menu's search field, shown when it's opened
+     * from the toolbar (default "Search items…", matching Attio's own copy). */
+    blockMenuSearchPlaceholder?: string;
+    /** Shown when the search field matches nothing. */
+    blockMenuEmptyLabel?: string;
+    /** Character that opens the mention picker. Default `"@"`. */
+    mentionTrigger?: string;
+    /** Renders a consumer-supplied picker anchored at the caret when
+     * `mentionTrigger` is typed (#372, #428). crisp detects the trigger,
+     * measures where it sits, and inserts whatever is picked — the picker
+     * itself (avatars, grouping, a "create new" row) is the caller's, since
+     * that varies too much by app to have one measured shape. */
+    renderMentionPicker?: (state: RichTextMentionTriggerState) => React.ReactNode;
     defaultTitle?: string;
     /** Initial body HTML. */
     defaultHtml?: string;
     titlePlaceholder?: string;
     placeholder?: string;
     onChange?: (value: RichTextValue) => void;
+    /** Renders both fields as read-only — Attio's own note preview (the
+     * sidebar list, a record's Notes tab) is the SAME editor with
+     * `contentEditable` toggled off, not a separate stripped-text summary, so
+     * headings/lists/marks all survive into it. No toolbar renders in this
+     * mode. */
+    readOnly?: boolean;
     className?: string;
 };
 /**
- * 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 declare function RichTextEditor({ defaultTitle, defaultHtml, titlePlaceholder, placeholder, onChange, className, titleLabel, bodyLabel, linkPromptLabel, ...rest }: RichTextEditorProps): React.JSX.Element;
-export declare namespace RichTextEditor {
-    var displayName: string;
-}
+export declare const RichTextEditor: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "onChange" | "placeholder"> & {
+    /** Accessible name for the title field. */
+    titleLabel?: string;
+    /** Accessible name for the body editor. */
+    bodyLabel?: string;
+    /** Message shown when asking for a link URL. */
+    linkPromptLabel?: string;
+    /** Message shown when asking for an image URL. Attio uploads a file
+     * through its own storage; crisp is dependency-free, so this follows the
+     * same `window.prompt` pattern as `linkPromptLabel` rather than inventing
+     * an upload pipeline. */
+    imagePromptLabel?: string;
+    /** The text-color picker's trigger button — its visible label and
+     * accessible name (default "Text", matching Attio's own copy). */
+    textColorLabel?: string;
+    /** The highlight-color picker's trigger button (default "Highlight"). */
+    highlightColorLabel?: string;
+    /** aria-label for each picker's "clear" swatch. */
+    clearColorLabel?: string;
+    /** The block-type toolbar button — visible label and accessible name
+     * (default "Body", matching Attio's own copy for the current-block
+     * indicator, even though the seven choices behind it include far more
+     * than "Body"). */
+    blockMenuLabel?: string;
+    /** Placeholder for the block menu's search field, shown when it's opened
+     * from the toolbar (default "Search items…", matching Attio's own copy). */
+    blockMenuSearchPlaceholder?: string;
+    /** Shown when the search field matches nothing. */
+    blockMenuEmptyLabel?: string;
+    /** Character that opens the mention picker. Default `"@"`. */
+    mentionTrigger?: string;
+    /** Renders a consumer-supplied picker anchored at the caret when
+     * `mentionTrigger` is typed (#372, #428). crisp detects the trigger,
+     * measures where it sits, and inserts whatever is picked — the picker
+     * itself (avatars, grouping, a "create new" row) is the caller's, since
+     * that varies too much by app to have one measured shape. */
+    renderMentionPicker?: (state: RichTextMentionTriggerState) => React.ReactNode;
+    defaultTitle?: string;
+    /** Initial body HTML. */
+    defaultHtml?: string;
+    titlePlaceholder?: string;
+    placeholder?: string;
+    onChange?: (value: RichTextValue) => void;
+    /** Renders both fields as read-only — Attio's own note preview (the
+     * sidebar list, a record's Notes tab) is the SAME editor with
+     * `contentEditable` toggled off, not a separate stripped-text summary, so
+     * headings/lists/marks all survive into it. No toolbar renders in this
+     * mode. */
+    readOnly?: boolean;
+    className?: string;
+} & React.RefAttributes<RichTextEditorHandle>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.51.0",
+  "version": "0.52.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",