@tightknitai/block-kitchen 0.10.17 → 0.10.19

package/README.md

@@ -139,6 +139,7 @@ Given no height to work with — a plain `<div>` in ordinary document flow — i
 | `confirmUpdateLabel` | `string` | no | Label for the update dialog's final confirm button. Defaults to `'Update message'` (shows `'Updating…'` while in flight). |
 | `previewHooks` | `PreviewHooks` | no | Hooks forwarded to `slack-blocks-to-jsx`'s `<Message>` for resolving user / channel / emoji directives. |
 | `customEmojis` | `CustomEmoji[]` | no | Workspace custom emoji (`{ name, url, alias }`) the preview resolves. Entries with a `url` render `:name:` as the workspace image; alias entries (`url: null`) fall back to their target emoji. Render-only — never serialized into the emitted Block Kit JSON. A caller-supplied `previewHooks.emoji` takes precedence. |
+| `mentions` | `{ searchUsers, getUserName? }` | no | Opt-in `@` mentions in the rich-text editor: typing `@` or the toolbar's Mention button opens a picker backed by `searchUsers(query, { signal })`, and a pick inserts a rich text `user` element. `getUserName(userId)` labels mentions in the editor. See [Mentions](#mentions-opt-in). |
 | `palette` | `PaletteSection[]` | no | The left-hand palette of draggable variants. Defaults to `defaultPalette`. Spread it to filter, reorder, or add your own pre-configured variants — see [Customizing the palette](#customizing-the-palette). |
 | `disabledBlockTypes` | `SupportedBlockType[]` | no | Block types to hide from the palette without rebuilding it. Filters at the variant level — a section keeps any variants whose block types aren't disabled; sections that end up empty are dropped. Convenient when you want the default palette minus a few types (e.g. `['image', 'table']` for a text-only builder). |
 | `paletteMode` | `'advanced' \| 'simple'` | no | How much of the palette the user meets first. `'advanced'` (default) renders the full sectioned palette with its search input. `'simple'` opens on a flat list of the variants flagged `basic` — in the built-in palette: **Header**, **Divider**, **Rich Text Section** and **Image** — with no search and an "Advanced" link at the top that swaps in the full palette. Nothing is removed; it's a smaller first screen. See [Simple vs advanced palette](#simple-vs-advanced-palette). |
@@ -607,6 +608,8 @@ import type {
   BlockKitchenSendProps,        // the send trio + `onUpdate` + `renderSendExtras`
   LoadingConfig,                // load an existing message (works in both modes)
   LoadedMessage,                // the loaded target: channel + ts + verdict
+  MentionsConfig,               // opt-in `@` mentions: host search + name lookup
+  MentionUser,                  // one person the `@` picker offers
   BlockKitchenComposeOnlyProps, // the trio explicitly absent + `primaryAction`
   PaletteSection,
   PaletteVariant,
@@ -635,6 +638,30 @@ A searchable emoji picker (search, categories, skin tone, recents) is built into
 
 Pass [`customEmojis`](#props) to add your workspace's custom emoji: image entries appear as the picker's **Custom** category and render in the preview; alias entries fall back to their target. Custom emoji never block Send — Slack accepts unknown emoji names, so they're excluded from validation. The emitted Block Kit JSON is unchanged whether or not `customEmojis` is passed.
 
+## Mentions (opt-in)
+
+Pass `mentions` to let people `@`-mention someone in the rich-text WYSIWYG editor. Typing `@` (after a space or at the start of a line, so `name@domain` is left alone) or clicking the toolbar's **Mention** button opens a picker backed by your search. Picking someone inserts a rich text `user` element, `{ type: "user", user_id }`. The picker's name and avatar are never serialized.
+
+```tsx
+<BlockKitchen
+  mentions={{
+    // Called with the text after `@` (empty right after it); debounced, and
+    // `signal` aborts once a newer query supersedes this one.
+    searchUsers: async (query, { signal }) => {
+      const res = await fetch(`/api/members?q=${encodeURIComponent(query)}`, { signal });
+      const members = await res.json();
+      return members.map((m) => ({ id: m.slackUserId, name: m.name, avatarUrl: m.avatar }));
+    },
+    // Optional: labels mentions in the editor by id, including ones that came
+    // with the draft or a loaded message. Return undefined when unknown.
+    getUserName: (userId) => names.get(userId)
+  }}
+  {...rest}
+/>
+```
+
+Mentions already in a draft round-trip through the WYSIWYG with or without `mentions`; without `getUserName` they show the picked name or the raw id. The builder never looks people up itself. To show names in the Slack preview too, resolve the ids in [`previewHooks.user`](#props).
+
 ## Validation
 
 Defense-in-depth: blocks are validated against [slack-block-kit-validator](https://github.com/TightknitAI/slack-block-kit-validator) before send. Issues are surfaced in the issues sheet with line numbers — users can fix them inline before posting.

package/dist/helpers.d.cts

@@ -1,5 +1,5 @@
-import { S as SupportedBlock } from './palette-Cxh1yNzW.cjs';
-export { a1 as SupportedBlockType } from './palette-Cxh1yNzW.cjs';
+import { S as SupportedBlock } from './palette-DNUiqoQK.cjs';
+export { a3 as SupportedBlockType } from './palette-DNUiqoQK.cjs';
 import 'react';
 import 'slack-web-api-client';
 

package/dist/helpers.d.ts

@@ -1,5 +1,5 @@
-import { S as SupportedBlock } from './palette-Cxh1yNzW.js';
-export { a1 as SupportedBlockType } from './palette-Cxh1yNzW.js';
+import { S as SupportedBlock } from './palette-DNUiqoQK.js';
+export { a3 as SupportedBlockType } from './palette-DNUiqoQK.js';
 import 'react';
 import 'slack-web-api-client';
 

package/dist/index.cjs

@@ -22,6 +22,7 @@ var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var Link = require('@tiptap/extension-link');
 var react = require('@tiptap/react');
 var StarterKit = require('@tiptap/starter-kit');
+var suggestion = require('@tiptap/suggestion');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1863,6 +1864,13 @@ function CustomEmojiProvider({ customEmojis, children }) {
 function useCustomEmojis() {
   return React.useContext(CustomEmojiContext);
 }
+var MentionsContext = React.createContext(null);
+function MentionsProvider({ mentions, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MentionsContext.Provider, { value: mentions ?? null, children });
+}
+function useMentions() {
+  return React.useContext(MentionsContext);
+}
 
 // src/lib/error-grouping.ts
 function toValidatorSurface(surface) {
@@ -3363,12 +3371,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 = React.useRef(hooks);
+  latest.current = hooks;
+  const [live] = React.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 = React.useRef(null);
+  const liveHooks = useLatestHooks(hooks);
   const safeBlock = React.useMemo(() => sanitizeBlock(block), [block]);
   React.useEffect(() => {
     const root = rootRef.current;
@@ -3423,7 +3446,7 @@ function SlackBlockPreview({
         withoutWrapper: true,
         theme,
         blocks: [safeBlock],
-        hooks
+        hooks: liveHooks
       }
     ) })
   );
@@ -5196,14 +5219,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 = [];
@@ -5226,6 +5251,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;
@@ -5247,6 +5283,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) => ({
@@ -5358,6 +5401,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 || "";
@@ -5491,6 +5545,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;
@@ -5545,6 +5612,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) {
@@ -5611,6 +5687,91 @@ var EmojiNode = react.Node.create({
     return react.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) {
+  suggestion.exitSuggestion(editor.view);
+}
+var MentionSuggestion = react.Extension.create({
+  name: "userMentionSuggestion",
+  addOptions() {
+    return {
+      isEnabled: () => false,
+      search: async () => [],
+      render: () => ({})
+    };
+  },
+  addProseMirrorPlugins() {
+    const { isEnabled, search, render } = this.options;
+    return [
+      suggestion.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__ */ jsxRuntime.jsxs(react.NodeViewWrapper, { as: "span", className: "bk-user-mention", "data-user-mention": attrs.userId, children: [
+    "@",
+    userMentionLabel(attrs, mentions?.getUserName)
+  ] });
+}
+var UserMentionNode = react.Node.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", react.mergeAttributes(HTMLAttributes), `@${userMentionLabel(node.attrs)}`];
+  },
+  renderText({ node }) {
+    return `@${userMentionLabel(node.attrs)}`;
+  },
+  addNodeView() {
+    return react.ReactNodeViewRenderer(UserMentionNodeView);
+  }
+});
 
 // src/lib/emoji-recents.ts
 var STORAGE_KEY = "bk:emoji-recents";
@@ -5892,6 +6053,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] = React.useState(0);
+  const [shownItems, setShownItems] = React.useState(items);
+  if (shownItems !== items) {
+    setShownItems(items);
+    setActiveIndex(0);
+  }
+  const listRef = React.useRef(null);
+  React.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]);
+  React.useEffect(() => {
+    const row = listRef.current?.querySelectorAll('[role="option"]')[activeIndex];
+    row?.scrollIntoView?.({ block: "nearest" });
+  }, [activeIndex]);
+  const anchorRef = React.useMemo(
+    () => ({
+      current: {
+        getBoundingClientRect: () => clientRect?.() ?? editor.view.dom.getBoundingClientRect()
+      }
+    }),
+    [clientRect, editor]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Popover,
+    {
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) {
+          onDismiss();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverAnchor, { virtualRef: anchorRef }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { ref: listRef, role: "listbox", "aria-label": "People to mention", children: items.length === 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(MentionAvatar, { user }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: user.name })
+                  ]
+                },
+                user.id
+              )
+            )) })
+          }
+        )
+      ]
+    }
+  );
+}
+function MentionAvatar({ user }) {
+  const [failed, setFailed] = React.useState(false);
+  const src = user.avatarUrl && isSafeImageSrc(user.avatarUrl) ? user.avatarUrl : null;
+  if (src && !failed) {
+    return /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: "", className: "h-5 w-5 shrink-0 rounded object-cover", onError: () => setFailed(true) });
+  }
+  return /* @__PURE__ */ jsxRuntime.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",
@@ -6467,7 +6755,7 @@ function LossyBanner({ reasons }) {
   ] });
 }
 var RICH_TEXT_INPUT_RULE_ALLOWLIST = ["bold", "italic", "strike", "code"];
-function buildRichTextExtensions() {
+function buildRichTextExtensions(mentionSuggestion) {
   return [
     StarterKit__default.default.configure({
       heading: false,
@@ -6500,7 +6788,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 }) {
@@ -6527,8 +6819,25 @@ function RichTextWysiwygEditor({ block, onChange }) {
     },
     [onChange]
   );
+  const mentions = useMentions();
+  const mentionsEnabled = mentions !== null;
+  const mentionsRef = React.useRef(mentions);
+  React.useEffect(() => {
+    mentionsRef.current = mentions;
+  }, [mentions]);
+  const [mentionPicker, setMentionPicker] = React.useState(null);
+  const mentionKeyHandlerRef = React.useRef(() => false);
   const editor = react.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: {
@@ -6538,10 +6847,16 @@ function RichTextWysiwygEditor({ block, onChange }) {
     },
     onUpdate: ({ editor: ed }) => handleUpdate(ed)
   });
+  const seenBlockRef = React.useRef(block);
   React.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;
     }
@@ -6553,11 +6868,26 @@ function RichTextWysiwygEditor({ block, onChange }) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[120px] rounded-md border border-input bg-background" });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Toolbar, { editor }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.EditorContent, { editor })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Toolbar,
+      {
+        editor,
+        mention: mentionsEnabled ? { active: mentionPicker !== null, insert: () => insertMentionTrigger(editor) } : null
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(react.EditorContent, { editor }),
+    mentionPicker && /* @__PURE__ */ jsxRuntime.jsx(
+      MentionPicker,
+      {
+        editor,
+        state: mentionPicker,
+        keyHandlerRef: mentionKeyHandlerRef,
+        onDismiss: () => dismissMentionSuggestion(editor)
+      }
+    )
   ] });
 }
-function Toolbar({ editor }) {
+function Toolbar({ editor, mention }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-0.5 rounded-md border bg-muted/30 p-1", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       ToolbarButton,
@@ -6616,6 +6946,7 @@ function Toolbar({ editor }) {
         }).run()
       }
     ),
+    mention && /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { label: "Mention", active: mention.active, onClick: mention.insert, Icon: lucideReact.AtSign }),
     /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
     /* @__PURE__ */ jsxRuntime.jsx(
       ToolbarButton,
@@ -10952,6 +11283,7 @@ function BlockKitchen(props) {
     onValidationChange,
     previewHooks,
     customEmojis,
+    mentions,
     loadChannels,
     loadSendAsUserStatus,
     onSend,
@@ -11312,7 +11644,7 @@ function BlockKitchen(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(MentionsProvider, { mentions, children: /* @__PURE__ */ jsxRuntime.jsx(
                   Surface,
                   {
                     blocks,
@@ -11332,7 +11664,7 @@ function BlockKitchen(props) {
                     isPaletteDrag: activePaletteVariant !== null,
                     onOpenPalette: () => setPaletteOpen(true)
                   }
-                )
+                ) })
               ] })
             ]
           }