@tightknitai/block-kitchen 0.10.18 → 0.10.20

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-4BJw_nd7.cjs';
+export { a7 as SupportedBlockType } from './palette-4BJw_nd7.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-4BJw_nd7.js';
+export { a7 as SupportedBlockType } from './palette-4BJw_nd7.js';
 import 'react';
 import 'slack-web-api-client';