feat(templateSubstitute): add '${activeMdFilename}'

README.md

@@ -51,7 +51,8 @@ Default: `${fileName}_${contentHash:8}${ext}`
 
 - `${fileName}`: Filename of uploaded file.
 - `${ext}`: Filename extension of uploaded file.
-- `${contentHash}`: the hash of image. By default, it's the hex digest of md5 hash. You can specify the length of the hash, e.g. `${contentHash:8}`.
+- `${contentHash}`: The hash of image. By default, it's the hex digest of md5 hash. You can specify the length of the hash, e.g. `${contentHash:8}`.
+- `${activeMdFilename}`: Filename of active markdown in text editor.
 
 Support `${<hashType>:hash:<digestType>:<length>}`, default:
 ```js
@@ -68,25 +69,39 @@ After uploading image, this output will be pasted to your clipboard. If you have
 - `${fileName}`: Filename of uploaded file.
 - `${uploadName}`: see `elan.uploadName`.
 - `${url}`: After a file is uploaded successfully, the OSS sends a callback request to this URL.
+- `${activeMdFilename}`: Filename of active markdown in text editor.
 
 ### `elan.bucketFolder`
 By default, you can find your image object by `elan.uploadName`, e.g. `example.png`. If we set `elan.bucketFold` to `github/aliyun-oss-uploader`, our images will be upload to "folder" ([not a real folder](https://help.aliyun.com/document_detail/31827.html)). You can find uploaded image in "folder" `github/aliyun-oss-uploader/`.
 
 ![oss browser](https://fangbinwei-blog-image.oss-cn-shanghai.aliyuncs.com/github/aliyun-oss-uploader/2020-05-31-19-02-13_55660788.png)
 
-- `${relativeToVsRootPath}`: The path of the directory where the currently activated file is located relative to the workspace root directory
+- `${relativeToVsRootPath}`: The path of the directory where the currently active file is located relative to the workspace root directory
+- `${activeMdFilename}`: Filename of active markdown in text editor.
 
-For example, you set `elan.bucketFold` to `blog/${relativeToVsRootPath}`, and workspace is like below
+For example, you set `elan.bucketFold` to `blog/${relativeToVsRootPath}/`, and workspace is like below
 
 ```bash
 .
 ├── FrontEnd
 │   └── Engineering
 │       └── webpack
+│            ├── example.js
 │            └── example.md
 ```
 
-If you open the `example.md` by text editor, the "folder" will be `blog/FrontEnd/Engineering/webpack/`. If no file is opened, `${relativeToVsRootPath}` will be parsed to `''`.
+If you open the `example.md` by text editor, the "folder" will be `blog/FrontEnd/Engineering/webpack/`.
+
+Or you set `elan.bucketFold` to `blog/${relativeToVsRootPath}/${activeMdFilename}/`, the "folder" will be `blog/FrontEnd/Engineering/webpack/example/`.
+
+If no file is opened, `${relativeToVsRootPath}` will be parsed to `''`, . If no active markdown, `${activeMdFilename}` will be parsed to `''`.
+
+|    opened file    | `blog/${relativeToVsRootPath}/` | `blog/${relativeToVsRootPath}/${activeMdFilename}/` |
+| ---------- | --- | --- |
+| example.md |  blog/FrontEnd/Engineering/webpack/ | blog/FrontEnd/Engineering/webpack/example/ |
+| example.js       |  blog/FrontEnd/Engineering/webpack/ | blog/FrontEnd/Engineering/webpack/ |
+| no opened file       |  blog/ | blog/ |
+
 
 ## Create Bucket
 
@@ -108,13 +123,13 @@ If you want to debugger the project, please run `yarn webpack-dev` first, and pr
 * [x] content hash
 * [x] extension icon
 * [x] bundle by webpack/rollup
-* [ ] enhance 'bucketFolder'
+* [x] enhance 'bucketFolder'
+* [ ] delete image when hover GFM(github flavored markdown)
 * [ ] inquire before upload to check folder
 * [ ] decoupling logic by tapable
 * [ ] upload embed svg as *.svg from clipboard
 * [ ] image compress (by imagemin/ aliyun OSS can realize it by adding '?x-oss-process=' after url)
 * [ ] unit test
-* [ ] delete image when hover GFM(github flavored markdown)
 * [ ] editor/title button to upload image
 * [ ] sidebar extension (e.g. show recent uploaded image)
 * [ ] drag image and drop to markdown. [Limit](https://github.com/microsoft/vscode/issues/5240)

package.json

@@ -87,18 +87,17 @@
         },
         "elan.uploadName": {
           "type": "string",
-          "description": "Object name store on OSS",
-          "markdownDescription": "- `${fileName}`: Filename of uploaded file.\n-`${ext}`: Filename extension of uploaded file.\n- `${contentHash}`: the hash of image. By default, it's the hex digest of md5 hash. You can specify the length of the hash, e.g. `${contentHash:8}`",
+          "markdownDescription": "Object name store on OSS\n- `${fileName}`: Filename of uploaded file.\n-`${ext}`: Filename extension of uploaded file.\n- `${contentHash}`: The hash of image. By default, it's the hex digest of md5 hash. You can specify the length of the hash, e.g. `${contentHash:8}`. \n-`${activeMdFilename}`: Filename of active markdown in text editor.",
           "default": "${fileName}_${contentHash:8}${ext}"
         },
         "elan.outputFormat": {
           "type": "string",
-          "markdownDescription": "- `${fileName}`: Filename of uploaded file.\n- `${uploadName}`: Custom defined config. \n- `${url}`: After a file is uploaded successfully, the OSS sends a callback request to this URL.",
+          "markdownDescription": "- `${fileName}`: Filename of uploaded file.\n- `${uploadName}`: Custom defined config. \n- `${url}`: After a file is uploaded successfully, the OSS sends a callback request to this URL. \n-`${activeMdFilename}`: Filename of markdown in active text editor.",
           "default": "![${fileName}](${url})"
         },
         "elan.bucketFolder": {
           "type": "string",
-          "markdownDescription": "- `${relativeToVsRootPath}`: The path of the directory where the currently activated file is located relative to the workspace root directory",
+          "markdownDescription": "- `${relativeToVsRootPath}`: The path of the directory where the currently active file is located relative to the workspace root directory. \n-`${activeMdFilename}`: Filename of markdown in active text editor.",
           "default": ""
         }
       }

src/commands/uploadFromExplorerContext.ts

@@ -1,7 +1,7 @@
 import vscode from 'vscode'
 import { uploadUris } from '../utils/uploader/index'
 
-// TODO: compatible with Bucket Folder > ${relativeToVsRootPath} even no activated file
+// TODO: compatible with Bucket Folder > ${relativeToVsRootPath} even no active file
 export default async function uploadFromExplorerContext(
   uri: vscode.Uri
 ): Promise<void> {

src/utils/index.ts

@@ -34,3 +34,10 @@ export function getHashDigest(
     return 'EF_BF_BD'
   }
 }
+
+export function getActiveMd(): vscode.TextEditor | undefined {
+  const activeTextEditor = vscode.window.activeTextEditor
+  if (!activeTextEditor || activeTextEditor.document.languageId !== 'markdown')
+    return
+  return activeTextEditor
+}

src/utils/uploader/index.ts

@@ -3,6 +3,7 @@ import OSS from 'ali-oss'
 import path from 'path'
 import Logger from '../log'
 import { TemplateStore } from './templateStore'
+import { getActiveMd } from '../index'
 
 declare global {
   interface PromiseConstructor {
@@ -67,6 +68,13 @@ export async function uploadUris(uris: vscode.Uri[]): Promise<void> {
     const templateStore = new TemplateStore()
     const ext = path.extname(uri.fsPath)
     const name = path.basename(uri.fsPath, ext)
+    const activeMd = getActiveMd()
+    if (activeMd) {
+      const fileName = activeMd.document.fileName
+      const ext = path.extname(fileName)
+      const name = path.basename(fileName, ext)
+      templateStore.set('activeMdFilename', name)
+    }
 
     templateStore.set('fileName', name)
     templateStore.set('ext', ext)
@@ -139,12 +147,10 @@ function afterUpload(clipboard: string[]): void {
   if (!clipboard.length) return
   const GFM = clipboard.join('\n\n') + '\n\n'
   vscode.env.clipboard.writeText(GFM)
-  const activeTextEditor = vscode.window.activeTextEditor
-  if (!activeTextEditor || activeTextEditor.document.languageId !== 'markdown')
-    return
 
-  activeTextEditor.edit((textEditorEdit) => {
-    textEditorEdit.insert(activeTextEditor.selection.active, GFM)
+  const activeTextMd = getActiveMd()
+  activeTextMd?.edit((textEditorEdit) => {
+    textEditorEdit.insert(activeTextMd.selection.active, GFM)
   })
 }
 

src/utils/uploader/templateStore.ts

@@ -17,11 +17,13 @@ const uploadNameRe = getRe('uploadName')
 const urlRe = getRe('url')
 const extRe = getRe('ext')
 const relativeToVsRootPathRe = getRe('relativeToVsRootPath')
+const activeMdFilenameRe = getRe('activeMdFilename')
 // ${<hashType>:hash:<digestType>:<length>}
 const contentHashRe = /\$\{(?:([^:}]+):)?contentHash(?::([a-z]+\d*))?(?::(\d+))?\}/gi
 
 interface Store {
   fileName: string
+  activeMdFilename: string
   uploadName: string
   url: string
   ext: string
@@ -33,6 +35,7 @@ interface Store {
 class TemplateStore {
   private store: Store = {
     fileName: '',
+    activeMdFilename: '',
     uploadName: '',
     url: '',
     ext: '',
@@ -64,6 +67,7 @@ class TemplateStore {
         let uploadName = this.raw.uploadName
           .replace(fileNameRe, this.get('fileName'))
           .replace(extRe, this.get('ext'))
+          .replace(activeMdFilenameRe, this.get('activeMdFilename'))
 
         const imageUri = this.get('imageUri')
         if (imageUri) {
@@ -88,6 +92,7 @@ class TemplateStore {
           .replace(fileNameRe, this.get('fileName'))
           .replace(uploadNameRe, this.get('uploadName'))
           .replace(urlRe, this.get('url'))
+          .replace(activeMdFilenameRe, this.get('activeMdFilename'))
 
         return outputFormat
       }
@@ -117,10 +122,9 @@ class TemplateStore {
           }
         }
 
-        bucketFolder = this.raw.bucketFolder.replace(
-          relativeToVsRootPathRe,
-          this.get('relativeToVsRootPath')
-        )
+        bucketFolder = this.raw.bucketFolder
+          .replace(relativeToVsRootPathRe, this.get('relativeToVsRootPath'))
+          .replace(activeMdFilenameRe, this.get('activeMdFilename'))
 
         // since relativeToVsRootPath may be empty string, normalize it
         bucketFolder =