camox 0.41.0 → 0.42.0

package/dist/features/preview/components/PageEditorSidebar.js

@@ -2,11 +2,13 @@ import { isFileMarker } from "../../../lib/normalized-data.js";
 import { blockMutations, blockQueries, fileQueries, repeatableItemMutations } from "../../../lib/queries.js";
 import { cn } from "../../../lib/utils.js";
 import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
-import { trackClientEvent } from "../../../lib/telemetry-client.js";
+import { areCommentsEnabled } from "../commentsEnabled.js";
 import { previewStore, selectionBlockId, selectionField, selectionItemId } from "../previewStore.js";
 import { useRequireDraftSource } from "../../../core/hooks/useRequireDraftSource.js";
 import { fieldTypesDictionary } from "../../../core/lib/fieldTypes.js";
 import { SingleAssetFieldEditor } from "./AssetFieldEditor.js";
+import { SidebarSection, SidebarSectionContent, SidebarSectionHeader } from "./SidebarSection.js";
+import { AttachedComments } from "./AttachedComments.js";
 import { useRepeatableItemActions } from "./useRepeatableItemActions.js";
 import { ItemFieldsEditor, formatFieldName } from "./ItemFieldsEditor.js";
 import { LinkFieldEditor } from "./LinkFieldEditor.js";
@@ -16,10 +18,11 @@ import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@xstate/store-react";
 import { Button } from "@camox/ui/button";
-import { CircleMinus, CirclePlus, CornerLeftUp } from "lucide-react";
+import { CirclePlus, Trash2 } from "lucide-react";
 import { Spinner } from "@camox/ui/spinner";
 import { Label } from "@camox/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
+import { ButtonGroup } from "@camox/ui/button-group";
 import { Switch } from "@camox/ui/switch";
 
 //#region src/features/preview/components/PageEditorSidebar.tsx
@@ -89,7 +92,7 @@ const buildAncestorChain = (itemId, itemsMap) => {
 	}
 	return chain;
 };
-const PageEditorSidebar = () => {
+const PageEditorSidebar = ({ pageId }) => {
 	const camoxApp = useCamoxApp();
 	const updateContent = useMutation(blockMutations.updateContent());
 	const updateSettings = useMutation(blockMutations.updateSettings());
@@ -98,14 +101,13 @@ const PageEditorSidebar = () => {
 	const requireDraft = useRequireDraftSource();
 	const selection = useSelector(previewStore, (state) => state.context.selection);
 	const iframeElement = useSelector(previewStore, (state_0) => state_0.context.iframeElement);
-	const isReadOnly = useSelector(previewStore, (state_1) => state_1.context.previewSource) !== "draft";
 	const postToIframe = React.useCallback((message) => {
 		if (!iframeElement?.contentWindow) return;
 		iframeElement.contentWindow.postMessage(message, "*");
 	}, [iframeElement]);
 	const blockId = selectionBlockId(selection);
 	const currentItemId = selectionItemId(selection);
-	const fieldInfo = selectionField(selection);
+	const selectedField = selectionField(selection);
 	const { data: blockBundle } = useQuery({
 		...blockQueries.get(blockId),
 		enabled: blockId != null
@@ -197,11 +199,15 @@ const PageEditorSidebar = () => {
 		for (const [key, value_0] of Object.entries(rawCurrentData)) resolved_0[key] = resolveValue(value_0);
 		return resolved_0;
 	}, [rawCurrentData, filesMap]);
+	const fieldInfo = selectedField ? {
+		...selectedField,
+		fieldType: currentSchema?.properties?.[selectedField.fieldName]?.fieldType ?? selectedField.fieldType
+	} : null;
 	const isViewingLink = fieldInfo?.fieldType === "Link";
 	const linkFieldName = isViewingLink ? fieldInfo.fieldName : null;
-	const isViewingImage = fieldInfo?.fieldType === "Image";
+	const isViewingImage = fieldInfo?.fieldType === "Image" || fieldInfo?.fieldType === "ImageList";
 	const imageFieldName = isViewingImage ? fieldInfo.fieldName : null;
-	const isViewingFile = fieldInfo?.fieldType === "File";
+	const isViewingFile = fieldInfo?.fieldType === "File" || fieldInfo?.fieldType === "FileList";
 	const fileFieldName = isViewingFile ? fieldInfo.fieldName : null;
 	const isViewingAsset = isViewingImage || isViewingFile;
 	const assetFieldName = imageFieldName ?? fileFieldName;
@@ -215,34 +221,10 @@ const PageEditorSidebar = () => {
 		assetFieldName,
 		currentSchema
 	]);
-	const sessionDirtyRef = React.useRef(false);
-	const trackedBlockIdRef = React.useRef(null);
-	React.useEffect(() => {
-		if (!block) {
-			trackedBlockIdRef.current = null;
-			return;
-		}
-		if (trackedBlockIdRef.current === block.id) return;
-		trackedBlockIdRef.current = block.id;
-		sessionDirtyRef.current = false;
-		trackClientEvent("page_editor_sidebar_opened", { blockType: block.type });
-	}, [block]);
-	React.useEffect(() => {
-		if (!block) return;
-		return () => {
-			if (!sessionDirtyRef.current) return;
-			trackClientEvent("block_edited", {
-				via: "page-editor-sidebar",
-				blockType: block.type
-			});
-			sessionDirtyRef.current = false;
-		};
-	}, [block]);
 	const fieldIdPrefix = React.useId();
 	const handleBlockFieldChange = React.useCallback((fieldName, value_1) => {
 		if (!block) return;
 		if (!requireDraft()) return;
-		sessionDirtyRef.current = true;
 		updateContent.mutate({
 			id: block.id,
 			content: { [fieldName]: value_1 }
@@ -255,7 +237,6 @@ const PageEditorSidebar = () => {
 	const handleItemFieldChange = React.useCallback((fieldName_0, value_2) => {
 		if (currentItemId == null) return;
 		if (!requireDraft()) return;
-		sessionDirtyRef.current = true;
 		updateRepeatableContent.mutate({
 			id: currentItemId,
 			content: { [fieldName_0]: value_2 }
@@ -288,16 +269,35 @@ const PageEditorSidebar = () => {
 				blockId: block.id
 			})
 		},
-		...ancestorChain.map((ancestor) => ({
-			key: `item-${ancestor.id}`,
+		...ancestorChain.flatMap((ancestor) => [{
+			key: `repeater-${ancestor.id}`,
 			label: getArraySchemaForItem(blockDef._internal.contentSchema, ancestor.id, itemsMap)?.title ?? formatFieldName(ancestor.fieldName),
+			isCurrent: false,
+			onClick: () => previewStore.send({
+				type: "setSelection",
+				selection: ancestor.parentItemId == null ? {
+					type: "block-field",
+					blockId: block.id,
+					fieldName: ancestor.fieldName,
+					fieldType: "Repeater"
+				} : {
+					type: "item-field",
+					blockId: block.id,
+					itemId: ancestor.parentItemId,
+					fieldName: ancestor.fieldName,
+					fieldType: "Repeater"
+				}
+			})
+		}, {
+			key: `item-${ancestor.id}`,
+			label: ancestor.summary || "Item",
 			isCurrent: ancestor.id === currentItemId && !fieldHasOwnView && ancestor.id === ancestorChain[ancestorChain.length - 1]?.id,
 			onClick: () => previewStore.send({
 				type: "selectItem",
 				blockId: block.id,
 				itemId: ancestor.id
 			})
-		})),
+		}]),
 		...fieldHasOwnView && fieldInfo ? [{
 			key: `field-${fieldInfo.fieldName}`,
 			label: currentSchema?.properties?.[fieldInfo.fieldName]?.title ?? formatFieldName(fieldInfo.fieldName),
@@ -305,8 +305,8 @@ const PageEditorSidebar = () => {
 			onClick: void 0
 		}] : []
 	];
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: "border-border flex flex-col gap-1.5 border-b px-2 py-4",
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SidebarSection, {
+		divider: "bottom",
 		children: /* @__PURE__ */ jsx("nav", {
 			"aria-label": "Selection path",
 			className: "text-muted-foreground text-sm",
@@ -359,213 +359,203 @@ const PageEditorSidebar = () => {
 				})
 			})
 		})
-	}), /* @__PURE__ */ jsxs("div", {
-		className: "relative flex-1 overflow-auto",
-		children: [isReadOnly && /* @__PURE__ */ jsx("button", {
-			type: "button",
-			"aria-label": "Switch to draft to edit",
-			className: "absolute inset-0 z-10 h-full w-full cursor-not-allowed",
-			onClick: () => previewStore.send({ type: "requestDraftSwitch" })
-		}), /* @__PURE__ */ jsx("div", {
-			className: cn(isReadOnly && "pointer-events-none opacity-50"),
-			children: isItemLoading ? /* @__PURE__ */ jsx("div", {
-				className: "flex h-full items-center justify-center py-12",
-				children: /* @__PURE__ */ jsx(Spinner, {})
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-				currentItemId == null && !fieldHasOwnView && settingsFields.length > 0 && /* @__PURE__ */ jsxs("div", {
-					className: "border-border space-y-4 border-b px-2 py-4",
-					children: [/* @__PURE__ */ jsx(Label, {
-						className: "text-muted-foreground",
-						children: "Settings"
-					}), settingsFields.map((field) => {
-						const label = field.label ?? formatFieldName(field.name);
-						const settingsValues = block.settings ?? {};
-						if (field.fieldType === "Enum") {
-							const value_3 = settingsValues[field.name] ?? (blockDef._internal.settingsSchema?.properties?.[field.name])?.default ?? "";
-							return /* @__PURE__ */ jsxs("div", {
-								className: "space-y-2",
-								children: [/* @__PURE__ */ jsx(Label, {
-									htmlFor: `setting-${field.name}`,
-									children: label
-								}), /* @__PURE__ */ jsxs(Select, {
-									value: value_3,
-									onValueChange: (newValue) => {
-										if (!requireDraft()) return;
-										sessionDirtyRef.current = true;
-										updateSettings.mutate({
-											id: block.id,
-											settings: { [field.name]: newValue }
-										});
-									},
-									children: [/* @__PURE__ */ jsx(SelectTrigger, {
-										id: `setting-${field.name}`,
-										children: /* @__PURE__ */ jsx(SelectValue, {})
-									}), /* @__PURE__ */ jsx(SelectContent, { children: field.enumValues?.map((enumValue) => /* @__PURE__ */ jsx(SelectItem, {
-										value: enumValue,
-										children: field.enumLabels?.[enumValue] ?? enumValue
-									}, enumValue)) })]
-								})]
-							}, field.name);
-						}
-						if (field.fieldType === "Boolean") {
-							const checked = settingsValues[field.name] ?? (blockDef._internal.settingsSchema?.properties?.[field.name])?.default ?? false;
-							return /* @__PURE__ */ jsxs("div", {
-								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ jsx(Label, {
-									htmlFor: `setting-${field.name}`,
-									children: label
-								}), /* @__PURE__ */ jsx(Switch, {
-									id: `setting-${field.name}`,
-									checked,
-									onCheckedChange: (newValue_0) => {
-										if (!requireDraft()) return;
-										sessionDirtyRef.current = true;
-										updateSettings.mutate({
-											id: block.id,
-											settings: { [field.name]: newValue_0 }
-										});
-									}
-								})]
-							}, field.name);
-						}
-						return null;
+	}), /* @__PURE__ */ jsx("div", {
+		className: "relative min-w-0 flex-1 overflow-x-hidden overflow-y-auto",
+		children: /* @__PURE__ */ jsx("div", { children: isItemLoading ? /* @__PURE__ */ jsx("div", {
+			className: "flex h-full items-center justify-center py-12",
+			children: /* @__PURE__ */ jsx(Spinner, {})
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			!fieldHasOwnView && currentItemId != null && currentItem && /* @__PURE__ */ jsxs(SidebarSection, {
+				divider: "bottom",
+				"aria-label": "List actions",
+				children: [/* @__PURE__ */ jsx(SidebarSectionHeader, { children: "List actions" }), /* @__PURE__ */ jsx(SidebarSectionContent, { children: /* @__PURE__ */ jsxs(ButtonGroup, {
+					"aria-label": "List actions",
+					children: [/* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						disabled: !canAddSibling,
+						onClick: () => {
+							if (!canAddSibling || !requireDraft()) return;
+							addSibling({ afterPosition: currentItem.position });
+						},
+						children: [/* @__PURE__ */ jsx(CirclePlus, { className: "text-muted-foreground h-4 w-4" }), "Add sibling"]
+					}), /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						disabled: !canRemoveCurrent,
+						onClick: () => {
+							if (!canRemoveCurrent || !requireDraft()) return;
+							removeCurrent(currentItemId, { onSuccess: () => previewStore.send({ type: "selectParent" }) });
+						},
+						children: [/* @__PURE__ */ jsx(Trash2, { className: "text-muted-foreground h-4 w-4" }), "Delete"]
 					})]
-				}),
-				currentItemId != null && !fieldHasOwnView && itemSettingsFields.length > 0 && /* @__PURE__ */ jsxs("div", {
-					className: "border-border space-y-4 border-b px-2 py-4",
-					children: [/* @__PURE__ */ jsx(Label, {
-						className: "text-muted-foreground",
-						children: "Settings"
-					}), itemSettingsFields.map((field_0) => {
-						const label_0 = field_0.label ?? formatFieldName(field_0.name);
-						const itemSettingsValues = currentItem?.settings ?? {};
-						const itemSettingsSchemaProps = itemArraySchema?.itemSettingsSchema?.properties;
-						if (field_0.fieldType === "Enum") {
-							const value_4 = itemSettingsValues[field_0.name] ?? itemSettingsSchemaProps?.[field_0.name]?.default ?? "";
-							return /* @__PURE__ */ jsxs("div", {
-								className: "space-y-2",
-								children: [/* @__PURE__ */ jsx(Label, {
-									htmlFor: `item-setting-${field_0.name}`,
-									children: label_0
-								}), /* @__PURE__ */ jsxs(Select, {
-									value: value_4,
-									onValueChange: (newValue_1) => {
-										if (!requireDraft()) return;
-										sessionDirtyRef.current = true;
-										updateRepeatableSettings.mutate({
-											id: currentItemId,
-											settings: { [field_0.name]: newValue_1 }
-										});
-									},
-									children: [/* @__PURE__ */ jsx(SelectTrigger, {
-										id: `item-setting-${field_0.name}`,
-										children: /* @__PURE__ */ jsx(SelectValue, {})
-									}), /* @__PURE__ */ jsx(SelectContent, { children: field_0.enumValues?.map((enumValue_0) => /* @__PURE__ */ jsx(SelectItem, {
-										value: enumValue_0,
-										children: field_0.enumLabels?.[enumValue_0] ?? enumValue_0
-									}, enumValue_0)) })]
-								})]
-							}, field_0.name);
-						}
-						if (field_0.fieldType === "Boolean") {
-							const checked_0 = itemSettingsValues[field_0.name] ?? itemSettingsSchemaProps?.[field_0.name]?.default ?? false;
-							return /* @__PURE__ */ jsxs("div", {
-								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ jsx(Label, {
-									htmlFor: `item-setting-${field_0.name}`,
-									children: label_0
-								}), /* @__PURE__ */ jsx(Switch, {
+				}) })]
+			}),
+			currentItemId == null && !fieldHasOwnView && settingsFields.length > 0 && /* @__PURE__ */ jsxs(SidebarSection, {
+				divider: "bottom",
+				"aria-label": "Block settings",
+				children: [/* @__PURE__ */ jsx(SidebarSectionHeader, { children: "Settings" }), /* @__PURE__ */ jsx(SidebarSectionContent, { children: settingsFields.map((field) => {
+					const label = field.label ?? formatFieldName(field.name);
+					const settingsValues = block.settings ?? {};
+					if (field.fieldType === "Enum") {
+						const value_3 = settingsValues[field.name] ?? (blockDef._internal.settingsSchema?.properties?.[field.name])?.default ?? "";
+						return /* @__PURE__ */ jsxs("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ jsx(Label, {
+								htmlFor: `setting-${field.name}`,
+								children: label
+							}), /* @__PURE__ */ jsxs(Select, {
+								value: value_3,
+								onValueChange: (newValue) => {
+									if (!requireDraft()) return;
+									updateSettings.mutate({
+										id: block.id,
+										settings: { [field.name]: newValue }
+									});
+								},
+								children: [/* @__PURE__ */ jsx(SelectTrigger, {
+									id: `setting-${field.name}`,
+									children: /* @__PURE__ */ jsx(SelectValue, {})
+								}), /* @__PURE__ */ jsx(SelectContent, { children: field.enumValues?.map((enumValue) => /* @__PURE__ */ jsx(SelectItem, {
+									value: enumValue,
+									children: field.enumLabels?.[enumValue] ?? enumValue
+								}, enumValue)) })]
+							})]
+						}, field.name);
+					}
+					if (field.fieldType === "Boolean") {
+						const checked = settingsValues[field.name] ?? (blockDef._internal.settingsSchema?.properties?.[field.name])?.default ?? false;
+						return /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ jsx(Label, {
+								htmlFor: `setting-${field.name}`,
+								children: label
+							}), /* @__PURE__ */ jsx(Switch, {
+								id: `setting-${field.name}`,
+								checked,
+								onCheckedChange: (newValue_0) => {
+									if (!requireDraft()) return;
+									updateSettings.mutate({
+										id: block.id,
+										settings: { [field.name]: newValue_0 }
+									});
+								}
+							})]
+						}, field.name);
+					}
+					return null;
+				}) })]
+			}),
+			currentItemId != null && !fieldHasOwnView && itemSettingsFields.length > 0 && /* @__PURE__ */ jsxs(SidebarSection, {
+				divider: "bottom",
+				"aria-label": "Item settings",
+				children: [/* @__PURE__ */ jsx(SidebarSectionHeader, { children: "Settings" }), /* @__PURE__ */ jsx(SidebarSectionContent, { children: itemSettingsFields.map((field_0) => {
+					const label_0 = field_0.label ?? formatFieldName(field_0.name);
+					const itemSettingsValues = currentItem?.settings ?? {};
+					const itemSettingsSchemaProps = itemArraySchema?.itemSettingsSchema?.properties;
+					if (field_0.fieldType === "Enum") {
+						const value_4 = itemSettingsValues[field_0.name] ?? itemSettingsSchemaProps?.[field_0.name]?.default ?? "";
+						return /* @__PURE__ */ jsxs("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ jsx(Label, {
+								htmlFor: `item-setting-${field_0.name}`,
+								children: label_0
+							}), /* @__PURE__ */ jsxs(Select, {
+								value: value_4,
+								onValueChange: (newValue_1) => {
+									if (!requireDraft()) return;
+									updateRepeatableSettings.mutate({
+										id: currentItemId,
+										settings: { [field_0.name]: newValue_1 }
+									});
+								},
+								children: [/* @__PURE__ */ jsx(SelectTrigger, {
 									id: `item-setting-${field_0.name}`,
-									checked: checked_0,
-									onCheckedChange: (newValue_2) => {
-										if (!requireDraft()) return;
-										sessionDirtyRef.current = true;
-										updateRepeatableSettings.mutate({
-											id: currentItemId,
-											settings: { [field_0.name]: newValue_2 }
-										});
-									}
-								})]
-							}, field_0.name);
-						}
-						return null;
-					})]
-				}),
-				isViewingAsset && assetFieldName && isMultipleAsset && /* @__PURE__ */ jsx(MultipleAssetFieldEditor, {
-					fieldName: assetFieldName,
-					assetType,
-					currentData,
-					onFieldChange: activeFieldChangeHandler
-				}),
-				isViewingAsset && assetFieldName && !isMultipleAsset && /* @__PURE__ */ jsx(SingleAssetFieldEditor, {
-					fieldName: assetFieldName,
-					assetType,
-					currentData,
-					onFieldChange: activeFieldChangeHandler
-				}),
-				!isViewingAsset && isViewingLink && linkFieldName && /* @__PURE__ */ jsx("div", {
-					className: "px-2 py-4",
-					children: /* @__PURE__ */ jsx(LinkFieldEditor, {
-						fieldName: linkFieldName,
-						linkValue: currentData[linkFieldName] ?? {
-							type: "external",
-							text: "",
-							href: "",
-							newTab: false
-						},
-						onSave: (fieldName_1, value_5) => {
-							activeFieldChangeHandler(fieldName_1, value_5);
-						}
-					})
-				}),
-				!isViewingAsset && !isViewingLink && (currentItemId == null || currentItem) && /* @__PURE__ */ jsx(ItemFieldsEditor, {
-					schema: currentSchema,
-					data: currentData,
-					blockId: block.id,
-					itemId: currentItemId ?? void 0,
-					onFieldChange: activeFieldChangeHandler,
-					postToIframe,
-					filesMap,
-					itemsMap,
-					fieldIdPrefix
-				}, currentItemId ?? `block-${block.id}`),
-				!isViewingAsset && !isViewingLink && currentItemId != null && currentItem && /* @__PURE__ */ jsxs("div", {
-					className: "border-border flex items-center gap-1 border-t px-2 py-4",
-					children: [
-						canAddSibling && /* @__PURE__ */ jsxs(Button, {
-							type: "button",
-							variant: "ghost",
-							size: "sm",
-							className: "text-muted-foreground justify-start",
-							onClick: () => {
-								if (!requireDraft()) return;
-								addSibling({ afterPosition: currentItem.position });
-							},
-							children: [/* @__PURE__ */ jsx(CirclePlus, { className: "h-4 w-4" }), "Add item"]
-						}),
-						canRemoveCurrent && /* @__PURE__ */ jsxs(Button, {
-							type: "button",
-							variant: "ghost",
-							size: "sm",
-							className: "text-muted-foreground justify-start",
-							onClick: () => {
-								if (!requireDraft()) return;
-								removeCurrent(currentItemId, { onSuccess: () => previewStore.send({ type: "selectParent" }) });
-							},
-							children: [/* @__PURE__ */ jsx(CircleMinus, { className: "h-4 w-4" }), "Remove item"]
-						}),
-						/* @__PURE__ */ jsxs(Button, {
-							type: "button",
-							variant: "ghost",
-							size: "sm",
-							className: "text-muted-foreground justify-start",
-							onClick: () => previewStore.send({ type: "selectParent" }),
-							children: [/* @__PURE__ */ jsx(CornerLeftUp, { className: "h-4 w-4" }), "Select parent"]
-						})
-					]
+									children: /* @__PURE__ */ jsx(SelectValue, {})
+								}), /* @__PURE__ */ jsx(SelectContent, { children: field_0.enumValues?.map((enumValue_0) => /* @__PURE__ */ jsx(SelectItem, {
+									value: enumValue_0,
+									children: field_0.enumLabels?.[enumValue_0] ?? enumValue_0
+								}, enumValue_0)) })]
+							})]
+						}, field_0.name);
+					}
+					if (field_0.fieldType === "Boolean") {
+						const checked_0 = itemSettingsValues[field_0.name] ?? itemSettingsSchemaProps?.[field_0.name]?.default ?? false;
+						return /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ jsx(Label, {
+								htmlFor: `item-setting-${field_0.name}`,
+								children: label_0
+							}), /* @__PURE__ */ jsx(Switch, {
+								id: `item-setting-${field_0.name}`,
+								checked: checked_0,
+								onCheckedChange: (newValue_2) => {
+									if (!requireDraft()) return;
+									updateRepeatableSettings.mutate({
+										id: currentItemId,
+										settings: { [field_0.name]: newValue_2 }
+									});
+								}
+							})]
+						}, field_0.name);
+					}
+					return null;
+				}) })]
+			}),
+			isViewingAsset && assetFieldName && isMultipleAsset && /* @__PURE__ */ jsx(MultipleAssetFieldEditor, {
+				fieldName: assetFieldName,
+				assetType,
+				currentData,
+				onFieldChange: activeFieldChangeHandler
+			}),
+			isViewingAsset && assetFieldName && !isMultipleAsset && /* @__PURE__ */ jsx(SingleAssetFieldEditor, {
+				fieldName: assetFieldName,
+				assetType,
+				currentData,
+				onFieldChange: activeFieldChangeHandler
+			}),
+			!isViewingAsset && isViewingLink && linkFieldName && /* @__PURE__ */ jsx("div", {
+				className: "px-2 py-4",
+				children: /* @__PURE__ */ jsx(LinkFieldEditor, {
+					fieldName: linkFieldName,
+					linkValue: currentData[linkFieldName] ?? {
+						type: "external",
+						text: "",
+						href: "",
+						newTab: false
+					},
+					onSave: (fieldName_1, value_5) => {
+						activeFieldChangeHandler(fieldName_1, value_5);
+					}
 				})
-			] })
-		})]
+			}),
+			!isViewingAsset && !isViewingLink && (currentItemId == null || currentItem) && /* @__PURE__ */ jsx(ItemFieldsEditor, {
+				selectedFieldName: fieldInfo?.fieldName,
+				schema: currentSchema,
+				data: currentData,
+				blockId: block.id,
+				itemId: currentItemId ?? void 0,
+				onFieldChange: activeFieldChangeHandler,
+				postToIframe,
+				filesMap,
+				itemsMap,
+				fieldIdPrefix
+			}, `${block.id}-${currentItemId ?? "block"}-${fieldInfo?.fieldName ?? "fields"}`),
+			areCommentsEnabled() && !fieldHasOwnView && (currentItemId == null || currentItem) && /* @__PURE__ */ jsx(AttachedComments, {
+				pageId,
+				blockId: block.id,
+				itemId: currentItemId ?? void 0
+			}),
+			areCommentsEnabled() && fieldHasOwnView && fieldInfo && /* @__PURE__ */ jsx(AttachedComments, {
+				pageId,
+				blockId: block.id,
+				itemId: currentItemId ?? void 0,
+				fieldName: fieldInfo.fieldName,
+				fieldType: fieldInfo.fieldType
+			})
+		] }) })
 	})] });
 };