@payloadcms/richtext-lexical 3.0.0-beta.5 → 3.0.0-beta.50

package/dist/field/features/relationship/i18n.js

@@ -0,0 +1,100 @@
+export const i18n = {
+    ar: {
+        label: 'العلاقة'
+    },
+    az: {
+        label: 'Münasibət'
+    },
+    bg: {
+        label: 'Връзка'
+    },
+    cs: {
+        label: 'Vztah'
+    },
+    de: {
+        label: 'Beziehung'
+    },
+    en: {
+        label: 'Relationship'
+    },
+    es: {
+        label: 'Relación'
+    },
+    fa: {
+        label: 'روابط'
+    },
+    fr: {
+        label: 'Relation'
+    },
+    he: {
+        label: 'יחסים'
+    },
+    hr: {
+        label: 'Odnos'
+    },
+    hu: {
+        label: 'Kapcsolat'
+    },
+    it: {
+        label: 'Relazione'
+    },
+    ja: {
+        label: '関係性'
+    },
+    ko: {
+        label: '관계'
+    },
+    my: {
+        label: 'Hubungan'
+    },
+    nb: {
+        label: 'Forhold'
+    },
+    nl: {
+        label: 'Relatie'
+    },
+    pl: {
+        label: 'Relacja'
+    },
+    pt: {
+        label: 'Relacionamento'
+    },
+    ro: {
+        label: 'Relație'
+    },
+    rs: {
+        label: 'Veza'
+    },
+    'rs-latin': {
+        label: 'Odnos'
+    },
+    ru: {
+        label: 'Отношения'
+    },
+    sk: {
+        label: 'Vzťah'
+    },
+    sv: {
+        label: 'Relation'
+    },
+    th: {
+        label: 'ความสัมพันธ์'
+    },
+    tr: {
+        label: 'İlişki'
+    },
+    uk: {
+        label: 'Стосунки'
+    },
+    vi: {
+        label: 'Mối quan hệ'
+    },
+    zh: {
+        label: '关系'
+    },
+    'zh-TW': {
+        label: '關係'
+    }
+};
+
+//# sourceMappingURL=i18n.js.map

package/dist/field/features/relationship/i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/field/features/relationship/i18n.ts"],"sourcesContent":["import type { GenericLanguages } from '@payloadcms/translations'\n\nexport const i18n: Partial<GenericLanguages> = {\n  ar: {\n    label: 'العلاقة',\n  },\n  az: {\n    label: 'Münasibət',\n  },\n  bg: {\n    label: 'Връзка',\n  },\n  cs: {\n    label: 'Vztah',\n  },\n  de: {\n    label: 'Beziehung',\n  },\n  en: {\n    label: 'Relationship',\n  },\n  es: {\n    label: 'Relación',\n  },\n  fa: {\n    label: 'روابط',\n  },\n  fr: {\n    label: 'Relation',\n  },\n  he: {\n    label: 'יחסים',\n  },\n  hr: {\n    label: 'Odnos',\n  },\n  hu: {\n    label: 'Kapcsolat',\n  },\n  it: {\n    label: 'Relazione',\n  },\n  ja: {\n    label: '関係性',\n  },\n  ko: {\n    label: '관계',\n  },\n  my: {\n    label: 'Hubungan',\n  },\n  nb: {\n    label: 'Forhold',\n  },\n  nl: {\n    label: 'Relatie',\n  },\n  pl: {\n    label: 'Relacja',\n  },\n  pt: {\n    label: 'Relacionamento',\n  },\n  ro: {\n    label: 'Relație',\n  },\n  rs: {\n    label: 'Veza',\n  },\n  'rs-latin': {\n    label: 'Odnos',\n  },\n  ru: {\n    label: 'Отношения',\n  },\n  sk: {\n    label: 'Vzťah',\n  },\n  sv: {\n    label: 'Relation',\n  },\n  th: {\n    label: 'ความสัมพันธ์',\n  },\n  tr: {\n    label: 'İlişki',\n  },\n  uk: {\n    label: 'Стосунки',\n  },\n  vi: {\n    label: 'Mối quan hệ',\n  },\n  zh: {\n    label: '关系',\n  },\n  'zh-TW': {\n    label: '關係',\n  },\n}\n"],"names":["i18n","ar","label","az","bg","cs","de","en","es","fa","fr","he","hr","hu","it","ja","ko","my","nb","nl","pl","pt","ro","rs","ru","sk","sv","th","tr","uk","vi","zh"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,OAAO,MAAMA,OAAkC;IAC7CC,IAAI;QACFC,OAAO;IACT;IACAC,IAAI;QACFD,OAAO;IACT;IACAE,IAAI;QACFF,OAAO;IACT;IACAG,IAAI;QACFH,OAAO;IACT;IACAI,IAAI;QACFJ,OAAO;IACT;IACAK,IAAI;QACFL,OAAO;IACT;IACAM,IAAI;QACFN,OAAO;IACT;IACAO,IAAI;QACFP,OAAO;IACT;IACAQ,IAAI;QACFR,OAAO;IACT;IACAS,IAAI;QACFT,OAAO;IACT;IACAU,IAAI;QACFV,OAAO;IACT;IACAW,IAAI;QACFX,OAAO;IACT;IACAY,IAAI;QACFZ,OAAO;IACT;IACAa,IAAI;QACFb,OAAO;IACT;IACAc,IAAI;QACFd,OAAO;IACT;IACAe,IAAI;QACFf,OAAO;IACT;IACAgB,IAAI;QACFhB,OAAO;IACT;IACAiB,IAAI;QACFjB,OAAO;IACT;IACAkB,IAAI;QACFlB,OAAO;IACT;IACAmB,IAAI;QACFnB,OAAO;IACT;IACAoB,IAAI;QACFpB,OAAO;IACT;IACAqB,IAAI;QACFrB,OAAO;IACT;IACA,YAAY;QACVA,OAAO;IACT;IACAsB,IAAI;QACFtB,OAAO;IACT;IACAuB,IAAI;QACFvB,OAAO;IACT;IACAwB,IAAI;QACFxB,OAAO;IACT;IACAyB,IAAI;QACFzB,OAAO;IACT;IACA0B,IAAI;QACF1B,OAAO;IACT;IACA2B,IAAI;QACF3B,OAAO;IACT;IACA4B,IAAI;QACF5B,OAAO;IACT;IACA6B,IAAI;QACF7B,OAAO;IACT;IACA,SAAS;QACPA,OAAO;IACT;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 type { JSX } from 'react';
+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;AAChB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,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,18 +1,16 @@
-import lexicalDecoratorBlockNodeImport from '@lexical/react/LexicalDecoratorBlockNode.js';
-const { DecoratorBlockNode } = lexicalDecoratorBlockNodeImport;
+import { jsx as _jsx } from "react/jsx-runtime";
+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
         })));
-function relationshipElementToNode(domNode) {
+function $relationshipElementToNode(domNode) {
     const id = domNode.getAttribute('data-lexical-relationship-id');
     const relationTo = domNode.getAttribute('data-lexical-relationship-relationTo');
     if (id != null && relationTo != null) {
         const node = $createRelationshipNode({
             relationTo,
-            value: {
-                id
-            }
+            value: id
         });
         return {
             node
@@ -43,13 +41,16 @@ export class RelationshipNode extends DecoratorBlockNode {
                     return null;
                 }
                 return {
-                    conversion: relationshipElementToNode,
+                    conversion: $relationshipElementToNode,
                     priority: 2
                 };
             }
         };
     }
     static importJSON(serializedNode) {
+        if (serializedNode.version === 1 && serializedNode?.value?.id) {
+            serializedNode.value = serializedNode.value.id;
+        }
         const importedData = {
             relationTo: serializedNode.relationTo,
             value: serializedNode.value
@@ -62,7 +63,7 @@ export class RelationshipNode extends DecoratorBlockNode {
         return false;
     }
     decorate(editor, config) {
-        return /*#__PURE__*/ React.createElement(RelationshipComponent, {
+        return /*#__PURE__*/ _jsx(RelationshipComponent, {
             className: config.theme.relationship ?? 'LexicalEditorTheme__relationship',
             data: this.__data,
             format: this.__format,
@@ -71,7 +72,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 +85,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'\nimport type { JSX } from 'react'\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;AAsBhD,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,22 @@
 'use client';
-import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js';
-const { useLexicalComposerContext } = lexicalComposerContextImport;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { Button, useConfig, useDocumentDrawer, usePayloadAPI, useTranslation } from '@payloadcms/ui/client';
+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 { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from '../../drawer/commands.js';
-import './index.scss';
+import { $isRelationshipNode } from '../RelationshipNode.js';
 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,56 +51,122 @@ const Component = (props)=>{
         setParams,
         closeDrawer
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
+    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__*/ _jsxs("div", {
         className: [
             baseClass,
             isSelected && `${baseClass}--selected`
         ].filter(Boolean).join(' '),
-        contentEditable: false
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__wrap`
-    }, /*#__PURE__*/ React.createElement("p", {
-        className: `${baseClass}__label`
-    }, t('fields:labelRelationship', {
-        label: getTranslation(relatedCollection.labels.singular, i18n)
-    })), /*#__PURE__*/ React.createElement(DocumentDrawerToggler, {
-        className: `${baseClass}__doc-drawer-toggler`
-    }, /*#__PURE__*/ React.createElement("p", {
-        className: `${baseClass}__title`
-    }, data ? data[relatedCollection?.admin?.useAsTitle || 'id'] : id))), editor.isEditable() && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__actions`
-    }, /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__swapButton`,
-        disabled: field?.readOnly,
-        el: "div",
-        icon: "swap",
-        onClick: ()=>{
-            editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {
-                replace: {
-                    nodeKey
-                }
-            });
-        },
-        round: true,
-        tooltip: t('fields:swapRelationship')
-    }), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__removeButton`,
-        disabled: field?.readOnly,
-        icon: "x",
-        onClick: (e)=>{
-            e.preventDefault();
-            removeRelationship();
-        },
-        round: true,
-        tooltip: t('fields:removeRelationship')
-    })), id && /*#__PURE__*/ React.createElement(DocumentDrawer, {
-        onSave: updateRelationship
-    }), children);
+        contentEditable: false,
+        ref: relationshipElemRef,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__wrap`,
+                children: [
+                    /*#__PURE__*/ _jsx("p", {
+                        className: `${baseClass}__label`,
+                        children: t('fields:labelRelationship', {
+                            label: getTranslation(relatedCollection.labels.singular, i18n)
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(DocumentDrawerToggler, {
+                        className: `${baseClass}__doc-drawer-toggler`,
+                        children: /*#__PURE__*/ _jsx("p", {
+                            className: `${baseClass}__title`,
+                            children: data ? data[relatedCollection?.admin?.useAsTitle || 'id'] : id
+                        })
+                    })
+                ]
+            }),
+            editor.isEditable() && /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__actions`,
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        buttonStyle: "icon-label",
+                        className: `${baseClass}__swapButton`,
+                        disabled: field?.readOnly,
+                        el: "div",
+                        icon: "swap",
+                        onClick: ()=>{
+                            editor.dispatchCommand(INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND, {
+                                replace: {
+                                    nodeKey
+                                }
+                            });
+                        },
+                        round: true,
+                        tooltip: t('fields:swapRelationship')
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        buttonStyle: "icon-label",
+                        className: `${baseClass}__removeButton`,
+                        disabled: field?.readOnly,
+                        icon: "x",
+                        onClick: (e)=>{
+                            e.preventDefault();
+                            removeRelationship();
+                        },
+                        round: true,
+                        tooltip: t('fields:removeRelationship')
+                    })
+                ]
+            }),
+            id && /*#__PURE__*/ _jsx(DocumentDrawer, {
+                onSave: updateRelationship
+            }),
+            children
+        ]
+    });
 };
 export const RelationshipComponent = (props)=>{
-    return /*#__PURE__*/ React.createElement(Component, props);
+    return /*#__PURE__*/ _jsx(Component, {
+        ...props
+    });
 };
 
 //# sourceMappingURL=RelationshipComponent.js.map

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 {\n  Button,\n  useConfig,\n  useDocumentDrawer,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui/client'\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 '../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","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","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;AAe7C,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"}

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

@@ -1,24 +1,21 @@
 'use client';
-import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js';
-const { useLexicalComposerContext } = lexicalComposerContextImport;
-import lexicalUtilsImport from '@lexical/utils';
-const { $insertNodeToNearestRoot } = lexicalUtilsImport;
-import lexicalImport from 'lexical';
-const { $getPreviousSelection, $getSelection, $isParagraphNode, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } = lexicalImport;
-import { useConfig } from '@payloadcms/ui/providers/Config';
-import { useEffect } from 'react';
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
+import { $insertNodeToNearestRoot } from '@lexical/utils';
+import { useConfig } from '@payloadcms/ui/client';
+import { $getPreviousSelection, $getSelection, $isParagraphNode, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
+import React, { useEffect } from 'react';
 import { RelationshipDrawer } from '../drawer/index.js';
 import { $createRelationshipNode, RelationshipNode } from '../nodes/RelationshipNode.js';
 export const INSERT_RELATIONSHIP_COMMAND = createCommand('INSERT_RELATIONSHIP_COMMAND');
-export function RelationshipPlugin(props) {
+export const RelationshipPlugin = ({ clientProps })=>{
     const [editor] = useLexicalComposerContext();
     const { collections } = useConfig();
     let enabledRelations = null;
-    if (props?.enabledCollections) {
-        enabledRelations = props?.enabledCollections;
-    } else if (props?.disabledCollections) {
-        enabledRelations = collections.filter(({ slug })=>!props?.disabledCollections?.includes(slug)).map(({ slug })=>slug);
+    if (clientProps?.enabledCollections) {
+        enabledRelations = clientProps?.enabledCollections;
+    } else if (clientProps?.disabledCollections) {
+        enabledRelations = collections.filter(({ slug })=>!clientProps?.disabledCollections?.includes(slug)).map(({ slug })=>slug);
     }
     useEffect(()=>{
         if (!editor.hasNodes([
@@ -27,9 +24,11 @@ export function RelationshipPlugin(props) {
             throw new Error('RelationshipPlugin: RelationshipNode not registered on editor');
         }
         return editor.registerCommand(INSERT_RELATIONSHIP_COMMAND, (payload)=>{
-            const relationshipNode = $createRelationshipNode(payload);
             const selection = $getSelection() || $getPreviousSelection();
             if ($isRangeSelection(selection)) {
+                const relationshipNode = $createRelationshipNode(payload);
+                // Insert relationship node BEFORE potentially removing focusNode, as $insertNodeToNearestRoot errors if the focusNode doesn't exist
+                $insertNodeToNearestRoot(relationshipNode);
                 const { focus } = selection;
                 const focusNode = focus.getNode();
                 // First, delete currently selected node if it's an empty paragraph and if there are sufficient
@@ -37,16 +36,15 @@ export function RelationshipPlugin(props) {
                 if ($isParagraphNode(focusNode) && focusNode.getTextContentSize() === 0 && focusNode.getParent().getChildren().filter((node)=>$isParagraphNode(node)).length > 1) {
                     focusNode.remove();
                 }
-                $insertNodeToNearestRoot(relationshipNode);
             }
             return true;
         }, COMMAND_PRIORITY_EDITOR);
     }, [
         editor
     ]);
-    return /*#__PURE__*/ React.createElement(RelationshipDrawer, {
+    return /*#__PURE__*/ _jsx(RelationshipDrawer, {
         enabledCollectionSlugs: enabledRelations
     });
-}
+};
 
 //# sourceMappingURL=index.js.map