@payloadcms/richtext-lexical 3.68.0-internal-debug.2eb12b9 → 3.68.0-internal-debug.dafc24d

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

@@ -1,5 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { CheckIcon } from '@payloadcms/ui/rsc';
+import './index.scss';
 export const ListItemDiffHTMLConverterAsync = {
     listitem: async ({ node, nodesToHTML, parent, providedCSSString })=>{
         const hasSubLists = node.children.some((child)=>child.type === 'list');
@@ -8,7 +9,7 @@ export const ListItemDiffHTMLConverterAsync = {
         })).join('');
         if ('listType' in parent && parent?.listType === 'check') {
             const ReactDOMServer = (await import('react-dom/server')).default;
-            const JSX = /*#__PURE__*/ _jsx("li", {
+            const JSX = /*#__PURE__*/ _jsxDEV("li", {
                 "aria-checked": node.checked ? true : false,
                 className: `checkboxItem ${node.checked ? 'checkboxItem--checked' : 'checkboxItem--unchecked'}${hasSubLists ? ' checkboxItem--nested' : ''}`,
                 // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
@@ -16,27 +17,51 @@ export const ListItemDiffHTMLConverterAsync = {
                 tabIndex: -1,
                 value: node.value,
                 children: hasSubLists ? // When sublists exist, just render them safely as HTML
-                /*#__PURE__*/ _jsx("div", {
+                /*#__PURE__*/ _jsxDEV("div", {
                     dangerouslySetInnerHTML: {
                         __html: children
                     }
-                }) : // Otherwise, show our custom styled checkbox
-                /*#__PURE__*/ _jsxs("div", {
+                }, void 0, false, {
+                    fileName: "src/field/Diff/converters/listitem/index.tsx",
+                    lineNumber: 34,
+                    columnNumber: 13
+                }, this) : // Otherwise, show our custom styled checkbox
+                /*#__PURE__*/ _jsxDEV("div", {
                     className: "checkboxItem__wrapper",
                     children: [
-                        /*#__PURE__*/ _jsx("div", {
+                        /*#__PURE__*/ _jsxDEV("div", {
                             className: "checkboxItem__icon",
                             "data-checked": node.checked,
                             "data-enable-match": "true",
-                            children: node.checked && /*#__PURE__*/ _jsx(CheckIcon, {})
-                        }),
-                        /*#__PURE__*/ _jsx("span", {
+                            children: node.checked && /*#__PURE__*/ _jsxDEV(CheckIcon, {}, void 0, false, {
+                                fileName: "src/field/Diff/converters/listitem/index.tsx",
+                                lineNumber: 43,
+                                columnNumber: 34
+                            }, this)
+                        }, void 0, false, {
+                            fileName: "src/field/Diff/converters/listitem/index.tsx",
+                            lineNumber: 38,
+                            columnNumber: 15
+                        }, this),
+                        /*#__PURE__*/ _jsxDEV("span", {
                             className: "checkboxItem__label",
                             children: children
-                        })
+                        }, void 0, false, {
+                            fileName: "src/field/Diff/converters/listitem/index.tsx",
+                            lineNumber: 45,
+                            columnNumber: 15
+                        }, this)
                     ]
-                })
-            });
+                }, void 0, true, {
+                    fileName: "src/field/Diff/converters/listitem/index.tsx",
+                    lineNumber: 37,
+                    columnNumber: 13
+                }, this)
+            }, void 0, false, {
+                fileName: "src/field/Diff/converters/listitem/index.tsx",
+                lineNumber: 22,
+                columnNumber: 9
+            }, this);
             const html = ReactDOMServer.renderToStaticMarkup(JSX);
             // Add style="list-style-type: none;${providedCSSString}" to html
             const styleIndex = html.indexOf('class="list-item-checkbox');

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

@@ -1 +1 @@
-{"version":3,"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.scss'\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"],"names":["CheckIcon","ListItemDiffHTMLConverterAsync","listitem","node","nodesToHTML","parent","providedCSSString","hasSubLists","children","some","child","type","nodes","join","listType","ReactDOMServer","default","JSX","li","aria-checked","checked","className","role","tabIndex","value","div","dangerouslySetInnerHTML","__html","data-checked","data-enable-match","span","html","renderToStaticMarkup","styleIndex","indexOf","classIndex","classEndIndex","substring","classNameWithStyle","htmlWithStyle","replace"],"mappings":";AAAA,SAASA,SAAS,QAAQ,qBAAoB;AAO9C,OAAO,MAAMC,iCAA8E;IACzFC,UAAU,OAAO,EAAEC,IAAI,EAAEC,WAAW,EAAEC,MAAM,EAAEC,iBAAiB,EAAE;QAC/D,MAAMC,cAAcJ,KAAKK,QAAQ,CAACC,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAK;QAEjE,MAAMH,WAAW,AACf,CAAA,MAAMJ,YAAY;YAChBQ,OAAOT,KAAKK,QAAQ;QACtB,EAAC,EACDK,IAAI,CAAC;QAEP,IAAI,cAAcR,UAAUA,QAAQS,aAAa,SAAS;YACxD,MAAMC,iBAAiB,AAAC,CAAA,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;YAEjE,MAAMC,oBACJ,KAACC;gBACCC,gBAAchB,KAAKiB,OAAO,GAAG,OAAO;gBACpCC,WAAW,CAAC,aAAa,EAAElB,KAAKiB,OAAO,GAAG,0BAA0B,4BAClEb,cAAc,0BAA0B,IACxC;gBACF,kFAAkF;gBAClFe,MAAK;gBACLC,UAAU,CAAC;gBACXC,OAAOrB,KAAKqB,KAAK;0BAEhBjB,cACC,uDAAuD;8BACvD,KAACkB;oBAAIC,yBAAyB;wBAAEC,QAAQnB;oBAAS;qBAEjD,6CAA6C;8BAC7C,MAACiB;oBAAIJ,WAAU;;sCACb,KAACI;4BACCJ,WAAU;4BACVO,gBAAczB,KAAKiB,OAAO;4BAC1BS,qBAAkB;sCAEjB1B,KAAKiB,OAAO,kBAAI,KAACpB;;sCAEpB,KAAC8B;4BAAKT,WAAU;sCAAuBb;;;;;YAM/C,MAAMuB,OAAOhB,eAAeiB,oBAAoB,CAACf;YAEjD,iEAAiE;YACjE,MAAMgB,aAAaF,KAAKG,OAAO,CAAC;YAChC,MAAMC,aAAaJ,KAAKG,OAAO,CAAC,6BAA6BD;YAC7D,MAAMG,gBAAgBL,KAAKG,OAAO,CAAC,KAAKC,aAAa;YACrD,MAAMd,YAAYU,KAAKM,SAAS,CAACF,YAAYC;YAC7C,MAAME,qBAAqB,GAAGjB,UAAU,8BAA8B,EAAEf,kBAAkB,CAAC,CAAC;YAC5F,MAAMiC,gBAAgBR,KAAKS,OAAO,CAACnB,WAAWiB;YAE9C,OAAOC;QACT,OAAO;YACL,OAAO,CAAC;iBACG,EAAEhC,cAAc,mBAAmB,GAAG;iBACtC,EAAEA,cAAc,CAAC,sBAAsB,EAAED,mBAAmB,GAAGA,kBAAkB;iBACjF,EAAEH,KAAKqB,KAAK,CAAC;;SAErB,EAAEhB,SAAS,KAAK,CAAC;QACtB;IACF;AACF,EAAC"}
+{"version":3,"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.scss'\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"],"names":["CheckIcon","ListItemDiffHTMLConverterAsync","listitem","node","nodesToHTML","parent","providedCSSString","hasSubLists","children","some","child","type","nodes","join","listType","ReactDOMServer","default","JSX","li","aria-checked","checked","className","role","tabIndex","value","div","dangerouslySetInnerHTML","__html","data-checked","data-enable-match","span","html","renderToStaticMarkup","styleIndex","indexOf","classIndex","classEndIndex","substring","classNameWithStyle","htmlWithStyle","replace"],"mappings":";AAAA,SAASA,SAAS,QAAQ,qBAAoB;AAK9C,OAAO,eAAc;AAErB,OAAO,MAAMC,iCAA8E;IACzFC,UAAU,OAAO,EAAEC,IAAI,EAAEC,WAAW,EAAEC,MAAM,EAAEC,iBAAiB,EAAE;QAC/D,MAAMC,cAAcJ,KAAKK,QAAQ,CAACC,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAK;QAEjE,MAAMH,WAAW,AACf,CAAA,MAAMJ,YAAY;YAChBQ,OAAOT,KAAKK,QAAQ;QACtB,EAAC,EACDK,IAAI,CAAC;QAEP,IAAI,cAAcR,UAAUA,QAAQS,aAAa,SAAS;YACxD,MAAMC,iBAAiB,AAAC,CAAA,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;YAEjE,MAAMC,oBACJ,QAACC;gBACCC,gBAAchB,KAAKiB,OAAO,GAAG,OAAO;gBACpCC,WAAW,CAAC,aAAa,EAAElB,KAAKiB,OAAO,GAAG,0BAA0B,4BAClEb,cAAc,0BAA0B,IACxC;gBACF,kFAAkF;gBAClFe,MAAK;gBACLC,UAAU,CAAC;gBACXC,OAAOrB,KAAKqB,KAAK;0BAEhBjB,cACC,uDAAuD;8BACvD,QAACkB;oBAAIC,yBAAyB;wBAAEC,QAAQnB;oBAAS;;;;;2BAEjD,6CAA6C;8BAC7C,QAACiB;oBAAIJ,WAAU;;sCACb,QAACI;4BACCJ,WAAU;4BACVO,gBAAczB,KAAKiB,OAAO;4BAC1BS,qBAAkB;sCAEjB1B,KAAKiB,OAAO,kBAAI,QAACpB;;;;;;;;;;sCAEpB,QAAC8B;4BAAKT,WAAU;sCAAuBb;;;;;;;;;;;;;;;;;YAM/C,MAAMuB,OAAOhB,eAAeiB,oBAAoB,CAACf;YAEjD,iEAAiE;YACjE,MAAMgB,aAAaF,KAAKG,OAAO,CAAC;YAChC,MAAMC,aAAaJ,KAAKG,OAAO,CAAC,6BAA6BD;YAC7D,MAAMG,gBAAgBL,KAAKG,OAAO,CAAC,KAAKC,aAAa;YACrD,MAAMd,YAAYU,KAAKM,SAAS,CAACF,YAAYC;YAC7C,MAAME,qBAAqB,GAAGjB,UAAU,8BAA8B,EAAEf,kBAAkB,CAAC,CAAC;YAC5F,MAAMiC,gBAAgBR,KAAKS,OAAO,CAACnB,WAAWiB;YAE9C,OAAOC;QACT,OAAO;YACL,OAAO,CAAC;iBACG,EAAEhC,cAAc,mBAAmB,GAAG;iBACtC,EAAEA,cAAc,CAAC,sBAAsB,EAAED,mBAAmB,GAAGA,kBAAkB;iBACjF,EAAEH,KAAKqB,KAAK,CAAC;;SAErB,EAAEhB,SAAS,KAAK,CAAC;QACtB;IACF;AACF,EAAC"}

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

@@ -0,0 +1,47 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .lexical-diff {
+    ul.list-check {
+      padding-left: 0;
+    }
+
+    .checkboxItem {
+      list-style-type: none;
+
+      &__wrapper {
+        display: flex;
+        align-items: center;
+      }
+
+      &__icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 8px; // Spacing before label text
+        border: 1px solid var(--theme-text);
+        border-radius: 3px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        // Because the checkbox is non-interactive:
+        pointer-events: none;
+
+        .icon--check {
+          height: 11px;
+        }
+
+        &[data-match-type='create'] {
+          border-color: var(--diff-create-pill-color);
+        }
+
+        &[data-match-type='delete'] {
+          border-color: var(--diff-delete-pill-color);
+        }
+      }
+
+      &--nested {
+        margin-left: 1.5rem;
+      }
+    }
+  }
+}

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

@@ -1,5 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { getTranslation } from '@payloadcms/translations';
+import './index.scss';
 import { formatAdminURL } from 'payload/shared';
 const baseClass = 'lexical-relationship-diff';
 export const RelationshipDiffHTMLConverterAsync = ({ i18n, req })=>{
@@ -21,24 +22,28 @@ export const RelationshipDiffHTMLConverterAsync = ({ i18n, req })=>{
             }
             const relatedCollection = req.payload.collections[node.relationTo]?.config;
             const ReactDOMServer = (await import('react-dom/server')).default;
-            const JSX = /*#__PURE__*/ _jsx("div", {
+            const JSX = /*#__PURE__*/ _jsxDEV("div", {
                 className: `${baseClass}${providedCSSString}`,
                 "data-enable-match": "true",
                 "data-id": id,
                 "data-slug": node.relationTo,
-                children: /*#__PURE__*/ _jsxs("div", {
+                children: /*#__PURE__*/ _jsxDEV("div", {
                     className: `${baseClass}__card`,
                     children: [
-                        /*#__PURE__*/ _jsx("div", {
+                        /*#__PURE__*/ _jsxDEV("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", {
+                        }, void 0, false, {
+                            fileName: "src/field/Diff/converters/relationship/index.tsx",
+                            lineNumber: 49,
+                            columnNumber: 13
+                        }, this),
+                        data && relatedCollection?.admin?.useAsTitle && data[relatedCollection.admin.useAsTitle] ? /*#__PURE__*/ _jsxDEV("strong", {
                             className: `${baseClass}__title`,
                             "data-enable-match": "false",
-                            children: /*#__PURE__*/ _jsx("a", {
+                            children: /*#__PURE__*/ _jsxDEV("a", {
                                 className: `${baseClass}__link`,
                                 "data-enable-match": "false",
                                 href: formatAdminURL({
@@ -49,13 +54,33 @@ export const RelationshipDiffHTMLConverterAsync = ({ i18n, req })=>{
                                 rel: "noopener noreferrer",
                                 target: "_blank",
                                 children: data[relatedCollection.admin.useAsTitle]
-                            })
-                        }) : /*#__PURE__*/ _jsx("strong", {
+                            }, void 0, false, {
+                                fileName: "src/field/Diff/converters/relationship/index.tsx",
+                                lineNumber: 60,
+                                columnNumber: 17
+                            }, this)
+                        }, void 0, false, {
+                            fileName: "src/field/Diff/converters/relationship/index.tsx",
+                            lineNumber: 59,
+                            columnNumber: 15
+                        }, this) : /*#__PURE__*/ _jsxDEV("strong", {
                             children: id
-                        })
+                        }, void 0, false, {
+                            fileName: "src/field/Diff/converters/relationship/index.tsx",
+                            lineNumber: 75,
+                            columnNumber: 15
+                        }, this)
                     ]
-                })
-            });
+                }, void 0, true, {
+                    fileName: "src/field/Diff/converters/relationship/index.tsx",
+                    lineNumber: 48,
+                    columnNumber: 11
+                }, this)
+            }, void 0, false, {
+                fileName: "src/field/Diff/converters/relationship/index.tsx",
+                lineNumber: 42,
+                columnNumber: 9
+            }, this);
             // Render to HTML
             const html = ReactDOMServer.renderToStaticMarkup(JSX);
             return html;

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

@@ -1 +1 @@
-{"version":3,"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.scss'\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"],"names":["getTranslation","formatAdminURL","baseClass","RelationshipDiffHTMLConverterAsync","i18n","req","relationship","node","populate","providedCSSString","data","undefined","id","value","collectionSlug","relationTo","relatedCollection","payload","collections","config","ReactDOMServer","default","JSX","div","className","data-enable-match","data-id","data-slug","t","label","labels","singular","slug","admin","useAsTitle","strong","a","href","adminRoute","routes","path","serverURL","rel","target","html","renderToStaticMarkup"],"mappings":";AAEA,SAASA,cAAc,QAAyB,2BAA0B;AAI1E,SAASC,cAAc,QAAQ,iBAAgB;AAK/C,MAAMC,YAAY;AAElB,OAAO,MAAMC,qCAG2C,CAAC,EAAEC,IAAI,EAAEC,GAAG,EAAE;IACpE,OAAO;QACLC,cAAc,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE;YACxD,IAAIC,OAAuDC;YAE3D,MAAMC,KAAK,OAAOL,KAAKM,KAAK,KAAK,WAAWN,KAAKM,KAAK,CAACD,EAAE,GAAGL,KAAKM,KAAK;YAEtE,mEAAmE;YACnE,IAAI,OAAON,KAAKM,KAAK,KAAK,UAAU;gBAClC,IAAI,CAACL,UAAU;oBACb,OAAO;gBACT;gBACAE,OAAO,MAAMF,SAAgC;oBAC3CI;oBACAE,gBAAgBP,KAAKQ,UAAU;gBACjC;YACF,OAAO;gBACLL,OAAOH,KAAKM,KAAK;YACnB;YAEA,MAAMG,oBAAoBX,IAAIY,OAAO,CAACC,WAAW,CAACX,KAAKQ,UAAU,CAAC,EAAEI;YAEpE,MAAMC,iBAAiB,AAAC,CAAA,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;YAEjE,MAAMC,oBACJ,KAACC;gBACCC,WAAW,GAAGtB,YAAYO,mBAAmB;gBAC7CgB,qBAAkB;gBAClBC,WAASd;gBACTe,aAAWpB,KAAKQ,UAAU;0BAE1B,cAAA,MAACQ;oBAAIC,WAAW,GAAGtB,UAAU,MAAM,CAAC;;sCAClC,KAACqB;4BAAIC,WAAW,GAAGtB,UAAU,iBAAiB,CAAC;sCAC5CE,KAAKwB,CAAC,CAAC,4BAA4B;gCAClCC,OAAOb,mBAAmBc,QAAQC,WAC9B/B,eAAegB,mBAAmBc,QAAQC,UAAU3B,QACpDY,mBAAmBgB;4BACzB;;wBAEDtB,QACDM,mBAAmBiB,OAAOC,cAC1BxB,IAAI,CAACM,kBAAkBiB,KAAK,CAACC,UAAU,CAAC,iBACtC,KAACC;4BAAOX,WAAW,GAAGtB,UAAU,OAAO,CAAC;4BAAEuB,qBAAkB;sCAC1D,cAAA,KAACW;gCACCZ,WAAW,GAAGtB,UAAU,MAAM,CAAC;gCAC/BuB,qBAAkB;gCAClBY,MAAMpC,eAAe;oCACnBqC,YAAYjC,IAAIY,OAAO,CAACE,MAAM,CAACoB,MAAM,CAACN,KAAK;oCAC3CO,MAAM,CAAC,aAAa,EAAExB,mBAAmBgB,KAAK,CAAC,EAAEtB,KAAKE,EAAE,EAAE;oCAC1D6B,WAAWpC,IAAIY,OAAO,CAACE,MAAM,CAACsB,SAAS;gCACzC;gCACAC,KAAI;gCACJC,QAAO;0CAENjC,IAAI,CAACM,kBAAkBiB,KAAK,CAACC,UAAU,CAAC;;2CAI7C,KAACC;sCAAQvB;;;;;YAMjB,iBAAiB;YACjB,MAAMgC,OAAOxB,eAAeyB,oBAAoB,CAACvB;YAEjD,OAAOsB;QACT;IACF;AACF,EAAC"}
+{"version":3,"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.scss'\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"],"names":["getTranslation","formatAdminURL","baseClass","RelationshipDiffHTMLConverterAsync","i18n","req","relationship","node","populate","providedCSSString","data","undefined","id","value","collectionSlug","relationTo","relatedCollection","payload","collections","config","ReactDOMServer","default","JSX","div","className","data-enable-match","data-id","data-slug","t","label","labels","singular","slug","admin","useAsTitle","strong","a","href","adminRoute","routes","path","serverURL","rel","target","html","renderToStaticMarkup"],"mappings":";AAEA,SAASA,cAAc,QAAyB,2BAA0B;AAE1E,OAAO,eAAc;AAErB,SAASC,cAAc,QAAQ,iBAAgB;AAK/C,MAAMC,YAAY;AAElB,OAAO,MAAMC,qCAG2C,CAAC,EAAEC,IAAI,EAAEC,GAAG,EAAE;IACpE,OAAO;QACLC,cAAc,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE;YACxD,IAAIC,OAAuDC;YAE3D,MAAMC,KAAK,OAAOL,KAAKM,KAAK,KAAK,WAAWN,KAAKM,KAAK,CAACD,EAAE,GAAGL,KAAKM,KAAK;YAEtE,mEAAmE;YACnE,IAAI,OAAON,KAAKM,KAAK,KAAK,UAAU;gBAClC,IAAI,CAACL,UAAU;oBACb,OAAO;gBACT;gBACAE,OAAO,MAAMF,SAAgC;oBAC3CI;oBACAE,gBAAgBP,KAAKQ,UAAU;gBACjC;YACF,OAAO;gBACLL,OAAOH,KAAKM,KAAK;YACnB;YAEA,MAAMG,oBAAoBX,IAAIY,OAAO,CAACC,WAAW,CAACX,KAAKQ,UAAU,CAAC,EAAEI;YAEpE,MAAMC,iBAAiB,AAAC,CAAA,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;YAEjE,MAAMC,oBACJ,QAACC;gBACCC,WAAW,GAAGtB,YAAYO,mBAAmB;gBAC7CgB,qBAAkB;gBAClBC,WAASd;gBACTe,aAAWpB,KAAKQ,UAAU;0BAE1B,cAAA,QAACQ;oBAAIC,WAAW,GAAGtB,UAAU,MAAM,CAAC;;sCAClC,QAACqB;4BAAIC,WAAW,GAAGtB,UAAU,iBAAiB,CAAC;sCAC5CE,KAAKwB,CAAC,CAAC,4BAA4B;gCAClCC,OAAOb,mBAAmBc,QAAQC,WAC9B/B,eAAegB,mBAAmBc,QAAQC,UAAU3B,QACpDY,mBAAmBgB;4BACzB;;;;;;wBAEDtB,QACDM,mBAAmBiB,OAAOC,cAC1BxB,IAAI,CAACM,kBAAkBiB,KAAK,CAACC,UAAU,CAAC,iBACtC,QAACC;4BAAOX,WAAW,GAAGtB,UAAU,OAAO,CAAC;4BAAEuB,qBAAkB;sCAC1D,cAAA,QAACW;gCACCZ,WAAW,GAAGtB,UAAU,MAAM,CAAC;gCAC/BuB,qBAAkB;gCAClBY,MAAMpC,eAAe;oCACnBqC,YAAYjC,IAAIY,OAAO,CAACE,MAAM,CAACoB,MAAM,CAACN,KAAK;oCAC3CO,MAAM,CAAC,aAAa,EAAExB,mBAAmBgB,KAAK,CAAC,EAAEtB,KAAKE,EAAE,EAAE;oCAC1D6B,WAAWpC,IAAIY,OAAO,CAACE,MAAM,CAACsB,SAAS;gCACzC;gCACAC,KAAI;gCACJC,QAAO;0CAENjC,IAAI,CAACM,kBAAkBiB,KAAK,CAACC,UAAU,CAAC;;;;;;;;;;iDAI7C,QAACC;sCAAQvB;;;;;;;;;;;;;;;;;YAMjB,iBAAiB;YACjB,MAAMgC,OAAOxB,eAAeyB,oBAAoB,CAACvB;YAEjD,OAAOsB;QACT;IACF;AACF,EAAC"}

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

@@ -0,0 +1,73 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .lexical-diff .lexical-relationship-diff {
+    @extend %body;
+    @include shadow-sm;
+    min-width: calc(var(--base) * 8);
+    max-width: fit-content;
+
+    display: flex;
+    align-items: center;
+    background-color: var(--theme-input-bg);
+    border-radius: $style-radius-s;
+    border: 1px solid var(--theme-elevation-100);
+    position: relative;
+    font-family: var(--font-body);
+    margin-block: base(0.5);
+    max-height: calc(var(--base) * 4);
+    padding: base(0.6);
+
+    &[data-match-type='create'] {
+      border-color: var(--diff-create-pill-border);
+      color: var(--diff-create-parent-color);
+
+      .lexical-relationship-diff__collectionLabel {
+        color: var(--diff-create-link-color);
+      }
+
+      .lexical-relationship-diff__title * {
+        color: var(--diff-create-parent-color);
+      }
+    }
+
+    &[data-match-type='delete'] {
+      border-color: var(--diff-delete-pill-border);
+      color: var(--diff-delete-parent-color);
+      text-decoration-line: none;
+      background-color: var(--diff-delete-pill-bg);
+
+      .lexical-relationship-diff__collectionLabel {
+        color: var(--diff-delete-link-color);
+      }
+
+      * {
+        text-decoration-line: none;
+        color: var(--diff-delete-parent-color);
+      }
+    }
+
+    &__card {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      flex-grow: 1;
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+
+    &__title {
+      display: flex;
+      flex-direction: row;
+      font-weight: 600;
+    }
+
+    &__collectionLabel {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}

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

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import './index.scss';
 import { createHash } from 'crypto';
 const baseClass = 'lexical-unknown-diff';
 export const UnknownDiffHTMLConverterAsync = ({ i18n, req })=>{
@@ -16,27 +17,47 @@ export const UnknownDiffHTMLConverterAsync = ({ i18n, req })=>{
                 nodeTypeSpecifier = node.fields.blockType;
                 nodeType = 'InlineBlock';
             }
-            const JSX = /*#__PURE__*/ _jsxs("div", {
+            const JSX = /*#__PURE__*/ _jsxDEV("div", {
                 className: `${baseClass}${providedCSSString}`,
                 "data-enable-match": "true",
                 "data-fields-hash": `${nodeFieldsHash}`,
                 children: [
-                    nodeTypeSpecifier && /*#__PURE__*/ _jsxs("span", {
+                    nodeTypeSpecifier && /*#__PURE__*/ _jsxDEV("span", {
                         className: `${baseClass}__specifier`,
                         children: [
                             nodeTypeSpecifier,
                             " "
                         ]
-                    }),
-                    /*#__PURE__*/ _jsx("span", {
+                    }, void 0, true, {
+                        fileName: "src/field/Diff/converters/unknown/index.tsx",
+                        lineNumber: 47,
+                        columnNumber: 13
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("span", {
                         children: nodeType
-                    }),
-                    /*#__PURE__*/ _jsx("div", {
+                    }, void 0, false, {
+                        fileName: "src/field/Diff/converters/unknown/index.tsx",
+                        lineNumber: 49,
+                        columnNumber: 11
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
                         className: `${baseClass}__meta`,
-                        children: /*#__PURE__*/ _jsx("br", {})
-                    })
+                        children: /*#__PURE__*/ _jsxDEV("br", {}, void 0, false, {
+                            fileName: "src/field/Diff/converters/unknown/index.tsx",
+                            lineNumber: 51,
+                            columnNumber: 13
+                        }, this)
+                    }, void 0, false, {
+                        fileName: "src/field/Diff/converters/unknown/index.tsx",
+                        lineNumber: 50,
+                        columnNumber: 11
+                    }, this)
                 ]
-            });
+            }, void 0, true, {
+                fileName: "src/field/Diff/converters/unknown/index.tsx",
+                lineNumber: 41,
+                columnNumber: 9
+            }, this);
             // Render to HTML
             const html = ReactDOMServer.renderToStaticMarkup(JSX);
             return html;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/Diff/converters/unknown/index.tsx"],"sourcesContent":["import type { LexicalNode } from 'lexical'\nimport type { PayloadRequest } from 'payload'\n\nimport { type I18nClient } from '@payloadcms/translations'\n\nimport './index.scss'\n\nimport { createHash } from 'crypto'\n\nimport type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js'\nimport type { SerializedBlockNode } from '../../../../nodeTypes.js'\n\nconst baseClass = 'lexical-unknown-diff'\n\nexport const UnknownDiffHTMLConverterAsync: (args: {\n  i18n: I18nClient\n  req: PayloadRequest\n}) => HTMLConvertersAsync<LexicalNode> = ({ i18n, req }) => {\n  return {\n    unknown: async ({ node, providedCSSString }) => {\n      const ReactDOMServer = (await import('react-dom/server')).default\n\n      // hash fields to ensure they are diffed if they change\n      const nodeFieldsHash = createHash('sha256')\n        .update(JSON.stringify(node ?? {}))\n        .digest('hex')\n\n      let nodeType = node.type\n\n      let nodeTypeSpecifier: null | string = null\n\n      if (node.type === 'block') {\n        nodeTypeSpecifier = (node as SerializedBlockNode).fields.blockType\n        nodeType = 'Block'\n      } else if (node.type === 'inlineBlock') {\n        nodeTypeSpecifier = (node as SerializedBlockNode).fields.blockType\n        nodeType = 'InlineBlock'\n      }\n\n      const JSX = (\n        <div\n          className={`${baseClass}${providedCSSString}`}\n          data-enable-match=\"true\"\n          data-fields-hash={`${nodeFieldsHash}`}\n        >\n          {nodeTypeSpecifier && (\n            <span className={`${baseClass}__specifier`}>{nodeTypeSpecifier}&nbsp;</span>\n          )}\n          <span>{nodeType}</span>\n          <div className={`${baseClass}__meta`}>\n            <br />\n          </div>\n        </div>\n      )\n\n      // Render to HTML\n      const html = ReactDOMServer.renderToStaticMarkup(JSX)\n\n      return html\n    },\n  }\n}\n"],"names":["createHash","baseClass","UnknownDiffHTMLConverterAsync","i18n","req","unknown","node","providedCSSString","ReactDOMServer","default","nodeFieldsHash","update","JSON","stringify","digest","nodeType","type","nodeTypeSpecifier","fields","blockType","JSX","div","className","data-enable-match","data-fields-hash","span","br","html","renderToStaticMarkup"],"mappings":";AAOA,SAASA,UAAU,QAAQ,SAAQ;AAKnC,MAAMC,YAAY;AAElB,OAAO,MAAMC,gCAG4B,CAAC,EAAEC,IAAI,EAAEC,GAAG,EAAE;IACrD,OAAO;QACLC,SAAS,OAAO,EAAEC,IAAI,EAAEC,iBAAiB,EAAE;YACzC,MAAMC,iBAAiB,AAAC,CAAA,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;YAEjE,uDAAuD;YACvD,MAAMC,iBAAiBV,WAAW,UAC/BW,MAAM,CAACC,KAAKC,SAAS,CAACP,QAAQ,CAAC,IAC/BQ,MAAM,CAAC;YAEV,IAAIC,WAAWT,KAAKU,IAAI;YAExB,IAAIC,oBAAmC;YAEvC,IAAIX,KAAKU,IAAI,KAAK,SAAS;gBACzBC,oBAAoB,AAACX,KAA6BY,MAAM,CAACC,SAAS;gBAClEJ,WAAW;YACb,OAAO,IAAIT,KAAKU,IAAI,KAAK,eAAe;gBACtCC,oBAAoB,AAACX,KAA6BY,MAAM,CAACC,SAAS;gBAClEJ,WAAW;YACb;YAEA,MAAMK,oBACJ,MAACC;gBACCC,WAAW,GAAGrB,YAAYM,mBAAmB;gBAC7CgB,qBAAkB;gBAClBC,oBAAkB,GAAGd,gBAAgB;;oBAEpCO,mCACC,MAACQ;wBAAKH,WAAW,GAAGrB,UAAU,WAAW,CAAC;;4BAAGgB;4BAAkB;;;kCAEjE,KAACQ;kCAAMV;;kCACP,KAACM;wBAAIC,WAAW,GAAGrB,UAAU,MAAM,CAAC;kCAClC,cAAA,KAACyB;;;;YAKP,iBAAiB;YACjB,MAAMC,OAAOnB,eAAeoB,oBAAoB,CAACR;YAEjD,OAAOO;QACT;IACF;AACF,EAAC"}
+{"version":3,"sources":["../../../../../src/field/Diff/converters/unknown/index.tsx"],"sourcesContent":["import type { LexicalNode } from 'lexical'\nimport type { PayloadRequest } from 'payload'\n\nimport { type I18nClient } from '@payloadcms/translations'\n\nimport './index.scss'\n\nimport { createHash } from 'crypto'\n\nimport type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js'\nimport type { SerializedBlockNode } from '../../../../nodeTypes.js'\n\nconst baseClass = 'lexical-unknown-diff'\n\nexport const UnknownDiffHTMLConverterAsync: (args: {\n  i18n: I18nClient\n  req: PayloadRequest\n}) => HTMLConvertersAsync<LexicalNode> = ({ i18n, req }) => {\n  return {\n    unknown: async ({ node, providedCSSString }) => {\n      const ReactDOMServer = (await import('react-dom/server')).default\n\n      // hash fields to ensure they are diffed if they change\n      const nodeFieldsHash = createHash('sha256')\n        .update(JSON.stringify(node ?? {}))\n        .digest('hex')\n\n      let nodeType = node.type\n\n      let nodeTypeSpecifier: null | string = null\n\n      if (node.type === 'block') {\n        nodeTypeSpecifier = (node as SerializedBlockNode).fields.blockType\n        nodeType = 'Block'\n      } else if (node.type === 'inlineBlock') {\n        nodeTypeSpecifier = (node as SerializedBlockNode).fields.blockType\n        nodeType = 'InlineBlock'\n      }\n\n      const JSX = (\n        <div\n          className={`${baseClass}${providedCSSString}`}\n          data-enable-match=\"true\"\n          data-fields-hash={`${nodeFieldsHash}`}\n        >\n          {nodeTypeSpecifier && (\n            <span className={`${baseClass}__specifier`}>{nodeTypeSpecifier}&nbsp;</span>\n          )}\n          <span>{nodeType}</span>\n          <div className={`${baseClass}__meta`}>\n            <br />\n          </div>\n        </div>\n      )\n\n      // Render to HTML\n      const html = ReactDOMServer.renderToStaticMarkup(JSX)\n\n      return html\n    },\n  }\n}\n"],"names":["createHash","baseClass","UnknownDiffHTMLConverterAsync","i18n","req","unknown","node","providedCSSString","ReactDOMServer","default","nodeFieldsHash","update","JSON","stringify","digest","nodeType","type","nodeTypeSpecifier","fields","blockType","JSX","div","className","data-enable-match","data-fields-hash","span","br","html","renderToStaticMarkup"],"mappings":";AAKA,OAAO,eAAc;AAErB,SAASA,UAAU,QAAQ,SAAQ;AAKnC,MAAMC,YAAY;AAElB,OAAO,MAAMC,gCAG4B,CAAC,EAAEC,IAAI,EAAEC,GAAG,EAAE;IACrD,OAAO;QACLC,SAAS,OAAO,EAAEC,IAAI,EAAEC,iBAAiB,EAAE;YACzC,MAAMC,iBAAiB,AAAC,CAAA,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;YAEjE,uDAAuD;YACvD,MAAMC,iBAAiBV,WAAW,UAC/BW,MAAM,CAACC,KAAKC,SAAS,CAACP,QAAQ,CAAC,IAC/BQ,MAAM,CAAC;YAEV,IAAIC,WAAWT,KAAKU,IAAI;YAExB,IAAIC,oBAAmC;YAEvC,IAAIX,KAAKU,IAAI,KAAK,SAAS;gBACzBC,oBAAoB,AAACX,KAA6BY,MAAM,CAACC,SAAS;gBAClEJ,WAAW;YACb,OAAO,IAAIT,KAAKU,IAAI,KAAK,eAAe;gBACtCC,oBAAoB,AAACX,KAA6BY,MAAM,CAACC,SAAS;gBAClEJ,WAAW;YACb;YAEA,MAAMK,oBACJ,QAACC;gBACCC,WAAW,GAAGrB,YAAYM,mBAAmB;gBAC7CgB,qBAAkB;gBAClBC,oBAAkB,GAAGd,gBAAgB;;oBAEpCO,mCACC,QAACQ;wBAAKH,WAAW,GAAGrB,UAAU,WAAW,CAAC;;4BAAGgB;4BAAkB;;;;;;;kCAEjE,QAACQ;kCAAMV;;;;;;kCACP,QAACM;wBAAIC,WAAW,GAAGrB,UAAU,MAAM,CAAC;kCAClC,cAAA,QAACyB;;;;;;;;;;;;;;;;YAKP,iBAAiB;YACjB,MAAMC,OAAOnB,eAAeoB,oBAAoB,CAACR;YAEjD,OAAOO;QACT;IACF;AACF,EAAC"}

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

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

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

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { File } from '@payloadcms/ui/rsc';
 import { createHash } from 'crypto';
+import './index.scss';
 import { formatFilesize } from 'payload/shared';
 import React from 'react';
 const baseClass = 'lexical-upload-diff';
@@ -29,7 +30,7 @@ export const UploadDiffHTMLConverterAsync = ({ i18n, req })=>{
             const ReactDOMServer = (await import('react-dom/server')).default;
             // hash fields to ensure they are diffed if they change
             const nodeFieldsHash = createHash('sha256').update(JSON.stringify(node.fields ?? {})).digest('hex');
-            const JSX = /*#__PURE__*/ _jsx("div", {
+            const JSX = /*#__PURE__*/ _jsxDEV("div", {
                 className: `${baseClass}${providedCSSString}`,
                 "data-enable-match": "true",
                 "data-fields-hash": `${nodeFieldsHash}`,
@@ -37,48 +38,88 @@ export const UploadDiffHTMLConverterAsync = ({ i18n, req })=>{
                 "data-lexical-upload-id": uploadNode.value,
                 "data-lexical-upload-relation-to": uploadNode.relationTo,
                 "data-src": thumbnailSRC,
-                children: /*#__PURE__*/ _jsxs("div", {
+                children: /*#__PURE__*/ _jsxDEV("div", {
                     className: `${baseClass}__card`,
                     children: [
-                        /*#__PURE__*/ _jsx("div", {
+                        /*#__PURE__*/ _jsxDEV("div", {
                             className: `${baseClass}__thumbnail`,
-                            children: thumbnailSRC?.length ? /*#__PURE__*/ _jsx("img", {
+                            children: thumbnailSRC?.length ? /*#__PURE__*/ _jsxDEV("img", {
                                 alt: uploadDoc?.filename,
                                 src: thumbnailSRC
-                            }) : /*#__PURE__*/ _jsx(File, {})
-                        }),
-                        /*#__PURE__*/ _jsxs("div", {
+                            }, void 0, false, {
+                                fileName: "src/field/Diff/converters/upload/index.tsx",
+                                lineNumber: 70,
+                                columnNumber: 17
+                            }, this) : /*#__PURE__*/ _jsxDEV(File, {}, void 0, false, {
+                                fileName: "src/field/Diff/converters/upload/index.tsx",
+                                lineNumber: 72,
+                                columnNumber: 17
+                            }, this)
+                        }, void 0, false, {
+                            fileName: "src/field/Diff/converters/upload/index.tsx",
+                            lineNumber: 68,
+                            columnNumber: 13
+                        }, this),
+                        /*#__PURE__*/ _jsxDEV("div", {
                             className: `${baseClass}__info`,
                             "data-enable-match": "false",
                             children: [
-                                /*#__PURE__*/ _jsx("strong", {
+                                /*#__PURE__*/ _jsxDEV("strong", {
                                     children: uploadDoc?.filename
-                                }),
-                                /*#__PURE__*/ _jsxs("div", {
+                                }, void 0, false, {
+                                    fileName: "src/field/Diff/converters/upload/index.tsx",
+                                    lineNumber: 76,
+                                    columnNumber: 15
+                                }, this),
+                                /*#__PURE__*/ _jsxDEV("div", {
                                     className: `${baseClass}__meta`,
                                     children: [
                                         formatFilesize(uploadDoc?.filesize),
-                                        typeof uploadDoc?.width === 'number' && typeof uploadDoc?.height === 'number' && /*#__PURE__*/ _jsxs(React.Fragment, {
+                                        typeof uploadDoc?.width === 'number' && typeof uploadDoc?.height === 'number' && /*#__PURE__*/ _jsxDEV(React.Fragment, {
                                             children: [
                                                 " - ",
                                                 uploadDoc?.width,
                                                 "x",
                                                 uploadDoc?.height
                                             ]
-                                        }),
-                                        uploadDoc?.mimeType && /*#__PURE__*/ _jsxs(React.Fragment, {
+                                        }, void 0, true, {
+                                            fileName: "src/field/Diff/converters/upload/index.tsx",
+                                            lineNumber: 80,
+                                            columnNumber: 19
+                                        }, this),
+                                        uploadDoc?.mimeType && /*#__PURE__*/ _jsxDEV(React.Fragment, {
                                             children: [
                                                 " - ",
                                                 uploadDoc?.mimeType
                                             ]
-                                        })
+                                        }, void 0, true, {
+                                            fileName: "src/field/Diff/converters/upload/index.tsx",
+                                            lineNumber: 86,
+                                            columnNumber: 19
+                                        }, this)
                                     ]
-                                })
+                                }, void 0, true, {
+                                    fileName: "src/field/Diff/converters/upload/index.tsx",
+                                    lineNumber: 77,
+                                    columnNumber: 15
+                                }, this)
                             ]
-                        })
+                        }, void 0, true, {
+                            fileName: "src/field/Diff/converters/upload/index.tsx",
+                            lineNumber: 75,
+                            columnNumber: 13
+                        }, this)
                     ]
-                })
-            });
+                }, void 0, true, {
+                    fileName: "src/field/Diff/converters/upload/index.tsx",
+                    lineNumber: 67,
+                    columnNumber: 11
+                }, this)
+            }, void 0, false, {
+                fileName: "src/field/Diff/converters/upload/index.tsx",
+                lineNumber: 58,
+                columnNumber: 9
+            }, this);
             // Render to HTML
             const html = ReactDOMServer.renderToStaticMarkup(JSX);
             return html;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/Diff/converters/upload/index.tsx"],"sourcesContent":["import type { FileData, PayloadRequest, TypeWithID } from 'payload'\n\nimport { type I18nClient } from '@payloadcms/translations'\nimport { File } from '@payloadcms/ui/rsc'\nimport { createHash } from 'crypto'\n\nimport './index.scss'\n\nimport { formatFilesize } from 'payload/shared'\nimport React from 'react'\n\nimport type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js'\nimport type { UploadDataImproved } from '../../../../features/upload/server/nodes/UploadNode.js'\nimport type { SerializedUploadNode } from '../../../../nodeTypes.js'\n\nconst baseClass = 'lexical-upload-diff'\n\nexport const UploadDiffHTMLConverterAsync: (args: {\n  i18n: I18nClient\n  req: PayloadRequest\n}) => HTMLConvertersAsync<SerializedUploadNode> = ({ i18n, req }) => {\n  return {\n    upload: async ({ node, populate, providedCSSString }) => {\n      const uploadNode = node as UploadDataImproved\n\n      let uploadDoc: (FileData & TypeWithID) | undefined = undefined\n\n      // If there's no valid upload data, populate return an empty string\n      if (typeof uploadNode.value !== 'object') {\n        if (!populate) {\n          return ''\n        }\n        uploadDoc = await populate<FileData & TypeWithID>({\n          id: uploadNode.value,\n          collectionSlug: uploadNode.relationTo,\n        })\n      } else {\n        uploadDoc = uploadNode.value as unknown as FileData & TypeWithID\n      }\n\n      if (!uploadDoc) {\n        return ''\n      }\n\n      const relatedCollection = req.payload.collections[uploadNode.relationTo]?.config\n\n      const thumbnailSRC: string =\n        ('thumbnailURL' in uploadDoc && (uploadDoc?.thumbnailURL as string)) || uploadDoc?.url || ''\n\n      const ReactDOMServer = (await import('react-dom/server')).default\n\n      // hash fields to ensure they are diffed if they change\n      const nodeFieldsHash = createHash('sha256')\n        .update(JSON.stringify(node.fields ?? {}))\n        .digest('hex')\n\n      const JSX = (\n        <div\n          className={`${baseClass}${providedCSSString}`}\n          data-enable-match=\"true\"\n          data-fields-hash={`${nodeFieldsHash}`}\n          data-filename={uploadDoc?.filename}\n          data-lexical-upload-id={uploadNode.value}\n          data-lexical-upload-relation-to={uploadNode.relationTo}\n          data-src={thumbnailSRC}\n        >\n          <div className={`${baseClass}__card`}>\n            <div className={`${baseClass}__thumbnail`}>\n              {thumbnailSRC?.length ? (\n                <img alt={uploadDoc?.filename} src={thumbnailSRC} />\n              ) : (\n                <File />\n              )}\n            </div>\n            <div className={`${baseClass}__info`} data-enable-match=\"false\">\n              <strong>{uploadDoc?.filename}</strong>\n              <div className={`${baseClass}__meta`}>\n                {formatFilesize(uploadDoc?.filesize)}\n                {typeof uploadDoc?.width === 'number' && typeof uploadDoc?.height === 'number' && (\n                  <React.Fragment>\n                    &nbsp;-&nbsp;\n                    {uploadDoc?.width}x{uploadDoc?.height}\n                  </React.Fragment>\n                )}\n                {uploadDoc?.mimeType && (\n                  <React.Fragment>\n                    &nbsp;-&nbsp;\n                    {uploadDoc?.mimeType}\n                  </React.Fragment>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      )\n\n      // Render to HTML\n      const html = ReactDOMServer.renderToStaticMarkup(JSX)\n\n      return html\n    },\n  }\n}\n"],"names":["File","createHash","formatFilesize","React","baseClass","UploadDiffHTMLConverterAsync","i18n","req","upload","node","populate","providedCSSString","uploadNode","uploadDoc","undefined","value","id","collectionSlug","relationTo","relatedCollection","payload","collections","config","thumbnailSRC","thumbnailURL","url","ReactDOMServer","default","nodeFieldsHash","update","JSON","stringify","fields","digest","JSX","div","className","data-enable-match","data-fields-hash","data-filename","filename","data-lexical-upload-id","data-lexical-upload-relation-to","data-src","length","img","alt","src","strong","filesize","width","height","Fragment","mimeType","html","renderToStaticMarkup"],"mappings":";AAGA,SAASA,IAAI,QAAQ,qBAAoB;AACzC,SAASC,UAAU,QAAQ,SAAQ;AAInC,SAASC,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,WAAW,QAAO;AAMzB,MAAMC,YAAY;AAElB,OAAO,MAAMC,+BAGqC,CAAC,EAAEC,IAAI,EAAEC,GAAG,EAAE;IAC9D,OAAO;QACLC,QAAQ,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE;YAClD,MAAMC,aAAaH;YAEnB,IAAII,YAAiDC;YAErD,mEAAmE;YACnE,IAAI,OAAOF,WAAWG,KAAK,KAAK,UAAU;gBACxC,IAAI,CAACL,UAAU;oBACb,OAAO;gBACT;gBACAG,YAAY,MAAMH,SAAgC;oBAChDM,IAAIJ,WAAWG,KAAK;oBACpBE,gBAAgBL,WAAWM,UAAU;gBACvC;YACF,OAAO;gBACLL,YAAYD,WAAWG,KAAK;YAC9B;YAEA,IAAI,CAACF,WAAW;gBACd,OAAO;YACT;YAEA,MAAMM,oBAAoBZ,IAAIa,OAAO,CAACC,WAAW,CAACT,WAAWM,UAAU,CAAC,EAAEI;YAE1E,MAAMC,eACJ,AAAC,kBAAkBV,aAAcA,WAAWW,gBAA4BX,WAAWY,OAAO;YAE5F,MAAMC,iBAAiB,AAAC,CAAA,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;YAEjE,uDAAuD;YACvD,MAAMC,iBAAiB3B,WAAW,UAC/B4B,MAAM,CAACC,KAAKC,SAAS,CAACtB,KAAKuB,MAAM,IAAI,CAAC,IACtCC,MAAM,CAAC;YAEV,MAAMC,oBACJ,KAACC;gBACCC,WAAW,GAAGhC,YAAYO,mBAAmB;gBAC7C0B,qBAAkB;gBAClBC,oBAAkB,GAAGV,gBAAgB;gBACrCW,iBAAe1B,WAAW2B;gBAC1BC,0BAAwB7B,WAAWG,KAAK;gBACxC2B,mCAAiC9B,WAAWM,UAAU;gBACtDyB,YAAUpB;0BAEV,cAAA,MAACY;oBAAIC,WAAW,GAAGhC,UAAU,MAAM,CAAC;;sCAClC,KAAC+B;4BAAIC,WAAW,GAAGhC,UAAU,WAAW,CAAC;sCACtCmB,cAAcqB,uBACb,KAACC;gCAAIC,KAAKjC,WAAW2B;gCAAUO,KAAKxB;+CAEpC,KAACvB;;sCAGL,MAACmC;4BAAIC,WAAW,GAAGhC,UAAU,MAAM,CAAC;4BAAEiC,qBAAkB;;8CACtD,KAACW;8CAAQnC,WAAW2B;;8CACpB,MAACL;oCAAIC,WAAW,GAAGhC,UAAU,MAAM,CAAC;;wCACjCF,eAAeW,WAAWoC;wCAC1B,OAAOpC,WAAWqC,UAAU,YAAY,OAAOrC,WAAWsC,WAAW,0BACpE,MAAChD,MAAMiD,QAAQ;;gDAAC;gDAEbvC,WAAWqC;gDAAM;gDAAErC,WAAWsC;;;wCAGlCtC,WAAWwC,0BACV,MAAClD,MAAMiD,QAAQ;;gDAAC;gDAEbvC,WAAWwC;;;;;;;;;;YAS1B,iBAAiB;YACjB,MAAMC,OAAO5B,eAAe6B,oBAAoB,CAACrB;YAEjD,OAAOoB;QACT;IACF;AACF,EAAC"}
+{"version":3,"sources":["../../../../../src/field/Diff/converters/upload/index.tsx"],"sourcesContent":["import type { FileData, PayloadRequest, TypeWithID } from 'payload'\n\nimport { type I18nClient } from '@payloadcms/translations'\nimport { File } from '@payloadcms/ui/rsc'\nimport { createHash } from 'crypto'\n\nimport './index.scss'\n\nimport { formatFilesize } from 'payload/shared'\nimport React from 'react'\n\nimport type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js'\nimport type { UploadDataImproved } from '../../../../features/upload/server/nodes/UploadNode.js'\nimport type { SerializedUploadNode } from '../../../../nodeTypes.js'\n\nconst baseClass = 'lexical-upload-diff'\n\nexport const UploadDiffHTMLConverterAsync: (args: {\n  i18n: I18nClient\n  req: PayloadRequest\n}) => HTMLConvertersAsync<SerializedUploadNode> = ({ i18n, req }) => {\n  return {\n    upload: async ({ node, populate, providedCSSString }) => {\n      const uploadNode = node as UploadDataImproved\n\n      let uploadDoc: (FileData & TypeWithID) | undefined = undefined\n\n      // If there's no valid upload data, populate return an empty string\n      if (typeof uploadNode.value !== 'object') {\n        if (!populate) {\n          return ''\n        }\n        uploadDoc = await populate<FileData & TypeWithID>({\n          id: uploadNode.value,\n          collectionSlug: uploadNode.relationTo,\n        })\n      } else {\n        uploadDoc = uploadNode.value as unknown as FileData & TypeWithID\n      }\n\n      if (!uploadDoc) {\n        return ''\n      }\n\n      const relatedCollection = req.payload.collections[uploadNode.relationTo]?.config\n\n      const thumbnailSRC: string =\n        ('thumbnailURL' in uploadDoc && (uploadDoc?.thumbnailURL as string)) || uploadDoc?.url || ''\n\n      const ReactDOMServer = (await import('react-dom/server')).default\n\n      // hash fields to ensure they are diffed if they change\n      const nodeFieldsHash = createHash('sha256')\n        .update(JSON.stringify(node.fields ?? {}))\n        .digest('hex')\n\n      const JSX = (\n        <div\n          className={`${baseClass}${providedCSSString}`}\n          data-enable-match=\"true\"\n          data-fields-hash={`${nodeFieldsHash}`}\n          data-filename={uploadDoc?.filename}\n          data-lexical-upload-id={uploadNode.value}\n          data-lexical-upload-relation-to={uploadNode.relationTo}\n          data-src={thumbnailSRC}\n        >\n          <div className={`${baseClass}__card`}>\n            <div className={`${baseClass}__thumbnail`}>\n              {thumbnailSRC?.length ? (\n                <img alt={uploadDoc?.filename} src={thumbnailSRC} />\n              ) : (\n                <File />\n              )}\n            </div>\n            <div className={`${baseClass}__info`} data-enable-match=\"false\">\n              <strong>{uploadDoc?.filename}</strong>\n              <div className={`${baseClass}__meta`}>\n                {formatFilesize(uploadDoc?.filesize)}\n                {typeof uploadDoc?.width === 'number' && typeof uploadDoc?.height === 'number' && (\n                  <React.Fragment>\n                    &nbsp;-&nbsp;\n                    {uploadDoc?.width}x{uploadDoc?.height}\n                  </React.Fragment>\n                )}\n                {uploadDoc?.mimeType && (\n                  <React.Fragment>\n                    &nbsp;-&nbsp;\n                    {uploadDoc?.mimeType}\n                  </React.Fragment>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      )\n\n      // Render to HTML\n      const html = ReactDOMServer.renderToStaticMarkup(JSX)\n\n      return html\n    },\n  }\n}\n"],"names":["File","createHash","formatFilesize","React","baseClass","UploadDiffHTMLConverterAsync","i18n","req","upload","node","populate","providedCSSString","uploadNode","uploadDoc","undefined","value","id","collectionSlug","relationTo","relatedCollection","payload","collections","config","thumbnailSRC","thumbnailURL","url","ReactDOMServer","default","nodeFieldsHash","update","JSON","stringify","fields","digest","JSX","div","className","data-enable-match","data-fields-hash","data-filename","filename","data-lexical-upload-id","data-lexical-upload-relation-to","data-src","length","img","alt","src","strong","filesize","width","height","Fragment","mimeType","html","renderToStaticMarkup"],"mappings":";AAGA,SAASA,IAAI,QAAQ,qBAAoB;AACzC,SAASC,UAAU,QAAQ,SAAQ;AAEnC,OAAO,eAAc;AAErB,SAASC,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,WAAW,QAAO;AAMzB,MAAMC,YAAY;AAElB,OAAO,MAAMC,+BAGqC,CAAC,EAAEC,IAAI,EAAEC,GAAG,EAAE;IAC9D,OAAO;QACLC,QAAQ,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE;YAClD,MAAMC,aAAaH;YAEnB,IAAII,YAAiDC;YAErD,mEAAmE;YACnE,IAAI,OAAOF,WAAWG,KAAK,KAAK,UAAU;gBACxC,IAAI,CAACL,UAAU;oBACb,OAAO;gBACT;gBACAG,YAAY,MAAMH,SAAgC;oBAChDM,IAAIJ,WAAWG,KAAK;oBACpBE,gBAAgBL,WAAWM,UAAU;gBACvC;YACF,OAAO;gBACLL,YAAYD,WAAWG,KAAK;YAC9B;YAEA,IAAI,CAACF,WAAW;gBACd,OAAO;YACT;YAEA,MAAMM,oBAAoBZ,IAAIa,OAAO,CAACC,WAAW,CAACT,WAAWM,UAAU,CAAC,EAAEI;YAE1E,MAAMC,eACJ,AAAC,kBAAkBV,aAAcA,WAAWW,gBAA4BX,WAAWY,OAAO;YAE5F,MAAMC,iBAAiB,AAAC,CAAA,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;YAEjE,uDAAuD;YACvD,MAAMC,iBAAiB3B,WAAW,UAC/B4B,MAAM,CAACC,KAAKC,SAAS,CAACtB,KAAKuB,MAAM,IAAI,CAAC,IACtCC,MAAM,CAAC;YAEV,MAAMC,oBACJ,QAACC;gBACCC,WAAW,GAAGhC,YAAYO,mBAAmB;gBAC7C0B,qBAAkB;gBAClBC,oBAAkB,GAAGV,gBAAgB;gBACrCW,iBAAe1B,WAAW2B;gBAC1BC,0BAAwB7B,WAAWG,KAAK;gBACxC2B,mCAAiC9B,WAAWM,UAAU;gBACtDyB,YAAUpB;0BAEV,cAAA,QAACY;oBAAIC,WAAW,GAAGhC,UAAU,MAAM,CAAC;;sCAClC,QAAC+B;4BAAIC,WAAW,GAAGhC,UAAU,WAAW,CAAC;sCACtCmB,cAAcqB,uBACb,QAACC;gCAAIC,KAAKjC,WAAW2B;gCAAUO,KAAKxB;;;;;qDAEpC,QAACvB;;;;;;;;;;sCAGL,QAACmC;4BAAIC,WAAW,GAAGhC,UAAU,MAAM,CAAC;4BAAEiC,qBAAkB;;8CACtD,QAACW;8CAAQnC,WAAW2B;;;;;;8CACpB,QAACL;oCAAIC,WAAW,GAAGhC,UAAU,MAAM,CAAC;;wCACjCF,eAAeW,WAAWoC;wCAC1B,OAAOpC,WAAWqC,UAAU,YAAY,OAAOrC,WAAWsC,WAAW,0BACpE,QAAChD,MAAMiD,QAAQ;;gDAAC;gDAEbvC,WAAWqC;gDAAM;gDAAErC,WAAWsC;;;;;;;wCAGlCtC,WAAWwC,0BACV,QAAClD,MAAMiD,QAAQ;;gDAAC;gDAEbvC,WAAWwC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAS1B,iBAAiB;YACjB,MAAMC,OAAO5B,eAAe6B,oBAAoB,CAACrB;YAEjD,OAAOoB;QACT;IACF;AACF,EAAC"}