@payloadcms/richtext-lexical 3.0.0-alpha.48 → 3.0.0-alpha.50

package/dist/field/features/upload/component/ExtraFieldsDrawer/index.js

@@ -3,9 +3,17 @@ import * as facelessUIImport from '@faceless-ui/modal';
 import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js';
 const { useLexicalComposerContext } = lexicalComposerContextImport;
 import { getTranslation } from '@payloadcms/translations';
-import { Drawer, FieldPathProvider, Form, FormSubmit, RenderFields, getFormState, useConfig, useDocumentInfo, useFieldPath, useTranslation } from '@payloadcms/ui';
 import lexicalImport from 'lexical';
 const { $getNodeByKey } = lexicalImport;
+import { Drawer } from '@payloadcms/ui/elements/Drawer';
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
+import { Form } from '@payloadcms/ui/forms/Form';
+import { RenderFields } from '@payloadcms/ui/forms/RenderFields';
+import { FormSubmit } from '@payloadcms/ui/forms/Submit';
+import { useConfig } from '@payloadcms/ui/providers/Config';
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo';
+import { useTranslation } from '@payloadcms/ui/providers/Translation';
+import { getFormState } from '@payloadcms/ui/utilities/getFormState';
 import { deepCopyObject } from 'payload/utilities';
 import React, { useCallback, useEffect, useState } from 'react';
 import { v4 as uuid } from 'uuid';
@@ -20,7 +28,7 @@ import { useEditorConfigContext } from '../../../../lexical/config/client/Editor
     const { closeModal } = useModal();
     const { i18n, t } = useTranslation();
     const { id } = useDocumentInfo();
-    const { schemaPath } = useFieldPath();
+    const { schemaPath } = useFieldProps();
     const config = useConfig();
     const [initialState, setInitialState] = useState(false);
     const { field: { richTextComponentMap } } = useEditorConfigContext();
@@ -92,11 +100,12 @@ import { useEditorConfigContext } from '../../../../lexical/config/client/Editor
         title: t('general:editLabel', {
             label: getTranslation(relatedCollection.labels.singular, i18n)
         })
-    }, initialState !== false && /*#__PURE__*/ React.createElement(FieldPathProvider, {
-        path: "",
-        schemaPath: ""
-    }, /*#__PURE__*/ React.createElement(Form, {
-        // @ts-expect-error // TODO: Fix this type. Is this correct?
+    }, initialState !== false && /*#__PURE__*/ React.createElement(Form, {
+        beforeSubmit: [
+            onChange
+        ],
+        disableValidationOnSubmit: true,
+        // @ts-expect-error TODO: Fix this
         fields: fieldMap,
         initialState: initialState,
         onChange: [
@@ -106,8 +115,11 @@ import { useEditorConfigContext } from '../../../../lexical/config/client/Editor
         uuid: uuid()
     }, /*#__PURE__*/ React.createElement(RenderFields, {
         fieldMap: Array.isArray(fieldMap) ? fieldMap : [],
-        forceRender: true
-    }), /*#__PURE__*/ React.createElement(FormSubmit, null, t('fields:saveChanges')))));
+        forceRender: true,
+        path: "",
+        readOnly: false,
+        schemaPath: ""
+    }), /*#__PURE__*/ React.createElement(FormSubmit, null, t('fields:saveChanges'))));
 };
 
 //# sourceMappingURL=index.js.map

package/dist/field/features/upload/component/ExtraFieldsDrawer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/field/features/upload/component/ExtraFieldsDrawer/index.tsx"],"sourcesContent":["'use client'\nimport type { FormState, SanitizedCollectionConfig } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'\nconst { useLexicalComposerContext } = lexicalComposerContextImport\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Drawer,\n  FieldPathProvider,\n  Form,\n  type FormProps,\n  FormSubmit,\n  RenderFields,\n  getFormState,\n  useConfig,\n  useDocumentInfo,\n  useFieldPath,\n  useTranslation,\n} from '@payloadcms/ui'\nimport lexicalImport from 'lexical'\nconst { $getNodeByKey } = lexicalImport\n\nimport { deepCopyObject } from 'payload/utilities'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { v4 as uuid } from 'uuid'\n\nimport type { UploadData, UploadNode } from '../../nodes/UploadNode.js'\nimport type { ElementProps } from '../index.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\n\n/**\n * This handles the extra fields, e.g. captions or alt text, which are\n * potentially added to the upload feature.\n */\nexport const ExtraFieldsUploadDrawer: React.FC<\n  ElementProps & {\n    drawerSlug: string\n    relatedCollection: SanitizedCollectionConfig\n  }\n> = (props) => {\n  const { useModal } = facelessUIImport\n\n  const {\n    data: { fields, relationTo, value },\n    drawerSlug,\n    nodeKey,\n    relatedCollection,\n  } = props\n\n  const [editor] = useLexicalComposerContext()\n\n  const { closeModal } = useModal()\n\n  const { i18n, t } = useTranslation()\n  const { id } = useDocumentInfo()\n  const { schemaPath } = useFieldPath()\n  const config = useConfig()\n  const [initialState, setInitialState] = useState<FormState | false>(false)\n  const {\n    field: { richTextComponentMap },\n  } = useEditorConfigContext()\n\n  const componentMapRenderedFieldsPath = `feature.upload.fields.${relatedCollection.slug}`\n  const schemaFieldsPath = `${schemaPath}.feature.upload.${relatedCollection.slug}`\n\n  const fieldMap = richTextComponentMap.get(componentMapRenderedFieldsPath) // Field Schema\n\n  useEffect(() => {\n    const awaitInitialState = async () => {\n      const state = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          data: deepCopyObject(fields || {}),\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      }) // Form State\n\n      setInitialState(state)\n    }\n\n    void awaitInitialState()\n  }, [config.routes.api, config.serverURL, schemaFieldsPath, id, fields])\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    async ({ formState: prevFormState }) => {\n      return await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          formState: prevFormState,\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      })\n    },\n\n    [config.routes.api, config.serverURL, schemaFieldsPath, id],\n  )\n\n  const handleUpdateEditData = useCallback(\n    (_, data) => {\n      // Update lexical node (with key nodeKey) with new data\n      editor.update(() => {\n        const uploadNode: UploadNode | null = $getNodeByKey(nodeKey)\n        if (uploadNode) {\n          const newData: UploadData = {\n            ...uploadNode.getData(),\n            fields: data,\n          }\n          uploadNode.setData(newData)\n        }\n      })\n\n      closeModal(drawerSlug)\n    },\n    [closeModal, editor, drawerSlug, nodeKey],\n  )\n\n  return (\n    <Drawer\n      slug={drawerSlug}\n      title={t('general:editLabel', {\n        label: getTranslation(relatedCollection.labels.singular, i18n),\n      })}\n    >\n      {initialState !== false && (\n        <FieldPathProvider path=\"\" schemaPath=\"\">\n          <Form\n            // @ts-expect-error // TODO: Fix this type. Is this correct?\n            fields={fieldMap}\n            initialState={initialState}\n            onChange={[onChange]}\n            onSubmit={handleUpdateEditData}\n            uuid={uuid()}\n          >\n            <RenderFields fieldMap={Array.isArray(fieldMap) ? fieldMap : []} forceRender />\n            <FormSubmit>{t('fields:saveChanges')}</FormSubmit>\n          </Form>\n        </FieldPathProvider>\n      )}\n    </Drawer>\n  )\n}\n"],"names":["facelessUIImport","lexicalComposerContextImport","useLexicalComposerContext","getTranslation","Drawer","FieldPathProvider","Form","FormSubmit","RenderFields","getFormState","useConfig","useDocumentInfo","useFieldPath","useTranslation","lexicalImport","$getNodeByKey","deepCopyObject","React","useCallback","useEffect","useState","v4","uuid","useEditorConfigContext","ExtraFieldsUploadDrawer","props","useModal","data","fields","relationTo","value","drawerSlug","nodeKey","relatedCollection","editor","closeModal","i18n","t","id","schemaPath","config","initialState","setInitialState","field","richTextComponentMap","componentMapRenderedFieldsPath","slug","schemaFieldsPath","fieldMap","get","awaitInitialState","state","apiRoute","routes","api","body","operation","serverURL","onChange","formState","prevFormState","handleUpdateEditData","_","update","uploadNode","newData","getData","setData","title","label","labels","singular","path","onSubmit","Array","isArray","forceRender"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../src/field/features/upload/component/ExtraFieldsDrawer/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, FormState } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'\nconst { useLexicalComposerContext } = lexicalComposerContextImport\nimport { getTranslation } from '@payloadcms/translations'\nimport lexicalImport from 'lexical'\nconst { $getNodeByKey } = lexicalImport\nimport type { FormProps } from '@payloadcms/ui/forms/Form'\n\nimport { Drawer } from '@payloadcms/ui/elements/Drawer'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { Form } from '@payloadcms/ui/forms/Form'\nimport { RenderFields } from '@payloadcms/ui/forms/RenderFields'\nimport { FormSubmit } from '@payloadcms/ui/forms/Submit'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport { getFormState } from '@payloadcms/ui/utilities/getFormState'\nimport { deepCopyObject } from 'payload/utilities'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { v4 as uuid } from 'uuid'\n\nimport type { UploadData, UploadNode } from '../../nodes/UploadNode.js'\nimport type { ElementProps } from '../index.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\n\n/**\n * This handles the extra fields, e.g. captions or alt text, which are\n * potentially added to the upload feature.\n */\nexport const ExtraFieldsUploadDrawer: React.FC<\n  ElementProps & {\n    drawerSlug: string\n    relatedCollection: ClientCollectionConfig\n  }\n> = (props) => {\n  const { useModal } = facelessUIImport\n\n  const {\n    data: { fields, relationTo, value },\n    drawerSlug,\n    nodeKey,\n    relatedCollection,\n  } = props\n\n  const [editor] = useLexicalComposerContext()\n\n  const { closeModal } = useModal()\n\n  const { i18n, t } = useTranslation()\n  const { id } = useDocumentInfo()\n  const { schemaPath } = useFieldProps()\n  const config = useConfig()\n  const [initialState, setInitialState] = useState<FormState | false>(false)\n  const {\n    field: { richTextComponentMap },\n  } = useEditorConfigContext()\n\n  const componentMapRenderedFieldsPath = `feature.upload.fields.${relatedCollection.slug}`\n  const schemaFieldsPath = `${schemaPath}.feature.upload.${relatedCollection.slug}`\n\n  const fieldMap = richTextComponentMap.get(componentMapRenderedFieldsPath) // Field Schema\n\n  useEffect(() => {\n    const awaitInitialState = async () => {\n      const state = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          data: deepCopyObject(fields || {}),\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      }) // Form State\n\n      setInitialState(state)\n    }\n\n    void awaitInitialState()\n  }, [config.routes.api, config.serverURL, schemaFieldsPath, id, fields])\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    async ({ formState: prevFormState }) => {\n      return await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          formState: prevFormState,\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      })\n    },\n\n    [config.routes.api, config.serverURL, schemaFieldsPath, id],\n  )\n\n  const handleUpdateEditData = useCallback(\n    (_, data) => {\n      // Update lexical node (with key nodeKey) with new data\n      editor.update(() => {\n        const uploadNode: UploadNode | null = $getNodeByKey(nodeKey)\n        if (uploadNode) {\n          const newData: UploadData = {\n            ...uploadNode.getData(),\n            fields: data,\n          }\n          uploadNode.setData(newData)\n        }\n      })\n\n      closeModal(drawerSlug)\n    },\n    [closeModal, editor, drawerSlug, nodeKey],\n  )\n\n  return (\n    <Drawer\n      slug={drawerSlug}\n      title={t('general:editLabel', {\n        label: getTranslation(relatedCollection.labels.singular, i18n),\n      })}\n    >\n      {initialState !== false && (\n        <Form\n          beforeSubmit={[onChange]}\n          disableValidationOnSubmit\n          // @ts-expect-error TODO: Fix this\n          fields={fieldMap}\n          initialState={initialState}\n          onChange={[onChange]}\n          onSubmit={handleUpdateEditData}\n          uuid={uuid()}\n        >\n          <RenderFields\n            fieldMap={Array.isArray(fieldMap) ? fieldMap : []}\n            forceRender\n            path=\"\"\n            readOnly={false}\n            schemaPath=\"\"\n          />\n          <FormSubmit>{t('fields:saveChanges')}</FormSubmit>\n        </Form>\n      )}\n    </Drawer>\n  )\n}\n"],"names":["facelessUIImport","lexicalComposerContextImport","useLexicalComposerContext","getTranslation","lexicalImport","$getNodeByKey","Drawer","useFieldProps","Form","RenderFields","FormSubmit","useConfig","useDocumentInfo","useTranslation","getFormState","deepCopyObject","React","useCallback","useEffect","useState","v4","uuid","useEditorConfigContext","ExtraFieldsUploadDrawer","props","useModal","data","fields","relationTo","value","drawerSlug","nodeKey","relatedCollection","editor","closeModal","i18n","t","id","schemaPath","config","initialState","setInitialState","field","richTextComponentMap","componentMapRenderedFieldsPath","slug","schemaFieldsPath","fieldMap","get","awaitInitialState","state","apiRoute","routes","api","body","operation","serverURL","onChange","formState","prevFormState","handleUpdateEditData","_","update","uploadNode","newData","getData","setData","title","label","labels","singular","beforeSubmit","disableValidationOnSubmit","onSubmit","Array","isArray","forceRender","path","readOnly"],"mappings":"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"}

package/dist/field/features/upload/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/upload/component/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAIhE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAMxD,OAAO,cAAc,CAAA;AAQrB,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,UAAU,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;CAEhB,CAAA;AA+ID,eAAO,MAAM,eAAe,UAAW,YAAY,KAAG,MAAM,SAM3D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/upload/component/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAIhE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAMxD,OAAO,cAAc,CAAA;AAQrB,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,UAAU,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;CAEhB,CAAA;AAgJD,eAAO,MAAM,eAAe,UAAW,YAAY,KAAG,MAAM,SAM3D,CAAA"}

package/dist/field/features/upload/component/index.js

@@ -3,9 +3,16 @@ import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.
 const { useLexicalComposerContext } = lexicalComposerContextImport;
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js';
 import { getTranslation } from '@payloadcms/translations';
-import { Button, DrawerToggler, FileGraphic, useConfig, useDocumentDrawer, useDrawerSlug, usePayloadAPI, useThumbnail, useTranslation } from '@payloadcms/ui';
 import lexicalImport from 'lexical';
 const { $getNodeByKey } = lexicalImport;
+import { Button } from '@payloadcms/ui/elements/Button';
+import { useDocumentDrawer } from '@payloadcms/ui/elements/DocumentDrawer';
+import { DrawerToggler } from '@payloadcms/ui/elements/Drawer';
+import { useDrawerSlug } from '@payloadcms/ui/elements/Drawer';
+import { File } from '@payloadcms/ui/graphics/File';
+import usePayloadAPI from '@payloadcms/ui/hooks/usePayloadAPI';
+import { useConfig } from '@payloadcms/ui/providers/Config';
+import { useTranslation } from '@payloadcms/ui/providers/Translation';
 import React, { useCallback, useReducer, useState } from 'react';
 import { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider.js';
 import { EnabledRelationshipsCondition } from '../../relationship/utils/EnabledRelationshipsCondition.js';
@@ -34,7 +41,7 @@ const Component = (props)=>{
     const [{ data }, { setParams }] = usePayloadAPI(`${serverURL}${api}/${relatedCollection.slug}/${value?.id}`, {
         initialParams
     });
-    const thumbnailSRC = useThumbnail(relatedCollection.slug, relatedCollection.upload, data);
+    const thumbnailSRC = data?.thumbnailURL;
     const removeUpload = useCallback(()=>{
         editor.update(()=>{
             $getNodeByKey(nodeKey).remove();
@@ -71,7 +78,7 @@ const Component = (props)=>{
     }, thumbnailSRC ? /*#__PURE__*/ React.createElement("img", {
         alt: data?.filename,
         src: thumbnailSRC
-    }) : /*#__PURE__*/ React.createElement(FileGraphic, null)), /*#__PURE__*/ React.createElement("div", {
+    }) : /*#__PURE__*/ React.createElement(File, null)), /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__topRowRightPanel`
     }, /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__collectionLabel`

package/dist/field/features/upload/component/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/features/upload/component/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload/types'\n\nimport lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'\nconst { useLexicalComposerContext } = lexicalComposerContextImport\nimport { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  DrawerToggler,\n  FileGraphic,\n  useConfig,\n  useDocumentDrawer,\n  useDrawerSlug,\n  usePayloadAPI,\n  useThumbnail,\n  useTranslation,\n} from '@payloadcms/ui'\nimport lexicalImport from 'lexical'\nconst { $getNodeByKey } = lexicalImport\n\nimport React, { useCallback, useReducer, useState } from 'react'\n\nimport type { ClientComponentProps } from '../../types.js'\nimport type { UploadFeaturePropsClient } from '../feature.client.js'\nimport type { UploadData } from '../nodes/UploadNode.js'\n\nimport { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider.js'\nimport { EnabledRelationshipsCondition } from '../../relationship/utils/EnabledRelationshipsCondition.js'\nimport { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from '../drawer/commands.js'\nimport { ExtraFieldsUploadDrawer } from './ExtraFieldsDrawer/index.js'\nimport './index.scss'\n\nconst baseClass = 'lexical-upload'\n\nconst initialParams = {\n  depth: 0,\n}\n\nexport type ElementProps = {\n  data: UploadData\n  nodeKey: string\n  //uploadProps: UploadFeatureProps\n}\n\nconst Component: React.FC<ElementProps> = (props) => {\n  const {\n    data: { fields, relationTo, value },\n    nodeKey,\n  } = props\n\n  const {\n    collections,\n    routes: { api },\n    serverURL,\n  } = useConfig()\n\n  const [editor] = useLexicalComposerContext()\n  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey)\n  const { editorConfig, field } = useEditorConfigContext()\n\n  const { i18n, t } = useTranslation()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [relatedCollection, setRelatedCollection] = useState<SanitizedCollectionConfig>(() =>\n    collections.find((coll) => coll.slug === relationTo),\n  )\n\n  const drawerSlug = useDrawerSlug('upload-drawer')\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id: value?.id,\n    collectionSlug: relatedCollection.slug,\n  })\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 = useThumbnail(relatedCollection.slug, relatedCollection.upload, data)\n\n  const removeUpload = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey).remove()\n    })\n  }, [editor, nodeKey])\n\n  const updateUpload = useCallback(\n    (json) => {\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    [setParams, cacheBust, closeDrawer],\n  )\n\n  const hasExtraFields = (\n    editorConfig?.resolvedFeatureMap?.get('upload')\n      ?.clientFeatureProps as ClientComponentProps<UploadFeaturePropsClient>\n  ).collections?.[relatedCollection.slug]?.hasExtraFields\n\n  return (\n    <div\n      className={[baseClass, isSelected && `${baseClass}--selected`].filter(Boolean).join(' ')}\n      contentEditable={false}\n    >\n      <div className={`${baseClass}__card`}>\n        <div className={`${baseClass}__topRow`}>\n          <div className={`${baseClass}__thumbnail`}>\n            {thumbnailSRC ? <img alt={data?.filename} src={thumbnailSRC} /> : <FileGraphic />}\n          </div>\n          <div className={`${baseClass}__topRowRightPanel`}>\n            <div className={`${baseClass}__collectionLabel`}>\n              {getTranslation(relatedCollection.labels.singular, i18n)}\n            </div>\n            {editor.isEditable() && (\n              <div className={`${baseClass}__actions`}>\n                {hasExtraFields ? (\n                  <DrawerToggler\n                    className={`${baseClass}__upload-drawer-toggler`}\n                    disabled={field?.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                ) : null}\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  disabled={field?.readOnly}\n                  el=\"div\"\n                  icon=\"swap\"\n                  onClick={() => {\n                    editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {\n                      replace: { nodeKey },\n                    })\n                  }}\n                  round\n                  tooltip={t('fields:swapUpload')}\n                />\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__removeButton`}\n                  disabled={field?.readOnly}\n                  icon=\"x\"\n                  onClick={(e) => {\n                    e.preventDefault()\n                    removeUpload()\n                  }}\n                  round\n                  tooltip={t('fields:removeUpload')}\n                />\n              </div>\n            )}\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      {value?.id && <DocumentDrawer onSave={updateUpload} />}\n      <ExtraFieldsUploadDrawer\n        drawerSlug={drawerSlug}\n        relatedCollection={relatedCollection}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport const UploadComponent = (props: ElementProps): React.ReactNode => {\n  return (\n    <EnabledRelationshipsCondition {...props} uploads>\n      <Component {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["lexicalComposerContextImport","useLexicalComposerContext","useLexicalNodeSelection","getTranslation","Button","DrawerToggler","FileGraphic","useConfig","useDocumentDrawer","useDrawerSlug","usePayloadAPI","useThumbnail","useTranslation","lexicalImport","$getNodeByKey","React","useCallback","useReducer","useState","useEditorConfigContext","EnabledRelationshipsCondition","INSERT_UPLOAD_WITH_DRAWER_COMMAND","ExtraFieldsUploadDrawer","baseClass","initialParams","depth","Component","props","data","fields","relationTo","value","nodeKey","collections","routes","api","serverURL","editor","isSelected","setSelected","clearSelection","editorConfig","field","i18n","t","cacheBust","dispatchCacheBust","state","relatedCollection","setRelatedCollection","find","coll","slug","drawerSlug","DocumentDrawer","DocumentDrawerToggler","closeDrawer","id","collectionSlug","setParams","thumbnailSRC","upload","removeUpload","update","remove","updateUpload","json","hasExtraFields","resolvedFeatureMap","get","clientFeatureProps","div","className","filter","Boolean","join","contentEditable","img","alt","filename","src","labels","singular","isEditable","disabled","readOnly","buttonStyle","el","icon","onClick","e","preventDefault","round","tooltip","dispatchCommand","replace","strong","onSave","UploadComponent","uploads"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/field/features/upload/component/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload/types'\n\nimport lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'\nconst { useLexicalComposerContext } = lexicalComposerContextImport\nimport { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js'\nimport { getTranslation } from '@payloadcms/translations'\nimport lexicalImport from 'lexical'\nconst { $getNodeByKey } = lexicalImport\n\nimport { Button } from '@payloadcms/ui/elements/Button'\nimport { useDocumentDrawer } from '@payloadcms/ui/elements/DocumentDrawer'\nimport { DrawerToggler } from '@payloadcms/ui/elements/Drawer'\nimport { useDrawerSlug } from '@payloadcms/ui/elements/Drawer'\nimport { File } from '@payloadcms/ui/graphics/File'\nimport usePayloadAPI from '@payloadcms/ui/hooks/usePayloadAPI'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { useCallback, useReducer, useState } from 'react'\n\nimport type { ClientComponentProps } from '../../types.js'\nimport type { UploadFeaturePropsClient } from '../feature.client.js'\nimport type { UploadData } from '../nodes/UploadNode.js'\n\nimport { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider.js'\nimport { EnabledRelationshipsCondition } from '../../relationship/utils/EnabledRelationshipsCondition.js'\nimport { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from '../drawer/commands.js'\nimport { ExtraFieldsUploadDrawer } from './ExtraFieldsDrawer/index.js'\nimport './index.scss'\n\nconst baseClass = 'lexical-upload'\n\nconst initialParams = {\n  depth: 0,\n}\n\nexport type ElementProps = {\n  data: UploadData\n  nodeKey: string\n  //uploadProps: UploadFeatureProps\n}\n\nconst Component: React.FC<ElementProps> = (props) => {\n  const {\n    data: { fields, relationTo, value },\n    nodeKey,\n  } = props\n\n  const {\n    collections,\n    routes: { api },\n    serverURL,\n  } = useConfig()\n\n  const [editor] = useLexicalComposerContext()\n  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey)\n  const { editorConfig, field } = useEditorConfigContext()\n\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 [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id: value?.id,\n    collectionSlug: relatedCollection.slug,\n  })\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\n\n  const removeUpload = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey).remove()\n    })\n  }, [editor, nodeKey])\n\n  const updateUpload = useCallback(\n    (json) => {\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    [setParams, cacheBust, closeDrawer],\n  )\n\n  const hasExtraFields = (\n    editorConfig?.resolvedFeatureMap?.get('upload')\n      ?.clientFeatureProps as ClientComponentProps<UploadFeaturePropsClient>\n  ).collections?.[relatedCollection.slug]?.hasExtraFields\n\n  return (\n    <div\n      className={[baseClass, isSelected && `${baseClass}--selected`].filter(Boolean).join(' ')}\n      contentEditable={false}\n    >\n      <div className={`${baseClass}__card`}>\n        <div className={`${baseClass}__topRow`}>\n          {/* TODO: migrate to use @payloadcms/ui/elements/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            {editor.isEditable() && (\n              <div className={`${baseClass}__actions`}>\n                {hasExtraFields ? (\n                  <DrawerToggler\n                    className={`${baseClass}__upload-drawer-toggler`}\n                    disabled={field?.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                ) : null}\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  disabled={field?.readOnly}\n                  el=\"div\"\n                  icon=\"swap\"\n                  onClick={() => {\n                    editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {\n                      replace: { nodeKey },\n                    })\n                  }}\n                  round\n                  tooltip={t('fields:swapUpload')}\n                />\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__removeButton`}\n                  disabled={field?.readOnly}\n                  icon=\"x\"\n                  onClick={(e) => {\n                    e.preventDefault()\n                    removeUpload()\n                  }}\n                  round\n                  tooltip={t('fields:removeUpload')}\n                />\n              </div>\n            )}\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      {value?.id && <DocumentDrawer onSave={updateUpload} />}\n      <ExtraFieldsUploadDrawer\n        drawerSlug={drawerSlug}\n        relatedCollection={relatedCollection}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport const UploadComponent = (props: ElementProps): React.ReactNode => {\n  return (\n    <EnabledRelationshipsCondition {...props} uploads>\n      <Component {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["lexicalComposerContextImport","useLexicalComposerContext","useLexicalNodeSelection","getTranslation","lexicalImport","$getNodeByKey","Button","useDocumentDrawer","DrawerToggler","useDrawerSlug","File","usePayloadAPI","useConfig","useTranslation","React","useCallback","useReducer","useState","useEditorConfigContext","EnabledRelationshipsCondition","INSERT_UPLOAD_WITH_DRAWER_COMMAND","ExtraFieldsUploadDrawer","baseClass","initialParams","depth","Component","props","data","fields","relationTo","value","nodeKey","collections","routes","api","serverURL","editor","isSelected","setSelected","clearSelection","editorConfig","field","i18n","t","cacheBust","dispatchCacheBust","state","relatedCollection","setRelatedCollection","find","coll","slug","drawerSlug","DocumentDrawer","DocumentDrawerToggler","closeDrawer","id","collectionSlug","setParams","thumbnailSRC","thumbnailURL","removeUpload","update","remove","updateUpload","json","hasExtraFields","resolvedFeatureMap","get","clientFeatureProps","div","className","filter","Boolean","join","contentEditable","img","alt","filename","src","labels","singular","isEditable","disabled","readOnly","buttonStyle","el","icon","onClick","e","preventDefault","round","tooltip","dispatchCommand","replace","strong","onSave","UploadComponent","uploads"],"mappings":"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"}

package/dist/field/features/upload/drawer/index.js

@@ -1,9 +1,9 @@
 'use client';
 import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js';
 const { useLexicalComposerContext } = lexicalComposerContextImport;
-import { useListDrawer } from '@payloadcms/ui';
 import lexicalImport from 'lexical';
 const { $getNodeByKey, COMMAND_PRIORITY_EDITOR } = lexicalImport;
+import { useListDrawer } from '@payloadcms/ui/elements/ListDrawer';
 import React, { useCallback, useEffect, useState } from 'react';
 import { EnabledRelationshipsCondition } from '../../relationship/utils/EnabledRelationshipsCondition.js';
 import { $createUploadNode } from '../nodes/UploadNode.js';

package/dist/field/features/upload/drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/features/upload/drawer/index.tsx"],"sourcesContent":["'use client'\nimport lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'\nconst { useLexicalComposerContext } = lexicalComposerContextImport\nimport { useListDrawer } from '@payloadcms/ui'\nimport lexicalImport from 'lexical'\nconst { $getNodeByKey, COMMAND_PRIORITY_EDITOR } = lexicalImport\n\nimport type { LexicalEditor } from 'lexical'\n\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { EnabledRelationshipsCondition } from '../../relationship/utils/EnabledRelationshipsCondition.js'\nimport { $createUploadNode } from '../nodes/UploadNode.js'\nimport { INSERT_UPLOAD_COMMAND } from '../plugin/index.js'\nimport { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from './commands.js'\n\nconst baseClass = 'lexical-upload-drawer'\n\nconst insertUpload = ({\n  id,\n  editor,\n  relationTo,\n  replaceNodeKey,\n}: {\n  editor: LexicalEditor\n  id: string\n  relationTo: string\n  replaceNodeKey: null | string\n}) => {\n  if (!replaceNodeKey) {\n    editor.dispatchCommand(INSERT_UPLOAD_COMMAND, {\n      id,\n      fields: null,\n      relationTo,\n    })\n  } else {\n    editor.update(() => {\n      const node = $getNodeByKey(replaceNodeKey)\n      if (node) {\n        node.replace(\n          $createUploadNode({\n            data: {\n              fields: null,\n              relationTo,\n              value: {\n                id,\n              },\n            },\n          }),\n        )\n      }\n    })\n  }\n}\n\ntype Props = {\n  enabledCollectionSlugs: string[]\n}\n\nconst UploadDrawerComponent: React.FC<Props> = ({ enabledCollectionSlugs }) => {\n  const [editor] = useLexicalComposerContext()\n\n  const [replaceNodeKey, setReplaceNodeKey] = useState<null | string>(null)\n\n  const [ListDrawer, ListDrawerToggler, { closeDrawer, openDrawer }] = useListDrawer({\n    collectionSlugs: enabledCollectionSlugs,\n    uploads: true,\n  })\n\n  useEffect(() => {\n    return editor.registerCommand<{\n      replace: { nodeKey: string } | false\n    }>(\n      INSERT_UPLOAD_WITH_DRAWER_COMMAND,\n      (payload) => {\n        setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null)\n        openDrawer()\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor, openDrawer])\n\n  const onSelect = useCallback(\n    ({ collectionSlug, docID }) => {\n      insertUpload({\n        id: docID,\n        editor,\n        relationTo: collectionSlug,\n        replaceNodeKey,\n      })\n      closeDrawer()\n    },\n    [editor, closeDrawer, replaceNodeKey],\n  )\n\n  return <ListDrawer onSelect={onSelect} />\n}\n\nexport const UploadDrawer = (props: Props): React.ReactNode => {\n  return (\n    <EnabledRelationshipsCondition {...props} uploads>\n      <UploadDrawerComponent {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["lexicalComposerContextImport","useLexicalComposerContext","useListDrawer","lexicalImport","$getNodeByKey","COMMAND_PRIORITY_EDITOR","React","useCallback","useEffect","useState","EnabledRelationshipsCondition","$createUploadNode","INSERT_UPLOAD_COMMAND","INSERT_UPLOAD_WITH_DRAWER_COMMAND","baseClass","insertUpload","id","editor","relationTo","replaceNodeKey","dispatchCommand","fields","update","node","replace","data","value","UploadDrawerComponent","enabledCollectionSlugs","setReplaceNodeKey","ListDrawer","ListDrawerToggler","closeDrawer","openDrawer","collectionSlugs","uploads","registerCommand","payload","nodeKey","onSelect","collectionSlug","docID","UploadDrawer","props"],"mappings":"AAAA;AACA,OAAOA,kCAAkC,2CAA0C;AACnF,MAAM,EAAEC,yBAAyB,EAAE,GAAGD;AACtC,SAASE,aAAa,QAAQ,iBAAgB;AAC9C,OAAOC,mBAAmB,UAAS;AACnC,MAAM,EAAEC,aAAa,EAAEC,uBAAuB,EAAE,GAAGF;AAInD,OAAOG,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAE/D,SAASC,6BAA6B,QAAQ,4DAA2D;AACzG,SAASC,iBAAiB,QAAQ,yBAAwB;AAC1D,SAASC,qBAAqB,QAAQ,qBAAoB;AAC1D,SAASC,iCAAiC,QAAQ,gBAAe;AAEjE,MAAMC,YAAY;AAElB,MAAMC,eAAe,CAAC,EACpBC,EAAE,EACFC,MAAM,EACNC,UAAU,EACVC,cAAc,EAMf;IACC,IAAI,CAACA,gBAAgB;QACnBF,OAAOG,eAAe,CAACR,uBAAuB;YAC5CI;YACAK,QAAQ;YACRH;QACF;IACF,OAAO;QACLD,OAAOK,MAAM,CAAC;YACZ,MAAMC,OAAOnB,cAAce;YAC3B,IAAII,MAAM;gBACRA,KAAKC,OAAO,CACVb,kBAAkB;oBAChBc,MAAM;wBACJJ,QAAQ;wBACRH;wBACAQ,OAAO;4BACLV;wBACF;oBACF;gBACF;YAEJ;QACF;IACF;AACF;AAMA,MAAMW,wBAAyC,CAAC,EAAEC,sBAAsB,EAAE;IACxE,MAAM,CAACX,OAAO,GAAGhB;IAEjB,MAAM,CAACkB,gBAAgBU,kBAAkB,GAAGpB,SAAwB;IAEpE,MAAM,CAACqB,YAAYC,mBAAmB,EAAEC,WAAW,EAAEC,UAAU,EAAE,CAAC,GAAG/B,cAAc;QACjFgC,iBAAiBN;QACjBO,SAAS;IACX;IAEA3B,UAAU;QACR,OAAOS,OAAOmB,eAAe,CAG3BvB,mCACA,CAACwB;YACCR,kBAAkBQ,SAASb,UAAUa,SAASb,QAAQc,UAAU;YAChEL;YACA,OAAO;QACT,GACA5B;IAEJ,GAAG;QAACY;QAAQgB;KAAW;IAEvB,MAAMM,WAAWhC,YACf,CAAC,EAAEiC,cAAc,EAAEC,KAAK,EAAE;QACxB1B,aAAa;YACXC,IAAIyB;YACJxB;YACAC,YAAYsB;YACZrB;QACF;QACAa;IACF,GACA;QAACf;QAAQe;QAAab;KAAe;IAGvC,qBAAO,oBAACW;QAAWS,UAAUA;;AAC/B;AAEA,OAAO,MAAMG,eAAe,CAACC;IAC3B,qBACE,oBAACjC;QAA+B,GAAGiC,KAAK;QAAER,SAAAA;qBACxC,oBAACR,uBAA0BgB;AAGjC,EAAC"}
+{"version":3,"sources":["../../../../../src/field/features/upload/drawer/index.tsx"],"sourcesContent":["'use client'\nimport lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'\nconst { useLexicalComposerContext } = lexicalComposerContextImport\nimport lexicalImport from 'lexical'\nconst { $getNodeByKey, COMMAND_PRIORITY_EDITOR } = lexicalImport\n\nimport type { LexicalEditor } from 'lexical'\n\nimport { useListDrawer } from '@payloadcms/ui/elements/ListDrawer'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { EnabledRelationshipsCondition } from '../../relationship/utils/EnabledRelationshipsCondition.js'\nimport { $createUploadNode } from '../nodes/UploadNode.js'\nimport { INSERT_UPLOAD_COMMAND } from '../plugin/index.js'\nimport { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from './commands.js'\n\nconst baseClass = 'lexical-upload-drawer'\n\nconst insertUpload = ({\n  id,\n  editor,\n  relationTo,\n  replaceNodeKey,\n}: {\n  editor: LexicalEditor\n  id: string\n  relationTo: string\n  replaceNodeKey: null | string\n}) => {\n  if (!replaceNodeKey) {\n    editor.dispatchCommand(INSERT_UPLOAD_COMMAND, {\n      id,\n      fields: null,\n      relationTo,\n    })\n  } else {\n    editor.update(() => {\n      const node = $getNodeByKey(replaceNodeKey)\n      if (node) {\n        node.replace(\n          $createUploadNode({\n            data: {\n              fields: null,\n              relationTo,\n              value: {\n                id,\n              },\n            },\n          }),\n        )\n      }\n    })\n  }\n}\n\ntype Props = {\n  enabledCollectionSlugs: string[]\n}\n\nconst UploadDrawerComponent: React.FC<Props> = ({ enabledCollectionSlugs }) => {\n  const [editor] = useLexicalComposerContext()\n\n  const [replaceNodeKey, setReplaceNodeKey] = useState<null | string>(null)\n\n  const [ListDrawer, ListDrawerToggler, { closeDrawer, openDrawer }] = useListDrawer({\n    collectionSlugs: enabledCollectionSlugs,\n    uploads: true,\n  })\n\n  useEffect(() => {\n    return editor.registerCommand<{\n      replace: { nodeKey: string } | false\n    }>(\n      INSERT_UPLOAD_WITH_DRAWER_COMMAND,\n      (payload) => {\n        setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null)\n        openDrawer()\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor, openDrawer])\n\n  const onSelect = useCallback(\n    ({ collectionSlug, docID }) => {\n      insertUpload({\n        id: docID,\n        editor,\n        relationTo: collectionSlug,\n        replaceNodeKey,\n      })\n      closeDrawer()\n    },\n    [editor, closeDrawer, replaceNodeKey],\n  )\n\n  return <ListDrawer onSelect={onSelect} />\n}\n\nexport const UploadDrawer = (props: Props): React.ReactNode => {\n  return (\n    <EnabledRelationshipsCondition {...props} uploads>\n      <UploadDrawerComponent {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["lexicalComposerContextImport","useLexicalComposerContext","lexicalImport","$getNodeByKey","COMMAND_PRIORITY_EDITOR","useListDrawer","React","useCallback","useEffect","useState","EnabledRelationshipsCondition","$createUploadNode","INSERT_UPLOAD_COMMAND","INSERT_UPLOAD_WITH_DRAWER_COMMAND","baseClass","insertUpload","id","editor","relationTo","replaceNodeKey","dispatchCommand","fields","update","node","replace","data","value","UploadDrawerComponent","enabledCollectionSlugs","setReplaceNodeKey","ListDrawer","ListDrawerToggler","closeDrawer","openDrawer","collectionSlugs","uploads","registerCommand","payload","nodeKey","onSelect","collectionSlug","docID","UploadDrawer","props"],"mappings":"AAAA;AACA,OAAOA,kCAAkC,2CAA0C;AACnF,MAAM,EAAEC,yBAAyB,EAAE,GAAGD;AACtC,OAAOE,mBAAmB,UAAS;AACnC,MAAM,EAAEC,aAAa,EAAEC,uBAAuB,EAAE,GAAGF;AAInD,SAASG,aAAa,QAAQ,qCAAoC;AAClE,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAE/D,SAASC,6BAA6B,QAAQ,4DAA2D;AACzG,SAASC,iBAAiB,QAAQ,yBAAwB;AAC1D,SAASC,qBAAqB,QAAQ,qBAAoB;AAC1D,SAASC,iCAAiC,QAAQ,gBAAe;AAEjE,MAAMC,YAAY;AAElB,MAAMC,eAAe,CAAC,EACpBC,EAAE,EACFC,MAAM,EACNC,UAAU,EACVC,cAAc,EAMf;IACC,IAAI,CAACA,gBAAgB;QACnBF,OAAOG,eAAe,CAACR,uBAAuB;YAC5CI;YACAK,QAAQ;YACRH;QACF;IACF,OAAO;QACLD,OAAOK,MAAM,CAAC;YACZ,MAAMC,OAAOpB,cAAcgB;YAC3B,IAAII,MAAM;gBACRA,KAAKC,OAAO,CACVb,kBAAkB;oBAChBc,MAAM;wBACJJ,QAAQ;wBACRH;wBACAQ,OAAO;4BACLV;wBACF;oBACF;gBACF;YAEJ;QACF;IACF;AACF;AAMA,MAAMW,wBAAyC,CAAC,EAAEC,sBAAsB,EAAE;IACxE,MAAM,CAACX,OAAO,GAAGhB;IAEjB,MAAM,CAACkB,gBAAgBU,kBAAkB,GAAGpB,SAAwB;IAEpE,MAAM,CAACqB,YAAYC,mBAAmB,EAAEC,WAAW,EAAEC,UAAU,EAAE,CAAC,GAAG5B,cAAc;QACjF6B,iBAAiBN;QACjBO,SAAS;IACX;IAEA3B,UAAU;QACR,OAAOS,OAAOmB,eAAe,CAG3BvB,mCACA,CAACwB;YACCR,kBAAkBQ,SAASb,UAAUa,SAASb,QAAQc,UAAU;YAChEL;YACA,OAAO;QACT,GACA7B;IAEJ,GAAG;QAACa;QAAQgB;KAAW;IAEvB,MAAMM,WAAWhC,YACf,CAAC,EAAEiC,cAAc,EAAEC,KAAK,EAAE;QACxB1B,aAAa;YACXC,IAAIyB;YACJxB;YACAC,YAAYsB;YACZrB;QACF;QACAa;IACF,GACA;QAACf;QAAQe;QAAab;KAAe;IAGvC,qBAAO,oBAACW;QAAWS,UAAUA;;AAC/B;AAEA,OAAO,MAAMG,eAAe,CAACC;IAC3B,qBACE,oBAACjC;QAA+B,GAAGiC,KAAK;QAAER,SAAAA;qBACxC,oBAACR,uBAA0BgB;AAGjC,EAAC"}

package/dist/field/features/upload/nodes/UploadNode.js

@@ -7,12 +7,12 @@ const RawUploadComponent = /*#__PURE__*/ React.lazy(()=>import('../component/ind
             default: module.UploadComponent
         })));
 function convertUploadElement(domNode) {
-    if (domNode instanceof HTMLImageElement) {
+    //if (domNode instanceof HTMLImageElement) {
     // const { alt: altText, src } = domNode;
     // const node = $createImageNode({ altText, src });
     // return { node };
     // TODO: Auto-upload functionality here!
-    }
+    //}
     return null;
 }
 export class UploadNode extends DecoratorBlockNode {

package/dist/field/features/upload/nodes/UploadNode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/features/upload/nodes/UploadNode.tsx"],"sourcesContent":["import type { SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'\nimport type { ElementFormatType, NodeKey } from 'lexical'\n\nimport lexicalDecoratorBlockNodeImport from '@lexical/react/LexicalDecoratorBlockNode.js'\nconst { DecoratorBlockNode } = lexicalDecoratorBlockNodeImport\n\nimport lexicalImport from 'lexical'\nconst { $applyNodeReplacement } = lexicalImport\n\nimport type {\n  DOMConversionMap,\n  DOMConversionOutput,\n  DOMExportOutput,\n  LexicalNode,\n  Spread,\n} from 'lexical'\n\nimport * as React from 'react'\n\nconst RawUploadComponent = React.lazy(() =>\n  import('../component/index.js').then((module) => ({ default: module.UploadComponent })),\n)\n\nexport type RawUploadPayload = {\n  fields: {\n    // unknown, custom fields:\n    [key: string]: unknown\n  }\n  id: string\n  relationTo: string\n}\n\nexport type UploadData = {\n  fields: {\n    // unknown, custom fields:\n    [key: string]: unknown\n  }\n  relationTo: string\n  value: {\n    // Actual upload data, populated in afterRead hook\n    [key: string]: unknown\n    id: string\n  }\n}\n\nfunction convertUploadElement(domNode: Node): DOMConversionOutput | null {\n  if (domNode instanceof HTMLImageElement) {\n    // const { alt: altText, src } = domNode;\n    // const node = $createImageNode({ altText, src });\n    // return { node };\n    // TODO: Auto-upload functionality here!\n  }\n  return null\n}\n\nexport type SerializedUploadNode = Spread<UploadData, SerializedDecoratorBlockNode>\n\nexport class UploadNode extends DecoratorBlockNode {\n  __data: UploadData\n\n  constructor({\n    data,\n    format,\n    key,\n  }: {\n    data: UploadData\n    format?: ElementFormatType\n    key?: NodeKey\n  }) {\n    super(format, key)\n    this.__data = data\n  }\n\n  static clone(node: UploadNode): UploadNode {\n    return new UploadNode({\n      data: node.__data,\n      format: node.__format,\n      key: node.__key,\n    })\n  }\n\n  static getType(): string {\n    return 'upload'\n  }\n\n  static importDOM(): DOMConversionMap | null {\n    return {\n      img: (node: Node) => ({\n        conversion: convertUploadElement,\n        priority: 0,\n      }),\n    }\n  }\n\n  static importJSON(serializedNode: SerializedUploadNode): UploadNode {\n    const importedData: UploadData = {\n      fields: serializedNode.fields,\n      relationTo: serializedNode.relationTo,\n      value: serializedNode.value,\n    }\n\n    const node = $createUploadNode({ data: importedData })\n    node.setFormat(serializedNode.format)\n\n    return node\n  }\n\n  static isInline(): false {\n    return false\n  }\n\n  decorate(): JSX.Element {\n    // @ts-expect-error\n    return <RawUploadComponent data={this.__data} format={this.__format} nodeKey={this.getKey()} />\n  }\n\n  exportDOM(): DOMExportOutput {\n    const element = document.createElement('img')\n    // element.setAttribute('src', this.__src);\n    // element.setAttribute('alt', this.__altText); //TODO\n    return { element }\n  }\n\n  exportJSON(): SerializedUploadNode {\n    return {\n      ...super.exportJSON(),\n      ...this.getData(),\n      type: this.getType(),\n      version: 1,\n    }\n  }\n\n  getData(): UploadData {\n    return this.getLatest().__data\n  }\n\n  setData(data: UploadData): void {\n    const writable = this.getWritable()\n    writable.__data = data\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  updateDOM(): false {\n    return false\n  }\n}\n\nexport function $createUploadNode({ data }: { data: UploadData }): UploadNode {\n  return $applyNodeReplacement(new UploadNode({ data }))\n}\n\nexport function $isUploadNode(node: LexicalNode | null | undefined): node is UploadNode {\n  return node instanceof UploadNode\n}\n"],"names":["lexicalDecoratorBlockNodeImport","DecoratorBlockNode","lexicalImport","$applyNodeReplacement","React","RawUploadComponent","lazy","then","module","default","UploadComponent","convertUploadElement","domNode","HTMLImageElement","UploadNode","__data","constructor","data","format","key","clone","node","__format","__key","getType","importDOM","img","conversion","priority","importJSON","serializedNode","importedData","fields","relationTo","value","$createUploadNode","setFormat","isInline","decorate","nodeKey","getKey","exportDOM","element","document","createElement","exportJSON","getData","type","version","getLatest","setData","writable","getWritable","updateDOM","$isUploadNode"],"mappings":"AAGA,OAAOA,qCAAqC,8CAA6C;AACzF,MAAM,EAAEC,kBAAkB,EAAE,GAAGD;AAE/B,OAAOE,mBAAmB,UAAS;AACnC,MAAM,EAAEC,qBAAqB,EAAE,GAAGD;AAUlC,YAAYE,WAAW,QAAO;AAE9B,MAAMC,mCAAqBD,MAAME,IAAI,CAAC,IACpC,MAAM,CAAC,yBAAyBC,IAAI,CAAC,CAACC,SAAY,CAAA;YAAEC,SAASD,OAAOE,eAAe;QAAC,CAAA;AAyBtF,SAASC,qBAAqBC,OAAa;IACzC,IAAIA,mBAAmBC,kBAAkB;IACvC,yCAAyC;IACzC,mDAAmD;IACnD,mBAAmB;IACnB,wCAAwC;IAC1C;IACA,OAAO;AACT;AAIA,OAAO,MAAMC,mBAAmBb;IAC9Bc,OAAkB;IAElBC,YAAY,EACVC,IAAI,EACJC,MAAM,EACNC,GAAG,EAKJ,CAAE;QACD,KAAK,CAACD,QAAQC;QACd,IAAI,CAACJ,MAAM,GAAGE;IAChB;IAEA,OAAOG,MAAMC,IAAgB,EAAc;QACzC,OAAO,IAAIP,WAAW;YACpBG,MAAMI,KAAKN,MAAM;YACjBG,QAAQG,KAAKC,QAAQ;YACrBH,KAAKE,KAAKE,KAAK;QACjB;IACF;IAEA,OAAOC,UAAkB;QACvB,OAAO;IACT;IAEA,OAAOC,YAAqC;QAC1C,OAAO;YACLC,KAAK,CAACL,OAAgB,CAAA;oBACpBM,YAAYhB;oBACZiB,UAAU;gBACZ,CAAA;QACF;IACF;IAEA,OAAOC,WAAWC,cAAoC,EAAc;QAClE,MAAMC,eAA2B;YAC/BC,QAAQF,eAAeE,MAAM;YAC7BC,YAAYH,eAAeG,UAAU;YACrCC,OAAOJ,eAAeI,KAAK;QAC7B;QAEA,MAAMb,OAAOc,kBAAkB;YAAElB,MAAMc;QAAa;QACpDV,KAAKe,SAAS,CAACN,eAAeZ,MAAM;QAEpC,OAAOG;IACT;IAEA,OAAOgB,WAAkB;QACvB,OAAO;IACT;IAEAC,WAAwB;QACtB,mBAAmB;QACnB,qBAAO,oBAACjC;YAAmBY,MAAM,IAAI,CAACF,MAAM;YAAEG,QAAQ,IAAI,CAACI,QAAQ;YAAEiB,SAAS,IAAI,CAACC,MAAM;;IAC3F;IAEAC,YAA6B;QAC3B,MAAMC,UAAUC,SAASC,aAAa,CAAC;QACvC,2CAA2C;QAC3C,sDAAsD;QACtD,OAAO;YAAEF;QAAQ;IACnB;IAEAG,aAAmC;QACjC,OAAO;YACL,GAAG,KAAK,CAACA,YAAY;YACrB,GAAG,IAAI,CAACC,OAAO,EAAE;YACjBC,MAAM,IAAI,CAACvB,OAAO;YAClBwB,SAAS;QACX;IACF;IAEAF,UAAsB;QACpB,OAAO,IAAI,CAACG,SAAS,GAAGlC,MAAM;IAChC;IAEAmC,QAAQjC,IAAgB,EAAQ;QAC9B,MAAMkC,WAAW,IAAI,CAACC,WAAW;QACjCD,SAASpC,MAAM,GAAGE;IACpB;IAEA,kDAAkD;IAClDoC,YAAmB;QACjB,OAAO;IACT;AACF;AAEA,OAAO,SAASlB,kBAAkB,EAAElB,IAAI,EAAwB;IAC9D,OAAOd,sBAAsB,IAAIW,WAAW;QAAEG;IAAK;AACrD;AAEA,OAAO,SAASqC,cAAcjC,IAAoC;IAChE,OAAOA,gBAAgBP;AACzB"}
+{"version":3,"sources":["../../../../../src/field/features/upload/nodes/UploadNode.tsx"],"sourcesContent":["import type { SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'\nimport type { ElementFormatType, NodeKey } from 'lexical'\n\nimport lexicalDecoratorBlockNodeImport from '@lexical/react/LexicalDecoratorBlockNode.js'\nconst { DecoratorBlockNode } = lexicalDecoratorBlockNodeImport\n\nimport lexicalImport from 'lexical'\nconst { $applyNodeReplacement } = lexicalImport\n\nimport type {\n  DOMConversionMap,\n  DOMConversionOutput,\n  DOMExportOutput,\n  LexicalNode,\n  Spread,\n} from 'lexical'\n\nimport * as React from 'react'\n\nconst RawUploadComponent = React.lazy(() =>\n  import('../component/index.js').then((module) => ({ default: module.UploadComponent })),\n)\n\nexport type RawUploadPayload = {\n  fields: {\n    // unknown, custom fields:\n    [key: string]: unknown\n  }\n  id: string\n  relationTo: string\n}\n\nexport type UploadData = {\n  fields: {\n    // unknown, custom fields:\n    [key: string]: unknown\n  }\n  relationTo: string\n  value: {\n    // Actual upload data, populated in afterRead hook\n    [key: string]: unknown\n    id: string\n  }\n}\n\nfunction convertUploadElement(domNode: Node): DOMConversionOutput | null {\n  //if (domNode instanceof HTMLImageElement) {\n  // const { alt: altText, src } = domNode;\n  // const node = $createImageNode({ altText, src });\n  // return { node };\n  // TODO: Auto-upload functionality here!\n  //}\n  return null\n}\n\nexport type SerializedUploadNode = Spread<UploadData, SerializedDecoratorBlockNode>\n\nexport class UploadNode extends DecoratorBlockNode {\n  __data: UploadData\n\n  constructor({\n    data,\n    format,\n    key,\n  }: {\n    data: UploadData\n    format?: ElementFormatType\n    key?: NodeKey\n  }) {\n    super(format, key)\n    this.__data = data\n  }\n\n  static clone(node: UploadNode): UploadNode {\n    return new UploadNode({\n      data: node.__data,\n      format: node.__format,\n      key: node.__key,\n    })\n  }\n\n  static getType(): string {\n    return 'upload'\n  }\n\n  static importDOM(): DOMConversionMap | null {\n    return {\n      img: (node: Node) => ({\n        conversion: convertUploadElement,\n        priority: 0,\n      }),\n    }\n  }\n\n  static importJSON(serializedNode: SerializedUploadNode): UploadNode {\n    const importedData: UploadData = {\n      fields: serializedNode.fields,\n      relationTo: serializedNode.relationTo,\n      value: serializedNode.value,\n    }\n\n    const node = $createUploadNode({ data: importedData })\n    node.setFormat(serializedNode.format)\n\n    return node\n  }\n\n  static isInline(): false {\n    return false\n  }\n\n  decorate(): JSX.Element {\n    // @ts-expect-error\n    return <RawUploadComponent data={this.__data} format={this.__format} nodeKey={this.getKey()} />\n  }\n\n  exportDOM(): DOMExportOutput {\n    const element = document.createElement('img')\n    // element.setAttribute('src', this.__src);\n    // element.setAttribute('alt', this.__altText); //TODO\n    return { element }\n  }\n\n  exportJSON(): SerializedUploadNode {\n    return {\n      ...super.exportJSON(),\n      ...this.getData(),\n      type: this.getType(),\n      version: 1,\n    }\n  }\n\n  getData(): UploadData {\n    return this.getLatest().__data\n  }\n\n  setData(data: UploadData): void {\n    const writable = this.getWritable()\n    writable.__data = data\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  updateDOM(): false {\n    return false\n  }\n}\n\nexport function $createUploadNode({ data }: { data: UploadData }): UploadNode {\n  return $applyNodeReplacement(new UploadNode({ data }))\n}\n\nexport function $isUploadNode(node: LexicalNode | null | undefined): node is UploadNode {\n  return node instanceof UploadNode\n}\n"],"names":["lexicalDecoratorBlockNodeImport","DecoratorBlockNode","lexicalImport","$applyNodeReplacement","React","RawUploadComponent","lazy","then","module","default","UploadComponent","convertUploadElement","domNode","UploadNode","__data","constructor","data","format","key","clone","node","__format","__key","getType","importDOM","img","conversion","priority","importJSON","serializedNode","importedData","fields","relationTo","value","$createUploadNode","setFormat","isInline","decorate","nodeKey","getKey","exportDOM","element","document","createElement","exportJSON","getData","type","version","getLatest","setData","writable","getWritable","updateDOM","$isUploadNode"],"mappings":"AAGA,OAAOA,qCAAqC,8CAA6C;AACzF,MAAM,EAAEC,kBAAkB,EAAE,GAAGD;AAE/B,OAAOE,mBAAmB,UAAS;AACnC,MAAM,EAAEC,qBAAqB,EAAE,GAAGD;AAUlC,YAAYE,WAAW,QAAO;AAE9B,MAAMC,mCAAqBD,MAAME,IAAI,CAAC,IACpC,MAAM,CAAC,yBAAyBC,IAAI,CAAC,CAACC,SAAY,CAAA;YAAEC,SAASD,OAAOE,eAAe;QAAC,CAAA;AAyBtF,SAASC,qBAAqBC,OAAa;IACzC,4CAA4C;IAC5C,yCAAyC;IACzC,mDAAmD;IACnD,mBAAmB;IACnB,wCAAwC;IACxC,GAAG;IACH,OAAO;AACT;AAIA,OAAO,MAAMC,mBAAmBZ;IAC9Ba,OAAkB;IAElBC,YAAY,EACVC,IAAI,EACJC,MAAM,EACNC,GAAG,EAKJ,CAAE;QACD,KAAK,CAACD,QAAQC;QACd,IAAI,CAACJ,MAAM,GAAGE;IAChB;IAEA,OAAOG,MAAMC,IAAgB,EAAc;QACzC,OAAO,IAAIP,WAAW;YACpBG,MAAMI,KAAKN,MAAM;YACjBG,QAAQG,KAAKC,QAAQ;YACrBH,KAAKE,KAAKE,KAAK;QACjB;IACF;IAEA,OAAOC,UAAkB;QACvB,OAAO;IACT;IAEA,OAAOC,YAAqC;QAC1C,OAAO;YACLC,KAAK,CAACL,OAAgB,CAAA;oBACpBM,YAAYf;oBACZgB,UAAU;gBACZ,CAAA;QACF;IACF;IAEA,OAAOC,WAAWC,cAAoC,EAAc;QAClE,MAAMC,eAA2B;YAC/BC,QAAQF,eAAeE,MAAM;YAC7BC,YAAYH,eAAeG,UAAU;YACrCC,OAAOJ,eAAeI,KAAK;QAC7B;QAEA,MAAMb,OAAOc,kBAAkB;YAAElB,MAAMc;QAAa;QACpDV,KAAKe,SAAS,CAACN,eAAeZ,MAAM;QAEpC,OAAOG;IACT;IAEA,OAAOgB,WAAkB;QACvB,OAAO;IACT;IAEAC,WAAwB;QACtB,mBAAmB;QACnB,qBAAO,oBAAChC;YAAmBW,MAAM,IAAI,CAACF,MAAM;YAAEG,QAAQ,IAAI,CAACI,QAAQ;YAAEiB,SAAS,IAAI,CAACC,MAAM;;IAC3F;IAEAC,YAA6B;QAC3B,MAAMC,UAAUC,SAASC,aAAa,CAAC;QACvC,2CAA2C;QAC3C,sDAAsD;QACtD,OAAO;YAAEF;QAAQ;IACnB;IAEAG,aAAmC;QACjC,OAAO;YACL,GAAG,KAAK,CAACA,YAAY;YACrB,GAAG,IAAI,CAACC,OAAO,EAAE;YACjBC,MAAM,IAAI,CAACvB,OAAO;YAClBwB,SAAS;QACX;IACF;IAEAF,UAAsB;QACpB,OAAO,IAAI,CAACG,SAAS,GAAGlC,MAAM;IAChC;IAEAmC,QAAQjC,IAAgB,EAAQ;QAC9B,MAAMkC,WAAW,IAAI,CAACC,WAAW;QACjCD,SAASpC,MAAM,GAAGE;IACpB;IAEA,kDAAkD;IAClDoC,YAAmB;QACjB,OAAO;IACT;AACF;AAEA,OAAO,SAASlB,kBAAkB,EAAElB,IAAI,EAAwB;IAC9D,OAAOb,sBAAsB,IAAIU,WAAW;QAAEG;IAAK;AACrD;AAEA,OAAO,SAASqC,cAAcjC,IAAoC;IAChE,OAAOA,gBAAgBP;AACzB"}

package/dist/field/features/upload/plugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/upload/plugin/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAI7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAK9D,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAA;AAE5D,eAAO,MAAM,qBAAqB,EAAE,cAAc,CAAC,mBAAmB,CAC9B,CAAA;AAExC,wBAAgB,YAAY,IAAI,GAAG,CAAC,OAAO,GAAG,IAAI,CAuDjD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/upload/plugin/index.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAK7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAK9D,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAA;AAE5D,eAAO,MAAM,qBAAqB,EAAE,cAAc,CAAC,mBAAmB,CAC9B,CAAA;AAExC,wBAAgB,YAAY,IAAI,GAAG,CAAC,OAAO,GAAG,IAAI,CAuDjD"}

package/dist/field/features/upload/plugin/index.js

@@ -3,9 +3,9 @@ import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.
 const { useLexicalComposerContext } = lexicalComposerContextImport;
 import lexicalUtilsImport from '@lexical/utils';
 const { $insertNodeToNearestRoot, mergeRegister } = lexicalUtilsImport;
-import { useConfig } from '@payloadcms/ui';
 import lexicalImport from 'lexical';
 const { $getPreviousSelection, $getSelection, $isParagraphNode, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } = lexicalImport;
+import { useConfig } from '@payloadcms/ui/providers/Config';
 import React, { useEffect } from 'react';
 import { UploadDrawer } from '../drawer/index.js';
 import { $createUploadNode, UploadNode } from '../nodes/UploadNode.js';

package/dist/field/features/upload/plugin/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/features/upload/plugin/index.tsx"],"sourcesContent":["'use client'\nimport lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'\nconst { useLexicalComposerContext } = lexicalComposerContextImport\nimport lexicalUtilsImport from '@lexical/utils'\nconst { $insertNodeToNearestRoot, mergeRegister } = lexicalUtilsImport\nimport { useConfig } from '@payloadcms/ui'\nimport lexicalImport from 'lexical'\nconst {\n  $getPreviousSelection,\n  $getSelection,\n  $isParagraphNode,\n  $isRangeSelection,\n  COMMAND_PRIORITY_EDITOR,\n  createCommand,\n} = lexicalImport\n\nimport type { LexicalCommand } from 'lexical'\n\nimport React, { useEffect } from 'react'\n\nimport type { RawUploadPayload } from '../nodes/UploadNode.js'\n\nimport { UploadDrawer } from '../drawer/index.js'\nimport { $createUploadNode, UploadNode } from '../nodes/UploadNode.js'\n\nexport type InsertUploadPayload = Readonly<RawUploadPayload>\n\nexport const INSERT_UPLOAD_COMMAND: LexicalCommand<InsertUploadPayload> =\n  createCommand('INSERT_UPLOAD_COMMAND')\n\nexport function UploadPlugin(): JSX.Element | null {\n  const [editor] = useLexicalComposerContext()\n  const { collections } = useConfig()\n\n  useEffect(() => {\n    if (!editor.hasNodes([UploadNode])) {\n      throw new Error('UploadPlugin: UploadNode not registered on editor')\n    }\n\n    return mergeRegister(\n      editor.registerCommand<InsertUploadPayload>(\n        INSERT_UPLOAD_COMMAND,\n        (payload: InsertUploadPayload) => {\n          editor.update(() => {\n            const uploadNode = $createUploadNode({\n              data: {\n                fields: payload.fields,\n                relationTo: payload.relationTo,\n                value: {\n                  id: payload.id,\n                },\n              },\n            })\n\n            const selection = $getSelection() || $getPreviousSelection()\n\n            if ($isRangeSelection(selection)) {\n              const { focus } = selection\n              const focusNode = focus.getNode()\n\n              // First, delete currently selected node if it's an empty paragraph and if there are sufficient\n              // paragraph nodes (more than 1) left in the parent node, so that we don't \"trap\" the user\n              if (\n                $isParagraphNode(focusNode) &&\n                focusNode.getTextContentSize() === 0 &&\n                focusNode\n                  .getParent()\n                  .getChildren()\n                  .filter((node) => $isParagraphNode(node)).length > 1\n              ) {\n                focusNode.remove()\n              }\n\n              $insertNodeToNearestRoot(uploadNode)\n            }\n          })\n\n          return true\n        },\n        COMMAND_PRIORITY_EDITOR,\n      ),\n    )\n  }, [editor])\n\n  return <UploadDrawer enabledCollectionSlugs={collections.map(({ slug }) => slug)} />\n}\n"],"names":["lexicalComposerContextImport","useLexicalComposerContext","lexicalUtilsImport","$insertNodeToNearestRoot","mergeRegister","useConfig","lexicalImport","$getPreviousSelection","$getSelection","$isParagraphNode","$isRangeSelection","COMMAND_PRIORITY_EDITOR","createCommand","React","useEffect","UploadDrawer","$createUploadNode","UploadNode","INSERT_UPLOAD_COMMAND","UploadPlugin","editor","collections","hasNodes","Error","registerCommand","payload","update","uploadNode","data","fields","relationTo","value","id","selection","focus","focusNode","getNode","getTextContentSize","getParent","getChildren","filter","node","length","remove","enabledCollectionSlugs","map","slug"],"mappings":"AAAA;AACA,OAAOA,kCAAkC,2CAA0C;AACnF,MAAM,EAAEC,yBAAyB,EAAE,GAAGD;AACtC,OAAOE,wBAAwB,iBAAgB;AAC/C,MAAM,EAAEC,wBAAwB,EAAEC,aAAa,EAAE,GAAGF;AACpD,SAASG,SAAS,QAAQ,iBAAgB;AAC1C,OAAOC,mBAAmB,UAAS;AACnC,MAAM,EACJC,qBAAqB,EACrBC,aAAa,EACbC,gBAAgB,EAChBC,iBAAiB,EACjBC,uBAAuB,EACvBC,aAAa,EACd,GAAGN;AAIJ,OAAOO,SAASC,SAAS,QAAQ,QAAO;AAIxC,SAASC,YAAY,QAAQ,qBAAoB;AACjD,SAASC,iBAAiB,EAAEC,UAAU,QAAQ,yBAAwB;AAItE,OAAO,MAAMC,wBACXN,cAAc,yBAAwB;AAExC,OAAO,SAASO;IACd,MAAM,CAACC,OAAO,GAAGnB;IACjB,MAAM,EAAEoB,WAAW,EAAE,GAAGhB;IAExBS,UAAU;QACR,IAAI,CAACM,OAAOE,QAAQ,CAAC;YAACL;SAAW,GAAG;YAClC,MAAM,IAAIM,MAAM;QAClB;QAEA,OAAOnB,cACLgB,OAAOI,eAAe,CACpBN,uBACA,CAACO;YACCL,OAAOM,MAAM,CAAC;gBACZ,MAAMC,aAAaX,kBAAkB;oBACnCY,MAAM;wBACJC,QAAQJ,QAAQI,MAAM;wBACtBC,YAAYL,QAAQK,UAAU;wBAC9BC,OAAO;4BACLC,IAAIP,QAAQO,EAAE;wBAChB;oBACF;gBACF;gBAEA,MAAMC,YAAYzB,mBAAmBD;gBAErC,IAAIG,kBAAkBuB,YAAY;oBAChC,MAAM,EAAEC,KAAK,EAAE,GAAGD;oBAClB,MAAME,YAAYD,MAAME,OAAO;oBAE/B,+FAA+F;oBAC/F,0FAA0F;oBAC1F,IACE3B,iBAAiB0B,cACjBA,UAAUE,kBAAkB,OAAO,KACnCF,UACGG,SAAS,GACTC,WAAW,GACXC,MAAM,CAAC,CAACC,OAAShC,iBAAiBgC,OAAOC,MAAM,GAAG,GACrD;wBACAP,UAAUQ,MAAM;oBAClB;oBAEAxC,yBAAyBwB;gBAC3B;YACF;YAEA,OAAO;QACT,GACAhB;IAGN,GAAG;QAACS;KAAO;IAEX,qBAAO,oBAACL;QAAa6B,wBAAwBvB,YAAYwB,GAAG,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAKA;;AAC7E"}
+{"version":3,"sources":["../../../../../src/field/features/upload/plugin/index.tsx"],"sourcesContent":["'use client'\nimport lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'\nconst { useLexicalComposerContext } = lexicalComposerContextImport\nimport lexicalUtilsImport from '@lexical/utils'\nconst { $insertNodeToNearestRoot, mergeRegister } = lexicalUtilsImport\nimport lexicalImport from 'lexical'\nconst {\n  $getPreviousSelection,\n  $getSelection,\n  $isParagraphNode,\n  $isRangeSelection,\n  COMMAND_PRIORITY_EDITOR,\n  createCommand,\n} = lexicalImport\n\nimport type { LexicalCommand } from 'lexical'\n\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport React, { useEffect } from 'react'\n\nimport type { RawUploadPayload } from '../nodes/UploadNode.js'\n\nimport { UploadDrawer } from '../drawer/index.js'\nimport { $createUploadNode, UploadNode } from '../nodes/UploadNode.js'\n\nexport type InsertUploadPayload = Readonly<RawUploadPayload>\n\nexport const INSERT_UPLOAD_COMMAND: LexicalCommand<InsertUploadPayload> =\n  createCommand('INSERT_UPLOAD_COMMAND')\n\nexport function UploadPlugin(): JSX.Element | null {\n  const [editor] = useLexicalComposerContext()\n  const { collections } = useConfig()\n\n  useEffect(() => {\n    if (!editor.hasNodes([UploadNode])) {\n      throw new Error('UploadPlugin: UploadNode not registered on editor')\n    }\n\n    return mergeRegister(\n      editor.registerCommand<InsertUploadPayload>(\n        INSERT_UPLOAD_COMMAND,\n        (payload: InsertUploadPayload) => {\n          editor.update(() => {\n            const uploadNode = $createUploadNode({\n              data: {\n                fields: payload.fields,\n                relationTo: payload.relationTo,\n                value: {\n                  id: payload.id,\n                },\n              },\n            })\n\n            const selection = $getSelection() || $getPreviousSelection()\n\n            if ($isRangeSelection(selection)) {\n              const { focus } = selection\n              const focusNode = focus.getNode()\n\n              // First, delete currently selected node if it's an empty paragraph and if there are sufficient\n              // paragraph nodes (more than 1) left in the parent node, so that we don't \"trap\" the user\n              if (\n                $isParagraphNode(focusNode) &&\n                focusNode.getTextContentSize() === 0 &&\n                focusNode\n                  .getParent()\n                  .getChildren()\n                  .filter((node) => $isParagraphNode(node)).length > 1\n              ) {\n                focusNode.remove()\n              }\n\n              $insertNodeToNearestRoot(uploadNode)\n            }\n          })\n\n          return true\n        },\n        COMMAND_PRIORITY_EDITOR,\n      ),\n    )\n  }, [editor])\n\n  return <UploadDrawer enabledCollectionSlugs={collections.map(({ slug }) => slug)} />\n}\n"],"names":["lexicalComposerContextImport","useLexicalComposerContext","lexicalUtilsImport","$insertNodeToNearestRoot","mergeRegister","lexicalImport","$getPreviousSelection","$getSelection","$isParagraphNode","$isRangeSelection","COMMAND_PRIORITY_EDITOR","createCommand","useConfig","React","useEffect","UploadDrawer","$createUploadNode","UploadNode","INSERT_UPLOAD_COMMAND","UploadPlugin","editor","collections","hasNodes","Error","registerCommand","payload","update","uploadNode","data","fields","relationTo","value","id","selection","focus","focusNode","getNode","getTextContentSize","getParent","getChildren","filter","node","length","remove","enabledCollectionSlugs","map","slug"],"mappings":"AAAA;AACA,OAAOA,kCAAkC,2CAA0C;AACnF,MAAM,EAAEC,yBAAyB,EAAE,GAAGD;AACtC,OAAOE,wBAAwB,iBAAgB;AAC/C,MAAM,EAAEC,wBAAwB,EAAEC,aAAa,EAAE,GAAGF;AACpD,OAAOG,mBAAmB,UAAS;AACnC,MAAM,EACJC,qBAAqB,EACrBC,aAAa,EACbC,gBAAgB,EAChBC,iBAAiB,EACjBC,uBAAuB,EACvBC,aAAa,EACd,GAAGN;AAIJ,SAASO,SAAS,QAAQ,kCAAiC;AAC3D,OAAOC,SAASC,SAAS,QAAQ,QAAO;AAIxC,SAASC,YAAY,QAAQ,qBAAoB;AACjD,SAASC,iBAAiB,EAAEC,UAAU,QAAQ,yBAAwB;AAItE,OAAO,MAAMC,wBACXP,cAAc,yBAAwB;AAExC,OAAO,SAASQ;IACd,MAAM,CAACC,OAAO,GAAGnB;IACjB,MAAM,EAAEoB,WAAW,EAAE,GAAGT;IAExBE,UAAU;QACR,IAAI,CAACM,OAAOE,QAAQ,CAAC;YAACL;SAAW,GAAG;YAClC,MAAM,IAAIM,MAAM;QAClB;QAEA,OAAOnB,cACLgB,OAAOI,eAAe,CACpBN,uBACA,CAACO;YACCL,OAAOM,MAAM,CAAC;gBACZ,MAAMC,aAAaX,kBAAkB;oBACnCY,MAAM;wBACJC,QAAQJ,QAAQI,MAAM;wBACtBC,YAAYL,QAAQK,UAAU;wBAC9BC,OAAO;4BACLC,IAAIP,QAAQO,EAAE;wBAChB;oBACF;gBACF;gBAEA,MAAMC,YAAY1B,mBAAmBD;gBAErC,IAAIG,kBAAkBwB,YAAY;oBAChC,MAAM,EAAEC,KAAK,EAAE,GAAGD;oBAClB,MAAME,YAAYD,MAAME,OAAO;oBAE/B,+FAA+F;oBAC/F,0FAA0F;oBAC1F,IACE5B,iBAAiB2B,cACjBA,UAAUE,kBAAkB,OAAO,KACnCF,UACGG,SAAS,GACTC,WAAW,GACXC,MAAM,CAAC,CAACC,OAASjC,iBAAiBiC,OAAOC,MAAM,GAAG,GACrD;wBACAP,UAAUQ,MAAM;oBAClB;oBAEAxC,yBAAyBwB;gBAC3B;YACF;YAEA,OAAO;QACT,GACAjB;IAGN,GAAG;QAACU;KAAO;IAEX,qBAAO,oBAACL;QAAa6B,wBAAwBvB,YAAYwB,GAAG,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAKA;;AAC7E"}

package/dist/field/index.d.ts

@@ -1,5 +1,5 @@
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared';
 import type { EditorConfig as LexicalEditorConfig } from 'lexical/LexicalEditor.js';
-import { type FormFieldBase } from '@payloadcms/ui';
 import React from 'react';
 export declare const RichTextField: React.FC<FormFieldBase & {
     lexicalEditorConfig: LexicalEditorConfig;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/field/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAEnF,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,gBAAgB,CAAA;AAGlE,OAAO,KAA8C,MAAM,OAAO,CAAA;AAclE,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAClC,aAAa,GAAG;IACd,mBAAmB,EAAE,mBAAmB,CAAA;IACxC,IAAI,EAAE,MAAM,CAAA;IACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;CACnD,CA4GF,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/field/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,KAAK,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAKnF,OAAO,KAA8C,MAAM,OAAO,CAAA;AAclE,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAClC,aAAa,GAAG;IACd,mBAAmB,EAAE,mBAAmB,CAAA;IACxC,IAAI,EAAE,MAAM,CAAA;IACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;CACnD,CA4GF,CAAA"}

package/dist/field/index.js

@@ -1,7 +1,7 @@
 'use client';
-import { ShimmerEffect } from '@payloadcms/ui';
-import { useFieldPath } from '@payloadcms/ui/forms';
-import { useClientFunctions } from '@payloadcms/ui/providers';
+import { ShimmerEffect } from '@payloadcms/ui/elements/ShimmerEffect';
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
+import { useClientFunctions } from '@payloadcms/ui/providers/ClientFunction';
 import React, { Suspense, lazy, useEffect, useState } from 'react';
 import { defaultEditorLexicalConfig } from './lexical/config/client/default.js';
 import { loadClientFeatures } from './lexical/config/client/loader.js';
@@ -11,7 +11,7 @@ const RichTextEditor = /*#__PURE__*/ lazy(()=>import('./Field.js').then((module)
         })));
 export const RichTextField = (props)=>{
     const { lexicalEditorConfig, richTextComponentMap } = props;
-    const { schemaPath } = useFieldPath();
+    const { schemaPath } = useFieldProps();
     const clientFunctions = useClientFunctions();
     const [hasLoadedFeatures, setHasLoadedFeatures] = useState(false);
     const [featureProviders, setFeatureProviders] = useState([]);
@@ -65,7 +65,7 @@ export const RichTextField = (props)=>{
             const featureComponentKeys = Array.from(richTextComponentMap.keys()).filter((key)=>key.startsWith(`feature.${featureProvider.key}.components.`));
             const featureComponents = featureComponentKeys.map((key)=>{
                 return richTextComponentMap.get(key);
-            })// TODO: Type better
+            }) // TODO: Type better
             ;
             return /*#__PURE__*/ React.createElement(React.Fragment, {
                 key: featureProvider.key

package/dist/field/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/field/index.tsx"],"sourcesContent":["'use client'\nimport type { EditorConfig as LexicalEditorConfig } from 'lexical/LexicalEditor.js'\n\nimport { type FormFieldBase, ShimmerEffect } from '@payloadcms/ui'\nimport { useFieldPath } from '@payloadcms/ui/forms'\nimport { useClientFunctions } from '@payloadcms/ui/providers'\nimport React, { Suspense, lazy, useEffect, useState } from 'react'\n\nimport type { GeneratedFeatureProviderComponent } from '../types.js'\nimport type { FeatureProviderClient } from './features/types.js'\nimport type { SanitizedClientEditorConfig } from './lexical/config/types.js'\n\nimport { defaultEditorLexicalConfig } from './lexical/config/client/default.js'\nimport { loadClientFeatures } from './lexical/config/client/loader.js'\nimport { sanitizeClientEditorConfig } from './lexical/config/client/sanitize.js'\n\nconst RichTextEditor = lazy(() =>\n  import('./Field.js').then((module) => ({ default: module.RichText })),\n)\n\nexport const RichTextField: React.FC<\n  FormFieldBase & {\n    lexicalEditorConfig: LexicalEditorConfig\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n> = (props) => {\n  const { lexicalEditorConfig, richTextComponentMap } = props\n  const { schemaPath } = useFieldPath()\n  const clientFunctions = useClientFunctions()\n  const [hasLoadedFeatures, setHasLoadedFeatures] = useState(false)\n\n  const [featureProviders, setFeatureProviders] = useState<FeatureProviderClient<unknown>[]>([])\n\n  const [finalSanitizedEditorConfig, setFinalSanitizedEditorConfig] =\n    useState<SanitizedClientEditorConfig>(null)\n\n  let featureProviderComponents: GeneratedFeatureProviderComponent[] = richTextComponentMap.get(\n    'features',\n  ) as GeneratedFeatureProviderComponent[] // TODO: Type better\n  // order by order\n  featureProviderComponents = featureProviderComponents.sort((a, b) => a.order - b.order)\n\n  const featureComponentsWithFeaturesLength =\n    Array.from(richTextComponentMap.keys()).filter(\n      (key) => key.startsWith(`feature.`) && !key.includes('.fields.'),\n    ).length + featureProviderComponents.length\n\n  useEffect(() => {\n    if (!hasLoadedFeatures) {\n      const featureProvidersLocal: FeatureProviderClient<unknown>[] = []\n      let featureProvidersAndComponentsLoaded = 0\n\n      Object.entries(clientFunctions).forEach(([key, plugin]) => {\n        if (key.startsWith(`lexicalFeature.${schemaPath}.`)) {\n          if (!key.includes('.components.')) {\n            featureProvidersLocal.push(plugin)\n          }\n          featureProvidersAndComponentsLoaded++\n        }\n      })\n\n      if (featureProvidersAndComponentsLoaded === featureComponentsWithFeaturesLength) {\n        setFeatureProviders(featureProvidersLocal)\n        setHasLoadedFeatures(true)\n\n        /**\n         * Loaded feature provided => create the final sanitized editor config\n         */\n\n        const resolvedClientFeatures = loadClientFeatures({\n          clientFunctions,\n          schemaPath,\n          unSanitizedEditorConfig: {\n            features: featureProvidersLocal,\n            lexical: lexicalEditorConfig,\n          },\n        })\n\n        setFinalSanitizedEditorConfig(\n          sanitizeClientEditorConfig(\n            lexicalEditorConfig ? lexicalEditorConfig : defaultEditorLexicalConfig,\n            resolvedClientFeatures,\n          ),\n        )\n      }\n    }\n  }, [\n    hasLoadedFeatures,\n    clientFunctions,\n    schemaPath,\n    featureProviderComponents.length,\n    featureProviders,\n    finalSanitizedEditorConfig,\n    lexicalEditorConfig,\n    featureComponentsWithFeaturesLength,\n  ])\n\n  if (!hasLoadedFeatures) {\n    return (\n      <React.Fragment>\n        {Array.isArray(featureProviderComponents) &&\n          featureProviderComponents.map((featureProvider) => {\n            // get all components starting with key feature.${FeatureProvider.key}.components.{featureComponentKey}\n            const featureComponentKeys = Array.from(richTextComponentMap.keys()).filter((key) =>\n              key.startsWith(`feature.${featureProvider.key}.components.`),\n            )\n            const featureComponents: React.ReactNode[] = featureComponentKeys.map((key) => {\n              return richTextComponentMap.get(key)\n            }) as React.ReactNode[] // TODO: Type better\n\n            return (\n              <React.Fragment key={featureProvider.key}>\n                {featureComponents?.length\n                  ? featureComponents.map((FeatureComponent) => {\n                      return FeatureComponent\n                    })\n                  : null}\n                {featureProvider.ClientComponent}\n              </React.Fragment>\n            )\n          })}\n      </React.Fragment>\n    )\n  }\n\n  return (\n    <Suspense fallback={<ShimmerEffect height=\"35vh\" />}>\n      {finalSanitizedEditorConfig && (\n        <RichTextEditor {...props} editorConfig={finalSanitizedEditorConfig} />\n      )}\n    </Suspense>\n  )\n}\n"],"names":["ShimmerEffect","useFieldPath","useClientFunctions","React","Suspense","lazy","useEffect","useState","defaultEditorLexicalConfig","loadClientFeatures","sanitizeClientEditorConfig","RichTextEditor","then","module","default","RichText","RichTextField","props","lexicalEditorConfig","richTextComponentMap","schemaPath","clientFunctions","hasLoadedFeatures","setHasLoadedFeatures","featureProviders","setFeatureProviders","finalSanitizedEditorConfig","setFinalSanitizedEditorConfig","featureProviderComponents","get","sort","a","b","order","featureComponentsWithFeaturesLength","Array","from","keys","filter","key","startsWith","includes","length","featureProvidersLocal","featureProvidersAndComponentsLoaded","Object","entries","forEach","plugin","push","resolvedClientFeatures","unSanitizedEditorConfig","features","lexical","Fragment","isArray","map","featureProvider","featureComponentKeys","featureComponents","FeatureComponent","ClientComponent","fallback","height","editorConfig"],"mappings":"AAAA;AAGA,SAA6BA,aAAa,QAAQ,iBAAgB;AAClE,SAASC,YAAY,QAAQ,uBAAsB;AACnD,SAASC,kBAAkB,QAAQ,2BAA0B;AAC7D,OAAOC,SAASC,QAAQ,EAAEC,IAAI,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAMlE,SAASC,0BAA0B,QAAQ,qCAAoC;AAC/E,SAASC,kBAAkB,QAAQ,oCAAmC;AACtE,SAASC,0BAA0B,QAAQ,sCAAqC;AAEhF,MAAMC,+BAAiBN,KAAK,IAC1B,MAAM,CAAC,cAAcO,IAAI,CAAC,CAACC,SAAY,CAAA;YAAEC,SAASD,OAAOE,QAAQ;QAAC,CAAA;AAGpE,OAAO,MAAMC,gBAMT,CAACC;IACH,MAAM,EAAEC,mBAAmB,EAAEC,oBAAoB,EAAE,GAAGF;IACtD,MAAM,EAAEG,UAAU,EAAE,GAAGnB;IACvB,MAAMoB,kBAAkBnB;IACxB,MAAM,CAACoB,mBAAmBC,qBAAqB,GAAGhB,SAAS;IAE3D,MAAM,CAACiB,kBAAkBC,oBAAoB,GAAGlB,SAA2C,EAAE;IAE7F,MAAM,CAACmB,4BAA4BC,8BAA8B,GAC/DpB,SAAsC;IAExC,IAAIqB,4BAAiET,qBAAqBU,GAAG,CAC3F,WACuC,oBAAoB;;IAC7D,iBAAiB;IACjBD,4BAA4BA,0BAA0BE,IAAI,CAAC,CAACC,GAAGC,IAAMD,EAAEE,KAAK,GAAGD,EAAEC,KAAK;IAEtF,MAAMC,sCACJC,MAAMC,IAAI,CAACjB,qBAAqBkB,IAAI,IAAIC,MAAM,CAC5C,CAACC,MAAQA,IAAIC,UAAU,CAAC,CAAC,QAAQ,CAAC,KAAK,CAACD,IAAIE,QAAQ,CAAC,aACrDC,MAAM,GAAGd,0BAA0Bc,MAAM;IAE7CpC,UAAU;QACR,IAAI,CAACgB,mBAAmB;YACtB,MAAMqB,wBAA0D,EAAE;YAClE,IAAIC,sCAAsC;YAE1CC,OAAOC,OAAO,CAACzB,iBAAiB0B,OAAO,CAAC,CAAC,CAACR,KAAKS,OAAO;gBACpD,IAAIT,IAAIC,UAAU,CAAC,CAAC,eAAe,EAAEpB,WAAW,CAAC,CAAC,GAAG;oBACnD,IAAI,CAACmB,IAAIE,QAAQ,CAAC,iBAAiB;wBACjCE,sBAAsBM,IAAI,CAACD;oBAC7B;oBACAJ;gBACF;YACF;YAEA,IAAIA,wCAAwCV,qCAAqC;gBAC/ET,oBAAoBkB;gBACpBpB,qBAAqB;gBAErB;;SAEC,GAED,MAAM2B,yBAAyBzC,mBAAmB;oBAChDY;oBACAD;oBACA+B,yBAAyB;wBACvBC,UAAUT;wBACVU,SAASnC;oBACX;gBACF;gBAEAS,8BACEjB,2BACEQ,sBAAsBA,sBAAsBV,4BAC5C0C;YAGN;QACF;IACF,GAAG;QACD5B;QACAD;QACAD;QACAQ,0BAA0Bc,MAAM;QAChClB;QACAE;QACAR;QACAgB;KACD;IAED,IAAI,CAACZ,mBAAmB;QACtB,qBACE,oBAACnB,MAAMmD,QAAQ,QACZnB,MAAMoB,OAAO,CAAC3B,8BACbA,0BAA0B4B,GAAG,CAAC,CAACC;YAC7B,uGAAuG;YACvG,MAAMC,uBAAuBvB,MAAMC,IAAI,CAACjB,qBAAqBkB,IAAI,IAAIC,MAAM,CAAC,CAACC,MAC3EA,IAAIC,UAAU,CAAC,CAAC,QAAQ,EAAEiB,gBAAgBlB,GAAG,CAAC,YAAY,CAAC;YAE7D,MAAMoB,oBAAuCD,qBAAqBF,GAAG,CAAC,CAACjB;gBACrE,OAAOpB,qBAAqBU,GAAG,CAACU;YAClC,EAAwB,oBAAoB;;YAE5C,qBACE,oBAACpC,MAAMmD,QAAQ;gBAACf,KAAKkB,gBAAgBlB,GAAG;eACrCoB,mBAAmBjB,SAChBiB,kBAAkBH,GAAG,CAAC,CAACI;gBACrB,OAAOA;YACT,KACA,MACHH,gBAAgBI,eAAe;QAGtC;IAGR;IAEA,qBACE,oBAACzD;QAAS0D,wBAAU,oBAAC9D;YAAc+D,QAAO;;OACvCrC,4CACC,oBAACf;QAAgB,GAAGM,KAAK;QAAE+C,cAActC;;AAIjD,EAAC"}
+{"version":3,"sources":["../../src/field/index.tsx"],"sourcesContent":["'use client'\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\nimport type { EditorConfig as LexicalEditorConfig } from 'lexical/LexicalEditor.js'\n\nimport { ShimmerEffect } from '@payloadcms/ui/elements/ShimmerEffect'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useClientFunctions } from '@payloadcms/ui/providers/ClientFunction'\nimport React, { Suspense, lazy, useEffect, useState } from 'react'\n\nimport type { GeneratedFeatureProviderComponent } from '../types.js'\nimport type { FeatureProviderClient } from './features/types.js'\nimport type { SanitizedClientEditorConfig } from './lexical/config/types.js'\n\nimport { defaultEditorLexicalConfig } from './lexical/config/client/default.js'\nimport { loadClientFeatures } from './lexical/config/client/loader.js'\nimport { sanitizeClientEditorConfig } from './lexical/config/client/sanitize.js'\n\nconst RichTextEditor = lazy(() =>\n  import('./Field.js').then((module) => ({ default: module.RichText })),\n)\n\nexport const RichTextField: React.FC<\n  FormFieldBase & {\n    lexicalEditorConfig: LexicalEditorConfig\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n> = (props) => {\n  const { lexicalEditorConfig, richTextComponentMap } = props\n  const { schemaPath } = useFieldProps()\n  const clientFunctions = useClientFunctions()\n  const [hasLoadedFeatures, setHasLoadedFeatures] = useState(false)\n\n  const [featureProviders, setFeatureProviders] = useState<FeatureProviderClient<unknown>[]>([])\n\n  const [finalSanitizedEditorConfig, setFinalSanitizedEditorConfig] =\n    useState<SanitizedClientEditorConfig>(null)\n\n  let featureProviderComponents: GeneratedFeatureProviderComponent[] = richTextComponentMap.get(\n    'features',\n  ) as GeneratedFeatureProviderComponent[] // TODO: Type better\n  // order by order\n  featureProviderComponents = featureProviderComponents.sort((a, b) => a.order - b.order)\n\n  const featureComponentsWithFeaturesLength =\n    Array.from(richTextComponentMap.keys()).filter(\n      (key) => key.startsWith(`feature.`) && !key.includes('.fields.'),\n    ).length + featureProviderComponents.length\n\n  useEffect(() => {\n    if (!hasLoadedFeatures) {\n      const featureProvidersLocal: FeatureProviderClient<unknown>[] = []\n      let featureProvidersAndComponentsLoaded = 0\n\n      Object.entries(clientFunctions).forEach(([key, plugin]) => {\n        if (key.startsWith(`lexicalFeature.${schemaPath}.`)) {\n          if (!key.includes('.components.')) {\n            featureProvidersLocal.push(plugin)\n          }\n          featureProvidersAndComponentsLoaded++\n        }\n      })\n\n      if (featureProvidersAndComponentsLoaded === featureComponentsWithFeaturesLength) {\n        setFeatureProviders(featureProvidersLocal)\n        setHasLoadedFeatures(true)\n\n        /**\n         * Loaded feature provided => create the final sanitized editor config\n         */\n\n        const resolvedClientFeatures = loadClientFeatures({\n          clientFunctions,\n          schemaPath,\n          unSanitizedEditorConfig: {\n            features: featureProvidersLocal,\n            lexical: lexicalEditorConfig,\n          },\n        })\n\n        setFinalSanitizedEditorConfig(\n          sanitizeClientEditorConfig(\n            lexicalEditorConfig ? lexicalEditorConfig : defaultEditorLexicalConfig,\n            resolvedClientFeatures,\n          ),\n        )\n      }\n    }\n  }, [\n    hasLoadedFeatures,\n    clientFunctions,\n    schemaPath,\n    featureProviderComponents.length,\n    featureProviders,\n    finalSanitizedEditorConfig,\n    lexicalEditorConfig,\n    featureComponentsWithFeaturesLength,\n  ])\n\n  if (!hasLoadedFeatures) {\n    return (\n      <React.Fragment>\n        {Array.isArray(featureProviderComponents) &&\n          featureProviderComponents.map((featureProvider) => {\n            // get all components starting with key feature.${FeatureProvider.key}.components.{featureComponentKey}\n            const featureComponentKeys = Array.from(richTextComponentMap.keys()).filter((key) =>\n              key.startsWith(`feature.${featureProvider.key}.components.`),\n            )\n            const featureComponents: React.ReactNode[] = featureComponentKeys.map((key) => {\n              return richTextComponentMap.get(key)\n            }) // TODO: Type better\n\n            return (\n              <React.Fragment key={featureProvider.key}>\n                {featureComponents?.length\n                  ? featureComponents.map((FeatureComponent) => {\n                      return FeatureComponent\n                    })\n                  : null}\n                {featureProvider.ClientComponent}\n              </React.Fragment>\n            )\n          })}\n      </React.Fragment>\n    )\n  }\n\n  return (\n    <Suspense fallback={<ShimmerEffect height=\"35vh\" />}>\n      {finalSanitizedEditorConfig && (\n        <RichTextEditor {...props} editorConfig={finalSanitizedEditorConfig} />\n      )}\n    </Suspense>\n  )\n}\n"],"names":["ShimmerEffect","useFieldProps","useClientFunctions","React","Suspense","lazy","useEffect","useState","defaultEditorLexicalConfig","loadClientFeatures","sanitizeClientEditorConfig","RichTextEditor","then","module","default","RichText","RichTextField","props","lexicalEditorConfig","richTextComponentMap","schemaPath","clientFunctions","hasLoadedFeatures","setHasLoadedFeatures","featureProviders","setFeatureProviders","finalSanitizedEditorConfig","setFinalSanitizedEditorConfig","featureProviderComponents","get","sort","a","b","order","featureComponentsWithFeaturesLength","Array","from","keys","filter","key","startsWith","includes","length","featureProvidersLocal","featureProvidersAndComponentsLoaded","Object","entries","forEach","plugin","push","resolvedClientFeatures","unSanitizedEditorConfig","features","lexical","Fragment","isArray","map","featureProvider","featureComponentKeys","featureComponents","FeatureComponent","ClientComponent","fallback","height","editorConfig"],"mappings":"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"}

package/dist/field/lexical/LexicalProvider.d.ts

@@ -1,6 +1,6 @@
-import type { FormFieldBase } from '@payloadcms/ui';
 import type { EditorState, SerializedEditorState } from 'lexical';
 import type { LexicalEditor } from 'lexical';
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared';
 import * as React from 'react';
 import type { SanitizedClientEditorConfig } from './config/types.js';
 export type LexicalProviderProps = {

package/dist/field/lexical/LexicalProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LexicalProvider.d.ts","sourceRoot":"","sources":["../../../src/field/lexical/LexicalProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAO5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAA;AAMpE,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,2BAA2B,CAAA;IACzC,UAAU,EAAE,aAAa,GAAG;QAC1B,YAAY,EAAE,2BAA2B,CAAA;QACzC,IAAI,EAAE,MAAM,CAAA;QACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;KACnD,CAAA;IACD,QAAQ,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACtF,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,qBAAqB,CAAA;CAC7B,CAAA;AACD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2D1D,CAAA"}
+{"version":3,"file":"LexicalProvider.d.ts","sourceRoot":"","sources":["../../../src/field/lexical/LexicalProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAM5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAA;AAMpE,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,2BAA2B,CAAA;IACzC,UAAU,EAAE,aAAa,GAAG;QAC1B,YAAY,EAAE,2BAA2B,CAAA;QACzC,IAAI,EAAE,MAAM,CAAA;QACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;KACnD,CAAA;IACD,QAAQ,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACtF,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,qBAAqB,CAAA;CAC7B,CAAA;AACD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2D1D,CAAA"}

package/dist/field/lexical/LexicalProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/field/lexical/LexicalProvider.tsx"],"sourcesContent":["'use client'\nimport type { FormFieldBase } from '@payloadcms/ui'\nimport type { EditorState, SerializedEditorState } from 'lexical'\nimport type { LexicalEditor } from 'lexical'\n\nimport lexicalComposerImport from '@lexical/react/LexicalComposer.js'\nconst { LexicalComposer } = lexicalComposerImport\n\nimport type { InitialConfigType } from '@lexical/react/LexicalComposer.js'\n\nimport * as React from 'react'\n\nimport type { SanitizedClientEditorConfig } from './config/types.js'\n\nimport { LexicalEditor as LexicalEditorComponent } from './LexicalEditor.js'\nimport { EditorConfigProvider } from './config/client/EditorConfigProvider.js'\nimport { getEnabledNodes } from './nodes/index.js'\n\nexport type LexicalProviderProps = {\n  editorConfig: SanitizedClientEditorConfig\n  fieldProps: FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n  onChange: (editorState: EditorState, editor: LexicalEditor, tags: Set<string>) => void\n  path: string\n  readOnly: boolean\n  value: SerializedEditorState\n}\nexport const LexicalProvider: React.FC<LexicalProviderProps> = (props) => {\n  const { editorConfig, fieldProps, onChange, path, readOnly } = props\n  let { value } = props\n\n  const [initialConfig, setInitialConfig] = React.useState<InitialConfigType | null>(null)\n\n  // set lexical config in useEffect: // TODO: Is this the most performant way to do this? Prob not\n  React.useEffect(() => {\n    const newInitialConfig: InitialConfigType = {\n      editable: readOnly !== true,\n      editorState: value != null ? JSON.stringify(value) : undefined,\n      namespace: editorConfig.lexical.namespace,\n      nodes: [...getEnabledNodes({ editorConfig })],\n      onError: (error: Error) => {\n        throw error\n      },\n      theme: editorConfig.lexical.theme,\n    }\n    setInitialConfig(newInitialConfig)\n  }, [editorConfig, readOnly, value])\n\n  if (editorConfig?.features?.hooks?.load?.length) {\n    editorConfig.features.hooks.load.forEach((hook) => {\n      value = hook({ incomingEditorState: value })\n    })\n  }\n\n  if (value && typeof value !== 'object') {\n    throw new Error(\n      'The value passed to the Lexical editor is not an object. This is not supported. Please remove the data from the field and start again. This is the value that was passed in: ' +\n        JSON.stringify(value),\n    )\n  }\n\n  if (value && Array.isArray(value) && !('root' in value)) {\n    throw new Error(\n      'You have tried to pass in data from the old, Slate editor, to the new, Lexical editor. This is not supported. There is no automatic conversion from Slate to Lexical data available yet (coming soon). Please remove the data from the field and start again.',\n    )\n  }\n\n  if (value && 'jsonContent' in value) {\n    throw new Error(\n      'You have tried to pass in data from payload-plugin-lexical. This is not supported. The data structure has changed in this editor, compared to the plugin, and there is no automatic conversion available yet (coming soon). Please remove the data from the field and start again.',\n    )\n  }\n\n  if (!initialConfig) {\n    return <p>Loading...</p>\n  }\n\n  return (\n    <LexicalComposer initialConfig={initialConfig} key={path}>\n      <EditorConfigProvider editorConfig={editorConfig} fieldProps={fieldProps}>\n        <div className=\"editor-shell\">\n          <LexicalEditorComponent editorConfig={editorConfig} onChange={onChange} />\n        </div>\n      </EditorConfigProvider>\n    </LexicalComposer>\n  )\n}\n"],"names":["lexicalComposerImport","LexicalComposer","React","LexicalEditor","LexicalEditorComponent","EditorConfigProvider","getEnabledNodes","LexicalProvider","props","editorConfig","fieldProps","onChange","path","readOnly","value","initialConfig","setInitialConfig","useState","useEffect","newInitialConfig","editable","editorState","JSON","stringify","undefined","namespace","lexical","nodes","onError","error","theme","features","hooks","load","length","forEach","hook","incomingEditorState","Error","Array","isArray","p","key","div","className"],"mappings":"AAAA;AAKA,OAAOA,2BAA2B,oCAAmC;AACrE,MAAM,EAAEC,eAAe,EAAE,GAAGD;AAI5B,YAAYE,WAAW,QAAO;AAI9B,SAASC,iBAAiBC,sBAAsB,QAAQ,qBAAoB;AAC5E,SAASC,oBAAoB,QAAQ,0CAAyC;AAC9E,SAASC,eAAe,QAAQ,mBAAkB;AAclD,OAAO,MAAMC,kBAAkD,CAACC;IAC9D,MAAM,EAAEC,YAAY,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGL;IAC/D,IAAI,EAAEM,KAAK,EAAE,GAAGN;IAEhB,MAAM,CAACO,eAAeC,iBAAiB,GAAGd,MAAMe,QAAQ,CAA2B;IAEnF,iGAAiG;IACjGf,MAAMgB,SAAS,CAAC;QACd,MAAMC,mBAAsC;YAC1CC,UAAUP,aAAa;YACvBQ,aAAaP,SAAS,OAAOQ,KAAKC,SAAS,CAACT,SAASU;YACrDC,WAAWhB,aAAaiB,OAAO,CAACD,SAAS;YACzCE,OAAO;mBAAIrB,gBAAgB;oBAAEG;gBAAa;aAAG;YAC7CmB,SAAS,CAACC;gBACR,MAAMA;YACR;YACAC,OAAOrB,aAAaiB,OAAO,CAACI,KAAK;QACnC;QACAd,iBAAiBG;IACnB,GAAG;QAACV;QAAcI;QAAUC;KAAM;IAElC,IAAIL,cAAcsB,UAAUC,OAAOC,MAAMC,QAAQ;QAC/CzB,aAAasB,QAAQ,CAACC,KAAK,CAACC,IAAI,CAACE,OAAO,CAAC,CAACC;YACxCtB,QAAQsB,KAAK;gBAAEC,qBAAqBvB;YAAM;QAC5C;IACF;IAEA,IAAIA,SAAS,OAAOA,UAAU,UAAU;QACtC,MAAM,IAAIwB,MACR,kLACEhB,KAAKC,SAAS,CAACT;IAErB;IAEA,IAAIA,SAASyB,MAAMC,OAAO,CAAC1B,UAAU,CAAE,CAAA,UAAUA,KAAI,GAAI;QACvD,MAAM,IAAIwB,MACR;IAEJ;IAEA,IAAIxB,SAAS,iBAAiBA,OAAO;QACnC,MAAM,IAAIwB,MACR;IAEJ;IAEA,IAAI,CAACvB,eAAe;QAClB,qBAAO,oBAAC0B,WAAE;IACZ;IAEA,qBACE,oBAACxC;QAAgBc,eAAeA;QAAe2B,KAAK9B;qBAClD,oBAACP;QAAqBI,cAAcA;QAAcC,YAAYA;qBAC5D,oBAACiC;QAAIC,WAAU;qBACb,oBAACxC;QAAuBK,cAAcA;QAAcE,UAAUA;;AAKxE,EAAC"}
+{"version":3,"sources":["../../../src/field/lexical/LexicalProvider.tsx"],"sourcesContent":["'use client'\nimport type { EditorState, SerializedEditorState } from 'lexical'\nimport type { LexicalEditor } from 'lexical'\n\nimport lexicalComposerImport from '@lexical/react/LexicalComposer.js'\nconst { LexicalComposer } = lexicalComposerImport\n\nimport type { InitialConfigType } from '@lexical/react/LexicalComposer.js'\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\n\nimport * as React from 'react'\n\nimport type { SanitizedClientEditorConfig } from './config/types.js'\n\nimport { LexicalEditor as LexicalEditorComponent } from './LexicalEditor.js'\nimport { EditorConfigProvider } from './config/client/EditorConfigProvider.js'\nimport { getEnabledNodes } from './nodes/index.js'\n\nexport type LexicalProviderProps = {\n  editorConfig: SanitizedClientEditorConfig\n  fieldProps: FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n  onChange: (editorState: EditorState, editor: LexicalEditor, tags: Set<string>) => void\n  path: string\n  readOnly: boolean\n  value: SerializedEditorState\n}\nexport const LexicalProvider: React.FC<LexicalProviderProps> = (props) => {\n  const { editorConfig, fieldProps, onChange, path, readOnly } = props\n  let { value } = props\n\n  const [initialConfig, setInitialConfig] = React.useState<InitialConfigType | null>(null)\n\n  // set lexical config in useEffect: // TODO: Is this the most performant way to do this? Prob not\n  React.useEffect(() => {\n    const newInitialConfig: InitialConfigType = {\n      editable: readOnly !== true,\n      editorState: value != null ? JSON.stringify(value) : undefined,\n      namespace: editorConfig.lexical.namespace,\n      nodes: [...getEnabledNodes({ editorConfig })],\n      onError: (error: Error) => {\n        throw error\n      },\n      theme: editorConfig.lexical.theme,\n    }\n    setInitialConfig(newInitialConfig)\n  }, [editorConfig, readOnly, value])\n\n  if (editorConfig?.features?.hooks?.load?.length) {\n    editorConfig.features.hooks.load.forEach((hook) => {\n      value = hook({ incomingEditorState: value })\n    })\n  }\n\n  if (value && typeof value !== 'object') {\n    throw new Error(\n      'The value passed to the Lexical editor is not an object. This is not supported. Please remove the data from the field and start again. This is the value that was passed in: ' +\n        JSON.stringify(value),\n    )\n  }\n\n  if (value && Array.isArray(value) && !('root' in value)) {\n    throw new Error(\n      'You have tried to pass in data from the old, Slate editor, to the new, Lexical editor. This is not supported. There is no automatic conversion from Slate to Lexical data available yet (coming soon). Please remove the data from the field and start again.',\n    )\n  }\n\n  if (value && 'jsonContent' in value) {\n    throw new Error(\n      'You have tried to pass in data from payload-plugin-lexical. This is not supported. The data structure has changed in this editor, compared to the plugin, and there is no automatic conversion available yet (coming soon). Please remove the data from the field and start again.',\n    )\n  }\n\n  if (!initialConfig) {\n    return <p>Loading...</p>\n  }\n\n  return (\n    <LexicalComposer initialConfig={initialConfig} key={path}>\n      <EditorConfigProvider editorConfig={editorConfig} fieldProps={fieldProps}>\n        <div className=\"editor-shell\">\n          <LexicalEditorComponent editorConfig={editorConfig} onChange={onChange} />\n        </div>\n      </EditorConfigProvider>\n    </LexicalComposer>\n  )\n}\n"],"names":["lexicalComposerImport","LexicalComposer","React","LexicalEditor","LexicalEditorComponent","EditorConfigProvider","getEnabledNodes","LexicalProvider","props","editorConfig","fieldProps","onChange","path","readOnly","value","initialConfig","setInitialConfig","useState","useEffect","newInitialConfig","editable","editorState","JSON","stringify","undefined","namespace","lexical","nodes","onError","error","theme","features","hooks","load","length","forEach","hook","incomingEditorState","Error","Array","isArray","p","key","div","className"],"mappings":"AAAA;AAIA,OAAOA,2BAA2B,oCAAmC;AACrE,MAAM,EAAEC,eAAe,EAAE,GAAGD;AAK5B,YAAYE,WAAW,QAAO;AAI9B,SAASC,iBAAiBC,sBAAsB,QAAQ,qBAAoB;AAC5E,SAASC,oBAAoB,QAAQ,0CAAyC;AAC9E,SAASC,eAAe,QAAQ,mBAAkB;AAclD,OAAO,MAAMC,kBAAkD,CAACC;IAC9D,MAAM,EAAEC,YAAY,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGL;IAC/D,IAAI,EAAEM,KAAK,EAAE,GAAGN;IAEhB,MAAM,CAACO,eAAeC,iBAAiB,GAAGd,MAAMe,QAAQ,CAA2B;IAEnF,iGAAiG;IACjGf,MAAMgB,SAAS,CAAC;QACd,MAAMC,mBAAsC;YAC1CC,UAAUP,aAAa;YACvBQ,aAAaP,SAAS,OAAOQ,KAAKC,SAAS,CAACT,SAASU;YACrDC,WAAWhB,aAAaiB,OAAO,CAACD,SAAS;YACzCE,OAAO;mBAAIrB,gBAAgB;oBAAEG;gBAAa;aAAG;YAC7CmB,SAAS,CAACC;gBACR,MAAMA;YACR;YACAC,OAAOrB,aAAaiB,OAAO,CAACI,KAAK;QACnC;QACAd,iBAAiBG;IACnB,GAAG;QAACV;QAAcI;QAAUC;KAAM;IAElC,IAAIL,cAAcsB,UAAUC,OAAOC,MAAMC,QAAQ;QAC/CzB,aAAasB,QAAQ,CAACC,KAAK,CAACC,IAAI,CAACE,OAAO,CAAC,CAACC;YACxCtB,QAAQsB,KAAK;gBAAEC,qBAAqBvB;YAAM;QAC5C;IACF;IAEA,IAAIA,SAAS,OAAOA,UAAU,UAAU;QACtC,MAAM,IAAIwB,MACR,kLACEhB,KAAKC,SAAS,CAACT;IAErB;IAEA,IAAIA,SAASyB,MAAMC,OAAO,CAAC1B,UAAU,CAAE,CAAA,UAAUA,KAAI,GAAI;QACvD,MAAM,IAAIwB,MACR;IAEJ;IAEA,IAAIxB,SAAS,iBAAiBA,OAAO;QACnC,MAAM,IAAIwB,MACR;IAEJ;IAEA,IAAI,CAACvB,eAAe;QAClB,qBAAO,oBAAC0B,WAAE;IACZ;IAEA,qBACE,oBAACxC;QAAgBc,eAAeA;QAAe2B,KAAK9B;qBAClD,oBAACP;QAAqBI,cAAcA;QAAcC,YAAYA;qBAC5D,oBAACiC;QAAIC,WAAU;qBACb,oBAACxC;QAAuBK,cAAcA;QAAcE,UAAUA;;AAKxE,EAAC"}

package/dist/field/lexical/config/client/EditorConfigProvider.d.ts

@@ -1,4 +1,4 @@
-import type { FormFieldBase } from '@payloadcms/ui';
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared';
 import * as React from 'react';
 import type { SanitizedClientEditorConfig } from '../types.js';
 interface ContextType {

package/dist/field/lexical/config/client/EditorConfigProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorConfigProvider.d.ts","sourceRoot":"","sources":["../../../../../src/field/lexical/config/client/EditorConfigProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAEnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAA;AAM9D,UAAU,WAAW;IACnB,YAAY,EAAE,2BAA2B,CAAA;IACzC,KAAK,EAAE,aAAa,GAAG;QACrB,YAAY,EAAE,2BAA2B,CAAA;QACzC,IAAI,EAAE,MAAM,CAAA;QACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;KACnD,CAAA;IACD,IAAI,EAAE,MAAM,CAAA;CACb;AAQD,eAAO,MAAM,oBAAoB;cAKrB,MAAM,SAAS;kBACX,2BAA2B;;sBAEzB,2BAA2B;cACnC,MAAM;8BACU,IAAI,MAAM,EAAE,MAAM,SAAS,CAAC;;MAElD,MAAM,SAeT,CAAA;AAED,eAAO,MAAM,sBAAsB,QAAO,WAMzC,CAAA"}
+{"version":3,"file":"EditorConfigProvider.d.ts","sourceRoot":"","sources":["../../../../../src/field/lexical/config/client/EditorConfigProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAA;AAM9D,UAAU,WAAW;IACnB,YAAY,EAAE,2BAA2B,CAAA;IACzC,KAAK,EAAE,aAAa,GAAG;QACrB,YAAY,EAAE,2BAA2B,CAAA;QACzC,IAAI,EAAE,MAAM,CAAA;QACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;KACnD,CAAA;IACD,IAAI,EAAE,MAAM,CAAA;CACb;AAQD,eAAO,MAAM,oBAAoB;cAKrB,MAAM,SAAS;kBACX,2BAA2B;;sBAEzB,2BAA2B;cACnC,MAAM;8BACU,IAAI,MAAM,EAAE,MAAM,SAAS,CAAC;;MAElD,MAAM,SAeT,CAAA;AAED,eAAO,MAAM,sBAAsB,QAAO,WAMzC,CAAA"}

package/dist/field/lexical/config/client/EditorConfigProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/lexical/config/client/EditorConfigProvider.tsx"],"sourcesContent":["'use client'\nimport type { FormFieldBase } from '@payloadcms/ui'\n\nimport * as React from 'react'\nimport { createContext, useContext, useEffect, useMemo, useState } from 'react'\n\nimport type { SanitizedClientEditorConfig } from '../types.js'\n\n// Should always produce a 20 character pseudo-random string\nfunction generateQuickGuid(): string {\n  return Math.random().toString(36).substring(2, 12) + Math.random().toString(36).substring(2, 12)\n}\ninterface ContextType {\n  editorConfig: SanitizedClientEditorConfig\n  field: FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n  uuid: string\n}\n\nconst Context: React.Context<ContextType> = createContext({\n  editorConfig: null,\n  field: null,\n  uuid: generateQuickGuid(),\n})\n\nexport const EditorConfigProvider = ({\n  children,\n  editorConfig,\n  fieldProps,\n}: {\n  children: React.ReactNode\n  editorConfig: SanitizedClientEditorConfig\n  fieldProps: FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n}): React.ReactNode => {\n  // State to store the UUID\n  const [uuid, setUuid] = useState(generateQuickGuid())\n\n  // When the component mounts, generate a new UUID only once\n  useEffect(() => {\n    setUuid(generateQuickGuid())\n  }, [])\n\n  const editorContext = useMemo(\n    () => ({ editorConfig, field: fieldProps, uuid }),\n    [editorConfig, fieldProps, uuid],\n  )\n\n  return <Context.Provider value={editorContext}>{children}</Context.Provider>\n}\n\nexport const useEditorConfigContext = (): ContextType => {\n  const context = useContext(Context)\n  if (context === undefined) {\n    throw new Error('useEditorConfigContext must be used within an EditorConfigProvider')\n  }\n  return context\n}\n"],"names":["React","createContext","useContext","useEffect","useMemo","useState","generateQuickGuid","Math","random","toString","substring","Context","editorConfig","field","uuid","EditorConfigProvider","children","fieldProps","setUuid","editorContext","Provider","value","useEditorConfigContext","context","undefined","Error"],"mappings":"AAAA;AAGA,YAAYA,WAAW,QAAO;AAC9B,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAI/E,4DAA4D;AAC5D,SAASC;IACP,OAAOC,KAAKC,MAAM,GAAGC,QAAQ,CAAC,IAAIC,SAAS,CAAC,GAAG,MAAMH,KAAKC,MAAM,GAAGC,QAAQ,CAAC,IAAIC,SAAS,CAAC,GAAG;AAC/F;AAWA,MAAMC,wBAAsCV,cAAc;IACxDW,cAAc;IACdC,OAAO;IACPC,MAAMR;AACR;AAEA,OAAO,MAAMS,uBAAuB,CAAC,EACnCC,QAAQ,EACRJ,YAAY,EACZK,UAAU,EASX;IACC,0BAA0B;IAC1B,MAAM,CAACH,MAAMI,QAAQ,GAAGb,SAASC;IAEjC,2DAA2D;IAC3DH,UAAU;QACRe,QAAQZ;IACV,GAAG,EAAE;IAEL,MAAMa,gBAAgBf,QACpB,IAAO,CAAA;YAAEQ;YAAcC,OAAOI;YAAYH;QAAK,CAAA,GAC/C;QAACF;QAAcK;QAAYH;KAAK;IAGlC,qBAAO,oBAACH,QAAQS,QAAQ;QAACC,OAAOF;OAAgBH;AAClD,EAAC;AAED,OAAO,MAAMM,yBAAyB;IACpC,MAAMC,UAAUrB,WAAWS;IAC3B,IAAIY,YAAYC,WAAW;QACzB,MAAM,IAAIC,MAAM;IAClB;IACA,OAAOF;AACT,EAAC"}
+{"version":3,"sources":["../../../../../src/field/lexical/config/client/EditorConfigProvider.tsx"],"sourcesContent":["'use client'\n\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\n\nimport * as React from 'react'\nimport { createContext, useContext, useEffect, useMemo, useState } from 'react'\n\nimport type { SanitizedClientEditorConfig } from '../types.js'\n\n// Should always produce a 20 character pseudo-random string\nfunction generateQuickGuid(): string {\n  return Math.random().toString(36).substring(2, 12) + Math.random().toString(36).substring(2, 12)\n}\ninterface ContextType {\n  editorConfig: SanitizedClientEditorConfig\n  field: FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n  uuid: string\n}\n\nconst Context: React.Context<ContextType> = createContext({\n  editorConfig: null,\n  field: null,\n  uuid: generateQuickGuid(),\n})\n\nexport const EditorConfigProvider = ({\n  children,\n  editorConfig,\n  fieldProps,\n}: {\n  children: React.ReactNode\n  editorConfig: SanitizedClientEditorConfig\n  fieldProps: FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n  }\n}): React.ReactNode => {\n  // State to store the UUID\n  const [uuid, setUuid] = useState(generateQuickGuid())\n\n  // When the component mounts, generate a new UUID only once\n  useEffect(() => {\n    setUuid(generateQuickGuid())\n  }, [])\n\n  const editorContext = useMemo(\n    () => ({ editorConfig, field: fieldProps, uuid }),\n    [editorConfig, fieldProps, uuid],\n  )\n\n  return <Context.Provider value={editorContext}>{children}</Context.Provider>\n}\n\nexport const useEditorConfigContext = (): ContextType => {\n  const context = useContext(Context)\n  if (context === undefined) {\n    throw new Error('useEditorConfigContext must be used within an EditorConfigProvider')\n  }\n  return context\n}\n"],"names":["React","createContext","useContext","useEffect","useMemo","useState","generateQuickGuid","Math","random","toString","substring","Context","editorConfig","field","uuid","EditorConfigProvider","children","fieldProps","setUuid","editorContext","Provider","value","useEditorConfigContext","context","undefined","Error"],"mappings":"AAAA;AAIA,YAAYA,WAAW,QAAO;AAC9B,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAI/E,4DAA4D;AAC5D,SAASC;IACP,OAAOC,KAAKC,MAAM,GAAGC,QAAQ,CAAC,IAAIC,SAAS,CAAC,GAAG,MAAMH,KAAKC,MAAM,GAAGC,QAAQ,CAAC,IAAIC,SAAS,CAAC,GAAG;AAC/F;AAWA,MAAMC,wBAAsCV,cAAc;IACxDW,cAAc;IACdC,OAAO;IACPC,MAAMR;AACR;AAEA,OAAO,MAAMS,uBAAuB,CAAC,EACnCC,QAAQ,EACRJ,YAAY,EACZK,UAAU,EASX;IACC,0BAA0B;IAC1B,MAAM,CAACH,MAAMI,QAAQ,GAAGb,SAASC;IAEjC,2DAA2D;IAC3DH,UAAU;QACRe,QAAQZ;IACV,GAAG,EAAE;IAEL,MAAMa,gBAAgBf,QACpB,IAAO,CAAA;YAAEQ;YAAcC,OAAOI;YAAYH;QAAK,CAAA,GAC/C;QAACF;QAAcK;QAAYH;KAAK;IAGlC,qBAAO,oBAACH,QAAQS,QAAQ;QAACC,OAAOF;OAAgBH;AAClD,EAAC;AAED,OAAO,MAAMM,yBAAyB;IACpC,MAAMC,UAAUrB,WAAWS;IAC3B,IAAIY,YAAYC,WAAW;QACzB,MAAM,IAAIC,MAAM;IAClB;IACA,OAAOF;AACT,EAAC"}

package/dist/field/lexical/plugins/SlashMenu/index.js

@@ -1,7 +1,7 @@
 'use client';
 import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js';
 const { useLexicalComposerContext } = lexicalComposerContextImport;
-import { useTranslation } from '@payloadcms/ui';
+import { useTranslation } from '@payloadcms/ui/providers/Translation';
 import { useCallback, useMemo, useState } from 'react';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';