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

package/dist/field/features/upload/nodes/UploadNode.d.ts

@@ -1,25 +1,14 @@
-/// <reference types="react" resolution-mode="require"/>
 import type { SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js';
-import type { ElementFormatType, NodeKey } from 'lexical';
-import lexicalDecoratorBlockNodeImport from '@lexical/react/LexicalDecoratorBlockNode.js';
-declare const DecoratorBlockNode: typeof lexicalDecoratorBlockNodeImport.DecoratorBlockNode;
-import type { DOMConversionMap, DOMExportOutput, LexicalNode, Spread } from 'lexical';
-export type RawUploadPayload = {
-    fields: {
-        [key: string]: unknown;
-    };
-    id: string;
-    relationTo: string;
-};
+import type { DOMConversionMap, DOMExportOutput, ElementFormatType, LexicalNode, NodeKey, Spread } from 'lexical';
+import type { JSX } from 'react';
+import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js';
 export type UploadData = {
     fields: {
         [key: string]: unknown;
     };
+    id: string;
     relationTo: string;
-    value: {
-        [key: string]: unknown;
-        id: string;
-    };
+    value: number | string;
 };
 export type SerializedUploadNode = Spread<UploadData, SerializedDecoratorBlockNode>;
 export declare class UploadNode extends DecoratorBlockNode {
@@ -41,9 +30,8 @@ export declare class UploadNode extends DecoratorBlockNode {
     setData(data: UploadData): void;
     updateDOM(): false;
 }
-export declare function $createUploadNode({ data }: {
-    data: UploadData;
+export declare function $createUploadNode({ data, }: {
+    data: Omit<UploadData, 'id'> & Partial<Pick<UploadData, 'id'>>;
 }): UploadNode;
 export declare function $isUploadNode(node: LexicalNode | null | undefined): node is UploadNode;
-export {};
 //# sourceMappingURL=UploadNode.d.ts.map

package/dist/field/features/upload/nodes/UploadNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadNode.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/upload/nodes/UploadNode.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,6CAA6C,CAAA;AAC/F,OAAO,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAEzD,OAAO,+BAA+B,MAAM,6CAA6C,CAAA;AACzF,QAAA,MAAQ,kBAAkB,2DAAoC,CAAA;AAK9D,OAAO,KAAK,EACV,gBAAgB,EAEhB,eAAe,EACf,WAAW,EACX,MAAM,EACP,MAAM,SAAS,CAAA;AAQhB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE;QAEN,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;IACD,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE;QAEN,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;IACD,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE;QAEL,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;QACtB,EAAE,EAAE,MAAM,CAAA;KACX,CAAA;CACF,CAAA;AAYD,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,EAAE,4BAA4B,CAAC,CAAA;AAEnF,qBAAa,UAAW,SAAQ,kBAAkB;IAChD,MAAM,EAAE,UAAU,CAAA;gBAEN,EACV,IAAI,EACJ,MAAM,EACN,GAAG,GACJ,EAAE;QACD,IAAI,EAAE,UAAU,CAAA;QAChB,MAAM,CAAC,EAAE,iBAAiB,CAAA;QAC1B,GAAG,CAAC,EAAE,OAAO,CAAA;KACd;IAKD,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,GAAG,UAAU;IAQ1C,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,SAAS,IAAI,gBAAgB,GAAG,IAAI;IAS3C,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,oBAAoB,GAAG,UAAU;IAanE,MAAM,CAAC,QAAQ,IAAI,KAAK;IAIxB,QAAQ,IAAI,GAAG,CAAC,OAAO;IAKvB,SAAS,IAAI,eAAe;IAO5B,UAAU,IAAI,oBAAoB;IASlC,OAAO,IAAI,UAAU;IAIrB,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;IAM/B,SAAS,IAAI,KAAK;CAGnB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,GAAG,UAAU,CAE5E;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,IAAI,UAAU,CAEtF"}
+{"version":3,"file":"UploadNode.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/upload/nodes/UploadNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,6CAA6C,CAAA;AAC/F,OAAO,KAAK,EACV,gBAAgB,EAEhB,eAAe,EACf,iBAAiB,EACjB,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,UAAU,GAAG;IACvB,MAAM,EAAE;QAEN,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;IACD,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CACvB,CAAA;AAuCD,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,EAAE,4BAA4B,CAAC,CAAA;AAEnF,qBAAa,UAAW,SAAQ,kBAAkB;IAChD,MAAM,EAAE,UAAU,CAAA;gBAEN,EACV,IAAI,EACJ,MAAM,EACN,GAAG,GACJ,EAAE;QACD,IAAI,EAAE,UAAU,CAAA;QAChB,MAAM,CAAC,EAAE,iBAAiB,CAAA;QAC1B,GAAG,CAAC,EAAE,OAAO,CAAA;KACd;IAKD,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,GAAG,UAAU;IAQ1C,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,SAAS,IAAI,gBAAgB,GAAG,IAAI;IAS3C,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,oBAAoB,GAAG,UAAU;IAsBnE,MAAM,CAAC,QAAQ,IAAI,KAAK;IAIxB,QAAQ,IAAI,GAAG,CAAC,OAAO;IAKvB,SAAS,IAAI,eAAe;IAQ5B,UAAU,IAAI,oBAAoB;IASlC,OAAO,IAAI,UAAU;IAIrB,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;IAM/B,SAAS,IAAI,KAAK;CAGnB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,GACL,EAAE;IACD,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAA;CAC/D,GAAG,UAAU,CAKb;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,IAAI,UAAU,CAEtF"}

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

@@ -1,16 +1,35 @@
-import lexicalDecoratorBlockNodeImport from '@lexical/react/LexicalDecoratorBlockNode.js';
-const { DecoratorBlockNode } = lexicalDecoratorBlockNodeImport;
-import lexicalImport from 'lexical';
-const { $applyNodeReplacement } = lexicalImport;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js';
+import ObjectID from 'bson-objectid';
+import { $applyNodeReplacement } from 'lexical';
 import * as React from 'react';
 const RawUploadComponent = /*#__PURE__*/ React.lazy(()=>import('../component/index.js').then((module)=>({
             default: module.UploadComponent
         })));
-function convertUploadElement(domNode) {
-    //if (domNode instanceof HTMLImageElement) {
-    // const { alt: altText, src } = domNode;
-    // const node = $createImageNode({ altText, src });
-    // return { node };
+function isGoogleDocCheckboxImg(img) {
+    return img.parentElement != null && img.parentElement.tagName === 'LI' && img.previousSibling === null && img.getAttribute('aria-roledescription') === 'checkbox';
+}
+function $convertUploadElement(domNode) {
+    if (domNode.hasAttribute('data-lexical-upload-relation-to') && domNode.hasAttribute('data-lexical-upload-id')) {
+        const id = domNode.getAttribute('data-lexical-upload-id');
+        const relationTo = domNode.getAttribute('data-lexical-upload-relation-to');
+        if (id != null && relationTo != null) {
+            const node = $createUploadNode({
+                data: {
+                    fields: {},
+                    relationTo,
+                    value: id
+                }
+            });
+            return {
+                node
+            };
+        }
+    }
+    const img = domNode;
+    if (img.src.startsWith('file:///') || isGoogleDocCheckboxImg(img)) {
+        return null;
+    }
     // TODO: Auto-upload functionality here!
     //}
     return null;
@@ -34,13 +53,21 @@ export class UploadNode extends DecoratorBlockNode {
     static importDOM() {
         return {
             img: (node)=>({
-                    conversion: convertUploadElement,
+                    conversion: $convertUploadElement,
                     priority: 0
                 })
         };
     }
     static importJSON(serializedNode) {
+        if (serializedNode.version === 1 && serializedNode?.value?.id) {
+            serializedNode.value = serializedNode.value.id;
+        }
+        if (serializedNode.version === 2 && !serializedNode?.id) {
+            serializedNode.id = new ObjectID.default().toHexString();
+            serializedNode.version = 3;
+        }
         const importedData = {
+            id: serializedNode.id,
             fields: serializedNode.fields,
             relationTo: serializedNode.relationTo,
             value: serializedNode.value
@@ -56,7 +83,7 @@ export class UploadNode extends DecoratorBlockNode {
     }
     decorate() {
         // @ts-expect-error
-        return /*#__PURE__*/ React.createElement(RawUploadComponent, {
+        return /*#__PURE__*/ _jsx(RawUploadComponent, {
             data: this.__data,
             format: this.__format,
             nodeKey: this.getKey()
@@ -64,8 +91,8 @@ export class UploadNode extends DecoratorBlockNode {
     }
     exportDOM() {
         const element = document.createElement('img');
-        // element.setAttribute('src', this.__src);
-        // element.setAttribute('alt', this.__altText); //TODO
+        element.setAttribute('data-lexical-upload-id', String(this.__data?.value));
+        element.setAttribute('data-lexical-upload-relation-to', this.__data?.relationTo);
         return {
             element
         };
@@ -75,7 +102,7 @@ export class UploadNode extends DecoratorBlockNode {
             ...super.exportJSON(),
             ...this.getData(),
             type: this.getType(),
-            version: 1
+            version: 3
         };
     }
     getData() {
@@ -91,8 +118,11 @@ export class UploadNode extends DecoratorBlockNode {
     }
 }
 export function $createUploadNode({ data }) {
+    if (!data?.id) {
+        data.id = new ObjectID.default().toHexString();
+    }
     return $applyNodeReplacement(new UploadNode({
-        data
+        data: data
     }));
 }
 export function $isUploadNode(node) {

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

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

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

@@ -1,7 +1,8 @@
-/// <reference types="react" resolution-mode="require"/>
 import type { LexicalCommand } from 'lexical';
-import type { RawUploadPayload } from '../nodes/UploadNode.js';
-export type InsertUploadPayload = Readonly<RawUploadPayload>;
+import type { PluginComponentWithAnchor } from '../../types.js';
+import type { UploadFeaturePropsClient } from '../feature.client.js';
+import type { UploadData } from '../nodes/UploadNode.js';
+export type InsertUploadPayload = Readonly<Omit<UploadData, 'id'> & Partial<Pick<UploadData, 'id'>>>;
 export declare const INSERT_UPLOAD_COMMAND: LexicalCommand<InsertUploadPayload>;
-export declare function UploadPlugin(): JSX.Element | null;
+export declare const UploadPlugin: PluginComponentWithAnchor<UploadFeaturePropsClient>;
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1,16 +1,14 @@
 'use client';
-import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js';
-const { useLexicalComposerContext } = lexicalComposerContextImport;
-import lexicalUtilsImport from '@lexical/utils';
-const { $insertNodeToNearestRoot, mergeRegister } = lexicalUtilsImport;
-import lexicalImport from 'lexical';
-const { $getPreviousSelection, $getSelection, $isParagraphNode, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } = lexicalImport;
-import { useConfig } from '@payloadcms/ui/providers/Config';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
+import { $insertNodeToNearestRoot, mergeRegister } 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 { UploadDrawer } from '../drawer/index.js';
 import { $createUploadNode, UploadNode } from '../nodes/UploadNode.js';
 export const INSERT_UPLOAD_COMMAND = createCommand('INSERT_UPLOAD_COMMAND');
-export function UploadPlugin() {
+export const UploadPlugin = ({ clientProps })=>{
     const [editor] = useLexicalComposerContext();
     const { collections } = useConfig();
     useEffect(()=>{
@@ -21,17 +19,18 @@ export function UploadPlugin() {
         }
         return mergeRegister(editor.registerCommand(INSERT_UPLOAD_COMMAND, (payload)=>{
             editor.update(()=>{
-                const uploadNode = $createUploadNode({
-                    data: {
-                        fields: payload.fields,
-                        relationTo: payload.relationTo,
-                        value: {
-                            id: payload.id
-                        }
-                    }
-                });
                 const selection = $getSelection() || $getPreviousSelection();
                 if ($isRangeSelection(selection)) {
+                    const uploadNode = $createUploadNode({
+                        data: {
+                            id: payload.id,
+                            fields: payload.fields,
+                            relationTo: payload.relationTo,
+                            value: payload.value
+                        }
+                    });
+                    // Insert upload node BEFORE potentially removing focusNode, as $insertNodeToNearestRoot errors if the focusNode doesn't exist
+                    $insertNodeToNearestRoot(uploadNode);
                     const { focus } = selection;
                     const focusNode = focus.getNode();
                     // First, delete currently selected node if it's an empty paragraph and if there are sufficient
@@ -39,7 +38,6 @@ export function UploadPlugin() {
                     if ($isParagraphNode(focusNode) && focusNode.getTextContentSize() === 0 && focusNode.getParent().getChildren().filter((node)=>$isParagraphNode(node)).length > 1) {
                         focusNode.remove();
                     }
-                    $insertNodeToNearestRoot(uploadNode);
                 }
             });
             return true;
@@ -47,9 +45,9 @@ export function UploadPlugin() {
     }, [
         editor
     ]);
-    return /*#__PURE__*/ React.createElement(UploadDrawer, {
+    return /*#__PURE__*/ _jsx(UploadDrawer, {
         enabledCollectionSlugs: collections.map(({ slug })=>slug)
     });
-}
+};
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/features/upload/plugin/index.tsx"],"sourcesContent":["'use client'\nimport lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'\nconst { useLexicalComposerContext } = lexicalComposerContextImport\nimport lexicalUtilsImport from '@lexical/utils'\nconst { $insertNodeToNearestRoot, mergeRegister } = lexicalUtilsImport\nimport lexicalImport from 'lexical'\nconst {\n  $getPreviousSelection,\n  $getSelection,\n  $isParagraphNode,\n  $isRangeSelection,\n  COMMAND_PRIORITY_EDITOR,\n  createCommand,\n} = lexicalImport\n\nimport type { LexicalCommand } from 'lexical'\n\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport React, { useEffect } from 'react'\n\nimport type { RawUploadPayload } from '../nodes/UploadNode.js'\n\nimport { UploadDrawer } from '../drawer/index.js'\nimport { $createUploadNode, UploadNode } from '../nodes/UploadNode.js'\n\nexport type InsertUploadPayload = Readonly<RawUploadPayload>\n\nexport const INSERT_UPLOAD_COMMAND: LexicalCommand<InsertUploadPayload> =\n  createCommand('INSERT_UPLOAD_COMMAND')\n\nexport function UploadPlugin(): JSX.Element | null {\n  const [editor] = useLexicalComposerContext()\n  const { collections } = useConfig()\n\n  useEffect(() => {\n    if (!editor.hasNodes([UploadNode])) {\n      throw new Error('UploadPlugin: UploadNode not registered on editor')\n    }\n\n    return mergeRegister(\n      editor.registerCommand<InsertUploadPayload>(\n        INSERT_UPLOAD_COMMAND,\n        (payload: InsertUploadPayload) => {\n          editor.update(() => {\n            const uploadNode = $createUploadNode({\n              data: {\n                fields: payload.fields,\n                relationTo: payload.relationTo,\n                value: {\n                  id: payload.id,\n                },\n              },\n            })\n\n            const selection = $getSelection() || $getPreviousSelection()\n\n            if ($isRangeSelection(selection)) {\n              const { focus } = selection\n              const focusNode = focus.getNode()\n\n              // First, delete currently selected node if it's an empty paragraph and if there are sufficient\n              // paragraph nodes (more than 1) left in the parent node, so that we don't \"trap\" the user\n              if (\n                $isParagraphNode(focusNode) &&\n                focusNode.getTextContentSize() === 0 &&\n                focusNode\n                  .getParent()\n                  .getChildren()\n                  .filter((node) => $isParagraphNode(node)).length > 1\n              ) {\n                focusNode.remove()\n              }\n\n              $insertNodeToNearestRoot(uploadNode)\n            }\n          })\n\n          return true\n        },\n        COMMAND_PRIORITY_EDITOR,\n      ),\n    )\n  }, [editor])\n\n  return <UploadDrawer enabledCollectionSlugs={collections.map(({ slug }) => slug)} />\n}\n"],"names":["lexicalComposerContextImport","useLexicalComposerContext","lexicalUtilsImport","$insertNodeToNearestRoot","mergeRegister","lexicalImport","$getPreviousSelection","$getSelection","$isParagraphNode","$isRangeSelection","COMMAND_PRIORITY_EDITOR","createCommand","useConfig","React","useEffect","UploadDrawer","$createUploadNode","UploadNode","INSERT_UPLOAD_COMMAND","UploadPlugin","editor","collections","hasNodes","Error","registerCommand","payload","update","uploadNode","data","fields","relationTo","value","id","selection","focus","focusNode","getNode","getTextContentSize","getParent","getChildren","filter","node","length","remove","enabledCollectionSlugs","map","slug"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,kCAAkC,2CAA0C;AACnF,MAAM,EAAEC,yBAAyB,EAAE,GAAGD;AACtC,OAAOE,wBAAwB,iBAAgB;AAC/C,MAAM,EAAEC,wBAAwB,EAAEC,aAAa,EAAE,GAAGF;AACpD,OAAOG,mBAAmB,UAAS;AACnC,MAAM,EACJC,qBAAqB,EACrBC,aAAa,EACbC,gBAAgB,EAChBC,iBAAiB,EACjBC,uBAAuB,EACvBC,aAAa,EACd,GAAGN;AAIJ,SAASO,SAAS,QAAQ,kCAAiC;AAC3D,OAAOC,SAASC,SAAS,QAAQ,QAAO;AAIxC,SAASC,YAAY,QAAQ,qBAAoB;AACjD,SAASC,iBAAiB,EAAEC,UAAU,QAAQ,yBAAwB;AAItE,OAAO,MAAMC,wBACXP,cAAc,yBAAwB;AAExC,OAAO,SAASQ;IACd,MAAM,CAACC,OAAO,GAAGnB;IACjB,MAAM,EAAEoB,WAAW,EAAE,GAAGT;IAExBE,UAAU;QACR,IAAI,CAACM,OAAOE,QAAQ,CAAC;YAACL;SAAW,GAAG;YAClC,MAAM,IAAIM,MAAM;QAClB;QAEA,OAAOnB,cACLgB,OAAOI,eAAe,CACpBN,uBACA,CAACO;YACCL,OAAOM,MAAM,CAAC;gBACZ,MAAMC,aAAaX,kBAAkB;oBACnCY,MAAM;wBACJC,QAAQJ,QAAQI,MAAM;wBACtBC,YAAYL,QAAQK,UAAU;wBAC9BC,OAAO;4BACLC,IAAIP,QAAQO,EAAE;wBAChB;oBACF;gBACF;gBAEA,MAAMC,YAAY1B,mBAAmBD;gBAErC,IAAIG,kBAAkBwB,YAAY;oBAChC,MAAM,EAAEC,KAAK,EAAE,GAAGD;oBAClB,MAAME,YAAYD,MAAME,OAAO;oBAE/B,+FAA+F;oBAC/F,0FAA0F;oBAC1F,IACE5B,iBAAiB2B,cACjBA,UAAUE,kBAAkB,OAAO,KACnCF,UACGG,SAAS,GACTC,WAAW,GACXC,MAAM,CAAC,CAACC,OAASjC,iBAAiBiC,OAAOC,MAAM,GAAG,GACrD;wBACAP,UAAUQ,MAAM;oBAClB;oBAEAxC,yBAAyBwB;gBAC3B;YACF;YAEA,OAAO;QACT,GACAjB;IAGN,GAAG;QAACU;KAAO;IAEX,qBAAO,oBAACL;QAAa6B,wBAAwBvB,YAAYwB,GAAG,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAKA;;AAC7E"}
+{"version":3,"sources":["../../../../../src/field/features/upload/plugin/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalCommand } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'\nimport { useConfig } from '@payloadcms/ui/client'\nimport {\n  $getPreviousSelection,\n  $getSelection,\n  $isParagraphNode,\n  $isRangeSelection,\n  COMMAND_PRIORITY_EDITOR,\n  createCommand,\n} from 'lexical'\nimport React, { useEffect } from 'react'\n\nimport type { PluginComponentWithAnchor } from '../../types.js'\nimport type { UploadFeaturePropsClient } from '../feature.client.js'\nimport type { UploadData } from '../nodes/UploadNode.js'\n\nimport { UploadDrawer } from '../drawer/index.js'\nimport { $createUploadNode, UploadNode } from '../nodes/UploadNode.js'\n\nexport type InsertUploadPayload = Readonly<Omit<UploadData, 'id'> & Partial<Pick<UploadData, 'id'>>>\n\nexport const INSERT_UPLOAD_COMMAND: LexicalCommand<InsertUploadPayload> =\n  createCommand('INSERT_UPLOAD_COMMAND')\n\nexport const UploadPlugin: PluginComponentWithAnchor<UploadFeaturePropsClient> = ({\n  clientProps,\n}) => {\n  const [editor] = useLexicalComposerContext()\n  const { collections } = useConfig()\n\n  useEffect(() => {\n    if (!editor.hasNodes([UploadNode])) {\n      throw new Error('UploadPlugin: UploadNode not registered on editor')\n    }\n\n    return mergeRegister(\n      editor.registerCommand<InsertUploadPayload>(\n        INSERT_UPLOAD_COMMAND,\n        (payload: InsertUploadPayload) => {\n          editor.update(() => {\n            const selection = $getSelection() || $getPreviousSelection()\n\n            if ($isRangeSelection(selection)) {\n              const uploadNode = $createUploadNode({\n                data: {\n                  id: payload.id,\n                  fields: payload.fields,\n                  relationTo: payload.relationTo,\n                  value: payload.value,\n                },\n              })\n              // Insert upload node BEFORE potentially removing focusNode, as $insertNodeToNearestRoot errors if the focusNode doesn't exist\n              $insertNodeToNearestRoot(uploadNode)\n\n              const { focus } = selection\n              const focusNode = focus.getNode()\n\n              // First, delete currently selected node if it's an empty paragraph and if there are sufficient\n              // paragraph nodes (more than 1) left in the parent node, so that we don't \"trap\" the user\n              if (\n                $isParagraphNode(focusNode) &&\n                focusNode.getTextContentSize() === 0 &&\n                focusNode\n                  .getParent()\n                  .getChildren()\n                  .filter((node) => $isParagraphNode(node)).length > 1\n              ) {\n                focusNode.remove()\n              }\n            }\n          })\n\n          return true\n        },\n        COMMAND_PRIORITY_EDITOR,\n      ),\n    )\n  }, [editor])\n\n  return <UploadDrawer enabledCollectionSlugs={collections.map(({ slug }) => slug)} />\n}\n"],"names":["useLexicalComposerContext","$insertNodeToNearestRoot","mergeRegister","useConfig","$getPreviousSelection","$getSelection","$isParagraphNode","$isRangeSelection","COMMAND_PRIORITY_EDITOR","createCommand","React","useEffect","UploadDrawer","$createUploadNode","UploadNode","INSERT_UPLOAD_COMMAND","UploadPlugin","clientProps","editor","collections","hasNodes","Error","registerCommand","payload","update","selection","uploadNode","data","id","fields","relationTo","value","focus","focusNode","getNode","getTextContentSize","getParent","getChildren","filter","node","length","remove","enabledCollectionSlugs","map","slug"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAGA,SAASA,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,wBAAwB,EAAEC,aAAa,QAAQ,iBAAgB;AACxE,SAASC,SAAS,QAAQ,wBAAuB;AACjD,SACEC,qBAAqB,EACrBC,aAAa,EACbC,gBAAgB,EAChBC,iBAAiB,EACjBC,uBAAuB,EACvBC,aAAa,QACR,UAAS;AAChB,OAAOC,SAASC,SAAS,QAAQ,QAAO;AAMxC,SAASC,YAAY,QAAQ,qBAAoB;AACjD,SAASC,iBAAiB,EAAEC,UAAU,QAAQ,yBAAwB;AAItE,OAAO,MAAMC,wBACXN,cAAc,yBAAwB;AAExC,OAAO,MAAMO,eAAoE,CAAC,EAChFC,WAAW,EACZ;IACC,MAAM,CAACC,OAAO,GAAGlB;IACjB,MAAM,EAAEmB,WAAW,EAAE,GAAGhB;IAExBQ,UAAU;QACR,IAAI,CAACO,OAAOE,QAAQ,CAAC;YAACN;SAAW,GAAG;YAClC,MAAM,IAAIO,MAAM;QAClB;QAEA,OAAOnB,cACLgB,OAAOI,eAAe,CACpBP,uBACA,CAACQ;YACCL,OAAOM,MAAM,CAAC;gBACZ,MAAMC,YAAYpB,mBAAmBD;gBAErC,IAAIG,kBAAkBkB,YAAY;oBAChC,MAAMC,aAAab,kBAAkB;wBACnCc,MAAM;4BACJC,IAAIL,QAAQK,EAAE;4BACdC,QAAQN,QAAQM,MAAM;4BACtBC,YAAYP,QAAQO,UAAU;4BAC9BC,OAAOR,QAAQQ,KAAK;wBACtB;oBACF;oBACA,8HAA8H;oBAC9H9B,yBAAyByB;oBAEzB,MAAM,EAAEM,KAAK,EAAE,GAAGP;oBAClB,MAAMQ,YAAYD,MAAME,OAAO;oBAE/B,+FAA+F;oBAC/F,0FAA0F;oBAC1F,IACE5B,iBAAiB2B,cACjBA,UAAUE,kBAAkB,OAAO,KACnCF,UACGG,SAAS,GACTC,WAAW,GACXC,MAAM,CAAC,CAACC,OAASjC,iBAAiBiC,OAAOC,MAAM,GAAG,GACrD;wBACAP,UAAUQ,MAAM;oBAClB;gBACF;YACF;YAEA,OAAO;QACT,GACAjC;IAGN,GAAG;QAACU;KAAO;IAEX,qBAAO,KAACN;QAAa8B,wBAAwBvB,YAAYwB,GAAG,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAKA;;AAC7E,EAAC"}

package/dist/field/features/upload/validate.d.ts

@@ -1,4 +1,5 @@
 import type { NodeValidation } from '../types.js';
+import type { UploadFeatureProps } from './feature.server.js';
 import type { SerializedUploadNode } from './nodes/UploadNode.js';
-export declare const uploadValidation: () => NodeValidation<SerializedUploadNode>;
+export declare const uploadValidation: (props: UploadFeatureProps) => NodeValidation<SerializedUploadNode>;
 //# sourceMappingURL=validate.d.ts.map

package/dist/field/features/upload/validate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validate.d.ts","sourceRoot":"","sources":["../../../../src/field/features/upload/validate.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AAIjE,eAAO,MAAM,gBAAgB,QAAO,eAAe,oBAAoB,CAuBtE,CAAA"}
+{"version":3,"file":"validate.d.ts","sourceRoot":"","sources":["../../../../src/field/features/upload/validate.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAC7D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AAEjE,eAAO,MAAM,gBAAgB,UACpB,kBAAkB,KACxB,eAAe,oBAAoB,CA0DrC,CAAA"}

package/dist/field/features/upload/validate.js

@@ -1,17 +1,44 @@
-import { isValidID } from 'payload/utilities';
-import { CAN_USE_DOM } from '../../lexical/utils/canUseDOM.js';
-export const uploadValidation = ()=>{
-    const uploadValidation = ({ node, validation: { options: { req: { payload, t } } } })=>{
-        if (!CAN_USE_DOM) {
-            const idType = payload.collections[node.relationTo].customIDType || payload.db.defaultIDType;
-            if (!isValidID(node.value?.id, idType)) {
-                return t('validation:validUploadID');
+import { buildStateFromSchema } from '@payloadcms/ui/forms/buildStateFromSchema';
+import { isValidID } from 'payload';
+export const uploadValidation = (props)=>{
+    return async ({ node, validation: { options: { id, operation, preferences, req, req: { payload, t } } } })=>{
+        const idType = payload.collections[node.relationTo].customIDType || payload.db.defaultIDType;
+        // @ts-expect-error
+        const nodeID = node?.value?.id || node?.value // for backwards-compatibility
+        ;
+        if (!isValidID(nodeID, idType)) {
+            return t('validation:validUploadID');
+        }
+        if (!props?.collections) {
+            return true;
+        }
+        if (Object.keys(props?.collections).length === 0) {
+            return true;
+        }
+        const collection = props?.collections[node.relationTo];
+        if (!collection?.fields?.length) {
+            return true;
+        }
+        const result = await buildStateFromSchema({
+            id,
+            data: node?.fields ?? {},
+            fieldSchema: collection.fields,
+            operation: operation === 'create' || operation === 'update' ? operation : 'update',
+            preferences,
+            req,
+            siblingData: node?.fields ?? {}
+        });
+        let errorPaths = [];
+        for(const fieldKey in result){
+            if (result[fieldKey].errorPaths) {
+                errorPaths = errorPaths.concat(result[fieldKey].errorPaths);
             }
         }
-        // TODO: validate upload collection fields
+        if (errorPaths.length) {
+            return 'The following fields are invalid: ' + errorPaths.join(', ');
+        }
         return true;
     };
-    return uploadValidation;
 };
 
 //# sourceMappingURL=validate.js.map

package/dist/field/features/upload/validate.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/field/features/upload/validate.ts"],"sourcesContent":["import { isValidID } from 'payload/utilities'\n\nimport type { NodeValidation } from '../types.js'\nimport type { SerializedUploadNode } from './nodes/UploadNode.js'\n\nimport { CAN_USE_DOM } from '../../lexical/utils/canUseDOM.js'\n\nexport const uploadValidation = (): NodeValidation<SerializedUploadNode> => {\n  const uploadValidation: NodeValidation<SerializedUploadNode> = ({\n    node,\n    validation: {\n      options: {\n        req: { payload, t },\n      },\n    },\n  }) => {\n    if (!CAN_USE_DOM) {\n      const idType = payload.collections[node.relationTo].customIDType || payload.db.defaultIDType\n\n      if (!isValidID(node.value?.id, idType)) {\n        return t('validation:validUploadID')\n      }\n    }\n\n    // TODO: validate upload collection fields\n\n    return true\n  }\n\n  return uploadValidation\n}\n"],"names":["isValidID","CAN_USE_DOM","uploadValidation","node","validation","options","req","payload","t","idType","collections","relationTo","customIDType","db","defaultIDType","value","id"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,SAASA,SAAS,QAAQ,oBAAmB;AAK7C,SAASC,WAAW,QAAQ,mCAAkC;AAE9D,OAAO,MAAMC,mBAAmB;IAC9B,MAAMA,mBAAyD,CAAC,EAC9DC,IAAI,EACJC,YAAY,EACVC,SAAS,EACPC,KAAK,EAAEC,OAAO,EAAEC,CAAC,EAAE,EACpB,EACF,EACF;QACC,IAAI,CAACP,aAAa;YAChB,MAAMQ,SAASF,QAAQG,WAAW,CAACP,KAAKQ,UAAU,CAAC,CAACC,YAAY,IAAIL,QAAQM,EAAE,CAACC,aAAa;YAE5F,IAAI,CAACd,UAAUG,KAAKY,KAAK,EAAEC,IAAIP,SAAS;gBACtC,OAAOD,EAAE;YACX;QACF;QAEA,0CAA0C;QAE1C,OAAO;IACT;IAEA,OAAON;AACT,EAAC"}
+{"version":3,"sources":["../../../../src/field/features/upload/validate.ts"],"sourcesContent":["import { buildStateFromSchema } from '@payloadcms/ui/forms/buildStateFromSchema'\nimport { isValidID } from 'payload'\n\nimport type { NodeValidation } from '../types.js'\nimport type { UploadFeatureProps } from './feature.server.js'\nimport type { SerializedUploadNode } from './nodes/UploadNode.js'\n\nexport const uploadValidation = (\n  props: UploadFeatureProps,\n): NodeValidation<SerializedUploadNode> => {\n  return async ({\n    node,\n    validation: {\n      options: {\n        id,\n        operation,\n        preferences,\n        req,\n        req: { payload, t },\n      },\n    },\n  }) => {\n    const idType = payload.collections[node.relationTo].customIDType || payload.db.defaultIDType\n    // @ts-expect-error\n    const nodeID = node?.value?.id || node?.value // for backwards-compatibility\n\n    if (!isValidID(nodeID, idType)) {\n      return t('validation:validUploadID')\n    }\n\n    if (!props?.collections) {\n      return true\n    }\n\n    if (Object.keys(props?.collections).length === 0) {\n      return true\n    }\n\n    const collection = props?.collections[node.relationTo]\n\n    if (!collection?.fields?.length) {\n      return true\n    }\n\n    const result = await buildStateFromSchema({\n      id,\n      data: node?.fields ?? {},\n      fieldSchema: collection.fields,\n      operation: operation === 'create' || operation === 'update' ? operation : 'update',\n      preferences,\n      req,\n      siblingData: node?.fields ?? {},\n    })\n\n    let errorPaths = []\n    for (const fieldKey in result) {\n      if (result[fieldKey].errorPaths) {\n        errorPaths = errorPaths.concat(result[fieldKey].errorPaths)\n      }\n    }\n\n    if (errorPaths.length) {\n      return 'The following fields are invalid: ' + errorPaths.join(', ')\n    }\n\n    return true\n  }\n}\n"],"names":["buildStateFromSchema","isValidID","uploadValidation","props","node","validation","options","id","operation","preferences","req","payload","t","idType","collections","relationTo","customIDType","db","defaultIDType","nodeID","value","Object","keys","length","collection","fields","result","data","fieldSchema","siblingData","errorPaths","fieldKey","concat","join"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,oBAAoB,QAAQ,4CAA2C;AAChF,SAASC,SAAS,QAAQ,UAAS;AAMnC,OAAO,MAAMC,mBAAmB,CAC9BC;IAEA,OAAO,OAAO,EACZC,IAAI,EACJC,YAAY,EACVC,SAAS,EACPC,EAAE,EACFC,SAAS,EACTC,WAAW,EACXC,GAAG,EACHA,KAAK,EAAEC,OAAO,EAAEC,CAAC,EAAE,EACpB,EACF,EACF;QACC,MAAMC,SAASF,QAAQG,WAAW,CAACV,KAAKW,UAAU,CAAC,CAACC,YAAY,IAAIL,QAAQM,EAAE,CAACC,aAAa;QAC5F,mBAAmB;QACnB,MAAMC,SAASf,MAAMgB,OAAOb,MAAMH,MAAMgB,MAAM,8BAA8B;;QAE5E,IAAI,CAACnB,UAAUkB,QAAQN,SAAS;YAC9B,OAAOD,EAAE;QACX;QAEA,IAAI,CAACT,OAAOW,aAAa;YACvB,OAAO;QACT;QAEA,IAAIO,OAAOC,IAAI,CAACnB,OAAOW,aAAaS,MAAM,KAAK,GAAG;YAChD,OAAO;QACT;QAEA,MAAMC,aAAarB,OAAOW,WAAW,CAACV,KAAKW,UAAU,CAAC;QAEtD,IAAI,CAACS,YAAYC,QAAQF,QAAQ;YAC/B,OAAO;QACT;QAEA,MAAMG,SAAS,MAAM1B,qBAAqB;YACxCO;YACAoB,MAAMvB,MAAMqB,UAAU,CAAC;YACvBG,aAAaJ,WAAWC,MAAM;YAC9BjB,WAAWA,cAAc,YAAYA,cAAc,WAAWA,YAAY;YAC1EC;YACAC;YACAmB,aAAazB,MAAMqB,UAAU,CAAC;QAChC;QAEA,IAAIK,aAAa,EAAE;QACnB,IAAK,MAAMC,YAAYL,OAAQ;YAC7B,IAAIA,MAAM,CAACK,SAAS,CAACD,UAAU,EAAE;gBAC/BA,aAAaA,WAAWE,MAAM,CAACN,MAAM,CAACK,SAAS,CAACD,UAAU;YAC5D;QACF;QAEA,IAAIA,WAAWP,MAAM,EAAE;YACrB,OAAO,uCAAuCO,WAAWG,IAAI,CAAC;QAChE;QAEA,OAAO;IACT;AACF,EAAC"}

package/dist/field/index.d.ts

@@ -1,7 +1,9 @@
 import type { FormFieldBase } from '@payloadcms/ui/fields/shared';
-import type { EditorConfig as LexicalEditorConfig } from 'lexical/LexicalEditor.js';
+import type { EditorConfig as LexicalEditorConfig } from 'lexical';
 import React from 'react';
+import type { LexicalFieldAdminProps } from '../types.js';
 export declare const RichTextField: React.FC<FormFieldBase & {
+    admin?: LexicalFieldAdminProps;
     lexicalEditorConfig: LexicalEditorConfig;
     name: string;
     richTextComponentMap: Map<string, React.ReactNode>;

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

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