@tightknitai/block-kitchen 0.10.20 → 0.10.21

package/README.md

@@ -139,7 +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). |
+| `mentions` | `{ searchUsers, getUserName?, searchChannels?, getChannelName? }` | no | Opt-in rich-text mentions. `@` and the Mention button search users; when `searchChannels` is provided, `#` and the Channel button search channels. Picks serialize as Slack `user` / `channel` elements. 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). |
@@ -608,8 +608,9 @@ 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
+  MentionsConfig,               // opt-in `@` / `#` mentions: host search + name lookup
   MentionUser,                  // one person the `@` picker offers
+  MentionChannel,               // one channel the `#` picker offers
   BlockKitchenComposeOnlyProps, // the trio explicitly absent + `primaryAction`
   PaletteSection,
   PaletteVariant,
@@ -642,6 +643,8 @@ Pass [`customEmojis`](#props) to add your workspace's custom emoji: image entrie
 
 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.
 
+Add `searchChannels` to enable the matching `#` trigger and **Channel** toolbar button. Picking a channel inserts `{ type: "channel", channel_id }`; its display name is never serialized.
+
 ```tsx
 <BlockKitchen
   mentions={{
@@ -654,13 +657,19 @@ Pass `mentions` to let people `@`-mention someone in the rich-text WYSIWYG edito
     },
     // 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)
+    getUserName: (userId) => userNames.get(userId),
+    searchChannels: async (query, { signal }) => {
+      const res = await fetch(`/api/channels?q=${encodeURIComponent(query)}`, { signal });
+      const channels = await res.json();
+      return channels.map((channel) => ({ id: channel.id, name: channel.name }));
+    },
+    getChannelName: (channelId) => channelNames.get(channelId)
   }}
   {...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).
+User and channel mentions already in a draft round-trip through the WYSIWYG with or without picker configuration. Labels resolve through `getUserName` / `getChannelName`, then the name captured when picked, then the raw id. The builder never looks users or channels up itself. To show names in the Slack preview too, resolve the ids in [`previewHooks`](#props).
 
 ## Validation
 

package/dist/helpers.d.cts

@@ -1,5 +1,5 @@
-import { S as SupportedBlock } from './palette-4BJw_nd7.cjs';
-export { a7 as SupportedBlockType } from './palette-4BJw_nd7.cjs';
+import { S as SupportedBlock } from './palette-CXXqlwIH.cjs';
+export { a8 as SupportedBlockType } from './palette-CXXqlwIH.cjs';
 import 'react';
 import 'slack-web-api-client';
 

package/dist/helpers.d.ts

@@ -1,5 +1,5 @@
-import { S as SupportedBlock } from './palette-4BJw_nd7.js';
-export { a7 as SupportedBlockType } from './palette-4BJw_nd7.js';
+import { S as SupportedBlock } from './palette-CXXqlwIH.js';
+export { a8 as SupportedBlockType } from './palette-CXXqlwIH.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 state = require('@tiptap/pm/state');
 var suggestion = require('@tiptap/suggestion');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -5274,15 +5275,16 @@ function makeEmojiImportResolver(customByName, index = getEmojiIndex()) {
 
 // src/lib/rich-text-tiptap.ts
 var USER_MENTION_NODE = "userMention";
+var CHANNEL_MENTION_NODE = "channelMention";
 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", "user"]);
+var SUPPORTED_INLINE_KINDS = /* @__PURE__ */ new Set(["text", "link", "emoji", "user", "channel"]);
 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 SUPPORTED_MENTION_STYLE_KEYS = /* @__PURE__ */ new Set(["bold", "italic", "strike", "underline"]);
 var MAX_LIST_INDENT = 8;
 function detectLossy(block) {
   const out = [];
@@ -5337,10 +5339,13 @@ function scanInlines(inlines, where, out) {
         }
       }
     }
-    if (inline.type === "user") {
+    if (inline.type === "user" || inline.type === "channel") {
+      if (inline.type === "channel" && !inline.channel_id) {
+        out.push({ label: "Channel without id", where: sub });
+      }
       for (const k of Object.keys(inline.style ?? {})) {
-        if (!SUPPORTED_USER_STYLE_KEYS.has(k)) {
-          out.push({ label: `Mention style: ${k}`, where: sub });
+        if (!SUPPORTED_MENTION_STYLE_KEYS.has(k)) {
+          out.push({ label: `${inline.type === "channel" ? "Channel" : "Mention"} style: ${k}`, where: sub });
         }
       }
     }
@@ -5466,6 +5471,20 @@ function inlinesToPM(inlines, resolveEmoji) {
         node.marks = marks;
       }
       out.push(node);
+    } else if (inline.type === "channel") {
+      const channel = inline;
+      if (!channel.channel_id) {
+        continue;
+      }
+      const node = {
+        type: CHANNEL_MENTION_NODE,
+        attrs: { channelId: channel.channel_id, name: null }
+      };
+      const marks = styleToMarks(channel.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 || "";
@@ -5605,13 +5624,26 @@ function proseMirrorInlinesToRichTextElements(nodes) {
         continue;
       }
       const user = { type: "user", user_id: userId };
-      const style2 = userStyle(node.marks ?? []);
+      const style2 = mentionStyle(node.marks ?? []);
       if (Object.keys(style2).length > 0) {
         user.style = style2;
       }
       out.push(user);
       continue;
     }
+    if (node.type === CHANNEL_MENTION_NODE) {
+      const channelId = String(node.attrs?.channelId ?? "");
+      if (!channelId) {
+        continue;
+      }
+      const channel = { type: "channel", channel_id: channelId };
+      const style2 = mentionStyle(node.marks ?? []);
+      if (Object.keys(style2).length > 0) {
+        channel.style = style2;
+      }
+      out.push(channel);
+      continue;
+    }
     if (node.type === "hardBreak") {
       out.push({ type: "text", text: "\n" });
       continue;
@@ -5666,10 +5698,10 @@ function marksToStyle(marks) {
   }
   return style;
 }
-function userStyle(marks) {
+function mentionStyle(marks) {
   const style = {};
   for (const [key, value] of Object.entries(marksToStyle(marks))) {
-    if (SUPPORTED_USER_STYLE_KEYS.has(key)) {
+    if (SUPPORTED_MENTION_STYLE_KEYS.has(key)) {
       style[key] = value;
     }
   }
@@ -5698,50 +5730,52 @@ function sameStyle(a, b) {
   }
   return ak.every((k, i) => k === bk[i]);
 }
-function EmojiNodeView({ node }) {
-  const { name, src, unicode } = node.attrs;
-  const label = `:${name}:`;
-  return /* @__PURE__ */ jsxRuntime.jsx(react.NodeViewWrapper, { as: "span", className: "bk-emoji-node", "data-emoji": name, title: label, children: src ? /* @__PURE__ */ jsxRuntime.jsx(
-    "img",
-    {
-      src,
-      alt: label,
-      style: {
-        display: "inline-block",
-        width: "1.25em",
-        height: "1.25em",
-        verticalAlign: "-0.25em",
-        objectFit: "contain"
-      }
-    }
-  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": label, role: "img", children: unicode ? codepointsToGlyph(unicode) : label }) });
+function channelMentionLabel(attrs, getChannelName) {
+  return getChannelName?.(attrs.channelId) ?? attrs.name ?? attrs.channelId;
 }
-var EmojiNode = react.Node.create({
-  name: "emoji",
+function ChannelMentionNodeView({ node }) {
+  const mentions = useMentions();
+  const attrs = node.attrs;
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.NodeViewWrapper, { as: "span", className: "bk-channel-mention", "data-channel-mention": attrs.channelId, children: [
+    "#",
+    channelMentionLabel(attrs, mentions?.getChannelName)
+  ] });
+}
+var ChannelMentionNode = react.Node.create({
+  name: CHANNEL_MENTION_NODE,
   group: "inline",
   inline: true,
   atom: true,
   selectable: true,
   addAttributes() {
     return {
-      name: { default: "" },
-      src: { default: null },
-      unicode: { default: null },
-      skinTone: { default: null }
+      channelId: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("data-channel-mention") ?? "",
+        renderHTML: (attributes) => ({ "data-channel-mention": attributes.channelId })
+      },
+      name: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-channel-name"),
+        renderHTML: (attributes) => attributes.name ? { "data-channel-name": attributes.name } : {}
+      }
     };
   },
   parseHTML() {
-    return [{ tag: "span[data-emoji]" }];
+    return [{ tag: "span[data-channel-mention]" }];
   },
-  renderHTML({ HTMLAttributes }) {
-    const name = HTMLAttributes.name ?? "";
-    return ["span", react.mergeAttributes({ "data-emoji": name }, HTMLAttributes), `:${name}:`];
+  renderHTML({ node, HTMLAttributes }) {
+    return ["span", react.mergeAttributes(HTMLAttributes), `#${channelMentionLabel(node.attrs)}`];
+  },
+  renderText({ node }) {
+    return `#${channelMentionLabel(node.attrs)}`;
   },
   addNodeView() {
-    return react.ReactNodeViewRenderer(EmojiNodeView);
+    return react.ReactNodeViewRenderer(ChannelMentionNodeView);
   }
 });
 var MENTION_SEARCH_DEBOUNCE_MS = 200;
+var USER_MENTION_SUGGESTION_PLUGIN_KEY = new state.PluginKey("userMentionSuggestion");
 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 }, [
@@ -5750,13 +5784,16 @@ function insertUserMention(editor, range, user) {
   ]).run();
 }
 function insertMentionTrigger(editor) {
+  insertSuggestionTrigger(editor, "@");
+}
+function insertSuggestionTrigger(editor, char) {
   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();
+  editor.chain().focus().insertContent(needsSpace ? ` ${char}` : char).run();
 }
 function dismissMentionSuggestion(editor) {
-  suggestion.exitSuggestion(editor.view);
+  suggestion.exitSuggestion(editor.view, USER_MENTION_SUGGESTION_PLUGIN_KEY);
 }
 var MentionSuggestion = react.Extension.create({
   name: "userMentionSuggestion",
@@ -5772,6 +5809,7 @@ var MentionSuggestion = react.Extension.create({
     return [
       suggestion.Suggestion({
         editor: this.editor,
+        pluginKey: USER_MENTION_SUGGESTION_PLUGIN_KEY,
         char: "@",
         debounce: MENTION_SEARCH_DEBOUNCE_MS,
         allow: () => isEnabled(),
@@ -5782,6 +5820,90 @@ var MentionSuggestion = react.Extension.create({
     ];
   }
 });
+
+// src/lib/tiptap-channel-suggestion.ts
+var CHANNEL_MENTION_SUGGESTION_PLUGIN_KEY = new state.PluginKey("channelMentionSuggestion");
+function insertChannelMention(editor, range, channel) {
+  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: CHANNEL_MENTION_NODE, attrs: { channelId: channel.id, name: channel.name } },
+    { type: "text", text: " " }
+  ]).run();
+}
+function insertChannelTrigger(editor) {
+  insertSuggestionTrigger(editor, "#");
+}
+function dismissChannelSuggestion(editor) {
+  suggestion.exitSuggestion(editor.view, CHANNEL_MENTION_SUGGESTION_PLUGIN_KEY);
+}
+var ChannelSuggestion = react.Extension.create({
+  name: "channelMentionSuggestion",
+  addOptions() {
+    return {
+      isEnabled: () => false,
+      search: async () => [],
+      render: () => ({})
+    };
+  },
+  addProseMirrorPlugins() {
+    const { isEnabled, search, render } = this.options;
+    return [
+      suggestion.Suggestion({
+        editor: this.editor,
+        pluginKey: CHANNEL_MENTION_SUGGESTION_PLUGIN_KEY,
+        char: "#",
+        debounce: MENTION_SEARCH_DEBOUNCE_MS,
+        allow: () => isEnabled(),
+        items: ({ query, signal }) => search(query, signal),
+        command: ({ editor, range, props }) => insertChannelMention(editor, range, props),
+        render
+      })
+    ];
+  }
+});
+function EmojiNodeView({ node }) {
+  const { name, src, unicode } = node.attrs;
+  const label = `:${name}:`;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.NodeViewWrapper, { as: "span", className: "bk-emoji-node", "data-emoji": name, title: label, children: src ? /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src,
+      alt: label,
+      style: {
+        display: "inline-block",
+        width: "1.25em",
+        height: "1.25em",
+        verticalAlign: "-0.25em",
+        objectFit: "contain"
+      }
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": label, role: "img", children: unicode ? codepointsToGlyph(unicode) : label }) });
+}
+var EmojiNode = react.Node.create({
+  name: "emoji",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  addAttributes() {
+    return {
+      name: { default: "" },
+      src: { default: null },
+      unicode: { default: null },
+      skinTone: { default: null }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-emoji]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    const name = HTMLAttributes.name ?? "";
+    return ["span", react.mergeAttributes({ "data-emoji": name }, HTMLAttributes), `:${name}:`];
+  },
+  addNodeView() {
+    return react.ReactNodeViewRenderer(EmojiNodeView);
+  }
+});
 function userMentionLabel(attrs, getUserName) {
   return getUserName?.(attrs.userId) ?? attrs.name ?? attrs.userId;
 }
@@ -6117,6 +6239,7 @@ function nextMentionPickerState(props, prev) {
 }
 function MentionPicker({
   editor,
+  kind,
   state,
   keyHandlerRef,
   onDismiss
@@ -6129,6 +6252,27 @@ function MentionPicker({
     setActiveIndex(0);
   }
   const listRef = React.useRef(null);
+  const listboxId = React.useId();
+  const activeOptionId = items[activeIndex] ? `${listboxId}-${activeIndex}` : void 0;
+  React.useEffect(() => {
+    const root = editor.view.dom;
+    root.setAttribute("role", "combobox");
+    root.setAttribute("aria-autocomplete", "list");
+    root.setAttribute("aria-expanded", "true");
+    root.setAttribute("aria-controls", listboxId);
+    if (activeOptionId) {
+      root.setAttribute("aria-activedescendant", activeOptionId);
+    } else {
+      root.removeAttribute("aria-activedescendant");
+    }
+    return () => {
+      root.removeAttribute("role");
+      root.removeAttribute("aria-autocomplete");
+      root.removeAttribute("aria-expanded");
+      root.removeAttribute("aria-controls");
+      root.removeAttribute("aria-activedescendant");
+    };
+  }, [activeOptionId, editor, listboxId]);
   React.useEffect(() => {
     keyHandlerRef.current = (event) => {
       if (event.key === "ArrowDown" || event.key === "ArrowUp") {
@@ -6139,11 +6283,11 @@ function MentionPicker({
         return true;
       }
       if (event.key === "Enter" || event.key === "Tab") {
-        const user = items[activeIndex];
-        if (!user) {
+        const item = items[activeIndex];
+        if (!item) {
           return false;
         }
-        command(user);
+        command(item);
         return true;
       }
       return false;
@@ -6190,29 +6334,39 @@ function MentionPicker({
                 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
-              )
-            )) })
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: listRef,
+                id: listboxId,
+                role: "listbox",
+                "aria-label": kind === "channel" ? "Channels to mention" : "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 ${kind === "channel" ? "channels" : "people"} match that search.` }) : items.map((item, 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",
+                    {
+                      id: `${listboxId}-${index}`,
+                      role: "option",
+                      "aria-selected": index === activeIndex,
+                      onPointerDown: (e) => e.preventDefault(),
+                      onClick: () => command(item),
+                      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: [
+                        kind === "channel" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Hash, { className: "h-3.5 w-3.5" }) }) : /* @__PURE__ */ jsxRuntime.jsx(MentionAvatar, { user: item }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: kind === "channel" ? `#${item.name}` : item.name })
+                      ]
+                    },
+                    item.id
+                  )
+                ))
+              }
+            )
           }
         )
       ]
@@ -6809,7 +6963,7 @@ function LossyBanner({ reasons }) {
   ] });
 }
 var RICH_TEXT_INPUT_RULE_ALLOWLIST = ["bold", "italic", "strike", "code"];
-function buildRichTextExtensions(mentionSuggestion) {
+function buildRichTextExtensions(mentionSuggestion, channelSuggestion) {
   return [
     StarterKit__default.default.configure({
       heading: false,
@@ -6843,10 +6997,11 @@ function buildRichTextExtensions(mentionSuggestion) {
       shouldAutoLink: hasExplicitSafeScheme,
       HTMLAttributes: { rel: "noreferrer noopener", target: "_blank" }
     }),
-    // Always registered, so mentions already in the content round-trip with
-    // or without the picker.
+    // Always registered, so mentions already in the content round-trip with or without pickers.
     UserMentionNode,
-    ...mentionSuggestion ? [MentionSuggestion.configure(mentionSuggestion)] : []
+    ChannelMentionNode,
+    ...mentionSuggestion ? [MentionSuggestion.configure(mentionSuggestion)] : [],
+    ...channelSuggestion ? [ChannelSuggestion.configure(channelSuggestion)] : []
   ];
 }
 function RichTextWysiwygEditor({ block, onChange }) {
@@ -6874,24 +7029,39 @@ function RichTextWysiwygEditor({ block, onChange }) {
     [onChange]
   );
   const mentions = useMentions();
-  const mentionsEnabled = mentions !== null;
+  const userMentionsEnabled = mentions !== null;
+  const channelMentionsEnabled = mentions?.searchChannels !== void 0;
   const mentionsRef = React.useRef(mentions);
   React.useEffect(() => {
     mentionsRef.current = mentions;
   }, [mentions]);
   const [mentionPicker, setMentionPicker] = React.useState(null);
   const mentionKeyHandlerRef = React.useRef(() => false);
+  const [channelPicker, setChannelPicker] = React.useState(null);
+  const channelKeyHandlerRef = React.useRef(() => false);
   const editor = react.useEditor({
-    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)
-      })
-    }),
+    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)
+        })
+      },
+      {
+        isEnabled: () => mentionsRef.current?.searchChannels !== void 0,
+        search: async (query, signal) => await mentionsRef.current?.searchChannels?.(query, { signal }) ?? [],
+        render: () => ({
+          onStart: (props) => setChannelPicker((prev) => nextMentionPickerState(props, prev)),
+          onUpdate: (props) => setChannelPicker((prev) => nextMentionPickerState(props, prev)),
+          onExit: () => setChannelPicker(null),
+          onKeyDown: ({ event }) => channelKeyHandlerRef.current(event)
+        })
+      }
+    ),
     enableInputRules: RICH_TEXT_INPUT_RULE_ALLOWLIST,
     content: richTextToProseMirror(block, resolveEmoji),
     editorProps: {
@@ -6926,7 +7096,8 @@ function RichTextWysiwygEditor({ block, onChange }) {
       Toolbar,
       {
         editor,
-        mention: mentionsEnabled ? { active: mentionPicker !== null, insert: () => insertMentionTrigger(editor) } : null
+        mention: userMentionsEnabled ? { active: mentionPicker !== null, insert: () => insertMentionTrigger(editor) } : null,
+        channel: channelMentionsEnabled ? { active: channelPicker !== null, insert: () => insertChannelTrigger(editor) } : null
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(react.EditorContent, { editor }),
@@ -6934,14 +7105,29 @@ function RichTextWysiwygEditor({ block, onChange }) {
       MentionPicker,
       {
         editor,
+        kind: "user",
         state: mentionPicker,
         keyHandlerRef: mentionKeyHandlerRef,
         onDismiss: () => dismissMentionSuggestion(editor)
       }
+    ),
+    channelPicker && /* @__PURE__ */ jsxRuntime.jsx(
+      MentionPicker,
+      {
+        editor,
+        kind: "channel",
+        state: channelPicker,
+        keyHandlerRef: channelKeyHandlerRef,
+        onDismiss: () => dismissChannelSuggestion(editor)
+      }
     )
   ] });
 }
-function Toolbar({ editor, mention }) {
+function Toolbar({
+  editor,
+  mention,
+  channel
+}) {
   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,
@@ -7001,6 +7187,7 @@ function Toolbar({ editor, mention }) {
       }
     ),
     mention && /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { label: "Mention", active: mention.active, onClick: mention.insert, Icon: lucideReact.AtSign }),
+    channel && /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { label: "Channel", active: channel.active, onClick: channel.insert, Icon: lucideReact.Hash }),
     /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
     /* @__PURE__ */ jsxRuntime.jsx(
       ToolbarButton,