@webiny/app-headless-cms 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/admin/components/FieldEditor/FieldEditor.js

@@ -1,195 +1,211 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FieldEditor = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _get = _interopRequireDefault(require("lodash/get"));
-
-var _Icon = require("@webiny/ui/Icon");
-
-var _i18n = require("@webiny/app/i18n");
-
-var _roundDrag_indicator24px = require("../../icons/round-drag_indicator-24px.svg");
-
-var _DropZone = require("../DropZone");
-
-var _Draggable = _interopRequireDefault(require("../Draggable"));
-
-var _EditFieldDialog = _interopRequireDefault(require("./EditFieldDialog"));
-
-var _Field = _interopRequireDefault(require("./Field"));
-
-var _Styled = require("./Styled");
-
-var _useFieldEditor2 = require("./useFieldEditor");
-
-var _FieldEditorContext = require("./FieldEditorContext");
-
-var _templateObject;
-
-var t = _i18n.i18n.namespace("app-headless-cms/admin/components/editor");
-
-var fieldTypes = ["field", "newField"];
-
-var Editor = function Editor() {
-  var _useFieldEditor = (0, _useFieldEditor2.useFieldEditor)(),
-      parent = _useFieldEditor.parent,
-      depth = _useFieldEditor.depth,
-      insertField = _useFieldEditor.insertField,
-      updateField = _useFieldEditor.updateField,
-      deleteField = _useFieldEditor.deleteField,
-      fields = _useFieldEditor.fields,
-      noConflict = _useFieldEditor.noConflict,
-      editField = _useFieldEditor.editField,
-      onFieldDrop = _useFieldEditor.onFieldDrop,
-      onEndDrag = _useFieldEditor.onEndDrag,
-      field = _useFieldEditor.field,
-      dropTarget = _useFieldEditor.dropTarget;
-
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, fields.length === 0 && /*#__PURE__*/_react.default.createElement(_DropZone.Center, {
-    onDrop: function onDrop(item) {
-      return onFieldDrop(item, {
-        row: 0,
-        index: 0
-      });
-    },
-    style: {
-      padding: "5px 0 15px 0"
-    }
-  }, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Drop your first field here"])))), fields.map(function (row, index) {
-    return /*#__PURE__*/_react.default.createElement(_Draggable.default, {
-      beginDrag: {
-        parent: parent ? parent.fieldId : null,
-        type: "row",
-        fields: row,
-        pos: {
-          row: index
-        }
-      },
-      endDrag: onEndDrag,
-      key: row.map(function (f) {
-        return f.fieldId;
-      }).join(".")
-    }, function (_ref
-    /* RowContainer start - includes drag handle, drop zones and the Row itself. */
-    ) {
-      var drag = _ref.drag,
-          isDragging = _ref.isDragging;
-      return /*#__PURE__*/_react.default.createElement(_Styled.RowContainer, {
-        style: {
-          opacity: isDragging ? 0.3 : 1
-        }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: _Styled.rowHandle,
-        ref: drag
-      }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
-        icon: /*#__PURE__*/_react.default.createElement(_roundDrag_indicator24px.ReactComponent, null)
-      })), /*#__PURE__*/_react.default.createElement(_DropZone.Horizontal, {
-        "data-testid": "cms-editor-row-droppable-top-".concat(index),
-        isVisible: noConflict(),
-        onDrop: function onDrop(item) {
-          return onFieldDrop(item, {
-            row: index,
-            index: null
-          });
-        }
-      }), /*#__PURE__*/_react.default.createElement(_Styled.Row, {
-        "data-testid": "cms.editor.field-row"
-      }, row.map(function (field, fieldIndex) {
-        return /*#__PURE__*/_react.default.createElement(_Draggable.default, {
-          key: field.fieldId,
-          beginDrag: {
-            parent: parent ? parent.fieldId : null,
-            type: "field",
-            field: field,
-            pos: {
-              row: index,
-              index: fieldIndex
+import react, { Fragment } from "react";
+import get from "lodash/get.js";
+import { i18n } from "@webiny/app/i18n/index.js";
+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";
+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 { ModelFieldProvider } from "../ModelFieldProvider/index.js";
+import { Icon, cn } 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();
+    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 ("function" == typeof canAccept && !canAccept(field, draggable)) return false;
+        return true;
+    };
+    const isVerticalDropzoneVisible = (cb)=>(item)=>{
+            if ("newLayoutField" === item.type || "layoutField" === item.type) return false;
+            if (!parent) return cb(item);
+            const fieldPlugin = getFieldPlugin(parent.type);
+            if (fieldPlugin) {
+                const allowLayout = fieldPlugin.field.allowLayout ?? true;
+                if (!allowLayout) return false;
             }
-          },
-          endDrag: onEndDrag
-        }, function (_ref2) {
-          var drag = _ref2.drag;
-          return /*#__PURE__*/_react.default.createElement("div", {
-            className: _Styled.fieldContainer,
-            ref: drag
-          }, /*#__PURE__*/_react.default.createElement(_DropZone.Vertical, {
-            depth: depth,
-            onDrop: function onDrop(item) {
-              return onFieldDrop(item, {
-                row: index,
-                index: fieldIndex
-              });
-            },
-            isVisible: noConflict(function (item) {
-              return fieldTypes.includes(item.type) && (row.length < 4 || (0, _get.default)(item, "pos.row") === index);
+            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
             })
-          }), /*#__PURE__*/_react.default.createElement("div", {
-            className: _Styled.fieldHandle
-          }, /*#__PURE__*/_react.default.createElement(_Field.default, {
-            parent: parent,
-            field: field,
-            onEdit: editField,
-            onDelete: deleteField
-          })), fieldIndex === row.length - 1 && /*#__PURE__*/_react.default.createElement(_DropZone.Vertical, {
-            last: true,
-            depth: depth,
-            isVisible: noConflict(function (item) {
-              return fieldTypes.includes(item.type) && (row.length < 4 || (0, _get.default)(item, "pos.row") === index);
-            }),
-            onDrop: function onDrop(item) {
-              return onFieldDrop(item, {
-                row: index,
-                index: fieldIndex + 1
-              });
+    }, 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: 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(ReactComponent, 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)=>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;
             }
-          }));
-        });
-      })), index === fields.length - 1 && /*#__PURE__*/_react.default.createElement(_DropZone.Horizontal, {
-        "data-testid": "cms-editor-row-droppable-bottom-".concat(index),
-        last: true,
-        isVisible: noConflict(),
-        onDrop: function onDrop(item) {
-          return onFieldDrop(item, {
-            row: index + 1,
-            index: null
-          });
+            insertField({
+                field,
+                position: dropTarget
+            });
+            editField(null);
         }
-      }));
-    });
-  }), /*#__PURE__*/_react.default.createElement(_EditFieldDialog.default, {
-    field: field,
-    onClose: function onClose() {
-      return editField(null);
-    },
-    onSubmit: function onSubmit(field) {
-      if (field.id) {
-        updateField(field);
-        editField(null);
-        return;
-      }
-
-      insertField({
-        field: field,
-        position: dropTarget
-      });
-      editField(null);
-    }
-  }));
-};
-
-var FieldEditor = function FieldEditor(props) {
-  return /*#__PURE__*/_react.default.createElement(_FieldEditorContext.FieldEditorProvider, props, /*#__PURE__*/_react.default.createElement(Editor, null));
+    })) : null);
 };
+const FieldEditor = (props)=>/*#__PURE__*/ react.createElement(FieldEditorProvider, props, /*#__PURE__*/ react.createElement(Editor, null));
+export { FieldEditor };
 
-exports.FieldEditor = FieldEditor;
+//# sourceMappingURL=FieldEditor.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","namespace","fieldTypes","Editor","useFieldEditor","parent","depth","insertField","updateField","deleteField","fields","noConflict","editField","onFieldDrop","onEndDrag","field","dropTarget","length","item","row","index","padding","map","fieldId","type","pos","f","join","drag","isDragging","opacity","rowHandle","fieldIndex","fieldContainer","includes","get","fieldHandle","id","position","FieldEditor","props"],"sources":["FieldEditor.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport get from \"lodash/get\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as HandleIcon } from \"~/admin/icons/round-drag_indicator-24px.svg\";\nimport { Center, Vertical, Horizontal } from \"../DropZone\";\nimport Draggable from \"../Draggable\";\nimport EditFieldDialog from \"./EditFieldDialog\";\nimport Field from \"./Field\";\nimport { rowHandle, fieldHandle, fieldContainer, Row, RowContainer } from \"./Styled\";\nimport { useFieldEditor } from \"./useFieldEditor\";\nimport { FieldEditorProvider } from \"./FieldEditorContext\";\nimport { CmsEditorField, CmsEditorFieldsLayout } from \"~/types\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nconst fieldTypes: string[] = [\"field\", \"newField\"];\n\nconst Editor: React.FC = () => {\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    } = useFieldEditor();\n\n    return (\n        <Fragment>\n            {fields.length === 0 && (\n                <Center\n                    onDrop={item =>\n                        onFieldDrop(item, {\n                            row: 0,\n                            index: 0\n                        })\n                    }\n                    style={{ padding: \"5px 0 15px 0\" }}\n                >\n                    {t`Drop your first field here`}\n                </Center>\n            )}\n\n            {fields.map((row, index) => (\n                <Draggable\n                    beginDrag={{\n                        parent: parent ? parent.fieldId : null,\n                        type: \"row\",\n                        fields: row,\n                        pos: { row: index }\n                    }}\n                    endDrag={onEndDrag}\n                    key={row.map(f => f.fieldId).join(\".\")}\n                >\n                    {(\n                        {\n                            drag,\n                            isDragging\n                        } /* RowContainer start - includes drag handle, drop zones and the Row itself. */\n                    ) => (\n                        <RowContainer style={{ opacity: isDragging ? 0.3 : 1 }}>\n                            <div className={rowHandle} ref={drag}>\n                                <Icon icon={<HandleIcon />} />\n                            </div>\n                            <Horizontal\n                                data-testid={`cms-editor-row-droppable-top-${index}`}\n                                isVisible={noConflict()}\n                                onDrop={item => onFieldDrop(item, { row: index, index: null })}\n                            />\n                            {/* Row start - includes field drop zones and fields */}\n                            <Row data-testid={\"cms.editor.field-row\"}>\n                                {row.map((field, fieldIndex) => (\n                                    <Draggable\n                                        key={field.fieldId}\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 className={fieldContainer} ref={drag}>\n                                                <Vertical\n                                                    depth={depth}\n                                                    onDrop={item =>\n                                                        onFieldDrop(item, {\n                                                            row: index,\n                                                            index: fieldIndex\n                                                        })\n                                                    }\n                                                    isVisible={noConflict(\n                                                        item =>\n                                                            fieldTypes.includes(item.type) &&\n                                                            (row.length < 4 ||\n                                                                get(item, \"pos.row\") === index)\n                                                    )}\n                                                />\n\n                                                <div className={fieldHandle}>\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={noConflict(\n                                                            item =>\n                                                                fieldTypes.includes(item.type) &&\n                                                                (row.length < 4 ||\n                                                                    get(item, \"pos.row\") === index)\n                                                        )}\n                                                        onDrop={item =>\n                                                            onFieldDrop(item, {\n                                                                row: index,\n                                                                index: fieldIndex + 1\n                                                            })\n                                                        }\n                                                    />\n                                                )}\n                                            </div>\n                                        )}\n                                    </Draggable>\n                                ))}\n                            </Row>\n                            {/* Row end */}\n                            {index === fields.length - 1 && (\n                                <Horizontal\n                                    data-testid={`cms-editor-row-droppable-bottom-${index}`}\n                                    last\n                                    isVisible={noConflict()}\n                                    onDrop={item =>\n                                        onFieldDrop(item, {\n                                            row: index + 1,\n                                            index: null\n                                        })\n                                    }\n                                />\n                            )}\n                        </RowContainer>\n                    )}\n                </Draggable>\n            ))}\n\n            <EditFieldDialog\n                field={field}\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        </Fragment>\n    );\n};\n\nexport interface FieldEditorProps {\n    parent?: CmsEditorField;\n    layout: CmsEditorFieldsLayout;\n    fields: CmsEditorField[];\n    onChange: (params: { fields: CmsEditorField[]; layout: CmsEditorFieldsLayout }) => void;\n}\n\nexport const FieldEditor: React.FC<FieldEditorProps> = props => {\n    return (\n        <FieldEditorProvider {...props}>\n            <Editor />\n        </FieldEditorProvider>\n    );\n};\n"],"mappings":"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"}
+{"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, 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"],"names":["t","i18n","fieldTypes","Editor","parent","depth","insertField","updateField","deleteField","fields","noConflict","editField","onFieldDrop","onEndDrag","field","dropTarget","getFieldPlugin","getLayoutFieldPlugin","getField","useModelFieldEditor","collectLayoutFieldFields","layoutField","plugin","id","canDropIntoField","draggable","fieldPlugin","canAccept","isVerticalDropzoneVisible","cb","item","allowLayout","isHorizontalDropzoneVisible","Fragment","Center","row","index","rowKey","cell","isLayoutField","Draggable","drag","isDragging","cn","element","Icon","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,23 +1,12 @@
 import React from "react";
-import { CmsEditorField, CmsEditorFieldId, CmsEditorFieldsLayout, CmsEditorFieldTypePlugin, FieldLayoutPosition } from "../../../types";
-import { FieldEditorProps } from "./FieldEditor";
-import { DragObjectWithType, DragSourceMonitor } from "react-dnd";
+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 { FieldEditorProps } from "./FieldEditor.js";
+import type { DragSourceMonitor } from "react-dnd";
 interface DropTarget {
     row: number;
     index: number | null;
 }
-interface Position {
-    row: number;
-    index: number;
-}
-export interface DragSource extends DragObjectWithType {
-    parent?: string;
-    pos?: Partial<Position>;
-    type: "row" | "field" | "newField";
-    fieldType?: string;
-    field?: CmsEditorField | null;
-    fields?: CmsEditorField[];
-}
 /**
  * Property in GetFieldParams can be any key from CmsEditorField, but TS does not allow union types
  */
@@ -26,21 +15,45 @@ interface GetFieldParams {
     fieldId?: string;
 }
 interface InsertFieldParams {
-    field: CmsEditorField;
+    field: CmsModelField;
     position: FieldLayoutPosition;
 }
+interface AddFieldCallable {
+    (field: CmsModelField): void;
+}
+interface RemoveFieldCallable {
+    (fieldId: string): void;
+}
 interface MoveFieldParams {
-    field: CmsEditorFieldId | CmsEditorField;
+    field: CmsEditorFieldId | CmsModelField;
     position: FieldLayoutPosition;
 }
 interface GetFieldsInLayoutCallable {
-    (): CmsEditorField[][];
+    (): (CmsModelField | CmsLayoutField)[][];
+}
+interface InsertLayoutCellCallable {
+    (field: Omit<CmsLayoutField, "id"> | CmsLayoutField, position: FieldLayoutPosition): void;
+}
+interface UpdateLayoutCellCallable {
+    (fieldId: string, field: CmsLayoutField): void;
+}
+interface DeleteLayoutCellCallable {
+    (fieldId: string): void;
+}
+interface MoveLayoutCellCallable {
+    (fieldId: string, position: FieldLayoutPosition): void;
+}
+interface GetLayoutFieldPluginCallable {
+    (type: string): CmsModelLayoutFieldTypePlugin | undefined;
 }
 interface GetFieldPluginCallable {
-    (type: string): CmsEditorFieldTypePlugin | undefined;
+    (type: string): CmsModelFieldTypePlugin | undefined;
 }
 interface GetFieldCallable {
-    (query: GetFieldParams): CmsEditorField | undefined;
+    (query: GetFieldParams): CmsModelField | undefined;
+}
+interface GetFieldRendererCallable {
+    (rendererName: string): CmsModelFieldRendererPlugin | undefined;
 }
 interface OnFieldDropCallable {
     (source: Partial<DragSource>, target: DropTarget): void;
@@ -51,35 +64,37 @@ interface InsertFieldCallable {
 interface MoveFieldCallable {
     (params: MoveFieldParams): void;
 }
-interface OnEndDragCallable {
-    (item: DragSource, monitor: DragSourceMonitor): void;
+interface OnEndDragCallable<DragObject = unknown, DropResult = unknown> {
+    (item: DragSource, monitor: DragSourceMonitor<DragObject, DropResult>): void;
 }
 interface MoveRowCallable {
     (source: number, destination: number): void;
 }
 interface UpdateFieldCallable {
-    (field: Pick<CmsEditorField, "id">): void;
+    (field: CmsModelField): void;
 }
 interface DeleteFieldCallable {
-    (field: Pick<CmsEditorField, "id">): void;
+    (field: Pick<CmsModelField, "id">): void;
 }
-interface IsVisibleCallable {
+export interface IsVisibleCallable {
     (item: DragSource): boolean;
 }
 interface NoConflictCallable {
     (cb?: IsVisibleCallable): (item: DragSource) => boolean;
 }
-export interface FieldEditorContextValue {
-    fields: CmsEditorField[][];
+export interface FieldEditorContext {
+    fields: (CmsModelField | CmsLayoutField)[][];
     noConflict: NoConflictCallable;
     layout: CmsEditorFieldsLayout;
     onChange?: (data: any) => void;
     getFieldsInLayout: GetFieldsInLayoutCallable;
     getFieldPlugin: GetFieldPluginCallable;
     getField: GetFieldCallable;
-    editField: (field: CmsEditorField | null) => void;
-    field: CmsEditorField | null;
-    parent?: CmsEditorField;
+    getFieldRendererPlugin: GetFieldRendererCallable;
+    editField: (field: CmsModelField | null) => void;
+    field: CmsModelField | null;
+    parent?: CmsModelField;
+    parentEditorContext?: FieldEditorContext;
     depth: number;
     dropTarget: DropTarget;
     onFieldDrop: OnFieldDropCallable;
@@ -89,10 +104,17 @@ export interface FieldEditorContextValue {
     moveRow: MoveRowCallable;
     updateField: UpdateFieldCallable;
     deleteField: DeleteFieldCallable;
+    insertLayoutCell: InsertLayoutCellCallable;
+    updateLayoutCell: UpdateLayoutCellCallable;
+    deleteLayoutCell: DeleteLayoutCellCallable;
+    moveLayoutCell: MoveLayoutCellCallable;
+    getLayoutFieldPlugin: GetLayoutFieldPluginCallable;
+    addField: AddFieldCallable;
+    removeField: RemoveFieldCallable;
 }
 interface FieldEditorProviderProps extends FieldEditorProps {
     children: React.ReactElement;
 }
-export declare const FieldEditorContext: React.Context<FieldEditorContextValue>;
-export declare const FieldEditorProvider: React.FC<FieldEditorProviderProps>;
+export declare const FieldEditorContext: React.Context<FieldEditorContext | undefined>;
+export declare const FieldEditorProvider: ({ parent, fields, layout, onChange, children }: FieldEditorProviderProps) => React.JSX.Element;
 export {};