@webiny/app-headless-cms 0.0.0-unstable.6e5425ee89 → 0.0.0-unstable.7f63ea0744

package/HeadlessCMS.js

@@ -16,6 +16,7 @@ var _apiInformation = _interopRequireDefault(require("./admin/plugins/apiInforma
 var _ContentEntriesModule = require("./admin/views/contentEntries/experiment/ContentEntriesModule");
 var _DefaultOnEntryDelete = require("./admin/plugins/entry/DefaultOnEntryDelete");
 var _DefaultOnEntryPublish = require("./admin/plugins/entry/DefaultOnEntryPublish");
+var _allPlugins = _interopRequireDefault(require("./allPlugins"));
 var createHeadlessCMSProvider = function createHeadlessCMSProvider(createApolloClient) {
   return function (Component) {
     return function HeadlessCMSProvider(_ref) {
@@ -29,6 +30,7 @@ var createHeadlessCMSProvider = function createHeadlessCMSProvider(createApolloC
 var HeadlessCMSExtension = function HeadlessCMSExtension(_ref2) {
   var createApolloClient = _ref2.createApolloClient;
   _plugins.plugins.register(_apiInformation.default);
+  _plugins.plugins.register(_allPlugins.default);
   _plugins.plugins.register(new _app.ApolloCacheObjectIdPlugin(function (obj) {
     if (obj.__typename === "CmsContentModelField") {
       return null;

package/HeadlessCMS.js.map

@@ -1 +1 @@
-{"version":3,"names":["createHeadlessCMSProvider","createApolloClient","Component","HeadlessCMSProvider","children","HeadlessCMSExtension","plugins","register","apiInformation","ApolloCacheObjectIdPlugin","obj","__typename","undefined","HeadlessCMS","memo"],"sources":["HeadlessCMS.tsx"],"sourcesContent":["import React, { Fragment, memo } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Plugins, Provider } from \"@webiny/app-admin\";\nimport { ApolloCacheObjectIdPlugin } from \"@webiny/app\";\nimport { ApolloClient } from \"apollo-client\";\nimport { CmsProvider } from \"./admin/contexts/Cms\";\nimport { CmsMenuLoader } from \"~/admin/menus/CmsMenuLoader\";\nimport apiInformation from \"./admin/plugins/apiInformation\";\nimport { ContentEntriesModule } from \"./admin/views/contentEntries/experiment/ContentEntriesModule\";\nimport { DefaultOnEntryDelete } from \"./admin/plugins/entry/DefaultOnEntryDelete\";\nimport { DefaultOnEntryPublish } from \"~/admin/plugins/entry/DefaultOnEntryPublish\";\n\nconst createHeadlessCMSProvider =\n    (createApolloClient: CreateApolloClient) =>\n    (Component: React.FC): React.FC => {\n        return function HeadlessCMSProvider({ children }) {\n            return (\n                <CmsProvider createApolloClient={createApolloClient}>\n                    <Component>{children}</Component>\n                </CmsProvider>\n            );\n        };\n    };\n\ninterface CreateApolloClientParams {\n    uri: string;\n}\ninterface CreateApolloClient {\n    (params: CreateApolloClientParams): ApolloClient<any>;\n}\n\nexport interface HeadlessCMSProps {\n    createApolloClient: CreateApolloClient;\n}\n\nconst HeadlessCMSExtension = ({ createApolloClient }: HeadlessCMSProps) => {\n    plugins.register(apiInformation);\n\n    plugins.register(\n        new ApolloCacheObjectIdPlugin(obj => {\n            if (obj.__typename === \"CmsContentModelField\") {\n                return null;\n            }\n\n            return undefined;\n        })\n    );\n\n    return (\n        <Fragment>\n            <ContentEntriesModule />\n            <Provider hoc={createHeadlessCMSProvider(createApolloClient)} />\n            <Plugins>\n                <CmsMenuLoader />\n                <DefaultOnEntryDelete />\n                <DefaultOnEntryPublish />\n            </Plugins>\n        </Fragment>\n    );\n};\n\nexport const HeadlessCMS = memo(HeadlessCMSExtension);\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAMA,yBAAyB,GAC3B,SADEA,yBAAyB,CAC1BC,kBAAsC;EAAA,OACvC,UAACC,SAAmB,EAAe;IAC/B,OAAO,SAASC,mBAAmB,OAAe;MAAA,IAAZC,QAAQ,QAARA,QAAQ;MAC1C,oBACI,6BAAC,gBAAW;QAAC,kBAAkB,EAAEH;MAAmB,gBAChD,6BAAC,SAAS,QAAEG,QAAQ,CAAa,CACvB;IAEtB,CAAC;EACL,CAAC;AAAA;AAaL,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoB,QAAiD;EAAA,IAA3CJ,kBAAkB,SAAlBA,kBAAkB;EAC9CK,gBAAO,CAACC,QAAQ,CAACC,uBAAc,CAAC;EAEhCF,gBAAO,CAACC,QAAQ,CACZ,IAAIE,8BAAyB,CAAC,UAAAC,GAAG,EAAI;IACjC,IAAIA,GAAG,CAACC,UAAU,KAAK,sBAAsB,EAAE;MAC3C,OAAO,IAAI;IACf;IAEA,OAAOC,SAAS;EACpB,CAAC,CAAC,CACL;EAED,oBACI,6BAAC,eAAQ,qBACL,6BAAC,0CAAoB,OAAG,eACxB,6BAAC,kBAAQ;IAAC,GAAG,EAAEZ,yBAAyB,CAACC,kBAAkB;EAAE,EAAG,eAChE,6BAAC,iBAAO,qBACJ,6BAAC,4BAAa,OAAG,eACjB,6BAAC,0CAAoB,OAAG,eACxB,6BAAC,4CAAqB,OAAG,CACnB,CACH;AAEnB,CAAC;AAEM,IAAMY,WAAW,gBAAG,IAAAC,WAAI,EAACT,oBAAoB,CAAC;AAAC"}
+{"version":3,"names":["createHeadlessCMSProvider","createApolloClient","Component","HeadlessCMSProvider","children","HeadlessCMSExtension","plugins","register","apiInformation","allPlugins","ApolloCacheObjectIdPlugin","obj","__typename","undefined","HeadlessCMS","memo"],"sources":["HeadlessCMS.tsx"],"sourcesContent":["import React, { Fragment, memo } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Plugins, Provider } from \"@webiny/app-admin\";\nimport { ApolloCacheObjectIdPlugin } from \"@webiny/app\";\nimport { ApolloClient } from \"apollo-client\";\nimport { CmsProvider } from \"./admin/contexts/Cms\";\nimport { CmsMenuLoader } from \"~/admin/menus/CmsMenuLoader\";\nimport apiInformation from \"./admin/plugins/apiInformation\";\nimport { ContentEntriesModule } from \"./admin/views/contentEntries/experiment/ContentEntriesModule\";\nimport { DefaultOnEntryDelete } from \"./admin/plugins/entry/DefaultOnEntryDelete\";\nimport { DefaultOnEntryPublish } from \"~/admin/plugins/entry/DefaultOnEntryPublish\";\nimport allPlugins from \"./allPlugins\";\n\nconst createHeadlessCMSProvider =\n    (createApolloClient: CreateApolloClient) =>\n    (Component: React.FC): React.FC => {\n        return function HeadlessCMSProvider({ children }) {\n            return (\n                <CmsProvider createApolloClient={createApolloClient}>\n                    <Component>{children}</Component>\n                </CmsProvider>\n            );\n        };\n    };\n\ninterface CreateApolloClientParams {\n    uri: string;\n}\ninterface CreateApolloClient {\n    (params: CreateApolloClientParams): ApolloClient<any>;\n}\n\nexport interface HeadlessCMSProps {\n    createApolloClient: CreateApolloClient;\n}\n\nconst HeadlessCMSExtension = ({ createApolloClient }: HeadlessCMSProps) => {\n    plugins.register(apiInformation);\n    plugins.register(allPlugins);\n\n    plugins.register(\n        new ApolloCacheObjectIdPlugin(obj => {\n            if (obj.__typename === \"CmsContentModelField\") {\n                return null;\n            }\n\n            return undefined;\n        })\n    );\n\n    return (\n        <Fragment>\n            <ContentEntriesModule />\n            <Provider hoc={createHeadlessCMSProvider(createApolloClient)} />\n            <Plugins>\n                <CmsMenuLoader />\n                <DefaultOnEntryDelete />\n                <DefaultOnEntryPublish />\n            </Plugins>\n        </Fragment>\n    );\n};\n\nexport const HeadlessCMS = memo(HeadlessCMSExtension);\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAMA,yBAAyB,GAC3B,SADEA,yBAAyB,CAC1BC,kBAAsC;EAAA,OACvC,UAACC,SAAmB,EAAe;IAC/B,OAAO,SAASC,mBAAmB,OAAe;MAAA,IAAZC,QAAQ,QAARA,QAAQ;MAC1C,oBACI,6BAAC,gBAAW;QAAC,kBAAkB,EAAEH;MAAmB,gBAChD,6BAAC,SAAS,QAAEG,QAAQ,CAAa,CACvB;IAEtB,CAAC;EACL,CAAC;AAAA;AAaL,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoB,QAAiD;EAAA,IAA3CJ,kBAAkB,SAAlBA,kBAAkB;EAC9CK,gBAAO,CAACC,QAAQ,CAACC,uBAAc,CAAC;EAChCF,gBAAO,CAACC,QAAQ,CAACE,mBAAU,CAAC;EAE5BH,gBAAO,CAACC,QAAQ,CACZ,IAAIG,8BAAyB,CAAC,UAAAC,GAAG,EAAI;IACjC,IAAIA,GAAG,CAACC,UAAU,KAAK,sBAAsB,EAAE;MAC3C,OAAO,IAAI;IACf;IAEA,OAAOC,SAAS;EACpB,CAAC,CAAC,CACL;EAED,oBACI,6BAAC,eAAQ,qBACL,6BAAC,0CAAoB,OAAG,eACxB,6BAAC,kBAAQ;IAAC,GAAG,EAAEb,yBAAyB,CAACC,kBAAkB;EAAE,EAAG,eAChE,6BAAC,iBAAO,qBACJ,6BAAC,4BAAa,OAAG,eACjB,6BAAC,0CAAoB,OAAG,eACxB,6BAAC,4CAAqB,OAAG,CACnB,CACH;AAEnB,CAAC;AAEM,IAAMa,WAAW,gBAAG,IAAAC,WAAI,EAACV,oBAAoB,CAAC;AAAC"}

package/admin/components/ContentEntryForm/ContentEntryForm.js

@@ -19,6 +19,7 @@ var _useContentEntryForm2 = require("./useContentEntryForm");
 var _Fields = require("./Fields");
 var _reactRouter = require("@webiny/react-router");
 var _appAdmin = require("@webiny/app-admin");
+var _ModelProvider = require("../ModelProvider");
 var _excluded = ["onForm"];
 var FormWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "ejw5gwy0",
@@ -42,7 +43,9 @@ var isDifferent = function isDifferent(value, compare) {
 var ContentEntryForm = function ContentEntryForm(_ref) {
   var onForm = _ref.onForm,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var contentModel = props.contentModel;
+  var formElementRef = (0, _react.useRef)(null);
+  var _useModel = (0, _ModelProvider.useModel)(),
+    model = _useModel.model;
   var _useContentEntryForm = (0, _useContentEntryForm2.useContentEntryForm)(props),
     loading = _useContentEntryForm.loading,
     initialData = _useContentEntryForm.data,
@@ -71,11 +74,17 @@ var ContentEntryForm = function ContentEntryForm(_ref) {
     }
     onForm(ref.current);
   }, []);
+  (0, _react.useEffect)(function () {
+    if (!formElementRef.current) {
+      return;
+    }
+    formElementRef.current.scrollTo(0, 0);
+  }, [initialData.id, formElementRef.current]);
   var formRenderer = _plugins.plugins.byType("cms-content-form-renderer").find(function (pl) {
-    return pl.modelId === contentModel.modelId;
+    return pl.modelId === model.modelId;
   });
   var renderCustomLayout = (0, _react.useCallback)(function (formRenderProps) {
-    var fields = contentModel.fields.reduce(function (acc, field) {
+    var fields = model.fields.reduce(function (acc, field) {
       /**
        * TODO @ts-refactor
        * Figure out type for Bind.
@@ -83,15 +92,15 @@ var ContentEntryForm = function ContentEntryForm(_ref) {
       acc[field.fieldId] = /*#__PURE__*/_react.default.createElement(_RenderFieldElement.default, {
         field: field,
         Bind: formRenderProps.Bind,
-        contentModel: contentModel
+        contentModel: model
       });
       return acc;
     }, {});
     if (!formRenderer) {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Missing form renderer for modelId \"".concat(contentModel.modelId, "\"."));
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Missing form renderer for modelId \"".concat(model.modelId, "\"."));
     }
     return formRenderer.render((0, _objectSpread2.default)((0, _objectSpread2.default)({}, formRenderProps), {}, {
-      contentModel: contentModel,
+      contentModel: model,
       fields: fields,
       /**
        * TODO @ts-refactor
@@ -117,18 +126,21 @@ var ContentEntryForm = function ContentEntryForm(_ref) {
     invalidFields: invalidFields,
     onInvalid: function onInvalid() {
       setIsDirty(true);
-      showSnackbar("You have fields that did not pass the validation. Please check the form.");
+      showSnackbar("Some fields did not pass the validation. Please check the form.");
     }
   }, function (formProps) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouter.Prompt, {
+    return /*#__PURE__*/_react.default.createElement(_ModelProvider.ModelProvider, {
+      model: model
+    }, /*#__PURE__*/_react.default.createElement(_reactRouter.Prompt, {
       when: isDirty,
       message: "There are some unsaved changes! Are you sure you want to navigate away and discard all changes?"
     }), /*#__PURE__*/_react.default.createElement(FormWrapper, {
-      "data-testid": "cms-content-form"
+      "data-testid": "cms-content-form",
+      ref: formElementRef
     }, loading && /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, null), formRenderer ? renderCustomLayout(formProps) : /*#__PURE__*/_react.default.createElement(_Fields.Fields, Object.assign({
-      contentModel: contentModel,
-      fields: contentModel.fields || [],
-      layout: contentModel.layout || []
+      contentModel: model,
+      fields: model.fields || [],
+      layout: model.layout || []
     }, formProps, {
       Bind: formProps.Bind
     }))));

package/admin/components/ContentEntryForm/ContentEntryForm.js.map

@@ -1 +1 @@
-{"version":3,"names":["FormWrapper","styled","height","overflow","omitTypename","key","value","undefined","stringify","JSON","isDifferent","compare","ContentEntryForm","onForm","props","contentModel","useContentEntryForm","loading","initialData","data","onChange","onSubmit","invalidFields","React","useState","isDirty","setIsDirty","useEffect","useSnackbar","showSnackbar","ref","useRef","current","formRenderer","plugins","byType","find","pl","modelId","renderCustomLayout","useCallback","formRenderProps","fields","reduce","acc","field","fieldId","Bind","render","form","different","formProps","layout"],"sources":["ContentEntryForm.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from \"react\";\nimport RenderFieldElement from \"./RenderFieldElement\";\nimport styled from \"@emotion/styled\";\nimport { Form } from \"@webiny/form\";\nimport { FormAPI, FormRenderPropParams } from \"@webiny/form/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { CmsContentFormRendererPlugin } from \"~/types\";\nimport { useContentEntryForm, UseContentEntryFormParams } from \"./useContentEntryForm\";\nimport { Fields } from \"./Fields\";\nimport { Prompt } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin\";\n\nconst FormWrapper = styled(\"div\")({\n    height: \"calc(100vh - 260px)\",\n    overflow: \"auto\"\n});\n\ninterface ContentEntryFormProps extends UseContentEntryFormParams {\n    onForm?: (form: FormAPI) => void;\n}\n\nfunction omitTypename(key: string, value: string): string | undefined {\n    return key === \"__typename\" ? undefined : value;\n}\n\nconst stringify = (value: any): string => {\n    return JSON.stringify(value || {}, omitTypename);\n};\n\nconst isDifferent = (value: any, compare: any): boolean => {\n    if (!value && !compare) {\n        return false;\n    }\n    return stringify(value) !== stringify(compare);\n};\n\nexport const ContentEntryForm: React.FC<ContentEntryFormProps> = ({ onForm, ...props }) => {\n    const { contentModel } = props;\n    const {\n        loading,\n        data: initialData,\n        onChange,\n        onSubmit,\n        invalidFields\n    } = useContentEntryForm(props);\n\n    const [isDirty, setIsDirty] = React.useState<boolean>(false);\n    /**\n     * Reset isDirty when the loaded data changes.\n     */\n    useEffect(() => {\n        if (!isDirty) {\n            return;\n        }\n        setIsDirty(false);\n    }, [initialData]);\n\n    const { showSnackbar } = useSnackbar();\n\n    const ref = useRef<FormAPI | null>(null);\n\n    useEffect(() => {\n        if (typeof onForm !== \"function\" || !ref.current) {\n            return;\n        }\n        onForm(ref.current);\n    }, []);\n\n    const formRenderer = plugins\n        .byType<CmsContentFormRendererPlugin>(\"cms-content-form-renderer\")\n        .find(pl => pl.modelId === contentModel.modelId);\n\n    const renderCustomLayout = useCallback(\n        (formRenderProps: FormRenderPropParams) => {\n            const fields = contentModel.fields.reduce((acc, field) => {\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                acc[field.fieldId] = (\n                    <RenderFieldElement\n                        field={field}\n                        Bind={formRenderProps.Bind as any}\n                        contentModel={contentModel}\n                    />\n                );\n\n                return acc;\n            }, {} as Record<string, React.ReactElement>);\n            if (!formRenderer) {\n                return <>{`Missing form renderer for modelId \"${contentModel.modelId}\".`}</>;\n            }\n            return formRenderer.render({\n                ...formRenderProps,\n                contentModel,\n                fields,\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                Bind: formRenderProps.Bind as any\n            });\n        },\n        [formRenderer]\n    );\n\n    return (\n        <Form\n            onChange={(data, form) => {\n                const different = isDifferent(data, initialData);\n                if (isDirty !== different) {\n                    setIsDirty(different);\n                }\n                return onChange(data, form);\n            }}\n            onSubmit={(data, form) => {\n                setIsDirty(false);\n                return onSubmit(data, form);\n            }}\n            data={initialData}\n            ref={ref}\n            invalidFields={invalidFields}\n            onInvalid={() => {\n                setIsDirty(true);\n                showSnackbar(\n                    \"You have fields that did not pass the validation. Please check the form.\"\n                );\n            }}\n        >\n            {formProps => {\n                return (\n                    <>\n                        <Prompt\n                            when={isDirty}\n                            message={\n                                \"There are some unsaved changes! Are you sure you want to navigate away and discard all changes?\"\n                            }\n                        />\n                        <FormWrapper data-testid={\"cms-content-form\"}>\n                            {loading && <CircularProgress />}\n                            {formRenderer ? (\n                                renderCustomLayout(formProps)\n                            ) : (\n                                <Fields\n                                    contentModel={contentModel}\n                                    fields={contentModel.fields || []}\n                                    layout={contentModel.layout || []}\n                                    {...formProps}\n                                    Bind={formProps.Bind as any}\n                                />\n                            )}\n                        </FormWrapper>\n                    </>\n                );\n            }}\n        </Form>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["FormWrapper","styled","height","overflow","omitTypename","key","value","undefined","stringify","JSON","isDifferent","compare","ContentEntryForm","onForm","props","formElementRef","useRef","useModel","model","useContentEntryForm","loading","initialData","data","onChange","onSubmit","invalidFields","React","useState","isDirty","setIsDirty","useEffect","useSnackbar","showSnackbar","ref","current","scrollTo","id","formRenderer","plugins","byType","find","pl","modelId","renderCustomLayout","useCallback","formRenderProps","fields","reduce","acc","field","fieldId","Bind","render","contentModel","form","different","formProps","layout"],"sources":["ContentEntryForm.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from \"react\";\nimport RenderFieldElement from \"./RenderFieldElement\";\nimport styled from \"@emotion/styled\";\nimport { Form } from \"@webiny/form\";\nimport { FormAPI, FormRenderPropParams } from \"@webiny/form/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { CmsContentFormRendererPlugin } from \"~/types\";\nimport { useContentEntryForm, UseContentEntryFormParams } from \"./useContentEntryForm\";\nimport { Fields } from \"./Fields\";\nimport { Prompt } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { ModelProvider, useModel } from \"~/admin/components/ModelProvider\";\n\nconst FormWrapper = styled(\"div\")({\n    height: \"calc(100vh - 260px)\",\n    overflow: \"auto\"\n});\n\ninterface ContentEntryFormProps extends UseContentEntryFormParams {\n    onForm?: (form: FormAPI) => void;\n}\n\nfunction omitTypename(key: string, value: string): string | undefined {\n    return key === \"__typename\" ? undefined : value;\n}\n\nconst stringify = (value: any): string => {\n    return JSON.stringify(value || {}, omitTypename);\n};\n\nconst isDifferent = (value: any, compare: any): boolean => {\n    if (!value && !compare) {\n        return false;\n    }\n    return stringify(value) !== stringify(compare);\n};\n\nexport const ContentEntryForm: React.FC<ContentEntryFormProps> = ({ onForm, ...props }) => {\n    const formElementRef = useRef<HTMLDivElement>(null);\n    const { model } = useModel();\n    const {\n        loading,\n        data: initialData,\n        onChange,\n        onSubmit,\n        invalidFields\n    } = useContentEntryForm(props);\n\n    const [isDirty, setIsDirty] = React.useState<boolean>(false);\n    /**\n     * Reset isDirty when the loaded data changes.\n     */\n    useEffect(() => {\n        if (!isDirty) {\n            return;\n        }\n        setIsDirty(false);\n    }, [initialData]);\n\n    const { showSnackbar } = useSnackbar();\n\n    const ref = useRef<FormAPI | null>(null);\n\n    useEffect(() => {\n        if (typeof onForm !== \"function\" || !ref.current) {\n            return;\n        }\n        onForm(ref.current);\n    }, []);\n\n    useEffect(() => {\n        if (!formElementRef.current) {\n            return;\n        }\n\n        formElementRef.current.scrollTo(0, 0);\n    }, [initialData.id, formElementRef.current]);\n\n    const formRenderer = plugins\n        .byType<CmsContentFormRendererPlugin>(\"cms-content-form-renderer\")\n        .find(pl => pl.modelId === model.modelId);\n\n    const renderCustomLayout = useCallback(\n        (formRenderProps: FormRenderPropParams) => {\n            const fields = model.fields.reduce((acc, field) => {\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                acc[field.fieldId] = (\n                    <RenderFieldElement\n                        field={field}\n                        Bind={formRenderProps.Bind as any}\n                        contentModel={model}\n                    />\n                );\n\n                return acc;\n            }, {} as Record<string, React.ReactElement>);\n            if (!formRenderer) {\n                return <>{`Missing form renderer for modelId \"${model.modelId}\".`}</>;\n            }\n            return formRenderer.render({\n                ...formRenderProps,\n                contentModel: model,\n                fields,\n                /**\n                 * TODO @ts-refactor\n                 * Figure out type for Bind.\n                 */\n                Bind: formRenderProps.Bind as any\n            });\n        },\n        [formRenderer]\n    );\n\n    return (\n        <Form\n            onChange={(data, form) => {\n                const different = isDifferent(data, initialData);\n                if (isDirty !== different) {\n                    setIsDirty(different);\n                }\n                return onChange(data, form);\n            }}\n            onSubmit={(data, form) => {\n                setIsDirty(false);\n                return onSubmit(data, form);\n            }}\n            data={initialData}\n            ref={ref}\n            invalidFields={invalidFields}\n            onInvalid={() => {\n                setIsDirty(true);\n                showSnackbar(\"Some fields did not pass the validation. Please check the form.\");\n            }}\n        >\n            {formProps => {\n                return (\n                    <ModelProvider model={model}>\n                        <Prompt\n                            when={isDirty}\n                            message={\n                                \"There are some unsaved changes! Are you sure you want to navigate away and discard all changes?\"\n                            }\n                        />\n                        <FormWrapper data-testid={\"cms-content-form\"} ref={formElementRef}>\n                            {loading && <CircularProgress />}\n                            {formRenderer ? (\n                                renderCustomLayout(formProps)\n                            ) : (\n                                <Fields\n                                    contentModel={model}\n                                    fields={model.fields || []}\n                                    layout={model.layout || []}\n                                    {...formProps}\n                                    Bind={formProps.Bind as any}\n                                />\n                            )}\n                        </FormWrapper>\n                    </ModelProvider>\n                );\n            }}\n        </Form>\n    );\n};\n"],"mappings":"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"}

package/admin/components/ContentEntryForm/Fields.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import { CmsEditorContentModel, CmsEditorField, CmsEditorFieldsLayout, BindComponent } from "../../../types";
+import { CmsEditorContentModel, CmsModelField, CmsEditorFieldsLayout, BindComponent } from "../../../types";
 interface FieldsProps {
     Bind: BindComponent;
     contentModel: CmsEditorContentModel;
-    fields: CmsEditorField[];
+    fields: CmsModelField[];
     layout: CmsEditorFieldsLayout;
     gridClassName?: string;
 }

package/admin/components/ContentEntryForm/Fields.js.map

@@ -1 +1 @@
-{"version":3,"names":["getFieldById","fields","id","find","field","Fields","Bind","layout","contentModel","gridClassName","map","row","rowIndex","fieldId","Math","floor","length"],"sources":["Fields.tsx"],"sourcesContent":["import React from \"react\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport RenderFieldElement from \"./RenderFieldElement\";\nimport {\n    CmsEditorContentModel,\n    CmsEditorField,\n    CmsEditorFieldsLayout,\n    BindComponent\n} from \"~/types\";\n\ninterface FieldsProps {\n    Bind: BindComponent;\n    contentModel: CmsEditorContentModel;\n    fields: CmsEditorField[];\n    layout: CmsEditorFieldsLayout;\n    gridClassName?: string;\n}\n\nconst getFieldById = (fields: CmsEditorField[], id: string): CmsEditorField | null => {\n    return fields.find(field => field.id === id) || null;\n};\n\nexport const Fields: React.FC<FieldsProps> = ({\n    Bind,\n    fields,\n    layout,\n    contentModel,\n    gridClassName\n}) => {\n    return (\n        <Grid className={gridClassName}>\n            {layout.map((row, rowIndex) => (\n                <React.Fragment key={rowIndex}>\n                    {row.map(fieldId => (\n                        <Cell span={Math.floor(12 / row.length)} key={fieldId}>\n                            <RenderFieldElement\n                                field={getFieldById(fields, fieldId) as CmsEditorField}\n                                Bind={Bind}\n                                contentModel={contentModel}\n                            />\n                        </Cell>\n                    ))}\n                </React.Fragment>\n            ))}\n        </Grid>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAgBA,IAAMA,YAAY,GAAG,SAAfA,YAAY,CAAIC,MAAwB,EAAEC,EAAU,EAA4B;EAClF,OAAOD,MAAM,CAACE,IAAI,CAAC,UAAAC,KAAK;IAAA,OAAIA,KAAK,CAACF,EAAE,KAAKA,EAAE;EAAA,EAAC,IAAI,IAAI;AACxD,CAAC;AAEM,IAAMG,MAA6B,GAAG,SAAhCA,MAA6B,OAMpC;EAAA,IALFC,IAAI,QAAJA,IAAI;IACJL,MAAM,QAANA,MAAM;IACNM,MAAM,QAANA,MAAM;IACNC,YAAY,QAAZA,YAAY;IACZC,aAAa,QAAbA,aAAa;EAEb,oBACI,6BAAC,UAAI;IAAC,SAAS,EAAEA;EAAc,GAC1BF,MAAM,CAACG,GAAG,CAAC,UAACC,GAAG,EAAEC,QAAQ;IAAA,oBACtB,6BAAC,cAAK,CAAC,QAAQ;MAAC,GAAG,EAAEA;IAAS,GACzBD,GAAG,CAACD,GAAG,CAAC,UAAAG,OAAO;MAAA,oBACZ,6BAAC,UAAI;QAAC,IAAI,EAAEC,IAAI,CAACC,KAAK,CAAC,EAAE,GAAGJ,GAAG,CAACK,MAAM,CAAE;QAAC,GAAG,EAAEH;MAAQ,gBAClD,6BAAC,2BAAkB;QACf,KAAK,EAAEb,YAAY,CAACC,MAAM,EAAEY,OAAO,CAAoB;QACvD,IAAI,EAAEP,IAAK;QACX,YAAY,EAAEE;MAAa,EAC7B,CACC;IAAA,CACV,CAAC,CACW;EAAA,CACpB,CAAC,CACC;AAEf,CAAC;AAAC"}
+{"version":3,"names":["getFieldById","fields","id","find","field","Fields","Bind","layout","contentModel","gridClassName","map","row","rowIndex","fieldId","Math","floor","length"],"sources":["Fields.tsx"],"sourcesContent":["import React from \"react\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport RenderFieldElement from \"./RenderFieldElement\";\nimport {\n    CmsEditorContentModel,\n    CmsModelField,\n    CmsEditorFieldsLayout,\n    BindComponent\n} from \"~/types\";\n\ninterface FieldsProps {\n    Bind: BindComponent;\n    contentModel: CmsEditorContentModel;\n    fields: CmsModelField[];\n    layout: CmsEditorFieldsLayout;\n    gridClassName?: string;\n}\n\nconst getFieldById = (fields: CmsModelField[], id: string): CmsModelField | null => {\n    return fields.find(field => field.id === id) || null;\n};\n\nexport const Fields: React.FC<FieldsProps> = ({\n    Bind,\n    fields,\n    layout,\n    contentModel,\n    gridClassName\n}) => {\n    return (\n        <Grid className={gridClassName}>\n            {layout.map((row, rowIndex) => (\n                <React.Fragment key={rowIndex}>\n                    {row.map(fieldId => (\n                        <Cell span={Math.floor(12 / row.length)} key={fieldId}>\n                            <RenderFieldElement\n                                field={getFieldById(fields, fieldId) as CmsModelField}\n                                Bind={Bind}\n                                contentModel={contentModel}\n                            />\n                        </Cell>\n                    ))}\n                </React.Fragment>\n            ))}\n        </Grid>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAgBA,IAAMA,YAAY,GAAG,SAAfA,YAAY,CAAIC,MAAuB,EAAEC,EAAU,EAA2B;EAChF,OAAOD,MAAM,CAACE,IAAI,CAAC,UAAAC,KAAK;IAAA,OAAIA,KAAK,CAACF,EAAE,KAAKA,EAAE;EAAA,EAAC,IAAI,IAAI;AACxD,CAAC;AAEM,IAAMG,MAA6B,GAAG,SAAhCA,MAA6B,OAMpC;EAAA,IALFC,IAAI,QAAJA,IAAI;IACJL,MAAM,QAANA,MAAM;IACNM,MAAM,QAANA,MAAM;IACNC,YAAY,QAAZA,YAAY;IACZC,aAAa,QAAbA,aAAa;EAEb,oBACI,6BAAC,UAAI;IAAC,SAAS,EAAEA;EAAc,GAC1BF,MAAM,CAACG,GAAG,CAAC,UAACC,GAAG,EAAEC,QAAQ;IAAA,oBACtB,6BAAC,cAAK,CAAC,QAAQ;MAAC,GAAG,EAAEA;IAAS,GACzBD,GAAG,CAACD,GAAG,CAAC,UAAAG,OAAO;MAAA,oBACZ,6BAAC,UAAI;QAAC,IAAI,EAAEC,IAAI,CAACC,KAAK,CAAC,EAAE,GAAGJ,GAAG,CAACK,MAAM,CAAE;QAAC,GAAG,EAAEH;MAAQ,gBAClD,6BAAC,2BAAkB;QACf,KAAK,EAAEb,YAAY,CAACC,MAAM,EAAEY,OAAO,CAAmB;QACtD,IAAI,EAAEP,IAAK;QACX,YAAY,EAAEE;MAAa,EAC7B,CACC;IAAA,CACV,CAAC,CACW;EAAA,CACpB,CAAC,CACC;AAEf,CAAC;AAAC"}

package/admin/components/ContentEntryForm/RenderFieldElement.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { CmsEditorField, CmsEditorContentModel, BindComponent } from "../../../types";
+import { CmsModelField, CmsEditorContentModel, BindComponent } from "../../../types";
 interface RenderFieldElementProps {
-    field: CmsEditorField;
+    field: CmsModelField;
     Bind: BindComponent;
     contentModel: CmsEditorContentModel;
 }

package/admin/components/ContentEntryForm/RenderFieldElement.js

@@ -12,6 +12,7 @@ var _i18n = require("@webiny/app/i18n");
 var _Label = _interopRequireDefault(require("./Label"));
 var _useBind = require("./useBind");
 var _useRenderPlugins = require("./useRenderPlugins");
+var _ModelFieldProvider = require("../ModelFieldProvider");
 var _templateObject;
 var t = _i18n.i18n.ns("app-headless-cms/admin/components/content-form");
 var RenderFieldElement = function RenderFieldElement(props) {
@@ -31,12 +32,14 @@ var RenderFieldElement = function RenderFieldElement(props) {
       fieldName: /*#__PURE__*/_react.default.createElement("strong", null, field.fieldId)
     });
   }
-  return renderPlugin.renderer.render({
+  return /*#__PURE__*/_react.default.createElement(_ModelFieldProvider.ModelFieldProvider, {
+    field: field
+  }, renderPlugin.renderer.render({
     field: field,
     getBind: getBind,
     Label: _Label.default,
     contentModel: contentModel
-  });
+  }));
 };
 var _default = RenderFieldElement;
 exports.default = _default;

package/admin/components/ContentEntryForm/RenderFieldElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","RenderFieldElement","props","renderPlugins","useRenderPlugins","field","Bind","contentModel","getBind","useBind","renderPlugin","find","plugin","renderer","rendererName","get","fieldName","fieldId","render","Label"],"sources":["RenderFieldElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsEditorField, CmsEditorContentModel, BindComponent } from \"~/types\";\nimport get from \"lodash/get\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport Label from \"./Label\";\nimport { useBind } from \"./useBind\";\nimport { useRenderPlugins } from \"./useRenderPlugins\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/content-form\");\n\ninterface RenderFieldElementProps {\n    field: CmsEditorField;\n    Bind: BindComponent;\n    contentModel: CmsEditorContentModel;\n}\nconst RenderFieldElement: React.FC<RenderFieldElementProps> = props => {\n    const renderPlugins = useRenderPlugins();\n    const { field, Bind, contentModel } = props;\n    const getBind = useBind({ Bind, field });\n\n    const renderPlugin = renderPlugins.find(\n        plugin => plugin.renderer.rendererName === get(field, \"renderer.name\")\n    );\n\n    if (!renderPlugin) {\n        return t`Cannot render \"{fieldName}\" field - field renderer missing.`({\n            fieldName: <strong>{field.fieldId}</strong>\n        });\n    }\n\n    return renderPlugin.renderer.render({ field, getBind, Label, contentModel });\n};\n\nexport default RenderFieldElement;\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AAAsD;AAEtD,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,gDAAgD,CAAC;AAOnE,IAAMC,kBAAqD,GAAG,SAAxDA,kBAAqD,CAAGC,KAAK,EAAI;EACnE,IAAMC,aAAa,GAAG,IAAAC,kCAAgB,GAAE;EACxC,IAAQC,KAAK,GAAyBH,KAAK,CAAnCG,KAAK;IAAEC,IAAI,GAAmBJ,KAAK,CAA5BI,IAAI;IAAEC,YAAY,GAAKL,KAAK,CAAtBK,YAAY;EACjC,IAAMC,OAAO,GAAG,IAAAC,gBAAO,EAAC;IAAEH,IAAI,EAAJA,IAAI;IAAED,KAAK,EAALA;EAAM,CAAC,CAAC;EAExC,IAAMK,YAAY,GAAGP,aAAa,CAACQ,IAAI,CACnC,UAAAC,MAAM;IAAA,OAAIA,MAAM,CAACC,QAAQ,CAACC,YAAY,KAAK,IAAAC,YAAG,EAACV,KAAK,EAAE,eAAe,CAAC;EAAA,EACzE;EAED,IAAI,CAACK,YAAY,EAAE;IACf,OAAOZ,CAAC,iJAA8D;MAClEkB,SAAS,eAAE,6CAASX,KAAK,CAACY,OAAO;IACrC,CAAC,CAAC;EACN;EAEA,OAAOP,YAAY,CAACG,QAAQ,CAACK,MAAM,CAAC;IAAEb,KAAK,EAALA,KAAK;IAAEG,OAAO,EAAPA,OAAO;IAAEW,KAAK,EAALA,cAAK;IAAEZ,YAAY,EAAZA;EAAa,CAAC,CAAC;AAChF,CAAC;AAAC,eAEaN,kBAAkB;AAAA"}
+{"version":3,"names":["t","i18n","ns","RenderFieldElement","props","renderPlugins","useRenderPlugins","field","Bind","contentModel","getBind","useBind","renderPlugin","find","plugin","renderer","rendererName","get","fieldName","fieldId","render","Label"],"sources":["RenderFieldElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsModelField, CmsEditorContentModel, BindComponent } from \"~/types\";\nimport get from \"lodash/get\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport Label from \"./Label\";\nimport { useBind } from \"./useBind\";\nimport { useRenderPlugins } from \"./useRenderPlugins\";\nimport { ModelFieldProvider } from \"../ModelFieldProvider\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/content-form\");\n\ninterface RenderFieldElementProps {\n    field: CmsModelField;\n    Bind: BindComponent;\n    contentModel: CmsEditorContentModel;\n}\n\nconst RenderFieldElement: React.FC<RenderFieldElementProps> = props => {\n    const renderPlugins = useRenderPlugins();\n    const { field, Bind, contentModel } = props;\n    const getBind = useBind({ Bind, field });\n\n    const renderPlugin = renderPlugins.find(\n        plugin => plugin.renderer.rendererName === get(field, \"renderer.name\")\n    );\n\n    if (!renderPlugin) {\n        return t`Cannot render \"{fieldName}\" field - field renderer missing.`({\n            fieldName: <strong>{field.fieldId}</strong>\n        });\n    }\n\n    return (\n        <ModelFieldProvider field={field}>\n            {renderPlugin.renderer.render({ field, getBind, Label, contentModel })}\n        </ModelFieldProvider>\n    );\n};\n\nexport default RenderFieldElement;\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AAA2D;AAE3D,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,gDAAgD,CAAC;AAQnE,IAAMC,kBAAqD,GAAG,SAAxDA,kBAAqD,CAAGC,KAAK,EAAI;EACnE,IAAMC,aAAa,GAAG,IAAAC,kCAAgB,GAAE;EACxC,IAAQC,KAAK,GAAyBH,KAAK,CAAnCG,KAAK;IAAEC,IAAI,GAAmBJ,KAAK,CAA5BI,IAAI;IAAEC,YAAY,GAAKL,KAAK,CAAtBK,YAAY;EACjC,IAAMC,OAAO,GAAG,IAAAC,gBAAO,EAAC;IAAEH,IAAI,EAAJA,IAAI;IAAED,KAAK,EAALA;EAAM,CAAC,CAAC;EAExC,IAAMK,YAAY,GAAGP,aAAa,CAACQ,IAAI,CACnC,UAAAC,MAAM;IAAA,OAAIA,MAAM,CAACC,QAAQ,CAACC,YAAY,KAAK,IAAAC,YAAG,EAACV,KAAK,EAAE,eAAe,CAAC;EAAA,EACzE;EAED,IAAI,CAACK,YAAY,EAAE;IACf,OAAOZ,CAAC,iJAA8D;MAClEkB,SAAS,eAAE,6CAASX,KAAK,CAACY,OAAO;IACrC,CAAC,CAAC;EACN;EAEA,oBACI,6BAAC,sCAAkB;IAAC,KAAK,EAAEZ;EAAM,GAC5BK,YAAY,CAACG,QAAQ,CAACK,MAAM,CAAC;IAAEb,KAAK,EAALA,KAAK;IAAEG,OAAO,EAAPA,OAAO;IAAEW,KAAK,EAALA,cAAK;IAAEZ,YAAY,EAAZA;EAAa,CAAC,CAAC,CACrD;AAE7B,CAAC;AAAC,eAEaN,kBAAkB;AAAA"}

package/admin/components/ContentEntryForm/functions/getValue.d.ts

@@ -1,8 +1,8 @@
-import { CmsEditorField } from "../../../../types";
+import { CmsModelField } from "../../../../types";
 import { BindComponentRenderProp } from "@webiny/form";
 interface GetValueParams {
     bind: BindComponentRenderProp;
-    field: Pick<CmsEditorField, "multipleValues">;
+    field: Pick<CmsModelField, "multipleValues">;
     index: number;
 }
 export declare const getValue: (params: GetValueParams) => string;

package/admin/components/ContentEntryForm/functions/getValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["getValue","params","bind","field","index","value","multipleValues","Array","isArray"],"sources":["getValue.ts"],"sourcesContent":["import { CmsEditorField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\ninterface GetValueParams {\n    bind: BindComponentRenderProp;\n    field: Pick<CmsEditorField, \"multipleValues\">;\n    index: number;\n}\nexport const getValue = (params: GetValueParams): string => {\n    const { bind, field, index } = params;\n    let value = bind.value || null;\n\n    if (field.multipleValues) {\n        if (!Array.isArray(value)) {\n            value = [];\n        }\n\n        if (index >= 0) {\n            return value[index] || null;\n        }\n\n        return value;\n    }\n\n    return value;\n};\n"],"mappings":";;;;;;AAQO,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,MAAsB,EAAa;EACxD,IAAQC,IAAI,GAAmBD,MAAM,CAA7BC,IAAI;IAAEC,KAAK,GAAYF,MAAM,CAAvBE,KAAK;IAAEC,KAAK,GAAKH,MAAM,CAAhBG,KAAK;EAC1B,IAAIC,KAAK,GAAGH,IAAI,CAACG,KAAK,IAAI,IAAI;EAE9B,IAAIF,KAAK,CAACG,cAAc,EAAE;IACtB,IAAI,CAACC,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,EAAE;MACvBA,KAAK,GAAG,EAAE;IACd;IAEA,IAAID,KAAK,IAAI,CAAC,EAAE;MACZ,OAAOC,KAAK,CAACD,KAAK,CAAC,IAAI,IAAI;IAC/B;IAEA,OAAOC,KAAK;EAChB;EAEA,OAAOA,KAAK;AAChB,CAAC;AAAC"}
+{"version":3,"names":["getValue","params","bind","field","index","value","multipleValues","Array","isArray"],"sources":["getValue.ts"],"sourcesContent":["import { CmsModelField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\ninterface GetValueParams {\n    bind: BindComponentRenderProp;\n    field: Pick<CmsModelField, \"multipleValues\">;\n    index: number;\n}\nexport const getValue = (params: GetValueParams): string => {\n    const { bind, field, index } = params;\n    let value = bind.value || null;\n\n    if (field.multipleValues) {\n        if (!Array.isArray(value)) {\n            value = [];\n        }\n\n        if (index >= 0) {\n            return value[index] || null;\n        }\n\n        return value;\n    }\n\n    return value;\n};\n"],"mappings":";;;;;;AAQO,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,MAAsB,EAAa;EACxD,IAAQC,IAAI,GAAmBD,MAAM,CAA7BC,IAAI;IAAEC,KAAK,GAAYF,MAAM,CAAvBE,KAAK;IAAEC,KAAK,GAAKH,MAAM,CAAhBG,KAAK;EAC1B,IAAIC,KAAK,GAAGH,IAAI,CAACG,KAAK,IAAI,IAAI;EAE9B,IAAIF,KAAK,CAACG,cAAc,EAAE;IACtB,IAAI,CAACC,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,EAAE;MACvBA,KAAK,GAAG,EAAE;IACd;IAEA,IAAID,KAAK,IAAI,CAAC,EAAE;MACZ,OAAOC,KAAK,CAACD,KAAK,CAAC,IAAI,IAAI;IAC/B;IAEA,OAAOC,KAAK;EAChB;EAEA,OAAOA,KAAK;AAChB,CAAC;AAAC"}

package/admin/components/ContentEntryForm/functions/setValue.d.ts

@@ -1,9 +1,9 @@
-import { CmsEditorField } from "../../../../types";
+import { CmsModelField } from "../../../../types";
 import { BindComponentRenderProp } from "@webiny/form";
 interface setValueParams {
     value: string[];
     bind: BindComponentRenderProp;
-    field: Pick<CmsEditorField, "multipleValues">;
+    field: Pick<CmsModelField, "multipleValues">;
     index: number;
 }
 export declare const setValue: (params: setValueParams) => void;

package/admin/components/ContentEntryForm/functions/setValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["setValue","params","value","bind","field","index","newValue","multipleValues","onChange"],"sources":["setValue.ts"],"sourcesContent":["import { CmsEditorField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\ninterface setValueParams {\n    value: string[];\n    bind: BindComponentRenderProp;\n    field: Pick<CmsEditorField, \"multipleValues\">;\n    index: number;\n}\nexport const setValue = (params: setValueParams): void => {\n    const { value, bind, field, index } = params;\n    let newValue = field.multipleValues ? [...(bind.value || [])] : bind.value;\n\n    if (field.multipleValues) {\n        if (index >= 0) {\n            newValue[index] = value;\n        } else {\n            newValue = value;\n        }\n    } else {\n        newValue = value;\n    }\n\n    bind.onChange(newValue);\n};\n"],"mappings":";;;;;;;;AASO,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,MAAsB,EAAW;EACtD,IAAQC,KAAK,GAAyBD,MAAM,CAApCC,KAAK;IAAEC,IAAI,GAAmBF,MAAM,CAA7BE,IAAI;IAAEC,KAAK,GAAYH,MAAM,CAAvBG,KAAK;IAAEC,KAAK,GAAKJ,MAAM,CAAhBI,KAAK;EACjC,IAAIC,QAAQ,GAAGF,KAAK,CAACG,cAAc,oCAAQJ,IAAI,CAACD,KAAK,IAAI,EAAE,IAAKC,IAAI,CAACD,KAAK;EAE1E,IAAIE,KAAK,CAACG,cAAc,EAAE;IACtB,IAAIF,KAAK,IAAI,CAAC,EAAE;MACZC,QAAQ,CAACD,KAAK,CAAC,GAAGH,KAAK;IAC3B,CAAC,MAAM;MACHI,QAAQ,GAAGJ,KAAK;IACpB;EACJ,CAAC,MAAM;IACHI,QAAQ,GAAGJ,KAAK;EACpB;EAEAC,IAAI,CAACK,QAAQ,CAACF,QAAQ,CAAC;AAC3B,CAAC;AAAC"}
+{"version":3,"names":["setValue","params","value","bind","field","index","newValue","multipleValues","onChange"],"sources":["setValue.ts"],"sourcesContent":["import { CmsModelField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\ninterface setValueParams {\n    value: string[];\n    bind: BindComponentRenderProp;\n    field: Pick<CmsModelField, \"multipleValues\">;\n    index: number;\n}\nexport const setValue = (params: setValueParams): void => {\n    const { value, bind, field, index } = params;\n    let newValue = field.multipleValues ? [...(bind.value || [])] : bind.value;\n\n    if (field.multipleValues) {\n        if (index >= 0) {\n            newValue[index] = value;\n        } else {\n            newValue = value;\n        }\n    } else {\n        newValue = value;\n    }\n\n    bind.onChange(newValue);\n};\n"],"mappings":";;;;;;;;AASO,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,MAAsB,EAAW;EACtD,IAAQC,KAAK,GAAyBD,MAAM,CAApCC,KAAK;IAAEC,IAAI,GAAmBF,MAAM,CAA7BE,IAAI;IAAEC,KAAK,GAAYH,MAAM,CAAvBG,KAAK;IAAEC,KAAK,GAAKJ,MAAM,CAAhBI,KAAK;EACjC,IAAIC,QAAQ,GAAGF,KAAK,CAACG,cAAc,oCAAQJ,IAAI,CAACD,KAAK,IAAI,EAAE,IAAKC,IAAI,CAACD,KAAK;EAE1E,IAAIE,KAAK,CAACG,cAAc,EAAE;IACtB,IAAIF,KAAK,IAAI,CAAC,EAAE;MACZC,QAAQ,CAACD,KAAK,CAAC,GAAGH,KAAK;IAC3B,CAAC,MAAM;MACHI,QAAQ,GAAGJ,KAAK;IACpB;EACJ,CAAC,MAAM;IACHI,QAAQ,GAAGJ,KAAK;EACpB;EAEAC,IAAI,CAACK,QAAQ,CAACF,QAAQ,CAAC;AAC3B,CAAC;AAAC"}

package/admin/components/ContentEntryForm/useBind.d.ts

@@ -1,6 +1,6 @@
-import { BindComponent, CmsEditorField } from "../../../types";
+import { BindComponent, CmsModelField } from "../../../types";
 interface UseBindProps {
-    field: CmsEditorField;
+    field: CmsModelField;
     Bind: BindComponent;
 }
 export interface GetBindCallable {

package/admin/components/ContentEntryForm/useBind.js

@@ -9,7 +9,7 @@ exports.useBind = useBind;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
-var _createValidators = require("./functions/createValidators");
+var _createValidators = require("../../../utils/createValidators");
 function useBind(_ref) {
   var ParentBind = _ref.Bind,
     field = _ref.field;
@@ -25,8 +25,8 @@ function useBind(_ref) {
     if (memoizedBindComponents.current[name]) {
       return memoizedBindComponents.current[name];
     }
-    var validators = (0, _createValidators.createValidators)(field.validation || []);
-    var listValidators = (0, _createValidators.createValidators)(field.listValidation || []);
+    var validators = (0, _createValidators.createValidators)(field, field.validation || []);
+    var listValidators = (0, _createValidators.createValidators)(field, field.listValidation || []);
     var defaultValue = field.multipleValues ? [] : undefined;
     var isMultipleValues = index === -1 && field.multipleValues;
     var inputValidators = isMultipleValues ? listValidators : validators;
@@ -42,14 +42,16 @@ function useBind(_ref) {
         // Multiple-values functions below.
         var props = (0, _objectSpread2.default)({}, bind);
         if (field.multipleValues && index === -1) {
-          props.appendValue = function (newValue) {
-            bind.onChange([].concat((0, _toConsumableArray2.default)(bind.value), [newValue]));
+          props.appendValue = function (newValue, index) {
+            var currentValue = bind.value || [];
+            var newIndex = index !== null && index !== void 0 ? index : currentValue.length;
+            bind.onChange([].concat((0, _toConsumableArray2.default)(currentValue.slice(0, newIndex)), [newValue], (0, _toConsumableArray2.default)(currentValue.slice(newIndex))));
           };
           props.prependValue = function (newValue) {
-            bind.onChange([newValue].concat((0, _toConsumableArray2.default)(bind.value)));
+            bind.onChange([newValue].concat((0, _toConsumableArray2.default)(bind.value || [])));
           };
           props.appendValues = function (newValues) {
-            bind.onChange([].concat((0, _toConsumableArray2.default)(bind.value), (0, _toConsumableArray2.default)(newValues)));
+            bind.onChange([].concat((0, _toConsumableArray2.default)(bind.value || []), (0, _toConsumableArray2.default)(newValues)));
           };
           props.removeValue = function (index) {
             if (index < 0) {
@@ -90,8 +92,7 @@ function useBind(_ref) {
 
     // We need to keep track of current field name, to support nested fields.
     memoizedBindComponents.current[name].parentName = name;
+    memoizedBindComponents.current[name].displayName = "ParentBind<".concat(name, ">");
     return memoizedBindComponents.current[name];
   }, [field.fieldId]);
-}
-
-// [0,1,2,3,4,5]
+}

package/admin/components/ContentEntryForm/useBind.js.map

@@ -1 +1 @@
-{"version":3,"names":["useBind","ParentBind","Bind","field","memoizedBindComponents","useRef","useCallback","index","parentName","name","fieldId","undefined","filter","v","join","current","validators","createValidators","validation","listValidators","listValidation","defaultValue","multipleValues","isMultipleValues","inputValidators","UseBind","params","childName","childValidators","children","bind","props","appendValue","newValue","onChange","value","prependValue","appendValues","newValues","removeValue","slice","form","validateInput","moveValueUp","splice","moveValueDown","length","cloneElement"],"sources":["useBind.tsx"],"sourcesContent":["import React, { useRef, useCallback, cloneElement } from \"react\";\nimport { createValidators } from \"./functions/createValidators\";\nimport { BindComponent, CmsEditorField } from \"~/types\";\nimport { Validator } from \"@webiny/validation/types\";\n\ninterface UseBindProps {\n    field: CmsEditorField;\n    Bind: BindComponent;\n}\n\ninterface UseBindParams {\n    name?: string;\n    validators?: Validator | Validator[];\n    children?: any;\n}\n\nexport interface GetBindCallable {\n    (index?: number): BindComponent;\n}\n\nexport function useBind({ Bind: ParentBind, field }: UseBindProps) {\n    const memoizedBindComponents = useRef<Record<string, BindComponent>>({});\n\n    return useCallback(\n        (index = -1) => {\n            const { parentName } = ParentBind;\n            // If there's a parent name assigned to the given Bind component, we need to include it in the new field \"name\".\n            // This allows us to have nested fields (like \"object\" field with nested properties)\n            const name = [parentName, field.fieldId, index >= 0 ? index : undefined]\n                .filter(v => v !== undefined)\n                .join(\".\");\n\n            if (memoizedBindComponents.current[name]) {\n                return memoizedBindComponents.current[name];\n            }\n\n            const validators = createValidators(field.validation || []);\n            const listValidators = createValidators(field.listValidation || []);\n            const defaultValue: string[] | undefined = field.multipleValues ? [] : undefined;\n            const isMultipleValues = index === -1 && field.multipleValues;\n            const inputValidators = isMultipleValues ? listValidators : validators;\n\n            memoizedBindComponents.current[name] = function UseBind(params: UseBindParams) {\n                const { name: childName, validators: childValidators, children } = params;\n                return (\n                    <ParentBind\n                        name={childName || name}\n                        validators={childValidators || inputValidators}\n                        defaultValue={index === -1 ? defaultValue : null}\n                    >\n                        {bind => {\n                            // Multiple-values functions below.\n                            const props = { ...bind };\n                            if (field.multipleValues && index === -1) {\n                                props.appendValue = (newValue: string) => {\n                                    bind.onChange([...bind.value, newValue]);\n                                };\n                                props.prependValue = (newValue: string) => {\n                                    bind.onChange([newValue, ...bind.value]);\n                                };\n                                props.appendValues = (newValues: string[]) => {\n                                    bind.onChange([...bind.value, ...newValues]);\n                                };\n\n                                props.removeValue = (index: number) => {\n                                    if (index < 0) {\n                                        return;\n                                    }\n                                    let value = bind.value;\n                                    value = [...value.slice(0, index), ...value.slice(index + 1)];\n\n                                    bind.onChange(value);\n\n                                    // To make sure the field is still valid, we must trigger validation.\n                                    bind.form.validateInput(field.fieldId);\n                                };\n\n                                props.moveValueUp = (index: number) => {\n                                    if (index <= 0) {\n                                        return;\n                                    }\n\n                                    const value = [...bind.value];\n                                    value.splice(index, 1);\n                                    value.splice(index - 1, 0, bind.value[index]);\n\n                                    bind.onChange(value);\n                                };\n\n                                props.moveValueDown = (index: number) => {\n                                    if (index >= bind.value.length) {\n                                        return;\n                                    }\n\n                                    const value = [...bind.value];\n                                    value.splice(index, 1);\n                                    value.splice(index + 1, 0, bind.value[index]);\n\n                                    bind.onChange(value);\n                                };\n                            }\n\n                            if (typeof children === \"function\") {\n                                return children(props);\n                            }\n\n                            return cloneElement(children, props);\n                        }}\n                    </ParentBind>\n                );\n            };\n\n            // We need to keep track of current field name, to support nested fields.\n            memoizedBindComponents.current[name].parentName = name;\n\n            return memoizedBindComponents.current[name];\n        },\n        [field.fieldId]\n    );\n}\n\n// [0,1,2,3,4,5]\n"],"mappings":"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"}
+{"version":3,"names":["useBind","ParentBind","Bind","field","memoizedBindComponents","useRef","useCallback","index","parentName","name","fieldId","undefined","filter","v","join","current","validators","createValidators","validation","listValidators","listValidation","defaultValue","multipleValues","isMultipleValues","inputValidators","UseBind","params","childName","childValidators","children","bind","props","appendValue","newValue","currentValue","value","newIndex","length","onChange","slice","prependValue","appendValues","newValues","removeValue","form","validateInput","moveValueUp","splice","moveValueDown","cloneElement","displayName"],"sources":["useBind.tsx"],"sourcesContent":["import React, { useRef, useCallback, cloneElement } from \"react\";\nimport { createValidators } from \"~/utils/createValidators\";\nimport { BindComponent, CmsModelField } from \"~/types\";\nimport { Validator } from \"@webiny/validation/types\";\n\ninterface UseBindProps {\n    field: CmsModelField;\n    Bind: BindComponent;\n}\n\ninterface UseBindParams {\n    name?: string;\n    validators?: Validator | Validator[];\n    children?: any;\n}\n\nexport interface GetBindCallable {\n    (index?: number): BindComponent;\n}\n\nexport function useBind({ Bind: ParentBind, field }: UseBindProps) {\n    const memoizedBindComponents = useRef<Record<string, BindComponent>>({});\n\n    return useCallback(\n        (index = -1) => {\n            const { parentName } = ParentBind;\n            // If there's a parent name assigned to the given Bind component, we need to include it in the new field \"name\".\n            // This allows us to have nested fields (like \"object\" field with nested properties)\n            const name = [parentName, field.fieldId, index >= 0 ? index : undefined]\n                .filter(v => v !== undefined)\n                .join(\".\");\n\n            if (memoizedBindComponents.current[name]) {\n                return memoizedBindComponents.current[name];\n            }\n\n            const validators = createValidators(field, field.validation || []);\n            const listValidators = createValidators(field, field.listValidation || []);\n            const defaultValue: string[] | undefined = field.multipleValues ? [] : undefined;\n            const isMultipleValues = index === -1 && field.multipleValues;\n            const inputValidators = isMultipleValues ? listValidators : validators;\n\n            memoizedBindComponents.current[name] = function UseBind(params: UseBindParams) {\n                const { name: childName, validators: childValidators, children } = params;\n\n                return (\n                    <ParentBind\n                        name={childName || name}\n                        validators={childValidators || inputValidators}\n                        defaultValue={index === -1 ? defaultValue : null}\n                    >\n                        {bind => {\n                            // Multiple-values functions below.\n                            const props = { ...bind };\n                            if (field.multipleValues && index === -1) {\n                                props.appendValue = (newValue: any, index?: number) => {\n                                    const currentValue = bind.value || [];\n                                    const newIndex = index ?? currentValue.length;\n\n                                    bind.onChange([\n                                        ...currentValue.slice(0, newIndex),\n                                        newValue,\n                                        ...currentValue.slice(newIndex)\n                                    ]);\n                                };\n                                props.prependValue = (newValue: any) => {\n                                    bind.onChange([newValue, ...(bind.value || [])]);\n                                };\n                                props.appendValues = (newValues: any[]) => {\n                                    bind.onChange([...(bind.value || []), ...newValues]);\n                                };\n\n                                props.removeValue = (index: number) => {\n                                    if (index < 0) {\n                                        return;\n                                    }\n                                    let value = bind.value;\n                                    value = [...value.slice(0, index), ...value.slice(index + 1)];\n\n                                    bind.onChange(value);\n\n                                    // To make sure the field is still valid, we must trigger validation.\n                                    bind.form.validateInput(field.fieldId);\n                                };\n\n                                props.moveValueUp = (index: number) => {\n                                    if (index <= 0) {\n                                        return;\n                                    }\n\n                                    const value = [...bind.value];\n                                    value.splice(index, 1);\n                                    value.splice(index - 1, 0, bind.value[index]);\n\n                                    bind.onChange(value);\n                                };\n\n                                props.moveValueDown = (index: number) => {\n                                    if (index >= bind.value.length) {\n                                        return;\n                                    }\n\n                                    const value = [...bind.value];\n                                    value.splice(index, 1);\n                                    value.splice(index + 1, 0, bind.value[index]);\n\n                                    bind.onChange(value);\n                                };\n                            }\n\n                            if (typeof children === \"function\") {\n                                return children(props);\n                            }\n\n                            return cloneElement(children, props);\n                        }}\n                    </ParentBind>\n                );\n            };\n\n            // We need to keep track of current field name, to support nested fields.\n            memoizedBindComponents.current[name].parentName = name;\n            memoizedBindComponents.current[name].displayName = `ParentBind<${name}>`;\n\n            return memoizedBindComponents.current[name];\n        },\n        [field.fieldId]\n    );\n}\n"],"mappings":"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"}

package/admin/components/ContentEntryForm/useContentEntryForm.d.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from "react";
 import { FormOnSubmit } from "@webiny/form";
-import { CmsEditorContentEntry, CmsEditorContentModel, CmsEditorFieldRendererPlugin } from "../../../types";
+import { CmsEditorContentEntry, CmsEditorFieldRendererPlugin } from "../../../types";
 interface UseContentEntryForm {
     data: Record<string, any>;
     loading: boolean;
@@ -11,7 +11,6 @@ interface UseContentEntryForm {
     renderPlugins: CmsEditorFieldRendererPlugin[];
 }
 export interface UseContentEntryFormParams {
-    contentModel: CmsEditorContentModel;
     entry: Partial<CmsEditorContentEntry>;
     onChange?: FormOnSubmit;
     onSubmit?: FormOnSubmit;