feat: Pasting & dropping files (#852)

* paste extension updates

* updted utils file

* Extended paste handling for all file block types and added file drag & drop handling

* Implemented PR feedback

---------

Co-authored-by: Matthew Lipski <matthewlipski@gmail.com>

Author: dcadavez66

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

@@ -0,0 +1,6 @@
+export const acceptedMIMETypes = [
+  "blocknote/html",
+  "Files",
+  "text/html",
+  "text/plain",
+] as const;

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

@@ -0,0 +1,51 @@
+import { Extension } from "@tiptap/core";
+import { Plugin } from "prosemirror-state";
+
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
+import { handleFileInsertion } from "./handleFileInsertion";
+import { acceptedMIMETypes } from "./acceptedMIMETypes";
+
+export const createDropFileExtension = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<BSchema, I, S>
+) =>
+  Extension.create<{ editor: BlockNoteEditor<BSchema, I, S> }, undefined>({
+    name: "dropFile",
+    addProseMirrorPlugins() {
+      return [
+        new Plugin({
+          props: {
+            handleDOMEvents: {
+              drop(_view, event) {
+                if (!editor.isEditable) {
+                  return;
+                }
+
+                let format: (typeof acceptedMIMETypes)[number] | null = null;
+                for (const mimeType of acceptedMIMETypes) {
+                  if (event.dataTransfer!.types.includes(mimeType)) {
+                    format = mimeType;
+                    break;
+                  }
+                }
+                if (format === null) {
+                  return true;
+                }
+
+                if (format === "Files") {
+                  handleFileInsertion(event, editor);
+                  return true;
+                }
+
+                return false;
+              },
+            },
+          },
+        }),
+      ];
+    },
+  });

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

@@ -0,0 +1,99 @@
+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 { acceptedMIMETypes } from "./acceptedMIMETypes";
+
+function checkMIMETypesMatch(mimeType1: string, mimeType2: string) {
+  const types1 = mimeType1.split("/");
+  const types2 = mimeType2.split("/");
+
+  if (types1.length !== 2) {
+    throw new Error(`The string ${mimeType1} is not a valid MIME type.`);
+  }
+  if (types2.length !== 2) {
+    throw new Error(`The string ${mimeType2} is not a valid MIME type.`);
+  }
+
+  if (types1[1] === "*" || types2[1] === "*") {
+    return types1[0] === types2[0];
+  }
+  if (types1[0] === "*" || types2[0] === "*") {
+    return types1[1] === types2[1];
+  }
+
+  return types1[0] === types2[0] && types1[1] === types2[1];
+}
+
+export async function handleFileInsertion<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(event: DragEvent | ClipboardEvent, editor: BlockNoteEditor<BSchema, I, S>) {
+  if (!editor.uploadFile) {
+    return;
+  }
+
+  const dataTransfer =
+    "dataTransfer" in event ? event.dataTransfer : event.clipboardData;
+  if (dataTransfer === null) {
+    return;
+  }
+
+  let format: (typeof acceptedMIMETypes)[number] | null = null;
+  for (const mimeType of acceptedMIMETypes) {
+    if (dataTransfer.types.includes(mimeType)) {
+      format = mimeType;
+      break;
+    }
+  }
+  if (format !== "Files") {
+    return;
+  }
+
+  const items = dataTransfer.items;
+  if (!items) {
+    return;
+  }
+
+  event.preventDefault();
+
+  const fileBlockConfigs = Object.values(editor.schema.blockSchema).filter(
+    (blockConfig) => blockConfig.isFileBlock
+  ) as FileBlockConfig[];
+
+  for (let i = 0; i < items.length; i++) {
+    // 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;
+        }
+      }
+    }
+
+    const file = items[i].getAsFile();
+    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>;
+
+        insertOrUpdateBlock(editor, fileBlock);
+      }
+    }
+  }
+}

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

@@ -3,13 +3,9 @@ import { Plugin } from "prosemirror-state";
 
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
+import { handleFileInsertion } from "./handleFileInsertion";
 import { nestedListsToBlockNoteStructure } from "./html/util/nestedLists";
-
-const acceptedMIMETypes = [
-  "blocknote/html",
-  "text/html",
-  "text/plain",
-] as const;
+import { acceptedMIMETypes } from "./acceptedMIMETypes";
 
 export const createPasteFromClipboardExtension = <
   BSchema extends BlockSchema,
@@ -33,26 +29,30 @@ export const createPasteFromClipboardExtension = <
                 }
 
                 let format: (typeof acceptedMIMETypes)[number] | null = null;
-
                 for (const mimeType of acceptedMIMETypes) {
                   if (event.clipboardData!.types.includes(mimeType)) {
                     format = mimeType;
                     break;
                   }
                 }
+                if (format === null) {
+                  return true;
+                }
 
-                if (format !== null) {
-                  let data = event.clipboardData!.getData(format);
-                  if (format === "text/html") {
-                    const htmlNode = nestedListsToBlockNoteStructure(
-                      data.trim()
-                    );
+                if (format === "Files") {
+                  handleFileInsertion(event, editor);
+                  return true;
+                }
 
-                    data = htmlNode.innerHTML;
-                  }
-                  editor._tiptapEditor.view.pasteHTML(data);
+                let data = event.clipboardData!.getData(format);
+
+                if (format === "text/html") {
+                  const htmlNode = nestedListsToBlockNoteStructure(data.trim());
+                  data = htmlNode.innerHTML;
                 }
 
+                editor._tiptapEditor.view.pasteHTML(data);
+
                 return true;
               },
             },

packages/core/src/editor/BlockNoteExtensions.ts

@@ -13,6 +13,7 @@ import { Text } from "@tiptap/extension-text";
 import * as Y from "yjs";
 import { createCopyToClipboardExtension } from "../api/exporters/copyExtension";
 import { createPasteFromClipboardExtension } from "../api/parsers/pasteExtension";
+import { createDropFileExtension } from "../api/parsers/fileDropExtension";
 import { BackgroundColorExtension } from "../extensions/BackgroundColor/BackgroundColorExtension";
 import { TextAlignmentExtension } from "../extensions/TextAlignment/TextAlignmentExtension";
 import { TextColorExtension } from "../extensions/TextColor/TextColorExtension";
@@ -146,6 +147,7 @@ export const getBlockNoteExtensions = <
     }),
     createCopyToClipboardExtension(opts.editor),
     createPasteFromClipboardExtension(opts.editor),
+    createDropFileExtension(opts.editor),
 
     Dropcursor.configure({ width: 5, color: "#ddeeff" }),
     // This needs to be at the bottom of this list, because Key events (such as enter, when selecting a /command),

packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -1,6 +1,6 @@
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { Block, PartialBlock } from "../../blocks/defaultBlocks";
 import { checkDefaultBlockTypeInSchema } from "../../blocks/defaultBlockTypeGuards";
-import { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import {
   BlockSchema,
   InlineContentSchema,