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

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

@@ -1,7 +1,7 @@
 @layer payload-default {
   .lexical-diff {
     ul.list-check {
-      padding-left: 0;
+      padding-inline-start: 0;
     }
 
     .checkboxItem {
@@ -16,7 +16,7 @@
     .checkboxItem__icon {
       width: var(--spacer-3);
       height: var(--spacer-3);
-      margin-right: var(--spacer-2);
+      margin-inline-end: var(--spacer-2);
       border: var(--stroke-width-small) solid var(--color-text);
       border-radius: var(--radius-medium);
       display: flex;
@@ -24,12 +24,10 @@
       justify-content: center;
       pointer-events: none;
 
-      .icon--check {
-        height: var(--spacer-2-5);
-      }
-
       &[data-match-type='create'] {
-        border-color: var(--diff-create-pill-color);
+        background-color: var(--color-bg-brand-tertiary);
+        border-color: var(--color-border-brand-strong);
+        color: var(--color-text-brand);
       }
 
       &[data-match-type='delete'] {
@@ -37,8 +35,46 @@
       }
     }
 
+    /* Override HTMLDiff generic [data-match-type] styles - specificity must beat 0,4,1 from HTMLDiff */
+    .checkboxItem__icon.checkboxItem__icon[data-enable-match='true'][data-match-type='create'],
+    .checkboxItem__icon.checkboxItem__icon[data-enable-match='true'][data-match-type='delete'] {
+      border-radius: var(--radius-medium);
+      padding: 0;
+    }
+
+    .checkboxItem__icon.checkboxItem__icon[data-enable-match='true'][data-match-type='create'] {
+      background-color: var(--color-bg-brand-tertiary);
+      color: var(--color-text-brand);
+    }
+
+    .checkboxItem__icon.checkboxItem__icon[data-enable-match='true'][data-match-type='delete'] {
+      background-color: transparent;
+      color: var(--diff-delete-pill-color);
+    }
+
     .checkboxItem--nested {
-      margin-left: var(--spacer-4);
+      margin-inline-start: var(--spacer-4);
+    }
+
+    /* Match editor's hierarchical ordered list numbering (1, A, a, I, i) */
+    ol.list-number {
+      list-style-type: decimal;
+    }
+
+    ol.list-number ol.list-number {
+      list-style-type: upper-alpha;
+    }
+
+    ol.list-number ol.list-number ol.list-number {
+      list-style-type: lower-alpha;
+    }
+
+    ol.list-number ol.list-number ol.list-number ol.list-number {
+      list-style-type: upper-roman;
+    }
+
+    ol.list-number ol.list-number ol.list-number ol.list-number ol.list-number {
+      list-style-type: lower-roman;
     }
   }
 }

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

@@ -1,5 +1,5 @@
 import type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js';
-import type { SerializedListItemNode } from '../../../../nodeTypes.js';
+import type { SerializedListItemNode } from '../../../../types/nodeTypes.js';
 import './index.css';
 export declare const ListItemDiffHTMLConverterAsync: HTMLConvertersAsync<SerializedListItemNode>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/Diff/converters/listitem/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8DAA8D,CAAA;AACvG,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAEtE,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,8BAA8B,EAAE,mBAAmB,CAAC,sBAAsB,CA+DtF,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/Diff/converters/listitem/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8DAA8D,CAAA;AACvG,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAE5E,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,8BAA8B,EAAE,mBAAmB,CAAC,sBAAsB,CA+DtF,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CheckIcon","ListItemDiffHTMLConverterAsync","listitem","node","nodesToHTML","parent","providedCSSString","hasSubLists","children","some","child","type","nodes","join","listType","ReactDOMServer","default","JSX","_jsx","checked","className","role","tabIndex","value","dangerouslySetInnerHTML","__html","_jsxs","html","renderToStaticMarkup","styleIndex","indexOf","classIndex","classEndIndex","substring","classNameWithStyle","htmlWithStyle","replace"],"sources":["../../../../../src/field/Diff/converters/listitem/index.tsx"],"sourcesContent":["import { CheckIcon } from '@payloadcms/ui/rsc'\n\nimport type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js'\nimport type { SerializedListItemNode } from '../../../../nodeTypes.js'\n\nimport './index.css'\n\nexport const ListItemDiffHTMLConverterAsync: HTMLConvertersAsync<SerializedListItemNode> = {\n  listitem: async ({ node, nodesToHTML, parent, providedCSSString }) => {\n    const hasSubLists = node.children.some((child) => child.type === 'list')\n\n    const children = (\n      await nodesToHTML({\n        nodes: node.children,\n      })\n    ).join('')\n\n    if ('listType' in parent && parent?.listType === 'check') {\n      const ReactDOMServer = (await import('react-dom/server')).default\n\n      const JSX = (\n        <li\n          aria-checked={node.checked ? true : false}\n          className={`checkboxItem ${node.checked ? 'checkboxItem--checked' : 'checkboxItem--unchecked'}${\n            hasSubLists ? ' checkboxItem--nested' : ''\n          }`}\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n          role=\"checkbox\"\n          tabIndex={-1}\n          value={node.value}\n        >\n          {hasSubLists ? (\n            // When sublists exist, just render them safely as HTML\n            <div dangerouslySetInnerHTML={{ __html: children }} />\n          ) : (\n            // Otherwise, show our custom styled checkbox\n            <div className=\"checkboxItem__wrapper\">\n              <div\n                className=\"checkboxItem__icon\"\n                data-checked={node.checked}\n                data-enable-match=\"true\"\n              >\n                {node.checked && <CheckIcon />}\n              </div>\n              <span className=\"checkboxItem__label\">{children}</span>\n            </div>\n          )}\n        </li>\n      )\n\n      const html = ReactDOMServer.renderToStaticMarkup(JSX)\n\n      // Add style=\"list-style-type: none;${providedCSSString}\" to html\n      const styleIndex = html.indexOf('class=\"list-item-checkbox')\n      const classIndex = html.indexOf('class=\"list-item-checkbox', styleIndex)\n      const classEndIndex = html.indexOf('\"', classIndex + 6)\n      const className = html.substring(classIndex, classEndIndex)\n      const classNameWithStyle = `${className} style=\"list-style-type: none;${providedCSSString}\"`\n      const htmlWithStyle = html.replace(className, classNameWithStyle)\n\n      return htmlWithStyle\n    } else {\n      return `<li\n          class=\"${hasSubLists ? 'nestedListItem' : ''}\"\n          style=\"${hasSubLists ? `list-style-type: none;${providedCSSString}` : providedCSSString}\"\n          value=\"${node.value}\"\n          data-enable-match=\"true\"\n        >${children}</li>`\n    }\n  },\n}\n"],"mappings":";AAAA,SAASA,SAAS,QAAQ;AAK1B,OAAO;AAEP,OAAO,MAAMC,8BAAA,GAA8E;EACzFC,QAAA,EAAU,MAAAA,CAAO;IAAEC,IAAI;IAAEC,WAAW;IAAEC,MAAM;IAAEC;EAAiB,CAAE;IAC/D,MAAMC,WAAA,GAAcJ,IAAA,CAAKK,QAAQ,CAACC,IAAI,CAAEC,KAAA,IAAUA,KAAA,CAAMC,IAAI,KAAK;IAEjE,MAAMH,QAAA,GAAW,CACf,MAAMJ,WAAA,CAAY;MAChBQ,KAAA,EAAOT,IAAA,CAAKK;IACd,EAAC,EACDK,IAAI,CAAC;IAEP,IAAI,cAAcR,MAAA,IAAUA,MAAA,EAAQS,QAAA,KAAa,SAAS;MACxD,MAAMC,cAAA,GAAiB,CAAC,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;MAEjE,MAAMC,GAAA,gBACJC,IAAA,CAAC;QACC,gBAAcf,IAAA,CAAKgB,OAAO,GAAG,OAAO;QACpCC,SAAA,EAAW,gBAAgBjB,IAAA,CAAKgB,OAAO,GAAG,0BAA0B,4BAClEZ,WAAA,GAAc,0BAA0B,IACxC;QACF;QACAc,IAAA,EAAK;QACLC,QAAA,EAAU,CAAC;QACXC,KAAA,EAAOpB,IAAA,CAAKoB,KAAK;kBAEhBhB,WAAA;QACC;;QACAW,IAAA,CAAC;UAAIM,uBAAA,EAAyB;YAAEC,MAAA,EAAQjB;UAAS;;QAEjD;;QACAkB,KAAA,CAAC;UAAIN,SAAA,EAAU;kCACbF,IAAA,CAAC;YACCE,SAAA,EAAU;YACV,gBAAcjB,IAAA,CAAKgB,OAAO;YAC1B,qBAAkB;sBAEjBhB,IAAA,CAAKgB,OAAO,iBAAID,IAAA,CAAClB,SAAA;2BAEpBkB,IAAA,CAAC;YAAKE,SAAA,EAAU;sBAAuBZ;;;;MAM/C,MAAMmB,IAAA,GAAOZ,cAAA,CAAea,oBAAoB,CAACX,GAAA;MAEjD;MACA,MAAMY,UAAA,GAAaF,IAAA,CAAKG,OAAO,CAAC;MAChC,MAAMC,UAAA,GAAaJ,IAAA,CAAKG,OAAO,CAAC,6BAA6BD,UAAA;MAC7D,MAAMG,aAAA,GAAgBL,IAAA,CAAKG,OAAO,CAAC,KAAKC,UAAA,GAAa;MACrD,MAAMX,SAAA,GAAYO,IAAA,CAAKM,SAAS,CAACF,UAAA,EAAYC,aAAA;MAC7C,MAAME,kBAAA,GAAqB,GAAGd,SAAA,iCAA0Cd,iBAAA,GAAoB;MAC5F,MAAM6B,aAAA,GAAgBR,IAAA,CAAKS,OAAO,CAAChB,SAAA,EAAWc,kBAAA;MAE9C,OAAOC,aAAA;IACT,OAAO;MACL,OAAO;mBACM5B,WAAA,GAAc,mBAAmB;mBACjCA,WAAA,GAAc,yBAAyBD,iBAAA,EAAmB,GAAGA,iBAAA;mBAC7DH,IAAA,CAAKoB,KAAK;;WAElBf,QAAA,OAAe;IACtB;EACF;AACF","ignoreList":[]}
+{"version":3,"file":"index.js","names":["CheckIcon","ListItemDiffHTMLConverterAsync","listitem","node","nodesToHTML","parent","providedCSSString","hasSubLists","children","some","child","type","nodes","join","listType","ReactDOMServer","default","JSX","_jsx","checked","className","role","tabIndex","value","dangerouslySetInnerHTML","__html","_jsxs","html","renderToStaticMarkup","styleIndex","indexOf","classIndex","classEndIndex","substring","classNameWithStyle","htmlWithStyle","replace"],"sources":["../../../../../src/field/Diff/converters/listitem/index.tsx"],"sourcesContent":["import { CheckIcon } from '@payloadcms/ui/rsc'\n\nimport type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js'\nimport type { SerializedListItemNode } from '../../../../types/nodeTypes.js'\n\nimport './index.css'\n\nexport const ListItemDiffHTMLConverterAsync: HTMLConvertersAsync<SerializedListItemNode> = {\n  listitem: async ({ node, nodesToHTML, parent, providedCSSString }) => {\n    const hasSubLists = node.children.some((child) => child.type === 'list')\n\n    const children = (\n      await nodesToHTML({\n        nodes: node.children,\n      })\n    ).join('')\n\n    if ('listType' in parent && parent?.listType === 'check') {\n      const ReactDOMServer = (await import('react-dom/server')).default\n\n      const JSX = (\n        <li\n          aria-checked={node.checked ? true : false}\n          className={`checkboxItem ${node.checked ? 'checkboxItem--checked' : 'checkboxItem--unchecked'}${\n            hasSubLists ? ' checkboxItem--nested' : ''\n          }`}\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n          role=\"checkbox\"\n          tabIndex={-1}\n          value={node.value}\n        >\n          {hasSubLists ? (\n            // When sublists exist, just render them safely as HTML\n            <div dangerouslySetInnerHTML={{ __html: children }} />\n          ) : (\n            // Otherwise, show our custom styled checkbox\n            <div className=\"checkboxItem__wrapper\">\n              <div\n                className=\"checkboxItem__icon\"\n                data-checked={node.checked}\n                data-enable-match=\"true\"\n              >\n                {node.checked && <CheckIcon />}\n              </div>\n              <span className=\"checkboxItem__label\">{children}</span>\n            </div>\n          )}\n        </li>\n      )\n\n      const html = ReactDOMServer.renderToStaticMarkup(JSX)\n\n      // Add style=\"list-style-type: none;${providedCSSString}\" to html\n      const styleIndex = html.indexOf('class=\"list-item-checkbox')\n      const classIndex = html.indexOf('class=\"list-item-checkbox', styleIndex)\n      const classEndIndex = html.indexOf('\"', classIndex + 6)\n      const className = html.substring(classIndex, classEndIndex)\n      const classNameWithStyle = `${className} style=\"list-style-type: none;${providedCSSString}\"`\n      const htmlWithStyle = html.replace(className, classNameWithStyle)\n\n      return htmlWithStyle\n    } else {\n      return `<li\n          class=\"${hasSubLists ? 'nestedListItem' : ''}\"\n          style=\"${hasSubLists ? `list-style-type: none;${providedCSSString}` : providedCSSString}\"\n          value=\"${node.value}\"\n          data-enable-match=\"true\"\n        >${children}</li>`\n    }\n  },\n}\n"],"mappings":";AAAA,SAASA,SAAS,QAAQ;AAK1B,OAAO;AAEP,OAAO,MAAMC,8BAAA,GAA8E;EACzFC,QAAA,EAAU,MAAAA,CAAO;IAAEC,IAAI;IAAEC,WAAW;IAAEC,MAAM;IAAEC;EAAiB,CAAE;IAC/D,MAAMC,WAAA,GAAcJ,IAAA,CAAKK,QAAQ,CAACC,IAAI,CAAEC,KAAA,IAAUA,KAAA,CAAMC,IAAI,KAAK;IAEjE,MAAMH,QAAA,GAAW,CACf,MAAMJ,WAAA,CAAY;MAChBQ,KAAA,EAAOT,IAAA,CAAKK;IACd,EAAC,EACDK,IAAI,CAAC;IAEP,IAAI,cAAcR,MAAA,IAAUA,MAAA,EAAQS,QAAA,KAAa,SAAS;MACxD,MAAMC,cAAA,GAAiB,CAAC,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;MAEjE,MAAMC,GAAA,gBACJC,IAAA,CAAC;QACC,gBAAcf,IAAA,CAAKgB,OAAO,GAAG,OAAO;QACpCC,SAAA,EAAW,gBAAgBjB,IAAA,CAAKgB,OAAO,GAAG,0BAA0B,4BAClEZ,WAAA,GAAc,0BAA0B,IACxC;QACF;QACAc,IAAA,EAAK;QACLC,QAAA,EAAU,CAAC;QACXC,KAAA,EAAOpB,IAAA,CAAKoB,KAAK;kBAEhBhB,WAAA;QACC;;QACAW,IAAA,CAAC;UAAIM,uBAAA,EAAyB;YAAEC,MAAA,EAAQjB;UAAS;;QAEjD;;QACAkB,KAAA,CAAC;UAAIN,SAAA,EAAU;kCACbF,IAAA,CAAC;YACCE,SAAA,EAAU;YACV,gBAAcjB,IAAA,CAAKgB,OAAO;YAC1B,qBAAkB;sBAEjBhB,IAAA,CAAKgB,OAAO,iBAAID,IAAA,CAAClB,SAAA;2BAEpBkB,IAAA,CAAC;YAAKE,SAAA,EAAU;sBAAuBZ;;;;MAM/C,MAAMmB,IAAA,GAAOZ,cAAA,CAAea,oBAAoB,CAACX,GAAA;MAEjD;MACA,MAAMY,UAAA,GAAaF,IAAA,CAAKG,OAAO,CAAC;MAChC,MAAMC,UAAA,GAAaJ,IAAA,CAAKG,OAAO,CAAC,6BAA6BD,UAAA;MAC7D,MAAMG,aAAA,GAAgBL,IAAA,CAAKG,OAAO,CAAC,KAAKC,UAAA,GAAa;MACrD,MAAMX,SAAA,GAAYO,IAAA,CAAKM,SAAS,CAACF,UAAA,EAAYC,aAAA;MAC7C,MAAME,kBAAA,GAAqB,GAAGd,SAAA,iCAA0Cd,iBAAA,GAAoB;MAC5F,MAAM6B,aAAA,GAAgBR,IAAA,CAAKS,OAAO,CAAChB,SAAA,EAAWc,kBAAA;MAE9C,OAAOC,aAAA;IACT,OAAO;MACL,OAAO;mBACM5B,WAAA,GAAc,mBAAmB;mBACjCA,WAAA,GAAc,yBAAyBD,iBAAA,EAAmB,GAAGA,iBAAA;mBAC7DH,IAAA,CAAKoB,KAAK;;WAElBf,QAAA,OAAe;IACtB;EACF;AACF","ignoreList":[]}

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

@@ -1,68 +1,108 @@
 @layer payload-default {
   .lexical-diff .lexical-relationship-diff {
-    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
-    min-width: calc(var(--spacer-5) * 5);
     max-width: fit-content;
-
-    display: flex;
+    display: inline-flex;
     align-items: center;
-    background-color: var(--color-bg);
+    background-color: var(--color-bg-brand-tertiary);
+    outline: var(--stroke-width-small) solid var(--color-border-brand);
+    outline-offset: calc(var(--stroke-width-small) * -1);
     border-radius: var(--radius-medium);
-    border: var(--stroke-width-small) solid var(--color-border);
     position: relative;
-    font-family: var(--font-body);
-    margin-block: calc(var(--spacer-1) * 2.5);
-    max-height: calc(var(--spacer-5) * 2.5);
-    padding: var(--spacer-2-5);
+    z-index: 2;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    margin-block: var(--spacer-2);
+    padding: var(--spacer-1);
 
     &[data-match-type='create'] {
-      border-color: var(--diff-create-pill-border);
-      color: var(--diff-create-parent-color);
+      background-color: var(--diff-create-parent-bg);
+      outline-color: var(--diff-create-pill-border);
 
-      .lexical-relationship-diff__collectionLabel {
-        color: var(--diff-create-link-color);
+      .lexical-relationship-diff__pill {
+        background-color: var(--color-bg-brand);
+        color: var(--color-text-onbrand);
       }
 
-      .lexical-relationship-diff__title * {
+      .lexical-relationship-diff__info {
         color: var(--diff-create-parent-color);
       }
     }
 
     &[data-match-type='delete'] {
-      border-color: var(--diff-delete-pill-border);
-      color: var(--diff-delete-parent-color);
+      background-color: var(--diff-delete-parent-bg);
+      outline-color: var(--diff-delete-pill-border);
       text-decoration-line: none;
-      background-color: var(--diff-delete-pill-bg);
 
-      .lexical-relationship-diff__collectionLabel {
-        color: var(--diff-delete-link-color);
+      .lexical-relationship-diff__pill {
+        background-color: var(--color-bg-danger);
+        color: var(--color-text-oncomponent);
+
+        * {
+          text-decoration-line: none;
+          color: var(--color-text-oncomponent);
+          background-color: transparent;
+        }
       }
 
-      * {
-        text-decoration-line: none;
-        color: var(--diff-delete-parent-color);
+      .lexical-relationship-diff__info {
+        color: var(--color-text-danger);
+        text-decoration-line: line-through;
       }
     }
   }
 
-  .lexical-diff .lexical-relationship-diff__card {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    flex-grow: 1;
-    align-items: flex-start;
-    justify-content: space-between;
+  /* Override HTMLDiff generic [data-match-type] styles - specificity must beat 0,4,1 from HTMLDiff */
+  .html-diff
+    .lexical-relationship-diff.lexical-relationship-diff[data-enable-match='true'][data-match-type='create'],
+  .html-diff
+    .lexical-relationship-diff.lexical-relationship-diff[data-enable-match='true'][data-match-type='delete'] {
+    border-radius: var(--radius-medium);
+    padding: var(--spacer-1);
+    text-decoration-line: none;
+  }
+
+  .html-diff
+    .lexical-relationship-diff.lexical-relationship-diff[data-enable-match='true'][data-match-type='create'] {
+    background-color: var(--diff-create-parent-bg);
+    outline-color: var(--diff-create-pill-border);
+    color: var(--diff-create-parent-color);
   }
 
-  .lexical-diff .lexical-relationship-diff__title {
-    display: flex;
-    flex-direction: row;
-    font-weight: 600;
+  .html-diff
+    .lexical-relationship-diff.lexical-relationship-diff[data-enable-match='true'][data-match-type='delete'] {
+    background-color: var(--diff-delete-parent-bg);
+    outline-color: var(--diff-delete-pill-border);
   }
 
-  .lexical-diff .lexical-relationship-diff__collectionLabel {
+  .lexical-diff .lexical-relationship-diff__pill {
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--radius-medium);
+    padding-inline: var(--spacer-1);
+    background-color: var(--color-bg-brand);
+    color: var(--color-text-onbrand);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .lexical-diff .lexical-relationship-diff__info {
+    padding-inline: var(--spacer-1);
+    font-weight: var(--text-body-medium-font-weight);
+    color: var(--color-text-brand);
+    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
+  }
+
+  @media (max-width: 768px) {
+    .lexical-diff .html-diff .lexical-relationship-diff {
+      max-width: unset;
+      display: flex;
+      border-radius: 0;
+      outline: none;
+      margin: 0;
+    }
   }
 }

package/dist/field/Diff/converters/relationship/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 { SerializedRelationshipNode } from '../../../../nodeTypes.js';
+import type { SerializedRelationshipNode } from '../../../../types/nodeTypes.js';
 export declare const RelationshipDiffHTMLConverterAsync: (args: {
     i18n: I18nClient;
     req: PayloadRequest;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/Diff/converters/relationship/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,cAAc,EAAc,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1E,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8DAA8D,CAAA;AACvG,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAA;AAI1E,eAAO,MAAM,kCAAkC,EAAE,CAAC,IAAI,EAAE;IACtD,IAAI,EAAE,UAAU,CAAA;IAChB,GAAG,EAAE,cAAc,CAAA;CACpB,KAAK,mBAAmB,CAAC,0BAA0B,CAsEnD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/Diff/converters/relationship/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,cAAc,EAAc,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1E,OAAO,aAAa,CAAA;AAEpB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8DAA8D,CAAA;AACvG,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAA;AAIhF,eAAO,MAAM,kCAAkC,EAAE,CAAC,IAAI,EAAE;IACtD,IAAI,EAAE,UAAU,CAAA;IAChB,GAAG,EAAE,cAAc,CAAA;CACpB,KAAK,mBAAmB,CAAC,0BAA0B,CAoDnD,CAAA"}

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"}