@payloadcms/richtext-lexical 4.0.0-internal.38b7f1d → 4.0.0-internal.5f0cd13

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import './index.css';
-import { formatAdminURL } from 'payload/shared';
 const baseClass = 'lexical-relationship-diff';
 export const RelationshipDiffHTMLConverterAsync = ({
   i18n,
@@ -29,37 +28,20 @@ export const RelationshipDiffHTMLConverterAsync = ({
       }
       const relatedCollection = req.payload.collections[node.relationTo]?.config;
       const ReactDOMServer = (await import('react-dom/server')).default;
-      const JSX = /*#__PURE__*/_jsx("div", {
+      const JSX = /*#__PURE__*/_jsxs("div", {
         className: `${baseClass}${providedCSSString}`,
         "data-enable-match": "true",
         "data-id": id,
         "data-slug": node.relationTo,
-        children: /*#__PURE__*/_jsxs("div", {
-          className: `${baseClass}__card`,
-          children: [/*#__PURE__*/_jsx("div", {
-            className: `${baseClass}__collectionLabel`,
-            children: i18n.t('fields:labelRelationship', {
-              label: relatedCollection?.labels?.singular ? getTranslation(relatedCollection?.labels?.singular, i18n) : relatedCollection?.slug
-            })
-          }), data && relatedCollection?.admin?.useAsTitle && data[relatedCollection.admin.useAsTitle] ? /*#__PURE__*/_jsx("strong", {
-            className: `${baseClass}__title`,
-            "data-enable-match": "false",
-            children: /*#__PURE__*/_jsx("a", {
-              className: `${baseClass}__link`,
-              "data-enable-match": "false",
-              href: formatAdminURL({
-                adminRoute: req.payload.config.routes.admin,
-                path: `/collections/${relatedCollection?.slug}/${data.id}`,
-                serverURL: req.payload.config.serverURL
-              }),
-              rel: "noopener noreferrer",
-              target: "_blank",
-              children: data[relatedCollection.admin.useAsTitle]
-            })
-          }) : /*#__PURE__*/_jsx("strong", {
-            children: id
-          })]
-        })
+        children: [relatedCollection?.labels?.singular && /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__pill`,
+          "data-enable-match": "false",
+          children: getTranslation(relatedCollection.labels.singular, i18n)
+        }), /*#__PURE__*/_jsx("strong", {
+          className: `${baseClass}__info`,
+          "data-enable-match": "false",
+          children: data && relatedCollection?.admin?.useAsTitle && data[relatedCollection.admin.useAsTitle] ? data[relatedCollection.admin.useAsTitle] : id
+        })]
       });
       // Render to HTML
       const html = ReactDOMServer.renderToStaticMarkup(JSX);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","formatAdminURL","baseClass","RelationshipDiffHTMLConverterAsync","i18n","req","relationship","node","populate","providedCSSString","data","undefined","id","value","collectionSlug","relationTo","relatedCollection","payload","collections","config","ReactDOMServer","default","JSX","_jsx","className","_jsxs","t","label","labels","singular","slug","admin","useAsTitle","href","adminRoute","routes","path","serverURL","rel","target","html","renderToStaticMarkup"],"sources":["../../../../../src/field/Diff/converters/relationship/index.tsx"],"sourcesContent":["import type { FileData, PayloadRequest, TypeWithID } from 'payload'\n\nimport { getTranslation, type I18nClient } from '@payloadcms/translations'\n\nimport './index.css'\n\nimport { formatAdminURL } from 'payload/shared'\n\nimport type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js'\nimport type { SerializedRelationshipNode } from '../../../../nodeTypes.js'\n\nconst baseClass = 'lexical-relationship-diff'\n\nexport const RelationshipDiffHTMLConverterAsync: (args: {\n  i18n: I18nClient\n  req: PayloadRequest\n}) => HTMLConvertersAsync<SerializedRelationshipNode> = ({ i18n, req }) => {\n  return {\n    relationship: async ({ node, populate, providedCSSString }) => {\n      let data: (Record<string, any> & TypeWithID) | undefined = undefined\n\n      const id = typeof node.value === 'object' ? node.value.id : node.value\n\n      // If there's no valid upload data, populate return an empty string\n      if (typeof node.value !== 'object') {\n        if (!populate) {\n          return ''\n        }\n        data = await populate<FileData & TypeWithID>({\n          id,\n          collectionSlug: node.relationTo,\n        })\n      } else {\n        data = node.value as unknown as FileData & TypeWithID\n      }\n\n      const relatedCollection = req.payload.collections[node.relationTo]?.config\n\n      const ReactDOMServer = (await import('react-dom/server')).default\n\n      const JSX = (\n        <div\n          className={`${baseClass}${providedCSSString}`}\n          data-enable-match=\"true\"\n          data-id={id}\n          data-slug={node.relationTo}\n        >\n          <div className={`${baseClass}__card`}>\n            <div className={`${baseClass}__collectionLabel`}>\n              {i18n.t('fields:labelRelationship', {\n                label: relatedCollection?.labels?.singular\n                  ? getTranslation(relatedCollection?.labels?.singular, i18n)\n                  : relatedCollection?.slug,\n              })}\n            </div>\n            {data &&\n            relatedCollection?.admin?.useAsTitle &&\n            data[relatedCollection.admin.useAsTitle] ? (\n              <strong className={`${baseClass}__title`} data-enable-match=\"false\">\n                <a\n                  className={`${baseClass}__link`}\n                  data-enable-match=\"false\"\n                  href={formatAdminURL({\n                    adminRoute: req.payload.config.routes.admin,\n                    path: `/collections/${relatedCollection?.slug}/${data.id}`,\n                    serverURL: req.payload.config.serverURL,\n                  })}\n                  rel=\"noopener noreferrer\"\n                  target=\"_blank\"\n                >\n                  {data[relatedCollection.admin.useAsTitle]}\n                </a>\n              </strong>\n            ) : (\n              <strong>{id as string}</strong>\n            )}\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":";AAEA,SAASA,cAAc,QAAyB;AAEhD,OAAO;AAEP,SAASC,cAAc,QAAQ;AAK/B,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,kCAAA,GAG2CA,CAAC;EAAEC,IAAI;EAAEC;AAAG,CAAE;EACpE,OAAO;IACLC,YAAA,EAAc,MAAAA,CAAO;MAAEC,IAAI;MAAEC,QAAQ;MAAEC;IAAiB,CAAE;MACxD,IAAIC,IAAA,GAAuDC,SAAA;MAE3D,MAAMC,EAAA,GAAK,OAAOL,IAAA,CAAKM,KAAK,KAAK,WAAWN,IAAA,CAAKM,KAAK,CAACD,EAAE,GAAGL,IAAA,CAAKM,KAAK;MAEtE;MACA,IAAI,OAAON,IAAA,CAAKM,KAAK,KAAK,UAAU;QAClC,IAAI,CAACL,QAAA,EAAU;UACb,OAAO;QACT;QACAE,IAAA,GAAO,MAAMF,QAAA,CAAgC;UAC3CI,EAAA;UACAE,cAAA,EAAgBP,IAAA,CAAKQ;QACvB;MACF,OAAO;QACLL,IAAA,GAAOH,IAAA,CAAKM,KAAK;MACnB;MAEA,MAAMG,iBAAA,GAAoBX,GAAA,CAAIY,OAAO,CAACC,WAAW,CAACX,IAAA,CAAKQ,UAAU,CAAC,EAAEI,MAAA;MAEpE,MAAMC,cAAA,GAAiB,CAAC,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;MAEjE,MAAMC,GAAA,gBACJC,IAAA,CAAC;QACCC,SAAA,EAAW,GAAGtB,SAAA,GAAYO,iBAAA,EAAmB;QAC7C,qBAAkB;QAClB,WAASG,EAAA;QACT,aAAWL,IAAA,CAAKQ,UAAU;kBAE1B,aAAAU,KAAA,CAAC;UAAID,SAAA,EAAW,GAAGtB,SAAA,QAAiB;kCAClCqB,IAAA,CAAC;YAAIC,SAAA,EAAW,GAAGtB,SAAA,mBAA4B;sBAC5CE,IAAA,CAAKsB,CAAC,CAAC,4BAA4B;cAClCC,KAAA,EAAOX,iBAAA,EAAmBY,MAAA,EAAQC,QAAA,GAC9B7B,cAAA,CAAegB,iBAAA,EAAmBY,MAAA,EAAQC,QAAA,EAAUzB,IAAA,IACpDY,iBAAA,EAAmBc;YACzB;cAEDpB,IAAA,IACDM,iBAAA,EAAmBe,KAAA,EAAOC,UAAA,IAC1BtB,IAAI,CAACM,iBAAA,CAAkBe,KAAK,CAACC,UAAU,CAAC,gBACtCT,IAAA,CAAC;YAAOC,SAAA,EAAW,GAAGtB,SAAA,SAAkB;YAAE,qBAAkB;sBAC1D,aAAAqB,IAAA,CAAC;cACCC,SAAA,EAAW,GAAGtB,SAAA,QAAiB;cAC/B,qBAAkB;cAClB+B,IAAA,EAAMhC,cAAA,CAAe;gBACnBiC,UAAA,EAAY7B,GAAA,CAAIY,OAAO,CAACE,MAAM,CAACgB,MAAM,CAACJ,KAAK;gBAC3CK,IAAA,EAAM,gBAAgBpB,iBAAA,EAAmBc,IAAA,IAAQpB,IAAA,CAAKE,EAAE,EAAE;gBAC1DyB,SAAA,EAAWhC,GAAA,CAAIY,OAAO,CAACE,MAAM,CAACkB;cAChC;cACAC,GAAA,EAAI;cACJC,MAAA,EAAO;wBAEN7B,IAAI,CAACM,iBAAA,CAAkBe,KAAK,CAACC,UAAU;;4BAI5CT,IAAA,CAAC;sBAAQX;;;;MAMjB;MACA,MAAM4B,IAAA,GAAOpB,cAAA,CAAeqB,oBAAoB,CAACnB,GAAA;MAEjD,OAAOkB,IAAA;IACT;EACF;AACF","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","baseClass","RelationshipDiffHTMLConverterAsync","i18n","req","relationship","node","populate","providedCSSString","data","undefined","id","value","collectionSlug","relationTo","relatedCollection","payload","collections","config","ReactDOMServer","default","JSX","_jsxs","className","labels","singular","_jsx","admin","useAsTitle","html","renderToStaticMarkup"],"sources":["../../../../../src/field/Diff/converters/relationship/index.tsx"],"sourcesContent":["import type { FileData, PayloadRequest, TypeWithID } from 'payload'\n\nimport { getTranslation, type I18nClient } from '@payloadcms/translations'\n\nimport './index.css'\n\nimport type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js'\nimport type { SerializedRelationshipNode } from '../../../../types/nodeTypes.js'\n\nconst baseClass = 'lexical-relationship-diff'\n\nexport const RelationshipDiffHTMLConverterAsync: (args: {\n  i18n: I18nClient\n  req: PayloadRequest\n}) => HTMLConvertersAsync<SerializedRelationshipNode> = ({ i18n, req }) => {\n  return {\n    relationship: async ({ node, populate, providedCSSString }) => {\n      let data: (Record<string, any> & TypeWithID) | undefined = undefined\n\n      const id = typeof node.value === 'object' ? node.value.id : node.value\n\n      // If there's no valid upload data, populate return an empty string\n      if (typeof node.value !== 'object') {\n        if (!populate) {\n          return ''\n        }\n        data = await populate<FileData & TypeWithID>({\n          id,\n          collectionSlug: node.relationTo,\n        })\n      } else {\n        data = node.value as unknown as FileData & TypeWithID\n      }\n\n      const relatedCollection = req.payload.collections[node.relationTo]?.config\n\n      const ReactDOMServer = (await import('react-dom/server')).default\n\n      const JSX = (\n        <div\n          className={`${baseClass}${providedCSSString}`}\n          data-enable-match=\"true\"\n          data-id={id}\n          data-slug={node.relationTo}\n        >\n          {relatedCollection?.labels?.singular && (\n            <span className={`${baseClass}__pill`} data-enable-match=\"false\">\n              {getTranslation(relatedCollection.labels.singular, i18n)}\n            </span>\n          )}\n          <strong className={`${baseClass}__info`} data-enable-match=\"false\">\n            {data &&\n            relatedCollection?.admin?.useAsTitle &&\n            data[relatedCollection.admin.useAsTitle]\n              ? data[relatedCollection.admin.useAsTitle]\n              : (id as string)}\n          </strong>\n        </div>\n      )\n\n      // Render to HTML\n      const html = ReactDOMServer.renderToStaticMarkup(JSX)\n\n      return html\n    },\n  }\n}\n"],"mappings":";AAEA,SAASA,cAAc,QAAyB;AAEhD,OAAO;AAKP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,kCAAA,GAG2CA,CAAC;EAAEC,IAAI;EAAEC;AAAG,CAAE;EACpE,OAAO;IACLC,YAAA,EAAc,MAAAA,CAAO;MAAEC,IAAI;MAAEC,QAAQ;MAAEC;IAAiB,CAAE;MACxD,IAAIC,IAAA,GAAuDC,SAAA;MAE3D,MAAMC,EAAA,GAAK,OAAOL,IAAA,CAAKM,KAAK,KAAK,WAAWN,IAAA,CAAKM,KAAK,CAACD,EAAE,GAAGL,IAAA,CAAKM,KAAK;MAEtE;MACA,IAAI,OAAON,IAAA,CAAKM,KAAK,KAAK,UAAU;QAClC,IAAI,CAACL,QAAA,EAAU;UACb,OAAO;QACT;QACAE,IAAA,GAAO,MAAMF,QAAA,CAAgC;UAC3CI,EAAA;UACAE,cAAA,EAAgBP,IAAA,CAAKQ;QACvB;MACF,OAAO;QACLL,IAAA,GAAOH,IAAA,CAAKM,KAAK;MACnB;MAEA,MAAMG,iBAAA,GAAoBX,GAAA,CAAIY,OAAO,CAACC,WAAW,CAACX,IAAA,CAAKQ,UAAU,CAAC,EAAEI,MAAA;MAEpE,MAAMC,cAAA,GAAiB,CAAC,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;MAEjE,MAAMC,GAAA,gBACJC,KAAA,CAAC;QACCC,SAAA,EAAW,GAAGtB,SAAA,GAAYO,iBAAA,EAAmB;QAC7C,qBAAkB;QAClB,WAASG,EAAA;QACT,aAAWL,IAAA,CAAKQ,UAAU;mBAEzBC,iBAAA,EAAmBS,MAAA,EAAQC,QAAA,iBAC1BC,IAAA,CAAC;UAAKH,SAAA,EAAW,GAAGtB,SAAA,QAAiB;UAAE,qBAAkB;oBACtDD,cAAA,CAAee,iBAAA,CAAkBS,MAAM,CAACC,QAAQ,EAAEtB,IAAA;yBAGvDuB,IAAA,CAAC;UAAOH,SAAA,EAAW,GAAGtB,SAAA,QAAiB;UAAE,qBAAkB;oBACxDQ,IAAA,IACDM,iBAAA,EAAmBY,KAAA,EAAOC,UAAA,IAC1BnB,IAAI,CAACM,iBAAA,CAAkBY,KAAK,CAACC,UAAU,CAAC,GACpCnB,IAAI,CAACM,iBAAA,CAAkBY,KAAK,CAACC,UAAU,CAAC,GACvCjB;;;MAKX;MACA,MAAMkB,IAAA,GAAOV,cAAA,CAAeW,oBAAoB,CAACT,GAAA;MAEjD,OAAOQ,IAAA;IACT;EACF;AACF","ignoreList":[]}

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;
+      }
     }
   }
 }