From 35cac0db6294e3a327f68a589fea3d92e1032105 Mon Sep 17 00:00:00 2001
From: Cesar Augusto <cesardeazevedo@outlook.com>
Date: Sun, 24 Nov 2024 00:46:08 -0300
Subject: [PATCH] Don't upload images that were already uploaded elsewhere

Users can paste image URLs directly into the editor without triggering
uploads.
---
 .../src/components/Image/ImageEditor.tsx      |  9 +++---
 .../src/components/Video/VideoEditor.tsx      |  9 +++---
 src/__tests__/upload.test.ts                  | 30 +++++++++++++++++++
 src/extensions/FileUploadExtension.ts         |  3 +-
 4 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/examples/react/src/components/Image/ImageEditor.tsx b/examples/react/src/components/Image/ImageEditor.tsx
index d8a4359..ec95c59 100644
--- a/examples/react/src/components/Image/ImageEditor.tsx
+++ b/examples/react/src/components/Image/ImageEditor.tsx
@@ -10,7 +10,8 @@ import { UploadingProgress } from '../UploadingProgress'
 import { Image } from './Image'
 
 export function ImageEditor(props: NodeViewProps) {
-  const { src, alt, uploadUrl, uploading, uploadError, sha256 } = props.node.attrs as ImageAttributes
+  const { src, alt, uploadUrl, uploading, uploadError } = props.node.attrs as ImageAttributes
+  const isUploaded = !src.startsWith('blob://http')
   return (
     <NodeViewWrapper
       data-drag-handle=''
@@ -20,8 +21,8 @@ export function ImageEditor(props: NodeViewProps) {
       <UploadingProgress uploading={uploading} />
       <Image src={src} />
       <MediaFooter>
-        {!sha256 ? <AltButton value={alt} onChange={(alt) => props.updateAttributes({ alt })} /> : <div />}
-        {!sha256 && (
+        {!isUploaded && <AltButton value={alt} onChange={(alt) => props.updateAttributes({ alt })} />}
+        {!isUploaded && (
           <UploadChip
             uploadUrl={uploadUrl}
             onChange={(uploadType, uploadUrl) => {
@@ -29,7 +30,7 @@ export function ImageEditor(props: NodeViewProps) {
             }}
           />
         )}
-        {sha256 && (
+        {isUploaded && (
           <span data-tooltip={src}>
             <IconCheck
               size={26}
diff --git a/examples/react/src/components/Video/VideoEditor.tsx b/examples/react/src/components/Video/VideoEditor.tsx
index 20875ac..aadd7ef 100644
--- a/examples/react/src/components/Video/VideoEditor.tsx
+++ b/examples/react/src/components/Video/VideoEditor.tsx
@@ -10,7 +10,8 @@ import { UploadingProgress } from '../UploadingProgress'
 import { Video } from './Video'
 
 export function VideoEditor(props: NodeViewProps) {
-  const { src, alt, sha256, uploadError, uploadUrl, uploading } = props.node.attrs as VideoAttributes
+  const { src, alt, uploadError, uploadUrl, uploading } = props.node.attrs as VideoAttributes
+  const isUploaded = !src.startsWith('blob://http')
   return (
     <NodeViewWrapper
       data-drag-handle=''
@@ -20,14 +21,14 @@ export function VideoEditor(props: NodeViewProps) {
       <UploadingProgress uploading={uploading} />
       <Video controls={false} src={src} />
       <MediaFooter>
-        {!sha256 ? <AltButton value={alt} onChange={(alt) => props.updateAttributes({ alt })} /> : <div />}
-        {!sha256 && (
+        {!isUploaded ? <AltButton value={alt} onChange={(alt) => props.updateAttributes({ alt })} /> : <div />}
+        {!isUploaded && (
           <UploadChip
             uploadUrl={uploadUrl}
             onChange={(uploadType, uploadUrl) => props.updateAttributes({ uploadType, uploadUrl })}
           />
         )}
-        {sha256 && (
+        {isUploaded && (
           <span data-tooltip={src}>
             <IconCheck
               size={26}
diff --git a/src/__tests__/upload.test.ts b/src/__tests__/upload.test.ts
index 5b6a4ad..03013d1 100644
--- a/src/__tests__/upload.test.ts
+++ b/src/__tests__/upload.test.ts
@@ -1,5 +1,6 @@
 import { hash1, hash2, responses, mockBlossomServer } from './mockBlossom'
 import { test } from './fixtures'
+import { fakeEvent } from './testUtils'
 
 function getReponse(hash: typeof hash1 | typeof hash2) {
   const res = responses[hash]
@@ -129,4 +130,33 @@ describe('FileUpload', () => {
     expect(spyUploadError).not.toHaveBeenCalled()
     expect(spyComplete).toHaveBeenCalledOnce()
   })
+
+  test('assert blob urls as pending uploads and real urls as uploaded', async ({
+    editor,
+    getFile,
+    fileUploadExtension,
+  }) => {
+    const fileUpload = fileUploadExtension(editor)
+    editor.commands.setEventContent(fakeEvent({ content: 'test link https://nostr.com/image.jpg' }))
+    await expect(editor.storage.fileUpload.uploader.start()).resolves.toEqual([
+      {
+        alt: null,
+        file: null,
+        sha256: null,
+        src: 'https://nostr.com/image.jpg',
+        tags: null,
+        uploadError: null,
+        uploadType: 'blossom',
+        uploadUrl: 'https://localhost:3000',
+        uploading: false,
+      },
+    ])
+    editor.commands.clearContent()
+    const file = await getFile('test_upload.png')
+    editor.commands.addFile(file, editor.$doc.size - 2)
+    await new Promise<void>((resolve) => setTimeout(() => resolve(), 100))
+    const found = fileUpload.storage.uploader?.['findNodes'](false)
+    expect(found).toHaveLength(1)
+    expect(found?.[0][0].type.name).toBe('image')
+  })
 })
diff --git a/src/extensions/FileUploadExtension.ts b/src/extensions/FileUploadExtension.ts
index 0cefa7c..74fb20b 100644
--- a/src/extensions/FileUploadExtension.ts
+++ b/src/extensions/FileUploadExtension.ts
@@ -177,7 +177,8 @@ class Uploader {
         return
       }
       if (uploaded !== undefined) {
-        if (!!node.attrs.sha256 !== uploaded) {
+        const isUploaded = !node.attrs.src.startsWith('blob:')
+        if (isUploaded !== uploaded) {
           return
         }
       }