fix: Transaction handling on asset upload

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

@@ -2,6 +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";
 
 const findAttachmentNodeByPlaceholderId = (
   doc: Node,
@@ -37,8 +38,8 @@ const handleAttachmentUpload =
       size: file.size,
     });
 
+    let tr: Transaction | null = view.state.tr;
     let placeholderShown = false;
-    let tr = view.state.tr;
 
     if (!initialPlaceholderNode) return;
 
@@ -55,11 +56,14 @@ const handleAttachmentUpload =
     const displayPlaceholderTimeout = setTimeout(() => {
       view.dispatch(tr);
       placeholderShown = true;
-      tr = view.state.tr;
+      tr = null;
     }, 250);
 
     try {
       const attachment: IAttachment = await onUpload(file, pageId);
+
+      tr = tr ?? view.state.tr;
+
       const { pos: currentPos = null } =
         findAttachmentNodeByPlaceholderId(tr.doc, placeholderId) || {};
 
@@ -75,6 +79,8 @@ const handleAttachmentUpload =
         attachmentId: attachment.id,
       });
     } catch (error) {
+      tr = tr ?? view.state.tr;
+
       const { pos: currentPos = null } =
         findAttachmentNodeByPlaceholderId(tr.doc, placeholderId) || {};
 

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

@@ -3,6 +3,7 @@ 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";
 
 const findImageNodeByPlaceholderId = (
   doc: Node,
@@ -42,8 +43,8 @@ const handleImageUpload =
       aspectRatio,
     });
 
+    let tr: Transaction | null = view.state.tr;
     let placeholderShown = false;
-    let tr = view.state.tr;
 
     if (!initialPlaceholderNode) return;
 
@@ -61,11 +62,14 @@ const handleImageUpload =
     const displayPlaceholderTimeout = setTimeout(() => {
       view.dispatch(tr);
       placeholderShown = true;
-      tr = view.state.tr;
+      tr = null;
     }, 250);
 
     try {
       const attachment: IAttachment = await onUpload(file, pageId);
+
+      tr = tr ?? view.state.tr;
+
       const { pos: currentPos = null } =
         findImageNodeByPlaceholderId(tr.doc, placeholderId) || {};
 
@@ -81,6 +85,8 @@ const handleImageUpload =
         aspectRatio,
       });
     } catch (error) {
+      tr = tr ?? view.state.tr;
+
       const { pos: currentPos = null } =
         findImageNodeByPlaceholderId(tr.doc, placeholderId) || {};
 

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

@@ -1,3 +1,4 @@
+import { Transaction } from "@tiptap/pm/state";
 import { MediaUploadOptions, UploadFn } from "../media-utils";
 import { IAttachment } from "../types";
 import { generateNodeId } from "../utils";
@@ -66,8 +67,8 @@ const handleVideoUpload =
       aspectRatio,
     });
 
+    let tr: Transaction | null = view.state.tr;
     let placeholderShown = false;
-    let tr = view.state.tr;
 
     if (!initialPlaceholderNode) {
       URL.revokeObjectURL(objectUrl);
@@ -88,11 +89,14 @@ const handleVideoUpload =
     const displayPlaceholderTimeout = setTimeout(() => {
       view.dispatch(tr);
       placeholderShown = true;
-      tr = view.state.tr;
+      tr = null;
     }, 250);
 
     try {
       const attachment: IAttachment = await onUpload(file, pageId);
+
+      tr = tr ?? view.state.tr;
+
       const { pos: currentPos = null } =
         findVideoNodeByPlaceholderId(tr.doc, placeholderId) || {};
 
@@ -108,6 +112,8 @@ const handleVideoUpload =
         aspectRatio,
       });
     } catch (error) {
+      tr = tr ?? view.state.tr;
+
       const { pos: currentPos = null } =
         findVideoNodeByPlaceholderId(tr.doc, placeholderId) || {};