opt: improve image upload UX (#508)

* opti: notify the user about the deletion url of the uploaded image

* Update changelog

.github/CHANGELOG.md

@@ -1,4 +1,4 @@
-### 0.13.44
+### 0.13.45
 
 **:cactus:Feature**
 
@@ -29,6 +29,7 @@
 - feat: add tooltip to editor
 - opti: #429 Support DataURL images (#480)
 - opti: rewrite image picker
+- opti: notify the user about the deletion url of the uploaded image
 
 **:beetle:Bug fix**
 

src/renderer/components/editorWithTabs/editor.vue

@@ -207,6 +207,7 @@
         bus.$on('replaceValue', this.handReplace)
         bus.$on('find', this.handleFind)
         bus.$on('insert-image', this.handleSelect)
+        bus.$on('image-uploaded', this.handleUploadedImage)
         bus.$on('file-changed', this.handleMarkdownChange)
         bus.$on('editor-blur', this.blurEditor)
         bus.$on('image-auto-path', this.handleImagePath)
@@ -314,6 +315,11 @@
         this.$store.dispatch('SEARCH', searchMatches)
       },
 
+      handleUploadedImage (url, deletionUrl) {
+        this.handleSelect(url)
+        this.$store.dispatch('SHOW_IMAGE_DELETION_URL', deletionUrl)
+      },
+
       scrollToCursor () {
         this.$nextTick(() => {
           const { container } = this.editor

src/renderer/components/uploadImage/index.vue

@@ -75,9 +75,9 @@
       handleResponse (res) {
         if (res.code === 'success') {
           // handle success
-          const { url } = res.data
+          const { url, delete: deletionUrl } = res.data
           this.showUpload = false
-          bus.$emit('insert-image', url)
+          bus.$emit('image-uploaded', url, deletionUrl)
         } else if (res.code === 'error') {
           // handle error
           this.message = res.msg

src/renderer/store/editor.js

@@ -1,4 +1,4 @@
-import { ipcRenderer, shell } from 'electron'
+import { clipboard, ipcRenderer, shell } from 'electron'
 import path from 'path'
 import bus from '../bus'
 import { hasKeys } from '../util'
@@ -161,6 +161,18 @@ const actions = {
     commit('SET_SEARCH', value)
   },
 
+  SHOW_IMAGE_DELETION_URL ({ commit }, deletionUrl) {
+    notice.notify({
+      title: 'Image deletion URL',
+      message: `Click to copy the deletion URL of the uploaded image to the clipboard (${deletionUrl}).`,
+      showConfirm: true,
+      time: 20000
+    })
+      .then(() => {
+        clipboard.writeText(deletionUrl)
+      })
+  },
+
   REMOVE_FILE_IN_TABS ({ commit }, file) {
     commit('REMOVE_FILE_WITHIN_TABS', file)
   },