@payloadcms/richtext-lexical 3.70.0-canary.9 → 3.71.0-internal-debug.80dab4c

package/dist/field/Diff/converters/unknown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["createHash","baseClass","UnknownDiffHTMLConverterAsync","i18n","req","unknown","node","providedCSSString","ReactDOMServer","default","nodeFieldsHash","update","JSON","stringify","digest","nodeType","type","nodeTypeSpecifier","fields","blockType","JSX","_jsxs","className","_jsx","html","renderToStaticMarkup"],"sources":["../../../../../src/field/Diff/converters/unknown/index.tsx"],"sourcesContent":["import type { LexicalNode } from 'lexical'\nimport type { PayloadRequest } from 'payload'\n\nimport { type I18nClient } from '@payloadcms/translations'\n\nimport './index.scss'\n\nimport { createHash } from 'crypto'\n\nimport type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js'\nimport type { SerializedBlockNode } from '../../../../nodeTypes.js'\n\nconst baseClass = 'lexical-unknown-diff'\n\nexport const UnknownDiffHTMLConverterAsync: (args: {\n  i18n: I18nClient\n  req: PayloadRequest\n}) => HTMLConvertersAsync<LexicalNode> = ({ i18n, req }) => {\n  return {\n    unknown: async ({ node, providedCSSString }) => {\n      const ReactDOMServer = (await import('react-dom/server')).default\n\n      // hash fields to ensure they are diffed if they change\n      const nodeFieldsHash = createHash('sha256')\n        .update(JSON.stringify(node ?? {}))\n        .digest('hex')\n\n      let nodeType = node.type\n\n      let nodeTypeSpecifier: null | string = null\n\n      if (node.type === 'block') {\n        nodeTypeSpecifier = (node as SerializedBlockNode).fields.blockType\n        nodeType = 'Block'\n      } else if (node.type === 'inlineBlock') {\n        nodeTypeSpecifier = (node as SerializedBlockNode).fields.blockType\n        nodeType = 'InlineBlock'\n      }\n\n      const JSX = (\n        <div\n          className={`${baseClass}${providedCSSString}`}\n          data-enable-match=\"true\"\n          data-fields-hash={`${nodeFieldsHash}`}\n        >\n          {nodeTypeSpecifier && (\n            <span className={`${baseClass}__specifier`}>{nodeTypeSpecifier}&nbsp;</span>\n          )}\n          <span>{nodeType}</span>\n          <div className={`${baseClass}__meta`}>\n            <br />\n          </div>\n        </div>\n      )\n\n      // Render to HTML\n      const html = ReactDOMServer.renderToStaticMarkup(JSX)\n\n      return html\n    },\n  }\n}\n"],"mappings":";AAOA,SAASA,UAAU,QAAQ;AAK3B,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,6BAAA,GAG4BA,CAAC;EAAEC,IAAI;EAAEC;AAAG,CAAE;EACrD,OAAO;IACLC,OAAA,EAAS,MAAAA,CAAO;MAAEC,IAAI;MAAEC;IAAiB,CAAE;MACzC,MAAMC,cAAA,GAAiB,CAAC,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;MAEjE;MACA,MAAMC,cAAA,GAAiBV,UAAA,CAAW,UAC/BW,MAAM,CAACC,IAAA,CAAKC,SAAS,CAACP,IAAA,IAAQ,CAAC,IAC/BQ,MAAM,CAAC;MAEV,IAAIC,QAAA,GAAWT,IAAA,CAAKU,IAAI;MAExB,IAAIC,iBAAA,GAAmC;MAEvC,IAAIX,IAAA,CAAKU,IAAI,KAAK,SAAS;QACzBC,iBAAA,GAAoBX,IAAC,CAA6BY,MAAM,CAACC,SAAS;QAClEJ,QAAA,GAAW;MACb,OAAO,IAAIT,IAAA,CAAKU,IAAI,KAAK,eAAe;QACtCC,iBAAA,GAAoBX,IAAC,CAA6BY,MAAM,CAACC,SAAS;QAClEJ,QAAA,GAAW;MACb;MAEA,MAAMK,GAAA,gBACJC,KAAA,CAAC;QACCC,SAAA,EAAW,GAAGrB,SAAA,GAAYM,iBAAA,EAAmB;QAC7C,qBAAkB;QAClB,oBAAkB,GAAGG,cAAA,EAAgB;mBAEpCO,iBAAA,iBACCI,KAAA,CAAC;UAAKC,SAAA,EAAW,GAAGrB,SAAA,aAAsB;qBAAGgB,iBAAA,EAAkB;yBAEjEM,IAAA,CAAC;oBAAMR;yBACPQ,IAAA,CAAC;UAAID,SAAA,EAAW,GAAGrB,SAAA,QAAiB;oBAClC,aAAAsB,IAAA,CAAC;;;MAKP;MACA,MAAMC,IAAA,GAAOhB,cAAA,CAAeiB,oBAAoB,CAACL,GAAA;MAEjD,OAAOI,IAAA;IACT;EACF;AACF","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/field/Diff/converters/unknown/index.tsx"],"sourcesContent":["import type { LexicalNode } from 'lexical'\nimport type { PayloadRequest } from 'payload'\n\nimport { type I18nClient } from '@payloadcms/translations'\n\nimport './index.scss'\n\nimport { createHash } from 'crypto'\n\nimport type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js'\nimport type { SerializedBlockNode } from '../../../../nodeTypes.js'\n\nconst baseClass = 'lexical-unknown-diff'\n\nexport const UnknownDiffHTMLConverterAsync: (args: {\n  i18n: I18nClient\n  req: PayloadRequest\n}) => HTMLConvertersAsync<LexicalNode> = ({ i18n, req }) => {\n  return {\n    unknown: async ({ node, providedCSSString }) => {\n      const ReactDOMServer = (await import('react-dom/server')).default\n\n      // hash fields to ensure they are diffed if they change\n      const nodeFieldsHash = createHash('sha256')\n        .update(JSON.stringify(node ?? {}))\n        .digest('hex')\n\n      let nodeType = node.type\n\n      let nodeTypeSpecifier: null | string = null\n\n      if (node.type === 'block') {\n        nodeTypeSpecifier = (node as SerializedBlockNode).fields.blockType\n        nodeType = 'Block'\n      } else if (node.type === 'inlineBlock') {\n        nodeTypeSpecifier = (node as SerializedBlockNode).fields.blockType\n        nodeType = 'InlineBlock'\n      }\n\n      const JSX = (\n        <div\n          className={`${baseClass}${providedCSSString}`}\n          data-enable-match=\"true\"\n          data-fields-hash={`${nodeFieldsHash}`}\n        >\n          {nodeTypeSpecifier && (\n            <span className={`${baseClass}__specifier`}>{nodeTypeSpecifier}&nbsp;</span>\n          )}\n          <span>{nodeType}</span>\n          <div className={`${baseClass}__meta`}>\n            <br />\n          </div>\n        </div>\n      )\n\n      // Render to HTML\n      const html = ReactDOMServer.renderToStaticMarkup(JSX)\n\n      return html\n    },\n  }\n}\n"],"names":["createHash","baseClass","UnknownDiffHTMLConverterAsync","i18n","req","unknown","node","providedCSSString","ReactDOMServer","default","nodeFieldsHash","update","JSON","stringify","digest","nodeType","type","nodeTypeSpecifier","fields","blockType","JSX","div","className","data-enable-match","data-fields-hash","span","br","html","renderToStaticMarkup"],"mappings":";AAKA,OAAO,eAAc;AAErB,SAASA,UAAU,QAAQ,SAAQ;AAKnC,MAAMC,YAAY;AAElB,OAAO,MAAMC,gCAG4B,CAAC,EAAEC,IAAI,EAAEC,GAAG,EAAE;IACrD,OAAO;QACLC,SAAS,OAAO,EAAEC,IAAI,EAAEC,iBAAiB,EAAE;YACzC,MAAMC,iBAAiB,AAAC,CAAA,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;YAEjE,uDAAuD;YACvD,MAAMC,iBAAiBV,WAAW,UAC/BW,MAAM,CAACC,KAAKC,SAAS,CAACP,QAAQ,CAAC,IAC/BQ,MAAM,CAAC;YAEV,IAAIC,WAAWT,KAAKU,IAAI;YAExB,IAAIC,oBAAmC;YAEvC,IAAIX,KAAKU,IAAI,KAAK,SAAS;gBACzBC,oBAAoB,AAACX,KAA6BY,MAAM,CAACC,SAAS;gBAClEJ,WAAW;YACb,OAAO,IAAIT,KAAKU,IAAI,KAAK,eAAe;gBACtCC,oBAAoB,AAACX,KAA6BY,MAAM,CAACC,SAAS;gBAClEJ,WAAW;YACb;YAEA,MAAMK,oBACJ,QAACC;gBACCC,WAAW,GAAGrB,YAAYM,mBAAmB;gBAC7CgB,qBAAkB;gBAClBC,oBAAkB,GAAGd,gBAAgB;;oBAEpCO,mCACC,QAACQ;wBAAKH,WAAW,GAAGrB,UAAU,WAAW,CAAC;;4BAAGgB;4BAAkB;;;;;;;kCAEjE,QAACQ;kCAAMV;;;;;;kCACP,QAACM;wBAAIC,WAAW,GAAGrB,UAAU,MAAM,CAAC;kCAClC,cAAA,QAACyB;;;;;;;;;;;;;;;;YAKP,iBAAiB;YACjB,MAAMC,OAAOnB,eAAeoB,oBAAoB,CAACR;YAEjD,OAAOO;QACT;IACF;AACF,EAAC"}

package/dist/field/Diff/converters/unknown/index.scss

@@ -0,0 +1,40 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .lexical-diff .lexical-unknown-diff {
+    @extend %body;
+    @include shadow-sm;
+    max-width: fit-content;
+    display: flex;
+    align-items: center;
+    background: var(--theme-input-bg);
+    border-radius: $style-radius-s;
+    border: 1px solid var(--theme-elevation-100);
+    position: relative;
+    font-family: var(--font-body);
+    margin-block: base(0.5);
+    max-height: calc(var(--base) * 4);
+    padding: base(0.25);
+
+    &__specifier {
+      font-family: 'SF Mono', Menlo, Consolas, Monaco, monospace;
+    }
+
+    &[data-match-type='create'] {
+      border-color: var(--diff-create-pill-border);
+      color: var(--diff-create-parent-color);
+    }
+
+    &[data-match-type='delete'] {
+      border-color: var(--diff-delete-pill-border);
+      color: var(--diff-delete-parent-color);
+      text-decoration-line: none;
+      background-color: var(--diff-delete-pill-bg);
+
+      * {
+        text-decoration-line: none;
+        color: var(--diff-delete-parent-color);
+      }
+    }
+  }
+}

package/dist/field/Diff/converters/upload/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/Diff/converters/upload/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,cAAc,EAAc,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAI1D,OAAO,cAAc,CAAA;AAKrB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8DAA8D,CAAA;AAEvG,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAA;AAIpE,eAAO,MAAM,4BAA4B,EAAE,CAAC,IAAI,EAAE;IAChD,IAAI,EAAE,UAAU,CAAA;IAChB,GAAG,EAAE,cAAc,CAAA;CACpB,KAAK,mBAAmB,CAAC,oBAAoB,CAkF7C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/Diff/converters/upload/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,cAAc,EAAc,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAI1D,OAAO,cAAc,CAAA;AAKrB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8DAA8D,CAAA;AAEvG,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAA;AAIpE,eAAO,MAAM,4BAA4B,EAAE,CAAC,IAAI,EAAE;IAChD,IAAI,EAAE,UAAU,CAAA;IAChB,GAAG,EAAE,cAAc,CAAA;CACpB,KAAK,mBAAmB,CAAC,oBAAoB,CA8E7C,CAAA"}

package/dist/field/Diff/converters/upload/index.js

@@ -1,77 +1,130 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { File } from '@payloadcms/ui/rsc';
 import { createHash } from 'crypto';
+import './index.scss';
 import { formatFilesize } from 'payload/shared';
 import React from 'react';
 const baseClass = 'lexical-upload-diff';
-export const UploadDiffHTMLConverterAsync = ({
-  i18n,
-  req
-}) => {
-  return {
-    upload: async ({
-      node,
-      populate,
-      providedCSSString
-    }) => {
-      const uploadNode = node;
-      let uploadDoc = undefined;
-      // If there's no valid upload data, populate return an empty string
-      if (typeof uploadNode.value !== 'object') {
-        if (!populate) {
-          return '';
+export const UploadDiffHTMLConverterAsync = ()=>{
+    return {
+        upload: async ({ node, populate, providedCSSString })=>{
+            const uploadNode = node;
+            let uploadDoc = undefined;
+            // If there's no valid upload data, populate return an empty string
+            if (typeof uploadNode.value !== 'object') {
+                if (!populate) {
+                    return '';
+                }
+                uploadDoc = await populate({
+                    id: uploadNode.value,
+                    collectionSlug: uploadNode.relationTo
+                });
+            } else {
+                uploadDoc = uploadNode.value;
+            }
+            if (!uploadDoc) {
+                return '';
+            }
+            const alt = node.fields?.alt || uploadDoc?.alt || '';
+            const thumbnailSRC = 'thumbnailURL' in uploadDoc && uploadDoc?.thumbnailURL || uploadDoc?.url || '';
+            const ReactDOMServer = (await import('react-dom/server')).default;
+            // hash fields to ensure they are diffed if they change
+            const nodeFieldsHash = createHash('sha256').update(JSON.stringify(node.fields ?? {})).digest('hex');
+            const JSX = /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}${providedCSSString}`,
+                "data-enable-match": "true",
+                "data-fields-hash": `${nodeFieldsHash}`,
+                "data-filename": uploadDoc?.filename,
+                "data-lexical-upload-id": uploadNode.value,
+                "data-lexical-upload-relation-to": uploadNode.relationTo,
+                "data-src": thumbnailSRC,
+                children: /*#__PURE__*/ _jsxDEV("div", {
+                    className: `${baseClass}__card`,
+                    children: [
+                        /*#__PURE__*/ _jsxDEV("div", {
+                            className: `${baseClass}__thumbnail`,
+                            children: thumbnailSRC?.length ? /*#__PURE__*/ _jsxDEV("img", {
+                                alt: alt,
+                                src: thumbnailSRC
+                            }, void 0, false, {
+                                fileName: "src/field/Diff/converters/upload/index.tsx",
+                                lineNumber: 69,
+                                columnNumber: 39
+                            }, this) : /*#__PURE__*/ _jsxDEV(File, {}, void 0, false, {
+                                fileName: "src/field/Diff/converters/upload/index.tsx",
+                                lineNumber: 69,
+                                columnNumber: 78
+                            }, this)
+                        }, void 0, false, {
+                            fileName: "src/field/Diff/converters/upload/index.tsx",
+                            lineNumber: 68,
+                            columnNumber: 13
+                        }, this),
+                        /*#__PURE__*/ _jsxDEV("div", {
+                            className: `${baseClass}__info`,
+                            "data-enable-match": "false",
+                            children: [
+                                /*#__PURE__*/ _jsxDEV("strong", {
+                                    children: uploadDoc?.filename
+                                }, void 0, false, {
+                                    fileName: "src/field/Diff/converters/upload/index.tsx",
+                                    lineNumber: 72,
+                                    columnNumber: 15
+                                }, this),
+                                /*#__PURE__*/ _jsxDEV("div", {
+                                    className: `${baseClass}__meta`,
+                                    children: [
+                                        formatFilesize(uploadDoc?.filesize),
+                                        typeof uploadDoc?.width === 'number' && typeof uploadDoc?.height === 'number' && /*#__PURE__*/ _jsxDEV(React.Fragment, {
+                                            children: [
+                                                " - ",
+                                                uploadDoc?.width,
+                                                "x",
+                                                uploadDoc?.height
+                                            ]
+                                        }, void 0, true, {
+                                            fileName: "src/field/Diff/converters/upload/index.tsx",
+                                            lineNumber: 76,
+                                            columnNumber: 19
+                                        }, this),
+                                        uploadDoc?.mimeType && /*#__PURE__*/ _jsxDEV(React.Fragment, {
+                                            children: [
+                                                " - ",
+                                                uploadDoc?.mimeType
+                                            ]
+                                        }, void 0, true, {
+                                            fileName: "src/field/Diff/converters/upload/index.tsx",
+                                            lineNumber: 82,
+                                            columnNumber: 19
+                                        }, this)
+                                    ]
+                                }, void 0, true, {
+                                    fileName: "src/field/Diff/converters/upload/index.tsx",
+                                    lineNumber: 73,
+                                    columnNumber: 15
+                                }, this)
+                            ]
+                        }, void 0, true, {
+                            fileName: "src/field/Diff/converters/upload/index.tsx",
+                            lineNumber: 71,
+                            columnNumber: 13
+                        }, this)
+                    ]
+                }, void 0, true, {
+                    fileName: "src/field/Diff/converters/upload/index.tsx",
+                    lineNumber: 67,
+                    columnNumber: 11
+                }, this)
+            }, void 0, false, {
+                fileName: "src/field/Diff/converters/upload/index.tsx",
+                lineNumber: 58,
+                columnNumber: 9
+            }, this);
+            // Render to HTML
+            const html = ReactDOMServer.renderToStaticMarkup(JSX);
+            return html;
         }
-        uploadDoc = await populate({
-          id: uploadNode.value,
-          collectionSlug: uploadNode.relationTo
-        });
-      } else {
-        uploadDoc = uploadNode.value;
-      }
-      if (!uploadDoc) {
-        return '';
-      }
-      const relatedCollection = req.payload.collections[uploadNode.relationTo]?.config;
-      const thumbnailSRC = 'thumbnailURL' in uploadDoc && uploadDoc?.thumbnailURL || uploadDoc?.url || '';
-      const ReactDOMServer = (await import('react-dom/server')).default;
-      // hash fields to ensure they are diffed if they change
-      const nodeFieldsHash = createHash('sha256').update(JSON.stringify(node.fields ?? {})).digest('hex');
-      const JSX = /*#__PURE__*/_jsx("div", {
-        className: `${baseClass}${providedCSSString}`,
-        "data-enable-match": "true",
-        "data-fields-hash": `${nodeFieldsHash}`,
-        "data-filename": uploadDoc?.filename,
-        "data-lexical-upload-id": uploadNode.value,
-        "data-lexical-upload-relation-to": uploadNode.relationTo,
-        "data-src": thumbnailSRC,
-        children: /*#__PURE__*/_jsxs("div", {
-          className: `${baseClass}__card`,
-          children: [/*#__PURE__*/_jsx("div", {
-            className: `${baseClass}__thumbnail`,
-            children: thumbnailSRC?.length ? /*#__PURE__*/_jsx("img", {
-              alt: uploadDoc?.filename,
-              src: thumbnailSRC
-            }) : /*#__PURE__*/_jsx(File, {})
-          }), /*#__PURE__*/_jsxs("div", {
-            className: `${baseClass}__info`,
-            "data-enable-match": "false",
-            children: [/*#__PURE__*/_jsx("strong", {
-              children: uploadDoc?.filename
-            }), /*#__PURE__*/_jsxs("div", {
-              className: `${baseClass}__meta`,
-              children: [formatFilesize(uploadDoc?.filesize), typeof uploadDoc?.width === 'number' && typeof uploadDoc?.height === 'number' && /*#__PURE__*/_jsxs(React.Fragment, {
-                children: [" - ", uploadDoc?.width, "x", uploadDoc?.height]
-              }), uploadDoc?.mimeType && /*#__PURE__*/_jsxs(React.Fragment, {
-                children: [" - ", uploadDoc?.mimeType]
-              })]
-            })]
-          })]
-        })
-      });
-      // Render to HTML
-      const html = ReactDOMServer.renderToStaticMarkup(JSX);
-      return html;
-    }
-  };
+    };
 };
+
 //# sourceMappingURL=index.js.map

package/dist/field/Diff/converters/upload/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["File","createHash","formatFilesize","React","baseClass","UploadDiffHTMLConverterAsync","i18n","req","upload","node","populate","providedCSSString","uploadNode","uploadDoc","undefined","value","id","collectionSlug","relationTo","relatedCollection","payload","collections","config","thumbnailSRC","thumbnailURL","url","ReactDOMServer","default","nodeFieldsHash","update","JSON","stringify","fields","digest","JSX","_jsx","className","filename","_jsxs","length","alt","src","filesize","width","height","Fragment","mimeType","html","renderToStaticMarkup"],"sources":["../../../../../src/field/Diff/converters/upload/index.tsx"],"sourcesContent":["import type { FileData, PayloadRequest, TypeWithID } from 'payload'\n\nimport { type I18nClient } from '@payloadcms/translations'\nimport { File } from '@payloadcms/ui/rsc'\nimport { createHash } from 'crypto'\n\nimport './index.scss'\n\nimport { formatFilesize } from 'payload/shared'\nimport React from 'react'\n\nimport type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js'\nimport type { UploadDataImproved } from '../../../../features/upload/server/nodes/UploadNode.js'\nimport type { SerializedUploadNode } from '../../../../nodeTypes.js'\n\nconst baseClass = 'lexical-upload-diff'\n\nexport const UploadDiffHTMLConverterAsync: (args: {\n  i18n: I18nClient\n  req: PayloadRequest\n}) => HTMLConvertersAsync<SerializedUploadNode> = ({ i18n, req }) => {\n  return {\n    upload: async ({ node, populate, providedCSSString }) => {\n      const uploadNode = node as UploadDataImproved\n\n      let uploadDoc: (FileData & TypeWithID) | undefined = undefined\n\n      // If there's no valid upload data, populate return an empty string\n      if (typeof uploadNode.value !== 'object') {\n        if (!populate) {\n          return ''\n        }\n        uploadDoc = await populate<FileData & TypeWithID>({\n          id: uploadNode.value,\n          collectionSlug: uploadNode.relationTo,\n        })\n      } else {\n        uploadDoc = uploadNode.value as unknown as FileData & TypeWithID\n      }\n\n      if (!uploadDoc) {\n        return ''\n      }\n\n      const relatedCollection = req.payload.collections[uploadNode.relationTo]?.config\n\n      const thumbnailSRC: string =\n        ('thumbnailURL' in uploadDoc && (uploadDoc?.thumbnailURL as string)) || uploadDoc?.url || ''\n\n      const ReactDOMServer = (await import('react-dom/server')).default\n\n      // hash fields to ensure they are diffed if they change\n      const nodeFieldsHash = createHash('sha256')\n        .update(JSON.stringify(node.fields ?? {}))\n        .digest('hex')\n\n      const JSX = (\n        <div\n          className={`${baseClass}${providedCSSString}`}\n          data-enable-match=\"true\"\n          data-fields-hash={`${nodeFieldsHash}`}\n          data-filename={uploadDoc?.filename}\n          data-lexical-upload-id={uploadNode.value}\n          data-lexical-upload-relation-to={uploadNode.relationTo}\n          data-src={thumbnailSRC}\n        >\n          <div className={`${baseClass}__card`}>\n            <div className={`${baseClass}__thumbnail`}>\n              {thumbnailSRC?.length ? (\n                <img alt={uploadDoc?.filename} src={thumbnailSRC} />\n              ) : (\n                <File />\n              )}\n            </div>\n            <div className={`${baseClass}__info`} data-enable-match=\"false\">\n              <strong>{uploadDoc?.filename}</strong>\n              <div className={`${baseClass}__meta`}>\n                {formatFilesize(uploadDoc?.filesize)}\n                {typeof uploadDoc?.width === 'number' && typeof uploadDoc?.height === 'number' && (\n                  <React.Fragment>\n                    &nbsp;-&nbsp;\n                    {uploadDoc?.width}x{uploadDoc?.height}\n                  </React.Fragment>\n                )}\n                {uploadDoc?.mimeType && (\n                  <React.Fragment>\n                    &nbsp;-&nbsp;\n                    {uploadDoc?.mimeType}\n                  </React.Fragment>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      )\n\n      // Render to HTML\n      const html = ReactDOMServer.renderToStaticMarkup(JSX)\n\n      return html\n    },\n  }\n}\n"],"mappings":";AAGA,SAASA,IAAI,QAAQ;AACrB,SAASC,UAAU,QAAQ;AAI3B,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAMlB,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,4BAAA,GAGqCA,CAAC;EAAEC,IAAI;EAAEC;AAAG,CAAE;EAC9D,OAAO;IACLC,MAAA,EAAQ,MAAAA,CAAO;MAAEC,IAAI;MAAEC,QAAQ;MAAEC;IAAiB,CAAE;MAClD,MAAMC,UAAA,GAAaH,IAAA;MAEnB,IAAII,SAAA,GAAiDC,SAAA;MAErD;MACA,IAAI,OAAOF,UAAA,CAAWG,KAAK,KAAK,UAAU;QACxC,IAAI,CAACL,QAAA,EAAU;UACb,OAAO;QACT;QACAG,SAAA,GAAY,MAAMH,QAAA,CAAgC;UAChDM,EAAA,EAAIJ,UAAA,CAAWG,KAAK;UACpBE,cAAA,EAAgBL,UAAA,CAAWM;QAC7B;MACF,OAAO;QACLL,SAAA,GAAYD,UAAA,CAAWG,KAAK;MAC9B;MAEA,IAAI,CAACF,SAAA,EAAW;QACd,OAAO;MACT;MAEA,MAAMM,iBAAA,GAAoBZ,GAAA,CAAIa,OAAO,CAACC,WAAW,CAACT,UAAA,CAAWM,UAAU,CAAC,EAAEI,MAAA;MAE1E,MAAMC,YAAA,GACJ,cAAC,IAAkBV,SAAA,IAAcA,SAAA,EAAWW,YAAA,IAA4BX,SAAA,EAAWY,GAAA,IAAO;MAE5F,MAAMC,cAAA,GAAiB,CAAC,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;MAEjE;MACA,MAAMC,cAAA,GAAiB3B,UAAA,CAAW,UAC/B4B,MAAM,CAACC,IAAA,CAAKC,SAAS,CAACtB,IAAA,CAAKuB,MAAM,IAAI,CAAC,IACtCC,MAAM,CAAC;MAEV,MAAMC,GAAA,gBACJC,IAAA,CAAC;QACCC,SAAA,EAAW,GAAGhC,SAAA,GAAYO,iBAAA,EAAmB;QAC7C,qBAAkB;QAClB,oBAAkB,GAAGiB,cAAA,EAAgB;QACrC,iBAAef,SAAA,EAAWwB,QAAA;QAC1B,0BAAwBzB,UAAA,CAAWG,KAAK;QACxC,mCAAiCH,UAAA,CAAWM,UAAU;QACtD,YAAUK,YAAA;kBAEV,aAAAe,KAAA,CAAC;UAAIF,SAAA,EAAW,GAAGhC,SAAA,QAAiB;kCAClC+B,IAAA,CAAC;YAAIC,SAAA,EAAW,GAAGhC,SAAA,aAAsB;sBACtCmB,YAAA,EAAcgB,MAAA,gBACbJ,IAAA,CAAC;cAAIK,GAAA,EAAK3B,SAAA,EAAWwB,QAAA;cAAUI,GAAA,EAAKlB;8BAEpCY,IAAA,CAACnC,IAAA;2BAGLsC,KAAA,CAAC;YAAIF,SAAA,EAAW,GAAGhC,SAAA,QAAiB;YAAE,qBAAkB;oCACtD+B,IAAA,CAAC;wBAAQtB,SAAA,EAAWwB;6BACpBC,KAAA,CAAC;cAAIF,SAAA,EAAW,GAAGhC,SAAA,QAAiB;yBACjCF,cAAA,CAAeW,SAAA,EAAW6B,QAAA,GAC1B,OAAO7B,SAAA,EAAW8B,KAAA,KAAU,YAAY,OAAO9B,SAAA,EAAW+B,MAAA,KAAW,yBACpEN,KAAA,CAACnC,KAAA,CAAM0C,QAAQ;2BAAC,OAEbhC,SAAA,EAAW8B,KAAA,EAAM,KAAE9B,SAAA,EAAW+B,MAAA;kBAGlC/B,SAAA,EAAWiC,QAAA,iBACVR,KAAA,CAACnC,KAAA,CAAM0C,QAAQ;2BAAC,OAEbhC,SAAA,EAAWiC,QAAA;;;;;;MAS1B;MACA,MAAMC,IAAA,GAAOrB,cAAA,CAAesB,oBAAoB,CAACd,GAAA;MAEjD,OAAOa,IAAA;IACT;EACF;AACF","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/field/Diff/converters/upload/index.tsx"],"sourcesContent":["import type { FileData, PayloadRequest, TypeWithID } from 'payload'\n\nimport { type I18nClient } from '@payloadcms/translations'\nimport { File } from '@payloadcms/ui/rsc'\nimport { createHash } from 'crypto'\n\nimport './index.scss'\n\nimport { formatFilesize } from 'payload/shared'\nimport React from 'react'\n\nimport type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js'\nimport type { UploadDataImproved } from '../../../../features/upload/server/nodes/UploadNode.js'\nimport type { SerializedUploadNode } from '../../../../nodeTypes.js'\n\nconst baseClass = 'lexical-upload-diff'\n\nexport const UploadDiffHTMLConverterAsync: (args: {\n  i18n: I18nClient\n  req: PayloadRequest\n}) => HTMLConvertersAsync<SerializedUploadNode> = () => {\n  return {\n    upload: async ({ node, populate, providedCSSString }) => {\n      const uploadNode = node as UploadDataImproved\n\n      let uploadDoc: (FileData & TypeWithID) | undefined = undefined\n\n      // If there's no valid upload data, populate return an empty string\n      if (typeof uploadNode.value !== 'object') {\n        if (!populate) {\n          return ''\n        }\n        uploadDoc = await populate<FileData & TypeWithID>({\n          id: uploadNode.value,\n          collectionSlug: uploadNode.relationTo,\n        })\n      } else {\n        uploadDoc = uploadNode.value as unknown as FileData & TypeWithID\n      }\n\n      if (!uploadDoc) {\n        return ''\n      }\n\n      const alt = (node.fields?.alt as string) || (uploadDoc as { alt?: string })?.alt || ''\n\n      const thumbnailSRC: string =\n        ('thumbnailURL' in uploadDoc && (uploadDoc?.thumbnailURL as string)) || uploadDoc?.url || ''\n\n      const ReactDOMServer = (await import('react-dom/server')).default\n\n      // hash fields to ensure they are diffed if they change\n      const nodeFieldsHash = createHash('sha256')\n        .update(JSON.stringify(node.fields ?? {}))\n        .digest('hex')\n\n      const JSX = (\n        <div\n          className={`${baseClass}${providedCSSString}`}\n          data-enable-match=\"true\"\n          data-fields-hash={`${nodeFieldsHash}`}\n          data-filename={uploadDoc?.filename}\n          data-lexical-upload-id={uploadNode.value}\n          data-lexical-upload-relation-to={uploadNode.relationTo}\n          data-src={thumbnailSRC}\n        >\n          <div className={`${baseClass}__card`}>\n            <div className={`${baseClass}__thumbnail`}>\n              {thumbnailSRC?.length ? <img alt={alt} src={thumbnailSRC} /> : <File />}\n            </div>\n            <div className={`${baseClass}__info`} data-enable-match=\"false\">\n              <strong>{uploadDoc?.filename}</strong>\n              <div className={`${baseClass}__meta`}>\n                {formatFilesize(uploadDoc?.filesize)}\n                {typeof uploadDoc?.width === 'number' && typeof uploadDoc?.height === 'number' && (\n                  <React.Fragment>\n                    &nbsp;-&nbsp;\n                    {uploadDoc?.width}x{uploadDoc?.height}\n                  </React.Fragment>\n                )}\n                {uploadDoc?.mimeType && (\n                  <React.Fragment>\n                    &nbsp;-&nbsp;\n                    {uploadDoc?.mimeType}\n                  </React.Fragment>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      )\n\n      // Render to HTML\n      const html = ReactDOMServer.renderToStaticMarkup(JSX)\n\n      return html\n    },\n  }\n}\n"],"names":["File","createHash","formatFilesize","React","baseClass","UploadDiffHTMLConverterAsync","upload","node","populate","providedCSSString","uploadNode","uploadDoc","undefined","value","id","collectionSlug","relationTo","alt","fields","thumbnailSRC","thumbnailURL","url","ReactDOMServer","default","nodeFieldsHash","update","JSON","stringify","digest","JSX","div","className","data-enable-match","data-fields-hash","data-filename","filename","data-lexical-upload-id","data-lexical-upload-relation-to","data-src","length","img","src","strong","filesize","width","height","Fragment","mimeType","html","renderToStaticMarkup"],"mappings":";AAGA,SAASA,IAAI,QAAQ,qBAAoB;AACzC,SAASC,UAAU,QAAQ,SAAQ;AAEnC,OAAO,eAAc;AAErB,SAASC,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,WAAW,QAAO;AAMzB,MAAMC,YAAY;AAElB,OAAO,MAAMC,+BAGqC;IAChD,OAAO;QACLC,QAAQ,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE;YAClD,MAAMC,aAAaH;YAEnB,IAAII,YAAiDC;YAErD,mEAAmE;YACnE,IAAI,OAAOF,WAAWG,KAAK,KAAK,UAAU;gBACxC,IAAI,CAACL,UAAU;oBACb,OAAO;gBACT;gBACAG,YAAY,MAAMH,SAAgC;oBAChDM,IAAIJ,WAAWG,KAAK;oBACpBE,gBAAgBL,WAAWM,UAAU;gBACvC;YACF,OAAO;gBACLL,YAAYD,WAAWG,KAAK;YAC9B;YAEA,IAAI,CAACF,WAAW;gBACd,OAAO;YACT;YAEA,MAAMM,MAAM,AAACV,KAAKW,MAAM,EAAED,OAAmBN,WAAgCM,OAAO;YAEpF,MAAME,eACJ,AAAC,kBAAkBR,aAAcA,WAAWS,gBAA4BT,WAAWU,OAAO;YAE5F,MAAMC,iBAAiB,AAAC,CAAA,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;YAEjE,uDAAuD;YACvD,MAAMC,iBAAiBvB,WAAW,UAC/BwB,MAAM,CAACC,KAAKC,SAAS,CAACpB,KAAKW,MAAM,IAAI,CAAC,IACtCU,MAAM,CAAC;YAEV,MAAMC,oBACJ,QAACC;gBACCC,WAAW,GAAG3B,YAAYK,mBAAmB;gBAC7CuB,qBAAkB;gBAClBC,oBAAkB,GAAGT,gBAAgB;gBACrCU,iBAAevB,WAAWwB;gBAC1BC,0BAAwB1B,WAAWG,KAAK;gBACxCwB,mCAAiC3B,WAAWM,UAAU;gBACtDsB,YAAUnB;0BAEV,cAAA,QAACW;oBAAIC,WAAW,GAAG3B,UAAU,MAAM,CAAC;;sCAClC,QAAC0B;4BAAIC,WAAW,GAAG3B,UAAU,WAAW,CAAC;sCACtCe,cAAcoB,uBAAS,QAACC;gCAAIvB,KAAKA;gCAAKwB,KAAKtB;;;;;qDAAmB,QAACnB;;;;;;;;;;sCAElE,QAAC8B;4BAAIC,WAAW,GAAG3B,UAAU,MAAM,CAAC;4BAAE4B,qBAAkB;;8CACtD,QAACU;8CAAQ/B,WAAWwB;;;;;;8CACpB,QAACL;oCAAIC,WAAW,GAAG3B,UAAU,MAAM,CAAC;;wCACjCF,eAAeS,WAAWgC;wCAC1B,OAAOhC,WAAWiC,UAAU,YAAY,OAAOjC,WAAWkC,WAAW,0BACpE,QAAC1C,MAAM2C,QAAQ;;gDAAC;gDAEbnC,WAAWiC;gDAAM;gDAAEjC,WAAWkC;;;;;;;wCAGlClC,WAAWoC,0BACV,QAAC5C,MAAM2C,QAAQ;;gDAAC;gDAEbnC,WAAWoC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAS1B,iBAAiB;YACjB,MAAMC,OAAO1B,eAAe2B,oBAAoB,CAACpB;YAEjD,OAAOmB;QACT;IACF;AACF,EAAC"}

package/dist/field/Diff/converters/upload/index.scss

@@ -0,0 +1,115 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .lexical-diff {
+    .lexical-upload-diff {
+      @extend %body;
+      @include shadow-sm;
+      min-width: calc(var(--base) * 10);
+      max-width: fit-content;
+      display: flex;
+      align-items: center;
+      background-color: var(--theme-input-bg);
+      border-radius: $style-radius-s;
+      border: 1px solid var(--theme-elevation-100);
+      position: relative;
+      font-family: var(--font-body);
+      margin-block: base(0.5);
+      max-height: calc(var(--base) * 3);
+      padding: base(0.6);
+
+      &[data-match-type='create'] {
+        border-color: var(--diff-create-pill-border);
+        color: var(--diff-create-parent-color);
+
+        * {
+          color: var(--diff-create-parent-color);
+        }
+
+        .lexical-upload-diff__meta {
+          color: var(--diff-create-link-color);
+          * {
+            color: var(--diff-create-link-color);
+          }
+        }
+
+        .lexical-upload-diff__thumbnail {
+          border-radius: 0px;
+          border-color: var(--diff-create-pill-border);
+          background-color: none;
+        }
+      }
+
+      &[data-match-type='delete'] {
+        border-color: var(--diff-delete-pill-border);
+        text-decoration-line: none;
+        color: var(--diff-delete-parent-color);
+        background-color: var(--diff-delete-pill-bg);
+
+        .lexical-upload-diff__meta {
+          color: var(--diff-delete-link-color);
+          * {
+            color: var(--diff-delete-link-color);
+          }
+        }
+
+        * {
+          text-decoration-line: none;
+          color: var(--diff-delete-parent-color);
+        }
+
+        .lexical-upload-diff__thumbnail {
+          border-radius: 0px;
+          border-color: var(--diff-delete-pill-border);
+          background-color: none;
+        }
+      }
+
+      &__card {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+      }
+
+      &__thumbnail {
+        width: calc(var(--base) * 3 - base(0.6) * 2);
+        height: calc(var(--base) * 3 - base(0.6) * 2);
+        position: relative;
+        overflow: hidden;
+        flex-shrink: 0;
+        border-radius: 0px;
+        border: 1px solid var(--theme-elevation-100);
+
+        img,
+        svg {
+          position: absolute;
+          object-fit: cover;
+          width: 100%;
+          height: 100%;
+          border-radius: 0px;
+        }
+      }
+
+      &__info {
+        flex-grow: 1;
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;
+        padding: calc(var(--base) * 0.25) calc(var(--base) * 0.75);
+        justify-content: space-between;
+        font-weight: 400;
+
+        strong {
+          font-weight: 600;
+        }
+      }
+
+      &__meta {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}

package/dist/field/Diff/index.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { FieldDiffContainer, getHTMLDiffComponents } from '@payloadcms/ui/rsc';
+import './index.scss';
 import '../bundled.css';
 import React from 'react';
 import { convertLexicalToHTMLAsync } from '../../features/converters/lexicalToHtml/async/index.js';
@@ -10,70 +11,62 @@ import { RelationshipDiffHTMLConverterAsync } from './converters/relationship/in
 import { UnknownDiffHTMLConverterAsync } from './converters/unknown/index.js';
 import { UploadDiffHTMLConverterAsync } from './converters/upload/index.js';
 const baseClass = 'lexical-diff';
-export const LexicalDiffComponent = async args => {
-  const {
-    comparisonValue: valueFrom,
-    field,
-    i18n,
-    locale,
-    nestingLevel,
-    req,
-    versionValue: valueTo
-  } = args;
-  const converters = ({
-    defaultConverters
-  }) => ({
-    ...defaultConverters,
-    ...LinkDiffHTMLConverterAsync({}),
-    ...ListItemDiffHTMLConverterAsync,
-    ...UploadDiffHTMLConverterAsync({
-      i18n,
-      req
-    }),
-    ...RelationshipDiffHTMLConverterAsync({
-      i18n,
-      req
-    }),
-    ...UnknownDiffHTMLConverterAsync({
-      i18n,
-      req
-    })
-  });
-  const payloadPopulateFn = await getPayloadPopulateFn({
-    currentDepth: 0,
-    depth: 1,
-    req
-  });
-  const fromHTML = await convertLexicalToHTMLAsync({
-    converters,
-    data: valueFrom,
-    disableContainer: true,
-    populate: payloadPopulateFn
-  });
-  const toHTML = await convertLexicalToHTMLAsync({
-    converters,
-    data: valueTo,
-    disableContainer: true,
-    populate: payloadPopulateFn
-  });
-  const {
-    From,
-    To
-  } = getHTMLDiffComponents({
-    // Ensure empty paragraph is displayed for empty rich text fields - otherwise, toHTML may be displayed in the wrong column
-    fromHTML: fromHTML?.length ? fromHTML : '<p></p>',
-    toHTML: toHTML?.length ? toHTML : '<p></p>'
-  });
-  return /*#__PURE__*/_jsx(FieldDiffContainer, {
-    className: baseClass,
-    From: From,
-    i18n: i18n,
-    label: {
-      label: field.label,
-      locale
-    },
-    nestingLevel: nestingLevel,
-    To: To
-  });
+export const LexicalDiffComponent = async (args)=>{
+    const { comparisonValue: valueFrom, field, i18n, locale, nestingLevel, req, versionValue: valueTo } = args;
+    const converters = ({ defaultConverters })=>({
+            ...defaultConverters,
+            ...LinkDiffHTMLConverterAsync({}),
+            ...ListItemDiffHTMLConverterAsync,
+            ...UploadDiffHTMLConverterAsync({
+                i18n,
+                req
+            }),
+            ...RelationshipDiffHTMLConverterAsync({
+                i18n,
+                req
+            }),
+            ...UnknownDiffHTMLConverterAsync({
+                i18n,
+                req
+            })
+        });
+    const payloadPopulateFn = await getPayloadPopulateFn({
+        currentDepth: 0,
+        depth: 1,
+        req
+    });
+    const fromHTML = await convertLexicalToHTMLAsync({
+        converters,
+        data: valueFrom,
+        disableContainer: true,
+        populate: payloadPopulateFn
+    });
+    const toHTML = await convertLexicalToHTMLAsync({
+        converters,
+        data: valueTo,
+        disableContainer: true,
+        populate: payloadPopulateFn
+    });
+    const { From, To } = getHTMLDiffComponents({
+        // Ensure empty paragraph is displayed for empty rich text fields - otherwise, toHTML may be displayed in the wrong column
+        fromHTML: fromHTML?.length ? fromHTML : '<p></p>',
+        toHTML: toHTML?.length ? toHTML : '<p></p>'
+    });
+    return /*#__PURE__*/ _jsxDEV(FieldDiffContainer, {
+        className: baseClass,
+        From: From,
+        i18n: i18n,
+        label: {
+            label: field.label,
+            locale
+        },
+        nestingLevel: nestingLevel,
+        To: To
+    }, void 0, false, {
+        fileName: "src/field/Diff/index.tsx",
+        lineNumber: 69,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

package/dist/field/Diff/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["FieldDiffContainer","getHTMLDiffComponents","React","convertLexicalToHTMLAsync","getPayloadPopulateFn","LinkDiffHTMLConverterAsync","ListItemDiffHTMLConverterAsync","RelationshipDiffHTMLConverterAsync","UnknownDiffHTMLConverterAsync","UploadDiffHTMLConverterAsync","baseClass","LexicalDiffComponent","args","comparisonValue","valueFrom","field","i18n","locale","nestingLevel","req","versionValue","valueTo","converters","defaultConverters","payloadPopulateFn","currentDepth","depth","fromHTML","data","disableContainer","populate","toHTML","From","To","length","_jsx","className","label"],"sources":["../../../src/field/Diff/index.tsx"],"sourcesContent":["import type { SerializedEditorState } from 'lexical'\nimport type { RichTextFieldDiffServerComponent } from 'payload'\n\nimport { FieldDiffContainer, getHTMLDiffComponents } from '@payloadcms/ui/rsc'\n\nimport './index.scss'\nimport '../bundled.css'\n\nimport React from 'react'\n\nimport type { HTMLConvertersFunctionAsync } from '../../features/converters/lexicalToHtml/async/types.js'\n\nimport { convertLexicalToHTMLAsync } from '../../features/converters/lexicalToHtml/async/index.js'\nimport { getPayloadPopulateFn } from '../../features/converters/utilities/payloadPopulateFn.js'\nimport { LinkDiffHTMLConverterAsync } from './converters/link.js'\nimport { ListItemDiffHTMLConverterAsync } from './converters/listitem/index.js'\nimport { RelationshipDiffHTMLConverterAsync } from './converters/relationship/index.js'\nimport { UnknownDiffHTMLConverterAsync } from './converters/unknown/index.js'\nimport { UploadDiffHTMLConverterAsync } from './converters/upload/index.js'\n\nconst baseClass = 'lexical-diff'\n\nexport const LexicalDiffComponent: RichTextFieldDiffServerComponent = async (args) => {\n  const {\n    comparisonValue: valueFrom,\n    field,\n    i18n,\n    locale,\n    nestingLevel,\n    req,\n    versionValue: valueTo,\n  } = args\n\n  const converters: HTMLConvertersFunctionAsync = ({ defaultConverters }) => ({\n    ...defaultConverters,\n    ...LinkDiffHTMLConverterAsync({}),\n    ...ListItemDiffHTMLConverterAsync,\n    ...UploadDiffHTMLConverterAsync({ i18n, req }),\n    ...RelationshipDiffHTMLConverterAsync({ i18n, req }),\n    ...UnknownDiffHTMLConverterAsync({ i18n, req }),\n  })\n\n  const payloadPopulateFn = await getPayloadPopulateFn({\n    currentDepth: 0,\n    depth: 1,\n    req,\n  })\n  const fromHTML = await convertLexicalToHTMLAsync({\n    converters,\n    data: valueFrom as SerializedEditorState,\n    disableContainer: true,\n    populate: payloadPopulateFn,\n  })\n\n  const toHTML = await convertLexicalToHTMLAsync({\n    converters,\n    data: valueTo as SerializedEditorState,\n    disableContainer: true,\n    populate: payloadPopulateFn,\n  })\n\n  const { From, To } = getHTMLDiffComponents({\n    // Ensure empty paragraph is displayed for empty rich text fields - otherwise, toHTML may be displayed in the wrong column\n    fromHTML: fromHTML?.length ? fromHTML : '<p></p>',\n    toHTML: toHTML?.length ? toHTML : '<p></p>',\n  })\n\n  return (\n    <FieldDiffContainer\n      className={baseClass}\n      From={From}\n      i18n={i18n}\n      label={{\n        label: field.label,\n        locale,\n      }}\n      nestingLevel={nestingLevel}\n      To={To}\n    />\n  )\n}\n"],"mappings":";AAGA,SAASA,kBAAkB,EAAEC,qBAAqB,QAAQ;AAG1D,OAAO;AAEP,OAAOC,KAAA,MAAW;AAIlB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,oBAAoB,QAAQ;AACrC,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,8BAA8B,QAAQ;AAC/C,SAASC,kCAAkC,QAAQ;AACnD,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,4BAA4B,QAAQ;AAE7C,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,oBAAA,GAAyD,MAAOC,IAAA;EAC3E,MAAM;IACJC,eAAA,EAAiBC,SAAS;IAC1BC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,YAAY;IACZC,GAAG;IACHC,YAAA,EAAcC;EAAO,CACtB,GAAGT,IAAA;EAEJ,MAAMU,UAAA,GAA0CA,CAAC;IAAEC;EAAiB,CAAE,MAAM;IAC1E,GAAGA,iBAAiB;IACpB,GAAGlB,0BAAA,CAA2B,CAAC,EAAE;IACjC,GAAGC,8BAA8B;IACjC,GAAGG,4BAAA,CAA6B;MAAEO,IAAA;MAAMG;IAAI,EAAE;IAC9C,GAAGZ,kCAAA,CAAmC;MAAES,IAAA;MAAMG;IAAI,EAAE;IACpD,GAAGX,6BAAA,CAA8B;MAAEQ,IAAA;MAAMG;IAAI;EAC/C;EAEA,MAAMK,iBAAA,GAAoB,MAAMpB,oBAAA,CAAqB;IACnDqB,YAAA,EAAc;IACdC,KAAA,EAAO;IACPP;EACF;EACA,MAAMQ,QAAA,GAAW,MAAMxB,yBAAA,CAA0B;IAC/CmB,UAAA;IACAM,IAAA,EAAMd,SAAA;IACNe,gBAAA,EAAkB;IAClBC,QAAA,EAAUN;EACZ;EAEA,MAAMO,MAAA,GAAS,MAAM5B,yBAAA,CAA0B;IAC7CmB,UAAA;IACAM,IAAA,EAAMP,OAAA;IACNQ,gBAAA,EAAkB;IAClBC,QAAA,EAAUN;EACZ;EAEA,MAAM;IAAEQ,IAAI;IAAEC;EAAE,CAAE,GAAGhC,qBAAA,CAAsB;IACzC;IACA0B,QAAA,EAAUA,QAAA,EAAUO,MAAA,GAASP,QAAA,GAAW;IACxCI,MAAA,EAAQA,MAAA,EAAQG,MAAA,GAASH,MAAA,GAAS;EACpC;EAEA,oBACEI,IAAA,CAACnC,kBAAA;IACCoC,SAAA,EAAW1B,SAAA;IACXsB,IAAA,EAAMA,IAAA;IACNhB,IAAA,EAAMA,IAAA;IACNqB,KAAA,EAAO;MACLA,KAAA,EAAOtB,KAAA,CAAMsB,KAAK;MAClBpB;IACF;IACAC,YAAA,EAAcA,YAAA;IACde,EAAA,EAAIA;;AAGV","ignoreList":[]}
+{"version":3,"sources":["../../../src/field/Diff/index.tsx"],"sourcesContent":["import type { SerializedEditorState } from 'lexical'\nimport type { RichTextFieldDiffServerComponent } from 'payload'\n\nimport { FieldDiffContainer, getHTMLDiffComponents } from '@payloadcms/ui/rsc'\n\nimport './index.scss'\nimport '../bundled.css'\n\nimport React from 'react'\n\nimport type { HTMLConvertersFunctionAsync } from '../../features/converters/lexicalToHtml/async/types.js'\n\nimport { convertLexicalToHTMLAsync } from '../../features/converters/lexicalToHtml/async/index.js'\nimport { getPayloadPopulateFn } from '../../features/converters/utilities/payloadPopulateFn.js'\nimport { LinkDiffHTMLConverterAsync } from './converters/link.js'\nimport { ListItemDiffHTMLConverterAsync } from './converters/listitem/index.js'\nimport { RelationshipDiffHTMLConverterAsync } from './converters/relationship/index.js'\nimport { UnknownDiffHTMLConverterAsync } from './converters/unknown/index.js'\nimport { UploadDiffHTMLConverterAsync } from './converters/upload/index.js'\n\nconst baseClass = 'lexical-diff'\n\nexport const LexicalDiffComponent: RichTextFieldDiffServerComponent = async (args) => {\n  const {\n    comparisonValue: valueFrom,\n    field,\n    i18n,\n    locale,\n    nestingLevel,\n    req,\n    versionValue: valueTo,\n  } = args\n\n  const converters: HTMLConvertersFunctionAsync = ({ defaultConverters }) => ({\n    ...defaultConverters,\n    ...LinkDiffHTMLConverterAsync({}),\n    ...ListItemDiffHTMLConverterAsync,\n    ...UploadDiffHTMLConverterAsync({ i18n, req }),\n    ...RelationshipDiffHTMLConverterAsync({ i18n, req }),\n    ...UnknownDiffHTMLConverterAsync({ i18n, req }),\n  })\n\n  const payloadPopulateFn = await getPayloadPopulateFn({\n    currentDepth: 0,\n    depth: 1,\n    req,\n  })\n  const fromHTML = await convertLexicalToHTMLAsync({\n    converters,\n    data: valueFrom as SerializedEditorState,\n    disableContainer: true,\n    populate: payloadPopulateFn,\n  })\n\n  const toHTML = await convertLexicalToHTMLAsync({\n    converters,\n    data: valueTo as SerializedEditorState,\n    disableContainer: true,\n    populate: payloadPopulateFn,\n  })\n\n  const { From, To } = getHTMLDiffComponents({\n    // Ensure empty paragraph is displayed for empty rich text fields - otherwise, toHTML may be displayed in the wrong column\n    fromHTML: fromHTML?.length ? fromHTML : '<p></p>',\n    toHTML: toHTML?.length ? toHTML : '<p></p>',\n  })\n\n  return (\n    <FieldDiffContainer\n      className={baseClass}\n      From={From}\n      i18n={i18n}\n      label={{\n        label: field.label,\n        locale,\n      }}\n      nestingLevel={nestingLevel}\n      To={To}\n    />\n  )\n}\n"],"names":["FieldDiffContainer","getHTMLDiffComponents","React","convertLexicalToHTMLAsync","getPayloadPopulateFn","LinkDiffHTMLConverterAsync","ListItemDiffHTMLConverterAsync","RelationshipDiffHTMLConverterAsync","UnknownDiffHTMLConverterAsync","UploadDiffHTMLConverterAsync","baseClass","LexicalDiffComponent","args","comparisonValue","valueFrom","field","i18n","locale","nestingLevel","req","versionValue","valueTo","converters","defaultConverters","payloadPopulateFn","currentDepth","depth","fromHTML","data","disableContainer","populate","toHTML","From","To","length","className","label"],"mappings":";AAGA,SAASA,kBAAkB,EAAEC,qBAAqB,QAAQ,qBAAoB;AAE9E,OAAO,eAAc;AACrB,OAAO,iBAAgB;AAEvB,OAAOC,WAAW,QAAO;AAIzB,SAASC,yBAAyB,QAAQ,yDAAwD;AAClG,SAASC,oBAAoB,QAAQ,2DAA0D;AAC/F,SAASC,0BAA0B,QAAQ,uBAAsB;AACjE,SAASC,8BAA8B,QAAQ,iCAAgC;AAC/E,SAASC,kCAAkC,QAAQ,qCAAoC;AACvF,SAASC,6BAA6B,QAAQ,gCAA+B;AAC7E,SAASC,4BAA4B,QAAQ,+BAA8B;AAE3E,MAAMC,YAAY;AAElB,OAAO,MAAMC,uBAAyD,OAAOC;IAC3E,MAAM,EACJC,iBAAiBC,SAAS,EAC1BC,KAAK,EACLC,IAAI,EACJC,MAAM,EACNC,YAAY,EACZC,GAAG,EACHC,cAAcC,OAAO,EACtB,GAAGT;IAEJ,MAAMU,aAA0C,CAAC,EAAEC,iBAAiB,EAAE,GAAM,CAAA;YAC1E,GAAGA,iBAAiB;YACpB,GAAGlB,2BAA2B,CAAC,EAAE;YACjC,GAAGC,8BAA8B;YACjC,GAAGG,6BAA6B;gBAAEO;gBAAMG;YAAI,EAAE;YAC9C,GAAGZ,mCAAmC;gBAAES;gBAAMG;YAAI,EAAE;YACpD,GAAGX,8BAA8B;gBAAEQ;gBAAMG;YAAI,EAAE;QACjD,CAAA;IAEA,MAAMK,oBAAoB,MAAMpB,qBAAqB;QACnDqB,cAAc;QACdC,OAAO;QACPP;IACF;IACA,MAAMQ,WAAW,MAAMxB,0BAA0B;QAC/CmB;QACAM,MAAMd;QACNe,kBAAkB;QAClBC,UAAUN;IACZ;IAEA,MAAMO,SAAS,MAAM5B,0BAA0B;QAC7CmB;QACAM,MAAMP;QACNQ,kBAAkB;QAClBC,UAAUN;IACZ;IAEA,MAAM,EAAEQ,IAAI,EAAEC,EAAE,EAAE,GAAGhC,sBAAsB;QACzC,0HAA0H;QAC1H0B,UAAUA,UAAUO,SAASP,WAAW;QACxCI,QAAQA,QAAQG,SAASH,SAAS;IACpC;IAEA,qBACE,QAAC/B;QACCmC,WAAWzB;QACXsB,MAAMA;QACNhB,MAAMA;QACNoB,OAAO;YACLA,OAAOrB,MAAMqB,KAAK;YAClBnB;QACF;QACAC,cAAcA;QACde,IAAIA;;;;;;AAGV,EAAC"}