@webiny/app-headless-cms 0.0.0-mt-1

package/admin/components/FieldEditor/EditFieldDialog.js

@@ -0,0 +1,231 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _cloneDeep from "lodash/cloneDeep";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+var _excluded = ["field", "onSubmit"];
+import React, { useState, useEffect, useCallback } from "react";
+import { css } from "emotion";
+import { Dialog, DialogContent, DialogTitle, DialogActions, DialogButton } from "@webiny/ui/Dialog";
+import { Form } from "@webiny/form";
+import { Tabs, Tab } from "@webiny/ui/Tabs";
+import { i18n } from "@webiny/app/i18n";
+import { plugins } from "@webiny/plugins";
+import GeneralTab from "./EditFieldDialog/GeneralTab";
+import AppearanceTab from "./EditFieldDialog/AppearanceTab";
+import PredefinedValues from "./EditFieldDialog/PredefinedValues";
+import ValidatorsTab from "./EditFieldDialog/ValidatorsTab";
+import { Grid, Cell } from "@webiny/ui/Grid";
+import { Typography } from "@webiny/ui/Typography";
+import { Elevation } from "@webiny/ui/Elevation";
+import { useFieldEditor } from "./useFieldEditor";
+var t = i18n.namespace("app-headless-cms/admin/components/editor");
+var dialogBody = /*#__PURE__*/css({
+  "&.webiny-ui-dialog__content": {
+    width: 875,
+    height: 450
+  }
+}, "label:dialogBody;");
+
+var getValidators = function getValidators(fieldPlugin, key) {
+  var defaultValidators = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  return plugins.byType("cms-editor-field-validator").map(function (plugin) {
+    return plugin.validator;
+  }).map(function (validator) {
+    var allowedValidators = fieldPlugin.field[key] || defaultValidators;
+
+    if (allowedValidators.includes(validator.name)) {
+      return {
+        optional: true,
+        validator: validator
+      };
+    } else if (allowedValidators.includes("!".concat(validator.name))) {
+      return {
+        optional: false,
+        validator: validator
+      };
+    }
+
+    return null;
+  }).filter(Boolean).sort(function (a, b) {
+    if (!a.optional && b.optional) {
+      return -1;
+    }
+
+    if (a.optional && !b.optional) {
+      return 1;
+    }
+
+    return 0;
+  });
+};
+
+var getListValidators = function getListValidators(fieldPlugin) {
+  return getValidators(fieldPlugin, "listValidators", ["minLength", "maxLength"]);
+};
+
+var getFieldValidators = function getFieldValidators(fieldPlugin) {
+  return getValidators(fieldPlugin, "validators");
+};
+
+var fieldEditorDialog = /*#__PURE__*/css({
+  width: "100vw",
+  height: "100vh",
+  ".mdc-dialog__surface": {
+    maxWidth: "100% !important",
+    maxHeight: "100% !important",
+    ".webiny-ui-dialog__content": {
+      maxWidth: "100% !important",
+      maxHeight: "100% !important",
+      width: "100vw",
+      height: "calc(100vh - 155px)",
+      paddingTop: "0 !important"
+    }
+  }
+}, "label:fieldEditorDialog;");
+
+var EditFieldDialog = function EditFieldDialog(_ref) {
+  var field = _ref.field,
+      onSubmit = _ref.onSubmit,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      current = _useState2[0],
+      setCurrent = _useState2[1];
+
+  var _useFieldEditor = useFieldEditor(),
+      getFieldPlugin = _useFieldEditor.getFieldPlugin;
+
+  useEffect(function () {
+    if (!field) {
+      return setCurrent(field);
+    }
+
+    var clonedField = _cloneDeep(field);
+
+    if (!clonedField.renderer || !clonedField.renderer.name) {
+      var _plugins$byType$filte = plugins.byType("cms-editor-field-renderer").filter(function (item) {
+        return item.renderer.canUse({
+          field: field
+        });
+      }),
+          _plugins$byType$filte2 = _slicedToArray(_plugins$byType$filte, 1),
+          renderPlugin = _plugins$byType$filte2[0];
+
+      if (renderPlugin) {
+        clonedField.renderer = {
+          name: renderPlugin.renderer.rendererName
+        };
+      }
+    }
+
+    setCurrent(clonedField);
+  }, [field]);
+  var onClose = useCallback(function () {
+    setCurrent(null);
+    props.onClose();
+  }, undefined);
+  var render = null;
+  var headerTitle = t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Field Settings"])));
+
+  if (current) {
+    var fieldPlugin = getFieldPlugin(current.type);
+
+    if (fieldPlugin) {
+      headerTitle = t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Field Settings - {fieldTypeLabel}"])))({
+        fieldTypeLabel: fieldPlugin.field.label
+      });
+    }
+
+    render = /*#__PURE__*/React.createElement(Form, {
+      data: current,
+      onSubmit: onSubmit
+    }, function (form) {
+      var predefinedValuesTabEnabled = fieldPlugin.field.allowPredefinedValues && form.data.predefinedValues && form.data.predefinedValues.enabled;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DialogContent, {
+        className: dialogBody
+      }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
+        label: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["General"])))
+      }, /*#__PURE__*/React.createElement(GeneralTab, {
+        form: form,
+        field: form.data,
+        fieldPlugin: fieldPlugin
+      })), /*#__PURE__*/React.createElement(Tab, {
+        label: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Predefined Values"]))),
+        disabled: !predefinedValuesTabEnabled
+      }, predefinedValuesTabEnabled && /*#__PURE__*/React.createElement(PredefinedValues, {
+        form: form,
+        field: form.data,
+        fieldPlugin: fieldPlugin
+      })), form.data.multipleValues && /*#__PURE__*/React.createElement(Tab, {
+        label: "Validators",
+        "data-testid": "cms.editor.field.tabs.validators"
+      }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+        span: 12
+      }, /*#__PURE__*/React.createElement(Typography, {
+        use: "headline5"
+      }, "List validators"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Typography, {
+        use: "body2"
+      }, "These validators are applied to the entire list of values.")), /*#__PURE__*/React.createElement(Cell, {
+        span: 12
+      }, /*#__PURE__*/React.createElement(Elevation, {
+        z: 2
+      }, /*#__PURE__*/React.createElement(ValidatorsTab, {
+        field: field,
+        name: "listValidation",
+        validators: getListValidators(fieldPlugin),
+        form: form
+      })))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+        span: 12
+      }, /*#__PURE__*/React.createElement(Typography, {
+        use: "headline5"
+      }, "Individual value validators"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Typography, {
+        use: "body2"
+      }, "These validators are applied to each value in the list.")), /*#__PURE__*/React.createElement(Cell, {
+        span: 12
+      }, /*#__PURE__*/React.createElement(Elevation, {
+        z: 2
+      }, /*#__PURE__*/React.createElement(ValidatorsTab, {
+        field: current,
+        form: form,
+        name: "validation",
+        validators: getFieldValidators(fieldPlugin)
+      }))))), !form.data.multipleValues && Array.isArray(fieldPlugin.field.validators) && fieldPlugin.field.validators.length > 0 && /*#__PURE__*/React.createElement(Tab, {
+        label: "Validators",
+        "data-testid": "cms.editor.field.tabs.validators"
+      }, /*#__PURE__*/React.createElement(ValidatorsTab, {
+        field: current,
+        form: form,
+        name: "validation",
+        validators: getFieldValidators(fieldPlugin)
+      })), /*#__PURE__*/React.createElement(Tab, {
+        label: t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Appearance"])))
+      }, /*#__PURE__*/React.createElement(AppearanceTab, {
+        form: form,
+        field: form.data,
+        fieldPlugin: fieldPlugin
+      })))), /*#__PURE__*/React.createElement(DialogActions, {
+        style: {
+          justifyContent: "flex-end"
+        }
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DialogButton, {
+        onClick: onClose
+      }, t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Cancel"])))), /*#__PURE__*/React.createElement(DialogButton, {
+        onClick: form.submit
+      }, t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Save"])))))));
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(Dialog, {
+    preventOutsideDismiss: true,
+    open: !!current,
+    onClose: onClose,
+    "data-testid": "cms-editor-edit-fields-dialog",
+    className: fieldEditorDialog
+  }, /*#__PURE__*/React.createElement(DialogTitle, null, headerTitle), render);
+};
+
+export default EditFieldDialog;

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

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: React.MemoExoticComponent<(props: any) => JSX.Element>;
+export default _default;

package/admin/components/FieldEditor/Field.js

@@ -0,0 +1,179 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { Fragment, useCallback } from "react";
+import { css } from "emotion";
+import styled from "@emotion/styled";
+import { IconButton } from "@webiny/ui/Button";
+import { Typography } from "@webiny/ui/Typography";
+import { ReactComponent as EditIcon } from "@svgr/webpack!../../icons/edit.svg";
+import { ReactComponent as DeleteIcon } from "@svgr/webpack!../../icons/delete.svg";
+import { ReactComponent as TitleIcon } from "@svgr/webpack!../../icons/title-24px.svg";
+import { ReactComponent as MoreVerticalIcon } from "@svgr/webpack!../../icons/more_vert.svg";
+import { Menu, MenuItem } from "@webiny/ui/Menu";
+import { plugins } from "@webiny/plugins";
+import { ListItemGraphic } from "@webiny/ui/List";
+import { Icon } from "@webiny/ui/Icon";
+import { i18n } from "@webiny/app/i18n";
+import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
+import { useContentModelEditor } from "../ContentModelEditor/useContentModelEditor";
+import { useFieldEditor } from "./useFieldEditor";
+var t = i18n.ns("app-headless-cms/admin/components/editor/field");
+var FieldContainer = /*#__PURE__*/styled("div", {
+  target: "erv8xml0",
+  label: "FieldContainer"
+})({
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "space-between",
+  alignItems: "center"
+});
+var Info = /*#__PURE__*/styled("div", {
+  target: "erv8xml1",
+  label: "Info"
+})({
+  display: "flex",
+  flexDirection: "column",
+  "> *": {
+    flex: "1 100%",
+    lineHeight: "150%"
+  }
+});
+var Actions = /*#__PURE__*/styled("div", {
+  target: "erv8xml2",
+  label: "Actions"
+})({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "right",
+  "> *": {
+    flex: "1 100%"
+  }
+});
+var menuStyles = /*#__PURE__*/css({
+  width: 220,
+  right: -105,
+  left: "auto !important",
+  ".disabled": {
+    opacity: 0.5,
+    pointerEvents: "none"
+  }
+}, "label:menuStyles;");
+var allowedTitleFieldTypes = ["text", "number"];
+
+var isFieldAllowedToBeTitle = function isFieldAllowedToBeTitle(field, parent) {
+  if (field.multipleValues || parent) {
+    return false;
+  } else if (allowedTitleFieldTypes.includes(field.type) === false) {
+    return false;
+  }
+
+  return true;
+};
+
+var Field = function Field(props) {
+  var field = props.field,
+      onEdit = props.onEdit,
+      parent = props.parent;
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var _useContentModelEdito = useContentModelEditor(),
+      setData = _useContentModelEdito.setData,
+      data = _useContentModelEdito.data;
+
+  var _useFieldEditor = useFieldEditor(),
+      getFieldPlugin = _useFieldEditor.getFieldPlugin;
+
+  var onDelete = useCallback(function () {
+    props.onDelete(field);
+  }, [field.fieldId]);
+  var setAsTitle = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var response;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return setData(function (data) {
+              return _objectSpread(_objectSpread({}, data), {}, {
+                titleFieldId: field.fieldId
+              });
+            });
+
+          case 2:
+            response = _context.sent;
+
+            if (!response.error) {
+              _context.next = 5;
+              break;
+            }
+
+            return _context.abrupt("return", showSnackbar(response.error.message));
+
+          case 5:
+            showSnackbar(t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Title field set successfully."]))));
+
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })), [field.fieldId]);
+  var fieldPlugin = getFieldPlugin(field.type);
+  var editorFieldOptionPlugins = plugins.byType("cms-editor-field-option");
+
+  if (!fieldPlugin) {
+    return null;
+  }
+
+  var lockedFields = data.lockedFields || [];
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Info, null, /*#__PURE__*/React.createElement(Typography, {
+    use: "subtitle1"
+  }, field.label), /*#__PURE__*/React.createElement(Typography, {
+    use: "caption"
+  }, fieldPlugin.field.label, " ", field.multipleValues && /*#__PURE__*/React.createElement(React.Fragment, null, "(", t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["multiple values"]))), ")"), field.fieldId === data.titleFieldId && /*#__PURE__*/React.createElement(React.Fragment, null, "(", t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["entry title"]))), ")"))), /*#__PURE__*/React.createElement(Actions, null, /*#__PURE__*/React.createElement(IconButton, {
+    "data-testid": "cms.editor.edit-field",
+    icon: /*#__PURE__*/React.createElement(EditIcon, null),
+    onClick: function onClick() {
+      return onEdit(field);
+    }
+  }), /*#__PURE__*/React.createElement(Menu, {
+    className: menuStyles,
+    handle: /*#__PURE__*/React.createElement(IconButton, {
+      icon: /*#__PURE__*/React.createElement(MoreVerticalIcon, null)
+    })
+  }, editorFieldOptionPlugins.map(function (pl) {
+    return /*#__PURE__*/React.cloneElement(pl.render(), {
+      key: pl.name
+    });
+  }), /*#__PURE__*/React.createElement(MenuItem, {
+    disabled: !isFieldAllowedToBeTitle(field, parent),
+    onClick: setAsTitle
+  }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(TitleIcon, null)
+  })), t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Use as title"])))), /*#__PURE__*/React.createElement(MenuItem, {
+    disabled: lockedFields.some(function (lockedField) {
+      return lockedField.fieldId === field.fieldId;
+    }),
+    onClick: onDelete
+  }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(DeleteIcon, null)
+  })), lockedFields.find(function (lockedField) {
+    return lockedField.fieldId === field.fieldId;
+  }) ? t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Cannot delete"]))) : t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Delete"]))))))), /*#__PURE__*/React.createElement("div", {
+    className: "field-extra"
+  }, fieldPlugin.field.render && fieldPlugin.field.render({
+    field: field,
+    data: data,
+    setData: setData
+  })));
+};
+
+export default /*#__PURE__*/React.memo(Field);

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { CmsEditorField, CmsEditorFieldsLayout } from "../../../types";
+export interface FieldEditorProps {
+    parent?: CmsEditorField;
+    layout: CmsEditorFieldsLayout;
+    fields: CmsEditorField[];
+    onChange: (params: {
+        fields: CmsEditorField[];
+        layout: CmsEditorFieldsLayout;
+    }) => void;
+}
+export declare const FieldEditor: (props: FieldEditorProps) => JSX.Element;

package/admin/components/FieldEditor/FieldEditor.js

@@ -0,0 +1,166 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+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 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, {
+    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, {
+      beginDrag: {
+        parent: parent ? parent.fieldId : null,
+        type: "row",
+        fields: row,
+        pos: {
+          row: index
+        }
+      },
+      endDrag: onEndDrag,
+      key: row.map(function (f) {
+        return f.fieldId;
+      }).join(".")
+    }, function (_ref
+    /* RowContainer start - includes drag handle, drop zones and the Row itself. */
+    ) {
+      var drag = _ref.drag,
+          isDragging = _ref.isDragging;
+      return /*#__PURE__*/React.createElement(RowContainer, {
+        style: {
+          opacity: isDragging ? 0.3 : 1
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: rowHandle,
+        ref: drag
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: /*#__PURE__*/React.createElement(HandleIcon, null)
+      })), /*#__PURE__*/React.createElement(Horizontal, {
+        "data-testid": "cms-editor-row-droppable-top-".concat(index),
+        isVisible: noConflict(),
+        onDrop: function onDrop(item) {
+          return onFieldDrop(item, {
+            row: index,
+            index: null
+          });
+        }
+      }), /*#__PURE__*/React.createElement(Row, {
+        "data-testid": "cms.editor.field-row"
+      }, row.map(function (field, fieldIndex) {
+        return /*#__PURE__*/React.createElement(Draggable, {
+          key: field.fieldId,
+          beginDrag: {
+            parent: parent ? parent.fieldId : null,
+            type: "field",
+            field: field,
+            pos: {
+              row: index,
+              index: fieldIndex
+            }
+          },
+          endDrag: onEndDrag
+        }, function (_ref2) {
+          var drag = _ref2.drag;
+          return /*#__PURE__*/React.createElement("div", {
+            className: fieldContainer,
+            ref: drag
+          }, /*#__PURE__*/React.createElement(Vertical, {
+            depth: depth,
+            onDrop: function onDrop(item) {
+              return onFieldDrop(item, {
+                row: index,
+                index: fieldIndex
+              });
+            },
+            isVisible: noConflict(function (item) {
+              return fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index);
+            })
+          }), /*#__PURE__*/React.createElement("div", {
+            className: fieldHandle
+          }, /*#__PURE__*/React.createElement(Field, {
+            parent: parent,
+            field: field,
+            onEdit: editField,
+            onDelete: deleteField
+          })), fieldIndex === row.length - 1 && /*#__PURE__*/React.createElement(Vertical, {
+            last: true,
+            depth: depth,
+            isVisible: noConflict(function (item) {
+              return fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index);
+            }),
+            onDrop: function onDrop(item) {
+              return onFieldDrop(item, {
+                row: index,
+                index: fieldIndex + 1
+              });
+            }
+          }));
+        });
+      })), index === fields.length - 1 && /*#__PURE__*/React.createElement(Horizontal, {
+        "data-testid": "cms-editor-row-droppable-bottom-".concat(index),
+        last: true,
+        isVisible: noConflict(),
+        onDrop: function onDrop(item) {
+          return onFieldDrop(item, {
+            row: index + 1,
+            index: null
+          });
+        }
+      }));
+    });
+  }), /*#__PURE__*/React.createElement(EditFieldDialog, {
+    field: field,
+    onClose: editField,
+    onSubmit: function onSubmit(field) {
+      if (field.id) {
+        updateField(field);
+      } else {
+        insertField({
+          field: field,
+          position: dropTarget
+        });
+      }
+
+      editField(null);
+    }
+  }));
+};
+
+export var FieldEditor = function FieldEditor(props) {
+  return /*#__PURE__*/React.createElement(FieldEditorProvider, props, /*#__PURE__*/React.createElement(Editor, null));
+};

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

@@ -0,0 +1,53 @@
+import React from "react";
+import { CmsEditorField, CmsEditorFieldId, CmsEditorFieldsLayout, CmsEditorFieldTypePlugin, FieldLayoutPosition } from "../../../types";
+import { FieldEditorProps } from "./FieldEditor";
+import { DragObjectWithType, DragSourceMonitor } from "react-dnd";
+interface DropTarget {
+    row: number;
+    index: number;
+}
+interface Position {
+    row: number;
+    index: number;
+}
+export interface DragSource extends DragObjectWithType {
+    parent?: string;
+    pos: Partial<Position>;
+    type: "row" | "field" | "newField";
+    fieldType?: string;
+    field?: CmsEditorField;
+    fields?: CmsEditorField[];
+}
+export interface FieldEditorContextValue {
+    fields: CmsEditorField[][];
+    noConflict: Function;
+    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;
+    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;
+}
+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 {};