fix: External file drag/drop and copy/paste (#1052)

* Fixed external file drag/drop & copy/paste insertion and errors when using file extensions instead of MIME types

* Implemented PR feedback

Author: matthewlipski

packages/core/src/api/parsers/handleFileInsertion.ts

@@ -1,14 +1,25 @@
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { PartialBlock } from "../../blocks/defaultBlocks";
-import { insertOrUpdateBlock } from "../../extensions/SuggestionMenu/getDefaultSlashMenuItems";
 import {
   BlockSchema,
   FileBlockConfig,
   InlineContentSchema,
   StyleSchema,
 } from "../../schema";
+import { getBlockInfoFromPos } from "../getBlockInfoFromPos";
 import { acceptedMIMETypes } from "./acceptedMIMETypes";
 
+function checkFileExtensionsMatch(
+  fileExtension1: string,
+  fileExtension2: string
+) {
+  if (!fileExtension1.startsWith(".") || !fileExtension2.startsWith(".")) {
+    throw new Error(`The strings provided are not valid file extensions.`);
+  }
+
+  return fileExtension1 === fileExtension2;
+}
+
 function checkMIMETypesMatch(mimeType1: string, mimeType2: string) {
   const types1 = mimeType1.split("/");
   const types2 = mimeType2.split("/");
@@ -71,10 +82,24 @@ export async function handleFileInsertion<
     // Gets file block corresponding to MIME type.
     let fileBlockType = "file";
     for (const fileBlockConfig of fileBlockConfigs) {
-      for (const mimeType of fileBlockConfig.fileBlockAcceptMimeTypes || []) {
-        if (checkMIMETypesMatch(items[i].type, mimeType)) {
-          fileBlockType = fileBlockConfig.type;
-          break;
+      for (const mimeType of fileBlockConfig.fileBlockAccept || []) {
+        const isFileExtension = mimeType.startsWith(".");
+        const file = items[i].getAsFile();
+
+        if (file) {
+          if (
+            (!isFileExtension &&
+              file.type &&
+              checkMIMETypesMatch(items[i].type, mimeType)) ||
+            (isFileExtension &&
+              checkFileExtensionsMatch(
+                "." + file.name.split(".").pop(),
+                mimeType
+              ))
+          ) {
+            fileBlockType = fileBlockConfig.type;
+            break;
+          }
         }
       }
     }
@@ -83,16 +108,42 @@ export async function handleFileInsertion<
     if (file) {
       const updateData = await editor.uploadFile(file);
 
-      if (typeof updateData === "string") {
-        const fileBlock = {
-          type: fileBlockType,
-          props: {
-            name: file.name,
-            url: updateData,
-          },
-        } as PartialBlock<BSchema, I, S>;
+      const fileBlock =
+        typeof updateData === "string"
+          ? ({
+              type: fileBlockType,
+              props: {
+                name: file.name,
+                url: updateData,
+              },
+            } as PartialBlock<BSchema, I, S>)
+          : { type: fileBlockType, ...updateData };
+
+      if (event.type === "paste") {
+        editor.insertBlocks(
+          [fileBlock],
+          editor.getTextCursorPosition().block,
+          "after"
+        );
+      }
+
+      if (event.type === "drop") {
+        const coords = {
+          left: (event as DragEvent).clientX,
+          top: (event as DragEvent).clientY,
+        };
+
+        const pos = editor._tiptapEditor.view.posAtCoords(coords);
+        if (!pos) {
+          return;
+        }
+
+        const blockInfo = getBlockInfoFromPos(
+          editor._tiptapEditor.state.doc,
+          pos.pos
+        );
 
-        insertOrUpdateBlock(editor, fileBlock);
+        editor.insertBlocks([fileBlock], blockInfo.id, "after");
       }
     }
   }

packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts

@@ -43,7 +43,7 @@ export const audioBlockConfig = {
   propSchema: audioPropSchema,
   content: "none",
   isFileBlock: true,
-  fileBlockAcceptMimeTypes: ["audio/*"],
+  fileBlockAccept: ["audio/*"],
 } satisfies FileBlockConfig;
 
 export const audioRender = (

packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts

@@ -49,7 +49,7 @@ export const imageBlockConfig = {
   propSchema: imagePropSchema,
   content: "none",
   isFileBlock: true,
-  fileBlockAcceptMimeTypes: ["image/*"],
+  fileBlockAccept: ["image/*"],
 } satisfies FileBlockConfig;
 
 export const imageRender = (

packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts

@@ -49,7 +49,7 @@ export const videoBlockConfig = {
   propSchema: videoPropSchema,
   content: "none",
   isFileBlock: true,
-  fileBlockAcceptMimeTypes: ["video/*"],
+  fileBlockAccept: ["video/*"],
 } satisfies FileBlockConfig;
 
 export const videoRender = (

packages/core/src/schema/blocks/types.ts

@@ -50,7 +50,7 @@ export type FileBlockConfig = {
   };
   content: "none";
   isFileBlock: true;
-  fileBlockAcceptMimeTypes?: string[];
+  fileBlockAccept?: string[];
 };
 
 // BlockConfig contains the "schema" info about a Block type

packages/react/src/components/FilePanel/DefaultTabs/UploadTab.tsx

@@ -76,8 +76,8 @@ export const UploadTab = <
 
   const config = editor.schema.blockSchema[block.type];
   const accept =
-    config.isFileBlock && config.fileBlockAcceptMimeTypes?.length
-      ? config.fileBlockAcceptMimeTypes.join(",")
+    config.isFileBlock && config.fileBlockAccept?.length
+      ? config.fileBlockAccept.join(",")
       : "*/*";
 
   return (