Merge pull request #3725 from udecode/fix/insertMedia

Fix/insert media
udecode · Nov 5, 2024 · fa50130 · fa50130
2 parents dbdbe3e + 6dcfd04
commit fa50130
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/.changeset/late-lies-look.md b/.changeset/late-lies-look.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-media': patch
+---
+
+`insertMedia`: Should insert in the current block if it is empty.
diff --git a/packages/media/src/lib/placeholder/transforms/setMediaNode.ts b/packages/media/src/lib/placeholder/transforms/setMediaNode.ts
@@ -7,6 +7,7 @@ import {
 type props = {
   type: string;
   url: string;
+  id?: string;
   initialHeight?: number;
   initialWidth?: number;
   isUpload?: boolean;

diff --git a/packages/media/src/react/placeholder/PlaceholderPlugin.tsx b/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
@@ -1,4 +1,9 @@
-import { type ExtendConfig, bindFirst } from '@udecode/plate-common';
+import {
+  type ExtendConfig,
+  bindFirst,
+  getAncestorNode,
+  getNodeString,
+} from '@udecode/plate-common';
 import { findEventRange, toTPlatePlugin } from '@udecode/plate-common/react';
 
 import type { AllowedFileType } from './internal/mimes';
@@ -112,7 +117,6 @@ export const PlaceholderPlugin = toTPlatePlugin<
     handlers: {
       onDrop: ({ editor, event, tf }) => {
         // using DnD plugin by default
-        if (!getOption('disabledDndPlugin')) return;
 
         const { files } = event.dataTransfer;
 
@@ -121,6 +125,9 @@ export const PlaceholderPlugin = toTPlatePlugin<
         /** Without this, the dropped file replaces the page */
         event.preventDefault();
         event.stopPropagation();
+
+        if (!getOption('disabledDndPlugin')) return;
+
         /**
          * When we drop a file, the selection won't move automatically to the
          * drop location. Find the location from the event and upload the files
@@ -134,15 +141,28 @@ export const PlaceholderPlugin = toTPlatePlugin<
 
         return true;
       },
-      onPaste: ({ event, tf }) => {
+      onPaste: ({ editor, event, tf }) => {
         const { files } = event.clipboardData;
 
         if (files.length === 0) return false;
 
         event.preventDefault();
         event.stopPropagation();
 
-        tf.insert.media(files);
+        let inserted = false;
+        const ancestor = getAncestorNode(editor);
+
+        if (ancestor) {
+          const [node, path] = ancestor;
+
+          if (getNodeString(node).length === 0) {
+            tf.insert.media(files, path);
+            inserted = true;
+          }
+        }
+        if (!inserted) {
+          tf.insert.media(files);
+        }
 
         return true;
       },