@webiny/app-headless-cms 5.34.8 → 5.35.0-beta.0

package/admin/components/FieldEditor/FieldEditor.js

@@ -1,112 +1,79 @@
 "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 _useModelFieldEditor2 = require("./useModelFieldEditor");
-
 var _FieldEditorContext = require("./FieldEditorContext");
-
 var _ModelFieldProvider = require("../ModelFieldProvider");
-
 var _templateObject;
-
 var t = _i18n.i18n.namespace("app-headless-cms/admin/components/editor");
-
 var fieldTypes = ["field", "newField"];
-
 var Editor = function Editor() {
   var _useModelFieldEditor = (0, _useModelFieldEditor2.useModelFieldEditor)(),
-      parent = _useModelFieldEditor.parent,
-      depth = _useModelFieldEditor.depth,
-      insertField = _useModelFieldEditor.insertField,
-      updateField = _useModelFieldEditor.updateField,
-      deleteField = _useModelFieldEditor.deleteField,
-      fields = _useModelFieldEditor.fields,
-      noConflict = _useModelFieldEditor.noConflict,
-      editField = _useModelFieldEditor.editField,
-      onFieldDrop = _useModelFieldEditor.onFieldDrop,
-      onEndDrag = _useModelFieldEditor.onEndDrag,
-      field = _useModelFieldEditor.field,
-      dropTarget = _useModelFieldEditor.dropTarget,
-      getFieldPlugin = _useModelFieldEditor.getFieldPlugin;
-
+    parent = _useModelFieldEditor.parent,
+    depth = _useModelFieldEditor.depth,
+    insertField = _useModelFieldEditor.insertField,
+    updateField = _useModelFieldEditor.updateField,
+    deleteField = _useModelFieldEditor.deleteField,
+    fields = _useModelFieldEditor.fields,
+    noConflict = _useModelFieldEditor.noConflict,
+    editField = _useModelFieldEditor.editField,
+    onFieldDrop = _useModelFieldEditor.onFieldDrop,
+    onEndDrag = _useModelFieldEditor.onEndDrag,
+    field = _useModelFieldEditor.field,
+    dropTarget = _useModelFieldEditor.dropTarget,
+    getFieldPlugin = _useModelFieldEditor.getFieldPlugin;
   var canDropIntoField = function canDropIntoField(field, draggable) {
     var fieldPlugin = getFieldPlugin(field.type);
     var canAccept = fieldPlugin.field.canAccept;
-
     if (typeof canAccept === "function" && !canAccept(field, draggable)) {
       return false;
     }
-
     return true;
   };
-
   var isVerticalDropzoneVisible = function isVerticalDropzoneVisible(cb) {
     return function (item) {
       var _fieldPlugin$field$al;
-
       if (!parent) {
         return cb(item);
       }
-
       var fieldPlugin = getFieldPlugin(parent.type);
       var allowLayout = (_fieldPlugin$field$al = fieldPlugin.field.allowLayout) !== null && _fieldPlugin$field$al !== void 0 ? _fieldPlugin$field$al : true;
-
       if (!allowLayout) {
         return false;
       }
-
       if (!canDropIntoField(parent, item)) {
         return false;
       }
-
       return cb(item);
     };
   };
-
   var isHorizontalDropzoneVisible = function isHorizontalDropzoneVisible(cb) {
     return function (item) {
       if (!parent) {
         return cb(item);
       }
-
       if (!canDropIntoField(parent, item)) {
         return false;
       }
-
       return cb(item);
     };
   };
-
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, fields.length === 0 && /*#__PURE__*/_react.default.createElement(_DropZone.Center, {
     isDroppable: isHorizontalDropzoneVisible(function () {
       return true;
@@ -131,11 +98,9 @@ var Editor = function Editor() {
       key: row.map(function (f) {
         return f.fieldId;
       }).join(".")
-    }, function (_ref
-    /* RowContainer start - includes drag handle, drop zones and the Row itself. */
-    ) {
+    }, function (_ref /* RowContainer start - includes drag handle, drop zones and the Row itself. */) {
       var drag = _ref.drag,
-          isDragging = _ref.isDragging;
+        isDragging = _ref.isDragging;
       return /*#__PURE__*/_react.default.createElement(_Styled.RowContainer, {
         style: {
           opacity: isDragging ? 0.3 : 1
@@ -232,7 +197,6 @@ var Editor = function Editor() {
         editField(null);
         return;
       }
-
       insertField({
         field: field,
         position: dropTarget
@@ -241,9 +205,7 @@ var Editor = function Editor() {
     }
   })) : null);
 };
-
 var FieldEditor = function FieldEditor(props) {
   return /*#__PURE__*/_react.default.createElement(_FieldEditorContext.FieldEditorProvider, props, /*#__PURE__*/_react.default.createElement(Editor, null));
 };
-
 exports.FieldEditor = FieldEditor;

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

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","namespace","fieldTypes","Editor","useModelFieldEditor","parent","depth","insertField","updateField","deleteField","fields","noConflict","editField","onFieldDrop","onEndDrag","field","dropTarget","getFieldPlugin","canDropIntoField","draggable","fieldPlugin","type","canAccept","isVerticalDropzoneVisible","cb","item","allowLayout","isHorizontalDropzoneVisible","length","row","index","map","fieldId","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 { useModelFieldEditor } from \"./useModelFieldEditor\";\nimport { DragSource, FieldEditorProvider, IsVisibleCallable } from \"./FieldEditorContext\";\nimport { CmsModelField, CmsEditorFieldsLayout, CmsModelFieldTypePlugin } from \"~/types\";\nimport { ModelFieldProvider } from \"~/admin/components/ModelFieldProvider\";\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        getFieldPlugin\n    } = useModelFieldEditor();\n\n    const canDropIntoField = (field: CmsModelField, draggable: DragSource) => {\n        const fieldPlugin = getFieldPlugin(field.type) as CmsModelFieldTypePlugin;\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            if (!parent) {\n                return cb(item);\n            }\n\n            const fieldPlugin = getFieldPlugin(parent.type) as CmsModelFieldTypePlugin;\n            const allowLayout = fieldPlugin.field.allowLayout ?? true;\n            if (!allowLayout) {\n                return false;\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                <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                                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                            <Row data-testid={\"cms.editor.field-row\"}>\n                                {row.map((field, fieldIndex) => (\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 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={isVerticalDropzoneVisible(\n                                                            noConflict(\n                                                                item =>\n                                                                    fieldTypes.includes(\n                                                                        item.type\n                                                                    ) &&\n                                                                    (row.length < 4 ||\n                                                                        get(item, \"pos.row\") ===\n                                                                            index)\n                                                            )\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={isVerticalDropzoneVisible(\n                                                                noConflict(item => {\n                                                                    return (\n                                                                        fieldTypes.includes(\n                                                                            item.type\n                                                                        ) &&\n                                                                        (row.length < 4 ||\n                                                                            get(item, \"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                            </Row>\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                        </RowContainer>\n                    )}\n                </Draggable>\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: React.FC<FieldEditorProps> = props => {\n    return (\n        <FieldEditorProvider {...props}>\n            <Editor />\n        </FieldEditorProvider>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["t","i18n","namespace","fieldTypes","Editor","useModelFieldEditor","parent","depth","insertField","updateField","deleteField","fields","noConflict","editField","onFieldDrop","onEndDrag","field","dropTarget","getFieldPlugin","canDropIntoField","draggable","fieldPlugin","type","canAccept","isVerticalDropzoneVisible","cb","item","allowLayout","isHorizontalDropzoneVisible","length","row","index","map","fieldId","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 { useModelFieldEditor } from \"./useModelFieldEditor\";\nimport { DragSource, FieldEditorProvider, IsVisibleCallable } from \"./FieldEditorContext\";\nimport { CmsModelField, CmsEditorFieldsLayout, CmsModelFieldTypePlugin } from \"~/types\";\nimport { ModelFieldProvider } from \"~/admin/components/ModelFieldProvider\";\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        getFieldPlugin\n    } = useModelFieldEditor();\n\n    const canDropIntoField = (field: CmsModelField, draggable: DragSource) => {\n        const fieldPlugin = getFieldPlugin(field.type) as CmsModelFieldTypePlugin;\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            if (!parent) {\n                return cb(item);\n            }\n\n            const fieldPlugin = getFieldPlugin(parent.type) as CmsModelFieldTypePlugin;\n            const allowLayout = fieldPlugin.field.allowLayout ?? true;\n            if (!allowLayout) {\n                return false;\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                <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                                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                            <Row data-testid={\"cms.editor.field-row\"}>\n                                {row.map((field, fieldIndex) => (\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 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={isVerticalDropzoneVisible(\n                                                            noConflict(\n                                                                item =>\n                                                                    fieldTypes.includes(\n                                                                        item.type\n                                                                    ) &&\n                                                                    (row.length < 4 ||\n                                                                        get(item, \"pos.row\") ===\n                                                                            index)\n                                                            )\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={isVerticalDropzoneVisible(\n                                                                noConflict(item => {\n                                                                    return (\n                                                                        fieldTypes.includes(\n                                                                            item.type\n                                                                        ) &&\n                                                                        (row.length < 4 ||\n                                                                            get(item, \"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                            </Row>\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                        </RowContainer>\n                    )}\n                </Draggable>\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: React.FC<FieldEditorProps> = props => {\n    return (\n        <FieldEditorProvider {...props}>\n            <Editor />\n        </FieldEditorProvider>\n    );\n};\n"],"mappings":"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"}

package/admin/components/FieldEditor/FieldEditorContext.js

@@ -1,32 +1,20 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldEditorProvider = exports.FieldEditorContext = void 0;
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _dotPropImmutable = _interopRequireDefault(require("dot-prop-immutable"));
-
 var _useDeepCompareEffect = _interopRequireDefault(require("use-deep-compare-effect"));
-
 var _plugins = require("@webiny/plugins");
-
 var utils = _interopRequireWildcard(require("./utils"));
-
 var _useModelFieldEditor = require("./useModelFieldEditor");
-
 var _utils2 = require("@webiny/utils");
-
 var FieldEditorContext = /*#__PURE__*/_react.default.createContext(undefined);
 /**
  * We try to generate the random id string but with the check that it does not exist already.
@@ -34,55 +22,46 @@ var FieldEditorContext = /*#__PURE__*/_react.default.createContext(undefined);
  *
  * In most cases, there will be no iterations anyway...
  */
-
-
 exports.FieldEditorContext = FieldEditorContext;
 var maxGenerateIdIterations = 100;
-
 var generateFieldId = function generateFieldId(layout) {
   var id = (0, _utils2.generateAlphaNumericLowerCaseId)(8);
   var iteration = 0;
-
   while (layout.includes(id) && iteration < maxGenerateIdIterations) {
     id = (0, _utils2.generateAlphaNumericLowerCaseId)(8);
     iteration++;
   }
-
   if (iteration >= maxGenerateIdIterations) {
     throw new Error("Could not generate field ID in ".concat(maxGenerateIdIterations, " iterations."));
   }
-
   return id;
 };
-
 var FieldEditorProvider = function FieldEditorProvider(_ref) {
   var parent = _ref.parent,
-      fields = _ref.fields,
-      layout = _ref.layout,
-      onChange = _ref.onChange,
-      children = _ref.children;
+    fields = _ref.fields,
+    layout = _ref.layout,
+    onChange = _ref.onChange,
+    children = _ref.children;
   // We need to determine depth of this provider so we can render drop zones with correct z-indexes.
   var depth = 0;
-
   try {
     var editor = (0, _useModelFieldEditor.useModelFieldEditor)();
     depth = editor.depth + 1;
-  } catch (_unused) {// There's no parent provider, so this is the top-level one.
+  } catch (_unused) {
+    // There's no parent provider, so this is the top-level one.
   }
-
   var _useState = (0, _react.useState)({
-    layout: layout,
-    fields: fields,
-    field: null,
-    dropTarget: {
-      row: -1,
-      index: null
-    }
-  }),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
-
+      layout: layout,
+      fields: fields,
+      field: null,
+      dropTarget: {
+        row: -1,
+        index: null
+      }
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
   (0, _useDeepCompareEffect.default)(function () {
     onChange({
       fields: state.fields,
@@ -101,13 +80,12 @@ var FieldEditorProvider = function FieldEditorProvider(_ref) {
   };
   var onFieldDrop = (0, _react.useCallback)(function (source, dropTarget) {
     var pos = source.pos,
-        type = source.type,
-        fieldType = source.fieldType,
-        field = source.field,
-        _source$fields = source.fields,
-        fields = _source$fields === void 0 ? [] : _source$fields;
+      type = source.type,
+      fieldType = source.fieldType,
+      field = source.field,
+      _source$fields = source.fields,
+      fields = _source$fields === void 0 ? [] : _source$fields;
     var parentId = parent ? parent.fieldId : null;
-
     if (type === "row") {
       if (parentId !== source.parent) {
         // We're dragging an existing row from another fieldset
@@ -124,16 +102,14 @@ var FieldEditorProvider = function FieldEditorProvider(_ref) {
         // We're dragging a row within the same fieldset
         moveRow(pos.row, dropTarget.row);
       }
-
       return onDropTarget;
-    } // If source pos is set, we are moving an existing field.
-
+    }
 
+    // If source pos is set, we are moving an existing field.
     if (pos) {
       if (!field) {
         return onDropTarget;
       }
-
       if (parentId !== source.parent) {
         // We're dragging an existing field from another fieldset
         insertField({
@@ -147,22 +123,16 @@ var FieldEditorProvider = function FieldEditorProvider(_ref) {
           position: dropTarget
         });
       }
-
       return onDropTarget;
     }
-
     if (!fieldType) {
       return null;
     }
-
     var plugin = getFieldPlugin(fieldType);
-
     if (!plugin) {
       return null;
     }
-
     var fieldData = plugin.field.createField();
-
     if (plugin.field.canEditSettings !== false) {
       editField(fieldData);
       setState(function (state) {
@@ -176,35 +146,28 @@ var FieldEditorProvider = function FieldEditorProvider(_ref) {
         position: dropTarget
       });
     }
-
     return null;
   }, []);
-
   var onEndDrag = function onEndDrag(_ref2, monitor) {
     var type = _ref2.type,
-        field = _ref2.field,
-        fields = _ref2.fields;
-
+      field = _ref2.field,
+      fields = _ref2.fields;
     if (!monitor.didDrop()) {
       return;
-    } // Check if we dropped outside of the source fieldset, and if yes, remove the field from the original parent.
-
+    }
 
+    // Check if we dropped outside of the source fieldset, and if yes, remove the field from the original parent.
     var _monitor$getDropResul = monitor.getDropResult(),
-        dropTarget = _monitor$getDropResul.dropTarget;
-
+      dropTarget = _monitor$getDropResul.dropTarget;
     var parentId = parent ? parent.fieldId : null;
-
     if (dropTarget === parentId) {
       return;
     }
-
     var removeFields = type === "row" ? fields || [] : field ? [field] : [];
     removeFields.forEach(function (field) {
       return deleteField(field);
     });
   };
-
   var getFieldsInLayout = function getFieldsInLayout() {
     // Replace every field ID with actual field object.
     return state.layout.filter(function (arr) {
@@ -219,72 +182,62 @@ var FieldEditorProvider = function FieldEditorProvider(_ref) {
       return row.length > 0;
     });
   };
+
   /**
    * Return field plugin.
    */
-
-
   var getFieldPlugin = function getFieldPlugin(type) {
     return _plugins.plugins.byType("cms-editor-field-type").find(function (plugin) {
       return plugin.field.type === type;
     });
   };
-
   var getFieldRendererPlugin = function getFieldRendererPlugin(name) {
     return _plugins.plugins.byType("cms-editor-field-renderer").find(function (plugin) {
       return plugin.renderer.rendererName === name;
     });
   };
+
   /**
    * Checks if field of given type already exists in the list of fields.
    */
-
-
   var getField = function getField(query) {
     return state.fields.find(function (field) {
       for (var key in query) {
         if (!(key in field)) {
           return false;
-        } // TODO @ts-refactor figure if there is a way to fix this.
+        }
+        // TODO @ts-refactor figure if there is a way to fix this.
         // @ts-ignore
-
-
         if (field[key] !== query[key]) {
           return false;
         }
       }
-
       return true;
     });
   };
+
   /**
    * Inserts a new field into the target position.
    */
-
-
   var insertField = function insertField(_ref3) {
     var field = _ref3.field,
-        position = _ref3.position;
-
+      position = _ref3.position;
     if (!field.id) {
       field.id = generateFieldId(layout.flat());
     }
-
     if (!field.type) {
       throw new Error("Field \"type\" missing.");
     }
-
     var fieldPlugin = getFieldPlugin(field.type);
-
     if (!fieldPlugin) {
       throw new Error("No plugin found for field type \"".concat(field.type, "\"."));
     }
-
     setState(function (prev) {
       var next = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
         fields: (prev.fields || []).concat(field)
-      }); // Move field to position where it was dropped.
+      });
 
+      // Move field to position where it was dropped.
       return utils.moveField({
         field: field,
         position: position,
@@ -292,14 +245,13 @@ var FieldEditorProvider = function FieldEditorProvider(_ref) {
       });
     });
   };
+
   /**
    * Moves field to the given target position.
    */
-
-
   var moveField = function moveField(_ref4) {
     var field = _ref4.field,
-        position = _ref4.position;
+      position = _ref4.position;
     setState(function (data) {
       return utils.moveField({
         field: field,
@@ -308,11 +260,10 @@ var FieldEditorProvider = function FieldEditorProvider(_ref) {
       });
     });
   };
+
   /**
    * Moves row to a destination row.
    */
-
-
   var moveRow = function moveRow(source, destination) {
     setState(function (data) {
       return utils.moveRow({
@@ -322,11 +273,10 @@ var FieldEditorProvider = function FieldEditorProvider(_ref) {
       });
     });
   };
+
   /**
    * Updates field.
    */
-
-
   var updateField = function updateField(field) {
     setState(function (data) {
       for (var i = 0; i < data.fields.length; i++) {
@@ -334,15 +284,13 @@ var FieldEditorProvider = function FieldEditorProvider(_ref) {
           return _dotPropImmutable.default.set(data, "fields.".concat(i), field);
         }
       }
-
       return data;
     });
   };
+
   /**
    * Deletes a field (both from the list of field and the layout).
    */
-
-
   var deleteField = function deleteField(field) {
     setState(function (data) {
       return utils.deleteField({
@@ -351,37 +299,30 @@ var FieldEditorProvider = function FieldEditorProvider(_ref) {
       });
     });
   };
-
   var noConflict = (0, _react.useCallback)(function (isVisible) {
     return function (item) {
       var sameParent = item.parent === onDropTarget.dropTarget;
       var draggedFields = [];
-
       switch (item.type) {
         case "row":
           (item.fields || []).forEach(function (field) {
             return draggedFields.push(field.fieldId);
           });
           break;
-
         case "field":
           if (!item.field) {
             break;
           }
-
           draggedFields.push(item.field.fieldId);
           break;
-
         default:
           break;
       }
-
       if (draggedFields.length && !sameParent && fields.some(function (field) {
         return draggedFields.includes(field.fieldId);
       })) {
         return false;
       }
-
       return typeof isVisible === "function" ? isVisible(item) : true;
     };
   }, [fields.map(function (f) {
@@ -412,5 +353,4 @@ var FieldEditorProvider = function FieldEditorProvider(_ref) {
     value: value
   }, children);
 };
-
 exports.FieldEditorProvider = FieldEditorProvider;