feat(editor): cache previous upload

thematters · Aug 1, 2024 · 80ba2ab · 80ba2ab
1 parent 82a42a6
commit 80ba2ab
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 16 deletions.
diff --git a/src/components/Editor/Article/extensions/figureImageUploader/Uploader.tsx b/src/components/Editor/Article/extensions/figureImageUploader/Uploader.tsx
@@ -36,11 +36,30 @@ const Uploader: React.FC<NodeViewProps> = (props) => {
     if (!mime) return
 
     try {
-      const { path } = await upload({ file, type: ASSET_TYPE.embed, mime })
+      // read from storage cache to prevent duplicate upload
+      // when redo and undo
+      const assets = editor.storage.figureImageUploader.assets as {
+        [key: string]: string
+      }
+      let path = assets[previewSrc]
+
+      // upload and update cache
+      if (!path) {
+        path = (await upload({ file, type: ASSET_TYPE.embed, mime })).path
+        editor.storage.figureImageUploader.assets = {
+          ...assets,
+          [previewSrc]: path,
+        }
+      }
+
+      const pos = getPos()
+      if (!getPos()) {
+        return
+      }
 
       return editor
         .chain()
-        .insertContentAt({ from: getPos(), to: getPos() + 1 }, [
+        .insertContentAt({ from: pos, to: pos + 1 }, [
           { type: 'figureImage', attrs: { src: path } },
         ])
         .run()
@@ -81,7 +100,7 @@ const Uploader: React.FC<NodeViewProps> = (props) => {
   }, [])
 
   return (
-    <NodeViewWrapper className="figure-image-uploader">
+    <NodeViewWrapper>
       <img src={previewSrc} alt="Uploading..." />
       <span className={styles.progressIndicator}>{progress}%</span>
     </NodeViewWrapper>

diff --git a/src/components/Editor/Article/extensions/figureImageUploader/index.ts b/src/components/Editor/Article/extensions/figureImageUploader/index.ts
@@ -32,6 +32,12 @@ export const FigureImageUploader = Node.create({
     }
   },
 
+  addStorage() {
+    return {
+      assets: {},
+    }
+  },
+
   parseHTML() {
     return [{ tag: 'figure-image-uploader' }]
   },
@@ -41,7 +47,9 @@ export const FigureImageUploader = Node.create({
   },
 
   addNodeView() {
-    return ReactNodeViewRenderer(Uploader)
+    return ReactNodeViewRenderer(Uploader, {
+      className: 'figure-image-uploader',
+    })
   },
 
   addCommands() {

diff --git a/src/components/Editor/Article/extensions/smartLink/index.ts b/src/components/Editor/Article/extensions/smartLink/index.ts
@@ -123,12 +123,6 @@ const findAndSearch = _debounce(
 export const SmartLink = Extension.create<SmartLinkOptions>({
   name: 'smartLink',
 
-  addStorage() {
-    return {
-      results: [],
-    }
-  },
-
   onUpdate() {
     // regexp must contains a named group `key`
     if (this.options.findRule.toString().indexOf('?<key>') === -1) {

diff --git a/src/components/Editor/Article/index.tsx b/src/components/Editor/Article/index.tsx
@@ -102,17 +102,13 @@ export const ArticleEditor: React.FC<ArticleEditorProps> = ({
           chain.run()
         },
         onPaste: async (editor, files) => {
-          let chain = editor.chain()
-
           Array.from(files).forEach((file) => {
-            chain.addFigureImageUploader({
+            editor.commands.addFigureImageUploader({
               upload,
               previewSrc: URL.createObjectURL(file),
               file,
             })
           })
-
-          chain.run()
         },
         mimeTypes: ACCEPTED_UPLOAD_IMAGE_TYPES,
       }),

diff --git a/src/components/Editor/Article/styles.module.css b/src/components/Editor/Article/styles.module.css
@@ -90,9 +90,17 @@
     }
 
     /* image uploader */
-    & :global(.figure-image-uploader) {
+    & :global(.figure-image-uploader),
+    & :global(figure),
+    /* gapcursor will sit between two figure */
+    & :global(.ProseMirror-gapcursor) {
       position: relative;
       margin: var(--ar17-200) 0;
+
+      & + :global(.figure-image-uploader),
+      & + :global(figure) {
+        margin-top: calc(var(--ar17-200) * 2);
+      }
     }
   }