@tightknitai/block-kitchen 0.10.20 → 0.10.21

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-4BJw_nd7.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 DataTableActionCell, z as DataTableBlock, E as DataTableCell, F as DataTableRawNumberCell, G as DataVisualizationBlock, H as EditableVia, I as FeedbackButtonSubobject, J as FeedbackButtonsElement, K as HeaderLevel, L as IconButtonElement, M as IconButtonIcon, N as InputBlock, O as LoadMessageInput, Q as LoadResult, R as LoadedMessage, U as LoadingConfig, V as MarkdownBlock, W as MentionUser, X as MentionsConfig, Y as PaletteMode, Z as PaletteSection, _ as PaletteVariant, $ as PieChart, a0 as PieChartSegment, a1 as PlanBlock, a2 as PreviewHooks, a3 as PrimaryActionConfig, a4 as PrimaryActionContext, a5 as RecentMessage, a6 as SendResult, a7 as SupportedBlockType, a8 as SupportedHeaderBlock, a9 as TableBlock, aa as TableCell, ab as TableColumnSetting, ac as TableRawTextCell, ad as TaskCardBlock, ae as TaskCardStatus, af as UpdatePayload, ag as UpdateResult, ah as UrlSourceElement, ai as ValidationSummary, aj as VideoBlock, ak as defaultPalette, al as extraAlertVariant, am as legacyInputVariants } from './palette-4BJw_nd7.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-CXXqlwIH.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 DataTableActionCell, z as DataTableBlock, E as DataTableCell, F as DataTableRawNumberCell, G as DataVisualizationBlock, H as EditableVia, I as FeedbackButtonSubobject, J as FeedbackButtonsElement, K as HeaderLevel, L as IconButtonElement, M as IconButtonIcon, N as InputBlock, O as LoadMessageInput, Q as LoadResult, R as LoadedMessage, U as LoadingConfig, V as MarkdownBlock, W as MentionChannel, X as MentionUser, Y as MentionsConfig, Z as PaletteMode, _ as PaletteSection, $ as PaletteVariant, a0 as PieChart, a1 as PieChartSegment, a2 as PlanBlock, a3 as PreviewHooks, a4 as PrimaryActionConfig, a5 as PrimaryActionContext, a6 as RecentMessage, a7 as SendResult, a8 as SupportedBlockType, a9 as SupportedHeaderBlock, aa as TableBlock, ab as TableCell, ac as TableColumnSetting, ad as TableRawTextCell, ae as TaskCardBlock, af as TaskCardStatus, ag as UpdatePayload, ah as UpdateResult, ai as UrlSourceElement, aj as ValidationSummary, ak as VideoBlock, al as defaultPalette, am as extraAlertVariant, an as legacyInputVariants } from './palette-CXXqlwIH.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-4BJw_nd7.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 DataTableActionCell, z as DataTableBlock, E as DataTableCell, F as DataTableRawNumberCell, G as DataVisualizationBlock, H as EditableVia, I as FeedbackButtonSubobject, J as FeedbackButtonsElement, K as HeaderLevel, L as IconButtonElement, M as IconButtonIcon, N as InputBlock, O as LoadMessageInput, Q as LoadResult, R as LoadedMessage, U as LoadingConfig, V as MarkdownBlock, W as MentionUser, X as MentionsConfig, Y as PaletteMode, Z as PaletteSection, _ as PaletteVariant, $ as PieChart, a0 as PieChartSegment, a1 as PlanBlock, a2 as PreviewHooks, a3 as PrimaryActionConfig, a4 as PrimaryActionContext, a5 as RecentMessage, a6 as SendResult, a7 as SupportedBlockType, a8 as SupportedHeaderBlock, a9 as TableBlock, aa as TableCell, ab as TableColumnSetting, ac as TableRawTextCell, ad as TaskCardBlock, ae as TaskCardStatus, af as UpdatePayload, ag as UpdateResult, ah as UrlSourceElement, ai as ValidationSummary, aj as VideoBlock, ak as defaultPalette, al as extraAlertVariant, am as legacyInputVariants } from './palette-4BJw_nd7.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-CXXqlwIH.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 DataTableActionCell, z as DataTableBlock, E as DataTableCell, F as DataTableRawNumberCell, G as DataVisualizationBlock, H as EditableVia, I as FeedbackButtonSubobject, J as FeedbackButtonsElement, K as HeaderLevel, L as IconButtonElement, M as IconButtonIcon, N as InputBlock, O as LoadMessageInput, Q as LoadResult, R as LoadedMessage, U as LoadingConfig, V as MarkdownBlock, W as MentionChannel, X as MentionUser, Y as MentionsConfig, Z as PaletteMode, _ as PaletteSection, $ as PaletteVariant, a0 as PieChart, a1 as PieChartSegment, a2 as PlanBlock, a3 as PreviewHooks, a4 as PrimaryActionConfig, a5 as PrimaryActionContext, a6 as RecentMessage, a7 as SendResult, a8 as SupportedBlockType, a9 as SupportedHeaderBlock, aa as TableBlock, ab as TableCell, ac as TableColumnSetting, ad as TableRawTextCell, ae as TaskCardBlock, af as TaskCardStatus, ag as UpdatePayload, ah as UpdateResult, ai as UrlSourceElement, aj as ValidationSummary, ak as VideoBlock, al as defaultPalette, am as extraAlertVariant, an as legacyInputVariants } from './palette-CXXqlwIH.js';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.js';
 import 'slack-web-api-client';
 

package/dist/index.js

@@ -1,6 +1,6 @@
 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, AtSign, List, ListOrdered, Quote, Hash, 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, Hash, List, ListOrdered, Quote, Smile, Link as Link$1 } from 'lucide-react';
 import * as React from 'react';
 import { createContext, useContext, useState, useRef, useEffect, useCallback, useMemo, useId } from 'react';
 import { clsx } from 'clsx';
@@ -21,6 +21,7 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import Link from '@tiptap/extension-link';
 import { Node as Node$1, ReactNodeViewRenderer, mergeAttributes, Extension, NodeViewWrapper, useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
+import { PluginKey } from '@tiptap/pm/state';
 import { Suggestion, exitSuggestion } from '@tiptap/suggestion';
 
 // src/components/block-kitchen.tsx
@@ -5244,15 +5245,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 = [];
@@ -5307,10 +5309,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 });
         }
       }
     }
@@ -5436,6 +5441,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 || "";
@@ -5575,13 +5594,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;
@@ -5636,10 +5668,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;
     }
   }
@@ -5668,50 +5700,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__ */ jsx(NodeViewWrapper, { as: "span", className: "bk-emoji-node", "data-emoji": name, title: label, children: src ? /* @__PURE__ */ jsx(
-    "img",
-    {
-      src,
-      alt: label,
-      style: {
-        display: "inline-block",
-        width: "1.25em",
-        height: "1.25em",
-        verticalAlign: "-0.25em",
-        objectFit: "contain"
-      }
-    }
-  ) : /* @__PURE__ */ 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 = Node$1.create({
-  name: "emoji",
+function ChannelMentionNodeView({ node }) {
+  const mentions = useMentions();
+  const attrs = node.attrs;
+  return /* @__PURE__ */ jsxs(NodeViewWrapper, { as: "span", className: "bk-channel-mention", "data-channel-mention": attrs.channelId, children: [
+    "#",
+    channelMentionLabel(attrs, mentions?.getChannelName)
+  ] });
+}
+var ChannelMentionNode = Node$1.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", mergeAttributes({ "data-emoji": name }, HTMLAttributes), `:${name}:`];
+  renderHTML({ node, HTMLAttributes }) {
+    return ["span", mergeAttributes(HTMLAttributes), `#${channelMentionLabel(node.attrs)}`];
+  },
+  renderText({ node }) {
+    return `#${channelMentionLabel(node.attrs)}`;
   },
   addNodeView() {
-    return ReactNodeViewRenderer(EmojiNodeView);
+    return ReactNodeViewRenderer(ChannelMentionNodeView);
   }
 });
 var MENTION_SEARCH_DEBOUNCE_MS = 200;
+var USER_MENTION_SUGGESTION_PLUGIN_KEY = new 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 }, [
@@ -5720,13 +5754,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) {
-  exitSuggestion(editor.view);
+  exitSuggestion(editor.view, USER_MENTION_SUGGESTION_PLUGIN_KEY);
 }
 var MentionSuggestion = Extension.create({
   name: "userMentionSuggestion",
@@ -5742,6 +5779,7 @@ var MentionSuggestion = Extension.create({
     return [
       Suggestion({
         editor: this.editor,
+        pluginKey: USER_MENTION_SUGGESTION_PLUGIN_KEY,
         char: "@",
         debounce: MENTION_SEARCH_DEBOUNCE_MS,
         allow: () => isEnabled(),
@@ -5752,6 +5790,90 @@ var MentionSuggestion = Extension.create({
     ];
   }
 });
+
+// src/lib/tiptap-channel-suggestion.ts
+var CHANNEL_MENTION_SUGGESTION_PLUGIN_KEY = new 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) {
+  exitSuggestion(editor.view, CHANNEL_MENTION_SUGGESTION_PLUGIN_KEY);
+}
+var ChannelSuggestion = Extension.create({
+  name: "channelMentionSuggestion",
+  addOptions() {
+    return {
+      isEnabled: () => false,
+      search: async () => [],
+      render: () => ({})
+    };
+  },
+  addProseMirrorPlugins() {
+    const { isEnabled, search, render } = this.options;
+    return [
+      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__ */ jsx(NodeViewWrapper, { as: "span", className: "bk-emoji-node", "data-emoji": name, title: label, children: src ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt: label,
+      style: {
+        display: "inline-block",
+        width: "1.25em",
+        height: "1.25em",
+        verticalAlign: "-0.25em",
+        objectFit: "contain"
+      }
+    }
+  ) : /* @__PURE__ */ jsx("span", { "aria-label": label, role: "img", children: unicode ? codepointsToGlyph(unicode) : label }) });
+}
+var EmojiNode = Node$1.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", mergeAttributes({ "data-emoji": name }, HTMLAttributes), `:${name}:`];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(EmojiNodeView);
+  }
+});
 function userMentionLabel(attrs, getUserName) {
   return getUserName?.(attrs.userId) ?? attrs.name ?? attrs.userId;
 }
@@ -6087,6 +6209,7 @@ function nextMentionPickerState(props, prev) {
 }
 function MentionPicker({
   editor,
+  kind,
   state,
   keyHandlerRef,
   onDismiss
@@ -6099,6 +6222,27 @@ function MentionPicker({
     setActiveIndex(0);
   }
   const listRef = useRef(null);
+  const listboxId = useId();
+  const activeOptionId = items[activeIndex] ? `${listboxId}-${activeIndex}` : void 0;
+  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]);
   useEffect(() => {
     keyHandlerRef.current = (event) => {
       if (event.key === "ArrowDown" || event.key === "ArrowUp") {
@@ -6109,11 +6253,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;
@@ -6160,29 +6304,39 @@ function MentionPicker({
                 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
-              )
-            )) })
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: listRef,
+                id: listboxId,
+                role: "listbox",
+                "aria-label": kind === "channel" ? "Channels to mention" : "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 ${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__ */ 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__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(Hash, { className: "h-3.5 w-3.5" }) }) : /* @__PURE__ */ jsx(MentionAvatar, { user: item }),
+                        /* @__PURE__ */ jsx("span", { className: "truncate", children: kind === "channel" ? `#${item.name}` : item.name })
+                      ]
+                    },
+                    item.id
+                  )
+                ))
+              }
+            )
           }
         )
       ]
@@ -6779,7 +6933,7 @@ function LossyBanner({ reasons }) {
   ] });
 }
 var RICH_TEXT_INPUT_RULE_ALLOWLIST = ["bold", "italic", "strike", "code"];
-function buildRichTextExtensions(mentionSuggestion) {
+function buildRichTextExtensions(mentionSuggestion, channelSuggestion) {
   return [
     StarterKit.configure({
       heading: false,
@@ -6813,10 +6967,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 }) {
@@ -6844,24 +6999,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 = useRef(mentions);
   useEffect(() => {
     mentionsRef.current = mentions;
   }, [mentions]);
   const [mentionPicker, setMentionPicker] = useState(null);
   const mentionKeyHandlerRef = useRef(() => false);
+  const [channelPicker, setChannelPicker] = useState(null);
+  const channelKeyHandlerRef = useRef(() => false);
   const editor = 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: {
@@ -6896,7 +7066,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__ */ jsx(EditorContent, { editor }),
@@ -6904,14 +7075,29 @@ function RichTextWysiwygEditor({ block, onChange }) {
       MentionPicker,
       {
         editor,
+        kind: "user",
         state: mentionPicker,
         keyHandlerRef: mentionKeyHandlerRef,
         onDismiss: () => dismissMentionSuggestion(editor)
       }
+    ),
+    channelPicker && /* @__PURE__ */ jsx(
+      MentionPicker,
+      {
+        editor,
+        kind: "channel",
+        state: channelPicker,
+        keyHandlerRef: channelKeyHandlerRef,
+        onDismiss: () => dismissChannelSuggestion(editor)
+      }
     )
   ] });
 }
-function Toolbar({ editor, mention }) {
+function Toolbar({
+  editor,
+  mention,
+  channel
+}) {
   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,
@@ -6971,6 +7157,7 @@ function Toolbar({ editor, mention }) {
       }
     ),
     mention && /* @__PURE__ */ jsx(ToolbarButton, { label: "Mention", active: mention.active, onClick: mention.insert, Icon: AtSign }),
+    channel && /* @__PURE__ */ jsx(ToolbarButton, { label: "Channel", active: channel.active, onClick: channel.insert, Icon: Hash }),
     /* @__PURE__ */ jsx(Divider, {}),
     /* @__PURE__ */ jsx(
       ToolbarButton,