Merge pull request #3723 from udecode/fix/insertMedia

Fix/insert media
udecode · Nov 5, 2024 · dd99fdc · dd99fdc
2 parents 807412f + d0720cf
commit dd99fdc
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/.changeset/tame-socks-admire.md b/.changeset/tame-socks-admire.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-media': patch
+---
+
+Add `at` in `insertMedia` api.
diff --git a/packages/media/src/react/placeholder/transforms/insertMedia.ts b/packages/media/src/react/placeholder/transforms/insertMedia.ts
@@ -1,6 +1,7 @@
 import type { PlateEditor } from '@udecode/plate-common/react';
 
 import { insertNodes, nanoid, withoutNormalizing } from '@udecode/plate-common';
+import { Path } from 'slate';
 
 import { type TPlaceholderElement, BasePlaceholderPlugin } from '../../../lib';
 import { PlaceholderPlugin } from '../PlaceholderPlugin';
@@ -9,7 +10,11 @@ import { createUploadError, isUploadError } from '../utils/createUploadError';
 import { getMediaType } from '../utils/getMediaType';
 import { validateFiles } from '../utils/validateFiles';
 
-export const insertMedia = (editor: PlateEditor, files: FileList): any => {
+export const insertMedia = (
+  editor: PlateEditor,
+  files: FileList,
+  at?: Path
+): any => {
   const api = editor.getApi(PlaceholderPlugin);
   const uploadConfig = editor.getOption(PlaceholderPlugin, 'uploadConfig');
   const multiple = editor.getOption(PlaceholderPlugin, 'multiple');
@@ -48,16 +53,30 @@ export const insertMedia = (editor: PlateEditor, files: FileList): any => {
     );
   }
 
-  Array.from(files).forEach((file) => {
+  let currentAt: Path | undefined;
+
+  Array.from(files).forEach((file, index) => {
+    if (index === 0) {
+      if (at) {
+        currentAt = at;
+      }
+    } else {
+      currentAt = currentAt ? Path.next(currentAt) : undefined;
+    }
+
     const id = nanoid();
 
     withoutNormalizing(editor, () =>
-      insertNodes<TPlaceholderElement>(editor, {
-        id,
-        children: [{ text: '' }],
-        mediaType: getMediaType(file, uploadConfig)!,
-        type: editor.getType(BasePlaceholderPlugin),
-      })
+      insertNodes<TPlaceholderElement>(
+        editor,
+        {
+          id,
+          children: [{ text: '' }],
+          mediaType: getMediaType(file, uploadConfig)!,
+          type: editor.getType(BasePlaceholderPlugin),
+        },
+        { at: currentAt, nextBlock: false }
+      )
     );
 
     api.placeholder.addUploadingFile(id, file);