npm - @webiny/app-headless-cms - Versions diffs - 6.3.0 → 6.4.0-beta.1 - Mend

@webiny/app-headless-cms 6.3.0 → 6.4.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1325) hide show

package/admin/components/FieldEditor/FieldEditor.js CHANGED Viewed

@@ -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";
@@ -11,235 +11,201 @@ 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 { cn, Icon } from "@webiny/admin-ui";
+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();
-  /**
-   * 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, 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 isHorizontalDropzoneVisible = cb => {
-    return item => {
-      if (!parent) {
-        return cb(item);
-      }
-      if (!canDropIntoField(parent, item)) {
-        return false;
-      }
-      return cb(item);
+    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;
     };
-  };
-  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 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 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: 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;
+            }
+            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 CHANGED Viewed

	@@ -1 +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":[]}
1	+ {"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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"}