fix(language-service): prevent auto-insertion of html snippets in template interpolation (#5744)

Author: serkodev

packages/language-service/lib/plugins/vue-template.ts

@@ -314,6 +314,22 @@ export function create(
 					}
 				},
 
+				async provideAutoInsertSnippet(document, selection, lastChange, token) {
+					if (document.languageId !== languageId) {
+						return;
+					}
+					const info = resolveEmbeddedCode(context, document.uri);
+					if (info?.code.id !== 'template') {
+						return;
+					}
+
+					const snippet = await baseServiceInstance.provideAutoInsertSnippet?.(document, selection, lastChange, token);
+					if (shouldSkipClosingTagFromInterpolation(document, selection, lastChange, snippet)) {
+						return;
+					}
+					return snippet;
+				},
+
 				provideHover(document, position, token) {
 					if (document.languageId !== languageId) {
 						return;
@@ -748,3 +764,85 @@ function getPropName(
 	}
 	return { isEvent, propName: name };
 }
+
+function shouldSkipClosingTagFromInterpolation(
+	doc: TextDocument,
+	selection: html.Position,
+	lastChange: { text: string } | undefined,
+	snippet: string | null | undefined,
+) {
+	if (!snippet || !lastChange || (lastChange.text !== '/' && lastChange.text !== '>')) {
+		return false;
+	}
+	const tagName = /^\$0<\/([^\s>/]+)>$/.exec(snippet)?.[1] ?? /^([^\s>/]+)>$/.exec(snippet)?.[1];
+	if (!tagName) {
+		return false;
+	}
+
+	// check if the open tag inside bracket
+	const textUpToSelection = doc.getText({
+		start: { line: 0, character: 0 },
+		end: selection,
+	});
+
+	const lowerText = textUpToSelection.toLowerCase();
+	const targetTag = `<${tagName.toLowerCase()}`;
+	let searchIndex = lowerText.lastIndexOf(targetTag);
+	let foundInsideInterpolation = false;
+
+	while (searchIndex !== -1) {
+		const nextChar = lowerText.charAt(searchIndex + targetTag.length);
+
+		// if the next character continues the tag name, skip this occurrence
+		const isNameContinuation = nextChar && /[0-9a-z:_-]/.test(nextChar);
+		if (isNameContinuation) {
+			searchIndex = lowerText.lastIndexOf(targetTag, searchIndex - 1);
+			continue;
+		}
+
+		const tagPosition = doc.positionAt(searchIndex);
+		if (!isInsideBracketExpression(doc, tagPosition)) {
+			return false;
+		}
+
+		foundInsideInterpolation = true;
+		searchIndex = lowerText.lastIndexOf(targetTag, searchIndex - 1);
+	}
+
+	return foundInsideInterpolation;
+}
+
+function isInsideBracketExpression(doc: TextDocument, selection: html.Position) {
+	const text = doc.getText({
+		start: { line: 0, character: 0 },
+		end: selection,
+	});
+	const tokenMatcher = /<!--|-->|{{|}}/g;
+	let match: RegExpExecArray | null;
+	let inComment = false;
+	let lastOpen = -1;
+	let lastClose = -1;
+
+	while ((match = tokenMatcher.exec(text)) !== null) {
+		switch (match[0]) {
+			case '<!--':
+				inComment = true;
+				break;
+			case '-->':
+				inComment = false;
+				break;
+			case '{{':
+				if (!inComment) {
+					lastOpen = match.index;
+				}
+				break;
+			case '}}':
+				if (!inComment) {
+					lastClose = match.index;
+				}
+				break;
+		}
+	}
+
+	return lastOpen !== -1 && lastClose < lastOpen;
+}

packages/language-service/tests/autoInsert/4403.spec.ts

@@ -0,0 +1,65 @@
+import { defineAutoInsertTest } from '../utils/autoInsert';
+
+const issue = '#' + __filename.split('.')[0];
+
+defineAutoInsertTest({
+	title: `${issue} auto insert inside interpolations`,
+	languageId: 'vue',
+	input: `
+<template>
+	{{ "<div|" }}
+</template>
+`,
+	insertedText: '>',
+	output: undefined,
+});
+
+defineAutoInsertTest({
+	title: `${issue} still completes HTML tags in plain template regions`,
+	languageId: 'vue',
+	input: `
+<template>
+	<div|
+</template>
+`,
+	insertedText: '>',
+	output: '$0</div>',
+});
+
+defineAutoInsertTest({
+	title: `${issue} completes HTML tags when bracket are inside HTML comments`,
+	languageId: 'vue',
+	input: `
+<template>
+<!-- {{ -->
+<div|
+<!-- }}-->
+</template>
+`,
+	insertedText: '>',
+	output: '$0</div>',
+});
+
+defineAutoInsertTest({
+	title: `${issue} completes closing tags even if previous interpolation contains HTML strings`,
+	languageId: 'vue',
+	input: `
+<template>
+<div>{{ "<div></div>" }}<|
+</template>
+`,
+	insertedText: '/',
+	output: 'div>',
+});
+
+defineAutoInsertTest({
+	title: `${issue} avoids closing tags spawned from string literals when typing \`</\``,
+	languageId: 'vue',
+	input: `
+<template>
+	{{ "<div>" }}<|
+</template>
+`,
+	insertedText: '/',
+	output: undefined,
+});

packages/language-service/tests/utils/autoInsert.ts

@@ -0,0 +1,91 @@
+import { createServiceEnvironment } from '@volar/kit/lib/createServiceEnvironment';
+import {
+	createLanguage,
+	createLanguageService,
+	createUriMap,
+	type LanguagePlugin,
+	type LanguageServicePlugin,
+} from '@volar/language-service';
+import { createVueLanguagePlugin, getDefaultCompilerOptions } from '@vue/language-core';
+import * as ts from 'typescript';
+import { describe, expect, it } from 'vitest';
+import { URI } from 'vscode-uri';
+import { createVueLanguageServicePlugins } from '../..';
+
+// TODO: migrate to @volar/kit
+export function createAutoInserter(
+	languages: LanguagePlugin<URI>[],
+	services: LanguageServicePlugin[],
+) {
+	let settings = {};
+
+	const fakeUri = URI.parse('file:///dummy.txt');
+	const env = createServiceEnvironment(() => settings);
+	const language = createLanguage(languages, createUriMap(false), () => {});
+	const languageService = createLanguageService(language, services, env, {});
+
+	return {
+		env,
+		autoInsert,
+		get settings() {
+			return settings;
+		},
+		set settings(v) {
+			settings = v;
+		},
+	};
+
+	async function autoInsert(textWithCursor: string, insertedText: string, languageId: string, cursor = '|') {
+		const cursorIndex = textWithCursor.indexOf(cursor);
+		if (cursorIndex === -1) {
+			throw new Error('Cursor marker not found in input text.');
+		}
+		const content = textWithCursor.slice(0, cursorIndex) + insertedText
+			+ textWithCursor.slice(cursorIndex + cursor.length);
+		const snapshot = ts.ScriptSnapshot.fromString(content);
+		language.scripts.set(fakeUri, snapshot, languageId);
+		const document = languageService.context.documents.get(fakeUri, languageId, snapshot);
+		return await languageService.getAutoInsertSnippet(
+			fakeUri,
+			document.positionAt(cursorIndex + insertedText.length),
+			{
+				rangeOffset: cursorIndex,
+				rangeLength: 0,
+				text: insertedText,
+			},
+		);
+	}
+}
+
+// util
+
+const vueCompilerOptions = getDefaultCompilerOptions();
+const vueLanguagePlugin = createVueLanguagePlugin<URI>(
+	ts,
+	{},
+	vueCompilerOptions,
+	() => '',
+);
+const vueServicePLugins = createVueLanguageServicePlugins(ts);
+const autoInserter = createAutoInserter([vueLanguagePlugin], vueServicePLugins);
+
+export function defineAutoInsertTest(options: {
+	title: string;
+	input: string;
+	insertedText: string;
+	output: string | undefined;
+	languageId: string;
+	cursor?: string;
+}) {
+	describe(`auto insert: ${options.title}`, () => {
+		it(`auto insert`, async () => {
+			const snippet = await autoInserter.autoInsert(
+				options.input,
+				options.insertedText,
+				options.languageId,
+				options.cursor,
+			);
+			expect(snippet).toBe(options.output);
+		});
+	});
+}