Konnorrogers/fix direct upload success events (#231)

* fix upload success events

* remove console.log

* prettier

* prettier

* add changelog entry

Author: KonnorRogers

.changeset/silly-forks-switch.md

@@ -0,0 +1,5 @@
+---
+"rhino-editor": patch
+---
+
+Fix the hacky workaround for slow / unstable connections

.changeset/sweet-crews-fly.md

@@ -0,0 +1,5 @@
+---
+"rhino-editor": patch
+---
+
+remove unnecessary console.log

src/exports/attachment-manager.ts

@@ -3,6 +3,11 @@ import { uuidv4 } from "../internal/uuidv4.js";
 import type { EditorView } from "@tiptap/pm/view";
 import { LOADING_STATES } from "./elements/attachment-editor.js";
 import { toDefaultCaption } from "../internal/to-default-caption.js";
+import {
+  AttachmentUpload,
+  AttachmentUploadCompleteEvent,
+  AttachmentUploadSucceedEvent,
+} from "./attachment-upload.js";
 
 export interface AttachmentManagerAttributes {
   src: string;
@@ -30,6 +35,7 @@ export interface AttachmentManagerAttributes {
 export class AttachmentManager implements AttachmentManagerAttributes {
   attributes: AttachmentManagerAttributes;
   editorView: EditorView;
+  directUpload?: AttachmentUpload;
 
   static get previewableRegex() {
     return /^image(\/(gif|png|jpe?g)|$)/;
@@ -77,6 +83,8 @@ export class AttachmentManager implements AttachmentManagerAttributes {
         previewable: this.isPreviewable,
       });
 
+      this.handleSuccess();
+
       return;
     }
 
@@ -107,6 +115,7 @@ export class AttachmentManager implements AttachmentManagerAttributes {
           previewable: this.isPreviewable,
         });
         image.remove();
+        this.handleSuccess();
       };
       return;
     }
@@ -120,6 +129,16 @@ export class AttachmentManager implements AttachmentManagerAttributes {
       contentType: this.contentType,
       previewable: this.isPreviewable,
     });
+    this.handleSuccess();
+  }
+
+  handleSuccess() {
+    const upload = this.directUpload;
+    if (upload) {
+      this.setUploadProgress(100);
+      upload.element.dispatchEvent(new AttachmentUploadSucceedEvent(upload));
+      upload.element.dispatchEvent(new AttachmentUploadCompleteEvent(upload));
+    }
   }
 
   /**

src/exports/attachment-upload.ts

@@ -152,34 +152,14 @@ export class AttachmentUpload implements DirectUploadDelegate {
       return;
     }
 
-    const blobUrl = this.createBlobUrl(blob.signed_id, blob.filename);
-    this.attachment.setAttributes({
-      sgid: blob.attachable_sgid ?? "",
-      url: blobUrl,
-    });
-
-    // TODO: This may create problems for non-images, could use something like an `<object src="<url>">` instead.
-    const template = document.createElement("template");
-    const obj = document.createElement("object");
-    obj.toggleAttribute("hidden", true);
-    template.append(obj);
-
-    obj.onload = () => {
-      template.remove();
-      this.progress = 100;
-      this.setUploadProgress();
-      this.element.dispatchEvent(new AttachmentUploadSucceedEvent(this));
-      this.element.dispatchEvent(new AttachmentUploadCompleteEvent(this));
-    };
-
-    obj.onerror = () => {
-      template.remove();
-      this.handleError();
-    };
-
-    obj.data = blobUrl;
-    // Needs to append to for onerror / onload to fire.
-    document.body.append(template);
+    if (blob.attachable_sgid) {
+      const blobUrl = this.createBlobUrl(blob.signed_id, blob.filename);
+      this.attachment.directUpload = this;
+      this.attachment.setAttributes({
+        sgid: blob.attachable_sgid,
+        url: blobUrl,
+      });
+    }
   }
 
   setUploadProgress() {

src/exports/elements/tip-tap-editor-base.ts

@@ -422,7 +422,6 @@ export class TipTapEditorBase extends BaseElement {
       return attachment === e.attachmentUpload;
     });
 
-    console.log("complete");
     if (index > -1) {
       this.pendingAttachments.splice(index, 1);
     }

src/exports/elements/tip-tap-editor.ts

@@ -1559,7 +1559,6 @@ export class TipTapEditor extends TipTapEditorBase {
           if (e.defaultPrevented) {
             return;
           }
-          console.log("show");
 
           const anchoredRegion = e.currentTarget as RoleAnchoredRegion;
           anchoredRegion.anchor = { getBoundingClientRect: e.clientRect };