feat: 支持自动上传远程图片

Author: xiewme

.vscode/settings.json

@@ -1,6 +1,5 @@
 {
   "editor.rulers": [100],
-  "prettier.eslintIntegration": false,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "eslint.validate": ["javascript", "javascriptreact", "typescript"],
   "editor.formatOnSave": true,

dist/index.js

@@ -1,6 +1,6 @@
 {
   "name": "@slimkit/plus-editor",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "rich-text editor for plus",
   "main": "dist/main.bundle.js",
   "repository": "[email protected]:mutoe/plus-editor.git",

dist/preview.js

@@ -17,6 +17,7 @@ export class ImageBlot extends BlockEmbed {
   static className = 'image-container'
 
   static quill: Quill
+  static remoteCounter = 1
   static eventEmitter = new EventEmitter()
   static uploadStatus: { [key: string]: any } = {}
 
@@ -31,7 +32,7 @@ export class ImageBlot extends BlockEmbed {
 
     const {
       img,
-      value: { id, src, width = 0, height = 0 },
+      value: { id, src, srcNode, width = 0, height = 0 },
     } = ImageBlot.getImgAndValue(node)
 
     if (id) {
@@ -50,27 +51,9 @@ export class ImageBlot extends BlockEmbed {
 
     if (img && src) {
       const appendEls = (width: number, height: number) => {
-        const wrap = node.querySelector('.image-wrap')
+        const wrap = node.querySelector('.image-wrap')!
 
-        if (!wrap) return
-
-        if (id && !node.querySelector('.progress-bar')) {
-          const div = ImageBlot.createDiv('progress-bar')
-          div.appendChild(ImageBlot.createDiv('progress'))
-          wrap.appendChild(div)
-        }
-
-        if (id && !node.querySelector('.error')) {
-          const div = ImageBlot.createDiv('error')
-          div.addEventListener('click', () => {
-            ImageBlot.uploadStatus[id] = {}
-            this.domNode.classList.remove('fail')
-            ImageBlot.eventEmitter.emit('reupload', { id })
-          })
-          wrap.appendChild(div)
-        }
-
-        if (width >= 100 && height >= 100) {
+        if (width >= 50 && height >= 50) {
           if (!node.querySelector('.remove')) {
             const div = ImageBlot.createDiv('remove')
             div.addEventListener('click', () => {
@@ -80,7 +63,18 @@ export class ImageBlot extends BlockEmbed {
           }
         }
 
-        if (id) ImageBlot.refreshUpload(id)
+        if (id) {
+          ImageBlot.refreshUpload(id)
+        } else if (!srcNode) {
+          const remoteId = `remote-${ImageBlot.remoteCounter++}`
+          node.classList.add(remoteId)
+          ImageBlot.eventEmitter.emit('insertRemoteImage', {
+            remoteId,
+            src,
+            width,
+            height,
+          })
+        }
       }
 
       if (width && height) {
@@ -112,6 +106,19 @@ export class ImageBlot extends BlockEmbed {
     }, 0)
   }
 
+  static uploadRemoteImage(remoteId: string, id: string) {
+    if (ImageBlot.uploadStatus[id]) return
+
+    const node = document.querySelector(`div.${remoteId}`)
+    if (node) {
+      ImageBlot.uploadStatus[id] = {}
+      node.classList.add(`image-${id}`)
+      node.classList.remove(remoteId)
+
+      node.querySelector<HTMLImageElement>('img.image')!.dataset.id = id
+    }
+  }
+
   static updateUploadProgress(id: string, progress: number) {
     if ((ImageBlot.uploadStatus[id] || {}).status === 'SUCCESS') return
 
@@ -120,7 +127,17 @@ export class ImageBlot extends BlockEmbed {
     document.querySelectorAll<HTMLDivElement>(`div.image-${id}`).forEach(node => {
       node.classList.remove('fail')
 
-      node.querySelector<HTMLDivElement>('div.progress')!.style.width = `${Math.round(progress)}%`
+      const wrap = node.querySelector('.image-wrap')!
+      if (!wrap.querySelector('.progress-bar')) {
+        const div = ImageBlot.createDiv('progress-bar')
+        const child = ImageBlot.createDiv('progress')
+        child.style.width = `${Math.round(progress)}%`
+        div.appendChild(child)
+        wrap.appendChild(div)
+      } else {
+        const child = wrap.querySelector<HTMLDivElement>('.progress')!
+        child.style.width = `${Math.round(progress)}%`
+      }
     })
   }
 
@@ -132,25 +149,36 @@ export class ImageBlot extends BlockEmbed {
     document.querySelectorAll<HTMLDivElement>(`div.image-${id}`).forEach(node => {
       if (!node.classList.contains('fail')) node.classList.add('fail')
 
-      const div = node.querySelector<HTMLDivElement>('div.error')
+      const wrap = node.querySelector<HTMLDivElement>('.image-wrap')!
+      let div = wrap.querySelector<HTMLDivElement>('div.error')
 
-      if (div) {
-        let html = '<span>上传失败，点击重试</span>'
-        if (error) {
-          html += `<span>${error}</span>`
-        }
+      if (!div) {
+        div = ImageBlot.createDiv('error')
+        div.addEventListener('click', () => {
+          node.classList.remove('fail')
+          ImageBlot.uploadStatus[id] = {}
+          ImageBlot.eventEmitter.emit('reupload', { id })
+        })
+        wrap.appendChild(div)
+      }
 
-        div.innerHTML = html
+      let html = '<span>上传失败，点击重试</span>'
+      if (error) {
+        html += `<span>${error}</span>`
       }
+
+      div.innerHTML = html
     })
   }
 
   static setUploadSuccess(id: string, src: string, srcNode?: string) {
     ImageBlot.uploadStatus[id] = { status: 'SUCCESS', src }
 
     document.querySelectorAll<HTMLDivElement>(`div.image-${id}`).forEach(node => {
-      node.querySelector<HTMLDivElement>('div.progress-bar')!.remove()
-      node.querySelector<HTMLDivElement>('div.error')!.remove()
+      const p = node.querySelector<HTMLDivElement>('div.progress-bar')
+      const e = node.querySelector<HTMLDivElement>('div.error')
+      if (p) p.remove()
+      if (e) e.remove()
 
       const img = node.querySelector<HTMLImageElement>('img.image')
 

package.json

@@ -29,10 +29,11 @@ export function callMethod(fnName: string, params: any = undefined) {
       window.parent.postMessage({ funcName: fnName, params }, '*')
     }
   } else {
-    tryHijackUploadCall(fnName, params)
     // not in webview
-    return false
+    tryHijackUploadCall(fnName, params)
+    return true
   }
+
   return true
 }
 

src/blots/image.ts

@@ -138,6 +138,12 @@ ImageBlot.eventEmitter.on('reupload', data => {
   }
 })
 
+ImageBlot.eventEmitter.on('insertRemoteImage', data => {
+  if (!callMethod('insertRemoteImage', data)) {
+    console.log('insertRemoteImage', data)
+  }
+})
+
 /** 收到图片后预览 */
 window.imagePreviewReceiver = data => {
   const srcList = JSON.parse(data)
@@ -160,6 +166,13 @@ window.imagePreviewReceiver = data => {
   setTimeout(fixImageSize, 0)
 }
 
+window.uploadRemoteImage = (data: string) => {
+  const { id, remoteId } = JSON.parse(data) || {}
+  if (remoteId && `${id || ''}`) {
+    ImageBlot.uploadRemoteImage(remoteId, `${id}`)
+  }
+}
+
 /** 更新图片上传进度 */
 window.imageProgressReceiver = (data: string) => {
   const { id, progress } = JSON.parse(data) || {}

src/caller.ts

@@ -5,6 +5,19 @@ let userToken: string = ''
 let apiV2BaseUrl: string = ''
 let storage = { channel: 'public' }
 
+try {
+  const sp = new URL(window.location.href).searchParams
+
+  userToken = sp.get('user_token') || ''
+  apiV2BaseUrl = sp.get('api_v2_base_url') || ''
+  const uploadStorage = sp.get('upload_storage')
+  if (uploadStorage) {
+    storage = JSON.parse(uploadStorage)
+  }
+} catch (err) {
+  //
+}
+
 window.setUploaderOptions = options => {
   if (typeof options === 'string') {
     options = JSON.parse(options)
@@ -23,6 +36,7 @@ const uploadFuncNames = [
   'removeImage',
   'reinsertImage',
   'reuploadImage',
+  'insertRemoteImage',
   'chooseVideo',
   'removeVideo',
   'reinsertVideo',
@@ -36,18 +50,14 @@ export function tryHijackUploadCall(funcName: string, params: any): boolean {
 
   if (funcName.startsWith('choose')) {
     chooseAndUpload(funcName.substr(6).toLowerCase())
-  }
-
-  if (funcName.startsWith('remove')) {
+  } else if (funcName.startsWith('remove')) {
     handleRemove(funcName.substr(6).toLowerCase(), params)
-  }
-
-  if (funcName.startsWith('reinsert')) {
+  } else if (funcName.startsWith('reinsert')) {
     handleReinsert(funcName.substr(8).toLowerCase(), params)
-  }
-
-  if (funcName.startsWith('reupload')) {
+  } else if (funcName.startsWith('reupload')) {
     handleReupload(funcName.substr(8).toLowerCase(), params)
+  } else if (funcName === 'insertRemoteImage') {
+    uploadRemoteImage(params)
   }
 
   return true
@@ -72,11 +82,12 @@ interface UploadFile extends MediaFile {
   useCounter: number
   status?: string
   cancelUpload?: () => void
+  error?: string
 }
 
 const uploadFiles: Map<string, UploadFile> = new Map()
 
-let fileCounter = 0
+let fileCounter = 1
 
 function chooseAndUpload(type: string) {
   const input = document.createElement('input')
@@ -271,6 +282,69 @@ async function getMediaInfo(file: File) {
   return mf
 }
 
+async function uploadRemoteImage(params: {
+  src: string
+  remoteId: string
+  width: number
+  height: number
+}) {
+  const id = `${fileCounter++}`
+
+  window.postMessage(
+    {
+      funcName: `uploadRemoteImage`,
+      params: { id, remoteId: params.remoteId },
+    },
+    '*',
+  )
+
+  try {
+    const { headers, data } = await axios.get(params.src, { responseType: 'arraybuffer' })
+
+    const contentType = (headers['content-type'] || '').toLowerCase().trim()
+    if (!data || data.byteLength <= 0 || !contentType || !contentType.startsWith('image/')) {
+      throw new Error('无法下载远程图片，请手动上传')
+    }
+
+    const spark = new Spark.ArrayBuffer()
+    const hash = spark.append(data).end()
+    const filename = `${Date.now()}.${contentType.substr(6)}`
+    const file = new File([data], filename, {
+      type: contentType,
+    })
+
+    uploadFiles.set(id, {
+      id,
+      useCounter: 1,
+      image: {
+        file,
+        buff: data,
+        hash,
+        url: params.src,
+        width: params.width,
+        height: params.height,
+      },
+    })
+  } catch (error) {
+    const buff = new ArrayBuffer(0)
+    uploadFiles.set(id, {
+      id,
+      useCounter: 1,
+      image: {
+        file: new File([buff], 'empty'),
+        buff: buff,
+        hash: '',
+        url: params.src,
+        width: params.width,
+        height: params.height,
+      },
+      error: error.message || '未知错误',
+    })
+  }
+
+  handleUpload('image', id)
+}
+
 async function handleUpload(type: string, id: string) {
   const uf = uploadFiles.get(id)
 
@@ -279,6 +353,10 @@ async function handleUpload(type: string, id: string) {
   }
 
   try {
+    if (uf.error) {
+      throw new Error(uf.error)
+    }
+
     const upload = async (info: MediaFileInfo) => {
       let source = axios.CancelToken.source()
       uf.cancelUpload = source.cancel.bind(source)
@@ -377,7 +455,7 @@ async function handleUpload(type: string, id: string) {
     } else {
       uf.status = 'ERROR'
 
-      let message = '网络异常导致上传失败'
+      let message = e.message || '网络异常导致上传失败'
       if (e.response && e.response.data) {
         message = e.response.data.message
         if (Array.isArray(message)) {

src/index.ts

@@ -22,6 +22,7 @@ declare global {
 
     /** 接收图片预览地址的钩子 */
     imagePreviewReceiver: (data: string) => void
+    uploadRemoteImage: (data: string) => void
     /** 接收图片实际上传进度的钩子 */
     imageProgressReceiver: (data: string) => void
     /** 接收图片实际地址的钩子 */