feat(richtext-lexical): support copy & pasting and drag & dopping files/images into the editor (#13868)

This PR adds support for inserting images into the rich text editor via
both **copy & paste** and **drag & drop**, whether from local files or
image DOM nodes.

It leverages the bulk uploads UI to provide a smooth workflow for:
- Selecting the target collection
- Filling in any required fields defined on the uploads collection
- Uploading multiple images at once

This significantly improves the UX for adding images to rich text, and
also works seamlessly when pasting images from external editors like
Google Docs or Microsoft Word.

Test pre-release: `3.57.0-internal.801ab5a`

## Showcase - drag & drop images from computer


https://github.com/user-attachments/assets/c558c034-d2e4-40d8-9035-c0681389fb7b

## Showcase - copy & paste images from computer


https://github.com/user-attachments/assets/f36faf94-5274-4151-b141-00aff2b0efa4

## Showcase - copy & paste image DOM nodes


https://github.com/user-attachments/assets/2839ed0f-3f28-4e8d-8b47-01d0cb947edc

---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1211217132290841

Author: AlessioGr

.github/workflows/main.yml

@@ -287,6 +287,10 @@ jobs:
           - folders
           - hooks
           - lexical__collections___LexicalFullyFeatured
+          - lexical__collections___LexicalFullyFeatured__db
+          - lexical__collections__LexicalHeadingFeature
+          - lexical__collections__LexicalJSXConverter
+          - lexical__collections__LexicalLinkFeature
           - lexical__collections__OnDemandForm
           - lexical__collections__Lexical__e2e__main
           - lexical__collections__Lexical__e2e__blocks
@@ -427,6 +431,10 @@ jobs:
           - folders
           - hooks
           - lexical__collections___LexicalFullyFeatured
+          - lexical__collections___LexicalFullyFeatured__db
+          - lexical__collections__LexicalHeadingFeature
+          - lexical__collections__LexicalJSXConverter
+          - lexical__collections__LexicalLinkFeature
           - lexical__collections__OnDemandForm
           - lexical__collections__Lexical__e2e__main
           - lexical__collections__Lexical__e2e__blocks

packages/richtext-lexical/src/features/upload/client/component/pending/index.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { ShimmerEffect } from '@payloadcms/ui'
+
+import '../index.scss'
+
+export const PendingUploadComponent = (): React.ReactNode => {
+  return (
+    <div className={'lexical-upload'}>
+      <ShimmerEffect height={'95px'} width={'203px'} />
+    </div>
+  )
+}

packages/richtext-lexical/src/features/upload/client/nodes/UploadNode.tsx

@@ -1,53 +1,25 @@
 'use client'
-import type { SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'
-import type { DOMConversionMap, DOMConversionOutput, LexicalNode, Spread } from 'lexical'
+import type { DOMConversionMap, LexicalNode } from 'lexical'
 import type { JSX } from 'react'
 
 import ObjectID from 'bson-objectid'
 import { $applyNodeReplacement } from 'lexical'
 import * as React from 'react'
 
-import type { UploadData } from '../../server/nodes/UploadNode.js'
+import type {
+  Internal_UploadData,
+  SerializedUploadNode,
+  UploadData,
+} from '../../server/nodes/UploadNode.js'
 
-import { isGoogleDocCheckboxImg, UploadServerNode } from '../../server/nodes/UploadNode.js'
+import { $convertUploadElement } from '../../server/nodes/conversions.js'
+import { UploadServerNode } from '../../server/nodes/UploadNode.js'
+import { PendingUploadComponent } from '../component/pending/index.js'
 
 const RawUploadComponent = React.lazy(() =>
   import('../../client/component/index.js').then((module) => ({ default: module.UploadComponent })),
 )
 
-function $convertUploadElement(domNode: HTMLImageElement): DOMConversionOutput | null {
-  if (
-    domNode.hasAttribute('data-lexical-upload-relation-to') &&
-    domNode.hasAttribute('data-lexical-upload-id')
-  ) {
-    const id = domNode.getAttribute('data-lexical-upload-id')
-    const relationTo = domNode.getAttribute('data-lexical-upload-relation-to')
-
-    if (id != null && relationTo != null) {
-      const node = $createUploadNode({
-        data: {
-          fields: {},
-          relationTo,
-          value: id,
-        },
-      })
-      return { node }
-    }
-  }
-  const img = domNode
-  if (img.src.startsWith('file:///') || isGoogleDocCheckboxImg(img)) {
-    return null
-  }
-  // TODO: Auto-upload functionality here!
-  //}
-  return null
-}
-
-export type SerializedUploadNode = {
-  children?: never // required so that our typed editor state doesn't automatically add children
-  type: 'upload'
-} & Spread<UploadData, SerializedDecoratorBlockNode>
-
 export class UploadNode extends UploadServerNode {
   static override clone(node: UploadServerNode): UploadServerNode {
     return super.clone(node)
@@ -60,7 +32,7 @@ export class UploadNode extends UploadServerNode {
   static override importDOM(): DOMConversionMap<HTMLImageElement> {
     return {
       img: (node) => ({
-        conversion: $convertUploadElement,
+        conversion: (domNode) => $convertUploadElement(domNode, $createUploadNode),
         priority: 0,
       }),
     }
@@ -75,9 +47,10 @@ export class UploadNode extends UploadServerNode {
       serializedNode.version = 3
     }
 
-    const importedData: UploadData = {
+    const importedData: Internal_UploadData = {
       id: serializedNode.id,
       fields: serializedNode.fields,
+      pending: (serializedNode as Internal_UploadData).pending,
       relationTo: serializedNode.relationTo,
       value: serializedNode.value,
     }
@@ -89,6 +62,9 @@ export class UploadNode extends UploadServerNode {
   }
 
   override decorate(): JSX.Element {
+    if ((this.__data as Internal_UploadData).pending) {
+      return <PendingUploadComponent />
+    }
     return <RawUploadComponent data={this.__data} nodeKey={this.getKey()} />
   }
 
@@ -105,6 +81,7 @@ export function $createUploadNode({
   if (!data?.id) {
     data.id = new ObjectID.default().toHexString()
   }
+
   return $applyNodeReplacement(new UploadNode({ data: data as UploadData }))
 }