@tightknitai/block-kitchen 0.10.8 → 0.10.9

package/dist/index.js

@@ -6082,12 +6082,44 @@ function HeaderEditor({ block, onChange }) {
   ] });
 }
 function ImageEditor({ block, onChange }) {
-  if (!("image_url" in block)) {
-    return /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "This image references a Slack file. Not editable in the visual builder." });
-  }
+  const source = "slack_file" in block ? "slack_file" : "url";
   const titleText = block.title?.text ?? "";
+  const setSource = (next) => {
+    if (next === source) {
+      return;
+    }
+    if (next === "url") {
+      const { slack_file: _omit, ...rest } = block;
+      onChange({ image_url: "", ...rest });
+    } else {
+      const { image_url: _omit, ...rest } = block;
+      onChange({ slack_file: { id: "" }, ...rest });
+    }
+  };
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsx(EditorField, { label: "Image URL", help: "A publicly accessible image URL (PNG, JPG, GIF).", htmlFor: "img-url", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(
+      EditorField,
+      {
+        label: "Image source",
+        help: "Where the image comes from: a public URL, or a file already uploaded to your Slack workspace.",
+        children: /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            value: source,
+            onValueChange: (v) => setSource(v),
+            className: "flex flex-row flex-wrap gap-3",
+            children: [
+              ["url", "Public URL"],
+              ["slack_file", "Slack file"]
+            ].map(([value, label]) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(RadioGroupItem, { value, id: `img-source-${value}` }),
+              /* @__PURE__ */ jsx(Label, { htmlFor: `img-source-${value}`, className: "text-xs", children: label })
+            ] }, value))
+          }
+        )
+      }
+    ),
+    "slack_file" in block ? /* @__PURE__ */ jsx(SlackFileFields, { block, onChange }) : /* @__PURE__ */ jsx(EditorField, { label: "Image URL", help: "A publicly accessible image URL (PNG, JPG, GIF).", htmlFor: "img-url", children: /* @__PURE__ */ jsx(
       Input,
       {
         id: "img-url",
@@ -6131,6 +6163,51 @@ function ImageEditor({ block, onChange }) {
     ) })
   ] });
 }
+function SlackFileFields({
+  block,
+  onChange
+}) {
+  const fileId = "id" in block.slack_file ? block.slack_file.id : "";
+  const fileUrl = "url" in block.slack_file ? block.slack_file.url : "";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "References a file already uploaded to your Slack workspace. The preview can't render workspace files \u2014 switch the source to Public URL to see the image here." }),
+    /* @__PURE__ */ jsx(
+      EditorField,
+      {
+        label: "File ID",
+        help: "The Slack file's ID. Slack accepts an ID or a URL, not both, so filling this clears File URL.",
+        htmlFor: "img-file-id",
+        children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "img-file-id",
+            value: fileId,
+            placeholder: "e.g. F0123456789",
+            onChange: (e) => onChange({ ...block, slack_file: { id: e.target.value } })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EditorField,
+      {
+        label: "File URL",
+        help: "The file's Slack-hosted URL. Filling this clears File ID.",
+        htmlFor: "img-file-url",
+        children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "img-file-url",
+            type: "url",
+            value: fileUrl,
+            placeholder: "e.g. https://files.slack.com/files-pri/T0123-F0123/image.png",
+            onChange: (e) => onChange({ ...block, slack_file: { url: e.target.value } })
+          }
+        )
+      }
+    )
+  ] });
+}
 function InputEditor({ block, onChange }) {
   const updateElement = (next) => {
     onChange({ ...block, element: next });