@payloadcms/richtext-lexical 3.0.0-beta.3 → 3.0.0-beta.31

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

@@ -1,21 +1,17 @@
 'use client';
-import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js';
-const { useLexicalComposerContext } = lexicalComposerContextImport;
-import lexicalImport from 'lexical';
-const { $getNodeByKey, COMMAND_PRIORITY_EDITOR } = lexicalImport;
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { useListDrawer } from '@payloadcms/ui/elements/ListDrawer';
+import { $getNodeByKey, COMMAND_PRIORITY_EDITOR } from 'lexical';
 import React, { useCallback, useEffect, useState } from 'react';
 import { $createRelationshipNode } from '../nodes/RelationshipNode.js';
 import { INSERT_RELATIONSHIP_COMMAND } from '../plugins/index.js';
 import { EnabledRelationshipsCondition } from '../utils/EnabledRelationshipsCondition.js';
 import { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from './commands.js';
-const insertRelationship = ({ id, editor, relationTo, replaceNodeKey })=>{
+const insertRelationship = ({ editor, relationTo, replaceNodeKey, value })=>{
     if (!replaceNodeKey) {
         editor.dispatchCommand(INSERT_RELATIONSHIP_COMMAND, {
             relationTo,
-            value: {
-                id
-            }
+            value
         });
     } else {
         editor.update(()=>{
@@ -23,9 +19,7 @@ const insertRelationship = ({ id, editor, relationTo, replaceNodeKey })=>{
             if (node) {
                 node.replace($createRelationshipNode({
                     relationTo,
-                    value: {
-                        id
-                    }
+                    value
                 }));
             }
         });
@@ -51,10 +45,10 @@ const RelationshipDrawerComponent = ({ enabledCollectionSlugs })=>{
     ]);
     const onSelect = useCallback(({ collectionSlug, docID })=>{
         insertRelationship({
-            id: docID,
             editor,
             relationTo: collectionSlug,
-            replaceNodeKey
+            replaceNodeKey,
+            value: docID
         });
         closeDrawer();
     }, [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/features/relationship/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 { $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  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_RELATIONSHIP_COMMAND, {\n      relationTo,\n      value: {\n        id,\n      },\n    })\n  } else {\n    editor.update(() => {\n      const node = $getNodeByKey(replaceNodeKey)\n      if (node) {\n        node.replace($createRelationshipNode({ relationTo, value: { id } }))\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        id: docID,\n        editor,\n        relationTo: collectionSlug,\n        replaceNodeKey,\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 > 0 ? ( // If enabledCollectionSlugs it overrides what EnabledRelationshipsCondition is doing\n    <RelationshipDrawerComponent {...props} />\n  ) : (\n    <EnabledRelationshipsCondition {...props}>\n      <RelationshipDrawerComponent {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["lexicalComposerContextImport","useLexicalComposerContext","lexicalImport","$getNodeByKey","COMMAND_PRIORITY_EDITOR","useListDrawer","React","useCallback","useEffect","useState","$createRelationshipNode","INSERT_RELATIONSHIP_COMMAND","EnabledRelationshipsCondition","INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND","insertRelationship","id","editor","relationTo","replaceNodeKey","dispatchCommand","value","update","node","replace","RelationshipDrawerComponent","enabledCollectionSlugs","selectedCollectionSlug","setSelectedCollectionSlug","setReplaceNodeKey","ListDrawer","ListDrawerToggler","closeDrawer","isDrawerOpen","openDrawer","collectionSlugs","selectedCollection","registerCommand","payload","nodeKey","onSelect","collectionSlug","docID","RelationshipDrawer","props","length"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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,uBAAuB,QAAQ,+BAA8B;AACtE,SAASC,2BAA2B,QAAQ,sBAAqB;AACjE,SAASC,6BAA6B,QAAQ,4CAA2C;AACzF,SAASC,uCAAuC,QAAQ,gBAAe;AAEvE,MAAMC,qBAAqB,CAAC,EAC1BC,EAAE,EACFC,MAAM,EACNC,UAAU,EACVC,cAAc,EAMf;IACC,IAAI,CAACA,gBAAgB;QACnBF,OAAOG,eAAe,CAACR,6BAA6B;YAClDM;YACAG,OAAO;gBACLL;YACF;QACF;IACF,OAAO;QACLC,OAAOK,MAAM,CAAC;YACZ,MAAMC,OAAOnB,cAAce;YAC3B,IAAII,MAAM;gBACRA,KAAKC,OAAO,CAACb,wBAAwB;oBAAEO;oBAAYG,OAAO;wBAAEL;oBAAG;gBAAE;YACnE;QACF;IACF;AACF;AAMA,MAAMS,8BAA+C,CAAC,EAAEC,sBAAsB,EAAE;IAC9E,MAAM,CAACT,OAAO,GAAGf;IACjB,MAAM,CAACyB,wBAAwBC,0BAA0B,GAAGlB,SAC1D,IAAMgB,sBAAsB,CAAC,EAAE;IAEjC,MAAM,CAACP,gBAAgBU,kBAAkB,GAAGnB,SAAwB;IAEpE,MAAM,CAACoB,YAAYC,mBAAmB,EAAEC,WAAW,EAAEC,YAAY,EAAEC,UAAU,EAAE,CAAC,GAAG5B,cAAc;QAC/F6B,iBAAiBT;QACjBU,oBAAoBT;IACtB;IAEAlB,UAAU;QACR,OAAOQ,OAAOoB,eAAe,CAG3BvB,yCACA,CAACwB;YACCT,kBAAkBS,SAASd,UAAUc,SAASd,QAAQe,UAAU;YAChEL;YACA,OAAO;QACT,GACA7B;IAEJ,GAAG;QAACY;QAAQiB;KAAW;IAEvB,MAAMM,WAAWhC,YACf,CAAC,EAAEiC,cAAc,EAAEC,KAAK,EAAE;QACxB3B,mBAAmB;YACjBC,IAAI0B;YACJzB;YACAC,YAAYuB;YACZtB;QACF;QACAa;IACF,GACA;QAACf;QAAQe;QAAab;KAAe;IAGvCV,UAAU;QACR,oCAAoC;QACpC,0DAA0D;QAC1DmB,0BAA0BF,sBAAsB,CAAC,EAAE;IACrD,GAAG;QAACO;QAAcP;KAAuB;IAEzC,qBAAO,oBAACI;QAAWU,UAAUA;;AAC/B;AAEA,OAAO,MAAMG,qBAAqB,CAACC;IACjC,OAAOA,OAAOlB,wBAAwBmB,SAAS,kBAC7C,oBAACpB,6BAAgCmB,uBAEjC,oBAAC/B,+BAAkC+B,qBACjC,oBAACnB,6BAAgCmB;AAGvC,EAAC"}
+{"version":3,"sources":["../../../../../src/field/features/relationship/drawer/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useListDrawer } from '@payloadcms/ui/elements/ListDrawer'\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 > 0 ? ( // If enabledCollectionSlugs it overrides what EnabledRelationshipsCondition is doing\n    <RelationshipDrawerComponent {...props} />\n  ) : (\n    <EnabledRelationshipsCondition {...props}>\n      <RelationshipDrawerComponent {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["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","enabledCollectionSlugs","selectedCollectionSlug","setSelectedCollectionSlug","setReplaceNodeKey","ListDrawer","ListDrawerToggler","closeDrawer","isDrawerOpen","openDrawer","collectionSlugs","selectedCollection","registerCommand","payload","nodeKey","onSelect","collectionSlug","docID","RelationshipDrawer","props","length"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAGA,SAASA,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,aAAa,QAAQ,qCAAoC;AAClE,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,UAAS;AAChE,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAE/D,SAASC,uBAAuB,QAAQ,+BAA8B;AACtE,SAASC,2BAA2B,QAAQ,sBAAqB;AACjE,SAASC,6BAA6B,QAAQ,4CAA2C;AACzF,SAASC,uCAAuC,QAAQ,gBAAe;AAEvE,MAAMC,qBAAqB,CAAC,EAC1BC,MAAM,EACNC,UAAU,EACVC,cAAc,EACdC,KAAK,EAMN;IACC,IAAI,CAACD,gBAAgB;QACnBF,OAAOI,eAAe,CAACR,6BAA6B;YAClDK;YACAE;QACF;IACF,OAAO;QACLH,OAAOK,MAAM,CAAC;YACZ,MAAMC,OAAOjB,cAAca;YAC3B,IAAII,MAAM;gBACRA,KAAKC,OAAO,CAACZ,wBAAwB;oBAAEM;oBAAYE;gBAAM;YAC3D;QACF;IACF;AACF;AAMA,MAAMK,8BAA+C,CAAC,EAAEC,sBAAsB,EAAE;IAC9E,MAAM,CAACT,OAAO,GAAGb;IACjB,MAAM,CAACuB,wBAAwBC,0BAA0B,GAAGjB,SAC1D,IAAMe,sBAAsB,CAAC,EAAE;IAEjC,MAAM,CAACP,gBAAgBU,kBAAkB,GAAGlB,SAAwB;IAEpE,MAAM,CAACmB,YAAYC,mBAAmB,EAAEC,WAAW,EAAEC,YAAY,EAAEC,UAAU,EAAE,CAAC,GAAG7B,cAAc;QAC/F8B,iBAAiBT;QACjBU,oBAAoBT;IACtB;IAEAjB,UAAU;QACR,OAAOO,OAAOoB,eAAe,CAG3BtB,yCACA,CAACuB;YACCT,kBAAkBS,SAASd,UAAUc,SAASd,QAAQe,UAAU;YAChEL;YACA,OAAO;QACT,GACA3B;IAEJ,GAAG;QAACU;QAAQiB;KAAW;IAEvB,MAAMM,WAAW/B,YACf,CAAC,EAAEgC,cAAc,EAAEC,KAAK,EAAE;QACxB1B,mBAAmB;YACjBC;YACAC,YAAYuB;YACZtB;YACAC,OAAOsB;QACT;QACAV;IACF,GACA;QAACf;QAAQe;QAAab;KAAe;IAGvCT,UAAU;QACR,oCAAoC;QACpC,0DAA0D;QAC1DkB,0BAA0BF,sBAAsB,CAAC,EAAE;IACrD,GAAG;QAACO;QAAcP;KAAuB;IAEzC,qBAAO,oBAACI;QAAWU,UAAUA;;AAC/B;AAEA,OAAO,MAAMG,qBAAqB,CAACC;IACjC,OAAOA,OAAOlB,wBAAwBmB,SAAS,kBAC7C,oBAACpB,6BAAgCmB,uBAEjC,oBAAC9B,+BAAkC8B,qBACjC,oBAACnB,6BAAgCmB;AAGvC,EAAC"}

package/dist/field/features/relationship/feature.client.d.ts

@@ -1,4 +1,19 @@
 /// <reference types="react" resolution-mode="require"/>
-import type { RelationshipFeatureProps } from './feature.server.js';
-export declare const RelationshipFeatureClientComponent: import("react").FC<import("../types.js").ClientComponentProps<RelationshipFeatureProps>>;
+export declare const RelationshipFeatureClientComponent: import("react").FC<({
+    featureKey: string;
+    order: number;
+} & {
+    disabledCollections?: string[];
+    enabledCollections?: never;
+} & {
+    maxDepth?: number;
+}) | ({
+    featureKey: string;
+    order: number;
+} & {
+    disabledCollections?: never;
+    enabledCollections?: string[];
+} & {
+    maxDepth?: number;
+})>;
 //# sourceMappingURL=feature.client.d.ts.map

package/dist/field/features/relationship/feature.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature.client.d.ts","sourceRoot":"","sources":["../../../../src/field/features/relationship/feature.client.tsx"],"names":[],"mappings":";AAKA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAA;AAmDnE,eAAO,MAAM,kCAAkC,0FAAmD,CAAA"}
+{"version":3,"file":"feature.client.d.ts","sourceRoot":"","sources":["../../../../src/field/features/relationship/feature.client.tsx"],"names":[],"mappings":";AA+EA,eAAO,MAAM,kCAAkC;;;;;;;;;;;;;;;;GAAmD,CAAA"}

package/dist/field/features/relationship/feature.client.js

@@ -1,10 +1,10 @@
 'use client';
-import { withMergedProps } from '@payloadcms/ui/elements/withMergedProps';
-import { SlashMenuOption } from '../../lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.js';
+import { $isNodeSelection } from 'lexical';
 import { RelationshipIcon } from '../../lexical/ui/icons/Relationship/index.js';
 import { createClientComponent } from '../createClientComponent.js';
+import { toolbarAddDropdownGroupWithItems } from '../shared/toolbar/addDropdownGroup.js';
 import { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from './drawer/commands.js';
-import { RelationshipNode } from './nodes/RelationshipNode.js';
+import { $isRelationshipNode, RelationshipNode } from './nodes/RelationshipNode.js';
 import { RelationshipPlugin } from './plugins/index.js';
 const RelationshipFeatureClient = (props)=>{
     return {
@@ -16,37 +16,59 @@ const RelationshipFeatureClient = (props)=>{
                 ],
                 plugins: [
                     {
-                        Component: withMergedProps({
-                            Component: RelationshipPlugin,
-                            toMergeIntoProps: props
-                        }),
+                        Component: RelationshipPlugin,
                         position: 'normal'
                     }
                 ],
                 slashMenu: {
-                    options: [
+                    groups: [
                         {
-                            displayName: 'Basic',
-                            key: 'basic',
-                            options: [
-                                new SlashMenuOption('relationship', {
+                            items: [
+                                {
                                     Icon: RelationshipIcon,
-                                    displayName: 'Relationship',
+                                    key: 'relationship',
                                     keywords: [
                                         'relationship',
                                         'relation',
                                         'rel'
                                     ],
+                                    label: 'Relationship',
                                     onSelect: ({ editor })=>{
                                         // dispatch INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND
                                         editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {
                                             replace: false
                                         });
                                     }
-                                })
-                            ]
+                                }
+                            ],
+                            key: 'basic',
+                            label: 'Basic'
                         }
                     ]
+                },
+                toolbarFixed: {
+                    groups: [
+                        toolbarAddDropdownGroupWithItems([
+                            {
+                                ChildComponent: RelationshipIcon,
+                                isActive: ({ selection })=>{
+                                    if (!$isNodeSelection(selection) || !selection.getNodes().length) {
+                                        return false;
+                                    }
+                                    const firstNode = selection.getNodes()[0];
+                                    return $isRelationshipNode(firstNode);
+                                },
+                                key: 'relationship',
+                                label: 'Relationship',
+                                onSelect: ({ editor })=>{
+                                    // dispatch INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND
+                                    editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {
+                                        replace: false
+                                    });
+                                }
+                            }
+                        ])
+                    ]
                 }
             })
     };

package/dist/field/features/relationship/feature.client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/field/features/relationship/feature.client.tsx"],"sourcesContent":["'use client'\n\nimport { withMergedProps } from '@payloadcms/ui/elements/withMergedProps'\n\nimport type { FeatureProviderProviderClient } from '../types.js'\nimport type { RelationshipFeatureProps } from './feature.server.js'\n\nimport { SlashMenuOption } from '../../lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.js'\nimport { RelationshipIcon } from '../../lexical/ui/icons/Relationship/index.js'\nimport { createClientComponent } from '../createClientComponent.js'\nimport { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from './drawer/commands.js'\nimport { RelationshipNode } from './nodes/RelationshipNode.js'\nimport { RelationshipPlugin } from './plugins/index.js'\n\nconst RelationshipFeatureClient: FeatureProviderProviderClient<RelationshipFeatureProps> = (\n  props,\n) => {\n  return {\n    clientFeatureProps: props,\n    feature: () => ({\n      clientFeatureProps: props,\n      nodes: [RelationshipNode],\n      plugins: [\n        {\n          Component: withMergedProps({\n            Component: RelationshipPlugin,\n            toMergeIntoProps: props,\n          }),\n          position: 'normal',\n        },\n      ],\n      slashMenu: {\n        options: [\n          {\n            displayName: 'Basic',\n            key: 'basic',\n            options: [\n              new SlashMenuOption('relationship', {\n                Icon: RelationshipIcon,\n                displayName: 'Relationship',\n                keywords: ['relationship', 'relation', 'rel'],\n                onSelect: ({ editor }) => {\n                  // dispatch INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND\n                  editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {\n                    replace: false,\n                  })\n                },\n              }),\n            ],\n          },\n        ],\n      },\n    }),\n  }\n}\n\nexport const RelationshipFeatureClientComponent = createClientComponent(RelationshipFeatureClient)\n"],"names":["withMergedProps","SlashMenuOption","RelationshipIcon","createClientComponent","INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND","RelationshipNode","RelationshipPlugin","RelationshipFeatureClient","props","clientFeatureProps","feature","nodes","plugins","Component","toMergeIntoProps","position","slashMenu","options","displayName","key","Icon","keywords","onSelect","editor","dispatchCommand","replace","RelationshipFeatureClientComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,SAASA,eAAe,QAAQ,0CAAyC;AAKzE,SAASC,eAAe,QAAQ,sEAAqE;AACrG,SAASC,gBAAgB,QAAQ,+CAA8C;AAC/E,SAASC,qBAAqB,QAAQ,8BAA6B;AACnE,SAASC,uCAAuC,QAAQ,uBAAsB;AAC9E,SAASC,gBAAgB,QAAQ,8BAA6B;AAC9D,SAASC,kBAAkB,QAAQ,qBAAoB;AAEvD,MAAMC,4BAAqF,CACzFC;IAEA,OAAO;QACLC,oBAAoBD;QACpBE,SAAS,IAAO,CAAA;gBACdD,oBAAoBD;gBACpBG,OAAO;oBAACN;iBAAiB;gBACzBO,SAAS;oBACP;wBACEC,WAAWb,gBAAgB;4BACzBa,WAAWP;4BACXQ,kBAAkBN;wBACpB;wBACAO,UAAU;oBACZ;iBACD;gBACDC,WAAW;oBACTC,SAAS;wBACP;4BACEC,aAAa;4BACbC,KAAK;4BACLF,SAAS;gCACP,IAAIhB,gBAAgB,gBAAgB;oCAClCmB,MAAMlB;oCACNgB,aAAa;oCACbG,UAAU;wCAAC;wCAAgB;wCAAY;qCAAM;oCAC7CC,UAAU,CAAC,EAAEC,MAAM,EAAE;wCACnB,mDAAmD;wCACnDA,OAAOC,eAAe,CAACpB,yCAAyC;4CAC9DqB,SAAS;wCACX;oCACF;gCACF;6BACD;wBACH;qBACD;gBACH;YACF,CAAA;IACF;AACF;AAEA,OAAO,MAAMC,qCAAqCvB,sBAAsBI,2BAA0B"}
+{"version":3,"sources":["../../../../src/field/features/relationship/feature.client.tsx"],"sourcesContent":["'use client'\n\nimport { $isNodeSelection } from 'lexical'\n\nimport type { FeatureProviderProviderClient } from '../types.js'\nimport type { RelationshipFeatureProps } from './feature.server.js'\n\nimport { RelationshipIcon } from '../../lexical/ui/icons/Relationship/index.js'\nimport { createClientComponent } from '../createClientComponent.js'\nimport { toolbarAddDropdownGroupWithItems } from '../shared/toolbar/addDropdownGroup.js'\nimport { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from './drawer/commands.js'\nimport { $isRelationshipNode, RelationshipNode } from './nodes/RelationshipNode.js'\nimport { RelationshipPlugin } from './plugins/index.js'\n\nconst RelationshipFeatureClient: FeatureProviderProviderClient<RelationshipFeatureProps> = (\n  props,\n) => {\n  return {\n    clientFeatureProps: props,\n    feature: () => ({\n      clientFeatureProps: props,\n      nodes: [RelationshipNode],\n      plugins: [\n        {\n          Component: RelationshipPlugin,\n          position: 'normal',\n        },\n      ],\n      slashMenu: {\n        groups: [\n          {\n            items: [\n              {\n                Icon: RelationshipIcon,\n                key: 'relationship',\n                keywords: ['relationship', 'relation', 'rel'],\n                label: 'Relationship',\n                onSelect: ({ editor }) => {\n                  // dispatch INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND\n                  editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {\n                    replace: false,\n                  })\n                },\n              },\n            ],\n            key: 'basic',\n            label: 'Basic',\n          },\n        ],\n      },\n      toolbarFixed: {\n        groups: [\n          toolbarAddDropdownGroupWithItems([\n            {\n              ChildComponent: RelationshipIcon,\n              isActive: ({ selection }) => {\n                if (!$isNodeSelection(selection) || !selection.getNodes().length) {\n                  return false\n                }\n\n                const firstNode = selection.getNodes()[0]\n                return $isRelationshipNode(firstNode)\n              },\n              key: 'relationship',\n              label: 'Relationship',\n              onSelect: ({ editor }) => {\n                // dispatch INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND\n                editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {\n                  replace: false,\n                })\n              },\n            },\n          ]),\n        ],\n      },\n    }),\n  }\n}\n\nexport const RelationshipFeatureClientComponent = createClientComponent(RelationshipFeatureClient)\n"],"names":["$isNodeSelection","RelationshipIcon","createClientComponent","toolbarAddDropdownGroupWithItems","INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND","$isRelationshipNode","RelationshipNode","RelationshipPlugin","RelationshipFeatureClient","props","clientFeatureProps","feature","nodes","plugins","Component","position","slashMenu","groups","items","Icon","key","keywords","label","onSelect","editor","dispatchCommand","replace","toolbarFixed","ChildComponent","isActive","selection","getNodes","length","firstNode","RelationshipFeatureClientComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,SAASA,gBAAgB,QAAQ,UAAS;AAK1C,SAASC,gBAAgB,QAAQ,+CAA8C;AAC/E,SAASC,qBAAqB,QAAQ,8BAA6B;AACnE,SAASC,gCAAgC,QAAQ,wCAAuC;AACxF,SAASC,uCAAuC,QAAQ,uBAAsB;AAC9E,SAASC,mBAAmB,EAAEC,gBAAgB,QAAQ,8BAA6B;AACnF,SAASC,kBAAkB,QAAQ,qBAAoB;AAEvD,MAAMC,4BAAqF,CACzFC;IAEA,OAAO;QACLC,oBAAoBD;QACpBE,SAAS,IAAO,CAAA;gBACdD,oBAAoBD;gBACpBG,OAAO;oBAACN;iBAAiB;gBACzBO,SAAS;oBACP;wBACEC,WAAWP;wBACXQ,UAAU;oBACZ;iBACD;gBACDC,WAAW;oBACTC,QAAQ;wBACN;4BACEC,OAAO;gCACL;oCACEC,MAAMlB;oCACNmB,KAAK;oCACLC,UAAU;wCAAC;wCAAgB;wCAAY;qCAAM;oCAC7CC,OAAO;oCACPC,UAAU,CAAC,EAAEC,MAAM,EAAE;wCACnB,mDAAmD;wCACnDA,OAAOC,eAAe,CAACrB,yCAAyC;4CAC9DsB,SAAS;wCACX;oCACF;gCACF;6BACD;4BACDN,KAAK;4BACLE,OAAO;wBACT;qBACD;gBACH;gBACAK,cAAc;oBACZV,QAAQ;wBACNd,iCAAiC;4BAC/B;gCACEyB,gBAAgB3B;gCAChB4B,UAAU,CAAC,EAAEC,SAAS,EAAE;oCACtB,IAAI,CAAC9B,iBAAiB8B,cAAc,CAACA,UAAUC,QAAQ,GAAGC,MAAM,EAAE;wCAChE,OAAO;oCACT;oCAEA,MAAMC,YAAYH,UAAUC,QAAQ,EAAE,CAAC,EAAE;oCACzC,OAAO1B,oBAAoB4B;gCAC7B;gCACAb,KAAK;gCACLE,OAAO;gCACPC,UAAU,CAAC,EAAEC,MAAM,EAAE;oCACnB,mDAAmD;oCACnDA,OAAOC,eAAe,CAACrB,yCAAyC;wCAC9DsB,SAAS;oCACX;gCACF;4BACF;yBACD;qBACF;gBACH;YACF,CAAA;IACF;AACF;AAEA,OAAO,MAAMQ,qCAAqChC,sBAAsBM,2BAA0B"}

package/dist/field/features/relationship/feature.server.d.ts

@@ -1,5 +1,5 @@
 import type { FeatureProviderProviderServer } from '../types.js';
-export type RelationshipFeatureProps = {
+export type ExclusiveRelationshipFeatureProps = {
     /**
      * The collections that should be disabled. Overrides the `enableRichTextRelationship` property in the collection config.
      * When this property is set, `enabledCollections` will not be available.
@@ -14,5 +14,14 @@ export type RelationshipFeatureProps = {
      **/
     enabledCollections?: string[];
 };
+export type RelationshipFeatureProps = ExclusiveRelationshipFeatureProps & {
+    /**
+     * Sets a maximum population depth for this relationship, regardless of the remaining depth when the respective field is reached.
+     * This behaves exactly like the maxDepth properties of relationship and upload fields.
+     *
+     * {@link https://payloadcms.com/docs/getting-started/concepts#field-level-max-depth}
+     */
+    maxDepth?: number;
+};
 export declare const RelationshipFeature: FeatureProviderProviderServer<RelationshipFeatureProps, RelationshipFeatureProps>;
 //# sourceMappingURL=feature.server.d.ts.map

package/dist/field/features/relationship/feature.server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature.server.d.ts","sourceRoot":"","sources":["../../../../src/field/features/relationship/feature.server.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,aAAa,CAAA;AAMhE,MAAM,MAAM,wBAAwB,GAChC;IACE;;;QAGI;IACJ,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAA;IAG9B,kBAAkB,CAAC,EAAE,KAAK,CAAA;CAC3B,GACD;IAEE,mBAAmB,CAAC,EAAE,KAAK,CAAA;IAE3B;;;QAGI;IACJ,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;CAC9B,CAAA;AAEL,eAAO,MAAM,mBAAmB,EAAE,6BAA6B,CAC7D,wBAAwB,EACxB,wBAAwB,CAoBzB,CAAA"}
+{"version":3,"file":"feature.server.d.ts","sourceRoot":"","sources":["../../../../src/field/features/relationship/feature.server.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,aAAa,CAAA;AAOhE,MAAM,MAAM,iCAAiC,GACzC;IACE;;;QAGI;IACJ,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAA;IAG9B,kBAAkB,CAAC,EAAE,KAAK,CAAA;CAC3B,GACD;IAEE,mBAAmB,CAAC,EAAE,KAAK,CAAA;IAE3B;;;QAGI;IACJ,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;CAC9B,CAAA;AAEL,MAAM,MAAM,wBAAwB,GAAG,iCAAiC,GAAG;IACzE;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,6BAA6B,CAC7D,wBAAwB,EACxB,wBAAwB,CAmBzB,CAAA"}

package/dist/field/features/relationship/feature.server.js

@@ -1,6 +1,7 @@
+import { createNode } from '../typeUtilities.js';
 import { RelationshipFeatureClientComponent } from './feature.client.js';
 import { RelationshipNode } from './nodes/RelationshipNode.js';
-import { relationshipPopulationPromise } from './populationPromise.js';
+import { relationshipPopulationPromiseHOC } from './populationPromise.js';
 export const RelationshipFeature = (props)=>{
     return {
         feature: ()=>{
@@ -8,12 +9,12 @@ export const RelationshipFeature = (props)=>{
                 ClientComponent: RelationshipFeatureClientComponent,
                 clientFeatureProps: props,
                 nodes: [
-                    {
+                    createNode({
                         node: RelationshipNode,
                         populationPromises: [
-                            relationshipPopulationPromise
+                            relationshipPopulationPromiseHOC(props)
                         ]
-                    }
+                    })
                 ],
                 serverFeatureProps: props
             };

package/dist/field/features/relationship/feature.server.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/field/features/relationship/feature.server.ts"],"sourcesContent":["import type { FeatureProviderProviderServer } from '../types.js'\n\nimport { RelationshipFeatureClientComponent } from './feature.client.js'\nimport { RelationshipNode } from './nodes/RelationshipNode.js'\nimport { relationshipPopulationPromise } from './populationPromise.js'\n\nexport type RelationshipFeatureProps =\n  | {\n      /**\n       * The collections that should be disabled. Overrides the `enableRichTextRelationship` property in the collection config.\n       * When this property is set, `enabledCollections` will not be available.\n       **/\n      disabledCollections?: string[]\n\n      // Ensures that enabledCollections is not available when disabledCollections is set\n      enabledCollections?: never\n    }\n  | {\n      // Ensures that disabledCollections is not available when enabledCollections is set\n      disabledCollections?: never\n\n      /**\n       * The collections that should be enabled. Overrides the `enableRichTextRelationship` property in the collection config\n       * When this property is set, `disabledCollections` will not be available.\n       **/\n      enabledCollections?: string[]\n    }\n\nexport const RelationshipFeature: FeatureProviderProviderServer<\n  RelationshipFeatureProps,\n  RelationshipFeatureProps\n> = (props) => {\n  return {\n    feature: () => {\n      return {\n        ClientComponent: RelationshipFeatureClientComponent,\n        clientFeatureProps: props,\n        nodes: [\n          {\n            node: RelationshipNode,\n            populationPromises: [relationshipPopulationPromise],\n            // TODO: Add validation similar to upload\n          },\n        ],\n        serverFeatureProps: props,\n      }\n    },\n    key: 'relationship',\n    serverFeatureProps: props,\n  }\n}\n"],"names":["RelationshipFeatureClientComponent","RelationshipNode","relationshipPopulationPromise","RelationshipFeature","props","feature","ClientComponent","clientFeatureProps","nodes","node","populationPromises","serverFeatureProps","key"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,SAASA,kCAAkC,QAAQ,sBAAqB;AACxE,SAASC,gBAAgB,QAAQ,8BAA6B;AAC9D,SAASC,6BAA6B,QAAQ,yBAAwB;AAwBtE,OAAO,MAAMC,sBAGT,CAACC;IACH,OAAO;QACLC,SAAS;YACP,OAAO;gBACLC,iBAAiBN;gBACjBO,oBAAoBH;gBACpBI,OAAO;oBACL;wBACEC,MAAMR;wBACNS,oBAAoB;4BAACR;yBAA8B;oBAErD;iBACD;gBACDS,oBAAoBP;YACtB;QACF;QACAQ,KAAK;QACLD,oBAAoBP;IACtB;AACF,EAAC"}
+{"version":3,"sources":["../../../../src/field/features/relationship/feature.server.ts"],"sourcesContent":["import type { FeatureProviderProviderServer } from '../types.js'\n\nimport { createNode } from '../typeUtilities.js'\nimport { RelationshipFeatureClientComponent } from './feature.client.js'\nimport { RelationshipNode } from './nodes/RelationshipNode.js'\nimport { relationshipPopulationPromiseHOC } from './populationPromise.js'\n\nexport type ExclusiveRelationshipFeatureProps =\n  | {\n      /**\n       * The collections that should be disabled. Overrides the `enableRichTextRelationship` property in the collection config.\n       * When this property is set, `enabledCollections` will not be available.\n       **/\n      disabledCollections?: string[]\n\n      // Ensures that enabledCollections is not available when disabledCollections is set\n      enabledCollections?: never\n    }\n  | {\n      // Ensures that disabledCollections is not available when enabledCollections is set\n      disabledCollections?: never\n\n      /**\n       * The collections that should be enabled. Overrides the `enableRichTextRelationship` property in the collection config\n       * When this property is set, `disabledCollections` will not be available.\n       **/\n      enabledCollections?: string[]\n    }\n\nexport type RelationshipFeatureProps = ExclusiveRelationshipFeatureProps & {\n  /**\n   * Sets a maximum population depth for this relationship, regardless of the remaining depth when the respective field is reached.\n   * This behaves exactly like the maxDepth properties of relationship and upload fields.\n   *\n   * {@link https://payloadcms.com/docs/getting-started/concepts#field-level-max-depth}\n   */\n  maxDepth?: number\n}\n\nexport const RelationshipFeature: FeatureProviderProviderServer<\n  RelationshipFeatureProps,\n  RelationshipFeatureProps\n> = (props) => {\n  return {\n    feature: () => {\n      return {\n        ClientComponent: RelationshipFeatureClientComponent,\n        clientFeatureProps: props,\n        nodes: [\n          createNode({\n            node: RelationshipNode,\n            populationPromises: [relationshipPopulationPromiseHOC(props)],\n          }),\n        ],\n        serverFeatureProps: props,\n      }\n    },\n    key: 'relationship',\n    serverFeatureProps: props,\n  }\n}\n"],"names":["createNode","RelationshipFeatureClientComponent","RelationshipNode","relationshipPopulationPromiseHOC","RelationshipFeature","props","feature","ClientComponent","clientFeatureProps","nodes","node","populationPromises","serverFeatureProps","key"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,SAASA,UAAU,QAAQ,sBAAqB;AAChD,SAASC,kCAAkC,QAAQ,sBAAqB;AACxE,SAASC,gBAAgB,QAAQ,8BAA6B;AAC9D,SAASC,gCAAgC,QAAQ,yBAAwB;AAkCzE,OAAO,MAAMC,sBAGT,CAACC;IACH,OAAO;QACLC,SAAS;YACP,OAAO;gBACLC,iBAAiBN;gBACjBO,oBAAoBH;gBACpBI,OAAO;oBACLT,WAAW;wBACTU,MAAMR;wBACNS,oBAAoB;4BAACR,iCAAiCE;yBAAO;oBAC/D;iBACD;gBACDO,oBAAoBP;YACtB;QACF;QACAQ,KAAK;QACLD,oBAAoBP;IACtB;AACF,EAAC"}

package/dist/field/features/relationship/nodes/RelationshipNode.d.ts

@@ -1,14 +1,10 @@
 /// <reference types="react" resolution-mode="require"/>
-import type { DOMConversionMap, DOMExportOutput, EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
-import lexicalDecoratorBlockNodeImport from '@lexical/react/LexicalDecoratorBlockNode.js';
-declare const DecoratorBlockNode: typeof lexicalDecoratorBlockNodeImport.DecoratorBlockNode;
 import type { SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js';
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
+import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js';
 export type RelationshipData = {
     relationTo: string;
-    value: {
-        [key: string]: unknown;
-        id: string;
-    };
+    value: number | string;
 };
 export type SerializedRelationshipNode = Spread<RelationshipData, SerializedDecoratorBlockNode>;
 export declare class RelationshipNode extends DecoratorBlockNode {
@@ -32,5 +28,4 @@ export declare class RelationshipNode extends DecoratorBlockNode {
 }
 export declare function $createRelationshipNode(data: RelationshipData): RelationshipNode;
 export declare function $isRelationshipNode(node: LexicalNode | RelationshipNode | null | undefined): node is RelationshipNode;
-export {};
 //# sourceMappingURL=RelationshipNode.d.ts.map

package/dist/field/features/relationship/nodes/RelationshipNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RelationshipNode.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/relationship/nodes/RelationshipNode.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EACV,gBAAgB,EAEhB,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,OAAO,EACP,MAAM,EACP,MAAM,SAAS,CAAA;AAEhB,OAAO,+BAA+B,MAAM,6CAA6C,CAAA;AACzF,QAAA,MAAQ,kBAAkB,2DAAoC,CAAA;AAE9D,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,6CAA6C,CAAA;AAU/F,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE;QAEL,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;QACtB,EAAE,EAAE,MAAM,CAAA;KACX,CAAA;CACF,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG,MAAM,CAAC,gBAAgB,EAAE,4BAA4B,CAAC,CAAA;AAkB/F,qBAAa,gBAAiB,SAAQ,kBAAkB;IACtD,MAAM,EAAE,gBAAgB,CAAA;gBAEZ,EACV,IAAI,EACJ,MAAM,EACN,GAAG,GACJ,EAAE;QACD,IAAI,EAAE,gBAAgB,CAAA;QACtB,MAAM,CAAC,EAAE,iBAAiB,CAAA;QAC1B,GAAG,CAAC,EAAE,OAAO,CAAA;KACd;IAKD,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,gBAAgB,GAAG,gBAAgB;IAQtD,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,SAAS,IAAI,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI;IAiB3D,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,0BAA0B,GAAG,gBAAgB;IAU/E,MAAM,CAAC,QAAQ,IAAI,KAAK;IAGxB,QAAQ,CAAC,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO;IAWlE,SAAS,IAAI,eAAe;IAU5B,UAAU,IAAI,0BAA0B;IASxC,OAAO,IAAI,gBAAgB;IAI3B,cAAc,IAAI,MAAM;IAIxB,OAAO,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;CAItC;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,gBAAgB,GAAG,gBAAgB,CAIhF;AAED,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,WAAW,GAAG,gBAAgB,GAAG,IAAI,GAAG,SAAS,GACtD,IAAI,IAAI,gBAAgB,CAE1B"}
+{"version":3,"file":"RelationshipNode.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/relationship/nodes/RelationshipNode.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,6CAA6C,CAAA;AAC/F,OAAO,KAAK,EACV,gBAAgB,EAEhB,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,OAAO,EACP,MAAM,EACP,MAAM,SAAS,CAAA;AAEhB,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAA;AAShF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG,MAAM,CAAC,gBAAgB,EAAE,4BAA4B,CAAC,CAAA;AAgB/F,qBAAa,gBAAiB,SAAQ,kBAAkB;IACtD,MAAM,EAAE,gBAAgB,CAAA;gBAEZ,EACV,IAAI,EACJ,MAAM,EACN,GAAG,GACJ,EAAE;QACD,IAAI,EAAE,gBAAgB,CAAA;QACtB,MAAM,CAAC,EAAE,iBAAiB,CAAA;QAC1B,GAAG,CAAC,EAAE,OAAO,CAAA;KACd;IAKD,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,gBAAgB,GAAG,gBAAgB;IAQtD,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,SAAS,IAAI,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI;IAiB3D,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,0BAA0B,GAAG,gBAAgB;IAc/E,MAAM,CAAC,QAAQ,IAAI,KAAK;IAIxB,QAAQ,CAAC,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO;IAUlE,SAAS,IAAI,eAAe;IAU5B,UAAU,IAAI,0BAA0B;IASxC,OAAO,IAAI,gBAAgB;IAI3B,cAAc,IAAI,MAAM;IAIxB,OAAO,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;CAItC;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,gBAAgB,GAAG,gBAAgB,CAIhF;AAED,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,WAAW,GAAG,gBAAgB,GAAG,IAAI,GAAG,SAAS,GACtD,IAAI,IAAI,gBAAgB,CAE1B"}

package/dist/field/features/relationship/nodes/RelationshipNode.js

@@ -1,5 +1,4 @@
-import lexicalDecoratorBlockNodeImport from '@lexical/react/LexicalDecoratorBlockNode.js';
-const { DecoratorBlockNode } = lexicalDecoratorBlockNodeImport;
+import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js';
 import * as React from 'react';
 const RelationshipComponent = /*#__PURE__*/ React.lazy(()=>import('./components/RelationshipComponent.js').then((module)=>({
             default: module.RelationshipComponent
@@ -10,9 +9,7 @@ function relationshipElementToNode(domNode) {
     if (id != null && relationTo != null) {
         const node = $createRelationshipNode({
             relationTo,
-            value: {
-                id
-            }
+            value: id
         });
         return {
             node
@@ -50,6 +47,9 @@ export class RelationshipNode extends DecoratorBlockNode {
         };
     }
     static importJSON(serializedNode) {
+        if (serializedNode.version === 1 && serializedNode?.value?.id) {
+            serializedNode.value = serializedNode.value.id;
+        }
         const importedData = {
             relationTo: serializedNode.relationTo,
             value: serializedNode.value
@@ -71,7 +71,7 @@ export class RelationshipNode extends DecoratorBlockNode {
     }
     exportDOM() {
         const element = document.createElement('div');
-        element.setAttribute('data-lexical-relationship-id', this.__data?.value?.id);
+        element.setAttribute('data-lexical-relationship-id', String(this.__data?.value));
         element.setAttribute('data-lexical-relationship-relationTo', this.__data?.relationTo);
         const text = document.createTextNode(this.getTextContent());
         element.append(text);
@@ -84,14 +84,14 @@ export class RelationshipNode extends DecoratorBlockNode {
             ...super.exportJSON(),
             ...this.getData(),
             type: this.getType(),
-            version: 1
+            version: 2
         };
     }
     getData() {
         return this.getLatest().__data;
     }
     getTextContent() {
-        return `${this.__data?.relationTo} relation to ${this.__data?.value?.id}`;
+        return `${this.__data?.relationTo} relation to ${this.__data?.value}`;
     }
     setData(data) {
         const writable = this.getWritable();

package/dist/field/features/relationship/nodes/RelationshipNode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/features/relationship/nodes/RelationshipNode.tsx"],"sourcesContent":["import type {\n  DOMConversionMap,\n  DOMConversionOutput,\n  DOMExportOutput,\n  EditorConfig,\n  ElementFormatType,\n  LexicalEditor,\n  LexicalNode,\n  NodeKey,\n  Spread,\n} from 'lexical'\n\nimport lexicalDecoratorBlockNodeImport from '@lexical/react/LexicalDecoratorBlockNode.js'\nconst { DecoratorBlockNode } = lexicalDecoratorBlockNodeImport\n\nimport type { SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'\n\nimport * as React from 'react'\n\nconst RelationshipComponent = React.lazy(() =>\n  import('./components/RelationshipComponent.js').then((module) => ({\n    default: module.RelationshipComponent,\n  })),\n)\n\nexport type RelationshipData = {\n  relationTo: string\n  value: {\n    // Actual relationship, populated in afterRead hook\n    [key: string]: unknown\n    id: string\n  }\n}\n\nexport type SerializedRelationshipNode = Spread<RelationshipData, SerializedDecoratorBlockNode>\n\nfunction relationshipElementToNode(domNode: HTMLDivElement): DOMConversionOutput | null {\n  const id = domNode.getAttribute('data-lexical-relationship-id')\n  const relationTo = domNode.getAttribute('data-lexical-relationship-relationTo')\n\n  if (id != null && relationTo != null) {\n    const node = $createRelationshipNode({\n      relationTo,\n      value: {\n        id,\n      },\n    })\n    return { node }\n  }\n  return null\n}\n\nexport class RelationshipNode extends DecoratorBlockNode {\n  __data: RelationshipData\n\n  constructor({\n    data,\n    format,\n    key,\n  }: {\n    data: RelationshipData\n    format?: ElementFormatType\n    key?: NodeKey\n  }) {\n    super(format, key)\n    this.__data = data\n  }\n\n  static clone(node: RelationshipNode): RelationshipNode {\n    return new RelationshipNode({\n      data: node.__data,\n      format: node.__format,\n      key: node.__key,\n    })\n  }\n\n  static getType(): string {\n    return 'relationship'\n  }\n\n  static importDOM(): DOMConversionMap<HTMLDivElement> | null {\n    return {\n      div: (domNode: HTMLDivElement) => {\n        if (\n          !domNode.hasAttribute('data-lexical-relationship-relationTo') ||\n          !domNode.hasAttribute('data-lexical-relationship-id')\n        ) {\n          return null\n        }\n        return {\n          conversion: relationshipElementToNode,\n          priority: 2,\n        }\n      },\n    }\n  }\n\n  static importJSON(serializedNode: SerializedRelationshipNode): RelationshipNode {\n    const importedData: RelationshipData = {\n      relationTo: serializedNode.relationTo,\n      value: serializedNode.value,\n    }\n    const node = $createRelationshipNode(importedData)\n    node.setFormat(serializedNode.format)\n    return node\n  }\n\n  static isInline(): false {\n    return false\n  }\n  decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element {\n    return (\n      <RelationshipComponent\n        className={config.theme.relationship ?? 'LexicalEditorTheme__relationship'}\n        data={this.__data}\n        format={this.__format}\n        nodeKey={this.getKey()}\n      />\n    )\n  }\n\n  exportDOM(): DOMExportOutput {\n    const element = document.createElement('div')\n    element.setAttribute('data-lexical-relationship-id', this.__data?.value?.id)\n    element.setAttribute('data-lexical-relationship-relationTo', this.__data?.relationTo)\n\n    const text = document.createTextNode(this.getTextContent())\n    element.append(text)\n    return { element }\n  }\n\n  exportJSON(): SerializedRelationshipNode {\n    return {\n      ...super.exportJSON(),\n      ...this.getData(),\n      type: this.getType(),\n      version: 1,\n    }\n  }\n\n  getData(): RelationshipData {\n    return this.getLatest().__data\n  }\n\n  getTextContent(): string {\n    return `${this.__data?.relationTo} relation to ${this.__data?.value?.id}`\n  }\n\n  setData(data: RelationshipData): void {\n    const writable = this.getWritable()\n    writable.__data = data\n  }\n}\n\nexport function $createRelationshipNode(data: RelationshipData): RelationshipNode {\n  return new RelationshipNode({\n    data,\n  })\n}\n\nexport function $isRelationshipNode(\n  node: LexicalNode | RelationshipNode | null | undefined,\n): node is RelationshipNode {\n  return node instanceof RelationshipNode\n}\n"],"names":["lexicalDecoratorBlockNodeImport","DecoratorBlockNode","React","RelationshipComponent","lazy","then","module","default","relationshipElementToNode","domNode","id","getAttribute","relationTo","node","$createRelationshipNode","value","RelationshipNode","__data","constructor","data","format","key","clone","__format","__key","getType","importDOM","div","hasAttribute","conversion","priority","importJSON","serializedNode","importedData","setFormat","isInline","decorate","editor","config","className","theme","relationship","nodeKey","getKey","exportDOM","element","document","createElement","setAttribute","text","createTextNode","getTextContent","append","exportJSON","getData","type","version","getLatest","setData","writable","getWritable","$isRelationshipNode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../../src/field/features/relationship/nodes/RelationshipNode.tsx"],"sourcesContent":["import type { SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'\nimport type {\n  DOMConversionMap,\n  DOMConversionOutput,\n  DOMExportOutput,\n  EditorConfig,\n  ElementFormatType,\n  LexicalEditor,\n  LexicalNode,\n  NodeKey,\n  Spread,\n} from 'lexical'\n\nimport { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'\nimport * as React from 'react'\n\nconst RelationshipComponent = React.lazy(() =>\n  import('./components/RelationshipComponent.js').then((module) => ({\n    default: module.RelationshipComponent,\n  })),\n)\n\nexport type RelationshipData = {\n  relationTo: string\n  value: number | string\n}\n\nexport type SerializedRelationshipNode = Spread<RelationshipData, SerializedDecoratorBlockNode>\n\nfunction relationshipElementToNode(domNode: HTMLDivElement): DOMConversionOutput | null {\n  const id = domNode.getAttribute('data-lexical-relationship-id')\n  const relationTo = domNode.getAttribute('data-lexical-relationship-relationTo')\n\n  if (id != null && relationTo != null) {\n    const node = $createRelationshipNode({\n      relationTo,\n      value: id,\n    })\n    return { node }\n  }\n  return null\n}\n\nexport class RelationshipNode extends DecoratorBlockNode {\n  __data: RelationshipData\n\n  constructor({\n    data,\n    format,\n    key,\n  }: {\n    data: RelationshipData\n    format?: ElementFormatType\n    key?: NodeKey\n  }) {\n    super(format, key)\n    this.__data = data\n  }\n\n  static clone(node: RelationshipNode): RelationshipNode {\n    return new RelationshipNode({\n      data: node.__data,\n      format: node.__format,\n      key: node.__key,\n    })\n  }\n\n  static getType(): string {\n    return 'relationship'\n  }\n\n  static importDOM(): DOMConversionMap<HTMLDivElement> | null {\n    return {\n      div: (domNode: HTMLDivElement) => {\n        if (\n          !domNode.hasAttribute('data-lexical-relationship-relationTo') ||\n          !domNode.hasAttribute('data-lexical-relationship-id')\n        ) {\n          return null\n        }\n        return {\n          conversion: relationshipElementToNode,\n          priority: 2,\n        }\n      },\n    }\n  }\n\n  static importJSON(serializedNode: SerializedRelationshipNode): RelationshipNode {\n    if (serializedNode.version === 1 && (serializedNode?.value as unknown as { id: string })?.id) {\n      serializedNode.value = (serializedNode.value as unknown as { id: string }).id\n    }\n\n    const importedData: RelationshipData = {\n      relationTo: serializedNode.relationTo,\n      value: serializedNode.value,\n    }\n    const node = $createRelationshipNode(importedData)\n    node.setFormat(serializedNode.format)\n    return node\n  }\n\n  static isInline(): false {\n    return false\n  }\n\n  decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element {\n    return (\n      <RelationshipComponent\n        className={config.theme.relationship ?? 'LexicalEditorTheme__relationship'}\n        data={this.__data}\n        format={this.__format}\n        nodeKey={this.getKey()}\n      />\n    )\n  }\n  exportDOM(): DOMExportOutput {\n    const element = document.createElement('div')\n    element.setAttribute('data-lexical-relationship-id', String(this.__data?.value))\n    element.setAttribute('data-lexical-relationship-relationTo', this.__data?.relationTo)\n\n    const text = document.createTextNode(this.getTextContent())\n    element.append(text)\n    return { element }\n  }\n\n  exportJSON(): SerializedRelationshipNode {\n    return {\n      ...super.exportJSON(),\n      ...this.getData(),\n      type: this.getType(),\n      version: 2,\n    }\n  }\n\n  getData(): RelationshipData {\n    return this.getLatest().__data\n  }\n\n  getTextContent(): string {\n    return `${this.__data?.relationTo} relation to ${this.__data?.value}`\n  }\n\n  setData(data: RelationshipData): void {\n    const writable = this.getWritable()\n    writable.__data = data\n  }\n}\n\nexport function $createRelationshipNode(data: RelationshipData): RelationshipNode {\n  return new RelationshipNode({\n    data,\n  })\n}\n\nexport function $isRelationshipNode(\n  node: LexicalNode | RelationshipNode | null | undefined,\n): node is RelationshipNode {\n  return node instanceof RelationshipNode\n}\n"],"names":["DecoratorBlockNode","React","RelationshipComponent","lazy","then","module","default","relationshipElementToNode","domNode","id","getAttribute","relationTo","node","$createRelationshipNode","value","RelationshipNode","__data","constructor","data","format","key","clone","__format","__key","getType","importDOM","div","hasAttribute","conversion","priority","importJSON","serializedNode","version","importedData","setFormat","isInline","decorate","editor","config","className","theme","relationship","nodeKey","getKey","exportDOM","element","document","createElement","setAttribute","String","text","createTextNode","getTextContent","append","exportJSON","getData","type","getLatest","setData","writable","getWritable","$isRelationshipNode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/field/features/relationship/nodes/components/RelationshipComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RelationshipComponent.d.ts","sourceRoot":"","sources":["../../../../../../src/field/features/relationship/nodes/components/RelationshipComponent.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAOhD,OAAO,KAA4C,MAAM,OAAO,CAAA;AAEhE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAI9D,OAAO,cAAc,CAAA;AAQrB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,gBAAgB,CAAA;IACtB,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AA8GD,eAAO,MAAM,qBAAqB,UAAW,KAAK,KAAG,MAAM,SAE1D,CAAA"}
+{"version":3,"file":"RelationshipComponent.d.ts","sourceRoot":"","sources":["../../../../../../src/field/features/relationship/nodes/components/RelationshipComponent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAoBhD,OAAO,KAA+D,MAAM,OAAO,CAAA;AAEnF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAK9D,OAAO,cAAc,CAAA;AAQrB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,gBAAgB,CAAA;IACtB,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AA8JD,eAAO,MAAM,qBAAqB,UAAW,KAAK,KAAG,MAAM,SAE1D,CAAA"}

package/dist/field/features/relationship/nodes/components/RelationshipComponent.js

@@ -1,25 +1,27 @@
 'use client';
-import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js';
-const { useLexicalComposerContext } = lexicalComposerContextImport;
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js';
+import { mergeRegister } from '@lexical/utils';
 import { getTranslation } from '@payloadcms/translations';
-import lexicalImport from 'lexical';
-const { $getNodeByKey } = lexicalImport;
 import { Button } from '@payloadcms/ui/elements/Button';
 import { useDocumentDrawer } from '@payloadcms/ui/elements/DocumentDrawer';
 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 { $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND } from 'lexical';
+import { $getNodeByKey } from 'lexical';
+import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
 import { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from '../../drawer/commands.js';
+import { $isRelationshipNode } from '../RelationshipNode.js';
 import './index.scss';
 const baseClass = 'lexical-relationship';
 const initialParams = {
     depth: 0
 };
 const Component = (props)=>{
-    const { children, data: { relationTo, value: { id } }, nodeKey } = props;
+    const { children, data: { relationTo, value: id }, nodeKey } = props;
+    const relationshipElemRef = useRef(null);
     const [editor] = useLexicalComposerContext();
     const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
     const { field } = useEditorConfigContext();
@@ -54,12 +56,59 @@ const Component = (props)=>{
         setParams,
         closeDrawer
     ]);
+    const onDelete = useCallback((payload)=>{
+        if (isSelected && $isNodeSelection($getSelection())) {
+            const event = payload;
+            event.preventDefault();
+            const node = $getNodeByKey(nodeKey);
+            if ($isRelationshipNode(node)) {
+                node.remove();
+                return true;
+            }
+        }
+        return false;
+    }, [
+        isSelected,
+        nodeKey
+    ]);
+    const onClick = useCallback((payload)=>{
+        const event = payload;
+        // Check if relationshipElemRef.target or anything WITHIN relationshipElemRef.target was clicked
+        if (event.target === relationshipElemRef.current || relationshipElemRef.current?.contains(event.target)) {
+            if (event.shiftKey) {
+                setSelected(!isSelected);
+            } else {
+                if (!isSelected) {
+                    clearSelection();
+                    setSelected(true);
+                }
+            }
+            return true;
+        }
+        return false;
+    }, [
+        isSelected,
+        setSelected,
+        clearSelection
+    ]);
+    useEffect(()=>{
+        return mergeRegister(editor.registerCommand(CLICK_COMMAND, onClick, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW));
+    }, [
+        clearSelection,
+        editor,
+        isSelected,
+        nodeKey,
+        onDelete,
+        setSelected,
+        onClick
+    ]);
     return /*#__PURE__*/ React.createElement("div", {
         className: [
             baseClass,
             isSelected && `${baseClass}--selected`
         ].filter(Boolean).join(' '),
-        contentEditable: false
+        contentEditable: false,
+        ref: relationshipElemRef
     }, /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__wrap`
     }, /*#__PURE__*/ React.createElement("p", {

package/dist/field/features/relationship/nodes/components/RelationshipComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/field/features/relationship/nodes/components/RelationshipComponent.tsx"],"sourcesContent":["'use client'\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 type { ElementFormatType } from 'lexical'\n\nimport { Button } from '@payloadcms/ui/elements/Button'\nimport { useDocumentDrawer } from '@payloadcms/ui/elements/DocumentDrawer'\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 { RelationshipData } from '../RelationshipNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from '../../drawer/commands.js'\nimport './index.scss'\n\nconst baseClass = 'lexical-relationship'\n\nconst initialParams = {\n  depth: 0,\n}\n\ntype Props = {\n  children?: React.ReactNode\n  className?: string\n  data: RelationshipData\n  format?: ElementFormatType\n  nodeKey?: string\n}\n\nconst Component: React.FC<Props> = (props) => {\n  const {\n    children,\n    data: {\n      relationTo,\n      value: { id },\n    },\n    nodeKey,\n  } = props\n\n  const [editor] = useLexicalComposerContext()\n  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey)\n  const { field } = useEditorConfigContext()\n  const {\n    collections,\n    routes: { api },\n    serverURL,\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}/${id}`,\n    { initialParams },\n  )\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id,\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  return (\n    <div\n      className={[baseClass, isSelected && `${baseClass}--selected`].filter(Boolean).join(' ')}\n      contentEditable={false}\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'] : id}\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?.readOnly}\n            el=\"div\"\n            icon=\"swap\"\n            onClick={() => {\n              editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {\n                replace: { nodeKey },\n              })\n            }}\n            round\n            tooltip={t('fields:swapRelationship')}\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              removeRelationship()\n            }}\n            round\n            tooltip={t('fields:removeRelationship')}\n          />\n        </div>\n      )}\n\n      {id && <DocumentDrawer onSave={updateRelationship} />}\n      {children}\n    </div>\n  )\n}\n\nexport const RelationshipComponent = (props: Props): React.ReactNode => {\n  return <Component {...props} />\n}\n"],"names":["lexicalComposerContextImport","useLexicalComposerContext","useLexicalNodeSelection","getTranslation","lexicalImport","$getNodeByKey","Button","useDocumentDrawer","usePayloadAPI","useConfig","useTranslation","React","useCallback","useReducer","useState","useEditorConfigContext","INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND","baseClass","initialParams","depth","Component","props","children","data","relationTo","value","id","nodeKey","editor","isSelected","setSelected","clearSelection","field","collections","routes","api","serverURL","relatedCollection","setRelatedCollection","find","coll","slug","i18n","t","cacheBust","dispatchCacheBust","state","setParams","DocumentDrawer","DocumentDrawerToggler","closeDrawer","collectionSlug","removeRelationship","update","remove","updateRelationship","doc","div","className","filter","Boolean","join","contentEditable","p","label","labels","singular","admin","useAsTitle","isEditable","buttonStyle","disabled","readOnly","el","icon","onClick","dispatchCommand","replace","round","tooltip","e","preventDefault","onSave","RelationshipComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../../../src/field/features/relationship/nodes/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 } from '@payloadcms/ui/elements/Button'\nimport { useDocumentDrawer } from '@payloadcms/ui/elements/DocumentDrawer'\nimport usePayloadAPI from '@payloadcms/ui/hooks/usePayloadAPI'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport {\n  $getSelection,\n  $isNodeSelection,\n  CLICK_COMMAND,\n  COMMAND_PRIORITY_LOW,\n  KEY_BACKSPACE_COMMAND,\n  KEY_DELETE_COMMAND,\n} from 'lexical'\nimport { $getNodeByKey } from 'lexical'\nimport React, { useCallback, useEffect, useReducer, useRef, useState } from 'react'\n\nimport type { RelationshipData } from '../RelationshipNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from '../../drawer/commands.js'\nimport { $isRelationshipNode } from '../RelationshipNode.js'\nimport './index.scss'\n\nconst baseClass = 'lexical-relationship'\n\nconst initialParams = {\n  depth: 0,\n}\n\ntype Props = {\n  children?: React.ReactNode\n  className?: string\n  data: RelationshipData\n  format?: ElementFormatType\n  nodeKey?: string\n}\n\nconst Component: React.FC<Props> = (props) => {\n  const {\n    children,\n    data: { relationTo, value: id },\n    nodeKey,\n  } = props\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    collections,\n    routes: { api },\n    serverURL,\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}/${id}`,\n    { initialParams },\n  )\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id,\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      if (isSelected && $isNodeSelection($getSelection())) {\n        const event: KeyboardEvent = payload\n        event.preventDefault()\n        const node = $getNodeByKey(nodeKey)\n        if ($isRelationshipNode(node)) {\n          node.remove()\n          return true\n        }\n      }\n      return false\n    },\n    [isSelected, nodeKey],\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'] : id}\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?.readOnly}\n            el=\"div\"\n            icon=\"swap\"\n            onClick={() => {\n              editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {\n                replace: { nodeKey },\n              })\n            }}\n            round\n            tooltip={t('fields:swapRelationship')}\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              removeRelationship()\n            }}\n            round\n            tooltip={t('fields:removeRelationship')}\n          />\n        </div>\n      )}\n\n      {id && <DocumentDrawer onSave={updateRelationship} />}\n      {children}\n    </div>\n  )\n}\n\nexport const RelationshipComponent = (props: Props): React.ReactNode => {\n  return <Component {...props} />\n}\n"],"names":["useLexicalComposerContext","useLexicalNodeSelection","mergeRegister","getTranslation","Button","useDocumentDrawer","usePayloadAPI","useConfig","useTranslation","$getSelection","$isNodeSelection","CLICK_COMMAND","COMMAND_PRIORITY_LOW","KEY_BACKSPACE_COMMAND","KEY_DELETE_COMMAND","$getNodeByKey","React","useCallback","useEffect","useReducer","useRef","useState","useEditorConfigContext","INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND","$isRelationshipNode","baseClass","initialParams","depth","Component","props","children","data","relationTo","value","id","nodeKey","relationshipElemRef","editor","isSelected","setSelected","clearSelection","field","collections","routes","api","serverURL","relatedCollection","setRelatedCollection","find","coll","slug","i18n","t","cacheBust","dispatchCacheBust","state","setParams","DocumentDrawer","DocumentDrawerToggler","closeDrawer","collectionSlug","removeRelationship","update","remove","updateRelationship","doc","onDelete","payload","event","preventDefault","node","onClick","target","current","contains","shiftKey","registerCommand","div","className","filter","Boolean","join","contentEditable","ref","p","label","labels","singular","admin","useAsTitle","isEditable","buttonStyle","disabled","readOnly","el","icon","dispatchCommand","replace","round","tooltip","e","onSave","RelationshipComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/field/features/relationship/plugins/index.d.ts

@@ -1,7 +1,7 @@
 import type { LexicalCommand } from 'lexical';
-import React from 'react';
+import type { PluginComponent } from '../../types.js';
 import type { RelationshipFeatureProps } from '../feature.server.js';
 import type { RelationshipData } from '../nodes/RelationshipNode.js';
 export declare const INSERT_RELATIONSHIP_COMMAND: LexicalCommand<RelationshipData>;
-export declare function RelationshipPlugin(props?: RelationshipFeatureProps): React.ReactNode;
+export declare const RelationshipPlugin: PluginComponent<RelationshipFeatureProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/field/features/relationship/plugins/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/relationship/plugins/index.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAI7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAA;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAKpE,eAAO,MAAM,2BAA2B,EAAE,cAAc,CAAC,gBAAgB,CAExE,CAAA;AAED,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE,wBAAwB,GAAG,KAAK,CAAC,SAAS,CAqDpF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/relationship/plugins/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAgB7C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAA;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAKpE,eAAO,MAAM,2BAA2B,EAAE,cAAc,CAAC,gBAAgB,CAExE,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,eAAe,CAAC,wBAAwB,CAqDxE,CAAA"}