Fix #47069

extensions/html-language-features/client/src/htmlMain.ts

@@ -14,10 +14,14 @@ import { EMPTY_ELEMENTS } from './htmlEmptyTagsShared';
 import { activateTagClosing } from './tagClosing';
 import TelemetryReporter from 'vscode-extension-telemetry';
 import { getCustomDataPathsInAllWorkspaces, getCustomDataPathsFromAllExtensions } from './customData';
+import { activateMatchingTagPosition as activateMatchingTagSelection } from './matchingTag';
 
 namespace TagCloseRequest {
 	export const type: RequestType<TextDocumentPositionParams, string, any, any> = new RequestType('html/tag');
 }
+namespace MatchingTagPositionRequest {
+	export const type: RequestType<TextDocumentPositionParams, Position | null, any, any> = new RequestType('html/matchingTagPosition');
+}
 
 interface IPackageInfo {
 	name: string;
@@ -84,6 +88,14 @@ export function activate(context: ExtensionContext) {
 		disposable = activateTagClosing(tagRequestor, { html: true, handlebars: true }, 'html.autoClosingTags');
 		toDispose.push(disposable);
 
+		const matchingTagPositionRequestor = (document: TextDocument, position: Position) => {
+			let param = client.code2ProtocolConverter.asTextDocumentPositionParams(document, position);
+			return client.sendRequest(MatchingTagPositionRequest.type, param);
+		};
+
+		disposable = activateMatchingTagSelection(matchingTagPositionRequestor, { html: true, handlebars: true }, 'html.autoSelectingMatchingTags');
+		toDispose.push(disposable);
+
 		disposable = client.onTelemetry(e => {
 			if (telemetryReporter) {
 				telemetryReporter.sendTelemetryEvent(e.key, e.data);

extensions/html-language-features/client/src/matchingTag.ts

@@ -0,0 +1,147 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import {
+	window,
+	workspace,
+	Disposable,
+	TextDocument,
+	Position,
+	TextEditorSelectionChangeEvent,
+	Selection,
+	Range,
+	WorkspaceEdit
+} from 'vscode';
+
+export function activateMatchingTagPosition(
+	matchingTagPositionProvider: (document: TextDocument, position: Position) => Thenable<Position | null>,
+	supportedLanguages: { [id: string]: boolean },
+	configName: string
+): Disposable {
+	let disposables: Disposable[] = [];
+
+	window.onDidChangeTextEditorSelection(event => onDidChangeTextEditorSelection(event), null, disposables);
+
+	let isEnabled = false;
+	updateEnabledState();
+
+	window.onDidChangeActiveTextEditor(updateEnabledState, null, disposables);
+
+	function updateEnabledState() {
+		isEnabled = false;
+		let editor = window.activeTextEditor;
+		if (!editor) {
+			return;
+		}
+		let document = editor.document;
+		if (!supportedLanguages[document.languageId]) {
+			return;
+		}
+		if (!workspace.getConfiguration(undefined, document.uri).get<boolean>(configName)) {
+			return;
+		}
+		isEnabled = true;
+	}
+
+	// let prevCursorCount = 0;
+	let cursorCount = 0;
+	let inMirrorMode = false;
+
+	function onDidChangeTextEditorSelection(event: TextEditorSelectionChangeEvent) {
+		if (!isEnabled) {
+			return;
+		}
+
+		// prevCursorCount = cursorCount;
+		cursorCount = event.selections.length;
+
+		if (cursorCount === 1) {
+			if (event.selections[0].isEmpty) {
+				matchingTagPositionProvider(event.textEditor.document, event.selections[0].active).then(position => {
+					if (position && window.activeTextEditor) {
+						inMirrorMode = true;
+						const newCursor = new Selection(position.line, position.character, position.line, position.character);
+						window.activeTextEditor.selections = [...window.activeTextEditor.selections, newCursor];
+					}
+				});
+			}
+		}
+
+		if (cursorCount === 2 && inMirrorMode) {
+			// Check two cases
+			if (event.selections[0].isEmpty && event.selections[1].isEmpty) {
+				const charBeforePrimarySelection = getCharBefore(event.textEditor.document, event.selections[0].anchor);
+				const charAfterPrimarySelection = getCharAfter(event.textEditor.document, event.selections[0].anchor);
+				const charBeforeSecondarySelection = getCharBefore(event.textEditor.document, event.selections[1].anchor);
+				const charAfterSecondarySelection = getCharAfter(event.textEditor.document, event.selections[1].anchor);
+
+				// Exit mirror mode when cursor position no longer mirror
+				// Unless it's in the case of `<|></|>`
+				const charBeforeBothPositionRoughlyEqual =
+					charBeforePrimarySelection === charBeforeSecondarySelection ||
+					(charBeforePrimarySelection === '/' && charBeforeSecondarySelection === '<') ||
+					(charBeforeSecondarySelection === '/' && charBeforePrimarySelection === '<');
+				const charAfterBothPositionRoughlyEqual =
+					charAfterPrimarySelection === charAfterSecondarySelection ||
+					(charAfterPrimarySelection === ' ' && charAfterSecondarySelection === '>') ||
+					(charAfterSecondarySelection === ' ' && charAfterPrimarySelection === '>');
+
+				if (!charBeforeBothPositionRoughlyEqual || !charAfterBothPositionRoughlyEqual) {
+					inMirrorMode = false;
+					window.activeTextEditor!.selections = [window.activeTextEditor!.selections[0]];
+					return;
+				} else {
+					// Need to cleanup in the case of <div |></div |>
+					if (
+						charBeforePrimarySelection === ' ' &&
+						charAfterPrimarySelection === '>' &&
+						charBeforeSecondarySelection === ' ' &&
+						charAfterSecondarySelection === '>'
+					) {
+						inMirrorMode = false;
+						const cleanupEdit = new WorkspaceEdit();
+
+						const primaryBeforeSecondary =
+							event.textEditor.document.offsetAt(event.selections[0].anchor) <
+							event.textEditor.document.offsetAt(event.selections[1].anchor);
+						const cleanupRange = primaryBeforeSecondary
+							? new Range(event.selections[1].anchor.translate(0, -1), event.selections[1].anchor)
+							: new Range(event.selections[0].anchor.translate(0, -1), event.selections[0].anchor);
+
+						cleanupEdit.replace(event.textEditor.document.uri, cleanupRange, '');
+						window.activeTextEditor!.selections = primaryBeforeSecondary
+							? [window.activeTextEditor!.selections[0]]
+							: [window.activeTextEditor!.selections[1]];
+						workspace.applyEdit(cleanupEdit);
+					}
+				}
+			}
+		}
+	}
+
+	return Disposable.from(...disposables);
+}
+
+function getCharBefore(document: TextDocument, position: Position) {
+	const offset = document.offsetAt(position);
+	if (offset === 0) {
+		return '';
+	}
+
+	return document.getText(
+		new Range(document.positionAt(offset - 1), position)
+	);
+}
+
+function getCharAfter(document: TextDocument, position: Position) {
+	const offset = document.offsetAt(position);
+	if (offset === document.getText().length) {
+		return '';
+	}
+
+	return document.getText(
+		new Range(position, document.positionAt(offset + 1))
+	);
+}