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

package/dist/features/upload/server/index.js

@@ -7,12 +7,6 @@ import { i18n } from './i18n.js';
 import { UploadMarkdownTransformer } from './markdownTransformer.js';
 import { UploadServerNode } from './nodes/UploadNode.js';
 import { uploadValidation } from './validate.js';
-/**
- * Get the absolute URL for an upload URL by potentially prepending the serverURL
- */
-function getAbsoluteURL(url, payload) {
-  return url?.startsWith('http') ? url : (payload?.config?.serverURL || '') + url;
-}
 export const UploadFeature = createServerFeature({
   feature: async ({
     config: _config,
@@ -77,78 +71,6 @@ export const UploadFeature = createServerFeature({
       i18n,
       markdownTransformers: [UploadMarkdownTransformer],
       nodes: [createNode({
-        converters: {
-          html: {
-            converter: async ({
-              currentDepth,
-              depth,
-              draft,
-              node,
-              overrideAccess,
-              req,
-              showHiddenFields
-            }) => {
-              // @ts-expect-error - for backwards-compatibility
-              const id = node?.value?.id || node?.value;
-              if (req?.payload) {
-                const uploadDocument = {};
-                try {
-                  await populate({
-                    id,
-                    collectionSlug: node.relationTo,
-                    currentDepth,
-                    data: uploadDocument,
-                    depth,
-                    draft,
-                    key: 'value',
-                    overrideAccess,
-                    req,
-                    showHiddenFields
-                  });
-                } catch (ignored) {
-                  // eslint-disable-next-line no-console
-                  console.error('Lexical upload node HTML converter: error fetching upload file', ignored, 'Node:', node);
-                  return `<img />`;
-                }
-                const url = getAbsoluteURL(uploadDocument?.value?.url ?? '', req?.payload);
-                const alt = node.fields?.alt || uploadDocument?.value?.alt || '';
-                /**
-                * If the upload is not an image, return a link to the upload
-                */
-                if (!uploadDocument?.value?.mimeType?.startsWith('image')) {
-                  return `<a href="${url}" rel="noopener noreferrer">${uploadDocument.value?.filename}</a>`;
-                }
-                /**
-                * If the upload is a simple image with no different sizes, return a simple img tag
-                */
-                if (!uploadDocument?.value?.sizes || !Object.keys(uploadDocument?.value?.sizes).length) {
-                  return `<img src="${url}" alt="${alt}" width="${uploadDocument?.value?.width}"  height="${uploadDocument?.value?.height}"/>`;
-                }
-                /**
-                * If the upload is an image with different sizes, return a picture element
-                */
-                let pictureHTML = '<picture>';
-                // Iterate through each size in the data.sizes object
-                for (const size in uploadDocument.value?.sizes) {
-                  const imageSize = uploadDocument.value.sizes[size];
-                  // Skip if any property of the size object is null
-                  if (!imageSize.width || !imageSize.height || !imageSize.mimeType || !imageSize.filesize || !imageSize.filename || !imageSize.url) {
-                    continue;
-                  }
-                  const imageSizeURL = getAbsoluteURL(imageSize?.url, req?.payload);
-                  pictureHTML += `<source srcset="${imageSizeURL}" media="(max-width: ${imageSize.width}px)" type="${imageSize.mimeType}">`;
-                }
-                // Add the default img tag
-                pictureHTML += `<img src="${url}" alt="${alt}" width="${uploadDocument.value?.width}" height="${uploadDocument.value?.height}">`;
-                pictureHTML += '</picture>';
-                return pictureHTML;
-              } else {
-                return `<img src="${id}" />`;
-              }
-            },
-            nodeTypes: [UploadServerNode.getType()]
-          }
-        },
         getSubFields: ({
           node,
           req

package/dist/features/upload/server/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["sanitizeFields","populate","createServerFeature","createNode","uploadPopulationPromiseHOC","i18n","UploadMarkdownTransformer","UploadServerNode","uploadValidation","getAbsoluteURL","url","payload","startsWith","config","serverURL","UploadFeature","feature","_config","isRoot","parentIsLocalized","props","collections","clientProps","disabledCollections","enabledCollections","collection","hasExtraFields","fields","length","validRelationships","map","c","slug","collectionKey","requireFieldLevelRichTextEditor","ClientFeature","clientFeatureProps","generateSchemaMap","schemaMap","Map","set","markdownTransformers","nodes","converters","html","converter","currentDepth","depth","draft","node","overrideAccess","req","showHiddenFields","id","value","uploadDocument","collectionSlug","relationTo","data","key","ignored","console","error","alt","mimeType","filename","sizes","Object","keys","width","height","pictureHTML","size","imageSize","filesize","imageSizeURL","nodeTypes","getType","getSubFields","allSubFields","collectionFields","concat","collectionFieldSchema","Array","isArray","getSubFieldsData","graphQLPopulationPromises","hooks","afterRead","populateArg","populationPromises","populateDepth","maxDepth","undefined","push","select","defaultPopulate","validations","sanitizedServerFeatureProps"],"sources":["../../../../src/features/upload/server/index.ts"],"sourcesContent":["import type {\n  Config,\n  Field,\n  FieldSchemaMap,\n  FileData,\n  FileSizeImproved,\n  Payload,\n  TypeWithID,\n  UploadCollectionSlug,\n} from 'payload'\n\nimport { sanitizeFields } from 'payload'\n\nimport type { UploadFeaturePropsClient } from '../client/index.js'\n\nimport { populate } from '../../../populateGraphQL/populate.js'\nimport { createServerFeature } from '../../../utilities/createServerFeature.js'\nimport { createNode } from '../../typeUtilities.js'\nimport { uploadPopulationPromiseHOC } from './graphQLPopulationPromise.js'\nimport { i18n } from './i18n.js'\nimport { UploadMarkdownTransformer } from './markdownTransformer.js'\nimport { UploadServerNode } from './nodes/UploadNode.js'\nimport { uploadValidation } from './validate.js'\n\nexport type ExclusiveUploadFeatureProps =\n  | {\n      /**\n       * The collections that should be disabled. Overrides the `enableRichTextRelationship` property in the collection config.\n       * When this property is set, `enabledCollections` will not be available.\n       **/\n      disabledCollections?: UploadCollectionSlug[]\n\n      // Ensures that enabledCollections is not available when disabledCollections is set\n      enabledCollections?: never\n    }\n  | {\n      // Ensures that disabledCollections is not available when enabledCollections is set\n      disabledCollections?: never\n\n      /**\n       * The collections that should be enabled. Overrides the `enableRichTextRelationship` property in the collection config\n       * When this property is set, `disabledCollections` will not be available.\n       **/\n      enabledCollections?: UploadCollectionSlug[]\n    }\n\nexport type UploadFeatureProps = {\n  collections?: {\n    [collection: UploadCollectionSlug]: {\n      fields: Field[]\n    }\n  }\n  /**\n   * Sets a maximum population depth for this upload (not the fields for this upload), regardless of the remaining depth when the respective field is reached.\n   * This behaves exactly like the maxDepth properties of relationship and upload fields.\n   *\n   * {@link https://payloadcms.com/docs/getting-started/concepts#field-level-max-depth}\n   */\n  maxDepth?: number\n} & ExclusiveUploadFeatureProps\n\n/**\n * Get the absolute URL for an upload URL by potentially prepending the serverURL\n */\nfunction getAbsoluteURL(url: string, payload: Payload): string {\n  return url?.startsWith('http') ? url : (payload?.config?.serverURL || '') + url\n}\n\nexport const UploadFeature = createServerFeature<\n  UploadFeatureProps,\n  UploadFeatureProps,\n  UploadFeaturePropsClient\n>({\n  feature: async ({ config: _config, isRoot, parentIsLocalized, props }) => {\n    if (!props) {\n      props = { collections: {} }\n    }\n\n    const clientProps: UploadFeaturePropsClient = {\n      collections: {},\n    }\n    if (props.disabledCollections) {\n      clientProps.disabledCollections = props.disabledCollections\n    }\n    if (props.enabledCollections) {\n      clientProps.enabledCollections = props.enabledCollections\n    }\n\n    if (props.collections) {\n      for (const collection in props.collections) {\n        clientProps.collections[collection] = {\n          hasExtraFields: props.collections[collection]!.fields.length >= 1,\n        }\n      }\n    }\n\n    const validRelationships = _config.collections.map((c) => c.slug) || []\n\n    for (const collectionKey in props.collections) {\n      const collection = props.collections[collectionKey]!\n      if (collection.fields?.length) {\n        collection.fields = await sanitizeFields({\n          config: _config as unknown as Config,\n          fields: collection.fields,\n          parentIsLocalized,\n          requireFieldLevelRichTextEditor: isRoot,\n          validRelationships,\n        })\n      }\n    }\n\n    return {\n      ClientFeature: '@payloadcms/richtext-lexical/client#UploadFeatureClient',\n      clientFeatureProps: clientProps,\n      generateSchemaMap: ({ props }) => {\n        if (!props?.collections) {\n          return null\n        }\n\n        const schemaMap: FieldSchemaMap = new Map()\n\n        for (const collectionKey in props.collections) {\n          const collection = props.collections[collectionKey]!\n          if (collection.fields?.length) {\n            schemaMap.set(collectionKey, {\n              fields: collection.fields,\n            })\n          }\n        }\n\n        return schemaMap\n      },\n      i18n,\n      markdownTransformers: [UploadMarkdownTransformer],\n      nodes: [\n        createNode({\n          converters: {\n            html: {\n              converter: async ({\n                currentDepth,\n                depth,\n                draft,\n                node,\n                overrideAccess,\n                req,\n                showHiddenFields,\n              }) => {\n                // @ts-expect-error - for backwards-compatibility\n                const id = node?.value?.id || node?.value\n\n                if (req?.payload) {\n                  const uploadDocument: {\n                    value?: FileData & TypeWithID\n                  } = {}\n\n                  try {\n                    await populate({\n                      id,\n                      collectionSlug: node.relationTo,\n                      currentDepth,\n                      data: uploadDocument,\n                      depth,\n                      draft,\n                      key: 'value',\n                      overrideAccess,\n                      req,\n                      showHiddenFields,\n                    })\n                  } catch (ignored) {\n                    // eslint-disable-next-line no-console\n                    console.error(\n                      'Lexical upload node HTML converter: error fetching upload file',\n                      ignored,\n                      'Node:',\n                      node,\n                    )\n                    return `<img />`\n                  }\n\n                  const url = getAbsoluteURL(uploadDocument?.value?.url ?? '', req?.payload)\n\n                  const alt =\n                    (node.fields?.alt as string) ||\n                    (uploadDocument?.value as { alt?: string })?.alt ||\n                    ''\n\n                  /**\n                   * If the upload is not an image, return a link to the upload\n                   */\n                  if (!uploadDocument?.value?.mimeType?.startsWith('image')) {\n                    return `<a href=\"${url}\" rel=\"noopener noreferrer\">${uploadDocument.value?.filename}</a>`\n                  }\n\n                  /**\n                   * If the upload is a simple image with no different sizes, return a simple img tag\n                   */\n                  if (\n                    !uploadDocument?.value?.sizes ||\n                    !Object.keys(uploadDocument?.value?.sizes).length\n                  ) {\n                    return `<img src=\"${url}\" alt=\"${alt}\" width=\"${uploadDocument?.value?.width}\"  height=\"${uploadDocument?.value?.height}\"/>`\n                  }\n\n                  /**\n                   * If the upload is an image with different sizes, return a picture element\n                   */\n                  let pictureHTML = '<picture>'\n\n                  // Iterate through each size in the data.sizes object\n                  for (const size in uploadDocument.value?.sizes) {\n                    const imageSize = uploadDocument.value.sizes[size] as FileSizeImproved\n\n                    // Skip if any property of the size object is null\n                    if (\n                      !imageSize.width ||\n                      !imageSize.height ||\n                      !imageSize.mimeType ||\n                      !imageSize.filesize ||\n                      !imageSize.filename ||\n                      !imageSize.url\n                    ) {\n                      continue\n                    }\n                    const imageSizeURL = getAbsoluteURL(imageSize?.url, req?.payload)\n\n                    pictureHTML += `<source srcset=\"${imageSizeURL}\" media=\"(max-width: ${imageSize.width}px)\" type=\"${imageSize.mimeType}\">`\n                  }\n\n                  // Add the default img tag\n                  pictureHTML += `<img src=\"${url}\" alt=\"${alt}\" width=\"${uploadDocument.value?.width}\" height=\"${uploadDocument.value?.height}\">`\n                  pictureHTML += '</picture>'\n                  return pictureHTML\n                } else {\n                  return `<img src=\"${id}\" />`\n                }\n              },\n              nodeTypes: [UploadServerNode.getType()],\n            },\n          },\n          getSubFields: ({ node, req }) => {\n            if (!node) {\n              let allSubFields: Field[] = []\n              for (const collection in props?.collections) {\n                const collectionFields = props.collections[collection]!.fields\n                allSubFields = allSubFields.concat(collectionFields)\n              }\n              return allSubFields\n            }\n            const collection = req ? req.payload.collections[node?.relationTo] : null\n\n            if (collection) {\n              const collectionFieldSchema = props?.collections?.[node?.relationTo]?.fields\n\n              if (Array.isArray(collectionFieldSchema)) {\n                if (!collectionFieldSchema?.length) {\n                  return null\n                }\n                return collectionFieldSchema\n              }\n            }\n            return null\n          },\n          getSubFieldsData: ({ node }) => {\n            return node?.fields\n          },\n          graphQLPopulationPromises: [uploadPopulationPromiseHOC(props)],\n          hooks: {\n            afterRead: [\n              ({\n                currentDepth,\n                depth,\n                draft,\n                node,\n                overrideAccess,\n                populateArg,\n                populationPromises,\n                req,\n                showHiddenFields,\n              }) => {\n                if (!node?.value) {\n                  return node\n                }\n                const collection = req.payload.collections[node?.relationTo]\n\n                if (!collection) {\n                  return node\n                }\n                // @ts-expect-error - Fix in Payload v4\n                const id = node?.value?.id || node?.value // for backwards-compatibility\n\n                const populateDepth =\n                  props?.maxDepth !== undefined && props?.maxDepth < depth ? props?.maxDepth : depth\n\n                populationPromises.push(\n                  populate({\n                    id,\n                    collectionSlug: collection.config.slug,\n                    currentDepth,\n                    data: node,\n                    depth: populateDepth,\n                    draft,\n                    key: 'value',\n                    overrideAccess,\n                    req,\n                    select:\n                      populateArg?.[collection.config.slug] ?? collection.config.defaultPopulate,\n                    showHiddenFields,\n                  }),\n                )\n\n                return node\n              },\n            ],\n          },\n          node: UploadServerNode,\n          validations: [uploadValidation(props)],\n        }),\n      ],\n      sanitizedServerFeatureProps: props,\n    }\n  },\n  key: 'upload',\n})\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["sanitizeFields","populate","createServerFeature","createNode","uploadPopulationPromiseHOC","i18n","UploadMarkdownTransformer","UploadServerNode","uploadValidation","UploadFeature","feature","config","_config","isRoot","parentIsLocalized","props","collections","clientProps","disabledCollections","enabledCollections","collection","hasExtraFields","fields","length","validRelationships","map","c","slug","collectionKey","requireFieldLevelRichTextEditor","ClientFeature","clientFeatureProps","generateSchemaMap","schemaMap","Map","set","markdownTransformers","nodes","getSubFields","node","req","allSubFields","collectionFields","concat","payload","relationTo","collectionFieldSchema","Array","isArray","getSubFieldsData","graphQLPopulationPromises","hooks","afterRead","currentDepth","depth","draft","overrideAccess","populateArg","populationPromises","showHiddenFields","value","id","populateDepth","maxDepth","undefined","push","collectionSlug","data","key","select","defaultPopulate","validations","sanitizedServerFeatureProps"],"sources":["../../../../src/features/upload/server/index.ts"],"sourcesContent":["import type { Config, Field, FieldSchemaMap, UploadCollectionSlug } from 'payload'\n\nimport { sanitizeFields } from 'payload'\n\nimport type { UploadFeaturePropsClient } from '../client/index.js'\n\nimport { populate } from '../../../populateGraphQL/populate.js'\nimport { createServerFeature } from '../../../utilities/createServerFeature.js'\nimport { createNode } from '../../typeUtilities.js'\nimport { uploadPopulationPromiseHOC } from './graphQLPopulationPromise.js'\nimport { i18n } from './i18n.js'\nimport { UploadMarkdownTransformer } from './markdownTransformer.js'\nimport { UploadServerNode } from './nodes/UploadNode.js'\nimport { uploadValidation } from './validate.js'\n\nexport type ExclusiveUploadFeatureProps =\n  | {\n      /**\n       * The collections that should be disabled. Overrides the `enableRichTextRelationship` property in the collection config.\n       * When this property is set, `enabledCollections` will not be available.\n       **/\n      disabledCollections?: UploadCollectionSlug[]\n\n      // Ensures that enabledCollections is not available when disabledCollections is set\n      enabledCollections?: never\n    }\n  | {\n      // Ensures that disabledCollections is not available when enabledCollections is set\n      disabledCollections?: never\n\n      /**\n       * The collections that should be enabled. Overrides the `enableRichTextRelationship` property in the collection config\n       * When this property is set, `disabledCollections` will not be available.\n       **/\n      enabledCollections?: UploadCollectionSlug[]\n    }\n\nexport type UploadFeatureProps = {\n  collections?: {\n    [collection: UploadCollectionSlug]: {\n      fields: Field[]\n    }\n  }\n  /**\n   * Sets a maximum population depth for this upload (not the fields for this upload), regardless of the remaining depth when the respective field is reached.\n   * This behaves exactly like the maxDepth properties of relationship and upload fields.\n   *\n   * {@link https://payloadcms.com/docs/getting-started/concepts#field-level-max-depth}\n   */\n  maxDepth?: number\n} & ExclusiveUploadFeatureProps\n\nexport const UploadFeature = createServerFeature<\n  UploadFeatureProps,\n  UploadFeatureProps,\n  UploadFeaturePropsClient\n>({\n  feature: async ({ config: _config, isRoot, parentIsLocalized, props }) => {\n    if (!props) {\n      props = { collections: {} }\n    }\n\n    const clientProps: UploadFeaturePropsClient = {\n      collections: {},\n    }\n    if (props.disabledCollections) {\n      clientProps.disabledCollections = props.disabledCollections\n    }\n    if (props.enabledCollections) {\n      clientProps.enabledCollections = props.enabledCollections\n    }\n\n    if (props.collections) {\n      for (const collection in props.collections) {\n        clientProps.collections[collection] = {\n          hasExtraFields: props.collections[collection]!.fields.length >= 1,\n        }\n      }\n    }\n\n    const validRelationships = _config.collections.map((c) => c.slug) || []\n\n    for (const collectionKey in props.collections) {\n      const collection = props.collections[collectionKey]!\n      if (collection.fields?.length) {\n        collection.fields = await sanitizeFields({\n          config: _config as unknown as Config,\n          fields: collection.fields,\n          parentIsLocalized,\n          requireFieldLevelRichTextEditor: isRoot,\n          validRelationships,\n        })\n      }\n    }\n\n    return {\n      ClientFeature: '@payloadcms/richtext-lexical/client#UploadFeatureClient',\n      clientFeatureProps: clientProps,\n      generateSchemaMap: ({ props }) => {\n        if (!props?.collections) {\n          return null\n        }\n\n        const schemaMap: FieldSchemaMap = new Map()\n\n        for (const collectionKey in props.collections) {\n          const collection = props.collections[collectionKey]!\n          if (collection.fields?.length) {\n            schemaMap.set(collectionKey, {\n              fields: collection.fields,\n            })\n          }\n        }\n\n        return schemaMap\n      },\n      i18n,\n      markdownTransformers: [UploadMarkdownTransformer],\n      nodes: [\n        createNode({\n          getSubFields: ({ node, req }) => {\n            if (!node) {\n              let allSubFields: Field[] = []\n              for (const collection in props?.collections) {\n                const collectionFields = props.collections[collection]!.fields\n                allSubFields = allSubFields.concat(collectionFields)\n              }\n              return allSubFields\n            }\n            const collection = req ? req.payload.collections[node?.relationTo] : null\n\n            if (collection) {\n              const collectionFieldSchema = props?.collections?.[node?.relationTo]?.fields\n\n              if (Array.isArray(collectionFieldSchema)) {\n                if (!collectionFieldSchema?.length) {\n                  return null\n                }\n                return collectionFieldSchema\n              }\n            }\n            return null\n          },\n          getSubFieldsData: ({ node }) => {\n            return node?.fields\n          },\n          graphQLPopulationPromises: [uploadPopulationPromiseHOC(props)],\n          hooks: {\n            afterRead: [\n              ({\n                currentDepth,\n                depth,\n                draft,\n                node,\n                overrideAccess,\n                populateArg,\n                populationPromises,\n                req,\n                showHiddenFields,\n              }) => {\n                if (!node?.value) {\n                  return node\n                }\n                const collection = req.payload.collections[node?.relationTo]\n\n                if (!collection) {\n                  return node\n                }\n                // @ts-expect-error - Fix in Payload v4\n                const id = node?.value?.id || node?.value // for backwards-compatibility\n\n                const populateDepth =\n                  props?.maxDepth !== undefined && props?.maxDepth < depth ? props?.maxDepth : depth\n\n                populationPromises.push(\n                  populate({\n                    id,\n                    collectionSlug: collection.config.slug,\n                    currentDepth,\n                    data: node,\n                    depth: populateDepth,\n                    draft,\n                    key: 'value',\n                    overrideAccess,\n                    req,\n                    select:\n                      populateArg?.[collection.config.slug] ?? collection.config.defaultPopulate,\n                    showHiddenFields,\n                  }),\n                )\n\n                return node\n              },\n            ],\n          },\n          node: UploadServerNode,\n          validations: [uploadValidation(props)],\n        }),\n      ],\n      sanitizedServerFeatureProps: props,\n    }\n  },\n  key: 'upload',\n})\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,44 @@
+@layer payload-default {
+  .lexical-diff {
+    ul.list-check {
+      padding-left: 0;
+    }
+
+    .checkboxItem {
+      list-style-type: none;
+    }
+
+    .checkboxItem__wrapper {
+      display: flex;
+      align-items: center;
+    }
+
+    .checkboxItem__icon {
+      width: var(--spacer-3);
+      height: var(--spacer-3);
+      margin-right: var(--spacer-2);
+      border: var(--stroke-width-small) solid var(--color-text);
+      border-radius: var(--radius-medium);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+
+      .icon--check {
+        height: var(--spacer-2-5);
+      }
+
+      &[data-match-type='create'] {
+        border-color: var(--diff-create-pill-color);
+      }
+
+      &[data-match-type='delete'] {
+        border-color: var(--diff-delete-pill-color);
+      }
+    }
+
+    .checkboxItem--nested {
+      margin-left: var(--spacer-4);
+    }
+  }
+}

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 './index.scss';
+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,cAAc,CAAA;AAErB,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,0BAA0B,CAAA;AAEtE,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,8BAA8B,EAAE,mBAAmB,CAAC,sBAAsB,CA+DtF,CAAA"}

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckIcon } from '@payloadcms/ui/rsc';
+import './index.css';
 export const ListItemDiffHTMLConverterAsync = {
   listitem: async ({
     node,

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.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"],"mappings":";AAAA,SAASA,SAAS,QAAQ;AAO1B,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 '../../../../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

@@ -0,0 +1,68 @@
+@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;
+    align-items: center;
+    background-color: var(--color-bg);
+    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);
+
+    &[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);
+      }
+    }
+  }
+
+  .lexical-diff .lexical-relationship-diff__card {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex-grow: 1;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .lexical-diff .lexical-relationship-diff__title {
+    display: flex;
+    flex-direction: row;
+    font-weight: 600;
+  }
+
+  .lexical-diff .lexical-relationship-diff__collectionLabel {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

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

@@ -1,6 +1,6 @@
 import type { PayloadRequest } from 'payload';
 import { type I18nClient } from '@payloadcms/translations';
-import './index.scss';
+import './index.css';
 import type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js';
 import type { SerializedRelationshipNode } from '../../../../nodeTypes.js';
 export declare const RelationshipDiffHTMLConverterAsync: (args: {

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,cAAc,CAAA;AAIrB,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;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"}

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

@@ -1,5 +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 = ({

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.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"],"mappings":";AAEA,SAASA,cAAc,QAAyB;AAIhD,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","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":[]}

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

@@ -0,0 +1,37 @@
+@layer payload-default {
+  .lexical-diff .lexical-unknown-diff {
+    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
+    max-width: fit-content;
+    display: flex;
+    align-items: center;
+    background: var(--color-bg);
+    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: calc(var(--spacer-1) * 1.25);
+
+    &[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);
+      }
+    }
+  }
+
+  .lexical-diff .lexical-unknown-diff__specifier {
+    font-family: 'SF Mono', Menlo, Consolas, Monaco, monospace;
+  }
+}

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

@@ -1,7 +1,7 @@
 import type { LexicalNode } from 'lexical';
 import type { PayloadRequest } from 'payload';
 import { type I18nClient } from '@payloadcms/translations';
-import './index.scss';
+import './index.css';
 import type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js';
 export declare const UnknownDiffHTMLConverterAsync: (args: {
     i18n: I18nClient;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/Diff/converters/unknown/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8DAA8D,CAAA;AAKvG,eAAO,MAAM,6BAA6B,EAAE,CAAC,IAAI,EAAE;IACjD,IAAI,EAAE,UAAU,CAAA;IAChB,GAAG,EAAE,cAAc,CAAA;CACpB,KAAK,mBAAmB,CAAC,WAAW,CA4CpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/Diff/converters/unknown/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8DAA8D,CAAA;AAKvG,eAAO,MAAM,6BAA6B,EAAE,CAAC,IAAI,EAAE;IACjD,IAAI,EAAE,UAAU,CAAA;IAChB,GAAG,EAAE,cAAc,CAAA;CACpB,KAAK,mBAAmB,CAAC,WAAW,CA4CpC,CAAA"}

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './index.css';
 import { createHash } from 'crypto';
 const baseClass = 'lexical-unknown-diff';
 export const UnknownDiffHTMLConverterAsync = ({

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["createHash","baseClass","UnknownDiffHTMLConverterAsync","i18n","req","unknown","node","providedCSSString","ReactDOMServer","default","nodeFieldsHash","update","JSON","stringify","digest","nodeType","type","nodeTypeSpecifier","fields","blockType","JSX","_jsxs","className","_jsx","html","renderToStaticMarkup"],"sources":["../../../../../src/field/Diff/converters/unknown/index.tsx"],"sourcesContent":["import type { LexicalNode } from 'lexical'\nimport type { PayloadRequest } from 'payload'\n\nimport { type I18nClient } from '@payloadcms/translations'\n\nimport './index.scss'\n\nimport { createHash } from 'crypto'\n\nimport type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js'\nimport type { SerializedBlockNode } from '../../../../nodeTypes.js'\n\nconst baseClass = 'lexical-unknown-diff'\n\nexport const UnknownDiffHTMLConverterAsync: (args: {\n  i18n: I18nClient\n  req: PayloadRequest\n}) => HTMLConvertersAsync<LexicalNode> = ({ i18n, req }) => {\n  return {\n    unknown: async ({ node, providedCSSString }) => {\n      const ReactDOMServer = (await import('react-dom/server')).default\n\n      // hash fields to ensure they are diffed if they change\n      const nodeFieldsHash = createHash('sha256')\n        .update(JSON.stringify(node ?? {}))\n        .digest('hex')\n\n      let nodeType = node.type\n\n      let nodeTypeSpecifier: null | string = null\n\n      if (node.type === 'block') {\n        nodeTypeSpecifier = (node as SerializedBlockNode).fields.blockType\n        nodeType = 'Block'\n      } else if (node.type === 'inlineBlock') {\n        nodeTypeSpecifier = (node as SerializedBlockNode).fields.blockType\n        nodeType = 'InlineBlock'\n      }\n\n      const JSX = (\n        <div\n          className={`${baseClass}${providedCSSString}`}\n          data-enable-match=\"true\"\n          data-fields-hash={`${nodeFieldsHash}`}\n        >\n          {nodeTypeSpecifier && (\n            <span className={`${baseClass}__specifier`}>{nodeTypeSpecifier}&nbsp;</span>\n          )}\n          <span>{nodeType}</span>\n          <div className={`${baseClass}__meta`}>\n            <br />\n          </div>\n        </div>\n      )\n\n      // Render to HTML\n      const html = ReactDOMServer.renderToStaticMarkup(JSX)\n\n      return html\n    },\n  }\n}\n"],"mappings":";AAOA,SAASA,UAAU,QAAQ;AAK3B,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,6BAAA,GAG4BA,CAAC;EAAEC,IAAI;EAAEC;AAAG,CAAE;EACrD,OAAO;IACLC,OAAA,EAAS,MAAAA,CAAO;MAAEC,IAAI;MAAEC;IAAiB,CAAE;MACzC,MAAMC,cAAA,GAAiB,CAAC,MAAM,MAAM,CAAC,mBAAkB,EAAGC,OAAO;MAEjE;MACA,MAAMC,cAAA,GAAiBV,UAAA,CAAW,UAC/BW,MAAM,CAACC,IAAA,CAAKC,SAAS,CAACP,IAAA,IAAQ,CAAC,IAC/BQ,MAAM,CAAC;MAEV,IAAIC,QAAA,GAAWT,IAAA,CAAKU,IAAI;MAExB,IAAIC,iBAAA,GAAmC;MAEvC,IAAIX,IAAA,CAAKU,IAAI,KAAK,SAAS;QACzBC,iBAAA,GAAoBX,IAAC,CAA6BY,MAAM,CAACC,SAAS;QAClEJ,QAAA,GAAW;MACb,OAAO,IAAIT,IAAA,CAAKU,IAAI,KAAK,eAAe;QACtCC,iBAAA,GAAoBX,IAAC,CAA6BY,MAAM,CAACC,SAAS;QAClEJ,QAAA,GAAW;MACb;MAEA,MAAMK,GAAA,gBACJC,KAAA,CAAC;QACCC,SAAA,EAAW,GAAGrB,SAAA,GAAYM,iBAAA,EAAmB;QAC7C,qBAAkB;QAClB,oBAAkB,GAAGG,cAAA,EAAgB;mBAEpCO,iBAAA,iBACCI,KAAA,CAAC;UAAKC,SAAA,EAAW,GAAGrB,SAAA,aAAsB;qBAAGgB,iBAAA,EAAkB;yBAEjEM,IAAA,CAAC;oBAAMR;yBACPQ,IAAA,CAAC;UAAID,SAAA,EAAW,GAAGrB,SAAA,QAAiB;oBAClC,aAAAsB,IAAA,CAAC;;;MAKP;MACA,MAAMC,IAAA,GAAOhB,cAAA,CAAeiB,oBAAoB,CAACL,GAAA;MAEjD,OAAOI,IAAA;IACT;EACF;AACF","ignoreList":[]}
+{"version":3,"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":[]}

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

@@ -0,0 +1,112 @@
+@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);
+      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);
+      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);
+
+      &[data-match-type='create'] {
+        border-color: var(--diff-create-pill-border);
+        color: var(--diff-create-parent-color);
+
+        * {
+          color: var(--diff-create-parent-color);
+        }
+
+        .lexical-upload-diff__meta {
+          color: var(--diff-create-link-color);
+          * {
+            color: var(--diff-create-link-color);
+          }
+        }
+
+        .lexical-upload-diff__thumbnail {
+          border-radius: 0;
+          border-color: var(--diff-create-pill-border);
+          background-color: none;
+        }
+      }
+
+      &[data-match-type='delete'] {
+        border-color: var(--diff-delete-pill-border);
+        text-decoration-line: none;
+        color: var(--diff-delete-parent-color);
+        background-color: var(--diff-delete-pill-bg);
+
+        .lexical-upload-diff__meta {
+          color: var(--diff-delete-link-color);
+          * {
+            color: var(--diff-delete-link-color);
+          }
+        }
+
+        * {
+          text-decoration-line: none;
+          color: var(--diff-delete-parent-color);
+        }
+
+        .lexical-upload-diff__thumbnail {
+          border-radius: 0;
+          border-color: var(--diff-delete-pill-border);
+          background-color: none;
+        }
+      }
+    }
+
+    .lexical-upload-diff__card {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+    }
+
+    .lexical-upload-diff__thumbnail {
+      width: calc(var(--spacer-4) * 1.5);
+      height: calc(var(--spacer-4) * 1.5);
+      position: relative;
+      overflow: hidden;
+      flex-shrink: 0;
+      border-radius: 0;
+      border: var(--stroke-width-small) solid var(--color-border);
+
+      img,
+      svg {
+        position: absolute;
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+        border-radius: 0;
+      }
+    }
+
+    .lexical-upload-diff__info {
+      flex-grow: 1;
+      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;
+
+      strong {
+        font-weight: 600;
+      }
+    }
+
+    .lexical-upload-diff__meta {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}

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

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

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

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

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { File } from '@payloadcms/ui/rsc';
 import { createHash } from 'crypto';
+import './index.css';
 import { formatFilesize } from 'payload/shared';
 import React from 'react';
 const baseClass = 'lexical-upload-diff';