feat: Multiple file upload, improved placeholders, local previews

packages/editor-ext/src/index.ts

@@ -23,3 +23,4 @@ export * from "./lib/subpages";
 export * from "./lib/highlight";
 export * from "./lib/heading/heading";
 export * from "./lib/unique-id";
+export * from "./lib/shared-storage";

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

@@ -2,7 +2,7 @@ import { Node } from "@tiptap/pm/model";
 import { MediaUploadOptions, UploadFn } from "../media-utils";
 import { IAttachment } from "../types";
 import { generateNodeId } from "../utils";
-import { Transaction } from "@tiptap/pm/state";
+import { Command } from "@tiptap/core";
 
 const findAttachmentNodeByPlaceholderId = (
   doc: Node,
@@ -14,7 +14,7 @@ const findAttachmentNodeByPlaceholderId = (
     if (result) return false;
     if (
       node.type.name === "attachment" &&
-      node.attrs.placeholderId === placeholderId
+      node.attrs.placeholder?.id === placeholderId
     ) {
       result = { node, pos };
       return false;
@@ -26,82 +26,99 @@ const findAttachmentNodeByPlaceholderId = (
 };
 const handleAttachmentUpload =
   ({ validateFn, onUpload }: MediaUploadOptions): UploadFn =>
-  async (file, view, pos, pageId, allowMedia) => {
+  async (file, editor, pos, pageId, allowMedia) => {
     const validated = validateFn?.(file, allowMedia);
     // @ts-ignore
     if (!validated) return;
 
     const placeholderId = generateNodeId();
-    const initialPlaceholderNode = view.state.schema.nodes.attachment?.create({
-      placeholderId,
-      name: file.name,
-      size: file.size,
-    });
 
-    let tr: Transaction | null = view.state.tr;
-    let placeholderShown = false;
+    let placeholderInserted = false;
 
-    if (!initialPlaceholderNode) return;
+    const insertPlaceholder = (): Command => {
+      return ({ tr, state }) => {
+        const initialPlaceholderNode = state.schema.nodes.attachment?.create({
+          placeholder: {
+            id: placeholderId,
+          },
+          name: file.name,
+          size: file.size,
+        });
 
-    const { parent } = tr.doc.resolve(pos);
-    const isEmptyTextBlock = parent.isTextblock && !parent.childCount;
+        if (!initialPlaceholderNode) return false;
 
-    if (isEmptyTextBlock) {
-      tr.replaceRangeWith(pos - 1, pos + 1, initialPlaceholderNode);
-    } else {
-      tr.insert(pos, initialPlaceholderNode);
-    }
+        const { parent } = tr.doc.resolve(pos);
+        const isEmptyTextBlock = parent.isTextblock && !parent.childCount;
 
+        if (isEmptyTextBlock) {
+          tr.replaceRangeWith(pos - 1, pos + 1, initialPlaceholderNode);
+        } else {
+          tr.insert(pos, initialPlaceholderNode);
+        }
+
+        return true;
+      };
+    };
+    const replacePlaceholderWithAttachment = (
+      attachment: IAttachment,
+    ): Command => {
+      return ({ tr }) => {
+        const { pos: currentPos = null } =
+          findAttachmentNodeByPlaceholderId(tr.doc, placeholderId) || {};
+
+        //  If the placeholder is not found or attachment is missing, abort the process
+        if (currentPos === null || !attachment) return false;
+
+        // Update the placeholder node with the actual attachment data
+        tr.setNodeMarkup(currentPos, undefined, {
+          url: `/api/files/${attachment.id}/${attachment.fileName}`,
+          name: attachment.fileName,
+          mime: attachment.mimeType,
+          size: attachment.fileSize,
+          attachmentId: attachment.id,
+        });
+
+        return true;
+      };
+    };
+    const removePlaceholder = (): Command => {
+      return ({ tr }) => {
+        const { pos: currentPos = null } =
+          findAttachmentNodeByPlaceholderId(tr.doc, placeholderId) || {};
+
+        if (currentPos === null) return false;
+
+        tr.delete(currentPos, currentPos + 2);
+
+        return true;
+      };
+    };
     // Only show the placeholder if the upload takes more than 250ms
-    const displayPlaceholderTimeout = setTimeout(() => {
-      view.dispatch(tr);
-      placeholderShown = true;
-      tr = null;
+    const insertPlaceholderTimeout = setTimeout(() => {
+      editor.commands.command(insertPlaceholder());
+      placeholderInserted = true;
     }, 250);
 
     try {
       const attachment: IAttachment = await onUpload(file, pageId);
 
-      tr = tr ?? view.state.tr;
+      clearTimeout(insertPlaceholderTimeout);
 
-      const { pos: currentPos = null } =
-        findAttachmentNodeByPlaceholderId(tr.doc, placeholderId) || {};
-
-      //  If the placeholder is not found or attachment is missing, abort the process
-      if (currentPos === null || !attachment) return;
-
-      // Update the placeholder node with the actual attachment data
-      tr.setNodeMarkup(currentPos, undefined, {
-        url: `/api/files/${attachment.id}/${attachment.fileName}`,
-        name: attachment.fileName,
-        mime: attachment.mimeType,
-        size: attachment.fileSize,
-        attachmentId: attachment.id,
-      });
-    } catch (error) {
-      tr = tr ?? view.state.tr;
-
-      const { pos: currentPos = null } =
-        findAttachmentNodeByPlaceholderId(tr.doc, placeholderId) || {};
-
-      if (currentPos === null) return;
-
-      // Delete the placeholder on error
-      tr.delete(
-        currentPos,
-        currentPos + (initialPlaceholderNode.nodeSize ?? 1),
-      );
-    } finally {
-      clearTimeout(displayPlaceholderTimeout);
-
-      // If the placeholder was shown, delay showing the attachment to avoid flicker
-      if (placeholderShown) {
+      if (placeholderInserted) {
         setTimeout(() => {
-          view.dispatch(tr);
+          editor.commands.command(replacePlaceholderWithAttachment(attachment));
         }, 100);
       } else {
-        view.dispatch(tr);
+        editor
+          .chain()
+          .command(insertPlaceholder())
+          .command(replacePlaceholderWithAttachment(attachment))
+          .run();
       }
+    } catch (error) {
+      clearTimeout(insertPlaceholderTimeout);
+
+      editor.commands.command(removePlaceholder());
     }
   };
 

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

@@ -12,7 +12,7 @@ export interface AttachmentAttributes {
   mime?: string; // e.g. application/zip
   size?: number;
   attachmentId?: string;
-  placeholderId?: string;
+  placeholder?: string;
 }
 
 declare module "@tiptap/core" {
@@ -75,13 +75,9 @@ export const Attachment = Node.create<AttachmentOptions>({
           "data-attachment-id": attributes.attachmentId,
         }),
       },
-      placeholderId: {
+      placeholder: {
         default: null,
-        parseHTML: (element) =>
-          element.getAttribute("data-attachment-placeholder-id"),
-        renderHTML: (attributes: AttachmentAttributes) => ({
-          "data-attachment-placeholder-id": attributes.placeholderId,
-        }),
+        rendered: false,
       },
     };
   },

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

@@ -1,12 +1,9 @@
-import {
-  imageDimensionsFromData,
-  imageDimensionsFromStream,
-} from "image-dimensions";
+import { imageDimensionsFromStream } from "image-dimensions";
 import { MediaUploadOptions, UploadFn } from "../media-utils";
 import { IAttachment } from "../types";
 import { generateNodeId } from "../utils";
 import { Node } from "@tiptap/pm/model";
-import { Transaction } from "@tiptap/pm/state";
+import { Command } from "@tiptap/core";
 
 const findImageNodeByPlaceholderId = (
   doc: Node,
@@ -18,7 +15,7 @@ const findImageNodeByPlaceholderId = (
     if (result) return false;
     if (
       node.type.name === "image" &&
-      node.attrs.placeholderId === placeholderId
+      node.attrs.placeholder?.id === placeholderId
     ) {
       result = { node, pos };
       return false;
@@ -30,84 +27,118 @@ const findImageNodeByPlaceholderId = (
 };
 const handleImageUpload =
   ({ validateFn, onUpload }: MediaUploadOptions): UploadFn =>
-  async (file, view, pos, pageId) => {
+  async (file, editor, pos, pageId) => {
     // check if the file is an image
     const validated = validateFn?.(file);
     // @ts-ignore
     if (!validated) return;
 
+    const objectUrl = URL.createObjectURL(file);
     const imageDimensions = await imageDimensionsFromStream(file.stream());
     const placeholderId = generateNodeId();
     const aspectRatio = imageDimensions
       ? imageDimensions.width / imageDimensions.height
       : undefined;
-    const initialPlaceholderNode = view.state.schema.nodes.image?.create({
-      placeholderId,
-      aspectRatio,
-    });
 
-    let tr: Transaction | null = view.state.tr;
-    let placeholderShown = false;
+    let placeholderInserted = false;
 
-    if (!initialPlaceholderNode) return;
+    editor.storage.shared.imagePreviews =
+      editor.storage.shared.imagePreviews || {};
+    editor.storage.shared.imagePreviews[placeholderId] = objectUrl;
 
-    const { parent } = tr.doc.resolve(pos);
-    const isEmptyTextBlock = parent.isTextblock && !parent.childCount;
+    const insertPlaceholder = (): Command => {
+      return ({ tr, state }) => {
+        const initialPlaceholderNode = state.schema.nodes.image?.create({
+          placeholder: {
+            id: placeholderId,
+            name: file.name,
+          },
+          aspectRatio,
+        });
 
-    if (isEmptyTextBlock) {
-      // Replace e.g. empty paragraph with the image
-      tr.replaceRangeWith(pos - 1, pos + 1, initialPlaceholderNode);
-    } else {
-      tr.insert(pos, initialPlaceholderNode);
-    }
+        if (!initialPlaceholderNode) return false;
 
+        const { parent } = tr.doc.resolve(pos);
+        const isEmptyTextBlock = parent.isTextblock && !parent.childCount;
+
+        if (isEmptyTextBlock) {
+          // Replace e.g. empty paragraph with the image
+          tr.replaceRangeWith(pos - 1, pos + 1, initialPlaceholderNode);
+        } else {
+          tr.insert(pos, initialPlaceholderNode);
+        }
+
+        return true;
+      };
+    };
+    const replacePlaceholderWithImage = (attachment: IAttachment): Command => {
+      return ({ tr }) => {
+        const { pos: currentPos = null } =
+          findImageNodeByPlaceholderId(tr.doc, placeholderId) || {};
+
+        //  If the placeholder is not found or attachment is missing, abort the process
+        if (currentPos === null || !attachment) return false;
+
+        // Update the placeholder node with the actual image data
+        tr.setNodeMarkup(currentPos, undefined, {
+          src: `/api/files/${attachment.id}/${attachment.fileName}`,
+          attachmentId: attachment.id,
+          size: attachment.fileSize,
+          aspectRatio,
+        });
+
+        return true;
+      };
+    };
+    const removePlaceholder = (): Command => {
+      return ({ tr }) => {
+        const { pos: currentPos = null } =
+          findImageNodeByPlaceholderId(tr.doc, placeholderId) || {};
+
+        if (currentPos === null) return false;
+
+        // Remove the placeholder node
+        tr.delete(currentPos, currentPos + 2);
+
+        return true;
+      };
+    };
     // Only show the placeholder if the upload takes more than 250ms
-    const displayPlaceholderTimeout = setTimeout(() => {
-      view.dispatch(tr);
-      placeholderShown = true;
-      tr = null;
+    const insertPlaceholderTimeout = setTimeout(() => {
+      editor.commands.command(insertPlaceholder());
+      placeholderInserted = true;
     }, 250);
+    const disposePreviewFile = () => {
+      URL.revokeObjectURL(objectUrl);
+
+      if (editor.storage.shared.imagePreviews) {
+        delete editor.storage.shared.imagePreviews[placeholderId];
+      }
+    };
 
     try {
       const attachment: IAttachment = await onUpload(file, pageId);
 
-      tr = tr ?? view.state.tr;
+      clearTimeout(insertPlaceholderTimeout);
 
-      const { pos: currentPos = null } =
-        findImageNodeByPlaceholderId(tr.doc, placeholderId) || {};
-
-      //  If the placeholder is not found or attachment is missing, abort the process
-      if (currentPos === null || !attachment) return;
-
-      // Update the placeholder node with the actual image data
-      tr.setNodeMarkup(currentPos, undefined, {
-        src: `/api/files/${attachment.id}/${attachment.fileName}`,
-        attachmentId: attachment.id,
-        title: attachment.fileName,
-        size: attachment.fileSize,
-        aspectRatio,
-      });
-    } catch (error) {
-      tr = tr ?? view.state.tr;
-
-      const { pos: currentPos = null } =
-        findImageNodeByPlaceholderId(tr.doc, placeholderId) || {};
-
-      if (currentPos === null) return;
-
-      // Delete the image placeholder on error
-      tr.delete(currentPos, currentPos + 2);
-    } finally {
-      clearTimeout(displayPlaceholderTimeout);
-
-      // If the placeholder was shown, delay showing the image to avoid flicker
-      if (placeholderShown) {
+      if (placeholderInserted) {
         setTimeout(() => {
-          view.dispatch(tr);
+          editor.commands.command(replacePlaceholderWithImage(attachment));
+          disposePreviewFile();
         }, 100);
       } else {
-        view.dispatch(tr);
+        editor
+          .chain()
+          .command(insertPlaceholder())
+          .command(replacePlaceholderWithImage(attachment))
+          .run();
+        disposePreviewFile();
       }
+    } catch (error) {
+      clearTimeout(insertPlaceholderTimeout);
+
+      editor.commands.command(removePlaceholder());
+      disposePreviewFile();
     }
   };
 

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

@@ -9,13 +9,15 @@ export interface ImageOptions extends DefaultImageOptions {
 export interface ImageAttributes {
   src?: string;
   alt?: string;
-  title?: string;
   align?: string;
   attachmentId?: string;
   size?: number;
   width?: number;
   aspectRatio?: number;
-  placeholderId?: string;
+  placeholder?: {
+    id: string;
+    name: string;
+  };
 }
 
 declare module "@tiptap/core" {
@@ -98,7 +100,7 @@ export const TiptapImage = Image.extend<ImageOptions>({
           "data-aspect-ratio": attributes.aspectRatio,
         }),
       },
-      placeholderId: {
+      placeholder: {
         default: null,
         rendered: false,
       },

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

@@ -1,9 +1,8 @@
-import type { EditorView } from "@tiptap/pm/view";
-import { Transaction } from "@tiptap/pm/state";
+import { Editor } from "@tiptap/core";
 
 export type UploadFn = (
   file: File,
-  view: EditorView,
+  editor: Editor,
   pos: number,
   pageId: string,
   // only applicable to file attachments
@@ -14,16 +13,3 @@ export interface MediaUploadOptions {
   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/shared-storage/index.ts

@@ -0,0 +1 @@
+export { SharedStorage } from "./shared-storage";

packages/editor-ext/src/lib/shared-storage/shared-storage.ts

@@ -0,0 +1,17 @@
+import { Extension } from "@tiptap/core";
+
+declare module "@tiptap/core" {
+  interface Storage {
+    shared: Record<string, any>;
+  }
+}
+
+const SharedStorage = Extension.create({
+  name: "shared",
+
+  addStorage() {
+    return {};
+  },
+});
+
+export { SharedStorage };

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

@@ -1,8 +1,8 @@
-import { Transaction } from "@tiptap/pm/state";
 import { MediaUploadOptions, UploadFn } from "../media-utils";
 import { IAttachment } from "../types";
 import { generateNodeId } from "../utils";
 import { Node } from "@tiptap/pm/model";
+import { Command } from "@tiptap/core";
 
 const findVideoNodeByPlaceholderId = (
   doc: Node,
@@ -15,7 +15,7 @@ const findVideoNodeByPlaceholderId = (
 
     if (
       node.type.name === "video" &&
-      node.attrs.placeholderId === placeholderId
+      node.attrs.placeholder?.id === placeholderId
     ) {
       result = { node, pos };
       return false;
@@ -52,7 +52,7 @@ const getVideoDimensions = (
 };
 const handleVideoUpload =
   ({ validateFn, onUpload }: MediaUploadOptions): UploadFn =>
-  async (file, view, pos, pageId) => {
+  async (file, editor, pos, pageId) => {
     // check if the file is valid
     const validated = validateFn?.(file);
     // @ts-ignore
@@ -62,84 +62,107 @@ const handleVideoUpload =
     const videoDimensions = await getVideoDimensions(objectUrl);
     const placeholderId = generateNodeId();
     const aspectRatio = videoDimensions.aspectRatio;
-    const initialPlaceholderNode = view.state.schema.nodes.video?.create({
-      placeholderId,
-      aspectRatio,
-    });
 
-    let tr: Transaction | null = view.state.tr;
-    let placeholderShown = false;
+    let placeholderInserted = false;
 
-    if (!initialPlaceholderNode) {
-      URL.revokeObjectURL(objectUrl);
-      return;
-    }
+    editor.storage.shared.videoPreviews =
+      editor.storage.shared.videoPreviews || {};
+    editor.storage.shared.videoPreviews[placeholderId] = objectUrl;
 
-    const { parent } = tr.doc.resolve(pos);
-    const isEmptyTextBlock = parent.isTextblock && !parent.childCount;
+    const insertPlaceholder = (): Command => {
+      return ({ tr, state }) => {
+        const initialPlaceholderNode = state.schema.nodes.video?.create({
+          placeholder: {
+            id: placeholderId,
+            name: file.name,
+          },
+          aspectRatio,
+        });
 
-    if (isEmptyTextBlock) {
-      // Replace e.g. empty paragraph with the video
-      tr.replaceRangeWith(pos - 1, pos + 1, initialPlaceholderNode);
-    } else {
-      tr.insert(pos, initialPlaceholderNode);
-    }
+        if (!initialPlaceholderNode) return false;
+
+        const { parent } = tr.doc.resolve(pos);
+        const isEmptyTextBlock = parent.isTextblock && !parent.childCount;
+
+        if (isEmptyTextBlock) {
+          // Replace e.g. empty paragraph with the video
+          tr.replaceRangeWith(pos - 1, pos + 1, initialPlaceholderNode);
+        } else {
+          tr.insert(pos, initialPlaceholderNode);
+        }
+
+        return true;
+      };
+    };
+    const replacePlaceholderWithVideo = (attachment: IAttachment): Command => {
+      return ({ tr }) => {
+        const { pos: currentPos = null } =
+          findVideoNodeByPlaceholderId(tr.doc, placeholderId) || {};
+
+        //  If the placeholder is not found or attachment is missing, abort the process
+        if (currentPos === null || !attachment) return;
+
+        // Update the placeholder node with the actual video data
+        tr.setNodeMarkup(currentPos, undefined, {
+          src: `/api/files/${attachment.id}/${attachment.fileName}`,
+          attachmentId: attachment.id,
+          title: attachment.fileName,
+          size: attachment.fileSize,
+          aspectRatio,
+        });
+
+        return true;
+      };
+    };
+    const removePlaceholder = (): Command => {
+      return ({ tr }) => {
+        const { pos: currentPos = null } =
+          findVideoNodeByPlaceholderId(tr.doc, placeholderId) || {};
+
+        if (currentPos === null) return false;
+
+        tr.delete(currentPos, currentPos + 2);
+
+        return true;
+      };
+    };
 
     // Only show the placeholder if the upload takes more than 250ms
-    const displayPlaceholderTimeout = setTimeout(() => {
-      view.dispatch(tr);
-      placeholderShown = true;
-      tr = null;
+    const insertPlaceholderTimeout = setTimeout(() => {
+      editor.commands.command(insertPlaceholder());
+      placeholderInserted = true;
     }, 250);
+    const disposePreviewFile = () => {
+      URL.revokeObjectURL(objectUrl);
+
+      if (editor.storage.shared.videoPreviews) {
+        delete editor.storage.shared.videoPreviews[placeholderId];
+      }
+    };
 
     try {
       const attachment: IAttachment = await onUpload(file, pageId);
 
-      tr = tr ?? view.state.tr;
+      clearTimeout(insertPlaceholderTimeout);
 
-      const { pos: currentPos = null } =
-        findVideoNodeByPlaceholderId(tr.doc, placeholderId) || {};
-
-      //  If the placeholder is not found or attachment is missing, abort the process
-      if (currentPos === null || !attachment) return;
-
-      // Update the placeholder node with the actual video data
-      tr.setNodeMarkup(currentPos, undefined, {
-        src: `/api/files/${attachment.id}/${attachment.fileName}`,
-        attachmentId: attachment.id,
-        title: attachment.fileName,
-        size: attachment.fileSize,
-        aspectRatio,
-      });
-    } catch (error) {
-      tr = tr ?? view.state.tr;
-
-      const { pos: currentPos = null } =
-        findVideoNodeByPlaceholderId(tr.doc, placeholderId) || {};
-
-      if (currentPos === null) return;
-
-      // Delete the video placeholder on error
-      tr.delete(
-        currentPos,
-        currentPos + (initialPlaceholderNode.nodeSize ?? 2),
-      );
-    } finally {
-      clearTimeout(displayPlaceholderTimeout);
-
-      const dispatchFinal = () => {
-        view.dispatch(tr);
-        URL.revokeObjectURL(objectUrl);
-      };
-
-      // If the placeholder was shown, delay showing the video to avoid flicker
-      if (placeholderShown) {
+      if (placeholderInserted) {
         setTimeout(() => {
-          dispatchFinal();
+          editor.commands.command(replacePlaceholderWithVideo(attachment));
+          disposePreviewFile();
         }, 100);
       } else {
-        dispatchFinal();
+        editor
+          .chain()
+          .command(insertPlaceholder())
+          .command(replacePlaceholderWithVideo(attachment))
+          .run();
+        disposePreviewFile();
       }
+    } catch (error) {
+      clearTimeout(insertPlaceholderTimeout);
+
+      editor.commands.command(removePlaceholder());
+      disposePreviewFile();
     }
   };
 

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

@@ -7,13 +7,15 @@ export interface VideoOptions {
 }
 export interface VideoAttributes {
   src?: string;
-  title?: string;
   align?: string;
   attachmentId?: string;
   size?: number;
   width?: number;
   aspectRatio?: number;
-  placeholderId?: string;
+  placeholder?: {
+    id: string;
+    name: string;
+  };
 }
 
 declare module "@tiptap/core" {
@@ -89,7 +91,7 @@ export const TiptapVideo = Node.create<VideoOptions>({
           "data-aspect-ratio": attributes.aspectRatio,
         }),
       },
-      placeholderId: {
+      placeholder: {
         default: null,
         rendered: false,
       },