Merge pull request #233 from KonnorRogers/main

Main -> Latest

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.14.1
+
+### Patch Changes
+
+- [#231](https://github.com/KonnorRogers/rhino-editor/pull/231) [`01dbfbf`](https://github.com/KonnorRogers/rhino-editor/commit/01dbfbf01a421fe07f38ac005c2073f900c03ad8) Thanks [@KonnorRogers](https://github.com/KonnorRogers)! - Fix the hacky workaround for slow / unstable connections
+
+- [#231](https://github.com/KonnorRogers/rhino-editor/pull/231) [`01dbfbf`](https://github.com/KonnorRogers/rhino-editor/commit/01dbfbf01a421fe07f38ac005c2073f900c03ad8) Thanks [@KonnorRogers](https://github.com/KonnorRogers)! - remove unnecessary console.log
+
+- [#230](https://github.com/KonnorRogers/rhino-editor/pull/230) [`588abba`](https://github.com/KonnorRogers/rhino-editor/commit/588abba117d2fe2257b874832c94a0a91d274362) Thanks [@bjhess](https://github.com/bjhess)! - Fix the UX of link insertions
+
 ## 0.14.0
 
 ### Minor Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rhino-editor",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "A custom element wrapped rich text editor",
   "type": "module",
   "main": "exports/index.js",

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,17 @@ export class AttachmentManager implements AttachmentManagerAttributes {
       contentType: this.contentType,
       previewable: this.isPreviewable,
     });
+    this.handleSuccess();
+  }
+
+  handleSuccess() {
+    this.setUploadProgress(100);
+    const upload = this.directUpload;
+
+    if (upload) {
+      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

@@ -303,6 +303,7 @@ export class TipTapEditor extends TipTapEditorBase {
 
   closeLinkDialog(): void {
     this.linkDialogExpanded = false;
+    this.editor?.commands.focus();
   }
 
   showLinkDialog(): void {
@@ -350,24 +351,29 @@ export class TipTapEditor extends TipTapEditorBase {
     } catch (error) {
       inputElement.setCustomValidity("Not a valid URL");
       this.__invalidLink__ = true;
+      inputElement.reportValidity();
+      return;
+    }
+
+    if (!this.editor) {
       return;
     }
 
     if (href) {
       this.closeLinkDialog();
       inputElement.value = "";
-      const chain = this.editor
-        ?.chain()
-        .extendMarkRange("link")
-        .setLink({ href });
 
-      if (chain && this.editor?.state.selection.empty) {
-        chain.insertContent(href);
+      if (
+        this.editor.state.selection.empty &&
+        !this.editor.getAttributes("link").href
+      ) {
+        const from = this.editor.state.selection.anchor;
+        this.editor.commands.insertContent(href);
+        const to = this.editor.state.selection.anchor;
+        this.editor.commands.setTextSelection({ from, to });
       }
 
-      if (chain) {
-        chain.run();
-      }
+      this.editor?.chain().extendMarkRange("link").setLink({ href }).run();
     }
   }
 
@@ -1559,7 +1565,6 @@ export class TipTapEditor extends TipTapEditorBase {
           if (e.defaultPrevented) {
             return;
           }
-          console.log("show");
 
           const anchoredRegion = e.currentTarget as RoleAnchoredRegion;
           anchoredRegion.anchor = { getBoundingClientRect: e.clientRect };