Add auto completion for attribute tags

Author: jzyrobert

CHANGELOG.md

@@ -1,4 +1,8 @@
 
+4.2.0 / 2021-11-08
+==================
+  * Added new API `htmlLanguageService.doQuoteComplete`. Called after an `attribute=`, it will compute either `""` or `''` depending on `CompletionConfiguration.attributeDefaultValue` or null, if no quote completion should be performed.
+
 4.1.0 / 2021-09-27
 ==================
   * New settings `CompletionConfiguration.attributeDefaultValue`. Defines how attribute values are completed: With single or double quotes, or no quotes.
@@ -11,12 +15,12 @@
 3.2.0 / 2020-11-30
 ==================
   * New parameter `HoverSettings` for `LanguageService.doHover`: Defines whether the hover contains element documentation and/or a reference to MDN.
-  * Deprecated `LanguageService.findOnTypeRenameRanges`, replaced by New API `LanguageService.findLinkedEditingRanges`. 
+  * Deprecated `LanguageService.findOnTypeRenameRanges`, replaced by New API `LanguageService.findLinkedEditingRanges`.
 
 3.1.0 / 2020-07-29
 ==================
   * Use `TextDocument` from `vscode-languageserver-textdocument`
-  * Fix formatting for `<p>` tags with optional closing 
+  * Fix formatting for `<p>` tags with optional closing
   * New API `LanguageService.findOnTypeRenameRanges`. For a given position, find the matching close tag so they can be renamed synchronously.
   * New API `LanguageServiceOptions.customDataProviders` to add the knowledge of custom tags, attributes and attribute-values and `LanguageService.setDataProviders` to update the data providers.
   * New API `getDefaultHTMLDataProvider` to get the default HTML data provider and `newHTMLDataProvider` to create a new provider from data.

src/htmlLanguageService.ts

@@ -39,6 +39,7 @@ export interface LanguageService {
 	format(document: TextDocument, range: Range | undefined, options: HTMLFormatConfiguration): TextEdit[];
 	findDocumentLinks(document: TextDocument, documentContext: DocumentContext): DocumentLink[];
 	findDocumentSymbols(document: TextDocument, htmlDocument: HTMLDocument): SymbolInformation[];
+	doQuoteComplete(document: TextDocument, position: Position, htmlDocument: HTMLDocument, options?: CompletionConfiguration): string | null;
 	doTagComplete(document: TextDocument, position: Position, htmlDocument: HTMLDocument): string | null;
 	getFoldingRanges(document: TextDocument, context?: { rangeLimit?: number }): FoldingRange[];
 	getSelectionRanges(document: TextDocument, positions: Position[]): SelectionRange[];
@@ -71,6 +72,7 @@ export function getLanguageService(options: LanguageServiceOptions = defaultLang
 		findDocumentSymbols,
 		getFoldingRanges,
 		getSelectionRanges,
+		doQuoteComplete: htmlCompletion.doQuoteComplete.bind(htmlCompletion),
 		doTagComplete: htmlCompletion.doTagComplete.bind(htmlCompletion),
 		doRename,
 		findMatchingTagPosition,
@@ -86,4 +88,3 @@ export function newHTMLDataProvider(id: string, customData: HTMLDataV1): IHTMLDa
 export function getDefaultHTMLDataProvider(): IHTMLDataProvider {
 	return newHTMLDataProvider('default', htmlData);
 }
-

src/services/htmlCompletion.ts

@@ -490,6 +490,44 @@ export class HTMLCompletion {
 		return result;
 	}
 
+	doQuoteComplete(document: TextDocument, position: Position, htmlDocument: HTMLDocument, settings?: CompletionConfiguration): string | null {
+		const offset = document.offsetAt(position);
+		if (offset <= 0) {
+			return null;
+		}
+		const defaultValue = settings?.attributeDefaultValue ?? 'doublequotes';
+		if (defaultValue === 'empty') {
+			return null;
+		}
+		const char = document.getText().charAt(offset - 1);
+		if (char !== '=') {
+			return null;
+		}
+		const value = defaultValue === 'doublequotes' ? '""' : '\'\'';
+		const node = htmlDocument.findNodeBefore(offset);
+		if (node && node.attributes && node.start < offset && (!node.endTagStart || node.endTagStart > offset)) {
+			const scanner = createScanner(document.getText(), node.start);
+			let token = scanner.scan();
+			while (token !== TokenType.EOS && scanner.getTokenEnd() <= offset) {
+				if (token === TokenType.AttributeName&& scanner.getTokenEnd() === offset - 1) {
+					// Ensure the token is a valid standalone attribute name
+					token = scanner.scan(); // this should be the = just written
+					if (token !== TokenType.DelimiterAssign) {
+						return null;
+					}
+					token = scanner.scan();
+					// Any non-attribute valid tag
+					if (token === TokenType.Unknown || token === TokenType.AttributeValue) {
+						return null;
+					}
+					return value;
+				}
+				token = scanner.scan();
+			}
+		}
+		return null;
+	}
+
 	doTagComplete(document: TextDocument, position: Position, htmlDocument: HTMLDocument): string | null {
 		const offset = document.offsetAt(position);
 		if (offset <= 0) {

src/test/completion.test.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { testCompletionFor, testTagCompletion } from "./completionUtil";
+import { testCompletionFor, testQuoteCompletion, testTagCompletion } from "./completionUtil";
 
 suite('HTML Completion', () => {
 	test('Complete', function (): any {
@@ -428,6 +428,19 @@ suite('HTML Completion', () => {
 		);
 	});
 
+	test('doQuoteComplete', function (): any {
+		testQuoteCompletion('<a foo=|', '""');
+		testQuoteCompletion('<a foo=|', '\'\'', { attributeDefaultValue: 'singlequotes'});
+		testQuoteCompletion('<a foo=|', null, { attributeDefaultValue: 'empty'});
+		testQuoteCompletion('<a foo=|=', null);
+		testQuoteCompletion('<a foo=|></a>', '""');
+		testQuoteCompletion('<a foo="bar=|"', null);
+		testQuoteCompletion('<a baz=| foo="bar">', '""');
+		testQuoteCompletion('<a>< foo=| /a>', null);
+		testQuoteCompletion('<a></ foo=| a>', null);
+		testQuoteCompletion('<a foo="bar" \n baz=| ></a>', '""');
+	});
+
 	test('doTagComplete', function (): any {
 		testTagCompletion('<div>|', '$0</div>');
 		testTagCompletion('<div>|</div>', null);

src/test/completionUtil.ts

@@ -6,7 +6,7 @@
 import * as assert from 'assert';
 import * as htmlLanguageService from '../htmlLanguageService';
 
-import { TextDocument, CompletionList, CompletionItemKind, MarkupContent, TextEdit } from '../htmlLanguageService';
+import { TextDocument, CompletionList, CompletionItemKind, MarkupContent, TextEdit, CompletionConfiguration } from '../htmlLanguageService';
 
 interface ItemDescription {
 	label: string;
@@ -79,6 +79,19 @@ export function testCompletionFor(value: string, expected: { count?: number, ite
 	}
 }
 
+export function testQuoteCompletion(value: string, expected: string | null, options?: CompletionConfiguration): void {
+	const offset = value.indexOf('|');
+	value = value.substr(0, offset) + value.substr(offset + 1);
+
+	const ls = htmlLanguageService.getLanguageService();
+
+	const document = TextDocument.create('test://test/test.html', 'html', 0, value);
+	const position = document.positionAt(offset);
+	const htmlDoc = ls.parseHTMLDocument(document);
+	const actual = ls.doQuoteComplete(document, position, htmlDoc, options);
+	assert.strictEqual(actual, expected);
+}
+
 export function testTagCompletion(value: string, expected: string | null): void {
 	const offset = value.indexOf('|');
 	value = value.substr(0, offset) + value.substr(offset + 1);