Fix images not loading on paste

packages/editor/package.json

@@ -34,6 +34,7 @@
     "@tiptap/extension-underline": "2.1.12",
     "@tiptap/pm": "2.1.12",
     "@tiptap/starter-kit": "2.1.12",
+    "async-mutex": "^0.4.0",
     "clipboard-polyfill": "4.0.0",
     "detect-indent": "^7.0.0",
     "entities": "^4.5.0",

packages/editor/src/extensions/image/component.tsx

@@ -43,7 +43,7 @@ export const AnimatedImage = motion(Image);
 
 export function ImageComponent(
   props: SelectionBasedReactNodeViewProps<
-    ImageAttributes & ImageAlignmentOptions
+    Partial<ImageAttributes & ImageAlignmentOptions>
   >
 ) {
   const { editor, node, selected } = props;
@@ -68,7 +68,7 @@ export function ImageComponent(
   const imageRef = useRef<HTMLImageElement>(null);
   const downloadOptions = useToolbarStore((store) => store.downloadOptions);
   const isReadonly = !editor.current?.isEditable;
-  const isSVG = mime.includes("/svg");
+  const isSVG = !!mime && mime.includes("/svg");
   const relativeHeight = aspectRatio
     ? editor.view.dom.clientWidth / aspectRatio
     : undefined;
@@ -244,37 +244,47 @@ export function ImageComponent(
                 : "2px solid transparent !important",
               borderRadius: "default"
             }}
-            onDoubleClick={() =>
-              editor.current?.commands.previewAttachment(node.attrs)
-            }
-            onLoad={async () => {
+            onDoubleClick={() => {
+              const { hash, filename, mime, size } = node.attrs;
+              if (!!hash && !!filename && !!mime && !!size)
+                editor.current?.commands.previewAttachment({
+                  hash,
+                  filename,
+                  mime,
+                  size
+                });
+            }}
+            onLoad={async function onLoad() {
               if (!imageRef.current) return;
               const { clientHeight, clientWidth } = imageRef.current;
-
-              if (!isDataUrl(src) && canParse(src)) {
-                const { url, size, blob, mimeType } = await downloadImage(
-                  src,
-                  downloadOptions
-                );
-                editor.current?.commands.updateImage(
-                  { src, hash },
-                  {
-                    src: await toDataURL(blob),
-                    bloburl: url,
-                    size: size,
-                    mime: mimeType,
-                    aspectRatio:
-                      !height && !width && !aspectRatio
-                        ? clientWidth / clientHeight
-                        : undefined
-                  }
+              if (src && !isDataUrl(src) && canParse(src)) {
+                const image = await downloadImage(src, downloadOptions);
+                if (!image) return;
+                const { url, size, blob, mimeType } = image;
+                const dataurl = await toDataURL(blob);
+                await editor.threadsafe((editor) =>
+                  editor.commands.updateImage(
+                    { src, hash },
+                    {
+                      src: dataurl,
+                      bloburl: url,
+                      size: size,
+                      mime: mimeType,
+                      aspectRatio:
+                        !height && !width && !aspectRatio
+                          ? clientWidth / clientHeight
+                          : undefined
+                    }
+                  )
                 );
               } else if (!height && !width && !aspectRatio) {
-                editor.current?.commands.updateImage(
-                  { src, hash },
-                  {
-                    aspectRatio: clientWidth / clientHeight
-                  }
+                await editor.threadsafe((editor) =>
+                  editor.commands.updateImage(
+                    { src, hash },
+                    {
+                      aspectRatio: clientWidth / clientHeight
+                    }
+                  )
                 );
               }
             }}

packages/editor/src/toolbar/popups/image-upload.tsx

@@ -49,10 +49,9 @@ export function ImageUploadPopup(props: ImageUploadPopupProps) {
           setError(undefined);
 
           try {
-            const { blob, size, mimeType } = await downloadImage(
-              url,
-              downloadOptions
-            );
+            const image = await downloadImage(url, downloadOptions);
+            if (!image) return;
+            const { blob, size, mimeType } = image;
             onInsert({ src: await toDataURL(blob), size, mime: mimeType });
           } catch (e) {
             if (e instanceof Error) setError(e.message);

packages/editor/src/types.ts

@@ -18,10 +18,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { UnionCommands, Editor as TiptapEditor } from "@tiptap/core";
+import { Mutex } from "async-mutex";
 
 export type PermissionRequestEvent = CustomEvent<{ id: keyof UnionCommands }>;
 
 export class Editor extends TiptapEditor {
+  private mutex: Mutex = new Mutex();
   /**
    * Use this to get the latest instance of the editor.
    * This is required to reduce unnecessary rerenders of
@@ -45,4 +47,15 @@ export class Editor extends TiptapEditor {
 
     return this.current;
   }
+
+  /**
+   * Performs editor state changes in a thread-safe manner using a mutex
+   * ensuring that all changes are applied sequentially. Use this when
+   * you are getting `RangeError: Applying a mismatched transaction` errors.
+   */
+  threadsafe(callback: (editor: TiptapEditor) => void) {
+    return this.mutex.runExclusive(() =>
+      this.current ? callback(this.current) : void 0
+    );
+  }
 }

packages/editor/src/utils/downloader.ts

@@ -60,14 +60,17 @@ const UTITypes: Record<string, string> = {
   "public.heifs": "image/heif-sequence"
 };
 
-export function corsify(url: string, host?: string) {
+export function corsify(url?: string, host?: string) {
   if (host && url && !url.startsWith("blob:") && !isDataUrl(url))
     return `${host}/${url}`;
   return url;
 }
 
 export async function downloadImage(url: string, options?: DownloadOptions) {
-  const response = await fetch(corsify(url, options?.corsHost), {
+  const corsifiedURL = corsify(url, options?.corsHost);
+  if (!corsifiedURL) return;
+
+  const response = await fetch(corsifiedURL, {
     mode: "cors",
     credentials: "omit",
     cache: "force-cache"