Fix mobile safari previews (#128)

* add changeseT * prettier * remove console.log * remove console.log * remove console.log * make TS happy * prettier * fix attachment previews on mobile safari * remove nonsense * prettier * update to github changelog * fix release deploys
KonnorRogers · Sep 21, 2023 · fae7c47 · fae7c47
1 parent 2987b63
commit fae7c47
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 12 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
-  "changelog": "@changesets/cli/changelog",
+  "changelog": ["@changesets/changelog-github", { "repo": "konnorrogers/rhino-editor" }],
   "commit": false,
   "fixed": [],
   "linked": [],

diff --git a/.changeset/purple-eggs-camp.md b/.changeset/purple-eggs-camp.md
@@ -0,0 +1,5 @@
+---
+"rhino-editor": patch
+---
+
+- Fix rendering of inline previews of images on Mobile Safari.
diff --git a/.github/workflows/preview-deploy.yml b/.github/workflows/preview-deploy.yml
@@ -5,8 +5,9 @@ env:
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
   VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
 on:
-  release:
-    types: [published]
+  push:
+    tags:
+      - "*"
 jobs:
   Deploy-Preview:
     runs-on: ubuntu-latest

diff --git a/src/exports/attachment-manager.ts b/src/exports/attachment-manager.ts
@@ -88,7 +88,7 @@ export class AttachmentManager implements AttachmentManagerAttributes {
       /** This preloads the image so we don't show a big flash. */
       const image = new Image();
 
-      image.src = obj.url;
+      image.setAttribute("src", obj.url);
 
       image.onload = () => {
         this.attributes.width = image.naturalWidth;
@@ -139,14 +139,27 @@ export class AttachmentManager implements AttachmentManagerAttributes {
     });
   }
 
+  /**
+   * This is an internal ID used for finding newly attached attachments in the TipTap editor.
+   * This is used primarily for direct upload purposes.
+   * This generally won't exist when a node is recreated from you database.
+   */
   get attachmentId() {
     return this.attributes.attachmentId;
   }
 
+  /**
+   * This is an internal ID used for finding newly attached images in the TipTap editor.
+   * This is used primarily for direct upload purposes.
+   * This generally won't exist when a node is recreated from you database.
+   */
   get imageId() {
     return this.attributes.imageId;
   }
 
+  /**
+   * `src` (when present) always maps to a URL.createObjectURL.
+   */
   get src() {
     return this.attributes.src;
   }
@@ -175,6 +188,10 @@ export class AttachmentManager implements AttachmentManagerAttributes {
     return this.attributes.fileSize || this.file?.size;
   }
 
+  /**
+   * This field is populated by the old Trix custom attachment API and denotes if we're using a custom
+   * attachment.
+   */
   get content() {
     return this.attributes.content;
   }

diff --git a/src/exports/extensions/attachment.ts b/src/exports/extensions/attachment.ts
@@ -218,6 +218,7 @@ export const Attachment = Node.create<AttachmentOptions>({
                   nodeAttrs,
                   view,
                 );
+
                 view.dom.dispatchEvent(
                   new AttachmentRemoveEvent(attachmentManager),
                 );
@@ -483,13 +484,6 @@ export const Attachment = Node.create<AttachmentOptions>({
         }
       }
 
-      // Clean up any objects laying around
-      if (url) {
-        try {
-          URL.revokeObjectURL(src);
-        } catch (_e) {}
-      }
-
       const isPreviewable = canPreview(previewable, contentType);
 
       let imgSrc: string | undefined = undefined;
@@ -551,10 +545,25 @@ export const Attachment = Node.create<AttachmentOptions>({
       const dom = scratch.firstElementChild;
       const contentDOM = dom?.querySelector("figcaption");
 
+      let srcRevoked = false;
+
       return {
         dom,
         contentDOM,
-        update() {
+        update(node) {
+          if (node.type.name !== "attachment") return false;
+
+          if (!srcRevoked && node.attrs.url) {
+            srcRevoked = true;
+
+            /** Do your part to save the environment. (Try to) prevent memory leaks. */
+            try {
+              URL.revokeObjectURL(node.attrs.src);
+            } catch (_e) {
+              /* We don't really care if this fails. We tried. */
+            }
+          }
+
           return false;
         },
       };