@webiny/app-headless-cms 0.0.0-mt-3 → 0.0.0-unstable.2af142b57e

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

@@ -0,0 +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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"}

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

@@ -1,10 +1,10 @@
 import React from "react";
-import { CmsEditorField, CmsEditorFieldId, CmsEditorFieldsLayout, CmsEditorFieldTypePlugin, FieldLayoutPosition } from "../../../types";
+import { CmsModelField, CmsEditorFieldId, CmsEditorFieldRendererPlugin, CmsEditorFieldsLayout, CmsEditorFieldTypePlugin, FieldLayoutPosition } from "../../../types";
 import { FieldEditorProps } from "./FieldEditor";
 import { DragObjectWithType, DragSourceMonitor } from "react-dnd";
 interface DropTarget {
     row: number;
-    index: number;
+    index: number | null;
 }
 interface Position {
     row: number;
@@ -12,42 +12,91 @@ interface Position {
 }
 export interface DragSource extends DragObjectWithType {
     parent?: string;
-    pos: Partial<Position>;
+    pos?: Partial<Position>;
     type: "row" | "field" | "newField";
     fieldType?: string;
-    field?: CmsEditorField;
-    fields?: CmsEditorField[];
+    field?: CmsModelField | null;
+    fields?: CmsModelField[];
+}
+/**
+ * Property in GetFieldParams can be any key from CmsEditorField, but TS does not allow union types
+ */
+interface GetFieldParams {
+    id?: string;
+    fieldId?: string;
+}
+interface InsertFieldParams {
+    field: CmsModelField;
+    position: FieldLayoutPosition;
+}
+interface MoveFieldParams {
+    field: CmsEditorFieldId | CmsModelField;
+    position: FieldLayoutPosition;
+}
+interface GetFieldsInLayoutCallable {
+    (): CmsModelField[][];
+}
+interface GetFieldPluginCallable {
+    (type: string): CmsEditorFieldTypePlugin | undefined;
+}
+interface GetFieldCallable {
+    (query: GetFieldParams): CmsModelField | undefined;
+}
+interface GetFieldRendererCallable {
+    (rendererName: string): CmsEditorFieldRendererPlugin | undefined;
+}
+interface OnFieldDropCallable {
+    (source: Partial<DragSource>, target: DropTarget): void;
+}
+interface InsertFieldCallable {
+    (params: InsertFieldParams): void;
+}
+interface MoveFieldCallable {
+    (params: MoveFieldParams): void;
+}
+interface OnEndDragCallable {
+    (item: DragSource, monitor: DragSourceMonitor): void;
+}
+interface MoveRowCallable {
+    (source: number, destination: number): void;
+}
+interface UpdateFieldCallable {
+    (field: CmsModelField): void;
+}
+interface DeleteFieldCallable {
+    (field: Pick<CmsModelField, "id">): void;
+}
+export interface IsVisibleCallable {
+    (item: DragSource): boolean;
+}
+interface NoConflictCallable {
+    (cb?: IsVisibleCallable): (item: DragSource) => boolean;
 }
-export interface FieldEditorContextValue {
-    fields: CmsEditorField[][];
-    noConflict: Function;
+export interface FieldEditorContext {
+    fields: CmsModelField[][];
+    noConflict: NoConflictCallable;
     layout: CmsEditorFieldsLayout;
     onChange?: (data: any) => void;
-    getFieldsInLayout: () => CmsEditorField[][];
-    getFieldPlugin: (type: string) => CmsEditorFieldTypePlugin;
-    getField: (query: Record<string, string>) => CmsEditorField;
-    editField: (field: CmsEditorField) => void;
-    field: CmsEditorField;
-    parent: CmsEditorField;
+    getFieldsInLayout: GetFieldsInLayoutCallable;
+    getFieldPlugin: GetFieldPluginCallable;
+    getField: GetFieldCallable;
+    getFieldRendererPlugin: GetFieldRendererCallable;
+    editField: (field: CmsModelField | null) => void;
+    field: CmsModelField | null;
+    parent?: CmsModelField;
     depth: number;
-    dropTarget?: DropTarget;
-    onFieldDrop: (source: Partial<DragSource>, target: DropTarget) => void;
-    onEndDrag: (item: DragSource, monitor: DragSourceMonitor) => void;
-    insertField: (params: {
-        field: CmsEditorField;
-        position: FieldLayoutPosition;
-    }) => void;
-    moveField: (params: {
-        field: CmsEditorFieldId | CmsEditorField;
-        position: FieldLayoutPosition;
-    }) => void;
-    moveRow: (source: number, destination: number) => void;
-    updateField: (field: CmsEditorField) => void;
-    deleteField: (field: CmsEditorField) => void;
+    dropTarget: DropTarget;
+    onFieldDrop: OnFieldDropCallable;
+    onEndDrag: OnEndDragCallable;
+    insertField: InsertFieldCallable;
+    moveField: MoveFieldCallable;
+    moveRow: MoveRowCallable;
+    updateField: UpdateFieldCallable;
+    deleteField: DeleteFieldCallable;
 }
 interface FieldEditorProviderProps extends FieldEditorProps {
     children: React.ReactElement;
 }
-export declare const FieldEditorContext: React.Context<FieldEditorContextValue>;
-export declare const FieldEditorProvider: ({ parent, fields, layout, onChange, children }: FieldEditorProviderProps) => JSX.Element;
+export declare const FieldEditorContext: React.Context<FieldEditorContext | undefined>;
+export declare const FieldEditorProvider: React.FC<FieldEditorProviderProps>;
 export {};

package/admin/components/FieldEditor/FieldEditorContext.js

@@ -1,48 +1,76 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useState } from "react";
-import dot from "dot-prop-immutable";
-import shortid from "shortid";
-import cloneDeep from "lodash/cloneDeep";
-import useDeepCompareEffect from "use-deep-compare-effect";
-import { plugins } from "@webiny/plugins";
-import * as utils from "./utils";
-import { useFieldEditor } from "./useFieldEditor";
-export var FieldEditorContext = /*#__PURE__*/React.createContext(null);
-export var FieldEditorProvider = function FieldEditorProvider(_ref) {
+"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.
+ * Chances that the same string exists are quite small, but let's check it anyway.
+ *
+ * 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 = useFieldEditor();
+    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 = useState({
-    layout: layout,
-    fields: fields,
-    field: null,
-    dropTarget: null
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
-
-  useDeepCompareEffect(function () {
+  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];
+  (0, _useDeepCompareEffect.default)(function () {
     onChange({
       fields: state.fields,
       layout: state.layout
     });
   }, [state.fields, state.layout]);
-  var editField = useCallback(function (field) {
+  var editField = (0, _react.useCallback)(function (field) {
     setState(function (state) {
-      return _objectSpread(_objectSpread({}, state), {}, {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
         field: field
       });
     });
@@ -50,14 +78,14 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
   var onDropTarget = {
     dropTarget: parent ? parent.fieldId : null
   };
-  var onFieldDrop = useCallback(function (source, dropTarget) {
+  var onFieldDrop = (0, _react.useCallback)(function (source, dropTarget) {
     var pos = source.pos,
-        type = source.type,
-        fieldType = source.fieldType,
-        field = source.field,
-        fields = 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
@@ -70,16 +98,18 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
             }
           });
         });
-      } else {
+      } else if (pos && pos.row !== undefined) {
         // 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({
@@ -93,136 +123,135 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
           position: dropTarget
         });
       }
-
       return onDropTarget;
     }
-
+    if (!fieldType) {
+      return null;
+    }
     var plugin = getFieldPlugin(fieldType);
-    editField(plugin.field.createField());
-    setState(function (state) {
-      return _objectSpread(_objectSpread({}, state), {}, {
-        dropTarget: dropTarget
+    if (!plugin) {
+      return null;
+    }
+    var fieldData = plugin.field.createField();
+    if (plugin.field.canEditSettings !== false) {
+      editField(fieldData);
+      setState(function (state) {
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+          dropTarget: dropTarget
+        });
       });
-    });
+    } else {
+      insertField({
+        field: fieldData,
+        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];
+    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.
-    var fields = cloneDeep(state.layout.filter(function (arr) {
+    return state.layout.filter(function (arr) {
       return arr.length;
-    }));
-    fields.forEach(function (row, rowIndex) {
-      row.forEach(function (fieldId, fieldIndex) {
-        fields[rowIndex][fieldIndex] = getField({
-          id: fieldId
+    }).map(function (row) {
+      return row.map(function (id) {
+        return getField({
+          id: id
         });
-      });
+      }).filter(Boolean);
+    }).filter(function (row) {
+      return row.length > 0;
     });
-    return fields;
   };
+
   /**
    * Return field plugin.
    */
-
-
   var getFieldPlugin = function getFieldPlugin(type) {
-    return plugins.byType("cms-editor-field-type").find(function (_ref3) {
-      var field = _ref3.field;
-      return field.type === 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 null;
+          return false;
         }
-
+        // TODO @ts-refactor figure if there is a way to fix this.
+        // @ts-ignore
         if (field[key] !== query[key]) {
-          return null;
+          return false;
         }
       }
-
       return true;
     });
   };
+
   /**
    * Inserts a new field into the target position.
    */
-
-
-  var insertField = function insertField(_ref4) {
-    var field = _ref4.field,
-        position = _ref4.position;
-
+  var insertField = function insertField(_ref3) {
+    var field = _ref3.field,
+      position = _ref3.position;
     if (!field.id) {
-      field.id = shortid.generate();
+      field.id = generateFieldId(layout.flat());
     }
-
     if (!field.type) {
       throw new Error("Field \"type\" missing.");
     }
-
     var fieldPlugin = getFieldPlugin(field.type);
-
     if (!fieldPlugin) {
-      throw new Error("Invalid field \"type\".");
+      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)
+      });
 
-    setState(function (data) {
-      data = dot.set(data, "fields", function (fields) {
-        if (Array.isArray(fields)) {
-          return fields.concat(field);
-        }
-
-        return [field];
-      }); // Move field to position where it was dropped.
-
+      // Move field to position where it was dropped.
       return utils.moveField({
         field: field,
         position: position,
-        data: data
+        data: next
       });
     });
   };
+
   /**
    * Moves field to the given target position.
    */
-
-
-  var moveField = function moveField(_ref5) {
-    var field = _ref5.field,
-        position = _ref5.position;
+  var moveField = function moveField(_ref4) {
+    var field = _ref4.field,
+      position = _ref4.position;
     setState(function (data) {
       return utils.moveField({
         field: field,
@@ -231,11 +260,10 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
       });
     });
   };
+
   /**
    * Moves row to a destination row.
    */
-
-
   var moveRow = function moveRow(source, destination) {
     setState(function (data) {
       return utils.moveRow({
@@ -245,25 +273,24 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
       });
     });
   };
+
   /**
    * Updates field.
    */
-
-
   var updateField = function updateField(field) {
     setState(function (data) {
       for (var i = 0; i < data.fields.length; i++) {
         if (data.fields[i].id === field.id) {
-          return dot.set(data, "fields.".concat(i), field);
+          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({
@@ -272,33 +299,30 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
       });
     });
   };
-
-  var noConflict = useCallback(function (isVisible) {
+  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) {
+          (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) {
@@ -309,6 +333,7 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
     depth: depth,
     getFieldsInLayout: getFieldsInLayout,
     getFieldPlugin: getFieldPlugin,
+    getFieldRendererPlugin: getFieldRendererPlugin,
     getField: getField,
     editField: editField,
     field: state.field,
@@ -324,7 +349,8 @@ export var FieldEditorProvider = function FieldEditorProvider(_ref) {
     noConflict: noConflict,
     layout: state.layout
   };
-  return /*#__PURE__*/React.createElement(FieldEditorContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(FieldEditorContext.Provider, {
     value: value
   }, children);
-};
+};
+exports.FieldEditorProvider = FieldEditorProvider;