@payloadcms/richtext-lexical 3.0.0-beta.119 → 3.0.0-beta.120

package/dist/features/relationship/client/components/RelationshipComponent.js

@@ -5,10 +5,11 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js';
 import { mergeRegister } from '@lexical/utils';
 import { getTranslation } from '@payloadcms/translations';
-import { Button, useConfig, useDocumentDrawer, usePayloadAPI, useTranslation } from '@payloadcms/ui';
+import { Button, useConfig, usePayloadAPI, useTranslation } from '@payloadcms/ui';
 import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND } from 'lexical';
 import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
+import { useLexicalDocumentDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js';
 import { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from '../drawer/commands.js';
 import { $isRelationshipNode } from '../nodes/RelationshipNode.js';
 const baseClass = 'lexical-relationship';
@@ -54,9 +55,11 @@ const Component = props => {
   }] = usePayloadAPI(`${serverURL}${api}/${relatedCollection.slug}/${value}`, {
     initialParams
   });
-  const [DocumentDrawer, DocumentDrawerToggler, {
-    closeDrawer
-  }] = useDocumentDrawer({
+  const {
+    closeDocumentDrawer,
+    DocumentDrawer,
+    DocumentDrawerToggler
+  } = useLexicalDocumentDrawer({
     id: value,
     collectionSlug: relatedCollection.slug
   });
@@ -72,9 +75,9 @@ const Component = props => {
       ...initialParams,
       cacheBust
     });
-    closeDrawer();
+    closeDocumentDrawer();
     dispatchCacheBust();
-  }, [cacheBust, setParams, closeDrawer]);
+  }, [cacheBust, setParams, closeDocumentDrawer]);
   const $onDelete = useCallback(payload => {
     const deleteSelection = $getSelection();
     if (isSelected && $isNodeSelection(deleteSelection)) {
@@ -133,7 +136,7 @@ const Component = props => {
         buttonStyle: "icon-label",
         className: `${baseClass}__swapButton`,
         disabled: field?.admin?.readOnly,
-        el: "div",
+        el: "button",
         icon: "swap",
         onClick: () => {
           if (nodeKey) {

package/dist/features/relationship/client/components/RelationshipComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"RelationshipComponent.js","names":["useLexicalComposerContext","useLexicalNodeSelection","mergeRegister","getTranslation","Button","useConfig","useDocumentDrawer","usePayloadAPI","useTranslation","$getNodeByKey","$getSelection","$isNodeSelection","CLICK_COMMAND","COMMAND_PRIORITY_LOW","KEY_BACKSPACE_COMMAND","KEY_DELETE_COMMAND","React","useCallback","useEffect","useReducer","useRef","useState","useEditorConfigContext","INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND","$isRelationshipNode","baseClass","initialParams","depth","Component","props","data","relationTo","value","nodeKey","Error","relationshipElemRef","editor","isSelected","setSelected","clearSelection","field","config","collections","routes","api","serverURL","relatedCollection","setRelatedCollection","find","coll","slug","i18n","t","cacheBust","dispatchCacheBust","state","setParams","DocumentDrawer","DocumentDrawerToggler","closeDrawer","id","collectionSlug","removeRelationship","update","remove","updateRelationship","doc","$onDelete","payload","deleteSelection","event","preventDefault","getNodes","forEach","node","onClick","target","current","contains","shiftKey","registerCommand","_jsxs","className","filter","Boolean","join","contentEditable","ref","_jsx","label","labels","singular","admin","useAsTitle","isEditable","buttonStyle","disabled","readOnly","el","icon","dispatchCommand","replace","round","tooltip","e","onSave","RelationshipComponent"],"sources":["../../../../../src/features/relationship/client/components/RelationshipComponent.tsx"],"sourcesContent":["'use client'\nimport type { ElementFormatType } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js'\nimport { mergeRegister } from '@lexical/utils'\nimport { getTranslation } from '@payloadcms/translations'\nimport { Button, useConfig, useDocumentDrawer, usePayloadAPI, useTranslation } from '@payloadcms/ui'\nimport {\n  $getNodeByKey,\n  $getSelection,\n  $isNodeSelection,\n  CLICK_COMMAND,\n  COMMAND_PRIORITY_LOW,\n  KEY_BACKSPACE_COMMAND,\n  KEY_DELETE_COMMAND,\n} from 'lexical'\nimport React, { useCallback, useEffect, useReducer, useRef, useState } from 'react'\n\nimport type { RelationshipData } from '../../server/nodes/RelationshipNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from '../drawer/commands.js'\nimport { $isRelationshipNode } from '../nodes/RelationshipNode.js'\nimport './index.scss'\n\nconst baseClass = 'lexical-relationship'\n\nconst initialParams = {\n  depth: 0,\n}\n\ntype Props = {\n  className?: string\n  data: RelationshipData\n  format?: ElementFormatType\n  nodeKey?: string\n}\n\nconst Component: React.FC<Props> = (props) => {\n  const {\n    data: { relationTo, value },\n    nodeKey,\n  } = props\n\n  if (typeof value === 'object') {\n    throw new Error(\n      'Relationship value should be a string or number. The Lexical Relationship component should not receive the populated value object.',\n    )\n  }\n\n  const relationshipElemRef = useRef<HTMLDivElement | null>(null)\n\n  const [editor] = useLexicalComposerContext()\n  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey!)\n  const { field } = useEditorConfigContext()\n  const {\n    config: {\n      collections,\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const [relatedCollection, setRelatedCollection] = useState(\n    () => collections.find((coll) => coll.slug === relationTo)!,\n  )\n\n  const { i18n, t } = useTranslation()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value}`,\n    { initialParams },\n  )\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id: value,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  const removeRelationship = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey!)?.remove()\n    })\n  }, [editor, nodeKey])\n\n  const updateRelationship = React.useCallback(\n    ({ doc }) => {\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      closeDrawer()\n      dispatchCacheBust()\n    },\n    [cacheBust, setParams, closeDrawer],\n  )\n\n  const $onDelete = useCallback(\n    (payload: KeyboardEvent) => {\n      const deleteSelection = $getSelection()\n      if (isSelected && $isNodeSelection(deleteSelection)) {\n        const event: KeyboardEvent = payload\n        event.preventDefault()\n        editor.update(() => {\n          deleteSelection.getNodes().forEach((node) => {\n            if ($isRelationshipNode(node)) {\n              node.remove()\n            }\n          })\n        })\n      }\n      return false\n    },\n    [editor, isSelected],\n  )\n  const onClick = useCallback(\n    (payload: MouseEvent) => {\n      const event = payload\n      // Check if relationshipElemRef.target or anything WITHIN relationshipElemRef.target was clicked\n      if (\n        event.target === relationshipElemRef.current ||\n        relationshipElemRef.current?.contains(event.target as Node)\n      ) {\n        if (event.shiftKey) {\n          setSelected(!isSelected)\n        } else {\n          if (!isSelected) {\n            clearSelection()\n            setSelected(true)\n          }\n        }\n        return true\n      }\n\n      return false\n    },\n    [isSelected, setSelected, clearSelection],\n  )\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerCommand<MouseEvent>(CLICK_COMMAND, onClick, COMMAND_PRIORITY_LOW),\n\n      editor.registerCommand(KEY_DELETE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),\n      editor.registerCommand(KEY_BACKSPACE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),\n    )\n  }, [clearSelection, editor, isSelected, nodeKey, $onDelete, setSelected, onClick])\n\n  return (\n    <div\n      className={[baseClass, isSelected && `${baseClass}--selected`].filter(Boolean).join(' ')}\n      contentEditable={false}\n      ref={relationshipElemRef}\n    >\n      <div className={`${baseClass}__wrap`}>\n        <p className={`${baseClass}__label`}>\n          {t('fields:labelRelationship', {\n            label: getTranslation(relatedCollection.labels.singular, i18n),\n          })}\n        </p>\n        <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n          <p className={`${baseClass}__title`}>\n            {data ? data[relatedCollection?.admin?.useAsTitle || 'id'] : value}\n          </p>\n        </DocumentDrawerToggler>\n      </div>\n      {editor.isEditable() && (\n        <div className={`${baseClass}__actions`}>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__swapButton`}\n            disabled={field?.admin?.readOnly}\n            el=\"div\"\n            icon=\"swap\"\n            onClick={() => {\n              if (nodeKey) {\n                editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {\n                  replace: { nodeKey },\n                })\n              }\n            }}\n            round\n            tooltip={t('fields:swapRelationship')}\n          />\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__removeButton`}\n            disabled={field?.admin?.readOnly}\n            icon=\"x\"\n            onClick={(e) => {\n              e.preventDefault()\n              removeRelationship()\n            }}\n            round\n            tooltip={t('fields:removeRelationship')}\n          />\n        </div>\n      )}\n\n      {!!value && <DocumentDrawer onSave={updateRelationship} />}\n    </div>\n  )\n}\n\nexport const RelationshipComponent = (props: Props): React.ReactNode => {\n  return <Component {...props} />\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RelationshipComponent.js","names":["useLexicalComposerContext","useLexicalNodeSelection","mergeRegister","getTranslation","Button","useConfig","usePayloadAPI","useTranslation","$getNodeByKey","$getSelection","$isNodeSelection","CLICK_COMMAND","COMMAND_PRIORITY_LOW","KEY_BACKSPACE_COMMAND","KEY_DELETE_COMMAND","React","useCallback","useEffect","useReducer","useRef","useState","useEditorConfigContext","useLexicalDocumentDrawer","INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND","$isRelationshipNode","baseClass","initialParams","depth","Component","props","data","relationTo","value","nodeKey","Error","relationshipElemRef","editor","isSelected","setSelected","clearSelection","field","config","collections","routes","api","serverURL","relatedCollection","setRelatedCollection","find","coll","slug","i18n","t","cacheBust","dispatchCacheBust","state","setParams","closeDocumentDrawer","DocumentDrawer","DocumentDrawerToggler","id","collectionSlug","removeRelationship","update","remove","updateRelationship","doc","$onDelete","payload","deleteSelection","event","preventDefault","getNodes","forEach","node","onClick","target","current","contains","shiftKey","registerCommand","_jsxs","className","filter","Boolean","join","contentEditable","ref","_jsx","label","labels","singular","admin","useAsTitle","isEditable","buttonStyle","disabled","readOnly","el","icon","dispatchCommand","replace","round","tooltip","e","onSave","RelationshipComponent"],"sources":["../../../../../src/features/relationship/client/components/RelationshipComponent.tsx"],"sourcesContent":["'use client'\nimport type { ElementFormatType } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js'\nimport { mergeRegister } from '@lexical/utils'\nimport { getTranslation } from '@payloadcms/translations'\nimport { Button, useConfig, usePayloadAPI, useTranslation } from '@payloadcms/ui'\nimport {\n  $getNodeByKey,\n  $getSelection,\n  $isNodeSelection,\n  CLICK_COMMAND,\n  COMMAND_PRIORITY_LOW,\n  KEY_BACKSPACE_COMMAND,\n  KEY_DELETE_COMMAND,\n} from 'lexical'\nimport React, { useCallback, useEffect, useReducer, useRef, useState } from 'react'\n\nimport type { RelationshipData } from '../../server/nodes/RelationshipNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { useLexicalDocumentDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js'\nimport { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from '../drawer/commands.js'\nimport { $isRelationshipNode } from '../nodes/RelationshipNode.js'\nimport './index.scss'\n\nconst baseClass = 'lexical-relationship'\n\nconst initialParams = {\n  depth: 0,\n}\n\ntype Props = {\n  className?: string\n  data: RelationshipData\n  format?: ElementFormatType\n  nodeKey?: string\n}\n\nconst Component: React.FC<Props> = (props) => {\n  const {\n    data: { relationTo, value },\n    nodeKey,\n  } = props\n\n  if (typeof value === 'object') {\n    throw new Error(\n      'Relationship value should be a string or number. The Lexical Relationship component should not receive the populated value object.',\n    )\n  }\n\n  const relationshipElemRef = useRef<HTMLDivElement | null>(null)\n\n  const [editor] = useLexicalComposerContext()\n  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey!)\n  const { field } = useEditorConfigContext()\n  const {\n    config: {\n      collections,\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const [relatedCollection, setRelatedCollection] = useState(\n    () => collections.find((coll) => coll.slug === relationTo)!,\n  )\n\n  const { i18n, t } = useTranslation()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value}`,\n    { initialParams },\n  )\n\n  const { closeDocumentDrawer, DocumentDrawer, DocumentDrawerToggler } = useLexicalDocumentDrawer({\n    id: value,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  const removeRelationship = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey!)?.remove()\n    })\n  }, [editor, nodeKey])\n\n  const updateRelationship = React.useCallback(\n    ({ doc }) => {\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      closeDocumentDrawer()\n      dispatchCacheBust()\n    },\n    [cacheBust, setParams, closeDocumentDrawer],\n  )\n\n  const $onDelete = useCallback(\n    (payload: KeyboardEvent) => {\n      const deleteSelection = $getSelection()\n      if (isSelected && $isNodeSelection(deleteSelection)) {\n        const event: KeyboardEvent = payload\n        event.preventDefault()\n        editor.update(() => {\n          deleteSelection.getNodes().forEach((node) => {\n            if ($isRelationshipNode(node)) {\n              node.remove()\n            }\n          })\n        })\n      }\n      return false\n    },\n    [editor, isSelected],\n  )\n  const onClick = useCallback(\n    (payload: MouseEvent) => {\n      const event = payload\n      // Check if relationshipElemRef.target or anything WITHIN relationshipElemRef.target was clicked\n      if (\n        event.target === relationshipElemRef.current ||\n        relationshipElemRef.current?.contains(event.target as Node)\n      ) {\n        if (event.shiftKey) {\n          setSelected(!isSelected)\n        } else {\n          if (!isSelected) {\n            clearSelection()\n            setSelected(true)\n          }\n        }\n        return true\n      }\n\n      return false\n    },\n    [isSelected, setSelected, clearSelection],\n  )\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerCommand<MouseEvent>(CLICK_COMMAND, onClick, COMMAND_PRIORITY_LOW),\n\n      editor.registerCommand(KEY_DELETE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),\n      editor.registerCommand(KEY_BACKSPACE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),\n    )\n  }, [clearSelection, editor, isSelected, nodeKey, $onDelete, setSelected, onClick])\n\n  return (\n    <div\n      className={[baseClass, isSelected && `${baseClass}--selected`].filter(Boolean).join(' ')}\n      contentEditable={false}\n      ref={relationshipElemRef}\n    >\n      <div className={`${baseClass}__wrap`}>\n        <p className={`${baseClass}__label`}>\n          {t('fields:labelRelationship', {\n            label: getTranslation(relatedCollection.labels.singular, i18n),\n          })}\n        </p>\n        <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n          <p className={`${baseClass}__title`}>\n            {data ? data[relatedCollection?.admin?.useAsTitle || 'id'] : value}\n          </p>\n        </DocumentDrawerToggler>\n      </div>\n      {editor.isEditable() && (\n        <div className={`${baseClass}__actions`}>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__swapButton`}\n            disabled={field?.admin?.readOnly}\n            el=\"button\"\n            icon=\"swap\"\n            onClick={() => {\n              if (nodeKey) {\n                editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {\n                  replace: { nodeKey },\n                })\n              }\n            }}\n            round\n            tooltip={t('fields:swapRelationship')}\n          />\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__removeButton`}\n            disabled={field?.admin?.readOnly}\n            icon=\"x\"\n            onClick={(e) => {\n              e.preventDefault()\n              removeRelationship()\n            }}\n            round\n            tooltip={t('fields:removeRelationship')}\n          />\n        </div>\n      )}\n\n      {!!value && <DocumentDrawer onSave={updateRelationship} />}\n    </div>\n  )\n}\n\nexport const RelationshipComponent = (props: Props): React.ReactNode => {\n  return <Component {...props} />\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/features/relationship/client/drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/relationship/client/drawer/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAiC/D,KAAK,KAAK,GAAG;IACX,sBAAsB,EAAE,IAAI,GAAG,MAAM,EAAE,CAAA;CACxC,CAAA;AAkDD,eAAO,MAAM,kBAAkB,UAAW,KAAK,KAAG,KAAK,CAAC,SAQvD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/relationship/client/drawer/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAkC/D,KAAK,KAAK,GAAG;IACX,sBAAsB,EAAE,IAAI,GAAG,MAAM,EAAE,CAAA;CACxC,CAAA;AAkDD,eAAO,MAAM,kBAAkB,UAAW,KAAK,KAAG,KAAK,CAAC,SAQvD,CAAA"}

package/dist/features/relationship/client/drawer/index.js

@@ -3,9 +3,9 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
-import { useListDrawer } from '@payloadcms/ui';
 import { $getNodeByKey, COMMAND_PRIORITY_EDITOR } from 'lexical';
 import React, { useCallback, useEffect, useState } from 'react';
+import { useLexicalListDrawer } from '../../../../utilities/fieldsDrawer/useLexicalListDrawer.js';
 import { $createRelationshipNode } from '../nodes/RelationshipNode.js';
 import { INSERT_RELATIONSHIP_COMMAND } from '../plugins/index.js';
 import { EnabledRelationshipsCondition } from '../utils/EnabledRelationshipsCondition.js';
@@ -49,35 +49,36 @@ const RelationshipDrawerComponent = t0 => {
   }
   const [selectedCollectionSlug, setSelectedCollectionSlug] = useState(t1);
   const [replaceNodeKey, setReplaceNodeKey] = useState(null);
-  let t2;
-  if ($[2] !== enabledCollectionSlugs || $[3] !== selectedCollectionSlug) {
-    t2 = {
-      collectionSlugs: enabledCollectionSlugs,
+  const t2 = enabledCollectionSlugs ? enabledCollectionSlugs : undefined;
+  let t3;
+  if ($[2] !== t2 || $[3] !== selectedCollectionSlug) {
+    t3 = {
+      collectionSlugs: t2,
       selectedCollection: selectedCollectionSlug
     };
-    $[2] = enabledCollectionSlugs;
+    $[2] = t2;
     $[3] = selectedCollectionSlug;
-    $[4] = t2;
+    $[4] = t3;
   } else {
-    t2 = $[4];
+    t3 = $[4];
   }
-  const [ListDrawer, ListDrawerToggler, t3] = useListDrawer(t2);
   const {
-    closeDrawer,
-    isDrawerOpen,
-    openDrawer
-  } = t3;
+    closeListDrawer,
+    isListDrawerOpen,
+    ListDrawer,
+    openListDrawer
+  } = useLexicalListDrawer(t3);
   let t4;
   let t5;
-  if ($[5] !== editor || $[6] !== openDrawer) {
+  if ($[5] !== editor || $[6] !== openListDrawer) {
     t4 = () => editor.registerCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, payload => {
       setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null);
-      openDrawer();
+      openListDrawer();
       return true;
     }, COMMAND_PRIORITY_EDITOR);
-    t5 = [editor, openDrawer];
+    t5 = [editor, openListDrawer];
     $[5] = editor;
-    $[6] = openDrawer;
+    $[6] = openListDrawer;
     $[7] = t4;
     $[8] = t5;
   } else {
@@ -86,7 +87,7 @@ const RelationshipDrawerComponent = t0 => {
   }
   useEffect(t4, t5);
   let t6;
-  if ($[9] !== editor || $[10] !== replaceNodeKey || $[11] !== closeDrawer) {
+  if ($[9] !== editor || $[10] !== replaceNodeKey || $[11] !== closeListDrawer) {
     t6 = t7 => {
       const {
         collectionSlug,
@@ -98,11 +99,11 @@ const RelationshipDrawerComponent = t0 => {
         replaceNodeKey,
         value: docID
       });
-      closeDrawer();
+      closeListDrawer();
     };
     $[9] = editor;
     $[10] = replaceNodeKey;
-    $[11] = closeDrawer;
+    $[11] = closeListDrawer;
     $[12] = t6;
   } else {
     t6 = $[12];
@@ -119,9 +120,9 @@ const RelationshipDrawerComponent = t0 => {
     t7 = $[14];
   }
   let t8;
-  if ($[15] !== isDrawerOpen || $[16] !== enabledCollectionSlugs) {
-    t8 = [isDrawerOpen, enabledCollectionSlugs];
-    $[15] = isDrawerOpen;
+  if ($[15] !== isListDrawerOpen || $[16] !== enabledCollectionSlugs) {
+    t8 = [isListDrawerOpen, enabledCollectionSlugs];
+    $[15] = isListDrawerOpen;
     $[16] = enabledCollectionSlugs;
     $[17] = t8;
   } else {

package/dist/features/relationship/client/drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useLexicalComposerContext","useListDrawer","$getNodeByKey","COMMAND_PRIORITY_EDITOR","React","useCallback","useEffect","useState","$createRelationshipNode","INSERT_RELATIONSHIP_COMMAND","EnabledRelationshipsCondition","INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND","insertRelationship","editor","relationTo","replaceNodeKey","value","dispatchCommand","update","node","replace","RelationshipDrawerComponent","t0","$","enabledCollectionSlugs","t1","selectedCollectionSlug","setSelectedCollectionSlug","setReplaceNodeKey","t2","collectionSlugs","selectedCollection","ListDrawer","ListDrawerToggler","t3","closeDrawer","isDrawerOpen","openDrawer","t4","t5","registerCommand","payload","nodeKey","t6","t7","collectionSlug","docID","onSelect","t8","t9","_jsx","RelationshipDrawer","props","length"],"sources":["../../../../../src/features/relationship/client/drawer/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useListDrawer } from '@payloadcms/ui'\nimport { $getNodeByKey, COMMAND_PRIORITY_EDITOR } from 'lexical'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { $createRelationshipNode } from '../nodes/RelationshipNode.js'\nimport { INSERT_RELATIONSHIP_COMMAND } from '../plugins/index.js'\nimport { EnabledRelationshipsCondition } from '../utils/EnabledRelationshipsCondition.js'\nimport { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from './commands.js'\n\nconst insertRelationship = ({\n  editor,\n  relationTo,\n  replaceNodeKey,\n  value,\n}: {\n  editor: LexicalEditor\n  relationTo: string\n  replaceNodeKey: null | string\n  value: number | string\n}) => {\n  if (!replaceNodeKey) {\n    editor.dispatchCommand(INSERT_RELATIONSHIP_COMMAND, {\n      relationTo,\n      value,\n    })\n  } else {\n    editor.update(() => {\n      const node = $getNodeByKey(replaceNodeKey)\n      if (node) {\n        node.replace($createRelationshipNode({ relationTo, value }))\n      }\n    })\n  }\n}\n\ntype Props = {\n  enabledCollectionSlugs: null | string[]\n}\n\nconst RelationshipDrawerComponent: React.FC<Props> = ({ enabledCollectionSlugs }) => {\n  const [editor] = useLexicalComposerContext()\n  const [selectedCollectionSlug, setSelectedCollectionSlug] = useState(\n    () => enabledCollectionSlugs?.[0],\n  )\n  const [replaceNodeKey, setReplaceNodeKey] = useState<null | string>(null)\n\n  const [ListDrawer, ListDrawerToggler, { closeDrawer, isDrawerOpen, openDrawer }] = useListDrawer({\n    collectionSlugs: enabledCollectionSlugs!,\n    selectedCollection: selectedCollectionSlug,\n  })\n\n  useEffect(() => {\n    return editor.registerCommand<{\n      replace: { nodeKey: string } | false\n    }>(\n      INSERT_RELATIONSHIP_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      insertRelationship({\n        editor,\n        relationTo: collectionSlug,\n        replaceNodeKey,\n        value: docID,\n      })\n      closeDrawer()\n    },\n    [editor, closeDrawer, replaceNodeKey],\n  )\n\n  useEffect(() => {\n    // always reset back to first option\n    // TODO: this is not working, see the ListDrawer component\n    setSelectedCollectionSlug(enabledCollectionSlugs?.[0])\n  }, [isDrawerOpen, enabledCollectionSlugs])\n\n  return <ListDrawer onSelect={onSelect} />\n}\n\nexport const RelationshipDrawer = (props: Props): React.ReactNode => {\n  return (props?.enabledCollectionSlugs?.length ?? -1) > 0 ? ( // If enabledCollectionSlugs it overrides what EnabledRelationshipsCondition is doing\n    <RelationshipDrawerComponent {...props} />\n  ) : (\n    <EnabledRelationshipsCondition {...props}>\n      <RelationshipDrawerComponent {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useLexicalComposerContext","$getNodeByKey","COMMAND_PRIORITY_EDITOR","React","useCallback","useEffect","useState","useLexicalListDrawer","$createRelationshipNode","INSERT_RELATIONSHIP_COMMAND","EnabledRelationshipsCondition","INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND","insertRelationship","editor","relationTo","replaceNodeKey","value","dispatchCommand","update","node","replace","RelationshipDrawerComponent","t0","$","enabledCollectionSlugs","t1","selectedCollectionSlug","setSelectedCollectionSlug","setReplaceNodeKey","t2","undefined","t3","collectionSlugs","selectedCollection","closeListDrawer","isListDrawerOpen","ListDrawer","openListDrawer","t4","t5","registerCommand","payload","nodeKey","t6","t7","collectionSlug","docID","onSelect","t8","t9","_jsx","RelationshipDrawer","props","length"],"sources":["../../../../../src/features/relationship/client/drawer/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { $getNodeByKey, COMMAND_PRIORITY_EDITOR } from 'lexical'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { useLexicalListDrawer } from '../../../../utilities/fieldsDrawer/useLexicalListDrawer.js'\nimport { $createRelationshipNode } from '../nodes/RelationshipNode.js'\nimport { INSERT_RELATIONSHIP_COMMAND } from '../plugins/index.js'\nimport { EnabledRelationshipsCondition } from '../utils/EnabledRelationshipsCondition.js'\nimport { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from './commands.js'\n\nconst insertRelationship = ({\n  editor,\n  relationTo,\n  replaceNodeKey,\n  value,\n}: {\n  editor: LexicalEditor\n  relationTo: string\n  replaceNodeKey: null | string\n  value: number | string\n}) => {\n  if (!replaceNodeKey) {\n    editor.dispatchCommand(INSERT_RELATIONSHIP_COMMAND, {\n      relationTo,\n      value,\n    })\n  } else {\n    editor.update(() => {\n      const node = $getNodeByKey(replaceNodeKey)\n      if (node) {\n        node.replace($createRelationshipNode({ relationTo, value }))\n      }\n    })\n  }\n}\n\ntype Props = {\n  enabledCollectionSlugs: null | string[]\n}\n\nconst RelationshipDrawerComponent: React.FC<Props> = ({ enabledCollectionSlugs }) => {\n  const [editor] = useLexicalComposerContext()\n  const [selectedCollectionSlug, setSelectedCollectionSlug] = useState(\n    () => enabledCollectionSlugs?.[0],\n  )\n  const [replaceNodeKey, setReplaceNodeKey] = useState<null | string>(null)\n\n  const { closeListDrawer, isListDrawerOpen, ListDrawer, openListDrawer } = useLexicalListDrawer({\n    collectionSlugs: enabledCollectionSlugs ? enabledCollectionSlugs : undefined,\n    selectedCollection: selectedCollectionSlug,\n  })\n\n  useEffect(() => {\n    return editor.registerCommand<{\n      replace: { nodeKey: string } | false\n    }>(\n      INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND,\n      (payload) => {\n        setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null)\n        openListDrawer()\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor, openListDrawer])\n\n  const onSelect = useCallback(\n    ({ collectionSlug, docID }) => {\n      insertRelationship({\n        editor,\n        relationTo: collectionSlug,\n        replaceNodeKey,\n        value: docID,\n      })\n      closeListDrawer()\n    },\n    [editor, closeListDrawer, replaceNodeKey],\n  )\n\n  useEffect(() => {\n    // always reset back to first option\n    // TODO: this is not working, see the ListDrawer component\n    setSelectedCollectionSlug(enabledCollectionSlugs?.[0])\n  }, [isListDrawerOpen, enabledCollectionSlugs])\n\n  return <ListDrawer onSelect={onSelect} />\n}\n\nexport const RelationshipDrawer = (props: Props): React.ReactNode => {\n  return (props?.enabledCollectionSlugs?.length ?? -1) > 0 ? ( // If enabledCollectionSlugs it overrides what EnabledRelationshipsCondition is doing\n    <RelationshipDrawerComponent {...props} />\n  ) : (\n    <EnabledRelationshipsCondition {...props}>\n      <RelationshipDrawerComponent {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/upload/client/component/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAsE,MAAM,OAAO,CAAA;AAG1F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AASlE,OAAO,cAAc,CAAA;AAQrB,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,UAAU,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAsPD,eAAO,MAAM,eAAe,UAAW,YAAY,KAAG,KAAK,CAAC,SAM3D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/upload/client/component/index.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAsE,MAAM,OAAO,CAAA;AAG1F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAWlE,OAAO,cAAc,CAAA;AAQrB,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,UAAU,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAmPD,eAAO,MAAM,eAAe,UAAW,YAAY,KAAG,KAAK,CAAC,SAM3D,CAAA"}

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

@@ -5,11 +5,13 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js';
 import { mergeRegister } from '@lexical/utils';
 import { getTranslation } from '@payloadcms/translations';
-import { Button, DrawerToggler, File, formatDrawerSlug, useConfig, useDocumentDrawer, useEditDepth, useModal, usePayloadAPI, useTranslation } from '@payloadcms/ui';
+import { Button, File, formatDrawerSlug, useConfig, useEditDepth, usePayloadAPI, useTranslation } from '@payloadcms/ui';
 import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND } from 'lexical';
 import React, { useCallback, useEffect, useId, useReducer, useRef, useState } from 'react';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
 import { FieldsDrawer } from '../../../../utilities/fieldsDrawer/Drawer.js';
+import { useLexicalDocumentDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js';
+import { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js';
 import { EnabledRelationshipsCondition } from '../../../relationship/client/utils/EnabledRelationshipsCondition.js';
 import { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from '../drawer/commands.js';
 import { $isUploadNode } from '../nodes/UploadNode.js';
@@ -39,9 +41,6 @@ const Component = props => {
     }
   } = useConfig();
   const uploadRef = useRef(null);
-  const {
-    closeModal
-  } = useModal();
   const {
     uuid
   } = useEditorConfigContext();
@@ -59,13 +58,19 @@ const Component = props => {
   const [cacheBust, dispatchCacheBust] = useReducer(state => state + 1, 0);
   const [relatedCollection] = useState(() => collections.find(coll => coll.slug === relationTo));
   const componentID = useId();
-  const drawerSlug = formatDrawerSlug({
+  const extraFieldsDrawerSlug = formatDrawerSlug({
     slug: `lexical-upload-drawer-` + uuid + componentID,
     depth: editDepth
   });
-  const [DocumentDrawer, DocumentDrawerToggler, {
-    closeDrawer
-  }] = useDocumentDrawer({
+  // Need to use hook to initialize useEffect that restores cursor position
+  const {
+    toggleDrawer
+  } = useLexicalDrawer(extraFieldsDrawerSlug, true);
+  const {
+    closeDocumentDrawer,
+    DocumentDrawer,
+    DocumentDrawerToggler
+  } = useLexicalDocumentDrawer({
     id: value,
     collectionSlug: relatedCollection.slug
   });
@@ -89,8 +94,8 @@ const Component = props => {
       cacheBust
     });
     dispatchCacheBust();
-    closeDrawer();
-  }, [setParams, cacheBust, closeDrawer]);
+    closeDocumentDrawer();
+  }, [setParams, cacheBust, closeDocumentDrawer]);
   const $onDelete = useCallback(event => {
     const deleteSelection = $getSelection();
     if (isSelected && $isNodeSelection(deleteSelection)) {
@@ -135,8 +140,7 @@ const Component = props => {
         uploadNode.setData(newData);
       }
     });
-    closeModal(drawerSlug);
-  }, [closeModal, editor, drawerSlug, nodeKey]);
+  }, [editor, nodeKey]);
   return /*#__PURE__*/_jsxs("div", {
     className: [baseClass, isSelected && `${baseClass}--selected`].filter(Boolean).join(' '),
     contentEditable: false,
@@ -160,24 +164,22 @@ const Component = props => {
             children: getTranslation(relatedCollection.labels.singular, i18n)
           }), editor.isEditable() && /*#__PURE__*/_jsxs("div", {
             className: `${baseClass}__actions`,
-            children: [hasExtraFields ? /*#__PURE__*/_jsx(DrawerToggler, {
+            children: [hasExtraFields ? /*#__PURE__*/_jsx(Button, {
+              buttonStyle: "icon-label",
               className: `${baseClass}__upload-drawer-toggler`,
               disabled: field?.admin?.readOnly,
-              slug: drawerSlug,
-              children: /*#__PURE__*/_jsx(Button, {
-                buttonStyle: "icon-label",
-                el: "div",
-                icon: "edit",
-                onClick: e => {
-                  e.preventDefault();
-                },
-                round: true,
-                tooltip: t('fields:editRelationship')
-              })
+              el: "button",
+              icon: "edit",
+              onClick: () => {
+                toggleDrawer();
+              },
+              round: true,
+              tooltip: t('fields:editRelationship')
             }) : null, /*#__PURE__*/_jsx(Button, {
               buttonStyle: "icon-label",
+              className: `${baseClass}__swap-drawer-toggler`,
               disabled: field?.admin?.readOnly,
-              el: "div",
+              el: "button",
               icon: "swap",
               onClick: () => {
                 editor.dispatchCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, {
@@ -193,8 +195,8 @@ const Component = props => {
               className: `${baseClass}__removeButton`,
               disabled: field?.admin?.readOnly,
               icon: "x",
-              onClick: e_0 => {
-                e_0.preventDefault();
+              onClick: e => {
+                e.preventDefault();
                 removeUpload();
               },
               round: true,
@@ -215,7 +217,7 @@ const Component = props => {
       onSave: updateUpload
     }) : null, hasExtraFields ? /*#__PURE__*/_jsx(FieldsDrawer, {
       data: fields,
-      drawerSlug: drawerSlug,
+      drawerSlug: extraFieldsDrawerSlug,
       drawerTitle: t('general:editLabel', {
         label: getTranslation(relatedCollection.labels.singular, i18n)
       }),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useLexicalComposerContext","useLexicalNodeSelection","mergeRegister","getTranslation","Button","DrawerToggler","File","formatDrawerSlug","useConfig","useDocumentDrawer","useEditDepth","useModal","usePayloadAPI","useTranslation","$getNodeByKey","$getSelection","$isNodeSelection","CLICK_COMMAND","COMMAND_PRIORITY_LOW","KEY_BACKSPACE_COMMAND","KEY_DELETE_COMMAND","React","useCallback","useEffect","useId","useReducer","useRef","useState","useEditorConfigContext","FieldsDrawer","EnabledRelationshipsCondition","INSERT_UPLOAD_WITH_DRAWER_COMMAND","$isUploadNode","baseClass","initialParams","depth","Component","props","data","fields","relationTo","value","nodeKey","Error","config","collections","routes","api","serverURL","uploadRef","closeModal","uuid","editDepth","editor","isSelected","setSelected","clearSelection","editorConfig","field","i18n","t","cacheBust","dispatchCacheBust","state","relatedCollection","find","coll","slug","componentID","drawerSlug","DocumentDrawer","DocumentDrawerToggler","closeDrawer","id","collectionSlug","setParams","thumbnailSRC","thumbnailURL","url","removeUpload","update","remove","updateUpload","$onDelete","event","deleteSelection","preventDefault","getNodes","forEach","node","registerCommand","target","current","contains","shiftKey","hasExtraFields","resolvedFeatureMap","get","sanitizedClientFeatureProps","onExtraFieldsDrawerSubmit","_","uploadNode","newData","getData","setData","_jsxs","className","filter","Boolean","join","contentEditable","ref","_jsx","alt","filename","src","labels","singular","isEditable","disabled","admin","readOnly","buttonStyle","el","icon","onClick","e","round","tooltip","dispatchCommand","replace","onSave","drawerTitle","label","featureKey","handleDrawerSubmit","schemaPathSuffix","UploadComponent","uploads"],"sources":["../../../../../src/features/upload/client/component/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, Data } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js'\nimport { mergeRegister } from '@lexical/utils'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  DrawerToggler,\n  File,\n  formatDrawerSlug,\n  useConfig,\n  useDocumentDrawer,\n  useEditDepth,\n  useModal,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui'\nimport {\n  $getNodeByKey,\n  $getSelection,\n  $isNodeSelection,\n  CLICK_COMMAND,\n  COMMAND_PRIORITY_LOW,\n  KEY_BACKSPACE_COMMAND,\n  KEY_DELETE_COMMAND,\n} from 'lexical'\nimport React, { useCallback, useEffect, useId, useReducer, useRef, useState } from 'react'\n\nimport type { BaseClientFeatureProps } from '../../../typesClient.js'\nimport type { UploadData } from '../../server/nodes/UploadNode.js'\nimport type { UploadFeaturePropsClient } from '../feature.client.js'\nimport type { UploadNode } from '../nodes/UploadNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { FieldsDrawer } from '../../../../utilities/fieldsDrawer/Drawer.js'\nimport { EnabledRelationshipsCondition } from '../../../relationship/client/utils/EnabledRelationshipsCondition.js'\nimport { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from '../drawer/commands.js'\nimport { $isUploadNode } from '../nodes/UploadNode.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}\n\nconst Component: React.FC<ElementProps> = (props) => {\n  const {\n    data: { fields, relationTo, value },\n    nodeKey,\n  } = props\n\n  if (typeof value === 'object') {\n    throw new Error(\n      'Upload value should be a string or number. The Lexical Upload component should not receive the populated value object.',\n    )\n  }\n\n  const {\n    config: {\n      collections,\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n  const uploadRef = useRef<HTMLDivElement | null>(null)\n  const { closeModal } = useModal()\n  const { uuid } = useEditorConfigContext()\n  const editDepth = useEditDepth()\n  const [editor] = useLexicalComposerContext()\n  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey)\n\n  const { editorConfig, field } = useEditorConfigContext()\n\n  const { i18n, t } = useTranslation()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [relatedCollection] = useState<ClientCollectionConfig>(\n    () => collections.find((coll) => coll.slug === relationTo)!,\n  )\n\n  const componentID = useId()\n\n  const drawerSlug = formatDrawerSlug({\n    slug: `lexical-upload-drawer-` + uuid + componentID, // There can be multiple upload components, each with their own drawer, in one single editor => separate them by componentID\n    depth: editDepth,\n  })\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id: value,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  // Get the referenced document\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value}`,\n    { initialParams },\n  )\n\n  const thumbnailSRC = data?.thumbnailURL || data?.url\n\n  const removeUpload = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey)?.remove()\n    })\n  }, [editor, nodeKey])\n\n  const updateUpload = useCallback(\n    (data: Data) => {\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 $onDelete = useCallback(\n    (event: KeyboardEvent) => {\n      const deleteSelection = $getSelection()\n      if (isSelected && $isNodeSelection(deleteSelection)) {\n        event.preventDefault()\n        editor.update(() => {\n          deleteSelection.getNodes().forEach((node) => {\n            if ($isUploadNode(node)) {\n              node.remove()\n            }\n          })\n        })\n      }\n      return false\n    },\n    [editor, isSelected],\n  )\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerCommand<MouseEvent>(\n        CLICK_COMMAND,\n        (event: MouseEvent) => {\n          // Check if uploadRef.target or anything WITHIN uploadRef.target was clicked\n          if (\n            event.target === uploadRef.current ||\n            uploadRef.current?.contains(event.target as Node)\n          ) {\n            if (event.shiftKey) {\n              setSelected(!isSelected)\n            } else {\n              if (!isSelected) {\n                clearSelection()\n                setSelected(true)\n              }\n            }\n            return true\n          }\n\n          return false\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n\n      editor.registerCommand(KEY_DELETE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),\n      editor.registerCommand(KEY_BACKSPACE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),\n    )\n  }, [clearSelection, editor, isSelected, nodeKey, $onDelete, setSelected])\n\n  const hasExtraFields = (\n    editorConfig?.resolvedFeatureMap?.get('upload')\n      ?.sanitizedClientFeatureProps as BaseClientFeatureProps<UploadFeaturePropsClient>\n  ).collections?.[relatedCollection.slug]?.hasExtraFields\n\n  const onExtraFieldsDrawerSubmit = useCallback(\n    (_, data) => {\n      // Update lexical node (with key nodeKey) with new data\n      editor.update(() => {\n        const uploadNode: null | UploadNode = $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    <div\n      className={[baseClass, isSelected && `${baseClass}--selected`].filter(Boolean).join(' ')}\n      contentEditable={false}\n      ref={uploadRef}\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 ? (\n              <img\n                alt={data?.filename}\n                data-lexical-upload-id={value}\n                data-lexical-upload-relation-to={relationTo}\n                src={thumbnailSRC}\n              />\n            ) : (\n              <File />\n            )}\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?.admin?.readOnly}\n                    slug={drawerSlug}\n                  >\n                    <Button\n                      buttonStyle=\"icon-label\"\n                      el=\"div\"\n                      icon=\"edit\"\n                      onClick={(e) => {\n                        e.preventDefault()\n                      }}\n                      round\n                      tooltip={t('fields:editRelationship')}\n                    />\n                  </DrawerToggler>\n                ) : null}\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  disabled={field?.admin?.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?.admin?.readOnly}\n                  icon=\"x\"\n                  onClick={(e) => {\n                    e.preventDefault()\n                    removeUpload()\n                  }}\n                  round\n                  tooltip={t('fields:removeUpload')}\n                />\n              </div>\n            )}\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 ? <DocumentDrawer onSave={updateUpload} /> : null}\n      {hasExtraFields ? (\n        <FieldsDrawer\n          data={fields}\n          drawerSlug={drawerSlug}\n          drawerTitle={t('general:editLabel', {\n            label: getTranslation(relatedCollection.labels.singular, i18n),\n          })}\n          featureKey=\"upload\"\n          handleDrawerSubmit={onExtraFieldsDrawerSubmit}\n          schemaPathSuffix={relatedCollection.slug}\n        />\n      ) : null}\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useLexicalComposerContext","useLexicalNodeSelection","mergeRegister","getTranslation","Button","File","formatDrawerSlug","useConfig","useEditDepth","usePayloadAPI","useTranslation","$getNodeByKey","$getSelection","$isNodeSelection","CLICK_COMMAND","COMMAND_PRIORITY_LOW","KEY_BACKSPACE_COMMAND","KEY_DELETE_COMMAND","React","useCallback","useEffect","useId","useReducer","useRef","useState","useEditorConfigContext","FieldsDrawer","useLexicalDocumentDrawer","useLexicalDrawer","EnabledRelationshipsCondition","INSERT_UPLOAD_WITH_DRAWER_COMMAND","$isUploadNode","baseClass","initialParams","depth","Component","props","data","fields","relationTo","value","nodeKey","Error","config","collections","routes","api","serverURL","uploadRef","uuid","editDepth","editor","isSelected","setSelected","clearSelection","editorConfig","field","i18n","t","cacheBust","dispatchCacheBust","state","relatedCollection","find","coll","slug","componentID","extraFieldsDrawerSlug","toggleDrawer","closeDocumentDrawer","DocumentDrawer","DocumentDrawerToggler","id","collectionSlug","setParams","thumbnailSRC","thumbnailURL","url","removeUpload","update","remove","updateUpload","$onDelete","event","deleteSelection","preventDefault","getNodes","forEach","node","registerCommand","target","current","contains","shiftKey","hasExtraFields","resolvedFeatureMap","get","sanitizedClientFeatureProps","onExtraFieldsDrawerSubmit","_","uploadNode","newData","getData","setData","_jsxs","className","filter","Boolean","join","contentEditable","ref","_jsx","alt","filename","src","labels","singular","isEditable","buttonStyle","disabled","admin","readOnly","el","icon","onClick","round","tooltip","dispatchCommand","replace","e","onSave","drawerSlug","drawerTitle","label","featureKey","handleDrawerSubmit","schemaPathSuffix","UploadComponent","uploads"],"sources":["../../../../../src/features/upload/client/component/index.tsx"],"sourcesContent":["'use client'\nimport type { BaseSelection } from 'lexical'\nimport type { ClientCollectionConfig, Data } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js'\nimport { mergeRegister } from '@lexical/utils'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  File,\n  formatDrawerSlug,\n  useConfig,\n  useEditDepth,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui'\nimport {\n  $getNodeByKey,\n  $getSelection,\n  $isNodeSelection,\n  CLICK_COMMAND,\n  COMMAND_PRIORITY_LOW,\n  KEY_BACKSPACE_COMMAND,\n  KEY_DELETE_COMMAND,\n} from 'lexical'\nimport React, { useCallback, useEffect, useId, useReducer, useRef, useState } from 'react'\n\nimport type { BaseClientFeatureProps } from '../../../typesClient.js'\nimport type { UploadData } from '../../server/nodes/UploadNode.js'\nimport type { UploadFeaturePropsClient } from '../feature.client.js'\nimport type { UploadNode } from '../nodes/UploadNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { FieldsDrawer } from '../../../../utilities/fieldsDrawer/Drawer.js'\nimport { useLexicalDocumentDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDocumentDrawer.js'\nimport { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js'\nimport { EnabledRelationshipsCondition } from '../../../relationship/client/utils/EnabledRelationshipsCondition.js'\nimport { INSERT_UPLOAD_WITH_DRAWER_COMMAND } from '../drawer/commands.js'\nimport { $isUploadNode } from '../nodes/UploadNode.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}\n\nconst Component: React.FC<ElementProps> = (props) => {\n  const {\n    data: { fields, relationTo, value },\n    nodeKey,\n  } = props\n\n  if (typeof value === 'object') {\n    throw new Error(\n      'Upload value should be a string or number. The Lexical Upload component should not receive the populated value object.',\n    )\n  }\n\n  const {\n    config: {\n      collections,\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n  const uploadRef = useRef<HTMLDivElement | null>(null)\n  const { uuid } = useEditorConfigContext()\n  const editDepth = useEditDepth()\n  const [editor] = useLexicalComposerContext()\n  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey)\n\n  const { editorConfig, field } = useEditorConfigContext()\n\n  const { i18n, t } = useTranslation()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [relatedCollection] = useState<ClientCollectionConfig>(\n    () => collections.find((coll) => coll.slug === relationTo)!,\n  )\n\n  const componentID = useId()\n\n  const extraFieldsDrawerSlug = formatDrawerSlug({\n    slug: `lexical-upload-drawer-` + uuid + componentID, // There can be multiple upload components, each with their own drawer, in one single editor => separate them by componentID\n    depth: editDepth,\n  })\n\n  // Need to use hook to initialize useEffect that restores cursor position\n  const { toggleDrawer } = useLexicalDrawer(extraFieldsDrawerSlug, true)\n\n  const { closeDocumentDrawer, DocumentDrawer, DocumentDrawerToggler } = useLexicalDocumentDrawer({\n    id: value,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  // Get the referenced document\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value}`,\n    { initialParams },\n  )\n\n  const thumbnailSRC = data?.thumbnailURL || data?.url\n\n  const removeUpload = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey)?.remove()\n    })\n  }, [editor, nodeKey])\n\n  const updateUpload = useCallback(\n    (data: Data) => {\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      closeDocumentDrawer()\n    },\n    [setParams, cacheBust, closeDocumentDrawer],\n  )\n\n  const $onDelete = useCallback(\n    (event: KeyboardEvent) => {\n      const deleteSelection = $getSelection()\n      if (isSelected && $isNodeSelection(deleteSelection)) {\n        event.preventDefault()\n        editor.update(() => {\n          deleteSelection.getNodes().forEach((node) => {\n            if ($isUploadNode(node)) {\n              node.remove()\n            }\n          })\n        })\n      }\n      return false\n    },\n    [editor, isSelected],\n  )\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerCommand<MouseEvent>(\n        CLICK_COMMAND,\n        (event: MouseEvent) => {\n          // Check if uploadRef.target or anything WITHIN uploadRef.target was clicked\n          if (\n            event.target === uploadRef.current ||\n            uploadRef.current?.contains(event.target as Node)\n          ) {\n            if (event.shiftKey) {\n              setSelected(!isSelected)\n            } else {\n              if (!isSelected) {\n                clearSelection()\n                setSelected(true)\n              }\n            }\n            return true\n          }\n\n          return false\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n\n      editor.registerCommand(KEY_DELETE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),\n      editor.registerCommand(KEY_BACKSPACE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),\n    )\n  }, [clearSelection, editor, isSelected, nodeKey, $onDelete, setSelected])\n\n  const hasExtraFields = (\n    editorConfig?.resolvedFeatureMap?.get('upload')\n      ?.sanitizedClientFeatureProps as BaseClientFeatureProps<UploadFeaturePropsClient>\n  ).collections?.[relatedCollection.slug]?.hasExtraFields\n\n  const onExtraFieldsDrawerSubmit = useCallback(\n    (_, data) => {\n      // Update lexical node (with key nodeKey) with new data\n      editor.update(() => {\n        const uploadNode: null | UploadNode = $getNodeByKey(nodeKey)\n        if (uploadNode) {\n          const newData: UploadData = {\n            ...uploadNode.getData(),\n            fields: data,\n          }\n          uploadNode.setData(newData)\n        }\n      })\n    },\n    [editor, nodeKey],\n  )\n\n  return (\n    <div\n      className={[baseClass, isSelected && `${baseClass}--selected`].filter(Boolean).join(' ')}\n      contentEditable={false}\n      ref={uploadRef}\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 ? (\n              <img\n                alt={data?.filename}\n                data-lexical-upload-id={value}\n                data-lexical-upload-relation-to={relationTo}\n                src={thumbnailSRC}\n              />\n            ) : (\n              <File />\n            )}\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                  <Button\n                    buttonStyle=\"icon-label\"\n                    className={`${baseClass}__upload-drawer-toggler`}\n                    disabled={field?.admin?.readOnly}\n                    el=\"button\"\n                    icon=\"edit\"\n                    onClick={() => {\n                      toggleDrawer()\n                    }}\n                    round\n                    tooltip={t('fields:editRelationship')}\n                  />\n                ) : null}\n\n                <Button\n                  buttonStyle=\"icon-label\"\n                  className={`${baseClass}__swap-drawer-toggler`}\n                  disabled={field?.admin?.readOnly}\n                  el=\"button\"\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?.admin?.readOnly}\n                  icon=\"x\"\n                  onClick={(e) => {\n                    e.preventDefault()\n                    removeUpload()\n                  }}\n                  round\n                  tooltip={t('fields:removeUpload')}\n                />\n              </div>\n            )}\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 ? <DocumentDrawer onSave={updateUpload} /> : null}\n      {hasExtraFields ? (\n        <FieldsDrawer\n          data={fields}\n          drawerSlug={extraFieldsDrawerSlug}\n          drawerTitle={t('general:editLabel', {\n            label: getTranslation(relatedCollection.labels.singular, i18n),\n          })}\n          featureKey=\"upload\"\n          handleDrawerSubmit={onExtraFieldsDrawerSubmit}\n          schemaPathSuffix={relatedCollection.slug}\n        />\n      ) : null}\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"],"mappings":"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","ignoreList":[]}

package/dist/features/upload/client/drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/upload/client/drawer/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA2C,MAAM,OAAO,CAAA;AA4C/D,KAAK,KAAK,GAAG;IACX,sBAAsB,EAAE,MAAM,EAAE,CAAA;CACjC,CAAA;AA0CD,eAAO,MAAM,YAAY,UAAW,KAAK,KAAG,KAAK,CAAC,SAMjD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/upload/client/drawer/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAA;AA6C/D,KAAK,KAAK,GAAG;IACX,sBAAsB,EAAE,MAAM,EAAE,CAAA;CACjC,CAAA;AA0CD,eAAO,MAAM,YAAY,UAAW,KAAK,KAAG,KAAK,CAAC,SAMjD,CAAA"}

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

@@ -3,9 +3,9 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
-import { useListDrawer } from '@payloadcms/ui';
 import { $getNodeByKey, COMMAND_PRIORITY_EDITOR } from 'lexical';
 import React, { useCallback, useEffect, useState } from 'react';
+import { useLexicalListDrawer } from '../../../../utilities/fieldsDrawer/useLexicalListDrawer.js';
 import { EnabledRelationshipsCondition } from '../../../relationship/client/utils/EnabledRelationshipsCondition.js';
 import { $createUploadNode } from '../nodes/UploadNode.js';
 import { INSERT_UPLOAD_COMMAND } from '../plugin/index.js';
@@ -57,64 +57,64 @@ const UploadDrawerComponent = t0 => {
   } else {
     t1 = $[1];
   }
-  const [ListDrawer, ListDrawerToggler, t2] = useListDrawer(t1);
   const {
-    closeDrawer,
-    openDrawer
-  } = t2;
+    closeListDrawer,
+    ListDrawer,
+    openListDrawer
+  } = useLexicalListDrawer(t1);
+  let t2;
   let t3;
-  let t4;
-  if ($[2] !== editor || $[3] !== openDrawer) {
-    t3 = () => editor.registerCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, payload => {
+  if ($[2] !== editor || $[3] !== openListDrawer) {
+    t2 = () => editor.registerCommand(INSERT_UPLOAD_WITH_DRAWER_COMMAND, payload => {
       setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null);
-      openDrawer();
+      openListDrawer();
       return true;
     }, COMMAND_PRIORITY_EDITOR);
-    t4 = [editor, openDrawer];
+    t3 = [editor, openListDrawer];
     $[2] = editor;
-    $[3] = openDrawer;
-    $[4] = t3;
-    $[5] = t4;
+    $[3] = openListDrawer;
+    $[4] = t2;
+    $[5] = t3;
   } else {
-    t3 = $[4];
-    t4 = $[5];
+    t2 = $[4];
+    t3 = $[5];
   }
-  useEffect(t3, t4);
-  let t5;
-  if ($[6] !== editor || $[7] !== replaceNodeKey || $[8] !== closeDrawer) {
-    t5 = t6 => {
+  useEffect(t2, t3);
+  let t4;
+  if ($[6] !== closeListDrawer || $[7] !== editor || $[8] !== replaceNodeKey) {
+    t4 = t5 => {
       const {
         collectionSlug,
         docID
-      } = t6;
+      } = t5;
+      closeListDrawer();
       insertUpload({
         editor,
         relationTo: collectionSlug,
         replaceNodeKey,
         value: docID
       });
-      closeDrawer();
     };
-    $[6] = editor;
-    $[7] = replaceNodeKey;
-    $[8] = closeDrawer;
-    $[9] = t5;
+    $[6] = closeListDrawer;
+    $[7] = editor;
+    $[8] = replaceNodeKey;
+    $[9] = t4;
   } else {
-    t5 = $[9];
+    t4 = $[9];
   }
-  const onSelect = t5;
-  let t6;
+  const onSelect = t4;
+  let t5;
   if ($[10] !== onSelect || $[11] !== ListDrawer) {
-    t6 = _jsx(ListDrawer, {
+    t5 = _jsx(ListDrawer, {
       onSelect
     });
     $[10] = onSelect;
     $[11] = ListDrawer;
-    $[12] = t6;
+    $[12] = t5;
   } else {
-    t6 = $[12];
+    t5 = $[12];
   }
-  return t6;
+  return t5;
 };
 export const UploadDrawer = props => {
   return /*#__PURE__*/_jsx(EnabledRelationshipsCondition, {