diff --git a/.changeset/late-lies-look.md b/.changeset/late-lies-look.md new file mode 100644 index 0000000000..006608b2bb --- /dev/null +++ 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 index 6a8a43a3dc..52f271354f 100644 --- 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 index ea58a9a15a..a8f73cd7f3 100644 --- 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,7 +141,7 @@ export const PlaceholderPlugin = toTPlatePlugin< return true; }, - onPaste: ({ event, tf }) => { + onPaste: ({ editor, event, tf }) => { const { files } = event.clipboardData; if (files.length === 0) return false; @@ -142,7 +149,20 @@ export const PlaceholderPlugin = toTPlatePlugin< 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; },