@payloadcms/richtext-lexical 4.0.0-internal.38b7f1d → 4.0.0-internal.40de3ec

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.css'\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":";AAKA,OAAO;AAEP,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,"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.css'\n\nimport { createHash } from 'crypto'\n\nimport type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js'\nimport type { SerializedBlockNode } from '../../../../types/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":";AAKA,OAAO;AAEP,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":[]}

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

@@ -1,83 +1,98 @@
 @layer payload-default {
   .lexical-diff {
     .lexical-upload-diff {
-      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
-      min-width: calc(var(--spacer-5) * 6.25);
+      min-width: 100%;
       max-width: fit-content;
       display: flex;
       align-items: center;
       background-color: var(--color-bg);
       border-radius: var(--radius-medium);
-      border: var(--stroke-width-small) solid var(--color-border);
+      outline: var(--stroke-width-small) solid var(--color-border);
+      outline-offset: calc(var(--stroke-width-small) * -1);
       position: relative;
-      font-family: var(--font-body);
-      margin-block: calc(var(--spacer-1) * 2.5);
-      max-height: calc(var(--spacer-4) * 2.5);
-      padding: var(--spacer-2-5);
+      z-index: 2;
+      font-family: var(--text-body-medium-font-family);
+      padding: var(--spacer-2);
 
       &[data-match-type='create'] {
-        border-color: var(--diff-create-pill-border);
+        background-color: var(--diff-create-parent-bg);
+        outline-color: var(--diff-create-pill-border);
         color: var(--diff-create-parent-color);
 
-        * {
-          color: var(--diff-create-parent-color);
+        .lexical-upload-diff__thumbnail {
+          background-color: var(--diff-create-pill-bg);
         }
 
-        .lexical-upload-diff__meta {
-          color: var(--diff-create-link-color);
-          * {
-            color: var(--diff-create-link-color);
-          }
+        .lexical-upload-diff__info {
+          color: var(--diff-create-parent-color);
         }
 
-        .lexical-upload-diff__thumbnail {
-          border-radius: 0;
-          border-color: var(--diff-create-pill-border);
-          background-color: none;
+        .lexical-upload-diff__meta {
+          color: var(--diff-create-parent-color);
         }
       }
 
       &[data-match-type='delete'] {
-        border-color: var(--diff-delete-pill-border);
         text-decoration-line: none;
+        background-color: var(--diff-delete-parent-bg);
+        outline-color: var(--diff-delete-pill-border);
         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);
-          }
+        .lexical-upload-diff__thumbnail {
+          background-color: var(--diff-delete-pill-bg);
         }
 
-        * {
-          text-decoration-line: none;
+        .lexical-upload-diff__info {
           color: var(--diff-delete-parent-color);
+
+          strong {
+            text-decoration-line: line-through;
+            text-decoration-color: var(--diff-delete-parent-color);
+          }
         }
 
-        .lexical-upload-diff__thumbnail {
-          border-radius: 0;
-          border-color: var(--diff-delete-pill-border);
-          background-color: none;
+        .lexical-upload-diff__meta {
+          text-decoration-line: line-through;
+          text-decoration-color: var(--diff-delete-parent-color);
+          color: var(--diff-delete-parent-color);
         }
       }
     }
 
+    /* Override HTMLDiff generic [data-match-type] styles - specificity must beat 0,4,1 from HTMLDiff */
+    .lexical-upload-diff.lexical-upload-diff[data-enable-match='true'][data-match-type='create'],
+    .lexical-upload-diff.lexical-upload-diff[data-enable-match='true'][data-match-type='delete'] {
+      border-radius: var(--radius-medium);
+      padding: var(--spacer-2);
+      text-decoration-line: none;
+    }
+
+    .lexical-upload-diff.lexical-upload-diff[data-enable-match='true'][data-match-type='create'] {
+      background-color: var(--diff-create-parent-bg);
+      color: var(--diff-create-parent-color);
+    }
+
+    .lexical-upload-diff.lexical-upload-diff[data-enable-match='true'][data-match-type='delete'] {
+      background-color: var(--diff-delete-parent-bg);
+      color: var(--diff-delete-parent-color);
+    }
+
     .lexical-upload-diff__card {
       display: flex;
       flex-direction: row;
       align-items: center;
       width: 100%;
+      gap: var(--spacer-2-5);
     }
 
     .lexical-upload-diff__thumbnail {
-      width: calc(var(--spacer-4) * 1.5);
-      height: calc(var(--spacer-4) * 1.5);
+      width: var(--spacer-6);
+      height: var(--spacer-6);
       position: relative;
       overflow: hidden;
       flex-shrink: 0;
-      border-radius: 0;
-      border: var(--stroke-width-small) solid var(--color-border);
+      border-radius: var(--radius-medium);
+      background-color: var(--color-bg-secondary);
 
       img,
       svg {
@@ -85,28 +100,76 @@
         object-fit: cover;
         width: 100%;
         height: 100%;
-        border-radius: 0;
       }
     }
 
     .lexical-upload-diff__info {
-      flex-grow: 1;
+      flex: 1 0 0;
       display: flex;
-      align-items: flex-start;
       flex-direction: column;
-      padding: calc(var(--spacer-1) * 1.25) calc(var(--spacer-2-5) * 1.25);
-      justify-content: space-between;
-      font-weight: 400;
+      justify-content: center;
+      gap: var(--spacer-1);
+      font-size: var(--text-body-medium-font-size);
+      line-height: var(--text-body-medium-line-height);
+      overflow: hidden;
+      min-width: var(--stroke-width-small);
 
       strong {
         font-weight: 600;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
 
     .lexical-upload-diff__meta {
+      font-size: var(--text-body-medium-font-size);
+      color: var(--color-text-secondary);
+      white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      white-space: nowrap;
+    }
+
+    /* Style uploads based on ancestor data-match-type (e.g. from diff wrappers) */
+    [data-match-type='create'] .lexical-upload-diff__info {
+      color: var(--diff-create-parent-color);
+    }
+
+    [data-match-type='create'] .lexical-upload-diff__meta.lexical-upload-diff__meta {
+      color: var(--diff-create-parent-color);
+    }
+
+    [data-match-type='create'] .lexical-upload-diff__thumbnail {
+      background-color: var(--diff-create-pill-bg);
+    }
+
+    [data-match-type='create'] .lexical-upload-diff {
+      background-color: var(--diff-create-parent-bg);
+      outline-color: var(--diff-create-pill-border);
+    }
+
+    [data-match-type='delete'] .lexical-upload-diff__info {
+      color: var(--diff-delete-parent-color);
+
+      strong {
+        text-decoration-line: line-through;
+        text-decoration-color: var(--diff-delete-parent-color);
+      }
+    }
+
+    [data-match-type='delete'] .lexical-upload-diff__meta.lexical-upload-diff__meta {
+      text-decoration-line: line-through;
+      text-decoration-color: var(--diff-delete-parent-color);
+      color: var(--diff-delete-parent-color);
+    }
+
+    [data-match-type='delete'] .lexical-upload-diff__thumbnail {
+      background-color: var(--diff-delete-pill-bg);
+    }
+
+    [data-match-type='delete'] .lexical-upload-diff {
+      background-color: var(--diff-delete-parent-bg);
+      outline-color: var(--diff-delete-pill-border);
     }
   }
 }

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

@@ -2,7 +2,7 @@ import type { PayloadRequest } from 'payload';
 import { type I18nClient } from '@payloadcms/translations';
 import './index.css';
 import type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js';
-import type { SerializedUploadNode } from '../../../../nodeTypes.js';
+import type { SerializedUploadNode } from '../../../../types/nodeTypes.js';
 export declare const UploadDiffHTMLConverterAsync: (args: {
     i18n: I18nClient;
     req: PayloadRequest;

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,aAAa,CAAA;AAKpB,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"}
+{"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,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8DAA8D,CAAA;AAEvG,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAA;AAI1E,eAAO,MAAM,4BAA4B,EAAE,CAAC,IAAI,EAAE;IAChD,IAAI,EAAE,UAAU,CAAA;IAChB,GAAG,EAAE,cAAc,CAAA;CACpB,KAAK,mBAAmB,CAAC,oBAAoB,CAkF7C,CAAA"}

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

@@ -5,7 +5,10 @@ import './index.css';
 import { formatFilesize } from 'payload/shared';
 import React from 'react';
 const baseClass = 'lexical-upload-diff';
-export const UploadDiffHTMLConverterAsync = () => {
+export const UploadDiffHTMLConverterAsync = ({
+  i18n,
+  req
+}) => {
   return {
     upload: async ({
       node,
@@ -34,6 +37,7 @@ export const UploadDiffHTMLConverterAsync = () => {
       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 filename = uploadDoc?.filename || `${i18n.t('general:untitled')} - ID: ${typeof uploadNode.value === 'object' ? uploadNode.value : uploadNode.value}`;
       const JSX = /*#__PURE__*/_jsx("div", {
         className: `${baseClass}${providedCSSString}`,
         "data-enable-match": "true",
@@ -54,7 +58,7 @@ export const UploadDiffHTMLConverterAsync = () => {
             className: `${baseClass}__info`,
             "data-enable-match": "false",
             children: [/*#__PURE__*/_jsx("strong", {
-              children: uploadDoc?.filename
+              children: filename
             }), /*#__PURE__*/_jsxs("div", {
               className: `${baseClass}__meta`,
               children: [formatFilesize(uploadDoc?.filesize), typeof uploadDoc?.width === 'number' && typeof uploadDoc?.height === 'number' && /*#__PURE__*/_jsxs(React.Fragment, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","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","_jsx","className","filename","_jsxs","length","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.css'\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"],"mappings":";AAGA,SAASA,IAAI,QAAQ;AACrB,SAASC,UAAU,QAAQ;AAE3B,OAAO;AAEP,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAMlB,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,4BAAA,GAGqCA,CAAA;EAChD,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,GAAA,GAAMV,IAAC,CAAKW,MAAM,EAAED,GAAA,IAAmBN,SAAA,EAAgCM,GAAA,IAAO;MAEpF,MAAME,YAAA,GACJ,cAAC,IAAkBR,SAAA,IAAcA,SAAA,EAAWS,YAAA,IAA4BT,SAAA,EAAWU,GAAA,IAAO;MAE5F,MAAMC,cAAA,GAAiB,CAAC,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;MAEjE;MACA,MAAMC,cAAA,GAAiBvB,UAAA,CAAW,UAC/BwB,MAAM,CAACC,IAAA,CAAKC,SAAS,CAACpB,IAAA,CAAKW,MAAM,IAAI,CAAC,IACtCU,MAAM,CAAC;MAEV,MAAMC,GAAA,gBACJC,IAAA,CAAC;QACCC,SAAA,EAAW,GAAG3B,SAAA,GAAYK,iBAAA,EAAmB;QAC7C,qBAAkB;QAClB,oBAAkB,GAAGe,cAAA,EAAgB;QACrC,iBAAeb,SAAA,EAAWqB,QAAA;QAC1B,0BAAwBtB,UAAA,CAAWG,KAAK;QACxC,mCAAiCH,UAAA,CAAWM,UAAU;QACtD,YAAUG,YAAA;kBAEV,aAAAc,KAAA,CAAC;UAAIF,SAAA,EAAW,GAAG3B,SAAA,QAAiB;kCAClC0B,IAAA,CAAC;YAAIC,SAAA,EAAW,GAAG3B,SAAA,aAAsB;sBACtCe,YAAA,EAAce,MAAA,gBAASJ,IAAA,CAAC;cAAIb,GAAA,EAAKA,GAAA;cAAKkB,GAAA,EAAKhB;8BAAmBW,IAAA,CAAC9B,IAAA;2BAElEiC,KAAA,CAAC;YAAIF,SAAA,EAAW,GAAG3B,SAAA,QAAiB;YAAE,qBAAkB;oCACtD0B,IAAA,CAAC;wBAAQnB,SAAA,EAAWqB;6BACpBC,KAAA,CAAC;cAAIF,SAAA,EAAW,GAAG3B,SAAA,QAAiB;yBACjCF,cAAA,CAAeS,SAAA,EAAWyB,QAAA,GAC1B,OAAOzB,SAAA,EAAW0B,KAAA,KAAU,YAAY,OAAO1B,SAAA,EAAW2B,MAAA,KAAW,yBACpEL,KAAA,CAAC9B,KAAA,CAAMoC,QAAQ;2BAAC,OAEb5B,SAAA,EAAW0B,KAAA,EAAM,KAAE1B,SAAA,EAAW2B,MAAA;kBAGlC3B,SAAA,EAAW6B,QAAA,iBACVP,KAAA,CAAC9B,KAAA,CAAMoC,QAAQ;2BAAC,OAEb5B,SAAA,EAAW6B,QAAA;;;;;;MAS1B;MACA,MAAMC,IAAA,GAAOnB,cAAA,CAAeoB,oBAAoB,CAACb,GAAA;MAEjD,OAAOY,IAAA;IACT;EACF;AACF","ignoreList":[]}
+{"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","alt","fields","thumbnailSRC","thumbnailURL","url","ReactDOMServer","default","nodeFieldsHash","update","JSON","stringify","digest","filename","t","JSX","_jsx","className","_jsxs","length","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.css'\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/schema.js'\nimport type { SerializedUploadNode } from '../../../../types/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 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 filename =\n        uploadDoc?.filename ||\n        `${i18n.t('general:untitled')} - ID: ${typeof uploadNode.value === 'object' ? uploadNode.value : uploadNode.value}`\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>{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":"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","ignoreList":[]}

package/dist/field/Diff/index.css

@@ -1,101 +1,156 @@
 @layer payload-default {
   .lexical-diff .field-diff-content {
     .html-diff {
-      font-family: var(--font-serif);
+      font-family: var(--text-body-large-font-family);
       font-size: var(--text-body-large-font-size);
+      font-weight: var(--text-body-large-font-weight);
       line-height: var(--text-body-large-line-height);
-      letter-spacing: 0.02em;
+      letter-spacing: -0.0325px;
     }
 
     blockquote {
       font-size: var(--text-body-large-font-size);
-      line-height: var(--text-body-large-line-height);
-      margin-block: var(--spacer-3);
-      margin-inline: 0;
+      line-height: 1.5;
+      letter-spacing: normal;
+      margin-inline: var(--spacer-1);
       padding-inline-start: var(--spacer-2-5);
       padding-block: var(--spacer-1);
       position: relative;
+      border-inline-start: var(--stroke-width-medium) solid currentColor;
+    }
 
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        inset-inline-start: 0;
-        width: var(--spacer-1);
-        background-color: var(--color-bg-secondary);
-      }
-
-      &:has([data-match-type='create'])::after {
-        background-color: var(--color-bg-success-tertiary);
-      }
+    .html-diff:has([data-match-type='create']) blockquote {
+      color: var(--diff-create-pill-color);
+    }
 
-      &:has([data-match-type='delete'])::after {
-        background-color: var(--color-bg-danger-tertiary);
-      }
+    .html-diff:has([data-match-type='delete']) blockquote {
+      color: var(--diff-delete-pill-color);
     }
 
     a {
-      border-bottom: var(--stroke-width-small) dotted;
-      text-decoration: none;
+      color: var(--color-text-brand);
+      text-decoration: underline;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-weight: 550;
+      line-height: 1.2;
     }
 
     h1 {
-      padding: calc(var(--spacer-2) * 1.75) 0px calc(var(--spacer-2) * 1.375);
-      line-height: var(--text-heading-large-line-height);
-      font-weight: 600;
-      font-size: var(--text-heading-large-font-size);
-      font-family: var(--font-body);
+      font-size: 2rem;
+      letter-spacing: -0.544px;
     }
     h2 {
-      padding: calc(var(--spacer-2) * 1.75) 0px calc(var(--spacer-1) * 2.5);
-      line-height: var(--text-heading-medium-line-height);
-      font-weight: 600;
-      font-size: var(--text-heading-medium-font-size);
-      font-family: var(--font-body);
+      font-size: 1.5rem;
+      line-height: 2rem;
+      letter-spacing: var(--text-heading-large-letter-spacing);
     }
     h3 {
-      padding: var(--spacer-2-5) 0px calc(var(--spacer-1) * 2.25);
-      line-height: var(--text-heading-small-line-height);
-      font-weight: 600;
-      font-size: var(--text-heading-small-font-size);
-      font-family: var(--font-body);
+      font-size: 1.25rem;
+      letter-spacing: -0.34px;
     }
     h4 {
-      padding: var(--spacer-2) 0px calc(var(--spacer-1) * 1.75);
-      line-height: var(--text-body-large-line-height);
-      font-weight: 600;
-      font-size: var(--text-body-large-font-size);
-      font-family: var(--font-body);
+      font-size: 1rem;
+      letter-spacing: -0.272px;
     }
     h5 {
-      padding: calc(var(--spacer-1) * 1.5) 0px calc(var(--spacer-1) * 1.5);
-      line-height: var(--text-body-medium-line-height);
-      font-weight: 600;
-      font-size: var(--text-body-medium-font-size);
-      font-family: var(--font-body);
+      font-size: 0.8125rem;
+      letter-spacing: -0.221px;
     }
-
     h6 {
-      padding: calc(var(--spacer-2) * 1.375) 0px calc(var(--spacer-1) * 1.25);
-      line-height: var(--text-body-small-line-height);
-      font-weight: 600;
-      font-size: var(--text-body-small-font-size);
-      font-family: var(--font-body);
+      font-size: 0.6875rem;
+      letter-spacing: -0.187px;
+    }
+
+    > .html-diff > :first-child {
+      margin-top: 0;
+    }
+
+    > .html-diff > :last-child {
+      margin-bottom: 0;
     }
 
     p {
-      padding: var(--spacer-2) 0 var(--spacer-2);
+      margin: 0;
+    }
 
-      &:first-child {
-        padding: 0 0 var(--spacer-2);
-      }
+    code {
+      border: var(--stroke-width-small) solid var(--color-border);
+      color: var(--color-text);
+      padding: var(--spacer-1);
+      font-family: 'SF Mono', Menlo, Consolas, Monaco, monospace;
+      font-size: var(--text-body-medium-font-size);
+      font-weight: var(--text-body-medium-font-weight);
+      border-radius: var(--radius-small);
+      box-decoration-break: clone;
+      -webkit-box-decoration-break: clone;
+    }
+
+    hr {
+      margin: 0;
+      border: none;
+      border-top: var(--stroke-width-small) solid currentColor;
+    }
+
+    .html-diff:has([data-match-type='create']) hr {
+      color: var(--diff-create-pill-color);
+    }
+
+    .html-diff:has([data-match-type='delete']) hr {
+      color: var(--diff-delete-pill-color);
+    }
+
+    ul {
+      list-style: disc;
+      padding: 0;
+      margin: 0;
     }
 
-    ul,
     ol {
-      padding-top: var(--spacer-2);
-      padding-bottom: var(--spacer-2);
+      list-style: decimal;
+      padding: 0;
+      margin: 0;
+    }
+
+    li {
+      font-family: var(--text-body-large-font-family);
+      font-size: var(--text-body-large-font-size);
+      margin-block: 0 var(--spacer-1);
+      margin-inline-start: var(--spacer-4);
+      position: relative;
+      z-index: 0;
+
+      &:has(> [data-match-type='create'])::before,
+      &:has(> [data-match-type='delete'])::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        inset-inline-start: calc(var(--spacer-4) * -1);
+        border-radius: var(--radius-medium);
+        z-index: -1;
+      }
+
+      &:has(> [data-match-type='create'])::before {
+        background-color: var(--diff-create-pill-bg);
+      }
+
+      &:has(> [data-match-type='delete'])::before {
+        background-color: var(--diff-delete-pill-bg);
+      }
+
+      &.nestedListItem:last-child {
+        margin-block-end: 0;
+      }
+
+      &:last-child {
+        margin-block-end: 0;
+      }
     }
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["FieldDiffContainer","getHTMLDiffComponents","formatAdminURL","React","convertLexicalToHTMLAsync","getPayloadPopulateFn","LinkDiffHTMLConverterAsync","ListItemDiffHTMLConverterAsync","RelationshipDiffHTMLConverterAsync","UnknownDiffHTMLConverterAsync","UploadDiffHTMLConverterAsync","baseClass","LexicalDiffComponent","args","comparisonValue","valueFrom","field","i18n","locale","nestingLevel","req","versionValue","valueTo","internalDocToHref","linkNode","populate","fields","doc","relationTo","value","docId","id","collectionSlug","adminRoute","payload","config","routes","admin","path","serverURL","converters","defaultConverters","payloadPopulateFn","currentDepth","depth","fromHTML","data","disableContainer","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.css'\nimport '../bundled.css'\n\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\n\nimport type {\n  HTMLConvertersFunctionAsync,\n  HTMLPopulateFn,\n} from '../../features/converters/lexicalToHtml/async/types.js'\nimport type { SerializedLinkNode } from '../../nodeTypes.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 internalDocToHref = async ({\n    linkNode,\n    populate,\n  }: {\n    linkNode: SerializedLinkNode\n    populate?: HTMLPopulateFn\n  }) => {\n    if (!linkNode.fields.doc) {\n      return '#'\n    }\n\n    const { relationTo, value } = linkNode.fields.doc\n\n    let docId: number | string\n\n    if (typeof value === 'object' && value !== null) {\n      docId = value.id\n    } else if (populate && typeof value !== 'object') {\n      const doc = await populate({\n        id: value,\n        collectionSlug: relationTo,\n      })\n\n      if (!doc || !doc.id) {\n        return '#'\n      }\n\n      docId = doc.id\n    } else {\n      docId = value\n    }\n\n    return formatAdminURL({\n      adminRoute: req.payload.config.routes.admin,\n      path: `/collections/${relationTo}/${docId}`,\n      serverURL: req.payload.config.serverURL,\n    })\n  }\n\n  const converters: HTMLConvertersFunctionAsync = ({ defaultConverters }) => ({\n    ...defaultConverters,\n    ...LinkDiffHTMLConverterAsync({ internalDocToHref }),\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":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["FieldDiffContainer","getHTMLDiffComponents","formatAdminURL","React","convertLexicalToHTMLAsync","getPayloadPopulateFn","LinkDiffHTMLConverterAsync","ListItemDiffHTMLConverterAsync","RelationshipDiffHTMLConverterAsync","UnknownDiffHTMLConverterAsync","UploadDiffHTMLConverterAsync","baseClass","LexicalDiffComponent","args","comparisonValue","valueFrom","field","i18n","locale","nestingLevel","req","versionValue","valueTo","internalDocToHref","linkNode","populate","fields","doc","relationTo","value","docId","id","collectionSlug","adminRoute","payload","config","routes","admin","path","serverURL","converters","defaultConverters","payloadPopulateFn","currentDepth","depth","fromHTML","data","disableContainer","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.css'\nimport '../bundled.css'\n\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\n\nimport type {\n  HTMLConvertersFunctionAsync,\n  HTMLPopulateFn,\n} from '../../features/converters/lexicalToHtml/async/types.js'\nimport type { SerializedLinkNode } from '../../types/nodeTypes.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 internalDocToHref = async ({\n    linkNode,\n    populate,\n  }: {\n    linkNode: SerializedLinkNode\n    populate?: HTMLPopulateFn\n  }) => {\n    if (!linkNode.fields.doc) {\n      return '#'\n    }\n\n    const { relationTo, value } = linkNode.fields.doc\n\n    let docId: number | string\n\n    if (typeof value === 'object' && value !== null) {\n      docId = value.id\n    } else if (populate && typeof value !== 'object') {\n      const doc = await populate({\n        id: value,\n        collectionSlug: relationTo,\n      })\n\n      if (!doc || !doc.id) {\n        return '#'\n      }\n\n      docId = doc.id\n    } else {\n      docId = value\n    }\n\n    return formatAdminURL({\n      adminRoute: req.payload.config.routes.admin,\n      path: `/collections/${relationTo}/${docId}`,\n      serverURL: req.payload.config.serverURL,\n    })\n  }\n\n  const converters: HTMLConvertersFunctionAsync = ({ defaultConverters }) => ({\n    ...defaultConverters,\n    ...LinkDiffHTMLConverterAsync({ internalDocToHref }),\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;AAE1D,OAAO;AACP,OAAO;AAEP,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAQlB,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,iBAAA,GAAoB,MAAAA,CAAO;IAC/BC,QAAQ;IACRC;EAAQ,CAIT;IACC,IAAI,CAACD,QAAA,CAASE,MAAM,CAACC,GAAG,EAAE;MACxB,OAAO;IACT;IAEA,MAAM;MAAEC,UAAU;MAAEC;IAAK,CAAE,GAAGL,QAAA,CAASE,MAAM,CAACC,GAAG;IAEjD,IAAIG,KAAA;IAEJ,IAAI,OAAOD,KAAA,KAAU,YAAYA,KAAA,KAAU,MAAM;MAC/CC,KAAA,GAAQD,KAAA,CAAME,EAAE;IAClB,OAAO,IAAIN,QAAA,IAAY,OAAOI,KAAA,KAAU,UAAU;MAChD,MAAMF,GAAA,GAAM,MAAMF,QAAA,CAAS;QACzBM,EAAA,EAAIF,KAAA;QACJG,cAAA,EAAgBJ;MAClB;MAEA,IAAI,CAACD,GAAA,IAAO,CAACA,GAAA,CAAII,EAAE,EAAE;QACnB,OAAO;MACT;MAEAD,KAAA,GAAQH,GAAA,CAAII,EAAE;IAChB,OAAO;MACLD,KAAA,GAAQD,KAAA;IACV;IAEA,OAAO3B,cAAA,CAAe;MACpB+B,UAAA,EAAYb,GAAA,CAAIc,OAAO,CAACC,MAAM,CAACC,MAAM,CAACC,KAAK;MAC3CC,IAAA,EAAM,gBAAgBV,UAAA,IAAcE,KAAA,EAAO;MAC3CS,SAAA,EAAWnB,GAAA,CAAIc,OAAO,CAACC,MAAM,CAACI;IAChC;EACF;EAEA,MAAMC,UAAA,GAA0CA,CAAC;IAAEC;EAAiB,CAAE,MAAM;IAC1E,GAAGA,iBAAiB;IACpB,GAAGnC,0BAAA,CAA2B;MAAEiB;IAAkB,EAAE;IACpD,GAAGhB,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,MAAMsB,iBAAA,GAAoB,MAAMrC,oBAAA,CAAqB;IACnDsC,YAAA,EAAc;IACdC,KAAA,EAAO;IACPxB;EACF;EACA,MAAMyB,QAAA,GAAW,MAAMzC,yBAAA,CAA0B;IAC/CoC,UAAA;IACAM,IAAA,EAAM/B,SAAA;IACNgC,gBAAA,EAAkB;IAClBtB,QAAA,EAAUiB;EACZ;EAEA,MAAMM,MAAA,GAAS,MAAM5C,yBAAA,CAA0B;IAC7CoC,UAAA;IACAM,IAAA,EAAMxB,OAAA;IACNyB,gBAAA,EAAkB;IAClBtB,QAAA,EAAUiB;EACZ;EAEA,MAAM;IAAEO,IAAI;IAAEC;EAAE,CAAE,GAAGjD,qBAAA,CAAsB;IACzC;IACA4C,QAAA,EAAUA,QAAA,EAAUM,MAAA,GAASN,QAAA,GAAW;IACxCG,MAAA,EAAQA,MAAA,EAAQG,MAAA,GAASH,MAAA,GAAS;EACpC;EAEA,oBACEI,IAAA,CAACpD,kBAAA;IACCqD,SAAA,EAAW1C,SAAA;IACXsC,IAAA,EAAMA,IAAA;IACNhC,IAAA,EAAMA,IAAA;IACNqC,KAAA,EAAO;MACLA,KAAA,EAAOtC,KAAA,CAAMsC,KAAK;MAClBpC;IACF;IACAC,YAAA,EAAcA,YAAA;IACd+B,EAAA,EAAIA;;AAGV","ignoreList":[]}

package/dist/field/Field.d.ts

@@ -3,7 +3,7 @@ import type { SanitizedClientEditorConfig } from '../lexical/config/types.js';
 import '../lexical/theme/EditorTheme.css';
 import './bundled.css';
 import './index.css';
-import type { LexicalRichTextFieldProps } from '../types.js';
+import type { LexicalRichTextFieldProps } from '../types/index.js';
 declare const RichTextComponent: React.FC<{
     readonly editorConfig: SanitizedClientEditorConfig;
 } & LexicalRichTextFieldProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/field/Field.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAGxE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAA;AAE7E,OAAO,kCAAkC,CAAA;AACzC,OAAO,eAAe,CAAA;AACtB,OAAO,aAAa,CAAA;AAEpB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAA;AAS5D,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAC/B;IACE,QAAQ,CAAC,YAAY,EAAE,2BAA2B,CAAA;CACnD,GAAG,yBAAyB,CAuM9B,CAAA;AAaD,eAAO,MAAM,QAAQ,EAAE,OAAO,iBAAqC,CAAA"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/field/Field.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAGxE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAA;AAE7E,OAAO,kCAAkC,CAAA;AACzC,OAAO,eAAe,CAAA;AACtB,OAAO,aAAa,CAAA;AAEpB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAA;AASlE,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAC/B;IACE,QAAQ,CAAC,YAAY,EAAE,2BAA2B,CAAA;CACnD,GAAG,yBAAyB,CAuM9B,CAAA;AAWD,eAAO,MAAM,QAAQ,EAAE,OAAO,iBAAqC,CAAA"}

package/dist/field/Field.js

@@ -68,7 +68,7 @@ const RichTextComponent = props => {
       AfterInput,
       BeforeInput,
       Description,
-      Error,
+      Error: Error1,
       Label
     } = {},
     disabled: disabledFromField,
@@ -153,7 +153,7 @@ const RichTextComponent = props => {
     }), /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__wrap`,
       children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
-        CustomComponent: Error,
+        CustomComponent: Error1,
         Fallback: /*#__PURE__*/_jsx(FieldError, {
           path: path,
           showError: showError
@@ -190,7 +190,6 @@ const RichTextComponent = props => {
 function fallbackRender({
   error
 }) {
-  // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return /*#__PURE__*/_jsxs("div", {
     className: "errorBoundary",
     role: "alert",
@@ -200,7 +199,7 @@ function fallbackRender({
       style: {
         color: 'red'
       },
-      children: error.message
+      children: error instanceof Error ? error.message : String(error)
     })]
   });
 }