feat: support multiple images paste/drop

package.json

@@ -31,7 +31,8 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint src --ext .ts,.tsx",
     "test": "vitest",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-release",
+    "image-upload-backend": "node ./src/stories/file-backend.js"
   },
   "files": [
     "dist"
@@ -105,8 +106,10 @@
     "@ngneat/falso": "^6.4.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
+    "@types/express": "^4.17.17",
     "@types/js-yaml": "4.0.5",
     "@types/mdast": "3.0.11",
+    "@types/multer": "^1.4.7",
     "@types/node": "^20.2.5",
     "@types/react": "^18.2.7",
     "@types/react-dom": "^18.2.4",

src/stories/file-backend.js

@@ -11,7 +11,7 @@ import { extname } from 'path'
 // Set up the storage configuration for Multer
 const storage = diskStorage({
   destination: './uploads',
-  filename: function (req, file, callback) {
+  filename: function (_req, file, callback) {
     const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9)
     const extension = extname(file.originalname)
     callback(null, file.fieldname + '-' + uniqueSuffix + extension)

src/system/Editor.ts

@@ -7,10 +7,12 @@ import {
   REMOVE_LIST_COMMAND
 } from '@lexical/list'
 import { $isHeadingNode } from '@lexical/rich-text'
-import { $findMatchingParent, $getNearestNodeOfType, $insertNodeToNearestRoot } from '@lexical/utils'
+import { $findMatchingParent, $getNearestNodeOfType, $insertNodeToNearestRoot, $wrapNodeInElement } from '@lexical/utils'
 import {
+  $createParagraphNode,
   $getRoot,
   $getSelection,
+  $insertNodes,
   $isRangeSelection,
   $isRootOrShadowRoot,
   BLUR_COMMAND,
@@ -38,6 +40,7 @@ import { createEmptyHistoryState } from '@lexical/react/LexicalHistoryPlugin'
 import { MarkdownParseOptions } from '../import'
 import { ExportMarkdownFromLexicalOptions } from '../export/export'
 import { importMarkdownToLexical } from '../import'
+import { r } from 'vitest/dist/types-ad1c3f45'
 
 type Teardowns = Array<() => void>
 
@@ -132,18 +135,11 @@ export const [EditorSystem, EditorSystemType] = system((r) => {
   })
 
   r.sub(r.pipe(insertImage, r.o.withLatestFrom(activeEditor)), ([src, theEditor]) => {
-    theEditor?.getEditorState().read(() => {
-      const selection = $getSelection()
-
-      if ($isRangeSelection(selection)) {
-        const focusNode = selection.focus.getNode()
-
-        if (focusNode !== null) {
-          theEditor.update(() => {
-            const imageNode = $createImageNode({ altText: '', src, title: '' })
-            $insertNodeToNearestRoot(imageNode)
-          })
-        }
+    theEditor?.update(() => {
+      const imageNode = $createImageNode({ altText: '', src, title: '' })
+      $insertNodes([imageNode])
+      if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+        $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd()
       }
     })
   })
@@ -325,10 +321,13 @@ export const [EditorSystem, EditorSystemType] = system((r) => {
         } // If no image was present in the collection, bail.
 
         const imageUploadHandlerValue = r.getValue(imageUploadHandler)
-        const theImage = cbPayload[0].getAsFile()!
 
-        imageUploadHandlerValue(theImage)
-          .then((url) => r.pub(insertImage, url))
+        Promise.all(cbPayload.map((file) => imageUploadHandlerValue(file.getAsFile()!)))
+          .then((urls) => {
+            urls.forEach((url) => {
+              r.pub(insertImage, url)
+            })
+          })
           .catch((e) => {
             throw e
           })

src/ui/ImagesPlugin.tsx

@@ -136,11 +136,13 @@ function onDrop(event: DragEvent, editor: LexicalEditor, imageUploadHandler: (fi
 
   if (cbPayload.length > 0) {
     event.preventDefault()
-    imageUploadHandler(cbPayload[0].getAsFile()!)
-      .then((url) => {
-        editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
-          src: url,
-          altText: ''
+    Promise.all(cbPayload.map((image) => imageUploadHandler(image.getAsFile()!)))
+      .then((urls) => {
+        urls.forEach((url) => {
+          editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+            src: url,
+            altText: ''
+          })
         })
       })
       .catch((e) => {