@payloadcms/richtext-slate 3.0.0-beta.127 → 3.0.0-beta.129

package/dist/field/elements/upload/Element/UploadDrawer/index.js

@@ -1,8 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import { Drawer, Form, FormSubmit, RenderFields, useAuth, useConfig, useDocumentInfo, useLocale, useModal, useTranslation } from '@payloadcms/ui';
-import { getFormState } from '@payloadcms/ui/shared';
+import { Drawer, EditDepthProvider, Form, FormSubmit, RenderFields, useConfig, useDocumentInfo, useLocale, useModal, useServerFunctions, useTranslation } from '@payloadcms/ui';
 import { deepCopyObject } from 'payload/shared';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Transforms } from 'slate';
@@ -13,13 +12,13 @@ export const UploadDrawer = (props)=>{
     const { drawerSlug, element, fieldProps, relatedCollection, schemaPath } = props;
     const { i18n, t } = useTranslation();
     const { code: locale } = useLocale();
-    const { user } = useAuth();
     const { closeModal } = useModal();
-    const { id, collectionSlug } = useDocumentInfo();
+    const { id, collectionSlug, docPermissions, getDocPreferences, globalSlug } = useDocumentInfo();
+    const { getFormState } = useServerFunctions();
     const [initialState, setInitialState] = useState({});
-    const { field: { richTextComponentMap } } = fieldProps;
+    const { componentMap } = fieldProps;
     const relatedFieldSchemaPath = `${uploadFieldsSchemaPath}.${relatedCollection.slug}`;
-    const fields = richTextComponentMap.get(relatedFieldSchemaPath);
+    const fields = componentMap[relatedFieldSchemaPath];
     const { config } = useConfig();
     const handleUpdateEditData = useCallback((_, data)=>{
         const newNode = {
@@ -40,15 +39,15 @@ export const UploadDrawer = (props)=>{
         const data = deepCopyObject(element?.fields || {});
         const awaitInitialState = async ()=>{
             const { state } = await getFormState({
-                apiRoute: config.routes.api,
-                body: {
-                    id,
-                    collectionSlug,
-                    data,
-                    operation: 'update',
-                    schemaPath: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`
-                },
-                serverURL: config.serverURL
+                id,
+                collectionSlug,
+                data,
+                docPermissions,
+                docPreferences: await getDocPreferences(),
+                globalSlug,
+                operation: 'update',
+                renderAllFields: true,
+                schemaPath: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`
             });
             setInitialState(state);
         };
@@ -56,59 +55,69 @@ export const UploadDrawer = (props)=>{
     }, [
         config,
         element?.fields,
-        user,
         locale,
         t,
         collectionSlug,
         id,
         schemaPath,
-        relatedCollection.slug
+        relatedCollection.slug,
+        getFormState,
+        globalSlug,
+        getDocPreferences,
+        docPermissions
     ]);
     const onChange = useCallback(async ({ formState: prevFormState })=>{
         const { state } = await getFormState({
-            apiRoute: config.routes.api,
-            body: {
-                id,
-                formState: prevFormState,
-                operation: 'update',
-                schemaPath: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`
-            },
-            serverURL: config.serverURL
+            id,
+            collectionSlug,
+            docPermissions,
+            docPreferences: await getDocPreferences(),
+            formState: prevFormState,
+            globalSlug,
+            operation: 'update',
+            schemaPath: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`
         });
         return state;
     }, [
-        config.routes.api,
-        config.serverURL,
-        relatedCollection.slug,
+        getFormState,
+        id,
+        collectionSlug,
+        docPermissions,
+        getDocPreferences,
+        globalSlug,
         schemaPath,
-        id
+        relatedCollection.slug
     ]);
-    return /*#__PURE__*/ _jsx(Drawer, {
-        slug: drawerSlug,
-        title: t('general:editLabel', {
-            label: getTranslation(relatedCollection.labels.singular, i18n)
-        }),
-        children: /*#__PURE__*/ _jsxs(Form, {
-            beforeSubmit: [
-                onChange
-            ],
-            disableValidationOnSubmit: true,
-            initialState: initialState,
-            onChange: [
-                onChange
-            ],
-            onSubmit: handleUpdateEditData,
-            children: [
-                /*#__PURE__*/ _jsx(RenderFields, {
-                    fields: Array.isArray(fields) ? fields : [],
-                    path: "",
-                    readOnly: false,
-                    schemaPath: ""
-                }),
-                /*#__PURE__*/ _jsx(FormSubmit, {
-                    children: t('fields:saveChanges')
-                })
-            ]
+    return /*#__PURE__*/ _jsx(EditDepthProvider, {
+        children: /*#__PURE__*/ _jsx(Drawer, {
+            slug: drawerSlug,
+            title: t('general:editLabel', {
+                label: getTranslation(relatedCollection.labels.singular, i18n)
+            }),
+            children: /*#__PURE__*/ _jsxs(Form, {
+                beforeSubmit: [
+                    onChange
+                ],
+                disableValidationOnSubmit: true,
+                initialState: initialState,
+                onChange: [
+                    onChange
+                ],
+                onSubmit: handleUpdateEditData,
+                children: [
+                    /*#__PURE__*/ _jsx(RenderFields, {
+                        fields: Array.isArray(fields) ? fields : [],
+                        parentIndexPath: "",
+                        parentPath: "",
+                        parentSchemaPath: "",
+                        permissions: {},
+                        readOnly: false
+                    }),
+                    /*#__PURE__*/ _jsx(FormSubmit, {
+                        children: t('fields:saveChanges')
+                    })
+                ]
+            })
         })
     });
 };

package/dist/field/elements/upload/Element/UploadDrawer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/field/elements/upload/Element/UploadDrawer/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Drawer,\n  Form,\n  FormSubmit,\n  RenderFields,\n  useAuth,\n  useConfig,\n  useDocumentInfo,\n  useLocale,\n  useModal,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport { deepCopyObject } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { Transforms } from 'slate'\nimport { ReactEditor, useSlateStatic } from 'slate-react'\n\nimport type { LoadedSlateFieldProps } from '../../../../types.js'\nimport type { UploadElementType } from '../../types.js'\n\nimport { uploadFieldsSchemaPath } from '../../shared.js'\n\nexport const UploadDrawer: React.FC<{\n  readonly drawerSlug: string\n  readonly element: UploadElementType\n  readonly fieldProps: LoadedSlateFieldProps\n  readonly relatedCollection: ClientCollectionConfig\n  readonly schemaPath: string\n}> = (props) => {\n  const editor = useSlateStatic()\n\n  const { drawerSlug, element, fieldProps, relatedCollection, schemaPath } = props\n\n  const { i18n, t } = useTranslation()\n  const { code: locale } = useLocale()\n  const { user } = useAuth()\n  const { closeModal } = useModal()\n  const { id, collectionSlug } = useDocumentInfo()\n  const [initialState, setInitialState] = useState({})\n  const {\n    field: { richTextComponentMap },\n  } = fieldProps\n\n  const relatedFieldSchemaPath = `${uploadFieldsSchemaPath}.${relatedCollection.slug}`\n  const fields = richTextComponentMap.get(relatedFieldSchemaPath)\n\n  const { config } = useConfig()\n\n  const handleUpdateEditData = useCallback(\n    (_, data) => {\n      const newNode = {\n        fields: data,\n      }\n\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(editor, newNode, { at: elementPath })\n      closeModal(drawerSlug)\n    },\n    [closeModal, editor, element, drawerSlug],\n  )\n\n  useEffect(() => {\n    const data = deepCopyObject(element?.fields || {})\n\n    const awaitInitialState = async () => {\n      const { state } = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          collectionSlug,\n          data,\n          operation: 'update',\n          schemaPath: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`,\n        },\n        serverURL: config.serverURL,\n      })\n\n      setInitialState(state)\n    }\n\n    void awaitInitialState()\n  }, [\n    config,\n    element?.fields,\n    user,\n    locale,\n    t,\n    collectionSlug,\n    id,\n    schemaPath,\n    relatedCollection.slug,\n  ])\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    async ({ formState: prevFormState }) => {\n      const { state } = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          formState: prevFormState,\n          operation: 'update',\n          schemaPath: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`,\n        },\n        serverURL: config.serverURL,\n      })\n\n      return state\n    },\n\n    [config.routes.api, config.serverURL, relatedCollection.slug, schemaPath, id],\n  )\n\n  return (\n    <Drawer\n      slug={drawerSlug}\n      title={t('general:editLabel', {\n        label: getTranslation(relatedCollection.labels.singular, i18n),\n      })}\n    >\n      <Form\n        beforeSubmit={[onChange]}\n        disableValidationOnSubmit\n        initialState={initialState}\n        onChange={[onChange]}\n        onSubmit={handleUpdateEditData}\n      >\n        <RenderFields\n          fields={Array.isArray(fields) ? fields : []}\n          path=\"\"\n          readOnly={false}\n          schemaPath=\"\"\n        />\n        <FormSubmit>{t('fields:saveChanges')}</FormSubmit>\n      </Form>\n    </Drawer>\n  )\n}\n"],"names":["getTranslation","Drawer","Form","FormSubmit","RenderFields","useAuth","useConfig","useDocumentInfo","useLocale","useModal","useTranslation","getFormState","deepCopyObject","React","useCallback","useEffect","useState","Transforms","ReactEditor","useSlateStatic","uploadFieldsSchemaPath","UploadDrawer","props","editor","drawerSlug","element","fieldProps","relatedCollection","schemaPath","i18n","t","code","locale","user","closeModal","id","collectionSlug","initialState","setInitialState","field","richTextComponentMap","relatedFieldSchemaPath","slug","fields","get","config","handleUpdateEditData","_","data","newNode","elementPath","findPath","setNodes","at","awaitInitialState","state","apiRoute","routes","api","body","operation","serverURL","onChange","formState","prevFormState","title","label","labels","singular","beforeSubmit","disableValidationOnSubmit","onSubmit","Array","isArray","path","readOnly"],"mappings":"AAAA;;AAKA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SACEC,MAAM,EACNC,IAAI,EACJC,UAAU,EACVC,YAAY,EACZC,OAAO,EACPC,SAAS,EACTC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,cAAc,QACT,iBAAgB;AACvB,SAASC,YAAY,QAAQ,wBAAuB;AACpD,SAASC,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAC/D,SAASC,UAAU,QAAQ,QAAO;AAClC,SAASC,WAAW,EAAEC,cAAc,QAAQ,cAAa;AAKzD,SAASC,sBAAsB,QAAQ,kBAAiB;AAExD,OAAO,MAAMC,eAMR,CAACC;IACJ,MAAMC,SAASJ;IAEf,MAAM,EAAEK,UAAU,EAAEC,OAAO,EAAEC,UAAU,EAAEC,iBAAiB,EAAEC,UAAU,EAAE,GAAGN;IAE3E,MAAM,EAAEO,IAAI,EAAEC,CAAC,EAAE,GAAGpB;IACpB,MAAM,EAAEqB,MAAMC,MAAM,EAAE,GAAGxB;IACzB,MAAM,EAAEyB,IAAI,EAAE,GAAG5B;IACjB,MAAM,EAAE6B,UAAU,EAAE,GAAGzB;IACvB,MAAM,EAAE0B,EAAE,EAAEC,cAAc,EAAE,GAAG7B;IAC/B,MAAM,CAAC8B,cAAcC,gBAAgB,GAAGtB,SAAS,CAAC;IAClD,MAAM,EACJuB,OAAO,EAAEC,oBAAoB,EAAE,EAChC,GAAGd;IAEJ,MAAMe,yBAAyB,CAAC,EAAErB,uBAAuB,CAAC,EAAEO,kBAAkBe,IAAI,CAAC,CAAC;IACpF,MAAMC,SAASH,qBAAqBI,GAAG,CAACH;IAExC,MAAM,EAAEI,MAAM,EAAE,GAAGvC;IAEnB,MAAMwC,uBAAuBhC,YAC3B,CAACiC,GAAGC;QACF,MAAMC,UAAU;YACdN,QAAQK;QACV;QAEA,MAAME,cAAchC,YAAYiC,QAAQ,CAAC5B,QAAQE;QAEjDR,WAAWmC,QAAQ,CAAC7B,QAAQ0B,SAAS;YAAEI,IAAIH;QAAY;QACvDhB,WAAWV;IACb,GACA;QAACU;QAAYX;QAAQE;QAASD;KAAW;IAG3CT,UAAU;QACR,MAAMiC,OAAOpC,eAAea,SAASkB,UAAU,CAAC;QAEhD,MAAMW,oBAAoB;YACxB,MAAM,EAAEC,KAAK,EAAE,GAAG,MAAM5C,aAAa;gBACnC6C,UAAUX,OAAOY,MAAM,CAACC,GAAG;gBAC3BC,MAAM;oBACJxB;oBACAC;oBACAY;oBACAY,WAAW;oBACXhC,YAAY,CAAC,EAAEA,WAAW,CAAC,EAAER,uBAAuB,CAAC,EAAEO,kBAAkBe,IAAI,CAAC,CAAC;gBACjF;gBACAmB,WAAWhB,OAAOgB,SAAS;YAC7B;YAEAvB,gBAAgBiB;QAClB;QAEA,KAAKD;IACP,GAAG;QACDT;QACApB,SAASkB;QACTV;QACAD;QACAF;QACAM;QACAD;QACAP;QACAD,kBAAkBe,IAAI;KACvB;IAED,MAAMoB,WAAqChD,YACzC,OAAO,EAAEiD,WAAWC,aAAa,EAAE;QACjC,MAAM,EAAET,KAAK,EAAE,GAAG,MAAM5C,aAAa;YACnC6C,UAAUX,OAAOY,MAAM,CAACC,GAAG;YAC3BC,MAAM;gBACJxB;gBACA4B,WAAWC;gBACXJ,WAAW;gBACXhC,YAAY,CAAC,EAAEA,WAAW,CAAC,EAAER,uBAAuB,CAAC,EAAEO,kBAAkBe,IAAI,CAAC,CAAC;YACjF;YACAmB,WAAWhB,OAAOgB,SAAS;QAC7B;QAEA,OAAON;IACT,GAEA;QAACV,OAAOY,MAAM,CAACC,GAAG;QAAEb,OAAOgB,SAAS;QAAElC,kBAAkBe,IAAI;QAAEd;QAAYO;KAAG;IAG/E,qBACE,KAAClC;QACCyC,MAAMlB;QACNyC,OAAOnC,EAAE,qBAAqB;YAC5BoC,OAAOlE,eAAe2B,kBAAkBwC,MAAM,CAACC,QAAQ,EAAEvC;QAC3D;kBAEA,cAAA,MAAC3B;YACCmE,cAAc;gBAACP;aAAS;YACxBQ,yBAAyB;YACzBjC,cAAcA;YACdyB,UAAU;gBAACA;aAAS;YACpBS,UAAUzB;;8BAEV,KAAC1C;oBACCuC,QAAQ6B,MAAMC,OAAO,CAAC9B,UAAUA,SAAS,EAAE;oBAC3C+B,MAAK;oBACLC,UAAU;oBACV/C,YAAW;;8BAEb,KAACzB;8BAAY2B,EAAE;;;;;AAIvB,EAAC"}
+{"version":3,"sources":["../../../../../../src/field/elements/upload/Element/UploadDrawer/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Drawer,\n  EditDepthProvider,\n  Form,\n  FormSubmit,\n  RenderFields,\n  useConfig,\n  useDocumentInfo,\n  useLocale,\n  useModal,\n  useServerFunctions,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { deepCopyObject } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { Transforms } from 'slate'\nimport { ReactEditor, useSlateStatic } from 'slate-react'\n\nimport type { LoadedSlateFieldProps } from '../../../../types.js'\nimport type { UploadElementType } from '../../types.js'\n\nimport { uploadFieldsSchemaPath } from '../../shared.js'\n\nexport const UploadDrawer: React.FC<{\n  readonly drawerSlug: string\n  readonly element: UploadElementType\n  readonly fieldProps: LoadedSlateFieldProps\n  readonly relatedCollection: ClientCollectionConfig\n  readonly schemaPath: string\n}> = (props) => {\n  const editor = useSlateStatic()\n\n  const { drawerSlug, element, fieldProps, relatedCollection, schemaPath } = props\n\n  const { i18n, t } = useTranslation()\n  const { code: locale } = useLocale()\n  const { closeModal } = useModal()\n  const { id, collectionSlug, docPermissions, getDocPreferences, globalSlug } = useDocumentInfo()\n\n  const { getFormState } = useServerFunctions()\n\n  const [initialState, setInitialState] = useState({})\n  const { componentMap } = fieldProps\n\n  const relatedFieldSchemaPath = `${uploadFieldsSchemaPath}.${relatedCollection.slug}`\n  const fields = componentMap[relatedFieldSchemaPath]\n\n  const { config } = useConfig()\n\n  const handleUpdateEditData = useCallback(\n    (_, data) => {\n      const newNode = {\n        fields: data,\n      }\n\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(editor, newNode, { at: elementPath })\n      closeModal(drawerSlug)\n    },\n    [closeModal, editor, element, drawerSlug],\n  )\n\n  useEffect(() => {\n    const data = deepCopyObject(element?.fields || {})\n\n    const awaitInitialState = async () => {\n      const { state } = await getFormState({\n        id,\n        collectionSlug,\n        data,\n        docPermissions,\n        docPreferences: await getDocPreferences(),\n        globalSlug,\n        operation: 'update',\n        renderAllFields: true,\n        schemaPath: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`,\n      })\n\n      setInitialState(state)\n    }\n\n    void awaitInitialState()\n  }, [\n    config,\n    element?.fields,\n    locale,\n    t,\n    collectionSlug,\n    id,\n    schemaPath,\n    relatedCollection.slug,\n    getFormState,\n    globalSlug,\n    getDocPreferences,\n    docPermissions,\n  ])\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    async ({ formState: prevFormState }) => {\n      const { state } = await getFormState({\n        id,\n        collectionSlug,\n        docPermissions,\n        docPreferences: await getDocPreferences(),\n        formState: prevFormState,\n        globalSlug,\n        operation: 'update',\n        schemaPath: `${schemaPath}.${uploadFieldsSchemaPath}.${relatedCollection.slug}`,\n      })\n\n      return state\n    },\n\n    [\n      getFormState,\n      id,\n      collectionSlug,\n      docPermissions,\n      getDocPreferences,\n      globalSlug,\n      schemaPath,\n      relatedCollection.slug,\n    ],\n  )\n\n  return (\n    <EditDepthProvider>\n      <Drawer\n        slug={drawerSlug}\n        title={t('general:editLabel', {\n          label: getTranslation(relatedCollection.labels.singular, i18n),\n        })}\n      >\n        <Form\n          beforeSubmit={[onChange]}\n          disableValidationOnSubmit\n          initialState={initialState}\n          onChange={[onChange]}\n          onSubmit={handleUpdateEditData}\n        >\n          <RenderFields\n            fields={Array.isArray(fields) ? fields : []}\n            parentIndexPath=\"\"\n            parentPath=\"\"\n            parentSchemaPath=\"\"\n            permissions={{}}\n            readOnly={false}\n          />\n          <FormSubmit>{t('fields:saveChanges')}</FormSubmit>\n        </Form>\n      </Drawer>\n    </EditDepthProvider>\n  )\n}\n"],"names":["getTranslation","Drawer","EditDepthProvider","Form","FormSubmit","RenderFields","useConfig","useDocumentInfo","useLocale","useModal","useServerFunctions","useTranslation","deepCopyObject","React","useCallback","useEffect","useState","Transforms","ReactEditor","useSlateStatic","uploadFieldsSchemaPath","UploadDrawer","props","editor","drawerSlug","element","fieldProps","relatedCollection","schemaPath","i18n","t","code","locale","closeModal","id","collectionSlug","docPermissions","getDocPreferences","globalSlug","getFormState","initialState","setInitialState","componentMap","relatedFieldSchemaPath","slug","fields","config","handleUpdateEditData","_","data","newNode","elementPath","findPath","setNodes","at","awaitInitialState","state","docPreferences","operation","renderAllFields","onChange","formState","prevFormState","title","label","labels","singular","beforeSubmit","disableValidationOnSubmit","onSubmit","Array","isArray","parentIndexPath","parentPath","parentSchemaPath","permissions","readOnly"],"mappings":"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"}

package/dist/field/elements/upload/Element/index.d.ts

@@ -1,10 +1,4 @@
-import type { FormFieldBase } from 'payload';
 import React from 'react';
 import './index.scss';
-type Props = {
-    name: string;
-    richTextComponentMap: Map<string, React.ReactNode>;
-} & FormFieldBase;
-export declare const UploadElement: (props: Props) => React.ReactNode;
-export {};
+export declare const UploadElement: (props: any) => React.ReactNode;
 //# sourceMappingURL=index.d.ts.map

package/dist/field/elements/upload/Element/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/upload/Element/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAA0B,aAAa,EAAE,MAAM,SAAS,CAAA;AAcpE,OAAO,KAA4C,MAAM,OAAO,CAAA;AAShE,OAAO,cAAc,CAAA;AASrB,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;CACnD,GAAG,aAAa,CAAA;AA0LjB,eAAO,MAAM,aAAa,UAAW,KAAK,KAAG,KAAK,CAAC,SAMlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/upload/Element/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAShE,OAAO,cAAc,CAAA;AAqMrB,eAAO,MAAM,aAAa,UAAW,GAAG,KAAG,KAAK,CAAC,SAMhD,CAAA"}

package/dist/field/elements/upload/Element/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import { Button, DrawerToggler, File, useConfig, useDocumentDrawer, useDrawerSlug, useListDrawer, usePayloadAPI, useTranslation } from '@payloadcms/ui';
 import React, { useCallback, useReducer, useState } from 'react';
@@ -95,7 +95,7 @@ const UploadElementComponent = ({ enabledCollectionSlugs })=>{
         collections
     ]);
     const relatedFieldSchemaPath = `${uploadFieldsSchemaPath}.${relatedCollection.slug}`;
-    const customFieldsMap = fieldProps.field.richTextComponentMap.get(relatedFieldSchemaPath);
+    const customFieldsMap = fieldProps.componentMap[relatedFieldSchemaPath];
     return /*#__PURE__*/ _jsxs("div", {
         className: [
             baseClass,
@@ -127,20 +127,31 @@ const UploadElementComponent = ({ enabledCollectionSlugs })=>{
                                     /*#__PURE__*/ _jsxs("div", {
                                         className: `${baseClass}__actions`,
                                         children: [
-                                            Boolean(customFieldsMap) && /*#__PURE__*/ _jsx(DrawerToggler, {
-                                                className: `${baseClass}__upload-drawer-toggler`,
-                                                disabled: fieldProps?.field?.admin?.readOnly,
-                                                slug: drawerSlug,
-                                                children: /*#__PURE__*/ _jsx(Button, {
-                                                    buttonStyle: "icon-label",
-                                                    el: "div",
-                                                    icon: "edit",
-                                                    onClick: (e)=>{
-                                                        e.preventDefault();
-                                                    },
-                                                    round: true,
-                                                    tooltip: t('fields:editRelationship')
-                                                })
+                                            Boolean(customFieldsMap) && /*#__PURE__*/ _jsxs(_Fragment, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(DrawerToggler, {
+                                                        className: `${baseClass}__upload-drawer-toggler`,
+                                                        disabled: fieldProps?.field?.admin?.readOnly,
+                                                        slug: drawerSlug,
+                                                        children: /*#__PURE__*/ _jsx(Button, {
+                                                            buttonStyle: "icon-label",
+                                                            el: "div",
+                                                            icon: "edit",
+                                                            onClick: (e)=>{
+                                                                e.preventDefault();
+                                                            },
+                                                            round: true,
+                                                            tooltip: t('fields:editRelationship')
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(UploadDrawer, {
+                                                        drawerSlug,
+                                                        element,
+                                                        fieldProps,
+                                                        relatedCollection,
+                                                        schemaPath
+                                                    })
+                                                ]
                                             }),
                                             /*#__PURE__*/ _jsx(ListDrawerToggler, {
                                                 className: `${baseClass}__list-drawer-toggler`,
@@ -192,13 +203,6 @@ const UploadElementComponent = ({ enabledCollectionSlugs })=>{
             }),
             /*#__PURE__*/ _jsx(ListDrawer, {
                 onSelect: swapUpload
-            }),
-            /*#__PURE__*/ _jsx(UploadDrawer, {
-                drawerSlug,
-                element,
-                fieldProps,
-                relatedCollection,
-                schemaPath
             })
         ]
     });

package/dist/field/elements/upload/Element/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/elements/upload/Element/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, FormFieldBase } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  DrawerToggler,\n  File,\n  useConfig,\n  useDocumentDrawer,\n  useDrawerSlug,\n  useListDrawer,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui'\nimport React, { useCallback, useReducer, useState } from 'react'\nimport { Transforms } from 'slate'\nimport { ReactEditor, useFocused, useSelected, useSlateStatic } from 'slate-react'\n\nimport type { UploadElementType } from '../types.js'\n\nimport { useElement } from '../../../providers/ElementProvider.js'\nimport { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js'\nimport { uploadFieldsSchemaPath, uploadName } from '../shared.js'\nimport './index.scss'\nimport { UploadDrawer } from './UploadDrawer/index.js'\n\nconst baseClass = 'rich-text-upload'\n\nconst initialParams = {\n  depth: 0,\n}\n\ntype Props = {\n  name: string\n  richTextComponentMap: Map<string, React.ReactNode>\n} & FormFieldBase\n\nconst UploadElementComponent: React.FC<{ enabledCollectionSlugs?: string[] } & Props> = ({\n  enabledCollectionSlugs,\n}) => {\n  const {\n    attributes,\n    children,\n    element: { relationTo, value },\n    element,\n    fieldProps,\n    schemaPath,\n  } = useElement<UploadElementType>()\n\n  const {\n    config: {\n      collections,\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n  const { i18n, t } = useTranslation()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [relatedCollection, setRelatedCollection] = useState<ClientCollectionConfig>(() =>\n    collections.find((coll) => coll.slug === relationTo),\n  )\n\n  const drawerSlug = useDrawerSlug('upload-drawer')\n\n  const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({\n    collectionSlugs: enabledCollectionSlugs,\n    selectedCollection: relatedCollection.slug,\n  })\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id: value?.id,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  const editor = useSlateStatic()\n  const selected = useSelected()\n  const focused = useFocused()\n\n  // Get the referenced document\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value?.id}`,\n    { initialParams },\n  )\n\n  const thumbnailSRC = data?.thumbnailURL || data?.url\n\n  const removeUpload = useCallback(() => {\n    const elementPath = ReactEditor.findPath(editor, element)\n\n    Transforms.removeNodes(editor, { at: elementPath })\n  }, [editor, element])\n\n  const updateUpload = useCallback(\n    (json) => {\n      const { doc } = json\n\n      const newNode = {\n        fields: doc,\n      }\n\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(editor, newNode, { at: elementPath })\n\n      setParams({\n        ...initialParams,\n        cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed\n      })\n\n      dispatchCacheBust()\n      closeDrawer()\n    },\n    [editor, element, setParams, cacheBust, closeDrawer],\n  )\n\n  const swapUpload = React.useCallback(\n    ({ collectionSlug, docID }) => {\n      const newNode = {\n        type: uploadName,\n        children: [{ text: ' ' }],\n        relationTo: collectionSlug,\n        value: { id: docID },\n      }\n\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      setRelatedCollection(collections.find((coll) => coll.slug === collectionSlug))\n\n      Transforms.setNodes(editor, newNode, { at: elementPath })\n\n      dispatchCacheBust()\n      closeListDrawer()\n    },\n    [closeListDrawer, editor, element, collections],\n  )\n\n  const relatedFieldSchemaPath = `${uploadFieldsSchemaPath}.${relatedCollection.slug}`\n  const customFieldsMap = fieldProps.field.richTextComponentMap.get(relatedFieldSchemaPath)\n\n  return (\n    <div\n      className={[baseClass, selected && focused && `${baseClass}--selected`]\n        .filter(Boolean)\n        .join(' ')}\n      contentEditable={false}\n      {...attributes}\n    >\n      <div className={`${baseClass}__card`}>\n        <div className={`${baseClass}__topRow`}>\n          {/* TODO: migrate to use Thumbnail component */}\n          <div className={`${baseClass}__thumbnail`}>\n            {thumbnailSRC ? <img alt={data?.filename} src={thumbnailSRC} /> : <File />}\n          </div>\n          <div className={`${baseClass}__topRowRightPanel`}>\n            <div className={`${baseClass}__collectionLabel`}>\n              {getTranslation(relatedCollection.labels.singular, i18n)}\n            </div>\n            <div className={`${baseClass}__actions`}>\n              {Boolean(customFieldsMap) && (\n                <DrawerToggler\n                  className={`${baseClass}__upload-drawer-toggler`}\n                  disabled={fieldProps?.field?.admin?.readOnly}\n                  slug={drawerSlug}\n                >\n                  <Button\n                    buttonStyle=\"icon-label\"\n                    el=\"div\"\n                    icon=\"edit\"\n                    onClick={(e) => {\n                      e.preventDefault()\n                    }}\n                    round\n                    tooltip={t('fields:editRelationship')}\n                  />\n                </DrawerToggler>\n              )}\n              <ListDrawerToggler\n                className={`${baseClass}__list-drawer-toggler`}\n                disabled={fieldProps?.field?.admin?.readOnly}\n              >\n                <Button\n                  buttonStyle=\"icon-label\"\n                  disabled={fieldProps?.field?.admin?.readOnly}\n                  el=\"div\"\n                  icon=\"swap\"\n                  onClick={() => {\n                    // do nothing\n                  }}\n                  round\n                  tooltip={t('fields:swapUpload')}\n                />\n              </ListDrawerToggler>\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__removeButton`}\n                disabled={fieldProps?.field?.admin?.readOnly}\n                icon=\"x\"\n                onClick={(e) => {\n                  e.preventDefault()\n                  removeUpload()\n                }}\n                round\n                tooltip={t('fields:removeUpload')}\n              />\n            </div>\n          </div>\n        </div>\n        <div className={`${baseClass}__bottomRow`}>\n          <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n            <strong>{data?.filename}</strong>\n          </DocumentDrawerToggler>\n        </div>\n      </div>\n      {children}\n      {value?.id && <DocumentDrawer onSave={updateUpload} />}\n      <ListDrawer onSelect={swapUpload} />\n      <UploadDrawer {...{ drawerSlug, element, fieldProps, relatedCollection, schemaPath }} />\n    </div>\n  )\n}\n\nexport const UploadElement = (props: Props): React.ReactNode => {\n  return (\n    <EnabledRelationshipsCondition {...props} uploads>\n      <UploadElementComponent {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["getTranslation","Button","DrawerToggler","File","useConfig","useDocumentDrawer","useDrawerSlug","useListDrawer","usePayloadAPI","useTranslation","React","useCallback","useReducer","useState","Transforms","ReactEditor","useFocused","useSelected","useSlateStatic","useElement","EnabledRelationshipsCondition","uploadFieldsSchemaPath","uploadName","UploadDrawer","baseClass","initialParams","depth","UploadElementComponent","enabledCollectionSlugs","attributes","children","element","relationTo","value","fieldProps","schemaPath","config","collections","routes","api","serverURL","i18n","t","cacheBust","dispatchCacheBust","state","relatedCollection","setRelatedCollection","find","coll","slug","drawerSlug","ListDrawer","ListDrawerToggler","closeDrawer","closeListDrawer","collectionSlugs","selectedCollection","DocumentDrawer","DocumentDrawerToggler","id","collectionSlug","editor","selected","focused","data","setParams","thumbnailSRC","thumbnailURL","url","removeUpload","elementPath","findPath","removeNodes","at","updateUpload","json","doc","newNode","fields","setNodes","swapUpload","docID","type","text","relatedFieldSchemaPath","customFieldsMap","field","richTextComponentMap","get","div","className","filter","Boolean","join","contentEditable","img","alt","filename","src","labels","singular","disabled","admin","readOnly","buttonStyle","el","icon","onClick","e","preventDefault","round","tooltip","strong","onSave","onSelect","UploadElement","props","uploads"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/field/elements/upload/Element/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  DrawerToggler,\n  File,\n  useConfig,\n  useDocumentDrawer,\n  useDrawerSlug,\n  useListDrawer,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui'\nimport React, { useCallback, useReducer, useState } from 'react'\nimport { Transforms } from 'slate'\nimport { ReactEditor, useFocused, useSelected, useSlateStatic } from 'slate-react'\n\nimport type { UploadElementType } from '../types.js'\n\nimport { useElement } from '../../../providers/ElementProvider.js'\nimport { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js'\nimport { uploadFieldsSchemaPath, uploadName } from '../shared.js'\nimport './index.scss'\nimport { UploadDrawer } from './UploadDrawer/index.js'\n\nconst baseClass = 'rich-text-upload'\n\nconst initialParams = {\n  depth: 0,\n}\n\nconst UploadElementComponent: React.FC<{ enabledCollectionSlugs?: string[] }> = ({\n  enabledCollectionSlugs,\n}) => {\n  const {\n    attributes,\n    children,\n    element: { relationTo, value },\n    element,\n    fieldProps,\n    schemaPath,\n  } = useElement<UploadElementType>()\n\n  const {\n    config: {\n      collections,\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n  const { i18n, t } = useTranslation()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [relatedCollection, setRelatedCollection] = useState<ClientCollectionConfig>(() =>\n    collections.find((coll) => coll.slug === relationTo),\n  )\n\n  const drawerSlug = useDrawerSlug('upload-drawer')\n\n  const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({\n    collectionSlugs: enabledCollectionSlugs,\n    selectedCollection: relatedCollection.slug,\n  })\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id: value?.id,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  const editor = useSlateStatic()\n  const selected = useSelected()\n  const focused = useFocused()\n\n  // Get the referenced document\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value?.id}`,\n    { initialParams },\n  )\n\n  const thumbnailSRC = data?.thumbnailURL || data?.url\n\n  const removeUpload = useCallback(() => {\n    const elementPath = ReactEditor.findPath(editor, element)\n\n    Transforms.removeNodes(editor, { at: elementPath })\n  }, [editor, element])\n\n  const updateUpload = useCallback(\n    (json) => {\n      const { doc } = json\n\n      const newNode = {\n        fields: doc,\n      }\n\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(editor, newNode, { at: elementPath })\n\n      setParams({\n        ...initialParams,\n        cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed\n      })\n\n      dispatchCacheBust()\n      closeDrawer()\n    },\n    [editor, element, setParams, cacheBust, closeDrawer],\n  )\n\n  const swapUpload = React.useCallback(\n    ({ collectionSlug, docID }) => {\n      const newNode = {\n        type: uploadName,\n        children: [{ text: ' ' }],\n        relationTo: collectionSlug,\n        value: { id: docID },\n      }\n\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      setRelatedCollection(collections.find((coll) => coll.slug === collectionSlug))\n\n      Transforms.setNodes(editor, newNode, { at: elementPath })\n\n      dispatchCacheBust()\n      closeListDrawer()\n    },\n    [closeListDrawer, editor, element, collections],\n  )\n\n  const relatedFieldSchemaPath = `${uploadFieldsSchemaPath}.${relatedCollection.slug}`\n  const customFieldsMap = fieldProps.componentMap[relatedFieldSchemaPath]\n\n  return (\n    <div\n      className={[baseClass, selected && focused && `${baseClass}--selected`]\n        .filter(Boolean)\n        .join(' ')}\n      contentEditable={false}\n      {...attributes}\n    >\n      <div className={`${baseClass}__card`}>\n        <div className={`${baseClass}__topRow`}>\n          {/* TODO: migrate to use Thumbnail component */}\n          <div className={`${baseClass}__thumbnail`}>\n            {thumbnailSRC ? <img alt={data?.filename} src={thumbnailSRC} /> : <File />}\n          </div>\n          <div className={`${baseClass}__topRowRightPanel`}>\n            <div className={`${baseClass}__collectionLabel`}>\n              {getTranslation(relatedCollection.labels.singular, i18n)}\n            </div>\n            <div className={`${baseClass}__actions`}>\n              {Boolean(customFieldsMap) && (\n                <>\n                  <DrawerToggler\n                    className={`${baseClass}__upload-drawer-toggler`}\n                    disabled={fieldProps?.field?.admin?.readOnly}\n                    slug={drawerSlug}\n                  >\n                    <Button\n                      buttonStyle=\"icon-label\"\n                      el=\"div\"\n                      icon=\"edit\"\n                      onClick={(e) => {\n                        e.preventDefault()\n                      }}\n                      round\n                      tooltip={t('fields:editRelationship')}\n                    />\n                  </DrawerToggler>\n                  <UploadDrawer\n                    {...{ drawerSlug, element, fieldProps, relatedCollection, schemaPath }}\n                  />\n                </>\n              )}\n              <ListDrawerToggler\n                className={`${baseClass}__list-drawer-toggler`}\n                disabled={fieldProps?.field?.admin?.readOnly}\n              >\n                <Button\n                  buttonStyle=\"icon-label\"\n                  disabled={fieldProps?.field?.admin?.readOnly}\n                  el=\"div\"\n                  icon=\"swap\"\n                  onClick={() => {\n                    // do nothing\n                  }}\n                  round\n                  tooltip={t('fields:swapUpload')}\n                />\n              </ListDrawerToggler>\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__removeButton`}\n                disabled={fieldProps?.field?.admin?.readOnly}\n                icon=\"x\"\n                onClick={(e) => {\n                  e.preventDefault()\n                  removeUpload()\n                }}\n                round\n                tooltip={t('fields:removeUpload')}\n              />\n            </div>\n          </div>\n        </div>\n        <div className={`${baseClass}__bottomRow`}>\n          <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n            <strong>{data?.filename}</strong>\n          </DocumentDrawerToggler>\n        </div>\n      </div>\n      {children}\n      {value?.id && <DocumentDrawer onSave={updateUpload} />}\n      <ListDrawer onSelect={swapUpload} />\n    </div>\n  )\n}\n\nexport const UploadElement = (props: any): React.ReactNode => {\n  return (\n    <EnabledRelationshipsCondition {...props} uploads>\n      <UploadElementComponent {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["getTranslation","Button","DrawerToggler","File","useConfig","useDocumentDrawer","useDrawerSlug","useListDrawer","usePayloadAPI","useTranslation","React","useCallback","useReducer","useState","Transforms","ReactEditor","useFocused","useSelected","useSlateStatic","useElement","EnabledRelationshipsCondition","uploadFieldsSchemaPath","uploadName","UploadDrawer","baseClass","initialParams","depth","UploadElementComponent","enabledCollectionSlugs","attributes","children","element","relationTo","value","fieldProps","schemaPath","config","collections","routes","api","serverURL","i18n","t","cacheBust","dispatchCacheBust","state","relatedCollection","setRelatedCollection","find","coll","slug","drawerSlug","ListDrawer","ListDrawerToggler","closeDrawer","closeListDrawer","collectionSlugs","selectedCollection","DocumentDrawer","DocumentDrawerToggler","id","collectionSlug","editor","selected","focused","data","setParams","thumbnailSRC","thumbnailURL","url","removeUpload","elementPath","findPath","removeNodes","at","updateUpload","json","doc","newNode","fields","setNodes","swapUpload","docID","type","text","relatedFieldSchemaPath","customFieldsMap","componentMap","div","className","filter","Boolean","join","contentEditable","img","alt","filename","src","labels","singular","disabled","field","admin","readOnly","buttonStyle","el","icon","onClick","e","preventDefault","round","tooltip","strong","onSave","onSelect","UploadElement","props","uploads"],"mappings":"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"}

package/dist/field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/field/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAElE,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,aAAa,CAAA;AAWlE,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyDnD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/field/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAElE,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,aAAa,CAAA;AAYlE,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoDnD,CAAA"}

package/dist/field/index.js

@@ -1,18 +1,18 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { RenderComponent, ShimmerEffect, useClientFunctions, useFieldProps } from '@payloadcms/ui';
+import { ShimmerEffect, useClientFunctions } from '@payloadcms/ui';
 import React, { lazy, Suspense, useEffect, useState } from 'react';
+import { SlatePropsProvider } from '../utilities/SlatePropsProvider.js';
 import { createFeatureMap } from './createFeatureMap.js';
 const RichTextEditor = /*#__PURE__*/ lazy(()=>import('./RichText.js').then((module)=>({
             default: module.RichText
         })));
 export const RichTextField = (props)=>{
-    const { field: { richTextComponentMap } } = props;
-    const { schemaPath } = useFieldProps();
+    const { componentMap, schemaPath } = props;
     const clientFunctions = useClientFunctions();
     const [hasLoadedPlugins, setHasLoadedPlugins] = useState(false);
     const [features] = useState(()=>{
-        return createFeatureMap(richTextComponentMap);
+        return createFeatureMap(new Map(Object.entries(componentMap)));
     });
     const [plugins, setPlugins] = useState([]);
     useEffect(()=>{
@@ -35,12 +35,11 @@ export const RichTextField = (props)=>{
         features.plugins.length
     ]);
     if (!hasLoadedPlugins) {
-        return /*#__PURE__*/ _jsx(React.Fragment, {
+        return /*#__PURE__*/ _jsx(SlatePropsProvider, {
+            schemaPath: schemaPath,
             children: Array.isArray(features.plugins) && features.plugins.map((Plugin, i)=>{
                 return /*#__PURE__*/ _jsx(React.Fragment, {
-                    children: /*#__PURE__*/ _jsx(RenderComponent, {
-                        mappedComponent: Plugin
-                    })
+                    children: Plugin
                 }, i);
             })
         });
@@ -49,11 +48,14 @@ export const RichTextField = (props)=>{
         fallback: /*#__PURE__*/ _jsx(ShimmerEffect, {
             height: "35vh"
         }),
-        children: /*#__PURE__*/ _jsx(RichTextEditor, {
-            ...props,
-            elements: features.elements,
-            leaves: features.leaves,
-            plugins: plugins
+        children: /*#__PURE__*/ _jsx(SlatePropsProvider, {
+            schemaPath: schemaPath,
+            children: /*#__PURE__*/ _jsx(RichTextEditor, {
+                ...props,
+                elements: features.elements,
+                leaves: features.leaves,
+                plugins: plugins
+            })
         })
     });
 };

package/dist/field/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/field/index.tsx"],"sourcesContent":["'use client'\n\nimport { RenderComponent, ShimmerEffect, useClientFunctions, useFieldProps } from '@payloadcms/ui'\nimport React, { lazy, Suspense, useEffect, useState } from 'react'\n\nimport type { RichTextPlugin, SlateFieldProps } from '../types.js'\nimport type { EnabledFeatures } from './types.js'\n\nimport { createFeatureMap } from './createFeatureMap.js'\n\nconst RichTextEditor = lazy(() =>\n  import('./RichText.js').then((module) => ({\n    default: module.RichText,\n  })),\n)\n\nexport const RichTextField: React.FC<SlateFieldProps> = (props) => {\n  const {\n    field: { richTextComponentMap },\n  } = props\n\n  const { schemaPath } = useFieldProps()\n  const clientFunctions = useClientFunctions()\n  const [hasLoadedPlugins, setHasLoadedPlugins] = useState(false)\n\n  const [features] = useState<EnabledFeatures>(() => {\n    return createFeatureMap(richTextComponentMap as any)\n  })\n\n  const [plugins, setPlugins] = useState<RichTextPlugin[]>([])\n\n  useEffect(() => {\n    if (!hasLoadedPlugins) {\n      const plugins: RichTextPlugin[] = []\n\n      Object.entries(clientFunctions).forEach(([key, plugin]) => {\n        if (key.startsWith(`slatePlugin.${schemaPath}.`)) {\n          plugins.push(plugin)\n        }\n      })\n\n      if (plugins.length === features.plugins.length) {\n        setPlugins(plugins)\n        setHasLoadedPlugins(true)\n      }\n    }\n  }, [hasLoadedPlugins, clientFunctions, schemaPath, features.plugins.length])\n\n  if (!hasLoadedPlugins) {\n    return (\n      <React.Fragment>\n        {Array.isArray(features.plugins) &&\n          features.plugins.map((Plugin, i) => {\n            return (\n              <React.Fragment key={i}>\n                <RenderComponent mappedComponent={Plugin} />\n              </React.Fragment>\n            )\n          })}\n      </React.Fragment>\n    )\n  }\n\n  return (\n    <Suspense fallback={<ShimmerEffect height=\"35vh\" />}>\n      <RichTextEditor\n        {...props}\n        elements={features.elements}\n        leaves={features.leaves}\n        plugins={plugins}\n      />\n    </Suspense>\n  )\n}\n"],"names":["RenderComponent","ShimmerEffect","useClientFunctions","useFieldProps","React","lazy","Suspense","useEffect","useState","createFeatureMap","RichTextEditor","then","module","default","RichText","RichTextField","props","field","richTextComponentMap","schemaPath","clientFunctions","hasLoadedPlugins","setHasLoadedPlugins","features","plugins","setPlugins","Object","entries","forEach","key","plugin","startsWith","push","length","Fragment","Array","isArray","map","Plugin","i","mappedComponent","fallback","height","elements","leaves"],"mappings":"AAAA;;AAEA,SAASA,eAAe,EAAEC,aAAa,EAAEC,kBAAkB,EAAEC,aAAa,QAAQ,iBAAgB;AAClG,OAAOC,SAASC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAKlE,SAASC,gBAAgB,QAAQ,wBAAuB;AAExD,MAAMC,+BAAiBL,KAAK,IAC1B,MAAM,CAAC,iBAAiBM,IAAI,CAAC,CAACC,SAAY,CAAA;YACxCC,SAASD,OAAOE,QAAQ;QAC1B,CAAA;AAGF,OAAO,MAAMC,gBAA2C,CAACC;IACvD,MAAM,EACJC,OAAO,EAAEC,oBAAoB,EAAE,EAChC,GAAGF;IAEJ,MAAM,EAAEG,UAAU,EAAE,GAAGhB;IACvB,MAAMiB,kBAAkBlB;IACxB,MAAM,CAACmB,kBAAkBC,oBAAoB,GAAGd,SAAS;IAEzD,MAAM,CAACe,SAAS,GAAGf,SAA0B;QAC3C,OAAOC,iBAAiBS;IAC1B;IAEA,MAAM,CAACM,SAASC,WAAW,GAAGjB,SAA2B,EAAE;IAE3DD,UAAU;QACR,IAAI,CAACc,kBAAkB;YACrB,MAAMG,UAA4B,EAAE;YAEpCE,OAAOC,OAAO,CAACP,iBAAiBQ,OAAO,CAAC,CAAC,CAACC,KAAKC,OAAO;gBACpD,IAAID,IAAIE,UAAU,CAAC,CAAC,YAAY,EAAEZ,WAAW,CAAC,CAAC,GAAG;oBAChDK,QAAQQ,IAAI,CAACF;gBACf;YACF;YAEA,IAAIN,QAAQS,MAAM,KAAKV,SAASC,OAAO,CAACS,MAAM,EAAE;gBAC9CR,WAAWD;gBACXF,oBAAoB;YACtB;QACF;IACF,GAAG;QAACD;QAAkBD;QAAiBD;QAAYI,SAASC,OAAO,CAACS,MAAM;KAAC;IAE3E,IAAI,CAACZ,kBAAkB;QACrB,qBACE,KAACjB,MAAM8B,QAAQ;sBACZC,MAAMC,OAAO,CAACb,SAASC,OAAO,KAC7BD,SAASC,OAAO,CAACa,GAAG,CAAC,CAACC,QAAQC;gBAC5B,qBACE,KAACnC,MAAM8B,QAAQ;8BACb,cAAA,KAAClC;wBAAgBwC,iBAAiBF;;mBADfC;YAIzB;;IAGR;IAEA,qBACE,KAACjC;QAASmC,wBAAU,KAACxC;YAAcyC,QAAO;;kBACxC,cAAA,KAAChC;YACE,GAAGM,KAAK;YACT2B,UAAUpB,SAASoB,QAAQ;YAC3BC,QAAQrB,SAASqB,MAAM;YACvBpB,SAASA;;;AAIjB,EAAC"}
+{"version":3,"sources":["../../src/field/index.tsx"],"sourcesContent":["'use client'\n\nimport { ShimmerEffect, useClientFunctions } from '@payloadcms/ui'\nimport React, { lazy, Suspense, useEffect, useState } from 'react'\n\nimport type { RichTextPlugin, SlateFieldProps } from '../types.js'\nimport type { EnabledFeatures } from './types.js'\n\nimport { SlatePropsProvider } from '../utilities/SlatePropsProvider.js'\nimport { createFeatureMap } from './createFeatureMap.js'\n\nconst RichTextEditor = lazy(() =>\n  import('./RichText.js').then((module) => ({\n    default: module.RichText,\n  })),\n)\n\nexport const RichTextField: React.FC<SlateFieldProps> = (props) => {\n  const { componentMap, schemaPath } = props\n\n  const clientFunctions = useClientFunctions()\n  const [hasLoadedPlugins, setHasLoadedPlugins] = useState(false)\n\n  const [features] = useState<EnabledFeatures>(() => {\n    return createFeatureMap(new Map(Object.entries(componentMap)))\n  })\n\n  const [plugins, setPlugins] = useState<RichTextPlugin[]>([])\n\n  useEffect(() => {\n    if (!hasLoadedPlugins) {\n      const plugins: RichTextPlugin[] = []\n\n      Object.entries(clientFunctions).forEach(([key, plugin]) => {\n        if (key.startsWith(`slatePlugin.${schemaPath}.`)) {\n          plugins.push(plugin)\n        }\n      })\n\n      if (plugins.length === features.plugins.length) {\n        setPlugins(plugins)\n        setHasLoadedPlugins(true)\n      }\n    }\n  }, [hasLoadedPlugins, clientFunctions, schemaPath, features.plugins.length])\n\n  if (!hasLoadedPlugins) {\n    return (\n      <SlatePropsProvider schemaPath={schemaPath}>\n        {Array.isArray(features.plugins) &&\n          features.plugins.map((Plugin, i) => {\n            return <React.Fragment key={i}>{Plugin}</React.Fragment>\n          })}\n      </SlatePropsProvider>\n    )\n  }\n\n  return (\n    <Suspense fallback={<ShimmerEffect height=\"35vh\" />}>\n      <SlatePropsProvider schemaPath={schemaPath}>\n        <RichTextEditor\n          {...props}\n          elements={features.elements}\n          leaves={features.leaves}\n          plugins={plugins}\n        />\n      </SlatePropsProvider>\n    </Suspense>\n  )\n}\n"],"names":["ShimmerEffect","useClientFunctions","React","lazy","Suspense","useEffect","useState","SlatePropsProvider","createFeatureMap","RichTextEditor","then","module","default","RichText","RichTextField","props","componentMap","schemaPath","clientFunctions","hasLoadedPlugins","setHasLoadedPlugins","features","Map","Object","entries","plugins","setPlugins","forEach","key","plugin","startsWith","push","length","Array","isArray","map","Plugin","i","Fragment","fallback","height","elements","leaves"],"mappings":"AAAA;;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,iBAAgB;AAClE,OAAOC,SAASC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAKlE,SAASC,kBAAkB,QAAQ,qCAAoC;AACvE,SAASC,gBAAgB,QAAQ,wBAAuB;AAExD,MAAMC,+BAAiBN,KAAK,IAC1B,MAAM,CAAC,iBAAiBO,IAAI,CAAC,CAACC,SAAY,CAAA;YACxCC,SAASD,OAAOE,QAAQ;QAC1B,CAAA;AAGF,OAAO,MAAMC,gBAA2C,CAACC;IACvD,MAAM,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGF;IAErC,MAAMG,kBAAkBjB;IACxB,MAAM,CAACkB,kBAAkBC,oBAAoB,GAAGd,SAAS;IAEzD,MAAM,CAACe,SAAS,GAAGf,SAA0B;QAC3C,OAAOE,iBAAiB,IAAIc,IAAIC,OAAOC,OAAO,CAACR;IACjD;IAEA,MAAM,CAACS,SAASC,WAAW,GAAGpB,SAA2B,EAAE;IAE3DD,UAAU;QACR,IAAI,CAACc,kBAAkB;YACrB,MAAMM,UAA4B,EAAE;YAEpCF,OAAOC,OAAO,CAACN,iBAAiBS,OAAO,CAAC,CAAC,CAACC,KAAKC,OAAO;gBACpD,IAAID,IAAIE,UAAU,CAAC,CAAC,YAAY,EAAEb,WAAW,CAAC,CAAC,GAAG;oBAChDQ,QAAQM,IAAI,CAACF;gBACf;YACF;YAEA,IAAIJ,QAAQO,MAAM,KAAKX,SAASI,OAAO,CAACO,MAAM,EAAE;gBAC9CN,WAAWD;gBACXL,oBAAoB;YACtB;QACF;IACF,GAAG;QAACD;QAAkBD;QAAiBD;QAAYI,SAASI,OAAO,CAACO,MAAM;KAAC;IAE3E,IAAI,CAACb,kBAAkB;QACrB,qBACE,KAACZ;YAAmBU,YAAYA;sBAC7BgB,MAAMC,OAAO,CAACb,SAASI,OAAO,KAC7BJ,SAASI,OAAO,CAACU,GAAG,CAAC,CAACC,QAAQC;gBAC5B,qBAAO,KAACnC,MAAMoC,QAAQ;8BAAUF;mBAAJC;YAC9B;;IAGR;IAEA,qBACE,KAACjC;QAASmC,wBAAU,KAACvC;YAAcwC,QAAO;;kBACxC,cAAA,KAACjC;YAAmBU,YAAYA;sBAC9B,cAAA,KAACR;gBACE,GAAGM,KAAK;gBACT0B,UAAUpB,SAASoB,QAAQ;gBAC3BC,QAAQrB,SAASqB,MAAM;gBACvBjB,SAASA;;;;AAKnB,EAAC"}

package/dist/field/rscEntry.d.ts

@@ -0,0 +1,7 @@
+import { type ClientComponentProps, type ServerComponentProps } from 'payload';
+import React from 'react';
+import type { AdapterArguments } from '../types.js';
+export declare const RscEntrySlateField: React.FC<{
+    args: AdapterArguments;
+} & ClientComponentProps & ServerComponentProps>;
+//# sourceMappingURL=rscEntry.d.ts.map

package/dist/field/rscEntry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rscEntry.d.ts","sourceRoot":"","sources":["../../src/field/rscEntry.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,oBAAoB,EAMzB,KAAK,oBAAoB,EAC1B,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,gBAAgB,EAA6C,MAAM,aAAa,CAAA;AAQ9F,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC;IACE,IAAI,EAAE,gBAAgB,CAAA;CACvB,GAAG,oBAAoB,GACtB,oBAAoB,CAkLvB,CAAA"}

package/dist/field/rscEntry.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent';
+import { createClientFields, deepCopyObjectSimple } from 'payload';
+import React from 'react';
+// eslint-disable-next-line payload/no-imports-from-exports-dir
+import { RichTextField } from '../exports/client/index.js';
+import { elements as elementTypes } from '../field/elements/index.js';
+import { defaultLeaves as leafTypes } from '../field/leaves/index.js';
+import { linkFieldsSchemaPath } from './elements/link/shared.js';
+import { uploadFieldsSchemaPath } from './elements/upload/shared.js';
+export const RscEntrySlateField = ({ args, clientField, forceRender, i18n, indexPath, parentPath, parentSchemaPath, path, payload, readOnly, renderedBlocks, schemaPath })=>{
+    const componentMap = new Map();
+    const clientProps = {
+        schemaPath
+    };
+    (args?.admin?.leaves || Object.values(leafTypes)).forEach((leaf)=>{
+        let leafObject;
+        if (typeof leaf === 'object' && leaf !== null) {
+            leafObject = leaf;
+        } else if (typeof leaf === 'string' && leafTypes[leaf]) {
+            leafObject = leafTypes[leaf];
+        }
+        if (leafObject) {
+            const LeafButton = leafObject.Button;
+            const LeafComponent = leafObject.Leaf;
+            componentMap.set(`leaf.button.${leafObject.name}`, /*#__PURE__*/ _jsx(RenderServerComponent, {
+                clientProps: clientProps,
+                Component: LeafButton,
+                importMap: payload.importMap
+            }));
+            componentMap.set(`leaf.component.${leafObject.name}`, /*#__PURE__*/ _jsx(RenderServerComponent, {
+                clientProps: clientProps,
+                Component: LeafComponent,
+                importMap: payload.importMap
+            }));
+            if (Array.isArray(leafObject.plugins)) {
+                leafObject.plugins.forEach((Plugin, i)=>{
+                    componentMap.set(`leaf.plugin.${leafObject.name}.${i}`, /*#__PURE__*/ _jsx(RenderServerComponent, {
+                        clientProps: clientProps,
+                        Component: Plugin,
+                        importMap: payload.importMap
+                    }));
+                });
+            }
+        }
+    });
+    (args?.admin?.elements || Object.values(elementTypes)).forEach((el)=>{
+        let element;
+        if (typeof el === 'object' && el !== null) {
+            element = el;
+        } else if (typeof el === 'string' && elementTypes[el]) {
+            element = elementTypes[el];
+        }
+        if (element) {
+            const ElementButton = element.Button;
+            const ElementComponent = element.Element;
+            if (ElementButton) {
+                componentMap.set(`element.button.${element.name}`, /*#__PURE__*/ _jsx(RenderServerComponent, {
+                    clientProps: clientProps,
+                    Component: ElementButton,
+                    importMap: payload.importMap
+                }));
+            }
+            componentMap.set(`element.component.${element.name}`, /*#__PURE__*/ _jsx(RenderServerComponent, {
+                clientProps: clientProps,
+                Component: ElementComponent,
+                importMap: payload.importMap
+            }));
+            if (Array.isArray(element.plugins)) {
+                element.plugins.forEach((Plugin, i)=>{
+                    componentMap.set(`element.plugin.${element.name}.${i}`, /*#__PURE__*/ _jsx(RenderServerComponent, {
+                        clientProps: clientProps,
+                        Component: Plugin,
+                        importMap: payload.importMap
+                    }));
+                });
+            }
+            switch(element.name){
+                case 'link':
+                    {
+                        let clientFields = deepCopyObjectSimple(args.admin?.link?.fields);
+                        clientFields = createClientFields({
+                            clientFields,
+                            defaultIDType: payload.config.db.defaultIDType,
+                            fields: args.admin?.link?.fields,
+                            i18n
+                        });
+                        componentMap.set(linkFieldsSchemaPath, clientFields);
+                        break;
+                    }
+                case 'relationship':
+                    break;
+                case 'upload':
+                    {
+                        const uploadEnabledCollections = payload.config.collections.filter(({ admin: { enableRichTextRelationship, hidden }, upload })=>{
+                            if (hidden === true) {
+                                return false;
+                            }
+                            return enableRichTextRelationship && Boolean(upload) === true;
+                        });
+                        uploadEnabledCollections.forEach((collection)=>{
+                            if (args?.admin?.upload?.collections[collection.slug]?.fields) {
+                                let clientFields = deepCopyObjectSimple(args?.admin?.upload?.collections[collection.slug]?.fields);
+                                clientFields = createClientFields({
+                                    clientFields,
+                                    defaultIDType: payload.config.db.defaultIDType,
+                                    fields: args?.admin?.upload?.collections[collection.slug]?.fields,
+                                    i18n
+                                });
+                                componentMap.set(`${uploadFieldsSchemaPath}.${collection.slug}`, clientFields);
+                            }
+                        });
+                        break;
+                    }
+            }
+        }
+    });
+    return /*#__PURE__*/ _jsx(RichTextField, {
+        componentMap: Object.fromEntries(componentMap),
+        field: clientField,
+        forceRender: forceRender,
+        indexPath: indexPath,
+        parentPath: parentPath,
+        parentSchemaPath: parentSchemaPath,
+        path: path,
+        readOnly: readOnly,
+        renderedBlocks: renderedBlocks,
+        schemaPath: schemaPath
+    });
+};
+
+//# sourceMappingURL=rscEntry.js.map