feat: New command: Wrap Into New Tag (#199)

Author: zardoy

package.json

@@ -74,6 +74,10 @@
             {
                 "command": "migrateRequireToImports",
                 "title": "Migrate Require to Imports"
+            },
+            {
+                "command": "wrapIntoNewTag",
+                "title": "Wrap Into New Tag"
             }
         ],
         "keybindings": [
@@ -169,7 +173,7 @@
         "@vue/language-server": "latest",
         "@vue/language-service": "latest",
         "@zardoy/utils": "^0.0.9",
-        "@zardoy/vscode-utils": "^0.0.47",
+        "@zardoy/vscode-utils": "^0.0.52",
         "chai": "^4.3.6",
         "change-case": "^4.1.2",
         "chokidar": "^3.5.3",

pnpm-lock.yaml

@@ -1,10 +1,12 @@
 import * as vscode from 'vscode'
 import { getActiveRegularEditor } from '@zardoy/vscode-utils'
 import { getExtensionCommandId, getExtensionSetting, registerExtensionCommand, VSCodeQuickPickItem } from 'vscode-framework'
+import { registerTextEditorCommand } from '@zardoy/vscode-utils/build/commands'
 import { showQuickPick } from '@zardoy/vscode-utils/build/quickPick'
 import _ from 'lodash'
 import { compact } from '@zardoy/utils'
 import { offsetPosition } from '@zardoy/vscode-utils/build/position'
+import { defaultJsSupersetLangs } from '@zardoy/vscode-utils/build/langs'
 import { RequestInputTypes, RequestOutputTypes } from '../typescript/src/ipcTypes'
 import { sendCommand } from './sendCommand'
 import { tsRangeToVscode, tsRangeToVscodeSelection, tsTextChangesToVscodeTextEdits } from './util'
@@ -319,6 +321,37 @@ export default () => {
         await vscode.workspace.applyEdit(edit)
     })
 
+    registerTextEditorCommand('wrapIntoNewTag', async (editor, edit, fallbackCommand = 'editor.emmet.action.wrapWithAbbreviation') => {
+        const { selection } = editor
+        if (selection.start.isEqual(selection.end)) {
+            const range = editor.selection
+            const selectedText = '$TM_SELECTED_TEXT'
+
+            if (!defaultJsSupersetLangs.includes(editor.document.languageId)) {
+                if (fallbackCommand) {
+                    await vscode.commands.executeCommand(fallbackCommand, ...fallbackCommand.split(' ').slice(1))
+                }
+
+                return
+            }
+
+            const data = (await sendCommand('getNodePath', {})) ?? []
+            const jsxElem = [...data].reverse().find(d => ['JsxElement', 'JsxSelfClosingElement', 'JsxFragment'].includes(d.kindName))
+            if (!jsxElem) return
+            const { start, end } = jsxElem
+            const startPos = editor.document.positionAt(start)
+            const startRange = new vscode.Range(startPos, startPos)
+            const endPos = editor.document.positionAt(end)
+            const endRange = new vscode.Range(endPos, endPos)
+            editor.selection = new vscode.Selection(startRange.start, endRange.end)
+        }
+
+        const line = editor.document.lineAt(editor.selection.start.line)
+        const currentIndent = line.text.slice(0, line.firstNonWhitespaceCharacterIndex)
+        await editor.insertSnippet(new vscode.SnippetString(`<\${1:div}$0>\n\t$TM_SELECTED_TEXT\n</\${1:div}>`), editor.selection)
+        return
+    })
+
     // registerExtensionCommand('insertImportFlatten', () => {
     //     // got -> default, got
     //     type A = ts.Type

src/specialCommands.ts

@@ -77,6 +77,8 @@ export type RequestInputTypes = {
  * @keysSuggestions TriggerCharacterCommand
  */
 export type RequestOutputTypes = {
+    getNodePath: NodeAtPositionResponse[]
+    getNodeAtPosition: NodeAtPositionResponse
     removeFunctionArgumentsTypesInSelection: {
         ranges: TsRange[]
     }