@webiny/app-headless-cms 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/admin/components/FieldEditor/FieldEditorContext.js

@@ -1,330 +1,333 @@
-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) {
-  var parent = _ref.parent,
-      fields = _ref.fields,
-      layout = _ref.layout,
-      onChange = _ref.onChange,
-      children = _ref.children;
+import { useModelFieldEditor } from "./useModelFieldEditor";
+import { generateAlphaNumericLowerCaseId } from "@webiny/utils";
+
+/**
+ * Property in GetFieldParams can be any key from CmsEditorField, but TS does not allow union types
+ */
+
+export const FieldEditorContext = /*#__PURE__*/React.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...
+ */
+const maxGenerateIdIterations = 100;
+const generateFieldId = layout => {
+  let id = generateAlphaNumericLowerCaseId(8);
+  let iteration = 0;
+  while (layout.includes(id) && iteration < maxGenerateIdIterations) {
+    id = generateAlphaNumericLowerCaseId(8);
+    iteration++;
+  }
+  if (iteration >= maxGenerateIdIterations) {
+    throw new Error(`Could not generate field ID in ${maxGenerateIdIterations} iterations.`);
+  }
+  return id;
+};
+export const FieldEditorProvider = ({
+  parent,
+  fields,
+  layout,
+  onChange,
+  children
+}) => {
   // We need to determine depth of this provider so we can render drop zones with correct z-indexes.
-  var depth = 0;
-
+  let depth = 0;
   try {
-    var editor = useFieldEditor();
+    const editor = useModelFieldEditor();
     depth = editor.depth + 1;
-  } catch (_unused) {// There's no parent provider, so this is the top-level one.
+  } catch {
+    // There's no parent provider, so this is the top-level one.
   }
-
-  var _useState = useState({
-    layout: layout,
-    fields: fields,
+  const [state, setState] = useState({
+    layout,
+    fields,
     field: null,
-    dropTarget: null
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
-
-  useDeepCompareEffect(function () {
+    dropTarget: {
+      row: -1,
+      index: null
+    }
+  });
+  useDeepCompareEffect(() => {
     onChange({
       fields: state.fields,
       layout: state.layout
     });
   }, [state.fields, state.layout]);
-  var editField = useCallback(function (field) {
-    setState(function (state) {
-      return _objectSpread(_objectSpread({}, state), {}, {
-        field: field
-      });
-    });
+  const editField = useCallback(field => {
+    setState(state => ({
+      ...state,
+      field
+    }));
   }, []);
-  var onDropTarget = {
+  const onDropTarget = {
     dropTarget: parent ? parent.fieldId : null
   };
-  var onFieldDrop = useCallback(function (source, dropTarget) {
-    var pos = source.pos,
-        type = source.type,
-        fieldType = source.fieldType,
-        field = source.field,
-        fields = source.fields;
-    var parentId = parent ? parent.fieldId : null;
-
+  const onFieldDrop = useCallback((source, dropTarget) => {
+    const {
+      pos,
+      type,
+      fieldType,
+      field,
+      fields = []
+    } = source;
+    const parentId = parent ? parent.fieldId : null;
     if (type === "row") {
       if (parentId !== source.parent) {
         // We're dragging an existing row from another fieldset
-        fields.forEach(function (field, index) {
+        fields.forEach((field, index) => {
           insertField({
-            field: field,
+            field,
             position: {
               row: dropTarget.row,
               index: index === 0 ? null : index
             }
           });
         });
-      } 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({
-          field: field,
+          field,
           position: dropTarget
         });
       } else {
         // We're dragging a field within the same fieldset
         moveField({
-          field: field,
+          field,
           position: dropTarget
         });
       }
-
       return onDropTarget;
     }
-
-    var plugin = getFieldPlugin(fieldType);
-    editField(plugin.field.createField());
-    setState(function (state) {
-      return _objectSpread(_objectSpread({}, state), {}, {
-        dropTarget: dropTarget
+    if (!fieldType) {
+      return null;
+    }
+    const plugin = getFieldPlugin(fieldType);
+    if (!plugin) {
+      return null;
+    }
+    const fieldData = plugin.field.createField();
+    if (plugin.field.canEditSettings !== false) {
+      editField(fieldData);
+      setState(state => ({
+        ...state,
+        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;
-
+  const onEndDrag = ({
+    type,
+    field,
+    fields
+  }, monitor) => {
     if (!monitor.didDrop()) {
       return;
-    } // 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;
-
-    var parentId = parent ? parent.fieldId : null;
+    }
 
-    if (dropTarget === parentId) {
+    // Check if we dropped outside of the source fieldset, and if yes, remove the field from the original parent.
+    const monitorResult = monitor.getDropResult();
+    const parentId = parent ? parent.fieldId : null;
+    if (monitorResult?.dropTarget === parentId) {
       return;
     }
-
-    var removeFields = type === "row" ? fields : [field];
-    removeFields.forEach(function (field) {
-      return deleteField(field);
-    });
+    const removeFields = type === "row" ? fields || [] : field ? [field] : [];
+    removeFields.forEach(field => deleteField(field));
   };
-
-  var getFieldsInLayout = function getFieldsInLayout() {
+  const getFieldsInLayout = () => {
     // Replace every field ID with actual field object.
-    var fields = cloneDeep(state.layout.filter(function (arr) {
-      return arr.length;
-    }));
-    fields.forEach(function (row, rowIndex) {
-      row.forEach(function (fieldId, fieldIndex) {
-        fields[rowIndex][fieldIndex] = getField({
-          id: fieldId
+    return state.layout.filter(arr => arr.length).map(row => {
+      return row.map(id => {
+        return getField({
+          id
         });
-      });
+      }).filter(Boolean);
+    }).filter(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;
-    });
+  const getFieldPlugin = type => {
+    return plugins.byType("cms-editor-field-type").find(plugin => plugin.field.type === type);
+  };
+  const getFieldRendererPlugin = name => {
+    return plugins.byType("cms-editor-field-renderer").find(plugin => 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) {
+  const getField = query => {
+    return state.fields.find(field => {
+      for (const key in query) {
         if (!(key in field)) {
-          return null;
+          return false;
         }
-
         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;
-
+  const insertField = ({
+    field,
+    position
+  }) => {
     if (!field.id) {
-      field.id = shortid.generate();
+      field.id = generateFieldId(layout.flat());
     }
-
     if (!field.type) {
-      throw new Error("Field \"type\" missing.");
+      throw new Error(`Field "type" missing.`);
     }
-
-    var fieldPlugin = getFieldPlugin(field.type);
-
+    const fieldPlugin = getFieldPlugin(field.type);
     if (!fieldPlugin) {
-      throw new Error("Invalid field \"type\".");
+      throw new Error(`No plugin found for field type "${field.type}".`);
     }
+    setState(prev => {
+      const next = {
+        ...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
+        field,
+        position,
+        data: next
       });
     });
   };
+
   /**
    * Moves field to the given target position.
    */
-
-
-  var moveField = function moveField(_ref5) {
-    var field = _ref5.field,
-        position = _ref5.position;
-    setState(function (data) {
+  const moveField = ({
+    field,
+    position
+  }) => {
+    setState(data => {
       return utils.moveField({
-        field: field,
-        position: position,
-        data: data
+        field,
+        position,
+        data
       });
     });
   };
+
   /**
    * Moves row to a destination row.
    */
-
-
-  var moveRow = function moveRow(source, destination) {
-    setState(function (data) {
+  const moveRow = (source, destination) => {
+    setState(data => {
       return utils.moveRow({
-        data: data,
-        source: source,
-        destination: destination
+        data,
+        source,
+        destination
       });
     });
   };
+
   /**
    * Updates field.
    */
-
-
-  var updateField = function updateField(field) {
-    setState(function (data) {
-      for (var i = 0; i < data.fields.length; i++) {
+  const updateField = field => {
+    setState(data => {
+      for (let i = 0; i < data.fields.length; i++) {
         if (data.fields[i].id === field.id) {
-          return dot.set(data, "fields.".concat(i), field);
+          return dot.set(data, `fields.${i}`, field);
         }
       }
+      return data;
     });
   };
+
   /**
    * Deletes a field (both from the list of field and the layout).
    */
-
-
-  var deleteField = function deleteField(field) {
-    setState(function (data) {
+  const deleteField = field => {
+    setState(data => {
       return utils.deleteField({
-        field: field,
-        data: data
+        field,
+        data
       });
     });
   };
-
-  var noConflict = 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);
-          });
+  const noConflict = useCallback(isVisible => item => {
+    const sameParent = item.parent === onDropTarget.dropTarget;
+    const draggedFields = [];
+    switch (item.type) {
+      case "row":
+        (item.fields || []).forEach(field => draggedFields.push(field.fieldId));
+        break;
+      case "field":
+        if (!item.field) {
           break;
-
-        case "field":
-          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) {
-    return f.fieldId;
-  }).join(".")]);
-  var value = {
-    parent: parent,
-    depth: depth,
-    getFieldsInLayout: getFieldsInLayout,
-    getFieldPlugin: getFieldPlugin,
-    getField: getField,
-    editField: editField,
+        }
+        draggedFields.push(item.field.fieldId);
+        break;
+      default:
+        break;
+    }
+    if (draggedFields.length && !sameParent && fields.some(field => draggedFields.includes(field.fieldId))) {
+      return false;
+    }
+    return typeof isVisible === "function" ? isVisible(item) : true;
+  }, [fields.map(f => f.fieldId).join(".")]);
+  const value = {
+    parent,
+    depth,
+    getFieldsInLayout,
+    getFieldPlugin,
+    getFieldRendererPlugin,
+    getField,
+    editField,
     field: state.field,
     dropTarget: state.dropTarget,
-    onFieldDrop: onFieldDrop,
-    onEndDrag: onEndDrag,
-    insertField: insertField,
-    moveField: moveField,
-    moveRow: moveRow,
-    updateField: updateField,
-    deleteField: deleteField,
+    onFieldDrop,
+    onEndDrag,
+    insertField,
+    moveField,
+    moveRow,
+    updateField,
+    deleteField,
     fields: getFieldsInLayout(),
-    noConflict: noConflict,
+    noConflict,
     layout: state.layout
   };
   return /*#__PURE__*/React.createElement(FieldEditorContext.Provider, {
     value: value
   }, children);
-};
+};
+
+//# sourceMappingURL=FieldEditorContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useState","dot","useDeepCompareEffect","plugins","utils","useModelFieldEditor","generateAlphaNumericLowerCaseId","FieldEditorContext","createContext","undefined","maxGenerateIdIterations","generateFieldId","layout","id","iteration","includes","Error","FieldEditorProvider","parent","fields","onChange","children","depth","editor","state","setState","field","dropTarget","row","index","editField","onDropTarget","fieldId","onFieldDrop","source","pos","type","fieldType","parentId","forEach","insertField","position","moveRow","moveField","plugin","getFieldPlugin","fieldData","createField","canEditSettings","onEndDrag","monitor","didDrop","monitorResult","getDropResult","removeFields","deleteField","getFieldsInLayout","filter","arr","length","map","getField","Boolean","byType","find","getFieldRendererPlugin","name","renderer","rendererName","query","key","flat","fieldPlugin","prev","next","concat","data","destination","updateField","i","set","noConflict","isVisible","item","sameParent","draggedFields","push","some","f","join","value","createElement","Provider"],"sources":["FieldEditorContext.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport dot from \"dot-prop-immutable\";\nimport useDeepCompareEffect from \"use-deep-compare-effect\";\nimport type {\n    CmsEditorFieldId,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldsLayout,\n    CmsEditorFieldTypePlugin,\n    CmsModelField,\n    DragSource,\n    FieldLayoutPosition\n} from \"~/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport * as utils from \"./utils\";\nimport type { FieldEditorProps } from \"./FieldEditor\";\nimport type { DragSourceMonitor } from \"react-dnd\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor/useModelFieldEditor\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport type { DragObject } from \"../Droppable\";\n\ninterface DropTarget {\n    row: number;\n    index: number | null;\n}\n\n/**\n * Property in GetFieldParams can be any key from CmsEditorField, but TS does not allow union types\n */\ninterface GetFieldParams {\n    id?: string;\n    fieldId?: string;\n}\ninterface InsertFieldParams {\n    field: CmsModelField;\n    position: FieldLayoutPosition;\n}\ninterface MoveFieldParams {\n    field: CmsEditorFieldId | CmsModelField;\n    position: FieldLayoutPosition;\n}\ninterface GetFieldsInLayoutCallable {\n    (): CmsModelField[][];\n}\ninterface GetFieldPluginCallable {\n    (type: string): CmsEditorFieldTypePlugin | undefined;\n}\ninterface GetFieldCallable {\n    (query: GetFieldParams): CmsModelField | undefined;\n}\ninterface GetFieldRendererCallable {\n    (rendererName: string): CmsEditorFieldRendererPlugin | undefined;\n}\ninterface OnFieldDropCallable {\n    (source: Partial<DragSource>, target: DropTarget): void;\n}\ninterface InsertFieldCallable {\n    (params: InsertFieldParams): void;\n}\ninterface MoveFieldCallable {\n    (params: MoveFieldParams): void;\n}\ninterface OnEndDragCallable<DragObject = unknown, DropResult = unknown> {\n    (item: DragSource, monitor: DragSourceMonitor<DragObject, DropResult>): void;\n}\ninterface MoveRowCallable {\n    (source: number, destination: number): void;\n}\ninterface UpdateFieldCallable {\n    (field: CmsModelField): void;\n}\ninterface DeleteFieldCallable {\n    (field: Pick<CmsModelField, \"id\">): void;\n}\nexport interface IsVisibleCallable {\n    (item: DragSource): boolean;\n}\ninterface NoConflictCallable {\n    (cb?: IsVisibleCallable): (item: DragSource) => boolean;\n}\nexport interface FieldEditorContext {\n    fields: CmsModelField[][];\n    noConflict: NoConflictCallable;\n    layout: CmsEditorFieldsLayout;\n    onChange?: (data: any) => void;\n    getFieldsInLayout: GetFieldsInLayoutCallable;\n    getFieldPlugin: GetFieldPluginCallable;\n    getField: GetFieldCallable;\n    getFieldRendererPlugin: GetFieldRendererCallable;\n    editField: (field: CmsModelField | null) => void;\n    field: CmsModelField | null;\n    parent?: CmsModelField;\n    depth: number;\n    dropTarget: DropTarget;\n    onFieldDrop: OnFieldDropCallable;\n    onEndDrag: OnEndDragCallable;\n    insertField: InsertFieldCallable;\n    moveField: MoveFieldCallable;\n    moveRow: MoveRowCallable;\n    updateField: UpdateFieldCallable;\n    deleteField: DeleteFieldCallable;\n}\n\ninterface FieldEditorProviderProps extends FieldEditorProps {\n    children: React.ReactElement;\n}\n\ntype DropResult = {\n    dropTarget: string | null;\n};\n\nexport const FieldEditorContext = React.createContext<FieldEditorContext | undefined>(undefined);\n/**\n * We try to generate the random id string but with the check that it does not exist already.\n * Chances that the same string exists are quite small, but let's check it anyway.\n *\n * In most cases, there will be no iterations anyway...\n */\nconst maxGenerateIdIterations = 100;\nconst generateFieldId = (layout: string[]): string => {\n    let id = generateAlphaNumericLowerCaseId(8);\n\n    let iteration = 0;\n    while (layout.includes(id) && iteration < maxGenerateIdIterations) {\n        id = generateAlphaNumericLowerCaseId(8);\n        iteration++;\n    }\n    if (iteration >= maxGenerateIdIterations) {\n        throw new Error(`Could not generate field ID in ${maxGenerateIdIterations} iterations.`);\n    }\n    return id;\n};\n\ninterface State {\n    layout: CmsEditorFieldsLayout;\n    fields: CmsModelField[];\n    field: CmsModelField | null;\n    dropTarget: DropTarget;\n}\nexport const FieldEditorProvider = ({\n    parent,\n    fields,\n    layout,\n    onChange,\n    children\n}: FieldEditorProviderProps) => {\n    // We need to determine depth of this provider so we can render drop zones with correct z-indexes.\n    let depth = 0;\n    try {\n        const editor = useModelFieldEditor();\n        depth = editor.depth + 1;\n    } catch {\n        // There's no parent provider, so this is the top-level one.\n    }\n\n    const [state, setState] = useState<State>({\n        layout,\n        fields,\n        field: null,\n        dropTarget: {\n            row: -1,\n            index: null\n        }\n    });\n\n    useDeepCompareEffect(() => {\n        onChange({ fields: state.fields, layout: state.layout });\n    }, [state.fields, state.layout]);\n\n    const editField = useCallback((field: CmsModelField | null) => {\n        setState(state => ({ ...state, field }));\n    }, []);\n\n    const onDropTarget = {\n        dropTarget: parent ? parent.fieldId : null\n    };\n\n    const onFieldDrop = useCallback<OnFieldDropCallable>((source, dropTarget) => {\n        const { pos, type, fieldType, field, fields = [] } = source;\n\n        const parentId = parent ? parent.fieldId : null;\n\n        if (type === \"row\") {\n            if (parentId !== source.parent) {\n                // We're dragging an existing row from another fieldset\n                fields.forEach((field, index) => {\n                    insertField({\n                        field,\n                        position: {\n                            row: dropTarget.row,\n                            index: index === 0 ? null : index\n                        }\n                    });\n                });\n            } else if (pos && pos.row !== undefined) {\n                // We're dragging a row within the same fieldset\n                moveRow(pos.row, dropTarget.row);\n            }\n\n            return onDropTarget;\n        }\n\n        // If source pos is set, we are moving an existing field.\n        if (pos) {\n            if (!field) {\n                return onDropTarget;\n            }\n            if (parentId !== source.parent) {\n                // We're dragging an existing field from another fieldset\n                insertField({ field, position: dropTarget });\n            } else {\n                // We're dragging a field within the same fieldset\n                moveField({ field, position: dropTarget });\n            }\n            return onDropTarget;\n        }\n\n        if (!fieldType) {\n            return null;\n        }\n        const plugin = getFieldPlugin(fieldType);\n        if (!plugin) {\n            return null;\n        }\n\n        const fieldData = plugin.field.createField() as CmsModelField;\n\n        if (plugin.field.canEditSettings !== false) {\n            editField(fieldData);\n            setState(state => ({\n                ...state,\n                dropTarget\n            }));\n        } else {\n            insertField({ field: fieldData, position: dropTarget });\n        }\n        return null;\n    }, []);\n\n    const onEndDrag: OnEndDragCallable<DragObject, DropResult> = (\n        { type, field, fields },\n        monitor\n    ) => {\n        if (!monitor.didDrop()) {\n            return;\n        }\n\n        // Check if we dropped outside of the source fieldset, and if yes, remove the field from the original parent.\n        const monitorResult = monitor.getDropResult();\n        const parentId = parent ? parent.fieldId : null;\n        if (monitorResult?.dropTarget === parentId) {\n            return;\n        }\n\n        const removeFields = type === \"row\" ? fields || [] : field ? [field] : [];\n        removeFields.forEach(field => deleteField(field));\n    };\n\n    const getFieldsInLayout: GetFieldsInLayoutCallable = () => {\n        // Replace every field ID with actual field object.\n        return state.layout\n            .filter(arr => arr.length)\n            .map(row => {\n                return row\n                    .map(id => {\n                        return getField({ id });\n                    })\n                    .filter(Boolean);\n            })\n            .filter(row => {\n                return row.length > 0;\n            }) as CmsModelField[][];\n    };\n\n    /**\n     * Return field plugin.\n     */\n    const getFieldPlugin: GetFieldPluginCallable = type => {\n        return plugins\n            .byType<CmsEditorFieldTypePlugin>(\"cms-editor-field-type\")\n            .find(plugin => plugin.field.type === type);\n    };\n\n    const getFieldRendererPlugin: GetFieldRendererCallable = name => {\n        return plugins\n            .byType<CmsEditorFieldRendererPlugin>(\"cms-editor-field-renderer\")\n            .find(plugin => plugin.renderer.rendererName === name);\n    };\n\n    /**\n     * Checks if field of given type already exists in the list of fields.\n     */\n    const getField: GetFieldCallable = query => {\n        return state.fields.find(field => {\n            for (const key in query) {\n                if (!(key in field)) {\n                    return false;\n                }\n\n                if (field[key as keyof typeof field] !== query[key as keyof typeof query]) {\n                    return false;\n                }\n            }\n\n            return true;\n        });\n    };\n\n    /**\n     * Inserts a new field into the target position.\n     */\n    const insertField: InsertFieldCallable = ({ field, position }) => {\n        if (!field.id) {\n            field.id = generateFieldId(layout.flat());\n        }\n\n        if (!field.type) {\n            throw new Error(`Field \"type\" missing.`);\n        }\n\n        const fieldPlugin = getFieldPlugin(field.type);\n        if (!fieldPlugin) {\n            throw new Error(`No plugin found for field type \"${field.type}\".`);\n        }\n\n        setState(prev => {\n            const next: State = {\n                ...prev,\n                fields: (prev.fields || []).concat(field)\n            };\n\n            // Move field to position where it was dropped.\n            return utils.moveField({ field, position, data: next });\n        });\n    };\n\n    /**\n     * Moves field to the given target position.\n     */\n    const moveField: MoveFieldCallable = ({ field, position }) => {\n        setState(data => {\n            return utils.moveField<State>({ field, position, data });\n        });\n    };\n\n    /**\n     * Moves row to a destination row.\n     */\n    const moveRow: MoveRowCallable = (source, destination) => {\n        setState(data => {\n            return utils.moveRow({ data, source, destination });\n        });\n    };\n\n    /**\n     * Updates field.\n     */\n    const updateField: UpdateFieldCallable = field => {\n        setState(data => {\n            for (let i = 0; i < data.fields.length; i++) {\n                if (data.fields[i].id === field.id) {\n                    return dot.set(data, `fields.${i}`, field);\n                }\n            }\n            return data;\n        });\n    };\n\n    /**\n     * Deletes a field (both from the list of field and the layout).\n     */\n    const deleteField: DeleteFieldCallable = field => {\n        setState(data => {\n            return utils.deleteField({ field, data });\n        });\n    };\n\n    const noConflict: NoConflictCallable = useCallback(\n        (isVisible?: IsVisibleCallable) => item => {\n            const sameParent = item.parent === onDropTarget.dropTarget;\n            const draggedFields: string[] = [];\n            switch (item.type) {\n                case \"row\":\n                    (item.fields || []).forEach(field => draggedFields.push(field.fieldId));\n                    break;\n                case \"field\":\n                    if (!item.field) {\n                        break;\n                    }\n                    draggedFields.push(item.field.fieldId);\n                    break;\n                default:\n                    break;\n            }\n\n            if (\n                draggedFields.length &&\n                !sameParent &&\n                fields.some(field => draggedFields.includes(field.fieldId))\n            ) {\n                return false;\n            }\n\n            return typeof isVisible === \"function\" ? isVisible(item) : true;\n        },\n        [fields.map(f => f.fieldId).join(\".\")]\n    );\n\n    const value: FieldEditorContext = {\n        parent,\n        depth,\n        getFieldsInLayout,\n        getFieldPlugin,\n        getFieldRendererPlugin,\n        getField,\n        editField,\n        field: state.field,\n        dropTarget: state.dropTarget,\n        onFieldDrop,\n        onEndDrag,\n        insertField,\n        moveField,\n        moveRow,\n        updateField,\n        deleteField,\n        fields: getFieldsInLayout(),\n        noConflict,\n        layout: state.layout\n    };\n\n    return <FieldEditorContext.Provider value={value}>{children}</FieldEditorContext.Provider>;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +1,2 @@
 export { FieldEditor } from "./FieldEditor";
-export { useFieldEditor } from "./useFieldEditor";
+export { useModelFieldEditor } from "./useModelFieldEditor";

package/admin/components/FieldEditor/index.js

@@ -1,2 +1,4 @@
 export { FieldEditor } from "./FieldEditor";
-export { useFieldEditor } from "./useFieldEditor";
+export { useModelFieldEditor } from "./useModelFieldEditor";
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["FieldEditor","useModelFieldEditor"],"sources":["index.ts"],"sourcesContent":["export { FieldEditor } from \"./FieldEditor\";\nexport { useModelFieldEditor } from \"./useModelFieldEditor\";\n"],"mappings":"AAAA,SAASA,WAAW;AACpB,SAASC,mBAAmB","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import { FieldEditorContext } from "./FieldEditorContext";
+export declare function useModelFieldEditor(): FieldEditorContext;

package/admin/components/FieldEditor/useModelFieldEditor.js

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { FieldEditorContext } from "./FieldEditorContext";
+export function useModelFieldEditor() {
+  const context = useContext(FieldEditorContext);
+  if (!context) {
+    throw Error(`FieldEditorContext is missing in the component tree. Are you useing the "useFieldEditor()" hook in the right place?`);
+  }
+  return context;
+}
+
+//# sourceMappingURL=useModelFieldEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useContext","FieldEditorContext","useModelFieldEditor","context","Error"],"sources":["useModelFieldEditor.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { FieldEditorContext } from \"./FieldEditorContext\";\n\nexport function useModelFieldEditor() {\n    const context = useContext(FieldEditorContext);\n    if (!context) {\n        throw Error(\n            `FieldEditorContext is missing in the component tree. Are you useing the \"useFieldEditor()\" hook in the right place?`\n        );\n    }\n\n    return context;\n}\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,kBAAkB;AAE3B,OAAO,SAASC,mBAAmBA,CAAA,EAAG;EAClC,MAAMC,OAAO,GAAGH,UAAU,CAACC,kBAAkB,CAAC;EAC9C,IAAI,CAACE,OAAO,EAAE;IACV,MAAMC,KAAK,CACP,qHACJ,CAAC;EACL;EAEA,OAAOD,OAAO;AAClB","ignoreList":[]}

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

@@ -1,10 +1,8 @@
-import { CmsEditorField, CmsEditorFieldsLayout } from "../../../../types";
-interface Data {
-    fields: CmsEditorField[];
-    layout: CmsEditorFieldsLayout;
+import type { CmsModelField, CmsModel } from "../../../../types";
+type DeleteFieldParamsData = Pick<CmsModel, "fields" | "layout">;
+interface DeleteFieldParams {
+    field: Pick<CmsModelField, "id">;
+    data: DeleteFieldParamsData;
 }
-declare const _default: ({ field, data }: {
-    field: CmsEditorField;
-    data: Data;
-}) => any;
+declare const _default: (params: DeleteFieldParams) => any;
 export default _default;