@webiny/app-headless-cms 0.0.0-mt-2 → 0.0.0-unstable.13771d80a8

package/admin/components/FieldEditor/FieldEditor.js

@@ -1,49 +1,91 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+"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;
-
-import React, { Fragment } from "react";
-import get from "lodash/get";
-import { Icon } from "@webiny/ui/Icon";
-import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as HandleIcon } from "@svgr/webpack!../../icons/round-drag_indicator-24px.svg";
-import { Center, Vertical, Horizontal } from "../DropZone";
-import Draggable from "../Draggable";
-import EditFieldDialog from "./EditFieldDialog";
-import Field from "./Field";
-import { rowHandle, fieldHandle, fieldContainer, Row, RowContainer } from "./Styled";
-import { useFieldEditor } from "./useFieldEditor";
-import { FieldEditorProvider } from "./FieldEditorContext";
-var t = i18n.namespace("app-headless-cms/admin/components/editor");
+var t = _i18n.i18n.namespace("app-headless-cms/admin/components/editor");
 var fieldTypes = ["field", "newField"];
-
 var Editor = function Editor() {
-  var _useFieldEditor = useFieldEditor(),
-      parent = _useFieldEditor.parent,
-      depth = _useFieldEditor.depth,
-      insertField = _useFieldEditor.insertField,
-      updateField = _useFieldEditor.updateField,
-      deleteField = _useFieldEditor.deleteField,
-      fields = _useFieldEditor.fields,
-      noConflict = _useFieldEditor.noConflict,
-      editField = _useFieldEditor.editField,
-      onFieldDrop = _useFieldEditor.onFieldDrop,
-      onEndDrag = _useFieldEditor.onEndDrag,
-      field = _useFieldEditor.field,
-      dropTarget = _useFieldEditor.dropTarget;
-
-  return /*#__PURE__*/React.createElement(Fragment, null, fields.length === 0 && /*#__PURE__*/React.createElement(Center, {
+  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;
+  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;
+    }),
     onDrop: function onDrop(item) {
       return onFieldDrop(item, {
         row: 0,
         index: 0
       });
-    },
-    style: {
-      padding: "5px 0 15px 0"
     }
-  }, t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Drop your first field here"])))), fields.map(function (row, index) {
-    return /*#__PURE__*/React.createElement(Draggable, {
+  }, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Drop your first field here"])))), fields.map(function (row, index) {
+    return /*#__PURE__*/_react.default.createElement(_Draggable.default, {
       beginDrag: {
         parent: parent ? parent.fieldId : null,
         type: "row",
@@ -56,34 +98,34 @@ 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;
-      return /*#__PURE__*/React.createElement(RowContainer, {
+        isDragging = _ref.isDragging;
+      return /*#__PURE__*/_react.default.createElement(_Styled.RowContainer, {
         style: {
           opacity: isDragging ? 0.3 : 1
         }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: rowHandle,
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: _Styled.rowHandle,
         ref: drag
-      }, /*#__PURE__*/React.createElement(Icon, {
-        icon: /*#__PURE__*/React.createElement(HandleIcon, null)
-      })), /*#__PURE__*/React.createElement(Horizontal, {
+      }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+        icon: /*#__PURE__*/_react.default.createElement(_roundDrag_indicator24px.ReactComponent, null)
+      })), /*#__PURE__*/_react.default.createElement(_DropZone.Horizontal, {
+        isVisible: isHorizontalDropzoneVisible(noConflict()),
         "data-testid": "cms-editor-row-droppable-top-".concat(index),
-        isVisible: noConflict(),
         onDrop: function onDrop(item) {
           return onFieldDrop(item, {
             row: index,
             index: null
           });
         }
-      }), /*#__PURE__*/React.createElement(Row, {
+      }), /*#__PURE__*/_react.default.createElement(_Styled.Row, {
         "data-testid": "cms.editor.field-row"
       }, row.map(function (field, fieldIndex) {
-        return /*#__PURE__*/React.createElement(Draggable, {
-          key: field.fieldId,
+        return /*#__PURE__*/_react.default.createElement(_ModelFieldProvider.ModelFieldProvider, {
+          field: field,
+          key: field.fieldId
+        }, /*#__PURE__*/_react.default.createElement(_Draggable.default, {
           beginDrag: {
             parent: parent ? parent.fieldId : null,
             type: "field",
@@ -96,10 +138,10 @@ var Editor = function Editor() {
           endDrag: onEndDrag
         }, function (_ref2) {
           var drag = _ref2.drag;
-          return /*#__PURE__*/React.createElement("div", {
-            className: fieldContainer,
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: _Styled.fieldContainer,
             ref: drag
-          }, /*#__PURE__*/React.createElement(Vertical, {
+          }, /*#__PURE__*/_react.default.createElement(_DropZone.Vertical, {
             depth: depth,
             onDrop: function onDrop(item) {
               return onFieldDrop(item, {
@@ -107,22 +149,22 @@ var Editor = function Editor() {
                 index: fieldIndex
               });
             },
-            isVisible: noConflict(function (item) {
-              return fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index);
-            })
-          }), /*#__PURE__*/React.createElement("div", {
-            className: fieldHandle
-          }, /*#__PURE__*/React.createElement(Field, {
+            isVisible: isVerticalDropzoneVisible(noConflict(function (item) {
+              return fieldTypes.includes(item.type) && (row.length < 4 || (0, _get.default)(item, "pos.row") === index);
+            }))
+          }), /*#__PURE__*/_react.default.createElement("div", {
+            className: _Styled.fieldHandle
+          }, /*#__PURE__*/_react.default.createElement(_Field.default, {
             parent: parent,
             field: field,
             onEdit: editField,
             onDelete: deleteField
-          })), fieldIndex === row.length - 1 && /*#__PURE__*/React.createElement(Vertical, {
+          })), fieldIndex === row.length - 1 && /*#__PURE__*/_react.default.createElement(_DropZone.Vertical, {
             last: true,
             depth: depth,
-            isVisible: noConflict(function (item) {
-              return fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index);
-            }),
+            isVisible: isVerticalDropzoneVisible(noConflict(function (item) {
+              return fieldTypes.includes(item.type) && (row.length < 4 || (0, _get.default)(item, "pos.row") === index);
+            })),
             onDrop: function onDrop(item) {
               return onFieldDrop(item, {
                 row: index,
@@ -130,37 +172,40 @@ var Editor = function Editor() {
               });
             }
           }));
-        });
-      })), index === fields.length - 1 && /*#__PURE__*/React.createElement(Horizontal, {
+        }));
+      })), index === fields.length - 1 ? /*#__PURE__*/_react.default.createElement(_DropZone.Horizontal, {
         "data-testid": "cms-editor-row-droppable-bottom-".concat(index),
         last: true,
-        isVisible: noConflict(),
+        isVisible: isHorizontalDropzoneVisible(noConflict()),
         onDrop: function onDrop(item) {
           return onFieldDrop(item, {
             row: index + 1,
             index: null
           });
         }
-      }));
+      }) : null);
     });
-  }), /*#__PURE__*/React.createElement(EditFieldDialog, {
-    field: field,
-    onClose: editField,
+  }), field ? /*#__PURE__*/_react.default.createElement(_ModelFieldProvider.ModelFieldProvider, {
+    field: field
+  }, /*#__PURE__*/_react.default.createElement(_EditFieldDialog.default, {
+    onClose: function onClose() {
+      return editField(null);
+    },
     onSubmit: function onSubmit(field) {
       if (field.id) {
         updateField(field);
-      } else {
-        insertField({
-          field: field,
-          position: dropTarget
-        });
+        editField(null);
+        return;
       }
-
+      insertField({
+        field: field,
+        position: dropTarget
+      });
       editField(null);
     }
-  }));
+  })) : null);
 };
-
-export var FieldEditor = function FieldEditor(props) {
-  return /*#__PURE__*/React.createElement(FieldEditorProvider, props, /*#__PURE__*/React.createElement(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

@@ -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 {};