[html] "Expand selection" misses { } in <script> tag. Fixes #85306

extensions/html-language-features/server/src/htmlServerMain.ts

@@ -20,6 +20,7 @@ import { formatError, runSafe, runSafeAsync } from './utils/runner';
 
 import { getFoldingRanges } from './modes/htmlFolding';
 import { getDataProviders } from './customData';
+import { getSelectionRanges } from './modes/selectionRanges';
 
 namespace TagCloseRequest {
 	export const type: RequestType<TextDocumentPositionParams, string | null, any, any> = new RequestType('html/tag');
@@ -461,13 +462,8 @@ connection.onFoldingRanges((params, token) => {
 connection.onSelectionRanges((params, token) => {
 	return runSafe(() => {
 		const document = documents.get(params.textDocument.uri);
-		const positions: Position[] = params.positions;
-
 		if (document) {
-			const htmlMode = languageModes.getMode('html');
-			if (htmlMode && htmlMode.getSelectionRanges) {
-				return htmlMode.getSelectionRanges(document, positions);
-			}
+			return getSelectionRanges(languageModes, document, params.positions);
 		}
 		return [];
 	}, [], `Error while computing selection ranges for ${params.textDocument.uri}`, token);

extensions/html-language-features/server/src/modes/cssMode.ts

@@ -59,6 +59,10 @@ export function getCSSMode(cssLanguageService: CSSLanguageService, documentRegio
 			let embedded = embeddedCSSDocuments.get(document);
 			return cssLanguageService.getFoldingRanges(embedded, {});
 		},
+		getSelectionRange(document: TextDocument, position: Position) {
+			let embedded = embeddedCSSDocuments.get(document);
+			return cssLanguageService.getSelectionRanges(embedded, [position], cssStylesheets.get(embedded))[0];
+		},
 		onDocumentRemoved(document: TextDocument) {
 			embeddedCSSDocuments.onDocumentRemoved(document);
 			cssStylesheets.onDocumentRemoved(document);

extensions/html-language-features/server/src/modes/htmlMode.ts

@@ -18,8 +18,8 @@ export function getHTMLMode(htmlLanguageService: HTMLLanguageService, workspace:
 		getId() {
 			return 'html';
 		},
-		getSelectionRanges(document: TextDocument, positions: Position[]): SelectionRange[] {
-			return htmlLanguageService.getSelectionRanges(document, positions);
+		getSelectionRange(document: TextDocument, position: Position): SelectionRange {
+			return htmlLanguageService.getSelectionRanges(document, [position])[0];
 		},
 		doComplete(document: TextDocument, position: Position, settings = workspace.settings) {
 			let options = settings && settings.html && settings.html.suggest;

extensions/html-language-features/server/src/modes/javascriptMode.ts

@@ -7,7 +7,7 @@ import { LanguageModelCache, getLanguageModelCache } from '../languageModelCache
 import {
 	SymbolInformation, SymbolKind, CompletionItem, Location, SignatureHelp, SignatureInformation, ParameterInformation,
 	Definition, TextEdit, TextDocument, Diagnostic, DiagnosticSeverity, Range, CompletionItemKind, Hover, MarkedString,
-	DocumentHighlight, DocumentHighlightKind, CompletionList, Position, FormattingOptions, FoldingRange, FoldingRangeKind
+	DocumentHighlight, DocumentHighlightKind, CompletionList, Position, FormattingOptions, FoldingRange, FoldingRangeKind, SelectionRange
 } from 'vscode-html-languageservice';
 import { LanguageMode, Settings } from './languageModes';
 import { getWordAtText, startsWith, isWhitespaceOnly, repeat } from '../utils/strings';
@@ -247,6 +247,15 @@ export function getJavaScriptMode(documentRegions: LanguageModelCache<HTMLDocume
 			}
 			return [];
 		},
+		getSelectionRange(document: TextDocument, position: Position): SelectionRange {
+			updateCurrentTextDocument(document);
+			function convertSelectionRange(selectionRange: ts.SelectionRange): SelectionRange {
+				const parent = selectionRange.parent ? convertSelectionRange(selectionRange.parent) : undefined;
+				return SelectionRange.create(convertRange(currentTextDocument, selectionRange.textSpan), parent);
+			}
+			const range = jsLanguageService.getSmartSelectionRange(FILE_NAME, currentTextDocument.offsetAt(position));
+			return convertSelectionRange(range);
+		},
 		format(document: TextDocument, range: Range, formatParams: FormattingOptions, settings: Settings = globalSettings): TextEdit[] {
 			currentTextDocument = documentRegions.get(document).getEmbeddedDocument('javascript', true);
 			scriptFileVersion++;

extensions/html-language-features/server/src/modes/languageModes.ts

@@ -32,7 +32,7 @@ export interface Workspace {
 
 export interface LanguageMode {
 	getId(): string;
-	getSelectionRanges?: (document: TextDocument, positions: Position[]) => SelectionRange[];
+	getSelectionRange?: (document: TextDocument, position: Position) => SelectionRange;
 	doValidation?: (document: TextDocument, settings?: Settings) => Diagnostic[];
 	doComplete?: (document: TextDocument, position: Position, settings?: Settings) => CompletionList;
 	doResolve?: (document: TextDocument, item: CompletionItem) => CompletionItem;

extensions/html-language-features/server/src/modes/selectionRanges.ts

@@ -0,0 +1,36 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { LanguageModes } from './languageModes';
+import { TextDocument, Position, Range, SelectionRange } from 'vscode-html-languageservice';
+
+export function getSelectionRanges(languageModes: LanguageModes, document: TextDocument, positions: Position[]) {
+	const htmlMode = languageModes.getMode('html');
+	return positions.map(position => {
+		const htmlRange = htmlMode!.getSelectionRange!(document, position);
+		const mode = languageModes.getModeAtPosition(document, position);
+		if (mode && mode.getSelectionRange) {
+			let range = mode.getSelectionRange(document, position);
+			let top = range;
+			while (top.parent && insideRangeButNotSame(htmlRange.range, top.parent.range)) {
+				top = top.parent;
+			}
+			top.parent = htmlRange;
+			return range;
+		}
+		return htmlRange || SelectionRange.create(Range.create(position, position));
+	});
+}
+
+function beforeOrSame(p1: Position, p2: Position) {
+	return p1.line < p2.line || p1.line === p2.line && p1.character <= p2.character;
+}
+function insideRangeButNotSame(r1: Range, r2: Range) {
+	return beforeOrSame(r1.start, r2.start) && beforeOrSame(r2.end, r1.end) && !equalRange(r1, r2);
+}
+function equalRange(r1: Range, r2: Range) {
+	return r1.start.line === r2.start.line && r1.start.character === r2.start.character && r1.end.line === r2.end.line && r1.end.character === r2.end.character;
+}
+

extensions/html-language-features/server/src/test/formatting.test.ts

@@ -19,7 +19,7 @@ suite('HTML Embedded Formatting', () => {
 			settings: options,
 			folders: [{ name: 'foo', uri: 'test://foo' }]
 		};
-		var languageModes = getLanguageModes({ css: true, javascript: true }, workspace, ClientCapabilities.LATEST);
+		let languageModes = getLanguageModes({ css: true, javascript: true }, workspace, ClientCapabilities.LATEST);
 
 		let rangeStartOffset = value.indexOf('|');
 		let rangeEndOffset;

extensions/html-language-features/server/src/test/selectionRanges.test.ts

@@ -0,0 +1,82 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import 'mocha';
+import * as assert from 'assert';
+import { SelectionRange } from 'vscode-languageserver-types';
+import { TextDocument } from 'vscode-languageserver-textdocument';
+import { getLanguageModes } from '../modes/languageModes';
+import { ClientCapabilities } from 'vscode-html-languageservice';
+import { getSelectionRanges } from '../modes/selectionRanges';
+
+function assertRanges(content: string, expected: (number | string)[][]): void {
+	let message = `${content} gives selection range:\n`;
+
+	const offset = content.indexOf('|');
+	content = content.substr(0, offset) + content.substr(offset + 1);
+
+	let workspace = {
+		settings: {},
+		folders: [{ name: 'foo', uri: 'test://foo' }]
+	};
+	let languageModes = getLanguageModes({ css: true, javascript: true }, workspace, ClientCapabilities.LATEST);
+
+	const document = TextDocument.create('test://foo.html', 'html', 1, content);
+	const actualRanges = getSelectionRanges(languageModes, document, [document.positionAt(offset)]);
+	assert.equal(actualRanges.length, 1);
+	const offsetPairs: [number, string][] = [];
+	let curr: SelectionRange | undefined = actualRanges[0];
+	while (curr) {
+		offsetPairs.push([document.offsetAt(curr.range.start), document.getText(curr.range)]);
+		curr = curr.parent;
+	}
+
+	message += `${JSON.stringify(offsetPairs)}\n but should give:\n${JSON.stringify(expected)}\n`;
+	assert.deepEqual(offsetPairs, expected, message);
+}
+
+suite('HTML SelectionRange', () => {
+	test('Embedded JavaScript', () => {
+		assertRanges('<html><head><script>  function foo() { return ((1|+2)*6) }</script></head></html>', [
+			[48, '1'],
+			[48, '1+2'],
+			[47, '(1+2)'],
+			[47, '(1+2)*6'],
+			[46, '((1+2)*6)'],
+			[39, 'return ((1+2)*6)'],
+			[22, 'function foo() { return ((1+2)*6) }'],
+			[20, '  function foo() { return ((1+2)*6) }'],
+			[12, '<script>  function foo() { return ((1+2)*6) }</script>'],
+			[6, '<head><script>  function foo() { return ((1+2)*6) }</script></head>'],
+			[0, '<html><head><script>  function foo() { return ((1+2)*6) }</script></head></html>'],
+		]);
+	});
+
+	test('Embedded CSS', () => {
+		assertRanges('<html><head><style>foo { display: |none; } </style></head></html>', [
+			[34, 'none'],
+			[25, 'display: none'],
+			[24, ' display: none; '],
+			[19, 'foo { display: none; }'],
+			[19, 'foo { display: none; } '],
+			[12, '<style>foo { display: none; } </style>'],
+			[6, '<head><style>foo { display: none; } </style></head>'],
+			[0, '<html><head><style>foo { display: none; } </style></head></html>'],
+		]);
+	});
+
+	test('Embedded style', () => {
+		assertRanges('<div style="color: |red"></div>', [
+			[19, 'red'],
+			[12, 'color: red'],
+			[11, '"color: red"'],
+			[5, 'style="color: red"'],
+			[1, 'div style="color: red"'],
+			[0, '<div style="color: red"></div>']
+		]);
+	});
+
+
+});