@btst/stack 2.8.1 → 2.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@btst/stack",
-  "version": "2.8.1",
+  "version": "2.9.1",
   "description": "A composable, plugin-based library for building full-stack applications.",
   "repository": {
     "type": "git",
@@ -414,6 +414,77 @@
       }
     },
     "./plugins/comments/css": "./dist/plugins/comments/style.css",
+    "./plugins/media/api": {
+      "import": {
+        "types": "./dist/plugins/media/api/index.d.ts",
+        "default": "./dist/plugins/media/api/index.mjs"
+      },
+      "require": {
+        "types": "./dist/plugins/media/api/index.d.cts",
+        "default": "./dist/plugins/media/api/index.cjs"
+      }
+    },
+    "./plugins/media/api/adapters/s3": {
+      "import": {
+        "types": "./dist/plugins/media/api/adapters/s3.d.ts",
+        "default": "./dist/plugins/media/api/adapters/s3.mjs"
+      },
+      "require": {
+        "types": "./dist/plugins/media/api/adapters/s3.d.cts",
+        "default": "./dist/plugins/media/api/adapters/s3.cjs"
+      }
+    },
+    "./plugins/media/api/adapters/vercel-blob": {
+      "import": {
+        "types": "./dist/plugins/media/api/adapters/vercel-blob.d.ts",
+        "default": "./dist/plugins/media/api/adapters/vercel-blob.mjs"
+      },
+      "require": {
+        "types": "./dist/plugins/media/api/adapters/vercel-blob.d.cts",
+        "default": "./dist/plugins/media/api/adapters/vercel-blob.cjs"
+      }
+    },
+    "./plugins/media/client": {
+      "import": {
+        "types": "./dist/plugins/media/client/index.d.ts",
+        "default": "./dist/plugins/media/client/index.mjs"
+      },
+      "require": {
+        "types": "./dist/plugins/media/client/index.d.cts",
+        "default": "./dist/plugins/media/client/index.cjs"
+      }
+    },
+    "./plugins/media/client/components": {
+      "import": {
+        "types": "./dist/plugins/media/client/components/index.d.ts",
+        "default": "./dist/plugins/media/client/components/index.mjs"
+      },
+      "require": {
+        "types": "./dist/plugins/media/client/components/index.d.cts",
+        "default": "./dist/plugins/media/client/components/index.cjs"
+      }
+    },
+    "./plugins/media/client/hooks": {
+      "import": {
+        "types": "./dist/plugins/media/client/hooks/index.d.ts",
+        "default": "./dist/plugins/media/client/hooks/index.mjs"
+      },
+      "require": {
+        "types": "./dist/plugins/media/client/hooks/index.d.cts",
+        "default": "./dist/plugins/media/client/hooks/index.cjs"
+      }
+    },
+    "./plugins/media/query-keys": {
+      "import": {
+        "types": "./dist/plugins/media/query-keys.d.ts",
+        "default": "./dist/plugins/media/query-keys.mjs"
+      },
+      "require": {
+        "types": "./dist/plugins/media/query-keys.d.cts",
+        "default": "./dist/plugins/media/query-keys.cjs"
+      }
+    },
+    "./plugins/media/css": "./dist/plugins/media/client.css",
     "./plugins/route-docs/client": {
       "import": {
         "types": "./dist/plugins/route-docs/client/index.d.ts",
@@ -610,6 +681,27 @@
       "plugins/comments/query-keys": [
         "./dist/plugins/comments/query-keys.d.ts"
       ],
+      "plugins/media/api": [
+        "./dist/plugins/media/api/index.d.ts"
+      ],
+      "plugins/media/api/adapters/s3": [
+        "./dist/plugins/media/api/adapters/s3.d.ts"
+      ],
+      "plugins/media/api/adapters/vercel-blob": [
+        "./dist/plugins/media/api/adapters/vercel-blob.d.ts"
+      ],
+      "plugins/media/client": [
+        "./dist/plugins/media/client/index.d.ts"
+      ],
+      "plugins/media/client/components": [
+        "./dist/plugins/media/client/components/index.d.ts"
+      ],
+      "plugins/media/client/hooks": [
+        "./dist/plugins/media/client/hooks/index.d.ts"
+      ],
+      "plugins/media/query-keys": [
+        "./dist/plugins/media/query-keys.d.ts"
+      ],
       "plugins/route-docs/client": [
         "./dist/plugins/route-docs/client/index.d.ts"
       ],
@@ -646,13 +738,17 @@
   },
   "peerDependencies": {
     "@ai-sdk/react": ">=2.0.0",
+    "@aws-sdk/client-s3": ">=3.0.0",
+    "@aws-sdk/s3-request-presigner": ">=3.0.0",
     "@btst/yar": ">=1.2.0",
     "@hookform/resolvers": ">=5.0.0",
     "@radix-ui/react-dialog": ">=1.1.0",
     "@radix-ui/react-label": ">=2.1.0",
     "@radix-ui/react-slot": ">=1.1.0",
     "@radix-ui/react-switch": ">=1.1.0",
+    "@tailwindcss/typography": ">=0.5.0",
     "@tanstack/react-query": "^5.0.0",
+    "@vercel/blob": ">=0.14.0",
     "ai": ">=5.0.0",
     "better-call": ">=1.3.2",
     "class-variance-authority": ">=0.7.0",
@@ -675,25 +771,38 @@
     "sonner": ">=2.0.0",
     "tailwind-merge": ">=2.6.0",
     "tailwindcss": ">=3.0.0",
-    "@tailwindcss/typography": ">=0.5.0",
     "zod": ">=4.2.0"
   },
+  "peerDependenciesMeta": {
+    "@vercel/blob": {
+      "optional": true
+    },
+    "@aws-sdk/client-s3": {
+      "optional": true
+    },
+    "@aws-sdk/s3-request-presigner": {
+      "optional": true
+    }
+  },
   "devDependencies": {
-    "tsx": "catalog:",
     "@ai-sdk/react": "^2.0.94",
+    "@aws-sdk/client-s3": "^3.1011.0",
+    "@aws-sdk/s3-request-presigner": "^3.1011.0",
     "@btst/adapter-memory": "2.1.1",
     "@btst/yar": "1.2.0",
     "@types/react": "^19.0.0",
     "@types/slug": "^5.0.9",
+    "@vercel/blob": "^0.27.3",
     "@workspace/ui": "workspace:*",
     "ai": "^5.0.94",
     "better-call": "catalog:",
+    "knip": "^5.61.2",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-error-boundary": "^4.1.2",
-    "knip": "^5.61.2",
     "rollup-plugin-preserve-directives": "0.4.0",
     "rollup-plugin-visualizer": "^5.12.0",
+    "tsx": "catalog:",
     "typescript": "catalog:",
     "unbuild": "catalog:",
     "vitest": "catalog:",

package/src/plugins/blog/client/components/forms/image-field.tsx

@@ -28,13 +28,44 @@ export function FeaturedImageField({
 	const fileInputRef = useRef<HTMLInputElement>(null);
 	const [isUploading, setIsUploading] = useState(false);
 
-	const { uploadImage, Image, localization } = usePluginOverrides<
-		BlogPluginOverrides,
-		Partial<BlogPluginOverrides>
-	>("blog", { localization: BLOG_LOCALIZATION });
+	const {
+		uploadImage,
+		Image,
+		localization,
+		imageInputField: ImageInput,
+	} = usePluginOverrides<BlogPluginOverrides, Partial<BlogPluginOverrides>>(
+		"blog",
+		{ localization: BLOG_LOCALIZATION },
+	);
 
 	const ImageComponent = Image ? Image : DefaultImage;
 
+	// When a custom imageInput component is provided via overrides, delegate to it.
+	if (ImageInput) {
+		return (
+			<FormItem className="flex flex-col">
+				<FormLabel>
+					{localization.BLOG_FORMS_FEATURED_IMAGE_LABEL}
+					{isRequired && (
+						<span className="text-destructive">
+							{" "}
+							{localization.BLOG_FORMS_FEATURED_IMAGE_REQUIRED_ASTERISK}
+						</span>
+					)}
+				</FormLabel>
+				<FormControl>
+					<ImageInput
+						value={value || ""}
+						onChange={onChange}
+						isRequired={isRequired}
+					/>
+				</FormControl>
+				<FormDescription />
+				<FormMessage />
+			</FormItem>
+		);
+	}
+
 	const handleImageUpload = async (
 		event: React.ChangeEvent<HTMLInputElement>,
 	) => {

package/src/plugins/blog/client/components/forms/markdown-editor-with-overrides.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useCallback, useRef } from "react";
 import { usePluginOverrides } from "@btst/stack/context";
 import type { BlogPluginOverrides } from "../../overrides";
 import { BLOG_LOCALIZATION } from "../../localization";
@@ -6,24 +7,78 @@ import { MarkdownEditor, type MarkdownEditorProps } from "./markdown-editor";
 
 type MarkdownEditorWithOverridesProps = Omit<
 	MarkdownEditorProps,
-	"uploadImage" | "placeholder"
+	| "uploadImage"
+	| "placeholder"
+	| "insertImageRef"
+	| "openMediaPickerForImageBlock"
 >;
 
 export function MarkdownEditorWithOverrides(
 	props: MarkdownEditorWithOverridesProps,
 ) {
-	const { uploadImage, localization } = usePluginOverrides<
-		BlogPluginOverrides,
-		Partial<BlogPluginOverrides>
-	>("blog", {
-		localization: BLOG_LOCALIZATION,
-	});
+	const {
+		uploadImage,
+		imagePicker: ImagePickerTrigger,
+		localization,
+	} = usePluginOverrides<BlogPluginOverrides, Partial<BlogPluginOverrides>>(
+		"blog",
+		{ localization: BLOG_LOCALIZATION },
+	);
+
+	const insertImageRef = useRef<((url: string) => void) | null>(null);
+	// Holds the Crepe-image-block `setUrl` callback while the picker is open.
+	const pendingInsertUrlRef = useRef<((url: string) => void) | null>(null);
+	// Ref to the trigger wrapper so we can programmatically click the picker button.
+	const triggerContainerRef = useRef<HTMLDivElement | null>(null);
+
+	// Single onSelect handler for ImagePickerTrigger.
+	// URLs returned by the media plugin are already percent-encoded at the
+	// source (storage adapter), so no additional encoding is applied here.
+	const handleSelect = useCallback((url: string) => {
+		if (pendingInsertUrlRef.current) {
+			// Crepe image block flow: set the URL into the block's link input.
+			pendingInsertUrlRef.current(url);
+			pendingInsertUrlRef.current = null;
+		} else {
+			// Normal flow: insert image at end of markdown content.
+			insertImageRef.current?.(url);
+		}
+	}, []);
+
+	// Called by MarkdownEditor's click interceptor when the user clicks a Crepe
+	// image-block upload placeholder.
+	const openMediaPickerForImageBlock = useCallback(
+		(setUrl: (url: string) => void) => {
+			pendingInsertUrlRef.current = setUrl;
+			// Programmatically click the visible picker trigger button.
+			const btn = triggerContainerRef.current?.querySelector(
+				'[data-testid="open-media-picker"]',
+			) as HTMLButtonElement | null;
+			btn?.click();
+		},
+		[],
+	);
 
 	return (
-		<MarkdownEditor
-			{...props}
-			uploadImage={uploadImage}
-			placeholder={localization?.BLOG_FORMS_EDITOR_PLACEHOLDER}
-		/>
+		<div className="flex flex-col">
+			<MarkdownEditor
+				{...props}
+				uploadImage={uploadImage}
+				placeholder={localization?.BLOG_FORMS_EDITOR_PLACEHOLDER}
+				insertImageRef={insertImageRef}
+				openMediaPickerForImageBlock={
+					ImagePickerTrigger ? openMediaPickerForImageBlock : undefined
+				}
+			/>
+			{ImagePickerTrigger && (
+				<div
+					ref={triggerContainerRef}
+					className="flex justify-end mt-1"
+					data-testid="image-picker-trigger"
+				>
+					<ImagePickerTrigger onSelect={handleSelect} />
+				</div>
+			)}
+		</div>
 	);
 }

package/src/plugins/blog/client/components/forms/markdown-editor.tsx

@@ -8,7 +8,12 @@ import { editorViewCtx, parserCtx } from "@milkdown/kit/core";
 import { listener, listenerCtx } from "@milkdown/kit/plugin/listener";
 import { Slice } from "@milkdown/kit/prose/model";
 import { Selection } from "@milkdown/kit/prose/state";
-import { useLayoutEffect, useRef, useState } from "react";
+import {
+	useLayoutEffect,
+	useRef,
+	useState,
+	type MutableRefObject,
+} from "react";
 
 export interface MarkdownEditorProps {
 	value?: string;
@@ -18,6 +23,19 @@ export 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;
 }
 
 export function MarkdownEditor({
@@ -26,6 +44,8 @@ export function MarkdownEditor({
 	className,
 	uploadImage,
 	placeholder = "Write something...",
+	insertImageRef,
+	openMediaPickerForImageBlock,
 }: MarkdownEditorProps) {
 	const containerRef = useRef<HTMLDivElement | null>(null);
 	const crepeRef = useRef<Crepe | null>(null);
@@ -33,6 +53,9 @@ export function MarkdownEditor({
 	const [isReady, setIsReady] = useState(false);
 	const onChangeRef = useRef<typeof onChange>(onChange);
 	const initialValueRef = useRef<string>(value ?? "");
+	const openMediaPickerRef = useRef<typeof openMediaPickerForImageBlock>(
+		openMediaPickerForImageBlock,
+	);
 	type ThrottledFn = ((markdown: string) => void) & {
 		cancel?: () => void;
 		flush?: () => void;
@@ -40,12 +63,24 @@ export function MarkdownEditor({
 	const throttledOnChangeRef = useRef<ThrottledFn | null>(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: Record<string, unknown> = {};
+		if (uploadImage) {
+			imageBlockConfig.onUpload = async (file: File) => uploadImage(file);
+		}
+		if (hasMediaPicker) {
+			imageBlockConfig.blockUploadPlaceholderText = "Media Picker";
+			imageBlockConfig.inlineUploadPlaceholderText = "Media Picker";
+		}
+
 		const crepe = new Crepe({
 			root: container,
 			defaultValue: initialValueRef.current,
@@ -53,19 +88,47 @@ export function MarkdownEditor({
 				[CrepeFeature.Placeholder]: {
 					text: placeholder,
 				},
-				...(uploadImage
-					? {
-							[CrepeFeature.ImageBlock]: {
-								onUpload: async (file: File) => {
-									const url = await uploadImage(file);
-									return url;
-								},
-							},
-						}
+				...(Object.keys(imageBlockConfig).length > 0
+					? { [CrepeFeature.ImageBlock]: imageBlockConfig }
 					: {}),
 			},
 		});
 
+		// Intercept clicks on Crepe image-block upload placeholders so that the
+		// native file dialog is suppressed and the media picker is opened instead.
+		const interceptHandler = (e: MouseEvent) => {
+			if (!openMediaPickerRef.current) return;
+			const target = e.target as Element;
+			// Only intercept clicks inside the upload placeholder area.
+			const inPlaceholder = target.closest(".image-edit .placeholder");
+			if (!inPlaceholder) return;
+			// Let the hidden file <input> itself through (shouldn't receive clicks normally).
+			if ((target as HTMLElement).matches("input")) return;
+
+			e.preventDefault();
+			e.stopPropagation();
+
+			const imageEdit = inPlaceholder.closest(".image-edit");
+			const linkInput = imageEdit?.querySelector(
+				".link-input-area",
+			) as HTMLInputElement | null;
+
+			openMediaPickerRef.current((url: string) => {
+				if (!linkInput) return;
+				// Use the native setter so Vue's reactivity picks up the change.
+				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);
+
 		// Prepare throttled onChange once per editor instance
 		throttledOnChangeRef.current = throttle((markdown: string) => {
 			if (onChangeRef.current) onChangeRef.current(markdown);
@@ -86,6 +149,7 @@ export function MarkdownEditor({
 		crepeRef.current = crepe;
 
 		return () => {
+			container.removeEventListener("click", interceptHandler, true);
 			try {
 				isReadyRef.current = false;
 				throttledOnChangeRef.current?.cancel?.();
@@ -133,6 +197,38 @@ export function MarkdownEditor({
 		});
 	}, [value, isReady]);
 
+	// Expose insertImage via ref so the parent can insert images programmatically
+	useLayoutEffect(() => {
+		if (!insertImageRef) return;
+		insertImageRef.current = (url: string) => {
+			if (!crepeRef.current || !isReadyRef.current) return;
+			try {
+				const currentMarkdown = crepeRef.current.getMarkdown?.() ?? "";
+				const imageMarkdown = `\n\n![](${url})\n\n`;
+				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 {
+				// Editor may not be ready yet
+			}
+		};
+		return () => {
+			if (insertImageRef) insertImageRef.current = null;
+		};
+	}, [insertImageRef]);
+
 	return (
 		<div ref={containerRef} className={cn("milkdown-custom", className)} />
 	);

package/src/plugins/blog/client/overrides.ts

@@ -2,6 +2,18 @@ import type { SerializedPost } from "../types";
 import type { ComponentType, ReactNode } from "react";
 import type { BlogLocalization } from "./localization";
 
+/**
+ * Props for the overridable blog featured image input component.
+ */
+export interface BlogImageInputFieldProps {
+	/** Current image URL value */
+	value: string;
+	/** Called when the image URL changes */
+	onChange: (value: string) => void;
+	/** Whether the field is required */
+	isRequired?: boolean;
+}
+
 /**
  * Context passed to lifecycle hooks
  */
@@ -48,9 +60,54 @@ export interface BlogPluginOverrides {
 		React.ImgHTMLAttributes<HTMLImageElement> & Record<string, any>
 	>;
 	/**
-	 * Function used to upload an image and return its URL.
+	 * Function used to upload a new image file and return its URL.
+	 * This is separate from `imagePicker`, which selects an existing asset URL.
 	 */
 	uploadImage: (file: File) => Promise<string>;
+	/**
+	 * Optional custom component for the featured image field.
+	 *
+	 * When provided it replaces the default file-upload input entirely.
+	 * The component receives `value` (current URL string) and `onChange` (setter).
+	 *
+	 * Typical use case: render a preview when a value is set, and a media-picker
+	 * trigger when no value is set.
+	 *
+	 * @example
+	 * ```tsx
+	 * imageInputField: ({ value, onChange }) =>
+	 *   value ? (
+	 *     <div>
+	 *       <img src={value} alt="Preview" />
+	 *       <MediaPicker trigger={<button>Change</button>} accept={["image/*"]}
+	 *         onSelect={(assets) => onChange(assets[0].url)} />
+	 *     </div>
+	 *   ) : (
+	 *     <MediaPicker trigger={<button>Browse media</button>} accept={["image/*"]}
+	 *       onSelect={(assets) => onChange(assets[0].url)} />
+	 *   )
+	 * ```
+	 */
+	imageInputField?: ComponentType<BlogImageInputFieldProps>;
+
+	/**
+	 * Optional trigger component for a media picker.
+	 * When provided, it is rendered adjacent to the Markdown editor and allows
+	 * users to browse and select previously uploaded assets.
+	 * Receives `onSelect(url)` — insert the chosen URL into the editor.
+	 *
+	 * @example
+	 * ```tsx
+	 * imagePicker: ({ onSelect }) => (
+	 *   <MediaPicker
+	 *     trigger={<Button size="sm" variant="outline">Browse media</Button>}
+	 *     accept={["image/*"]}
+	 *     onSelect={(assets) => onSelect(assets[0].url)}
+	 *   />
+	 * )
+	 * ```
+	 */
+	imagePicker?: ComponentType<{ onSelect: (url: string) => void }>;
 	/**
 	 * Localization object for the blog plugin
 	 */

package/src/plugins/cms/client/components/forms/content-form.tsx

@@ -56,6 +56,12 @@ function buildFieldConfigFromJsonSchema(
 		string,
 		React.ComponentType<AutoFormInputComponentProps>
 	>,
+	imagePicker?: React.ComponentType<{ onSelect: (url: string) => void }>,
+	imageInputField?: React.ComponentType<{
+		value: string;
+		onChange: (value: string) => void;
+		isRequired?: boolean;
+	}>,
 ): FieldConfig<Record<string, unknown>> {
 	// Get base config from shared utility (handles fieldType from JSON Schema)
 	const baseConfig = buildFieldConfigBase(jsonSchema, fieldComponents);
@@ -73,14 +79,14 @@ function buildFieldConfigFromJsonSchema(
 		// Handle "file" fieldType when there's NO custom component for "file"
 		if (prop.fieldType === "file" && !fieldComponents?.["file"]) {
 			// Use CMSFileUpload as the default file component
-			if (!uploadImage) {
-				// Show a clear error message if uploadImage is not provided
+			if (!uploadImage && !imageInputField) {
+				// Show a clear error message if neither uploadImage nor imageInputField is provided
 				baseConfig[key] = {
 					...baseConfig[key],
 					fieldType: () => (
 						<div className="rounded-md border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
-							File upload requires an <code>uploadImage</code> function in CMS
-							overrides.
+							File upload requires an <code>uploadImage</code> or{" "}
+							<code>imageInputField</code> function in CMS overrides.
 						</div>
 					),
 				};
@@ -88,7 +94,12 @@ function buildFieldConfigFromJsonSchema(
 				baseConfig[key] = {
 					...baseConfig[key],
 					fieldType: (props: AutoFormInputComponentProps) => (
-						<CMSFileUpload {...props} uploadImage={uploadImage} />
+						<CMSFileUpload
+							{...props}
+							uploadImage={uploadImage ?? (() => Promise.resolve(""))}
+							imageInputField={imageInputField}
+							imagePicker={imagePicker}
+						/>
 					),
 				};
 			}
@@ -151,6 +162,8 @@ export function ContentForm({
 	const {
 		localization: customLocalization,
 		uploadImage,
+		imagePicker,
+		imageInputField,
 		fieldComponents,
 	} = usePluginOverrides<CMSPluginOverrides>("cms");
 	const localization = { ...CMS_LOCALIZATION, ...customLocalization };
@@ -214,8 +227,14 @@ export function ContentForm({
 	// Build field config for AutoForm (fieldType is now embedded in jsonSchema)
 	const fieldConfig = useMemo(
 		() =>
-			buildFieldConfigFromJsonSchema(jsonSchema, uploadImage, fieldComponents),
-		[jsonSchema, uploadImage, fieldComponents],
+			buildFieldConfigFromJsonSchema(
+				jsonSchema,
+				uploadImage,
+				fieldComponents,
+				imagePicker,
+				imageInputField,
+			),
+		[jsonSchema, uploadImage, fieldComponents, imagePicker, imageInputField],
 	);
 
 	// Find the field to use for slug auto-generation