@tightknitai/block-kitchen 0.8.4 → 0.8.6

package/dist/index.d.cts

@@ -1,8 +1,7 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { B as BlockKitchenProps, E as Template, q as PreviewSurface, r as PreviewTheme } from './palette-Dco-CVMi.cjs';
-export { A as AlertBlock, a as AlertLevel, b as BrandPreset, c as BrandTheme, d as BrandTokens, e as BuilderBlock, C as CardBlock, f as CarouselBlock, g as ChannelOption, h as ContextActionsBlock, i as ContextActionsElement, j as CustomEmoji, F as FeedbackButtonSubobject, k as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, l as IconButtonIcon, m as InputBlock, M as MarkdownBlock, P as PaletteSection, n as PaletteVariant, o as PlanBlock, p as PreviewHooks, S as SendAsUserStatus, s as SendPayload, t as SendResult, u as SupportedBlock, v as SupportedBlockType, w as SupportedHeaderBlock, T as TableBlock, x as TableCell, y as TableColumnSetting, z as TaskCardBlock, D as TaskCardStatus, U as UrlSourceElement, V as VideoBlock, J as defaultPalette, K as extraAlertVariant, L as legacyInputVariants } from './palette-Dco-CVMi.cjs';
+import * as react from 'react';
+import { B as BlockKitchenProps, E as Template, q as PreviewSurface, r as PreviewTheme } from './palette-DToUE_3J.cjs';
+export { A as AlertBlock, a as AlertLevel, b as BrandPreset, c as BrandTheme, d as BrandTokens, e as BuilderBlock, C as CardBlock, f as CarouselBlock, g as ChannelOption, h as ContextActionsBlock, i as ContextActionsElement, j as CustomEmoji, F as FeedbackButtonSubobject, k as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, l as IconButtonIcon, m as InputBlock, M as MarkdownBlock, P as PaletteSection, n as PaletteVariant, o as PlanBlock, p as PreviewHooks, S as SendAsUserStatus, s as SendPayload, t as SendResult, u as SupportedBlock, v as SupportedBlockType, w as SupportedHeaderBlock, T as TableBlock, x as TableCell, y as TableColumnSetting, z as TaskCardBlock, D as TaskCardStatus, U as UrlSourceElement, V as VideoBlock, J as defaultPalette, K as extraAlertVariant, L as legacyInputVariants } from './palette-DToUE_3J.cjs';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.cjs';
-import 'react';
 import 'slack-web-api-client';
 
 /**
@@ -13,7 +12,7 @@ import 'slack-web-api-client';
  * @param props - {@link BlockKitchenProps}
  * @returns the rendered Block Kit Builder
  */
-declare function BlockKitchen(props: BlockKitchenProps): react_jsx_runtime.JSX.Element;
+declare function BlockKitchen(props: BlockKitchenProps): react.JSX.Element;
 
 /**
  * Standalone, page-sized picker that displays {@link Template}s as a
@@ -50,6 +49,6 @@ declare function TemplatePicker({ templates, onSelect, surface, theme, heading,
     heading?: string;
     emptyLabel?: string;
     className?: string;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 export { BlockKitchen, BlockKitchenProps, PreviewSurface, PreviewTheme, Template, TemplatePicker };

package/dist/index.d.ts

@@ -1,8 +1,7 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { B as BlockKitchenProps, E as Template, q as PreviewSurface, r as PreviewTheme } from './palette-Dco-CVMi.js';
-export { A as AlertBlock, a as AlertLevel, b as BrandPreset, c as BrandTheme, d as BrandTokens, e as BuilderBlock, C as CardBlock, f as CarouselBlock, g as ChannelOption, h as ContextActionsBlock, i as ContextActionsElement, j as CustomEmoji, F as FeedbackButtonSubobject, k as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, l as IconButtonIcon, m as InputBlock, M as MarkdownBlock, P as PaletteSection, n as PaletteVariant, o as PlanBlock, p as PreviewHooks, S as SendAsUserStatus, s as SendPayload, t as SendResult, u as SupportedBlock, v as SupportedBlockType, w as SupportedHeaderBlock, T as TableBlock, x as TableCell, y as TableColumnSetting, z as TaskCardBlock, D as TaskCardStatus, U as UrlSourceElement, V as VideoBlock, J as defaultPalette, K as extraAlertVariant, L as legacyInputVariants } from './palette-Dco-CVMi.js';
+import * as react from 'react';
+import { B as BlockKitchenProps, E as Template, q as PreviewSurface, r as PreviewTheme } from './palette-DToUE_3J.js';
+export { A as AlertBlock, a as AlertLevel, b as BrandPreset, c as BrandTheme, d as BrandTokens, e as BuilderBlock, C as CardBlock, f as CarouselBlock, g as ChannelOption, h as ContextActionsBlock, i as ContextActionsElement, j as CustomEmoji, F as FeedbackButtonSubobject, k as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, l as IconButtonIcon, m as InputBlock, M as MarkdownBlock, P as PaletteSection, n as PaletteVariant, o as PlanBlock, p as PreviewHooks, S as SendAsUserStatus, s as SendPayload, t as SendResult, u as SupportedBlock, v as SupportedBlockType, w as SupportedHeaderBlock, T as TableBlock, x as TableCell, y as TableColumnSetting, z as TaskCardBlock, D as TaskCardStatus, U as UrlSourceElement, V as VideoBlock, J as defaultPalette, K as extraAlertVariant, L as legacyInputVariants } from './palette-DToUE_3J.js';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.js';
-import 'react';
 import 'slack-web-api-client';
 
 /**
@@ -13,7 +12,7 @@ import 'slack-web-api-client';
  * @param props - {@link BlockKitchenProps}
  * @returns the rendered Block Kit Builder
  */
-declare function BlockKitchen(props: BlockKitchenProps): react_jsx_runtime.JSX.Element;
+declare function BlockKitchen(props: BlockKitchenProps): react.JSX.Element;
 
 /**
  * Standalone, page-sized picker that displays {@link Template}s as a
@@ -50,6 +49,6 @@ declare function TemplatePicker({ templates, onSelect, surface, theme, heading,
     heading?: string;
     emptyLabel?: string;
     className?: string;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 export { BlockKitchen, BlockKitchenProps, PreviewSurface, PreviewTheme, Template, TemplatePicker };

package/dist/index.js

@@ -1640,6 +1640,12 @@ function isSafeHref(value) {
   }
   return SAFE_LINK_PROTOCOLS.test(scheme);
 }
+function hasExplicitSafeScheme(value) {
+  if (typeof value !== "string" || value.length === 0) {
+    return false;
+  }
+  return getScheme(value) !== null && isSafeHref(value);
+}
 function isSafeImageSrc(value) {
   if (value === null || value === void 0) {
     return false;
@@ -2238,6 +2244,18 @@ function IssuesSheet({
     ] })
   ] }) });
 }
+
+// src/lib/parse-blocks-input.ts
+var BLOCKS_INPUT_SHAPE_ERROR = "Expected an array of blocks, or an object with a `blocks` array.";
+function unwrapBlocksInput(parsed) {
+  if (Array.isArray(parsed)) {
+    return parsed;
+  }
+  if (parsed && typeof parsed === "object" && Array.isArray(parsed.blocks)) {
+    return parsed.blocks;
+  }
+  return null;
+}
 var MAX_JSON_BYTES = 1024 * 1024;
 function JsonDrawer({
   open,
@@ -2276,14 +2294,15 @@ function JsonDrawer({
       setValidationErrors([]);
       return;
     }
-    if (!Array.isArray(parsed)) {
-      setParseError("Top-level value must be an array of blocks.");
+    const blocks2 = unwrapBlocksInput(parsed);
+    if (!blocks2) {
+      setParseError(BLOCKS_INPUT_SHAPE_ERROR);
       setValidationErrors([]);
       return;
     }
     setParseError(null);
-    onApply(parsed);
-    const result = validateBlockKit(parsed, {
+    onApply(blocks2);
+    const result = validateBlockKit(blocks2, {
       target: "blocks",
       surface: "message"
     });
@@ -2661,6 +2680,7 @@ function SendDialog({
   loadChannels,
   loadSendAsUserStatus,
   onSend,
+  confirmSendLabel = "Send",
   errorCount,
   onShowIssues
 }) {
@@ -2834,7 +2854,7 @@ function SendDialog({
           type: "button",
           onClick: handleSubmit,
           disabled: status.kind === "sending" || !channelId || blocks.length === 0 || errorCount > 0,
-          children: status.kind === "sending" ? "Sending\u2026" : "Send"
+          children: status.kind === "sending" ? "Sending\u2026" : confirmSendLabel
         }
       )
     ] })
@@ -5372,6 +5392,17 @@ function blockElementToPM(el, resolveEmoji) {
   }
   return null;
 }
+function pushTextWithHardBreaks(out, text, marks) {
+  const segments = text.split("\n");
+  segments.forEach((segment, i) => {
+    if (i > 0) {
+      out.push({ type: "hardBreak" });
+    }
+    if (segment) {
+      out.push({ type: "text", text: segment, marks });
+    }
+  });
+}
 function inlinesToPM(inlines, resolveEmoji) {
   const out = [];
   for (const inline of inlines) {
@@ -5379,8 +5410,7 @@ function inlinesToPM(inlines, resolveEmoji) {
       if (!inline.text) {
         continue;
       }
-      const marks = styleToMarks(inline.style);
-      out.push({ type: "text", text: inline.text, marks });
+      pushTextWithHardBreaks(out, inline.text, styleToMarks(inline.style));
     } else if (inline.type === "emoji") {
       const attrs = resolveEmoji(inline);
       if (!attrs.name) {
@@ -5517,6 +5547,10 @@ function proseMirrorInlinesToRichTextElements(nodes) {
       out.push(emoji);
       continue;
     }
+    if (node.type === "hardBreak") {
+      out.push({ type: "text", text: "\n" });
+      continue;
+    }
     if (node.type !== "text" || !node.text) {
       continue;
     }
@@ -6204,6 +6238,43 @@ function LossyBanner({ reasons }) {
     ] })
   ] });
 }
+var RICH_TEXT_INPUT_RULE_ALLOWLIST = ["bold", "italic", "strike", "code"];
+function buildRichTextExtensions() {
+  return [
+    StarterKit.configure({
+      heading: false,
+      horizontalRule: false,
+      // StarterKit bundles its own Link extension (enabled by default),
+      // which would register a second, unconfigured `link` mark and a
+      // duplicate autolinker alongside the hardened one we add below.
+      // Disable it so our single, security-configured Link is the only
+      // link extension in the schema.
+      link: false
+    }),
+    EmojiNode,
+    Link.configure({
+      openOnClick: false,
+      autolink: true,
+      defaultProtocol: "https",
+      // Pin TipTap's link allowlist to the same set as our shared
+      // `isSafeHref` helper. The upstream default also includes
+      // ftp/cid/callto which we don't expect inside Slack content.
+      protocols: ["http", "https", "mailto", "tel", "sms", "xmpp"],
+      // Belt-and-suspenders: even if a downstream contributor widens
+      // `protocols` later, our isSafeHref guard rejects everything
+      // outside the safe-link set. setLink and toggleLink both gate
+      // on this hook before applying the mark.
+      isAllowedUri: (url) => isSafeHref(url),
+      // Only auto-link tokens that carry an explicit, safe scheme. TipTap's
+      // default would link any `host.tld` (e.g. `2.xyz`, `report.zip`,
+      // `logo.png`) because the suffix is a real gTLD, which is wrong for
+      // free-form Slack message text. Deliberate links can still be added
+      // via the link button.
+      shouldAutoLink: hasExplicitSafeScheme,
+      HTMLAttributes: { rel: "noreferrer noopener", target: "_blank" }
+    })
+  ];
+}
 function RichTextWysiwygEditor({ block, onChange }) {
   const lastEmittedRef = useRef(null);
   const { byName: customByName } = useCustomEmojis();
@@ -6229,28 +6300,8 @@ function RichTextWysiwygEditor({ block, onChange }) {
     [onChange]
   );
   const editor = useEditor({
-    extensions: [
-      StarterKit.configure({
-        heading: false,
-        horizontalRule: false
-      }),
-      EmojiNode,
-      Link.configure({
-        openOnClick: false,
-        autolink: true,
-        defaultProtocol: "https",
-        // Pin TipTap's link allowlist to the same set as our shared
-        // `isSafeHref` helper. The upstream default also includes
-        // ftp/cid/callto which we don't expect inside Slack content.
-        protocols: ["http", "https", "mailto", "tel", "sms", "xmpp"],
-        // Belt-and-suspenders: even if a downstream contributor widens
-        // `protocols` later, our isSafeHref guard rejects everything
-        // outside the safe-link set. setLink and toggleLink both gate
-        // on this hook before applying the mark.
-        isAllowedUri: (url) => isSafeHref(url),
-        HTMLAttributes: { rel: "noreferrer noopener", target: "_blank" }
-      })
-    ],
+    extensions: buildRichTextExtensions(),
+    enableInputRules: RICH_TEXT_INPUT_RULE_ALLOWLIST,
     content: richTextToProseMirror(block, resolveEmoji),
     editorProps: {
       attributes: {
@@ -7877,7 +7928,8 @@ function Toolbar2({
   allowedSurfaces,
   showThemeControl = true,
   docsLink,
-  errorCount
+  errorCount,
+  sendButtonLabel = "Send"
 }) {
   const activeTheme = THEME_OPTIONS.find((t) => t.value === previewTheme) ?? THEME_OPTIONS[0];
   const activeSurface = SURFACE_OPTIONS.find((s) => s.value === previewSurface) ?? SURFACE_OPTIONS[0];
@@ -7967,7 +8019,7 @@ function Toolbar2({
           variant: "ghost",
           size: "sm",
           onClick: onOpenIssues,
-          className: "text-destructive hover:text-destructive",
+          className: "border border-red-200! bg-red-50 text-red-700 hover:bg-red-100 hover:text-red-700",
           "aria-label": `${errorCount} ${errorCount === 1 ? "issue" : "issues"}`,
           children: [
             /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3.5 w-3.5" }),
@@ -8060,9 +8112,9 @@ function Toolbar2({
           ) : null
         ] }) })
       ] }),
-      /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: onOpenSend, disabled: !canSend, "aria-label": "Send", children: [
+      /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: onOpenSend, disabled: !canSend, "aria-label": sendButtonLabel, children: [
         /* @__PURE__ */ jsx(Send, { className: "h-3.5 w-3.5" }),
-        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Send" })
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: sendButtonLabel })
       ] })
     ] })
   ] });
@@ -8188,6 +8240,9 @@ function BlockKitchen(props) {
     showThemeControl = true,
     docsLink,
     defaultPreviewTheme = "light",
+    previewTheme: controlledPreviewTheme,
+    sendButtonLabel,
+    confirmSendLabel,
     theme
   } = props;
   const paletteSections = useMemo(() => {
@@ -8215,7 +8270,9 @@ function BlockKitchen(props) {
   const [issuesOpen, setIssuesOpen] = useState(false);
   const [paletteOpen, setPaletteOpen] = useState(false);
   const [openBlockId, setOpenBlockId] = useState(null);
-  const [previewTheme, setPreviewTheme] = useState(defaultPreviewTheme);
+  const [uncontrolledPreviewTheme, setUncontrolledPreviewTheme] = useState(defaultPreviewTheme);
+  const isPreviewThemeControlled = controlledPreviewTheme !== void 0;
+  const previewTheme = controlledPreviewTheme ?? uncontrolledPreviewTheme;
   const [previewSurface, setPreviewSurface] = useState(allowedSurfaces[0]);
   const [activePaletteVariantId, setActivePaletteVariantId] = useState(null);
   const isMobile = useIsMobile();
@@ -8297,12 +8354,13 @@ function BlockKitchen(props) {
               canClear: blocks.length > 0,
               errorCount: validation.total,
               previewTheme,
-              onPreviewThemeChange: setPreviewTheme,
+              onPreviewThemeChange: setUncontrolledPreviewTheme,
               previewSurface,
               onPreviewSurfaceChange: setPreviewSurface,
               allowedSurfaces,
-              showThemeControl,
-              docsLink
+              showThemeControl: isPreviewThemeControlled ? false : showThemeControl,
+              docsLink,
+              sendButtonLabel
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 items-stretch", children: [
@@ -8378,6 +8436,7 @@ function BlockKitchen(props) {
             loadChannels,
             loadSendAsUserStatus,
             onSend,
+            confirmSendLabel,
             errorCount: validation.total,
             onShowIssues: () => {
               setSendOpen(false);