✨ Feature(custom): add upload all images in file

ISSUES CLOSED: #3

Author: Kuingsmile

.vscode/settings.json

@@ -1,13 +1,17 @@
-// Place your settings in this file to overwrite default and user settings.
-{
-    "files.exclude": {
-        "out": false, // set this to true to hide the "out" folder with the compiled JS files
-        "dist": false // set this to true to hide the "dist" folder with the compiled JS files
-    },
-    "search.exclude": {
-        "out": true, // set this to false to include "out" folder in search results
-        "dist": true // set this to false to include "dist" folder in search results
-    },
-    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
-    "typescript.tsc.autoDetect": "off"
+// Place your settings in this file to overwrite default and user settings.
+{
+    "files.exclude": {
+        "out": false, // set this to true to hide the "out" folder with the compiled JS files
+        "dist": false // set this to true to hide the "dist" folder with the compiled JS files
+    },
+    "editor.formatOnSave": false,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit"
+    },
+    "search.exclude": {
+        "out": true, // set this to false to include "out" folder in search results
+        "dist": true // set this to false to include "dist" folder in search results
+    },
+    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+    "typescript.tsc.autoDetect": "off"
 }

package.json

@@ -56,6 +56,11 @@
         "command": "piclist.openImageDB",
         "title": "%command.openImageDB.title%",
         "category": "PicList"
+      },
+      {
+        "command": "piclist.uploadAllImgInFile",
+        "title": "%command.uploadAllImgInFile.title%",
+        "category": "PicList"
       }
     ],
     "menus": {
@@ -162,7 +167,7 @@
     "@types/glob": "^8.1.0",
     "@types/mocha": "^10.0.6",
     "@types/node": "20.14.2",
-    "@types/vscode": "^1.90.0",
+    "@types/vscode": "^1.81.0",
     "@typescript-eslint/eslint-plugin": "^7.13.0",
     "@typescript-eslint/parser": "^7.13.0",
     "@vscode/test-electron": "^2.3.8",

package.nls.json

@@ -1,22 +1,23 @@
-{
-  "ext.displayName": "PicList",
-  "ext.description": "A powerful image uploading and managing plugin for VSCode based on PicList desktop software. Compatible with PicGo.",
-  "command.upload.clipboard.title": "Upload from clipboard",
-  "command.upload.explorer.title": "Upload from explorer",
-  "command.upload.inputBox.title": "Upload from input path or url",
-  "command.openImageDB.title": "Open PicList image database",
-  "command.delete.title": "Delete Image by PicList",
-  "config.title": "PicList",
-  "config.uploadAPIUrl.description": "Upload API URL, default is `http://127.0.0.1:36677/upload`",
-  "config.deleteAPIUrl.description": "Delete API URL, default is `http://127.0.0.1:36677/delete`",
-  "config.copyType.markdown": "Markdown: ![alt](url)",
-  "config.copyType.html": "HTML: <img src=\"url\" alt=\"alt\" />",
-  "config.copyType.url": "URL: url",
-  "config.copyType.ubb": "UBB: [img]url[/img]",
-  "config.copyType.custom": "Custom",
-  "config.copyType.description": "Copy type, default is `Markdown: ![alt](url)`, support `Markdown`, `HTML`, `URL`, `UBB`, `Custom`",
-  "config.customType.description": "Custom copy type, default is `Markdown: ![$fileName]($url)`, support `$fileName`, `$url`",
-  "config.encodeUrl.description": "Whether to encode the URL, default is `false`",
-  "config.remoteServerMode.description": "Whether to use remote server mode, default is `false`",
-  "config.enableDragUpload.description": "Whether to enable drag upload, default is `true`"
+{
+  "ext.displayName": "PicList",
+  "ext.description": "A powerful image uploading and managing plugin for VSCode based on PicList desktop software. Compatible with PicGo.",
+  "command.upload.clipboard.title": "Upload from clipboard",
+  "command.upload.explorer.title": "Upload from explorer",
+  "command.upload.inputBox.title": "Upload from input path or url",
+  "command.openImageDB.title": "Open PicList image database",
+  "command.uploadAllImgInFile.title": "Upload all images in the file",
+  "command.delete.title": "Delete Image by PicList",
+  "config.title": "PicList",
+  "config.uploadAPIUrl.description": "Upload API URL, default is `http://127.0.0.1:36677/upload`",
+  "config.deleteAPIUrl.description": "Delete API URL, default is `http://127.0.0.1:36677/delete`",
+  "config.copyType.markdown": "Markdown: ![alt](url)",
+  "config.copyType.html": "HTML: <img src=\"url\" alt=\"alt\" />",
+  "config.copyType.url": "URL: url",
+  "config.copyType.ubb": "UBB: [img]url[/img]",
+  "config.copyType.custom": "Custom",
+  "config.copyType.description": "Copy type, default is `Markdown: ![alt](url)`, support `Markdown`, `HTML`, `URL`, `UBB`, `Custom`",
+  "config.customType.description": "Custom copy type, default is `Markdown: ![$fileName]($url)`, support `$fileName`, `$url`",
+  "config.encodeUrl.description": "Whether to encode the URL, default is `false`",
+  "config.remoteServerMode.description": "Whether to use remote server mode, default is `false`",
+  "config.enableDragUpload.description": "Whether to enable drag upload, default is `true`"
 }

src/extension.ts

@@ -42,6 +42,9 @@ export async function activate(context: vscode.ExtensionContext) {
           }
         }
       }
+    }),
+    vscode.commands.registerCommand('piclist.uploadAllImgInFile', async () => {
+      await Commands.commandManager.uploadAllImgInFile()
     })
   ]
   context.subscriptions.push(...disposable)

src/utils/index.ts

@@ -40,6 +40,5 @@ export function extractUrl(str: string): string[] {
       urls.push(match[1])
     }
   }
-  console.log(`urls: ${urls}`)
   return Array.from(new Set(urls))
 }

src/vscode/clipboard/getClipboardImage.ts

@@ -62,7 +62,7 @@ function appDataPath() {
 
 function ImageSaveDir() {
   const imageSavePath = path.join(appDataPath(), 'piclist-clipboard-image')
-  fs.ensureDirSync(imageSavePath)
+  fs.emptyDirSync(imageSavePath)
   return imageSavePath
 }
 

src/vscode/commands.ts

@@ -12,15 +12,16 @@ import getClipboardImage from './clipboard/getClipboardImage'
 export class Commands {
   static commandManager: Commands = new Commands()
 
-  async uploadCommand(input?: string[], shouldKeepAfterUploading = true) {
+  async uploadCommand(input?: string[], shouldKeepAfterUploading = true, writeToEditor = true) {
     const output = await Uploader.picgoAPI.upload(input)
-
     if (!output) return
     if (shouldKeepAfterUploading === false && input) {
       fs.removeSync(input[0])
     }
-    vscode.env.clipboard.writeText(output)
-    await Editor.writeToEditor(output)
+    if (writeToEditor) {
+      vscode.env.clipboard.writeText(output)
+      await Editor.writeToEditor(output)
+    }
     return output
   }
 
@@ -104,4 +105,48 @@ export class Commands {
       return false
     }
   }
+
+  async uploadAllImgInFile() {
+    const editor = vscode.window.activeTextEditor
+    if (editor) {
+      const document = editor.document
+      let text = document.getText()
+      const regex = /(!\[.*?\]\((.*?)\))|(<img[^>]*src="(.*?)"[^>]*>)|(https?:\/\/[^\s]+)|(\[img\](.*?)\[\/img\])/g
+      let match
+      const uploadedImages: { [key: string]: string } = {}
+      const matches = []
+      while ((match = regex.exec(text)) !== null) {
+        matches.push(match)
+      }
+      for (const match of matches) {
+        const imgSyntax = match[0]
+        const url = match[2] || match[4] || match[5] || match[7]
+        if (url) {
+          let res: string | undefined
+          if (uploadedImages[url]) {
+            res = uploadedImages[url]
+          } else {
+            if (isURL(url)) {
+              res = await this.uploadCommand([url], true, false)
+            } else {
+              const localPath = path.isAbsolute(url) ? url : path.join(document.uri.fsPath, '../', url)
+              if (fs.existsSync(localPath)) {
+                res = await this.uploadCommand([localPath], true, false)
+              }
+            }
+            if (res) {
+              uploadedImages[url] = res
+            }
+          }
+          if (res) {
+            text = text.replace(imgSyntax, res)
+          }
+        }
+      }
+      const range = new vscode.Range(document.positionAt(0), document.positionAt(text.length))
+      editor.edit(editBuilder => {
+        editBuilder.replace(range, text)
+      })
+    }
+  }
 }

src/vscode/uploader.ts

@@ -1,5 +1,5 @@
 import * as vscode from 'vscode'
-import { showError, getRemoteServerMode } from './utils'
+import { showError, getRemoteServerMode, getFileName } from './utils'
 import axios from 'axios'
 import { Editor } from './Editor'
 import { handleUrlEncode } from '../utils'
@@ -79,10 +79,7 @@ export class Uploader {
       if (res.status === 200 && res.data.success) {
         const selectedText = Editor.editor?.document.getText(Editor.editor.selection)
         const output = res.data.result.map((item: string) => {
-          return this.formatOutput(
-            item,
-            selectedText || decodeURIComponent(new URL(item).pathname.split('/').pop() || '') || ''
-          )
+          return this.formatOutput(item, getFileName(item, selectedText))
         })
         const outputStr = output.join('\n')
         DataStore.writeUploadedFileDB(res.data.fullResult)

src/vscode/utils/index.ts

@@ -63,3 +63,17 @@ export function getRemoteServerMode(): boolean {
   }
   return false
 }
+
+export function getFileName(item: string, selectedText?: string): string {
+  let fileName: string = ''
+  if (selectedText) {
+    fileName = selectedText
+  } else {
+    try {
+      const url = new URL(item)
+      const pathSep = url.pathname.includes('/') ? '/' : '\\'
+      fileName = decodeURIComponent(url.pathname.split(pathSep).pop() || '') || ''
+    } catch (error) {}
+  }
+  return fileName || ''
+}

yarn.lock

@@ -640,7 +640,7 @@
   resolved "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
   integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
 
-"@types/vscode@^1.90.0":
+"@types/vscode@^1.81.0":
   version "1.90.0"
   resolved "https://registry.yarnpkg.com/@types/vscode/-/vscode-1.90.0.tgz#c122384d51bd774cec4aa86ca443858adc9edef2"
   integrity sha512-oT+ZJL7qHS9Z8bs0+WKf/kQ27qWYR3trsXpq46YDjFqBsMLG4ygGGjPaJ2tyrH0wJzjOEmDyg9PDJBBhWg9pkQ==