@tightknitai/block-kitchen 0.10.17 → 0.10.19

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-Cxh1yNzW.cjs';
-export { A as AlertBlock, e as AlertLevel, f as BlockKitchenBaseProps, g as BlockKitchenComposeOnlyProps, h as BlockKitchenSendProps, i as BrandPreset, j as BrandTheme, k as BrandTokens, l as BuilderBlock, m as CardBlock, n as CarouselBlock, o as CartesianChart, p as Chart, q as ChartAxisConfig, r as ChartDataPoint, s as ChartSeries, t as ChartType, u as ContainerBlock, v as ContainerChildBlock, w as ContextActionsBlock, x as ContextActionsElement, y as CustomEmoji, D as DataVisualizationBlock, E as EditableVia, F as FeedbackButtonSubobject, z as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, G as IconButtonIcon, J as InputBlock, L as LoadMessageInput, K as LoadResult, M as LoadedMessage, N as LoadingConfig, O as MarkdownBlock, Q as PaletteMode, R as PaletteSection, U as PaletteVariant, V as PieChart, W as PieChartSegment, X as PlanBlock, Y as PreviewHooks, Z as PrimaryActionConfig, _ as PrimaryActionContext, $ as RecentMessage, a0 as SendResult, a1 as SupportedBlockType, a2 as SupportedHeaderBlock, a3 as TableBlock, a4 as TableCell, a5 as TableColumnSetting, a6 as TaskCardBlock, a7 as TaskCardStatus, a8 as UpdatePayload, a9 as UpdateResult, aa as UrlSourceElement, ab as ValidationSummary, ac as VideoBlock, ad as defaultPalette, ae as extraAlertVariant, af as legacyInputVariants } from './palette-Cxh1yNzW.cjs';
+import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-DNUiqoQK.cjs';
+export { A as AlertBlock, e as AlertLevel, f as BlockKitchenBaseProps, g as BlockKitchenComposeOnlyProps, h as BlockKitchenSendProps, i as BrandPreset, j as BrandTheme, k as BrandTokens, l as BuilderBlock, m as CardBlock, n as CarouselBlock, o as CartesianChart, p as Chart, q as ChartAxisConfig, r as ChartDataPoint, s as ChartSeries, t as ChartType, u as ContainerBlock, v as ContainerChildBlock, w as ContextActionsBlock, x as ContextActionsElement, y as CustomEmoji, D as DataVisualizationBlock, E as EditableVia, F as FeedbackButtonSubobject, z as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, G as IconButtonIcon, J as InputBlock, L as LoadMessageInput, K as LoadResult, M as LoadedMessage, N as LoadingConfig, O as MarkdownBlock, Q as MentionUser, R as MentionsConfig, U as PaletteMode, V as PaletteSection, W as PaletteVariant, X as PieChart, Y as PieChartSegment, Z as PlanBlock, _ as PreviewHooks, $ as PrimaryActionConfig, a0 as PrimaryActionContext, a1 as RecentMessage, a2 as SendResult, a3 as SupportedBlockType, a4 as SupportedHeaderBlock, a5 as TableBlock, a6 as TableCell, a7 as TableColumnSetting, a8 as TaskCardBlock, a9 as TaskCardStatus, aa as UpdatePayload, ab as UpdateResult, ac as UrlSourceElement, ad as ValidationSummary, ae as VideoBlock, af as defaultPalette, ag as extraAlertVariant, ah as legacyInputVariants } from './palette-DNUiqoQK.cjs';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.cjs';
 import 'slack-web-api-client';
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-Cxh1yNzW.js';
-export { A as AlertBlock, e as AlertLevel, f as BlockKitchenBaseProps, g as BlockKitchenComposeOnlyProps, h as BlockKitchenSendProps, i as BrandPreset, j as BrandTheme, k as BrandTokens, l as BuilderBlock, m as CardBlock, n as CarouselBlock, o as CartesianChart, p as Chart, q as ChartAxisConfig, r as ChartDataPoint, s as ChartSeries, t as ChartType, u as ContainerBlock, v as ContainerChildBlock, w as ContextActionsBlock, x as ContextActionsElement, y as CustomEmoji, D as DataVisualizationBlock, E as EditableVia, F as FeedbackButtonSubobject, z as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, G as IconButtonIcon, J as InputBlock, L as LoadMessageInput, K as LoadResult, M as LoadedMessage, N as LoadingConfig, O as MarkdownBlock, Q as PaletteMode, R as PaletteSection, U as PaletteVariant, V as PieChart, W as PieChartSegment, X as PlanBlock, Y as PreviewHooks, Z as PrimaryActionConfig, _ as PrimaryActionContext, $ as RecentMessage, a0 as SendResult, a1 as SupportedBlockType, a2 as SupportedHeaderBlock, a3 as TableBlock, a4 as TableCell, a5 as TableColumnSetting, a6 as TaskCardBlock, a7 as TaskCardStatus, a8 as UpdatePayload, a9 as UpdateResult, aa as UrlSourceElement, ab as ValidationSummary, ac as VideoBlock, ad as defaultPalette, ae as extraAlertVariant, af as legacyInputVariants } from './palette-Cxh1yNzW.js';
+import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-DNUiqoQK.js';
+export { A as AlertBlock, e as AlertLevel, f as BlockKitchenBaseProps, g as BlockKitchenComposeOnlyProps, h as BlockKitchenSendProps, i as BrandPreset, j as BrandTheme, k as BrandTokens, l as BuilderBlock, m as CardBlock, n as CarouselBlock, o as CartesianChart, p as Chart, q as ChartAxisConfig, r as ChartDataPoint, s as ChartSeries, t as ChartType, u as ContainerBlock, v as ContainerChildBlock, w as ContextActionsBlock, x as ContextActionsElement, y as CustomEmoji, D as DataVisualizationBlock, E as EditableVia, F as FeedbackButtonSubobject, z as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, G as IconButtonIcon, J as InputBlock, L as LoadMessageInput, K as LoadResult, M as LoadedMessage, N as LoadingConfig, O as MarkdownBlock, Q as MentionUser, R as MentionsConfig, U as PaletteMode, V as PaletteSection, W as PaletteVariant, X as PieChart, Y as PieChartSegment, Z as PlanBlock, _ as PreviewHooks, $ as PrimaryActionConfig, a0 as PrimaryActionContext, a1 as RecentMessage, a2 as SendResult, a3 as SupportedBlockType, a4 as SupportedHeaderBlock, a5 as TableBlock, a6 as TableCell, a7 as TableColumnSetting, a8 as TaskCardBlock, a9 as TaskCardStatus, aa as UpdatePayload, ab as UpdateResult, ac as UrlSourceElement, ad as ValidationSummary, ae as VideoBlock, af as defaultPalette, ag as extraAlertVariant, ah as legacyInputVariants } from './palette-DNUiqoQK.js';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.js';
 import 'slack-web-api-client';
 

package/dist/index.js

@@ -1,8 +1,8 @@
 import { useSensors, useSensor, PointerSensor, TouchSensor, KeyboardSensor, pointerWithin, closestCenter, DndContext, DragOverlay, useDroppable, useDraggable } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
-import { X, Circle, Sparkles, FileText, AlignLeft, MousePointerClick, TextCursorInput, LayoutTemplate, Bell, Pilcrow, Image, Video, GalleryHorizontal, Table, ChartColumnBig, Container, Loader2, ExternalLink, AlertTriangle, ChevronRight, ChevronLeft, GripVertical, ChevronsUpDown, Check, Sun, Moon, MessageSquare, AppWindow, Home, Plus, ChevronDown, BookOpen, Undo2, Redo2, Trash2, Code2, Pencil, Send, Search, Copy, Info, CheckCircle2, LayoutGrid, ArrowUp, ArrowDown, Type, Bold, Italic, Strikethrough, Underline, Code, List, ListOrdered, Quote, Smile, Link as Link$1 } from 'lucide-react';
+import { X, Circle, Sparkles, FileText, AlignLeft, MousePointerClick, TextCursorInput, LayoutTemplate, Bell, Pilcrow, Image, Video, GalleryHorizontal, Table, ChartColumnBig, Container, Loader2, ExternalLink, AlertTriangle, ChevronRight, ChevronLeft, GripVertical, ChevronsUpDown, Check, Sun, Moon, MessageSquare, AppWindow, Home, Plus, ChevronDown, BookOpen, Undo2, Redo2, Trash2, Code2, Pencil, Send, Search, Copy, Info, CheckCircle2, LayoutGrid, ArrowUp, ArrowDown, Type, Bold, Italic, Strikethrough, Underline, Code, AtSign, List, ListOrdered, Quote, Smile, Link as Link$1 } from 'lucide-react';
 import * as React from 'react';
-import { createContext, useState, useRef, useEffect, useCallback, useMemo, useId, useContext } from 'react';
+import { createContext, useContext, useState, useRef, useEffect, useCallback, useMemo, useId } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -19,8 +19,9 @@ import { Message } from 'slack-blocks-to-jsx';
 import { CSS } from '@dnd-kit/utilities';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import Link from '@tiptap/extension-link';
-import { Node as Node$1, ReactNodeViewRenderer, mergeAttributes, NodeViewWrapper, useEditor, EditorContent } from '@tiptap/react';
+import { Node as Node$1, ReactNodeViewRenderer, mergeAttributes, Extension, NodeViewWrapper, useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
+import { Suggestion, exitSuggestion } from '@tiptap/suggestion';
 
 // src/components/block-kitchen.tsx
 
@@ -1833,6 +1834,13 @@ function CustomEmojiProvider({ customEmojis, children }) {
 function useCustomEmojis() {
   return useContext(CustomEmojiContext);
 }
+var MentionsContext = createContext(null);
+function MentionsProvider({ mentions, children }) {
+  return /* @__PURE__ */ jsx(MentionsContext.Provider, { value: mentions ?? null, children });
+}
+function useMentions() {
+  return useContext(MentionsContext);
+}
 
 // src/lib/error-grouping.ts
 function toValidatorSurface(surface) {
@@ -3333,12 +3341,27 @@ function ChannelCombobox({
   ] });
 }
 var EMBED_SELECTOR = "iframe[src], embed[src], object[data], source[src], video[src], audio[src], track[src]";
+function useLatestHooks(hooks) {
+  const latest = useRef(hooks);
+  latest.current = hooks;
+  const [live] = useState(
+    () => new Proxy(
+      {},
+      {
+        get: (_target, key) => typeof key === "string" ? latest.current?.[key] : void 0,
+        has: (_target, key) => typeof key === "string" && latest.current !== void 0 && key in latest.current
+      }
+    )
+  );
+  return live;
+}
 function SlackBlockPreview({
   block,
   hooks,
   theme = "light"
 }) {
   const rootRef = useRef(null);
+  const liveHooks = useLatestHooks(hooks);
   const safeBlock = useMemo(() => sanitizeBlock(block), [block]);
   useEffect(() => {
     const root = rootRef.current;
@@ -3393,7 +3416,7 @@ function SlackBlockPreview({
         withoutWrapper: true,
         theme,
         blocks: [safeBlock],
-        hooks
+        hooks: liveHooks
       }
     ) })
   );
@@ -5166,14 +5189,16 @@ function makeEmojiImportResolver(customByName, index = getEmojiIndex()) {
 }
 
 // src/lib/rich-text-tiptap.ts
+var USER_MENTION_NODE = "userMention";
 var SUPPORTED_BLOCK_KINDS = /* @__PURE__ */ new Set([
   "rich_text_section",
   "rich_text_list",
   "rich_text_quote",
   "rich_text_preformatted"
 ]);
-var SUPPORTED_INLINE_KINDS = /* @__PURE__ */ new Set(["text", "link", "emoji"]);
+var SUPPORTED_INLINE_KINDS = /* @__PURE__ */ new Set(["text", "link", "emoji", "user"]);
 var SUPPORTED_TEXT_STYLE_KEYS = /* @__PURE__ */ new Set(["bold", "italic", "strike", "underline", "code"]);
+var SUPPORTED_USER_STYLE_KEYS = /* @__PURE__ */ new Set(["bold", "italic", "strike", "underline"]);
 var MAX_LIST_INDENT = 8;
 function detectLossy(block) {
   const out = [];
@@ -5196,6 +5221,17 @@ function detectLossy(block) {
     if ("border" in el && (el.border ?? 0) > 0) {
       out.push({ label: "Quote/preformatted border", where });
     }
+    if (el.type === "rich_text_preformatted") {
+      el.elements?.forEach((inline, i) => {
+        const sub = `${where}.elements[${i}]`;
+        if (inline.type !== "text") {
+          out.push({ label: `In code block: ${inline.type}`, where: sub });
+        } else if (Object.values(inline.style ?? {}).some(Boolean)) {
+          out.push({ label: "Styled text in code block", where: sub });
+        }
+      });
+      return;
+    }
     scanInlines(el.elements ?? [], where, out);
   });
   return out;
@@ -5217,6 +5253,13 @@ function scanInlines(inlines, where, out) {
         }
       }
     }
+    if (inline.type === "user") {
+      for (const k of Object.keys(inline.style ?? {})) {
+        if (!SUPPORTED_USER_STYLE_KEYS.has(k)) {
+          out.push({ label: `Mention style: ${k}`, where: sub });
+        }
+      }
+    }
   });
 }
 var defaultEmojiResolver = (el) => ({
@@ -5328,6 +5371,17 @@ function inlinesToPM(inlines, resolveEmoji) {
         continue;
       }
       out.push({ type: "emoji", attrs });
+    } else if (inline.type === "user") {
+      const user = inline;
+      if (!user.user_id) {
+        continue;
+      }
+      const node = { type: USER_MENTION_NODE, attrs: { userId: user.user_id, name: null } };
+      const marks = styleToMarks(user.style);
+      if (marks.length > 0) {
+        node.marks = marks;
+      }
+      out.push(node);
     } else if (inline.type === "link") {
       const link = inline;
       const text = link.text || link.url || "";
@@ -5461,6 +5515,19 @@ function proseMirrorInlinesToRichTextElements(nodes) {
       out.push(emoji);
       continue;
     }
+    if (node.type === USER_MENTION_NODE) {
+      const userId = String(node.attrs?.userId ?? "");
+      if (!userId) {
+        continue;
+      }
+      const user = { type: "user", user_id: userId };
+      const style2 = userStyle(node.marks ?? []);
+      if (Object.keys(style2).length > 0) {
+        user.style = style2;
+      }
+      out.push(user);
+      continue;
+    }
     if (node.type === "hardBreak") {
       out.push({ type: "text", text: "\n" });
       continue;
@@ -5515,6 +5582,15 @@ function marksToStyle(marks) {
   }
   return style;
 }
+function userStyle(marks) {
+  const style = {};
+  for (const [key, value] of Object.entries(marksToStyle(marks))) {
+    if (SUPPORTED_USER_STYLE_KEYS.has(key)) {
+      style[key] = value;
+    }
+  }
+  return style;
+}
 function mergeAdjacentTextRuns(inlines) {
   const out = [];
   for (const inline of inlines) {
@@ -5581,6 +5657,91 @@ var EmojiNode = Node$1.create({
     return ReactNodeViewRenderer(EmojiNodeView);
   }
 });
+var MENTION_SEARCH_DEBOUNCE_MS = 200;
+function insertUserMention(editor, range, user) {
+  const to = editor.state.doc.textBetween(range.to, Math.min(range.to + 1, editor.state.doc.content.size)) === " " ? range.to + 1 : range.to;
+  editor.chain().focus().insertContentAt({ from: range.from, to }, [
+    { type: USER_MENTION_NODE, attrs: { userId: user.id, name: user.name } },
+    { type: "text", text: " " }
+  ]).run();
+}
+function insertMentionTrigger(editor) {
+  const { from } = editor.state.selection;
+  const before = from > 1 ? editor.state.doc.textBetween(from - 1, from, void 0, "\uFFFC") : "";
+  const needsSpace = before !== "" && !/\s/.test(before);
+  editor.chain().focus().insertContent(needsSpace ? " @" : "@").run();
+}
+function dismissMentionSuggestion(editor) {
+  exitSuggestion(editor.view);
+}
+var MentionSuggestion = Extension.create({
+  name: "userMentionSuggestion",
+  addOptions() {
+    return {
+      isEnabled: () => false,
+      search: async () => [],
+      render: () => ({})
+    };
+  },
+  addProseMirrorPlugins() {
+    const { isEnabled, search, render } = this.options;
+    return [
+      Suggestion({
+        editor: this.editor,
+        char: "@",
+        debounce: MENTION_SEARCH_DEBOUNCE_MS,
+        allow: () => isEnabled(),
+        items: ({ query, signal }) => search(query, signal),
+        command: ({ editor, range, props }) => insertUserMention(editor, range, props),
+        render
+      })
+    ];
+  }
+});
+function userMentionLabel(attrs, getUserName) {
+  return getUserName?.(attrs.userId) ?? attrs.name ?? attrs.userId;
+}
+function UserMentionNodeView({ node }) {
+  const mentions = useMentions();
+  const attrs = node.attrs;
+  return /* @__PURE__ */ jsxs(NodeViewWrapper, { as: "span", className: "bk-user-mention", "data-user-mention": attrs.userId, children: [
+    "@",
+    userMentionLabel(attrs, mentions?.getUserName)
+  ] });
+}
+var UserMentionNode = Node$1.create({
+  name: USER_MENTION_NODE,
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  addAttributes() {
+    return {
+      userId: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("data-user-mention") ?? "",
+        renderHTML: (attributes) => ({ "data-user-mention": attributes.userId })
+      },
+      name: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-user-name"),
+        renderHTML: (attributes) => attributes.name ? { "data-user-name": attributes.name } : {}
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-user-mention]" }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    return ["span", mergeAttributes(HTMLAttributes), `@${userMentionLabel(node.attrs)}`];
+  },
+  renderText({ node }) {
+    return `@${userMentionLabel(node.attrs)}`;
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(UserMentionNodeView);
+  }
+});
 
 // src/lib/emoji-recents.ts
 var STORAGE_KEY = "bk:emoji-recents";
@@ -5862,6 +6023,133 @@ function EmojiPickerButton({
     ) })
   ] });
 }
+function nextMentionPickerState(props, prev) {
+  return {
+    items: props.loading && prev ? prev.items : props.items,
+    loading: props.loading,
+    clientRect: props.clientRect ?? null,
+    command: props.command
+  };
+}
+function MentionPicker({
+  editor,
+  state,
+  keyHandlerRef,
+  onDismiss
+}) {
+  const { items, loading, clientRect, command } = state;
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [shownItems, setShownItems] = useState(items);
+  if (shownItems !== items) {
+    setShownItems(items);
+    setActiveIndex(0);
+  }
+  const listRef = useRef(null);
+  useEffect(() => {
+    keyHandlerRef.current = (event) => {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        if (items.length > 0) {
+          const step = event.key === "ArrowDown" ? 1 : -1;
+          setActiveIndex((index) => (index + step + items.length) % items.length);
+        }
+        return true;
+      }
+      if (event.key === "Enter" || event.key === "Tab") {
+        const user = items[activeIndex];
+        if (!user) {
+          return false;
+        }
+        command(user);
+        return true;
+      }
+      return false;
+    };
+    return () => {
+      keyHandlerRef.current = () => false;
+    };
+  }, [keyHandlerRef, items, activeIndex, command]);
+  useEffect(() => {
+    const row = listRef.current?.querySelectorAll('[role="option"]')[activeIndex];
+    row?.scrollIntoView?.({ block: "nearest" });
+  }, [activeIndex]);
+  const anchorRef = useMemo(
+    () => ({
+      current: {
+        getBoundingClientRect: () => clientRect?.() ?? editor.view.dom.getBoundingClientRect()
+      }
+    }),
+    [clientRect, editor]
+  );
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) {
+          onDismiss();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(PopoverAnchor, { virtualRef: anchorRef }),
+        /* @__PURE__ */ jsx(
+          PopoverContent,
+          {
+            side: "bottom",
+            align: "start",
+            sideOffset: 4,
+            className: "max-h-[min(15rem,var(--radix-popover-content-available-height))] w-64 p-1",
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            onCloseAutoFocus: (e) => e.preventDefault(),
+            onEscapeKeyDown: (e) => e.stopPropagation(),
+            onInteractOutside: (e) => {
+              if (e.target instanceof Node && editor.view.dom.contains(e.target)) {
+                e.preventDefault();
+              }
+            },
+            children: /* @__PURE__ */ jsx("div", { ref: listRef, role: "listbox", "aria-label": "People to mention", children: items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-2 py-3 text-center text-xs text-muted-foreground", children: loading ? "Searching\u2026" : "No people match that search." }) : items.map((user, index) => (
+              // biome-ignore lint/a11y/useFocusableInteractive: focus stays in the editor, which drives this list through the suggestion plugin's key handling.
+              // biome-ignore lint/a11y/useKeyWithClickEvents: the keyboard path is the editor's, forwarded via keyHandlerRef.
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "option",
+                  "aria-selected": index === activeIndex,
+                  onPointerDown: (e) => e.preventDefault(),
+                  onClick: () => command(user),
+                  onMouseMove: () => setActiveIndex(index),
+                  className: cn(
+                    "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground",
+                    index === activeIndex && "bg-accent"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(MentionAvatar, { user }),
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: user.name })
+                  ]
+                },
+                user.id
+              )
+            )) })
+          }
+        )
+      ]
+    }
+  );
+}
+function MentionAvatar({ user }) {
+  const [failed, setFailed] = useState(false);
+  const src = user.avatarUrl && isSafeImageSrc(user.avatarUrl) ? user.avatarUrl : null;
+  if (src && !failed) {
+    return /* @__PURE__ */ jsx("img", { src, alt: "", className: "h-5 w-5 shrink-0 rounded object-cover", onError: () => setFailed(true) });
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "flex h-5 w-5 shrink-0 items-center justify-center rounded bg-muted text-[10px] font-medium text-muted-foreground",
+      children: Array.from(user.name.trim())[0]?.toUpperCase() ?? "@"
+    }
+  );
+}
 var BLOCK_ELEMENT_LABEL = {
   rich_text_section: "Section",
   rich_text_list: "List",
@@ -6437,7 +6725,7 @@ function LossyBanner({ reasons }) {
   ] });
 }
 var RICH_TEXT_INPUT_RULE_ALLOWLIST = ["bold", "italic", "strike", "code"];
-function buildRichTextExtensions() {
+function buildRichTextExtensions(mentionSuggestion) {
   return [
     StarterKit.configure({
       heading: false,
@@ -6470,7 +6758,11 @@ function buildRichTextExtensions() {
       // via the link button.
       shouldAutoLink: hasExplicitSafeScheme,
       HTMLAttributes: { rel: "noreferrer noopener", target: "_blank" }
-    })
+    }),
+    // Always registered, so mentions already in the content round-trip with
+    // or without the picker.
+    UserMentionNode,
+    ...mentionSuggestion ? [MentionSuggestion.configure(mentionSuggestion)] : []
   ];
 }
 function RichTextWysiwygEditor({ block, onChange }) {
@@ -6497,8 +6789,25 @@ function RichTextWysiwygEditor({ block, onChange }) {
     },
     [onChange]
   );
+  const mentions = useMentions();
+  const mentionsEnabled = mentions !== null;
+  const mentionsRef = useRef(mentions);
+  useEffect(() => {
+    mentionsRef.current = mentions;
+  }, [mentions]);
+  const [mentionPicker, setMentionPicker] = useState(null);
+  const mentionKeyHandlerRef = useRef(() => false);
   const editor = useEditor({
-    extensions: buildRichTextExtensions(),
+    extensions: buildRichTextExtensions({
+      isEnabled: () => mentionsRef.current !== null,
+      search: async (query, signal) => await mentionsRef.current?.searchUsers(query, { signal }) ?? [],
+      render: () => ({
+        onStart: (props) => setMentionPicker((prev) => nextMentionPickerState(props, prev)),
+        onUpdate: (props) => setMentionPicker((prev) => nextMentionPickerState(props, prev)),
+        onExit: () => setMentionPicker(null),
+        onKeyDown: ({ event }) => mentionKeyHandlerRef.current(event)
+      })
+    }),
     enableInputRules: RICH_TEXT_INPUT_RULE_ALLOWLIST,
     content: richTextToProseMirror(block, resolveEmoji),
     editorProps: {
@@ -6508,10 +6817,16 @@ function RichTextWysiwygEditor({ block, onChange }) {
     },
     onUpdate: ({ editor: ed }) => handleUpdate(ed)
   });
+  const seenBlockRef = useRef(block);
   useEffect(() => {
     if (!editor) {
       return;
     }
+    const blockChanged = seenBlockRef.current !== block;
+    seenBlockRef.current = block;
+    if (!blockChanged && lastEmittedRef.current) {
+      return;
+    }
     if (lastEmittedRef.current && JSON.stringify(lastEmittedRef.current) === JSON.stringify(block)) {
       return;
     }
@@ -6523,11 +6838,26 @@ function RichTextWysiwygEditor({ block, onChange }) {
     return /* @__PURE__ */ jsx("div", { className: "min-h-[120px] rounded-md border border-input bg-background" });
   }
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsx(Toolbar, { editor }),
-    /* @__PURE__ */ jsx(EditorContent, { editor })
+    /* @__PURE__ */ jsx(
+      Toolbar,
+      {
+        editor,
+        mention: mentionsEnabled ? { active: mentionPicker !== null, insert: () => insertMentionTrigger(editor) } : null
+      }
+    ),
+    /* @__PURE__ */ jsx(EditorContent, { editor }),
+    mentionPicker && /* @__PURE__ */ jsx(
+      MentionPicker,
+      {
+        editor,
+        state: mentionPicker,
+        keyHandlerRef: mentionKeyHandlerRef,
+        onDismiss: () => dismissMentionSuggestion(editor)
+      }
+    )
   ] });
 }
-function Toolbar({ editor }) {
+function Toolbar({ editor, mention }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-0.5 rounded-md border bg-muted/30 p-1", children: [
     /* @__PURE__ */ jsx(
       ToolbarButton,
@@ -6586,6 +6916,7 @@ function Toolbar({ editor }) {
         }).run()
       }
     ),
+    mention && /* @__PURE__ */ jsx(ToolbarButton, { label: "Mention", active: mention.active, onClick: mention.insert, Icon: AtSign }),
     /* @__PURE__ */ jsx(Divider, {}),
     /* @__PURE__ */ jsx(
       ToolbarButton,
@@ -10922,6 +11253,7 @@ function BlockKitchen(props) {
     onValidationChange,
     previewHooks,
     customEmojis,
+    mentions,
     loadChannels,
     loadSendAsUserStatus,
     onSend,
@@ -11282,7 +11614,7 @@ function BlockKitchen(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(MentionsProvider, { mentions, children: /* @__PURE__ */ jsx(
                   Surface,
                   {
                     blocks,
@@ -11302,7 +11634,7 @@ function BlockKitchen(props) {
                     isPaletteDrag: activePaletteVariant !== null,
                     onOpenPalette: () => setPaletteOpen(true)
                   }
-                )
+                ) })
               ] })
             ]
           }