@webiny/app-headless-cms 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/admin/components/FieldEditor/FieldEditor.js

@@ -1,7 +1,7 @@
-import React, { Fragment } from "react";
+import react, { Fragment } from "react";
 import get from "lodash/get.js";
 import { i18n } from "@webiny/app/i18n/index.js";
-import { ReactComponent as DragIcon } from "@webiny/icons/drag_indicator.svg";
+import { ReactComponent } from "@webiny/icons/drag_indicator.svg";
 import { Center, Horizontal, Vertical } from "../DropZone/index.js";
 import Draggable from "../Draggable.js";
 import EditFieldDialog from "./EditFieldDialog.js";
@@ -9,237 +9,180 @@ import Field from "./Field.js";
 import { LayoutCell } from "./LayoutCell.js";
 import { useModelFieldEditor } from "./useModelFieldEditor.js";
 import { FieldEditorProvider } from "./FieldEditorContext.js";
-import { isLayoutField } from "@webiny/app-headless-cms-common/types/model.js";
+import { isLayoutField } from "../../../types.js";
 import { ModelFieldProvider } from "../ModelFieldProvider/index.js";
-import { cn, Icon } from "@webiny/admin-ui";
+import { IconButton } from "@webiny/admin-ui";
 const t = i18n.namespace("app-headless-cms/admin/components/editor");
-const fieldTypes = ["field", "newField"];
-const Editor = () => {
-  const {
-    parent,
-    depth,
-    insertField,
-    updateField,
-    deleteField,
-    fields,
-    noConflict,
-    editField,
-    onFieldDrop,
-    onEndDrag,
-    field,
-    dropTarget,
-    getFieldPlugin,
-    getLayoutFieldPlugin,
-    getField
-  } = useModelFieldEditor();
-
-  /**
-   * Collect all data fields referenced inside a layout descriptor (e.g. fields inside tabs).
-   * Delegates to the layout field plugin's `collectFields` method if available.
-   */
-  const collectLayoutFieldFields = layoutField => {
-    const plugin = getLayoutFieldPlugin(layoutField.type);
-    if (!plugin?.field.collectFields) {
-      return [];
-    }
-    return plugin.field.collectFields({
-      field: layoutField,
-      getField: id => getField({
-        id
-      })
-    });
-  };
-  const canDropIntoField = (field, draggable) => {
-    const fieldPlugin = getFieldPlugin(field.type);
-    if (!fieldPlugin) {
-      return true;
-    }
-    const canAccept = fieldPlugin.field.canAccept;
-    if (typeof canAccept === "function" && !canAccept(field, draggable)) {
-      return false;
-    }
-    return true;
-  };
-  const isVerticalDropzoneVisible = cb => {
-    return item => {
-      // Layout fields always occupy full row — no side-by-side layout
-      if (item.type === "newLayoutField" || item.type === "layoutField") {
-        return false;
-      }
-      if (!parent) {
-        return cb(item);
-      }
-      const fieldPlugin = getFieldPlugin(parent.type);
-      if (fieldPlugin) {
-        const allowLayout = fieldPlugin.field.allowLayout ?? true;
-        if (!allowLayout) {
-          return false;
-        }
-      }
-      if (!canDropIntoField(parent, item)) {
-        return false;
-      }
-      return cb(item);
+const fieldTypes = [
+    "field",
+    "newField"
+];
+const Editor = ()=>{
+    const { parent, depth, insertField, updateField, deleteField, fields, noConflict, editField, onFieldDrop, onEndDrag, field, dropTarget, getFieldType, getLayoutFieldType, getField } = useModelFieldEditor();
+    const collectLayoutFieldFields = (layoutField)=>{
+        const lft = getLayoutFieldType(layoutField.type);
+        if (!lft || !lft.collectFields) return [];
+        return lft.collectFields({
+            field: layoutField,
+            getField: (id)=>getField({
+                    id
+                })
+        });
     };
-  };
-  const isHorizontalDropzoneVisible = cb => {
-    return item => {
-      if (!parent) {
-        return cb(item);
-      }
-      if (!canDropIntoField(parent, item)) {
-        return false;
-      }
-      return cb(item);
+    const canDropIntoField = (field, draggable)=>{
+        const ft = getFieldType(field);
+        if (ft && "function" == typeof ft.canAccept && !ft.canAccept(field, draggable)) return false;
+        return true;
     };
-  };
-  return /*#__PURE__*/React.createElement(Fragment, null, fields.length === 0 && /*#__PURE__*/React.createElement(Center, {
-    isDroppable: isHorizontalDropzoneVisible(() => true),
-    onDrop: item => onFieldDrop(item, {
-      row: 0,
-      index: 0
-    })
-  }, t`Drop your first field here`), fields.map((row, index) => {
-    // Build a stable key for the row
-    const rowKey = row.map(cell => isLayoutField(cell) ? cell.id : cell.fieldId).join(".");
-    return /*#__PURE__*/React.createElement(Draggable, {
-      beginDrag: {
-        parent: parent ? parent.fieldId : null,
-        type: "row",
-        fields: row.filter(cell => !isLayoutField(cell)),
-        pos: {
-          row: index
+    const isVerticalDropzoneVisible = (cb)=>(item)=>{
+            if ("newLayoutField" === item.type || "layoutField" === item.type) return false;
+            if (!parent) return cb(item);
+            const parentFieldType = getFieldType(parent);
+            if (parentFieldType) {
+                const allowLayout = parentFieldType.allowLayout ?? true;
+                if (!allowLayout) return false;
+            }
+            if (!canDropIntoField(parent, item)) return false;
+            return cb(item);
+        };
+    const isHorizontalDropzoneVisible = (cb)=>(item)=>{
+            if (!parent) return cb(item);
+            if (!canDropIntoField(parent, item)) return false;
+            return cb(item);
+        };
+    return /*#__PURE__*/ react.createElement(Fragment, null, 0 === fields.length && /*#__PURE__*/ react.createElement(Center, {
+        isDroppable: isHorizontalDropzoneVisible(()=>true),
+        onDrop: (item)=>onFieldDrop(item, {
+                row: 0,
+                index: 0
+            })
+    }, t`Drop your first field here`), fields.map((row, index)=>{
+        const rowKey = row.map((cell)=>isLayoutField(cell) ? cell.id : cell.fieldId).join(".");
+        return /*#__PURE__*/ react.createElement(Draggable, {
+            beginDrag: {
+                parent: parent ? parent.fieldId : null,
+                type: "row",
+                fields: row.filter((cell)=>!isLayoutField(cell)),
+                pos: {
+                    row: index
+                }
+            },
+            endDrag: onEndDrag,
+            key: rowKey
+        }, ({ drag, isDragging })=>/*#__PURE__*/ react.createElement("div", {
+                className: `group flex flex-column relative mb-sm-extra last-of-type:mb-none ${isDragging ? "opacity-50" : "opacity-100"}`
+            }, /*#__PURE__*/ react.createElement("div", {
+                className: "cursor-grab absolute left-[0] top-1/2 -translate-y-1/2 z-10 invisible group-hover:visible",
+                ref: (element)=>{
+                    drag(element);
+                }
+            }, /*#__PURE__*/ react.createElement(IconButton, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                variant: "secondary",
+                size: "xs"
+            })), /*#__PURE__*/ react.createElement(Horizontal, {
+                isVisible: isHorizontalDropzoneVisible(noConflict()),
+                "data-testid": `cms-editor-row-droppable-top-${index}`,
+                onDrop: (item)=>onFieldDrop(item, {
+                        row: index,
+                        index: null
+                    })
+            }), /*#__PURE__*/ react.createElement("div", {
+                className: "w-full flex justify-between gap-x-sm-extra",
+                "data-testid": "cms.editor.field-row"
+            }, row.map((cell, fieldIndex)=>{
+                if (isLayoutField(cell)) return /*#__PURE__*/ react.createElement(Draggable, {
+                    key: cell.id,
+                    beginDrag: {
+                        parent: parent ? parent.fieldId : null,
+                        type: "layoutField",
+                        layoutField: cell,
+                        fields: collectLayoutFieldFields(cell)
+                    },
+                    endDrag: onEndDrag
+                }, ({ drag })=>/*#__PURE__*/ react.createElement("div", {
+                        ref: (element)=>{
+                            drag(element);
+                        },
+                        className: "relative flex-1 min-w-0"
+                    }, /*#__PURE__*/ react.createElement("div", {
+                        className: "cursor-grab bg-neutral-base drop-shadow-[0px_1px_2px_rgba(0,0,0,0.05)] rounded-lg pl-md pr-sm py-sm"
+                    }, /*#__PURE__*/ react.createElement(LayoutCell, {
+                        field: cell,
+                        rowIndex: index,
+                        cellIndex: fieldIndex
+                    }))));
+                const field = cell;
+                return /*#__PURE__*/ react.createElement(ModelFieldProvider, {
+                    field: field,
+                    key: field.fieldId
+                }, /*#__PURE__*/ react.createElement(Draggable, {
+                    beginDrag: {
+                        parent: parent ? parent.fieldId : null,
+                        type: "field",
+                        field,
+                        pos: {
+                            row: index,
+                            index: fieldIndex
+                        }
+                    },
+                    endDrag: onEndDrag
+                }, ({ drag })=>/*#__PURE__*/ react.createElement("div", {
+                        className: "relative flex-1 min-w-0",
+                        ref: (element)=>{
+                            drag(element);
+                        }
+                    }, /*#__PURE__*/ react.createElement(Vertical, {
+                        depth: depth,
+                        onDrop: (item)=>onFieldDrop(item, {
+                                row: index,
+                                index: fieldIndex
+                            }),
+                        isVisible: isVerticalDropzoneVisible(noConflict((item)=>fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index)))
+                    }), /*#__PURE__*/ react.createElement("div", {
+                        className: "cursor-grab bg-neutral-base drop-shadow-[0px_1px_2px_rgba(0,0,0,0.05)] rounded-lg pl-md pr-sm py-sm"
+                    }, /*#__PURE__*/ react.createElement(Field, {
+                        parent: parent,
+                        field: field,
+                        onEdit: editField,
+                        onDelete: deleteField
+                    })), fieldIndex === row.length - 1 && /*#__PURE__*/ react.createElement(Vertical, {
+                        last: true,
+                        depth: depth,
+                        isVisible: isVerticalDropzoneVisible(noConflict((item)=>fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index))),
+                        onDrop: (item)=>onFieldDrop(item, {
+                                row: index,
+                                index: fieldIndex + 1
+                            })
+                    }))));
+            })), index === fields.length - 1 ? /*#__PURE__*/ react.createElement(Horizontal, {
+                "data-testid": `cms-editor-row-droppable-bottom-${index}`,
+                last: true,
+                isVisible: isHorizontalDropzoneVisible(noConflict()),
+                onDrop: (item)=>onFieldDrop(item, {
+                        row: index + 1,
+                        index: null
+                    })
+            }) : null));
+    }), field ? /*#__PURE__*/ react.createElement(ModelFieldProvider, {
+        field: field
+    }, /*#__PURE__*/ react.createElement(EditFieldDialog, {
+        onClose: ()=>editField(null),
+        onSubmit: (field)=>{
+            if (field.id) {
+                updateField(field);
+                editField(null);
+                return;
+            }
+            insertField({
+                field,
+                position: dropTarget
+            });
+            editField(null);
         }
-      },
-      endDrag: onEndDrag,
-      key: rowKey
-    }, ({
-      drag,
-      isDragging
-    } /* RowContainer start - includes drag handle, drop zones and the Row itself. */) => /*#__PURE__*/React.createElement("div", {
-      className: cn(["flex flex-column", "relative", "mb-md last-of-type:mb-none", "bg-neutral-dimmed", isDragging ? "opacity-30" : "opacity-100"])
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cn(["cursor-grab", "absolute left-sm-plus top-sm-plus z-10"]),
-      ref: element => {
-        drag(element);
-      }
-    }, /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(DragIcon, null),
-      label: "Drag to move this row",
-      color: "neutral-light",
-      size: "sm"
-    })), /*#__PURE__*/React.createElement(Horizontal, {
-      isVisible: isHorizontalDropzoneVisible(noConflict()),
-      "data-testid": `cms-editor-row-droppable-top-${index}`,
-      onDrop: item => onFieldDrop(item, {
-        row: index,
-        index: null
-      })
-    }), /*#__PURE__*/React.createElement("div", {
-      className: cn(["w-full flex justify-between", "pl-xl pr-sm py-sm"]),
-      "data-testid": "cms.editor.field-row"
-    }, row.map((cell, fieldIndex) => {
-      if (isLayoutField(cell)) {
-        return /*#__PURE__*/React.createElement(Draggable, {
-          key: cell.id,
-          beginDrag: {
-            parent: parent ? parent.fieldId : null,
-            type: "layoutField",
-            layoutField: cell,
-            fields: collectLayoutFieldFields(cell)
-          },
-          endDrag: onEndDrag
-        }, ({
-          drag
-        }) => /*#__PURE__*/React.createElement("div", {
-          ref: element => {
-            drag(element);
-          },
-          className: cn(["relative", "flex-1 basis-full", "mx-sm"])
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "cursor-grab bg-neutral-base p-md shadow-sm rounded-xs"
-        }, /*#__PURE__*/React.createElement(LayoutCell, {
-          field: cell,
-          rowIndex: index,
-          cellIndex: fieldIndex
-        }))));
-      }
-      const field = cell;
-      return /*#__PURE__*/React.createElement(ModelFieldProvider, {
-        field: field,
-        key: field.fieldId
-      }, /*#__PURE__*/React.createElement(Draggable, {
-        beginDrag: {
-          parent: parent ? parent.fieldId : null,
-          type: "field",
-          field,
-          pos: {
-            row: index,
-            index: fieldIndex
-          }
-        },
-        endDrag: onEndDrag
-      }, ({
-        drag
-      }) => /*#__PURE__*/React.createElement("div", {
-        className: cn(["relative", "flex-1 basis-full", "mx-sm"]),
-        ref: element => {
-          drag(element);
-        }
-      }, /*#__PURE__*/React.createElement(Vertical, {
-        depth: depth,
-        onDrop: item => onFieldDrop(item, {
-          row: index,
-          index: fieldIndex
-        }),
-        isVisible: isVerticalDropzoneVisible(noConflict(item => fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index)))
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "cursor-grab bg-neutral-base p-md shadow-sm rounded-xs"
-      }, /*#__PURE__*/React.createElement(Field, {
-        parent: parent,
-        field: field,
-        onEdit: editField,
-        onDelete: deleteField
-      })), fieldIndex === row.length - 1 && /*#__PURE__*/React.createElement(Vertical, {
-        last: true,
-        depth: depth,
-        isVisible: isVerticalDropzoneVisible(noConflict(item => {
-          return fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index);
-        })),
-        onDrop: item => onFieldDrop(item, {
-          row: index,
-          index: fieldIndex + 1
-        })
-      }))));
-    })), index === fields.length - 1 ? /*#__PURE__*/React.createElement(Horizontal, {
-      "data-testid": `cms-editor-row-droppable-bottom-${index}`,
-      last: true,
-      isVisible: isHorizontalDropzoneVisible(noConflict()),
-      onDrop: item => onFieldDrop(item, {
-        row: index + 1,
-        index: null
-      })
-    }) : null));
-  }), field ? /*#__PURE__*/React.createElement(ModelFieldProvider, {
-    field: field
-  }, /*#__PURE__*/React.createElement(EditFieldDialog, {
-    onClose: () => editField(null),
-    onSubmit: field => {
-      if (field.id) {
-        updateField(field);
-        editField(null);
-        return;
-      }
-      insertField({
-        field,
-        position: dropTarget
-      });
-      editField(null);
-    }
-  })) : null);
-};
-export const FieldEditor = props => {
-  return /*#__PURE__*/React.createElement(FieldEditorProvider, props, /*#__PURE__*/React.createElement(Editor, null));
+    })) : null);
 };
+const FieldEditor = (props)=>/*#__PURE__*/ react.createElement(FieldEditorProvider, props, /*#__PURE__*/ react.createElement(Editor, null));
+export { FieldEditor };
 
 //# sourceMappingURL=FieldEditor.js.map

package/admin/components/FieldEditor/FieldEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Fragment","get","i18n","ReactComponent","DragIcon","Center","Horizontal","Vertical","Draggable","EditFieldDialog","Field","LayoutCell","useModelFieldEditor","FieldEditorProvider","isLayoutField","ModelFieldProvider","cn","Icon","t","namespace","fieldTypes","Editor","parent","depth","insertField","updateField","deleteField","fields","noConflict","editField","onFieldDrop","onEndDrag","field","dropTarget","getFieldPlugin","getLayoutFieldPlugin","getField","collectLayoutFieldFields","layoutField","plugin","type","collectFields","id","canDropIntoField","draggable","fieldPlugin","canAccept","isVerticalDropzoneVisible","cb","item","allowLayout","isHorizontalDropzoneVisible","createElement","length","isDroppable","onDrop","row","index","map","rowKey","cell","fieldId","join","beginDrag","filter","pos","endDrag","key","drag","isDragging","className","ref","element","icon","label","color","size","isVisible","fieldIndex","rowIndex","cellIndex","includes","onEdit","onDelete","last","onClose","onSubmit","position","FieldEditor","props"],"sources":["FieldEditor.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport get from \"lodash/get.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { ReactComponent as DragIcon } from \"@webiny/icons/drag_indicator.svg\";\nimport { Center, Horizontal, Vertical } from \"../DropZone/index.js\";\nimport Draggable from \"../Draggable.js\";\nimport EditFieldDialog from \"./EditFieldDialog.js\";\nimport Field from \"./Field.js\";\nimport { LayoutCell } from \"./LayoutCell.js\";\nimport { useModelFieldEditor } from \"./useModelFieldEditor.js\";\nimport type { IsVisibleCallable } from \"./FieldEditorContext.js\";\nimport { FieldEditorProvider } from \"./FieldEditorContext.js\";\nimport type { CmsEditorFieldsLayout, CmsModelField, DragSource } from \"~/types.js\";\nimport type { CmsLayoutField } from \"@webiny/app-headless-cms-common/types/model.js\";\nimport { isLayoutField } from \"@webiny/app-headless-cms-common/types/model.js\";\nimport { ModelFieldProvider } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { cn, Icon } from \"@webiny/admin-ui\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nconst fieldTypes: string[] = [\"field\", \"newField\"];\n\nconst Editor = () => {\n    const {\n        parent,\n        depth,\n        insertField,\n        updateField,\n        deleteField,\n        fields,\n        noConflict,\n        editField,\n        onFieldDrop,\n        onEndDrag,\n        field,\n        dropTarget,\n        getFieldPlugin,\n        getLayoutFieldPlugin,\n        getField\n    } = useModelFieldEditor();\n\n    /**\n     * Collect all data fields referenced inside a layout descriptor (e.g. fields inside tabs).\n     * Delegates to the layout field plugin's `collectFields` method if available.\n     */\n    const collectLayoutFieldFields = (layoutField: CmsLayoutField): CmsModelField[] => {\n        const plugin = getLayoutFieldPlugin(layoutField.type);\n        if (!plugin?.field.collectFields) {\n            return [];\n        }\n        return plugin.field.collectFields({\n            field: layoutField,\n            getField: (id: string) => getField({ id })\n        });\n    };\n\n    const canDropIntoField = (field: CmsModelField, draggable: DragSource) => {\n        const fieldPlugin = getFieldPlugin(field.type);\n        if (!fieldPlugin) {\n            return true;\n        }\n        const canAccept = fieldPlugin.field.canAccept;\n        if (typeof canAccept === \"function\" && !canAccept(field, draggable)) {\n            return false;\n        }\n\n        return true;\n    };\n\n    const isVerticalDropzoneVisible = (cb: IsVisibleCallable) => {\n        return (item: DragSource) => {\n            // Layout fields always occupy full row — no side-by-side layout\n            if (item.type === \"newLayoutField\" || item.type === \"layoutField\") {\n                return false;\n            }\n\n            if (!parent) {\n                return cb(item);\n            }\n\n            const fieldPlugin = getFieldPlugin(parent.type);\n            if (fieldPlugin) {\n                const allowLayout = fieldPlugin.field.allowLayout ?? true;\n                if (!allowLayout) {\n                    return false;\n                }\n            }\n\n            if (!canDropIntoField(parent, item)) {\n                return false;\n            }\n\n            return cb(item);\n        };\n    };\n\n    const isHorizontalDropzoneVisible = (cb: IsVisibleCallable) => {\n        return (item: DragSource) => {\n            if (!parent) {\n                return cb(item);\n            }\n\n            if (!canDropIntoField(parent, item)) {\n                return false;\n            }\n\n            return cb(item);\n        };\n    };\n\n    return (\n        <Fragment>\n            {fields.length === 0 && (\n                <Center\n                    isDroppable={isHorizontalDropzoneVisible(() => true)}\n                    onDrop={item =>\n                        onFieldDrop(item, {\n                            row: 0,\n                            index: 0\n                        })\n                    }\n                >\n                    {t`Drop your first field here`}\n                </Center>\n            )}\n\n            {fields.map((row, index) => {\n                // Build a stable key for the row\n                const rowKey = row\n                    .map(cell => (isLayoutField(cell) ? cell.id : (cell as CmsModelField).fieldId))\n                    .join(\".\");\n\n                return (\n                    <Draggable\n                        beginDrag={{\n                            parent: parent ? parent.fieldId : null,\n                            type: \"row\",\n                            fields: row.filter(cell => !isLayoutField(cell)) as CmsModelField[],\n                            pos: { row: index }\n                        }}\n                        endDrag={onEndDrag}\n                        key={rowKey}\n                    >\n                        {(\n                            {\n                                drag,\n                                isDragging\n                            } /* RowContainer start - includes drag handle, drop zones and the Row itself. */\n                        ) => (\n                            <div\n                                className={cn([\n                                    \"flex flex-column\",\n                                    \"relative\",\n                                    \"mb-md last-of-type:mb-none\",\n                                    \"bg-neutral-dimmed\",\n                                    isDragging ? \"opacity-30\" : \"opacity-100\"\n                                ])}\n                            >\n                                <div\n                                    className={cn([\n                                        \"cursor-grab\",\n                                        \"absolute left-sm-plus top-sm-plus z-10\"\n                                    ])}\n                                    ref={element => {\n                                        drag(element);\n                                    }}\n                                >\n                                    <Icon\n                                        icon={<DragIcon />}\n                                        label={\"Drag to move this row\"}\n                                        color={\"neutral-light\"}\n                                        size={\"sm\"}\n                                    />\n                                </div>\n                                <Horizontal\n                                    isVisible={isHorizontalDropzoneVisible(noConflict())}\n                                    data-testid={`cms-editor-row-droppable-top-${index}`}\n                                    onDrop={item => onFieldDrop(item, { row: index, index: null })}\n                                />\n                                {/* Row start - includes field drop zones and fields */}\n                                <div\n                                    className={cn([\n                                        \"w-full flex justify-between\",\n                                        \"pl-xl pr-sm py-sm\"\n                                    ])}\n                                    data-testid={\"cms.editor.field-row\"}\n                                >\n                                    {row.map((cell, fieldIndex) => {\n                                        if (isLayoutField(cell)) {\n                                            return (\n                                                <Draggable\n                                                    key={cell.id}\n                                                    beginDrag={{\n                                                        parent: parent ? parent.fieldId : null,\n                                                        type: \"layoutField\",\n                                                        layoutField: cell,\n                                                        fields: collectLayoutFieldFields(cell)\n                                                    }}\n                                                    endDrag={onEndDrag}\n                                                >\n                                                    {({ drag }) => (\n                                                        <div\n                                                            ref={element => {\n                                                                drag(element);\n                                                            }}\n                                                            className={cn([\n                                                                \"relative\",\n                                                                \"flex-1 basis-full\",\n                                                                \"mx-sm\"\n                                                            ])}\n                                                        >\n                                                            <div\n                                                                className={\n                                                                    \"cursor-grab bg-neutral-base p-md shadow-sm rounded-xs\"\n                                                                }\n                                                            >\n                                                                <LayoutCell\n                                                                    field={cell}\n                                                                    rowIndex={index}\n                                                                    cellIndex={fieldIndex}\n                                                                />\n                                                            </div>\n                                                        </div>\n                                                    )}\n                                                </Draggable>\n                                            );\n                                        }\n\n                                        const field = cell as CmsModelField;\n                                        return (\n                                            <ModelFieldProvider field={field} key={field.fieldId}>\n                                                <Draggable\n                                                    beginDrag={{\n                                                        parent: parent ? parent.fieldId : null,\n                                                        type: \"field\",\n                                                        field,\n                                                        pos: {\n                                                            row: index,\n                                                            index: fieldIndex\n                                                        }\n                                                    }}\n                                                    endDrag={onEndDrag}\n                                                >\n                                                    {({ drag }) => (\n                                                        <div\n                                                            className={cn([\n                                                                \"relative\",\n                                                                \"flex-1 basis-full\",\n                                                                \"mx-sm\"\n                                                            ])}\n                                                            ref={element => {\n                                                                drag(element);\n                                                            }}\n                                                        >\n                                                            <Vertical\n                                                                depth={depth}\n                                                                onDrop={item =>\n                                                                    onFieldDrop(item, {\n                                                                        row: index,\n                                                                        index: fieldIndex\n                                                                    })\n                                                                }\n                                                                isVisible={isVerticalDropzoneVisible(\n                                                                    noConflict(\n                                                                        item =>\n                                                                            fieldTypes.includes(\n                                                                                item.type\n                                                                            ) &&\n                                                                            (row.length < 4 ||\n                                                                                get(\n                                                                                    item,\n                                                                                    \"pos.row\"\n                                                                                ) === index)\n                                                                    )\n                                                                )}\n                                                            />\n\n                                                            <div\n                                                                className={\n                                                                    \"cursor-grab bg-neutral-base p-md shadow-sm rounded-xs\"\n                                                                }\n                                                            >\n                                                                <Field\n                                                                    parent={parent}\n                                                                    field={field}\n                                                                    onEdit={editField}\n                                                                    onDelete={deleteField}\n                                                                />\n                                                            </div>\n\n                                                            {/* Field end */}\n                                                            {fieldIndex === row.length - 1 && (\n                                                                <Vertical\n                                                                    last\n                                                                    depth={depth}\n                                                                    isVisible={isVerticalDropzoneVisible(\n                                                                        noConflict(item => {\n                                                                            return (\n                                                                                fieldTypes.includes(\n                                                                                    item.type\n                                                                                ) &&\n                                                                                (row.length < 4 ||\n                                                                                    get(\n                                                                                        item,\n                                                                                        \"pos.row\"\n                                                                                    ) === index)\n                                                                            );\n                                                                        })\n                                                                    )}\n                                                                    onDrop={item =>\n                                                                        onFieldDrop(item, {\n                                                                            row: index,\n                                                                            index: fieldIndex + 1\n                                                                        })\n                                                                    }\n                                                                />\n                                                            )}\n                                                        </div>\n                                                    )}\n                                                </Draggable>\n                                            </ModelFieldProvider>\n                                        );\n                                    })}\n                                </div>\n                                {/* Row end */}\n                                {index === fields.length - 1 ? (\n                                    <Horizontal\n                                        data-testid={`cms-editor-row-droppable-bottom-${index}`}\n                                        last\n                                        isVisible={isHorizontalDropzoneVisible(noConflict())}\n                                        onDrop={item =>\n                                            onFieldDrop(item, {\n                                                row: index + 1,\n                                                index: null\n                                            })\n                                        }\n                                    />\n                                ) : null}\n                            </div>\n                        )}\n                    </Draggable>\n                );\n            })}\n\n            {field ? (\n                <ModelFieldProvider field={field}>\n                    <EditFieldDialog\n                        onClose={() => editField(null)}\n                        onSubmit={field => {\n                            if (field.id) {\n                                updateField(field);\n                                editField(null);\n                                return;\n                            }\n                            insertField({ field, position: dropTarget });\n\n                            editField(null);\n                        }}\n                    />\n                </ModelFieldProvider>\n            ) : null}\n        </Fragment>\n    );\n};\n\nexport interface FieldEditorProps {\n    parent?: CmsModelField;\n    layout: CmsEditorFieldsLayout;\n    fields: CmsModelField[];\n    onChange: (params: { fields: CmsModelField[]; layout: CmsEditorFieldsLayout }) => void;\n}\n\nexport const FieldEditor = (props: FieldEditorProps) => {\n    return (\n        <FieldEditorProvider {...props}>\n            <Editor />\n        </FieldEditorProvider>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"admin/components/FieldEditor/FieldEditor.js","sources":["../../../../src/admin/components/FieldEditor/FieldEditor.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport get from \"lodash/get.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { ReactComponent as DragIcon } from \"@webiny/icons/drag_indicator.svg\";\nimport { Center, Horizontal, Vertical } from \"../DropZone/index.js\";\nimport Draggable from \"../Draggable.js\";\nimport EditFieldDialog from \"./EditFieldDialog.js\";\nimport Field from \"./Field.js\";\nimport { LayoutCell } from \"./LayoutCell.js\";\nimport { useModelFieldEditor } from \"./useModelFieldEditor.js\";\nimport type { IsVisibleCallable } from \"./FieldEditorContext.js\";\nimport { FieldEditorProvider } from \"./FieldEditorContext.js\";\nimport type { CmsEditorFieldsLayout, CmsModelField, CmsLayoutField, DragSource } from \"~/types.js\";\nimport { isLayoutField } from \"~/types.js\";\nimport { ModelFieldProvider } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { IconButton } from \"@webiny/admin-ui\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nconst fieldTypes: string[] = [\"field\", \"newField\"];\n\nconst Editor = () => {\n    const {\n        parent,\n        depth,\n        insertField,\n        updateField,\n        deleteField,\n        fields,\n        noConflict,\n        editField,\n        onFieldDrop,\n        onEndDrag,\n        field,\n        dropTarget,\n        getFieldType,\n        getLayoutFieldType,\n        getField\n    } = useModelFieldEditor();\n\n    /**\n     * Collect all data fields referenced inside a layout descriptor (e.g. fields inside tabs).\n     * Delegates to the layout field type's `collectFields` method if available.\n     */\n    const collectLayoutFieldFields = (layoutField: CmsLayoutField): CmsModelField[] => {\n        const lft = getLayoutFieldType(layoutField.type);\n        if (!lft || !lft.collectFields) {\n            return [];\n        }\n        return lft.collectFields({\n            field: layoutField,\n            getField: (id: string) => getField({ id })\n        });\n    };\n\n    const canDropIntoField = (field: CmsModelField, draggable: DragSource) => {\n        const ft = getFieldType(field);\n        if (ft && typeof ft.canAccept === \"function\" && !ft.canAccept(field, draggable)) {\n            return false;\n        }\n        return true;\n    };\n\n    const isVerticalDropzoneVisible = (cb: IsVisibleCallable) => {\n        return (item: DragSource) => {\n            // Layout fields always occupy full row — no side-by-side layout\n            if (item.type === \"newLayoutField\" || item.type === \"layoutField\") {\n                return false;\n            }\n\n            if (!parent) {\n                return cb(item);\n            }\n\n            const parentFieldType = getFieldType(parent);\n            if (parentFieldType) {\n                const allowLayout = parentFieldType.allowLayout ?? true;\n                if (!allowLayout) {\n                    return false;\n                }\n            }\n\n            if (!canDropIntoField(parent, item)) {\n                return false;\n            }\n\n            return cb(item);\n        };\n    };\n\n    const isHorizontalDropzoneVisible = (cb: IsVisibleCallable) => {\n        return (item: DragSource) => {\n            if (!parent) {\n                return cb(item);\n            }\n\n            if (!canDropIntoField(parent, item)) {\n                return false;\n            }\n\n            return cb(item);\n        };\n    };\n\n    return (\n        <Fragment>\n            {fields.length === 0 && (\n                <Center\n                    isDroppable={isHorizontalDropzoneVisible(() => true)}\n                    onDrop={item =>\n                        onFieldDrop(item, {\n                            row: 0,\n                            index: 0\n                        })\n                    }\n                >\n                    {t`Drop your first field here`}\n                </Center>\n            )}\n\n            {fields.map((row, index) => {\n                // Build a stable key for the row\n                const rowKey = row\n                    .map(cell => (isLayoutField(cell) ? cell.id : (cell as CmsModelField).fieldId))\n                    .join(\".\");\n\n                return (\n                    <Draggable\n                        beginDrag={{\n                            parent: parent ? parent.fieldId : null,\n                            type: \"row\",\n                            fields: row.filter(cell => !isLayoutField(cell)) as CmsModelField[],\n                            pos: { row: index }\n                        }}\n                        endDrag={onEndDrag}\n                        key={rowKey}\n                    >\n                        {(\n                            {\n                                drag,\n                                isDragging\n                            } /* RowContainer start - includes drag handle, drop zones and the Row itself. */\n                        ) => (\n                            <div\n                                className={`group flex flex-column relative mb-sm-extra last-of-type:mb-none ${isDragging ? \"opacity-50\" : \"opacity-100\"}`}\n                            >\n                                <div\n                                    className={\n                                        \"cursor-grab absolute left-[0] top-1/2 -translate-y-1/2 z-10 invisible group-hover:visible\"\n                                    }\n                                    ref={element => {\n                                        drag(element);\n                                    }}\n                                >\n                                    <IconButton\n                                        icon={<DragIcon />}\n                                        variant={\"secondary\"}\n                                        size={\"xs\"}\n                                    />\n                                </div>\n                                <Horizontal\n                                    isVisible={isHorizontalDropzoneVisible(noConflict())}\n                                    data-testid={`cms-editor-row-droppable-top-${index}`}\n                                    onDrop={item => onFieldDrop(item, { row: index, index: null })}\n                                />\n                                {/* Row start - includes field drop zones and fields */}\n                                <div\n                                    className={\"w-full flex justify-between gap-x-sm-extra\"}\n                                    data-testid={\"cms.editor.field-row\"}\n                                >\n                                    {row.map((cell, fieldIndex) => {\n                                        if (isLayoutField(cell)) {\n                                            return (\n                                                <Draggable\n                                                    key={cell.id}\n                                                    beginDrag={{\n                                                        parent: parent ? parent.fieldId : null,\n                                                        type: \"layoutField\",\n                                                        layoutField: cell,\n                                                        fields: collectLayoutFieldFields(cell)\n                                                    }}\n                                                    endDrag={onEndDrag}\n                                                >\n                                                    {({ drag }) => (\n                                                        <div\n                                                            ref={element => {\n                                                                drag(element);\n                                                            }}\n                                                            className={\"relative flex-1 min-w-0\"}\n                                                        >\n                                                            <div\n                                                                className={\n                                                                    \"cursor-grab bg-neutral-base drop-shadow-[0px_1px_2px_rgba(0,0,0,0.05)] rounded-lg pl-md pr-sm py-sm\"\n                                                                }\n                                                            >\n                                                                <LayoutCell\n                                                                    field={cell}\n                                                                    rowIndex={index}\n                                                                    cellIndex={fieldIndex}\n                                                                />\n                                                            </div>\n                                                        </div>\n                                                    )}\n                                                </Draggable>\n                                            );\n                                        }\n\n                                        const field = cell as CmsModelField;\n                                        return (\n                                            <ModelFieldProvider field={field} key={field.fieldId}>\n                                                <Draggable\n                                                    beginDrag={{\n                                                        parent: parent ? parent.fieldId : null,\n                                                        type: \"field\",\n                                                        field,\n                                                        pos: {\n                                                            row: index,\n                                                            index: fieldIndex\n                                                        }\n                                                    }}\n                                                    endDrag={onEndDrag}\n                                                >\n                                                    {({ drag }) => (\n                                                        <div\n                                                            className={\"relative flex-1 min-w-0\"}\n                                                            ref={element => {\n                                                                drag(element);\n                                                            }}\n                                                        >\n                                                            <Vertical\n                                                                depth={depth}\n                                                                onDrop={item =>\n                                                                    onFieldDrop(item, {\n                                                                        row: index,\n                                                                        index: fieldIndex\n                                                                    })\n                                                                }\n                                                                isVisible={isVerticalDropzoneVisible(\n                                                                    noConflict(\n                                                                        item =>\n                                                                            fieldTypes.includes(\n                                                                                item.type\n                                                                            ) &&\n                                                                            (row.length < 4 ||\n                                                                                get(\n                                                                                    item,\n                                                                                    \"pos.row\"\n                                                                                ) === index)\n                                                                    )\n                                                                )}\n                                                            />\n\n                                                            <div\n                                                                className={\n                                                                    \"cursor-grab bg-neutral-base drop-shadow-[0px_1px_2px_rgba(0,0,0,0.05)] rounded-lg pl-md pr-sm py-sm\"\n                                                                }\n                                                            >\n                                                                <Field\n                                                                    parent={parent}\n                                                                    field={field}\n                                                                    onEdit={editField}\n                                                                    onDelete={deleteField}\n                                                                />\n                                                            </div>\n\n                                                            {/* Field end */}\n                                                            {fieldIndex === row.length - 1 && (\n                                                                <Vertical\n                                                                    last\n                                                                    depth={depth}\n                                                                    isVisible={isVerticalDropzoneVisible(\n                                                                        noConflict(item => {\n                                                                            return (\n                                                                                fieldTypes.includes(\n                                                                                    item.type\n                                                                                ) &&\n                                                                                (row.length < 4 ||\n                                                                                    get(\n                                                                                        item,\n                                                                                        \"pos.row\"\n                                                                                    ) === index)\n                                                                            );\n                                                                        })\n                                                                    )}\n                                                                    onDrop={item =>\n                                                                        onFieldDrop(item, {\n                                                                            row: index,\n                                                                            index: fieldIndex + 1\n                                                                        })\n                                                                    }\n                                                                />\n                                                            )}\n                                                        </div>\n                                                    )}\n                                                </Draggable>\n                                            </ModelFieldProvider>\n                                        );\n                                    })}\n                                </div>\n                                {/* Row end */}\n                                {index === fields.length - 1 ? (\n                                    <Horizontal\n                                        data-testid={`cms-editor-row-droppable-bottom-${index}`}\n                                        last\n                                        isVisible={isHorizontalDropzoneVisible(noConflict())}\n                                        onDrop={item =>\n                                            onFieldDrop(item, {\n                                                row: index + 1,\n                                                index: null\n                                            })\n                                        }\n                                    />\n                                ) : null}\n                            </div>\n                        )}\n                    </Draggable>\n                );\n            })}\n\n            {field ? (\n                <ModelFieldProvider field={field}>\n                    <EditFieldDialog\n                        onClose={() => editField(null)}\n                        onSubmit={field => {\n                            if (field.id) {\n                                updateField(field);\n                                editField(null);\n                                return;\n                            }\n                            insertField({ field, position: dropTarget });\n\n                            editField(null);\n                        }}\n                    />\n                </ModelFieldProvider>\n            ) : null}\n        </Fragment>\n    );\n};\n\nexport interface FieldEditorProps {\n    parent?: CmsModelField;\n    layout: CmsEditorFieldsLayout;\n    fields: CmsModelField[];\n    onChange: (params: { fields: CmsModelField[]; layout: CmsEditorFieldsLayout }) => void;\n}\n\nexport const FieldEditor = (props: FieldEditorProps) => {\n    return (\n        <FieldEditorProvider {...props}>\n            <Editor />\n        </FieldEditorProvider>\n    );\n};\n"],"names":["t","i18n","fieldTypes","Editor","parent","depth","insertField","updateField","deleteField","fields","noConflict","editField","onFieldDrop","onEndDrag","field","dropTarget","getFieldType","getLayoutFieldType","getField","useModelFieldEditor","collectLayoutFieldFields","layoutField","lft","id","canDropIntoField","draggable","ft","isVerticalDropzoneVisible","cb","item","parentFieldType","allowLayout","isHorizontalDropzoneVisible","Fragment","Center","row","index","rowKey","cell","isLayoutField","Draggable","drag","isDragging","element","IconButton","DragIcon","Horizontal","fieldIndex","LayoutCell","ModelFieldProvider","Vertical","get","Field","EditFieldDialog","FieldEditor","props","FieldEditorProvider"],"mappings":"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"}

package/admin/components/FieldEditor/FieldEditorContext.d.ts

@@ -1,8 +1,10 @@
 import React from "react";
-import type { CmsEditorFieldId, CmsModelFieldRendererPlugin, CmsEditorFieldsLayout, CmsModelFieldTypePlugin, CmsModelLayoutFieldTypePlugin, CmsModelField, DragSource, FieldLayoutPosition } from "../../../types.js";
-import type { CmsLayoutField } from "@webiny/app-headless-cms-common/types/model.js";
+import type { CmsEditorFieldId, CmsEditorFieldsLayout, CmsModelField, CmsLayoutField, DragSource, FieldLayoutPosition } from "../../../types.js";
 import type { FieldEditorProps } from "./FieldEditor.js";
 import type { DragSourceMonitor } from "react-dnd";
+import { type ICmsFieldType } from "../../../presentation/fieldTypes/abstractions.js";
+import { type ICmsFieldRenderer } from "../../../presentation/fieldRenderers/abstractions.js";
+import { type ICmsLayoutFieldType } from "../../../presentation/fieldTypes/abstractions.js";
 interface DropTarget {
     row: number;
     index: number | null;
@@ -43,17 +45,14 @@ interface DeleteLayoutCellCallable {
 interface MoveLayoutCellCallable {
     (fieldId: string, position: FieldLayoutPosition): void;
 }
-interface GetLayoutFieldPluginCallable {
-    (type: string): CmsModelLayoutFieldTypePlugin | undefined;
-}
-interface GetFieldPluginCallable {
-    (type: string): CmsModelFieldTypePlugin | undefined;
+interface GetLayoutFieldTypeCallable {
+    (type: string): ICmsLayoutFieldType | undefined;
 }
 interface GetFieldCallable {
     (query: GetFieldParams): CmsModelField | undefined;
 }
 interface GetFieldRendererCallable {
-    (rendererName: string): CmsModelFieldRendererPlugin | undefined;
+    (rendererName: string): ICmsFieldRenderer | undefined;
 }
 interface OnFieldDropCallable {
     (source: Partial<DragSource>, target: DropTarget): void;
@@ -88,9 +87,9 @@ export interface FieldEditorContext {
     layout: CmsEditorFieldsLayout;
     onChange?: (data: any) => void;
     getFieldsInLayout: GetFieldsInLayoutCallable;
-    getFieldPlugin: GetFieldPluginCallable;
+    getFieldType: (typeOrField: string | CmsModelField) => ICmsFieldType | undefined;
     getField: GetFieldCallable;
-    getFieldRendererPlugin: GetFieldRendererCallable;
+    getFieldRenderer: GetFieldRendererCallable;
     editField: (field: CmsModelField | null) => void;
     field: CmsModelField | null;
     parent?: CmsModelField;
@@ -108,7 +107,7 @@ export interface FieldEditorContext {
     updateLayoutCell: UpdateLayoutCellCallable;
     deleteLayoutCell: DeleteLayoutCellCallable;
     moveLayoutCell: MoveLayoutCellCallable;
-    getLayoutFieldPlugin: GetLayoutFieldPluginCallable;
+    getLayoutFieldType: GetLayoutFieldTypeCallable;
     addField: AddFieldCallable;
     removeField: RemoveFieldCallable;
 }