* multi-file paste support

* allow media files (image/videos) to be attachments
* insert trailing node if file placeholder is at the end of the editor

apps/client/src/features/editor/components/attachment/upload-attachment-action.tsx

@@ -17,8 +17,11 @@ export const uploadAttachmentAction = handleAttachmentUpload({
       throw err;
     }
   },
-  validateFn: (file) => {
+  validateFn: (file, allowMedia: boolean) => {
-    if (file.type.includes("image/") || file.type.includes("video/")) {
+    if (
+      (file.type.includes("image/") || file.type.includes("video/")) &&
+      !allowMedia
+    ) {
       return false;
     }
     if (file.size > getFileUploadSizeLimit()) {

apps/client/src/features/editor/components/common/editor-paste-handler.tsx

@@ -40,10 +40,8 @@ export const handlePaste = (
 
   if (event.clipboardData?.files.length) {
     event.preventDefault();
-    const [file] = Array.from(event.clipboardData.files);
+    for (const file of event.clipboardData.files) {
-    const pos = view.state.selection.from;
+      const pos = view.state.selection.from;
-
-    if (file) {
       uploadImageAction(file, view, pos, pageId);
       uploadVideoAction(file, view, pos, pageId);
       uploadAttachmentAction(file, view, pos, pageId);
@@ -61,13 +59,13 @@ export const handleFileDrop = (
 ) => {
   if (!moved && event.dataTransfer?.files.length) {
     event.preventDefault();
-    const [file] = Array.from(event.dataTransfer.files);
+
-    const coordinates = view.posAtCoords({
+    for (const file of event.dataTransfer.files) {
-      left: event.clientX,
+      const coordinates = view.posAtCoords({
-      top: event.clientY,
+        left: event.clientX,
-    });
+        top: event.clientY,
-    // here we deduct 1 from the pos or else the image will create an extra node
+      });
-    if (file) {
+
       uploadImageAction(file, view, coordinates?.pos ?? 0 - 1, pageId);
       uploadVideoAction(file, view, coordinates?.pos ?? 0 - 1, pageId);
       uploadAttachmentAction(file, view, coordinates?.pos ?? 0 - 1, pageId);

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -38,7 +38,8 @@ import {
   LoomIcon,
   MiroIcon,
   TypeformIcon,
-  VimeoIcon, YoutubeIcon
+  VimeoIcon,
+  YoutubeIcon,
 } from "@/components/icons";
 
 const CommandGroups: SlashMenuGroupedItemsType = {
@@ -221,13 +222,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
           if (input.files?.length) {
             const file = input.files[0];
             const pos = editor.view.state.selection.from;
-            if (file.type.includes("image/*")) {
+            uploadAttachmentAction(file, editor.view, pos, pageId, true);
-              uploadImageAction(file, editor.view, pos, pageId);
-            } else if (file.type.includes("video/*")) {
-              uploadVideoAction(file, editor.view, pos, pageId);
-            } else {
-              uploadAttachmentAction(file, editor.view, pos, pageId);
-            }
           }
         };
         input.click();
@@ -368,7 +363,12 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       searchTerms: ["airtable"],
       icon: AirtableIcon,
       command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'airtable' }).run();
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .setEmbed({ provider: "airtable" })
+          .run();
       },
     },
     {
@@ -377,7 +377,12 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       searchTerms: ["loom"],
       icon: LoomIcon,
       command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'loom' }).run();
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .setEmbed({ provider: "loom" })
+          .run();
       },
     },
     {
@@ -386,7 +391,12 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       searchTerms: ["figma"],
       icon: FigmaIcon,
       command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'figma' }).run();
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .setEmbed({ provider: "figma" })
+          .run();
       },
     },
     {
@@ -395,7 +405,12 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       searchTerms: ["typeform"],
       icon: TypeformIcon,
       command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'typeform' }).run();
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .setEmbed({ provider: "typeform" })
+          .run();
       },
     },
     {
@@ -404,7 +419,12 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       searchTerms: ["miro"],
       icon: MiroIcon,
       command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'miro' }).run();
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .setEmbed({ provider: "miro" })
+          .run();
       },
     },
     {
@@ -413,7 +433,12 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       searchTerms: ["youtube", "yt"],
       icon: YoutubeIcon,
       command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'youtube' }).run();
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .setEmbed({ provider: "youtube" })
+          .run();
       },
     },
     {
@@ -422,7 +447,12 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       searchTerms: ["vimeo"],
       icon: VimeoIcon,
       command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'vimeo' }).run();
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .setEmbed({ provider: "vimeo" })
+          .run();
       },
     },
     {
@@ -431,7 +461,12 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       searchTerms: ["framer"],
       icon: FramerIcon,
       command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'framer' }).run();
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .setEmbed({ provider: "framer" })
+          .run();
       },
     },
     {
@@ -440,7 +475,12 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       searchTerms: ["google drive", "gdrive"],
       icon: GoogleDriveIcon,
       command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'gdrive' }).run();
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .setEmbed({ provider: "gdrive" })
+          .run();
       },
     },
     {
@@ -449,7 +489,12 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       searchTerms: ["google sheets", "gsheets"],
       icon: GoogleSheetsIcon,
       command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).setEmbed({ provider: 'gsheets' }).run();
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .setEmbed({ provider: "gsheets" })
+          .run();
       },
     },
   ],

packages/editor-ext/src/lib/attachment/attachment-upload.ts

@@ -1,6 +1,10 @@
 import { type EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
-import { MediaUploadOptions, UploadFn } from "../media-utils";
+import {
+  insertTrailingNode,
+  MediaUploadOptions,
+  UploadFn,
+} from "../media-utils";
 import { IAttachment } from "../types";
 
 const uploadKey = new PluginKey("attachment-upload");
@@ -33,7 +37,8 @@ export const AttachmentUploadPlugin = ({
 
           placeholder.appendChild(uploadingText);
 
-          const deco = Decoration.widget(pos + 1, placeholder, {
+          const realPos = pos + 1;
+          const deco = Decoration.widget(realPos, placeholder, {
             id,
           });
           set = set.add(tr.doc, [deco]);
@@ -64,8 +69,8 @@ function findPlaceholder(state: EditorState, id: {}) {
 
 export const handleAttachmentUpload =
   ({ validateFn, onUpload }: MediaUploadOptions): UploadFn =>
-  async (file, view, pos, pageId) => {
+  async (file, view, pos, pageId, allowMedia) => {
-    const validated = validateFn?.(file);
+    const validated = validateFn?.(file, allowMedia);
     // @ts-ignore
     if (!validated) return;
     // A fresh object to act as the ID for this upload
@@ -82,6 +87,8 @@ export const handleAttachmentUpload =
         fileName: file.name,
       },
     });
+
+    insertTrailingNode(tr, pos, view);
     view.dispatch(tr);
 
     await onUpload(file, pageId).then(

packages/editor-ext/src/lib/image/image-upload.ts

@@ -1,6 +1,6 @@
 import { type EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
-import { MediaUploadOptions, UploadFn } from "../media-utils";
+import { insertTrailingNode, MediaUploadOptions, UploadFn } from "../media-utils";
 import { IAttachment } from "../types";
 
 const uploadKey = new PluginKey("image-upload");
@@ -69,13 +69,13 @@ export const handleImageUpload =
     // A fresh object to act as the ID for this upload
     const id = {};
 
-    // Replace the selection with a placeholder
-    const tr = view.state.tr;
-    if (!tr.selection.empty) tr.deleteSelection();
-
     const reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = () => {
+      const tr = view.state.tr;
+      // Replace the selection with a placeholder
+      if (!tr.selection.empty) tr.deleteSelection();
+
       tr.setMeta(uploadKey, {
         add: {
           id,
@@ -83,6 +83,8 @@ export const handleImageUpload =
           src: reader.result,
         },
       });
+
+      insertTrailingNode(tr, pos, view);
       view.dispatch(tr);
     };
 

packages/editor-ext/src/lib/media-utils.ts

@@ -1,13 +1,29 @@
 import type { EditorView } from "@tiptap/pm/view";
+import { Transaction } from "@tiptap/pm/state";
 
 export type UploadFn = (
   file: File,
   view: EditorView,
   pos: number,
   pageId: string,
+  // only applicable to file attachments
+  allowMedia?: boolean,
 ) => void;
 
 export interface MediaUploadOptions {
-  validateFn?: (file: File) => void;
+  validateFn?: (file: File, allowMedia?: boolean) => void;
   onUpload: (file: File, pageId: string) => Promise<any>;
 }
+
+export function insertTrailingNode(
+  tr: Transaction,
+  pos: number,
+  view: EditorView,
+) {
+  // create trailing node after decoration
+  // if decoration is at the last node
+  const currentDocSize = view.state.doc.content.size;
+  if (pos + 1 === currentDocSize) {
+    tr.insert(currentDocSize, view.state.schema.nodes.paragraph.create());
+  }
+}

packages/editor-ext/src/lib/video/video-upload.ts

@@ -1,6 +1,10 @@
 import { type EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
-import { MediaUploadOptions, UploadFn } from "../media-utils";
+import {
+  insertTrailingNode,
+  MediaUploadOptions,
+  UploadFn,
+} from "../media-utils";
 import { IAttachment } from "../types";
 
 const uploadKey = new PluginKey("video-upload");
@@ -70,12 +74,13 @@ export const handleVideoUpload =
     const id = {};
 
     // Replace the selection with a placeholder
-    const tr = view.state.tr;
-    if (!tr.selection.empty) tr.deleteSelection();
 
     const reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = () => {
+      const tr = view.state.tr;
+      if (!tr.selection.empty) tr.deleteSelection();
+
       tr.setMeta(uploadKey, {
         add: {
           id,
@@ -83,6 +88,8 @@ export const handleVideoUpload =
           src: reader.result,
         },
       });
+
+      insertTrailingNode(tr, pos, view);
       view.dispatch(tr);
     };