@btst/stack 2.8.1 → 2.9.0

package/README.md

@@ -37,6 +37,7 @@ Enable the features you need and keep building your product.
 | **Form Builder** | Dynamic form builder with drag-and-drop editor, submissions, and validation |
 | **UI Builder** | Visual drag-and-drop page builder with component registry and public rendering |
 | **Kanban** | Project management with boards, columns, tasks, drag-and-drop, and priority levels |
+| **Media** | Media library with uploads, folders, picker UI, URL registration, and reusable image inputs |
 | **OpenAPI** | Auto-generated API documentation with interactive Scalar UI |
 | **Route Docs** | Auto-generated client route documentation with interactive navigation |
 | **Better Auth UI** | Beautiful shadcn/ui authentication components for better-auth |
@@ -121,8 +122,8 @@ Supports Prisma, Drizzle, MongoDB and Kysely SQL dialects.
 Each plugin's UI layer is available as a [shadcn registry](https://ui.shadcn.com/docs/registry) block. Use it to **eject and fully customize** the page components while keeping all data-fetching and API logic from `@btst/stack`:
 
 ```bash
-# Install a single plugin's UI
-npx shadcn@latest add https://github.com/better-stack-ai/better-stack/blob/main/packages/stack/registry/btst-blog.json
+# Install a single plugin's UI (for example, Media)
+npx shadcn@latest add https://github.com/better-stack-ai/better-stack/blob/main/packages/stack/registry/btst-media.json
 
 # Or install the full collection
 npx shadcn@latest add https://github.com/better-stack-ai/better-stack/blob/main/packages/stack/registry/registry.json

package/dist/components/markdown/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentType } from 'react';
+import { ComponentType, MutableRefObject } from 'react';
 
 type MarkdownContentProps = {
     /** The markdown string to render */
@@ -23,8 +23,21 @@ interface MarkdownEditorProps {
     uploadImage?: (file: File) => Promise<string>;
     /** Placeholder text shown when the editor is empty. */
     placeholder?: string;
+    /**
+     * Optional ref that will be populated with an `insertImage(url)` function.
+     * Call `insertImageRef.current?.(url)` to programmatically insert an image.
+     * The URL must be a valid, percent-encoded URL (storage adapters guarantee this).
+     */
+    insertImageRef?: MutableRefObject<((url: string) => void) | null>;
+    /**
+     * When provided, clicking the Crepe image block's upload area opens a media
+     * picker instead of the native file dialog. The callback receives a `setUrl`
+     * function — call it with the chosen URL to set it into the image block.
+     * The URL must be a valid, percent-encoded URL (storage adapters guarantee this).
+     */
+    openMediaPickerForImageBlock?: (setUrl: (url: string) => void) => void;
 }
-declare function MarkdownEditor({ value, onChange, className, uploadImage, placeholder, }: MarkdownEditorProps): react_jsx_runtime.JSX.Element;
+declare function MarkdownEditor({ value, onChange, className, uploadImage, placeholder, insertImageRef, openMediaPickerForImageBlock, }: MarkdownEditorProps): react_jsx_runtime.JSX.Element;
 
 export { MarkdownContent, MarkdownEditor };
 export type { MarkdownContentProps, MarkdownEditorProps };

package/dist/components/markdown/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentType } from 'react';
+import { ComponentType, MutableRefObject } from 'react';
 
 type MarkdownContentProps = {
     /** The markdown string to render */
@@ -23,8 +23,21 @@ interface MarkdownEditorProps {
     uploadImage?: (file: File) => Promise<string>;
     /** Placeholder text shown when the editor is empty. */
     placeholder?: string;
+    /**
+     * Optional ref that will be populated with an `insertImage(url)` function.
+     * Call `insertImageRef.current?.(url)` to programmatically insert an image.
+     * The URL must be a valid, percent-encoded URL (storage adapters guarantee this).
+     */
+    insertImageRef?: MutableRefObject<((url: string) => void) | null>;
+    /**
+     * When provided, clicking the Crepe image block's upload area opens a media
+     * picker instead of the native file dialog. The callback receives a `setUrl`
+     * function — call it with the chosen URL to set it into the image block.
+     * The URL must be a valid, percent-encoded URL (storage adapters guarantee this).
+     */
+    openMediaPickerForImageBlock?: (setUrl: (url: string) => void) => void;
 }
-declare function MarkdownEditor({ value, onChange, className, uploadImage, placeholder, }: MarkdownEditorProps): react_jsx_runtime.JSX.Element;
+declare function MarkdownEditor({ value, onChange, className, uploadImage, placeholder, insertImageRef, openMediaPickerForImageBlock, }: MarkdownEditorProps): react_jsx_runtime.JSX.Element;
 
 export { MarkdownContent, MarkdownEditor };
 export type { MarkdownContentProps, MarkdownEditorProps };

package/dist/components/markdown/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentType } from 'react';
+import { ComponentType, MutableRefObject } from 'react';
 
 type MarkdownContentProps = {
     /** The markdown string to render */
@@ -23,8 +23,21 @@ interface MarkdownEditorProps {
     uploadImage?: (file: File) => Promise<string>;
     /** Placeholder text shown when the editor is empty. */
     placeholder?: string;
+    /**
+     * Optional ref that will be populated with an `insertImage(url)` function.
+     * Call `insertImageRef.current?.(url)` to programmatically insert an image.
+     * The URL must be a valid, percent-encoded URL (storage adapters guarantee this).
+     */
+    insertImageRef?: MutableRefObject<((url: string) => void) | null>;
+    /**
+     * When provided, clicking the Crepe image block's upload area opens a media
+     * picker instead of the native file dialog. The callback receives a `setUrl`
+     * function — call it with the chosen URL to set it into the image block.
+     * The URL must be a valid, percent-encoded URL (storage adapters guarantee this).
+     */
+    openMediaPickerForImageBlock?: (setUrl: (url: string) => void) => void;
 }
-declare function MarkdownEditor({ value, onChange, className, uploadImage, placeholder, }: MarkdownEditorProps): react_jsx_runtime.JSX.Element;
+declare function MarkdownEditor({ value, onChange, className, uploadImage, placeholder, insertImageRef, openMediaPickerForImageBlock, }: MarkdownEditorProps): react_jsx_runtime.JSX.Element;
 
 export { MarkdownContent, MarkdownEditor };
 export type { MarkdownContentProps, MarkdownEditorProps };

package/dist/packages/stack/src/plugins/blog/client/components/forms/image-field.cjs

@@ -18,8 +18,37 @@ function FeaturedImageField({
 }) {
   const fileInputRef = React.useRef(null);
   const [isUploading, setIsUploading] = React.useState(false);
-  const { uploadImage, Image, localization } = context.usePluginOverrides("blog", { localization: index.BLOG_LOCALIZATION });
+  const {
+    uploadImage,
+    Image,
+    localization,
+    imageInputField: ImageInput
+  } = context.usePluginOverrides(
+    "blog",
+    { localization: index.BLOG_LOCALIZATION }
+  );
   const ImageComponent = Image ? Image : DefaultImage;
+  if (ImageInput) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(form.FormLabel, { children: [
+        localization.BLOG_FORMS_FEATURED_IMAGE_LABEL,
+        isRequired && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-destructive", children: [
+          " ",
+          localization.BLOG_FORMS_FEATURED_IMAGE_REQUIRED_ASTERISK
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        ImageInput,
+        {
+          value: value || "",
+          onChange,
+          isRequired
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(form.FormDescription, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
+    ] });
+  }
   const handleImageUpload = async (event) => {
     const file = event.target.files?.[0];
     if (!file) return;

package/dist/packages/stack/src/plugins/blog/client/components/forms/image-field.mjs

@@ -16,8 +16,37 @@ function FeaturedImageField({
 }) {
   const fileInputRef = useRef(null);
   const [isUploading, setIsUploading] = useState(false);
-  const { uploadImage, Image, localization } = usePluginOverrides("blog", { localization: BLOG_LOCALIZATION });
+  const {
+    uploadImage,
+    Image,
+    localization,
+    imageInputField: ImageInput
+  } = usePluginOverrides(
+    "blog",
+    { localization: BLOG_LOCALIZATION }
+  );
   const ImageComponent = Image ? Image : DefaultImage;
+  if (ImageInput) {
+    return /* @__PURE__ */ jsxs(FormItem, { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs(FormLabel, { children: [
+        localization.BLOG_FORMS_FEATURED_IMAGE_LABEL,
+        isRequired && /* @__PURE__ */ jsxs("span", { className: "text-destructive", children: [
+          " ",
+          localization.BLOG_FORMS_FEATURED_IMAGE_REQUIRED_ASTERISK
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+        ImageInput,
+        {
+          value: value || "",
+          onChange,
+          isRequired
+        }
+      ) }),
+      /* @__PURE__ */ jsx(FormDescription, {}),
+      /* @__PURE__ */ jsx(FormMessage, {})
+    ] });
+  }
   const handleImageUpload = async (event) => {
     const file = event.target.files?.[0];
     if (!file) return;

package/dist/packages/stack/src/plugins/blog/client/components/forms/markdown-editor-with-overrides.cjs

@@ -2,22 +2,62 @@
 'use strict';
 
 const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
 const context = require('@btst/stack/context');
 const index = require('../../localization/index.cjs');
 const markdownEditor = require('./markdown-editor.cjs');
 
 function MarkdownEditorWithOverrides(props) {
-  const { uploadImage, localization } = context.usePluginOverrides("blog", {
-    localization: index.BLOG_LOCALIZATION
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    markdownEditor.MarkdownEditor,
-    {
-      ...props,
-      uploadImage,
-      placeholder: localization?.BLOG_FORMS_EDITOR_PLACEHOLDER
+  const {
+    uploadImage,
+    imagePicker: ImagePickerTrigger,
+    localization
+  } = context.usePluginOverrides(
+    "blog",
+    { localization: index.BLOG_LOCALIZATION }
+  );
+  const insertImageRef = React.useRef(null);
+  const pendingInsertUrlRef = React.useRef(null);
+  const triggerContainerRef = React.useRef(null);
+  const handleSelect = React.useCallback((url) => {
+    if (pendingInsertUrlRef.current) {
+      pendingInsertUrlRef.current(url);
+      pendingInsertUrlRef.current = null;
+    } else {
+      insertImageRef.current?.(url);
     }
+  }, []);
+  const openMediaPickerForImageBlock = React.useCallback(
+    (setUrl) => {
+      pendingInsertUrlRef.current = setUrl;
+      const btn = triggerContainerRef.current?.querySelector(
+        '[data-testid="open-media-picker"]'
+      );
+      btn?.click();
+    },
+    []
   );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      markdownEditor.MarkdownEditor,
+      {
+        ...props,
+        uploadImage,
+        placeholder: localization?.BLOG_FORMS_EDITOR_PLACEHOLDER,
+        insertImageRef,
+        openMediaPickerForImageBlock: ImagePickerTrigger ? openMediaPickerForImageBlock : void 0
+      }
+    ),
+    ImagePickerTrigger && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: triggerContainerRef,
+        className: "flex justify-end mt-1",
+        "data-testid": "image-picker-trigger",
+        children: /* @__PURE__ */ jsxRuntime.jsx(ImagePickerTrigger, { onSelect: handleSelect })
+      }
+    )
+  ] });
 }
 
 exports.MarkdownEditorWithOverrides = MarkdownEditorWithOverrides;

package/dist/packages/stack/src/plugins/blog/client/components/forms/markdown-editor-with-overrides.mjs

@@ -1,21 +1,61 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useCallback } from 'react';
 import { usePluginOverrides } from '@btst/stack/context';
 import { BLOG_LOCALIZATION } from '../../localization/index.mjs';
 import { MarkdownEditor } from './markdown-editor.mjs';
 
 function MarkdownEditorWithOverrides(props) {
-  const { uploadImage, localization } = usePluginOverrides("blog", {
-    localization: BLOG_LOCALIZATION
-  });
-  return /* @__PURE__ */ jsx(
-    MarkdownEditor,
-    {
-      ...props,
-      uploadImage,
-      placeholder: localization?.BLOG_FORMS_EDITOR_PLACEHOLDER
+  const {
+    uploadImage,
+    imagePicker: ImagePickerTrigger,
+    localization
+  } = usePluginOverrides(
+    "blog",
+    { localization: BLOG_LOCALIZATION }
+  );
+  const insertImageRef = useRef(null);
+  const pendingInsertUrlRef = useRef(null);
+  const triggerContainerRef = useRef(null);
+  const handleSelect = useCallback((url) => {
+    if (pendingInsertUrlRef.current) {
+      pendingInsertUrlRef.current(url);
+      pendingInsertUrlRef.current = null;
+    } else {
+      insertImageRef.current?.(url);
     }
+  }, []);
+  const openMediaPickerForImageBlock = useCallback(
+    (setUrl) => {
+      pendingInsertUrlRef.current = setUrl;
+      const btn = triggerContainerRef.current?.querySelector(
+        '[data-testid="open-media-picker"]'
+      );
+      btn?.click();
+    },
+    []
   );
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx(
+      MarkdownEditor,
+      {
+        ...props,
+        uploadImage,
+        placeholder: localization?.BLOG_FORMS_EDITOR_PLACEHOLDER,
+        insertImageRef,
+        openMediaPickerForImageBlock: ImagePickerTrigger ? openMediaPickerForImageBlock : void 0
+      }
+    ),
+    ImagePickerTrigger && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerContainerRef,
+        className: "flex justify-end mt-1",
+        "data-testid": "image-picker-trigger",
+        children: /* @__PURE__ */ jsx(ImagePickerTrigger, { onSelect: handleSelect })
+      }
+    )
+  ] });
 }
 
 export { MarkdownEditorWithOverrides };

package/dist/packages/stack/src/plugins/blog/client/components/forms/markdown-editor.cjs

@@ -16,7 +16,9 @@ function MarkdownEditor({
   onChange,
   className,
   uploadImage,
-  placeholder = "Write something..."
+  placeholder = "Write something...",
+  insertImageRef,
+  openMediaPickerForImageBlock
 }) {
   const containerRef = React.useRef(null);
   const crepeRef = React.useRef(null);
@@ -24,12 +26,25 @@ function MarkdownEditor({
   const [isReady, setIsReady] = React.useState(false);
   const onChangeRef = React.useRef(onChange);
   const initialValueRef = React.useRef(value ?? "");
+  const openMediaPickerRef = React.useRef(
+    openMediaPickerForImageBlock
+  );
   const throttledOnChangeRef = React.useRef(null);
   onChangeRef.current = onChange;
+  openMediaPickerRef.current = openMediaPickerForImageBlock;
   React.useLayoutEffect(() => {
     if (crepeRef.current) return;
     const container = containerRef.current;
     if (!container) return;
+    const hasMediaPicker = !!openMediaPickerRef.current;
+    const imageBlockConfig = {};
+    if (uploadImage) {
+      imageBlockConfig.onUpload = async (file) => uploadImage(file);
+    }
+    if (hasMediaPicker) {
+      imageBlockConfig.blockUploadPlaceholderText = "Media Picker";
+      imageBlockConfig.inlineUploadPlaceholderText = "Media Picker";
+    }
     const crepe$1 = new crepe.Crepe({
       root: container,
       defaultValue: initialValueRef.current,
@@ -37,16 +52,35 @@ function MarkdownEditor({
         [crepe.CrepeFeature.Placeholder]: {
           text: placeholder
         },
-        ...uploadImage ? {
-          [crepe.CrepeFeature.ImageBlock]: {
-            onUpload: async (file) => {
-              const url = await uploadImage(file);
-              return url;
-            }
-          }
-        } : {}
+        ...Object.keys(imageBlockConfig).length > 0 ? { [crepe.CrepeFeature.ImageBlock]: imageBlockConfig } : {}
       }
     });
+    const interceptHandler = (e) => {
+      if (!openMediaPickerRef.current) return;
+      const target = e.target;
+      const inPlaceholder = target.closest(".image-edit .placeholder");
+      if (!inPlaceholder) return;
+      if (target.matches("input")) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const imageEdit = inPlaceholder.closest(".image-edit");
+      const linkInput = imageEdit?.querySelector(
+        ".link-input-area"
+      );
+      openMediaPickerRef.current((url) => {
+        if (!linkInput) return;
+        const nativeSetter = Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          "value"
+        )?.set;
+        nativeSetter?.call(linkInput, url);
+        linkInput.dispatchEvent(new Event("input", { bubbles: true }));
+        linkInput.dispatchEvent(
+          new KeyboardEvent("keydown", { key: "Enter", bubbles: true })
+        );
+      });
+    };
+    container.addEventListener("click", interceptHandler, true);
     throttledOnChangeRef.current = utils.throttle((markdown) => {
       if (onChangeRef.current) onChangeRef.current(markdown);
     }, 200);
@@ -61,6 +95,7 @@ function MarkdownEditor({
     });
     crepeRef.current = crepe$1;
     return () => {
+      container.removeEventListener("click", interceptHandler, true);
       try {
         isReadyRef.current = false;
         throttledOnChangeRef.current?.cancel?.();
@@ -99,6 +134,39 @@ function MarkdownEditor({
       view.dispatch(tr);
     });
   }, [value, isReady]);
+  React.useLayoutEffect(() => {
+    if (!insertImageRef) return;
+    insertImageRef.current = (url) => {
+      if (!crepeRef.current || !isReadyRef.current) return;
+      try {
+        const currentMarkdown = crepeRef.current.getMarkdown?.() ?? "";
+        const imageMarkdown = `
+
+![](${url})
+
+`;
+        const newMarkdown = currentMarkdown.trimEnd() + imageMarkdown;
+        crepeRef.current.editor.action((ctx) => {
+          const view = ctx.get(core.editorViewCtx);
+          const parser = ctx.get(core.parserCtx);
+          const doc = parser(newMarkdown);
+          if (!doc) return;
+          const state = view.state;
+          const tr = state.tr.replace(
+            0,
+            state.doc.content.size,
+            new model.Slice(doc.content, 0, 0)
+          );
+          view.dispatch(tr);
+        });
+        if (onChangeRef.current) onChangeRef.current(newMarkdown);
+      } catch {
+      }
+    };
+    return () => {
+      if (insertImageRef) insertImageRef.current = null;
+    };
+  }, [insertImageRef]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: utils.cn("milkdown-custom", className) });
 }
 

package/dist/packages/stack/src/plugins/blog/client/components/forms/markdown-editor.mjs

@@ -14,7 +14,9 @@ function MarkdownEditor({
   onChange,
   className,
   uploadImage,
-  placeholder = "Write something..."
+  placeholder = "Write something...",
+  insertImageRef,
+  openMediaPickerForImageBlock
 }) {
   const containerRef = useRef(null);
   const crepeRef = useRef(null);
@@ -22,12 +24,25 @@ function MarkdownEditor({
   const [isReady, setIsReady] = useState(false);
   const onChangeRef = useRef(onChange);
   const initialValueRef = useRef(value ?? "");
+  const openMediaPickerRef = useRef(
+    openMediaPickerForImageBlock
+  );
   const throttledOnChangeRef = useRef(null);
   onChangeRef.current = onChange;
+  openMediaPickerRef.current = openMediaPickerForImageBlock;
   useLayoutEffect(() => {
     if (crepeRef.current) return;
     const container = containerRef.current;
     if (!container) return;
+    const hasMediaPicker = !!openMediaPickerRef.current;
+    const imageBlockConfig = {};
+    if (uploadImage) {
+      imageBlockConfig.onUpload = async (file) => uploadImage(file);
+    }
+    if (hasMediaPicker) {
+      imageBlockConfig.blockUploadPlaceholderText = "Media Picker";
+      imageBlockConfig.inlineUploadPlaceholderText = "Media Picker";
+    }
     const crepe = new Crepe({
       root: container,
       defaultValue: initialValueRef.current,
@@ -35,16 +50,35 @@ function MarkdownEditor({
         [CrepeFeature.Placeholder]: {
           text: placeholder
         },
-        ...uploadImage ? {
-          [CrepeFeature.ImageBlock]: {
-            onUpload: async (file) => {
-              const url = await uploadImage(file);
-              return url;
-            }
-          }
-        } : {}
+        ...Object.keys(imageBlockConfig).length > 0 ? { [CrepeFeature.ImageBlock]: imageBlockConfig } : {}
       }
     });
+    const interceptHandler = (e) => {
+      if (!openMediaPickerRef.current) return;
+      const target = e.target;
+      const inPlaceholder = target.closest(".image-edit .placeholder");
+      if (!inPlaceholder) return;
+      if (target.matches("input")) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const imageEdit = inPlaceholder.closest(".image-edit");
+      const linkInput = imageEdit?.querySelector(
+        ".link-input-area"
+      );
+      openMediaPickerRef.current((url) => {
+        if (!linkInput) return;
+        const nativeSetter = Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          "value"
+        )?.set;
+        nativeSetter?.call(linkInput, url);
+        linkInput.dispatchEvent(new Event("input", { bubbles: true }));
+        linkInput.dispatchEvent(
+          new KeyboardEvent("keydown", { key: "Enter", bubbles: true })
+        );
+      });
+    };
+    container.addEventListener("click", interceptHandler, true);
     throttledOnChangeRef.current = throttle((markdown) => {
       if (onChangeRef.current) onChangeRef.current(markdown);
     }, 200);
@@ -59,6 +93,7 @@ function MarkdownEditor({
     });
     crepeRef.current = crepe;
     return () => {
+      container.removeEventListener("click", interceptHandler, true);
       try {
         isReadyRef.current = false;
         throttledOnChangeRef.current?.cancel?.();
@@ -97,6 +132,39 @@ function MarkdownEditor({
       view.dispatch(tr);
     });
   }, [value, isReady]);
+  useLayoutEffect(() => {
+    if (!insertImageRef) return;
+    insertImageRef.current = (url) => {
+      if (!crepeRef.current || !isReadyRef.current) return;
+      try {
+        const currentMarkdown = crepeRef.current.getMarkdown?.() ?? "";
+        const imageMarkdown = `
+
+![](${url})
+
+`;
+        const newMarkdown = currentMarkdown.trimEnd() + imageMarkdown;
+        crepeRef.current.editor.action((ctx) => {
+          const view = ctx.get(editorViewCtx);
+          const parser = ctx.get(parserCtx);
+          const doc = parser(newMarkdown);
+          if (!doc) return;
+          const state = view.state;
+          const tr = state.tr.replace(
+            0,
+            state.doc.content.size,
+            new Slice(doc.content, 0, 0)
+          );
+          view.dispatch(tr);
+        });
+        if (onChangeRef.current) onChangeRef.current(newMarkdown);
+      } catch {
+      }
+    };
+    return () => {
+      if (insertImageRef) insertImageRef.current = null;
+    };
+  }, [insertImageRef]);
   return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("milkdown-custom", className) });
 }
 

package/dist/packages/stack/src/plugins/cms/client/components/forms/content-form.cjs

@@ -16,25 +16,36 @@ const index = require('../../localization/index.cjs');
 const fileUpload = require('./file-upload.cjs');
 const relationField = require('./relation-field.cjs');
 
-function buildFieldConfigFromJsonSchema(jsonSchema, uploadImage, fieldComponents) {
+function buildFieldConfigFromJsonSchema(jsonSchema, uploadImage, fieldComponents, imagePicker, imageInputField) {
   const baseConfig = helpers.buildFieldConfigFromJsonSchema(jsonSchema, fieldComponents);
   const properties = jsonSchema.properties;
   if (!properties) return baseConfig;
   for (const [key, prop] of Object.entries(properties)) {
     if (prop.fieldType === "file" && !fieldComponents?.["file"]) {
-      if (!uploadImage) {
+      if (!uploadImage && !imageInputField) {
         baseConfig[key] = {
           ...baseConfig[key],
           fieldType: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-destructive bg-destructive/10 p-3 text-sm text-destructive", children: [
             "File upload requires an ",
             /* @__PURE__ */ jsxRuntime.jsx("code", { children: "uploadImage" }),
+            " or",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx("code", { children: "imageInputField" }),
             " function in CMS overrides."
           ] })
         };
       } else {
         baseConfig[key] = {
           ...baseConfig[key],
-          fieldType: (props) => /* @__PURE__ */ jsxRuntime.jsx(fileUpload.CMSFileUpload, { ...props, uploadImage })
+          fieldType: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+            fileUpload.CMSFileUpload,
+            {
+              ...props,
+              uploadImage: uploadImage ?? (() => Promise.resolve("")),
+              imageInputField,
+              imagePicker
+            }
+          )
         };
       }
     }
@@ -75,6 +86,8 @@ function ContentForm({
   const {
     localization: customLocalization,
     uploadImage,
+    imagePicker,
+    imageInputField,
     fieldComponents
   } = context.usePluginOverrides("cms");
   const localization = { ...index.CMS_LOCALIZATION, ...customLocalization };
@@ -115,8 +128,14 @@ function ContentForm({
     }
   }, [jsonSchema]);
   const fieldConfig = React.useMemo(
-    () => buildFieldConfigFromJsonSchema(jsonSchema, uploadImage, fieldComponents),
-    [jsonSchema, uploadImage, fieldComponents]
+    () => buildFieldConfigFromJsonSchema(
+      jsonSchema,
+      uploadImage,
+      fieldComponents,
+      imagePicker,
+      imageInputField
+    ),
+    [jsonSchema, uploadImage, fieldComponents, imagePicker, imageInputField]
   );
   const slugSourceField = React.useMemo(
     () => findSlugSourceField(jsonSchema),