@tightknitai/block-kitchen 0.10.21 → 0.10.23

package/README.md

@@ -138,6 +138,7 @@ Given no height to work with — a plain `<div>` in ordinary document flow — i
 | `updateButtonLabel` | `string` | no | Label for the toolbar's primary button while a message is loaded for editing. It's a split button: clicking it updates the message in place; the menu beside it also offers "Send as a new message" (post the current blocks as new). Defaults to `'Review & update'`. |
 | `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. |
+| `blockActions` | `BlockAction[]` | no | Host buttons added to every block's action toolbar, before Edit / Duplicate / Delete. Each is `{ id, label, icon, onSelect }`, and `onSelect` receives the block's `{ index, childIndex }`. See [Adding your own block actions](#adding-your-own-block-actions-blockactions). |
 | `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?, 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). |
@@ -441,6 +442,39 @@ update against the target from `loadedMessage` / `onLoadedMessageChange`.
 > <BlockKitchen loading={{ onLoadMessage, loadRecentMessages }} onUpdate={onUpdate} />
 > ```
 
+## Adding your own block actions (`blockActions`)
+
+Actions about a block that belong to your app, like "Comment on this block",
+can sit in the block's own toolbar (the hover toolbar on desktop, the inline
+row on mobile) through `blockActions`:
+
+```tsx
+<BlockKitchen
+  blockActions={[
+    {
+      id: "comment",
+      label: "Comment on block",
+      icon: <MessageSquare />,
+      onSelect: ({ index, childIndex }) => openCommentOn(blocks[index], childIndex),
+    },
+  ]}
+/>
+```
+
+`onSelect` gets the block's position: `index` among the draft's top-level
+blocks, and `childIndex` inside the container holding it (`null` for a
+top-level block). Map it onto the blocks `onChange` last reported; builder
+ids never leave the package. An `svg` icon is sized to match the built-in
+ones.
+
+Each block's row also carries `data-bk-block-index` (plus
+`data-bk-child-index` inside a container), so the host can find a block on
+the canvas, for example to scroll to it or highlight it:
+
+```ts
+document.querySelector(`.bk-root [data-bk-block-index="${index}"]:not([data-bk-child-index])`);
+```
+
 ## Customizing the palette
 
 On desktop the palette is a rail down the left-hand side, with a chevron handle on its outer border that hides and restores it — collapsed, the preview gets the full width, and the rail comes back with its open sections and search exactly as they were. Below the `md` breakpoint there's no rail: the toolbar's **Blocks** button opens the palette as a bottom sheet instead, and picking a block closes it.

package/dist/helpers.d.cts

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

package/dist/helpers.d.ts

@@ -1,5 +1,5 @@
-import { S as SupportedBlock } from './palette-CXXqlwIH.js';
-export { a8 as SupportedBlockType } from './palette-CXXqlwIH.js';
+import { S as SupportedBlock } from './palette-DFTL0Han.js';
+export { aa as SupportedBlockType } from './palette-DFTL0Han.js';
 import 'react';
 import 'slack-web-api-client';
 

package/dist/index.cjs

@@ -4631,6 +4631,40 @@ function SendDialog({
     ] })
   ] }) });
 }
+function BlockActionButtons({
+  actions,
+  position,
+  variant
+}) {
+  if (!actions?.length || !position) {
+    return null;
+  }
+  return actions.map(
+    (action) => variant === "toolbar" ? /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": action.label,
+          onClick: () => action.onSelect(position),
+          className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring [&_svg]:h-3.5 [&_svg]:w-3.5",
+          children: action.icon
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: action.label })
+    ] }, action.id) : /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": action.label,
+        onClick: () => action.onSelect(position),
+        className: "flex h-9 w-9 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground [&_svg]:h-4 [&_svg]:w-4",
+        children: action.icon
+      },
+      action.id
+    )
+  );
+}
 var RadioGroup = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Root, { className: cn("grid gap-2", className), ...props, ref }));
 RadioGroup.displayName = RadioGroupPrimitive__namespace.Root.displayName;
 var RadioGroupItem = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -10465,7 +10499,9 @@ function BlockRow({
   index,
   total,
   onReorder,
-  isPaletteDrag = false
+  isPaletteDrag = false,
+  position,
+  blockActions
 }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver } = sortable.useSortable({
     id: builderBlock.id
@@ -10485,6 +10521,8 @@ function BlockRow({
     {
       ref: setNodeRef,
       style,
+      "data-bk-block-index": position?.index,
+      "data-bk-child-index": position?.childIndex ?? void 0,
       className: cn("group relative mb-2 last:mb-0 hover:z-10 md:mb-0", isDragging && "opacity-40"),
       children: [
         showDropIndicator ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -10617,6 +10655,7 @@ function BlockRow({
                     /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Move down" })
                   ] })
                 ] }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx(BlockActionButtons, { actions: blockActions, position, variant: "toolbar" }),
                 /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
@@ -10679,6 +10718,7 @@ function BlockRow({
                 children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4" })
               }
             ) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(BlockActionButtons, { actions: blockActions, position, variant: "inline" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
@@ -10760,7 +10800,8 @@ function ContainerRow({
   onReorder,
   index,
   total,
-  isPaletteDrag = false
+  isPaletteDrag = false,
+  blockActions
 }) {
   const { id } = builderBlock;
   const block = builderBlock.block;
@@ -10773,11 +10814,13 @@ function ContainerRow({
   const { setNodeRef: setBodyRef, isOver: isBodyOver } = core.useDroppable({ id: containerBodyId(id) });
   const style = { transform: utilities.CSS.Transform.toString(transform), transition };
   const icon = block.icon && "image_url" in block.icon ? block.icon.image_url : void 0;
+  const position = typeof index === "number" ? { index, childIndex: null } : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref: setNodeRef,
       style,
+      "data-bk-block-index": index,
       className: cn("group/container relative mb-2 last:mb-0 hover:z-10", isDragging && "opacity-40"),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10858,7 +10901,9 @@ function ContainerRow({
                         index: idx,
                         total: children.length,
                         onReorder,
-                        isPaletteDrag
+                        isPaletteDrag,
+                        position: typeof index === "number" ? { index, childIndex: idx } : void 0,
+                        blockActions
                       },
                       child.id
                     )),
@@ -10901,6 +10946,7 @@ function ContainerRow({
                 /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton2, { label: "Move up", disabled: index === 0, onClick: () => onReorder(id, index - 1), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-3.5 w-3.5" }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton2, { label: "Move down", disabled: index >= total - 1, onClick: () => onReorder(id, index + 1), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-3.5 w-3.5" }) })
               ] }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(BlockActionButtons, { actions: blockActions, position, variant: "toolbar" }),
               /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton2, { label: "Edit", onClick: () => onOpenBlockChange?.(id), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3.5 w-3.5" }) }),
               /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton2, { label: "Duplicate", onClick: () => onDuplicate(id), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-3.5 w-3.5" }) }),
               /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton2, { label: "Delete", destructive: true, onClick: () => onDelete(id), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" }) })
@@ -10910,6 +10956,7 @@ function ContainerRow({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex items-center justify-between gap-2 rounded-md border border-dashed bg-muted/40 px-2 py-1 md:hidden", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[11px] font-medium text-muted-foreground", children: "Container" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(BlockActionButtons, { actions: blockActions, position, variant: "inline" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
@@ -10991,7 +11038,8 @@ function Surface({
   onDelete,
   onReorder,
   isPaletteDrag = false,
-  onOpenPalette
+  onOpenPalette,
+  blockActions
 }) {
   const { setNodeRef, isOver } = core.useDroppable({ id: SURFACE_DROPPABLE_ID });
   const isDark = previewTheme === "dark";
@@ -11023,7 +11071,8 @@ function Surface({
               index: idx,
               total: blocks.length,
               onReorder,
-              isPaletteDrag
+              isPaletteDrag,
+              blockActions
             },
             block.id
           ) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -11041,7 +11090,9 @@ function Surface({
               index: idx,
               total: blocks.length,
               onReorder,
-              isPaletteDrag
+              isPaletteDrag,
+              position: { index: idx, childIndex: null },
+              blockActions
             },
             block.id
           )
@@ -11799,6 +11850,7 @@ function BlockKitchen(props) {
     onChange,
     onValidationChange,
     previewHooks,
+    blockActions,
     customEmojis,
     mentions,
     loadChannels,
@@ -12179,7 +12231,8 @@ function BlockKitchen(props) {
                     onDelete: removeBlock,
                     onReorder: reorderBlock,
                     isPaletteDrag: activePaletteVariant !== null,
-                    onOpenPalette: () => setPaletteOpen(true)
+                    onOpenPalette: () => setPaletteOpen(true),
+                    blockActions
                   }
                 ) })
               ] })