fix(language-service): skip document highlight from tsserver within element tags (#5584)

Author: KazariEX

packages/language-core/lib/codegen/codeFeatures.ts

@@ -24,9 +24,6 @@ const raw = {
 	navigation: {
 		navigation: true,
 	},
-	navigationWithoutHighlight: {
-		navigation: { shouldHighlight: () => false },
-	},
 	navigationWithoutRename: {
 		navigation: { shouldRename: () => false },
 	},

packages/language-core/lib/codegen/template/element.ts

@@ -1,7 +1,7 @@
 import * as CompilerDOM from '@vue/compiler-dom';
 import { camelize, capitalize } from '@vue/shared';
 import type { Code, VueCodeInformation } from '../../types';
-import { getSlotsPropertyName, hyphenateTag } from '../../utils/shared';
+import { getElementTagOffsets, getSlotsPropertyName, hyphenateTag } from '../../utils/shared';
 import { codeFeatures } from '../codeFeatures';
 import { createVBindShorthandInlayHintInfo } from '../inlayHints';
 import { endOfLine, identifierRegex, newLine, normalizeAttributeValue } from '../utils';
@@ -25,13 +25,7 @@ export function* generateComponent(
 	ctx: TemplateCodegenContext,
 	node: CompilerDOM.ElementNode,
 ): Generator<Code> {
-	const tagOffsets = [node.loc.start.offset + options.template.content.slice(node.loc.start.offset).indexOf(node.tag)];
-	if (!node.isSelfClosing && options.template.lang === 'html') {
-		const endTagOffset = node.loc.start.offset + node.loc.source.lastIndexOf(node.tag);
-		if (endTagOffset > tagOffsets[0]) {
-			tagOffsets.push(endTagOffset);
-		}
-	}
+	const tagOffsets = getElementTagOffsets(node, options.template);
 	const failedPropExps: FailedPropExpression[] = [];
 	const possibleOriginalNames = getPossibleOriginalComponentNames(node.tag, true);
 	const matchImportName = possibleOriginalNames.find(name => options.scriptSetupImportComponentNames.has(name));
@@ -294,25 +288,16 @@ export function* generateElement(
 	ctx: TemplateCodegenContext,
 	node: CompilerDOM.ElementNode,
 ): Generator<Code> {
-	const startTagOffset = node.loc.start.offset
-		+ options.template.content.slice(node.loc.start.offset).indexOf(node.tag);
-	const endTagOffset = !node.isSelfClosing && options.template.lang === 'html'
-		? node.loc.start.offset + node.loc.source.lastIndexOf(node.tag)
-		: undefined;
+	const [startTagOffset, endTagOffset] = getElementTagOffsets(node, options.template);
 	const failedPropExps: FailedPropExpression[] = [];
 
-	const features = {
-		...codeFeatures.semanticWithoutHighlight,
-		...codeFeatures.navigationWithoutHighlight,
-	};
-
 	yield `__VLS_asFunctionalElement(__VLS_elements`;
 	yield* generatePropertyAccess(
 		options,
 		ctx,
 		node.tag,
 		startTagOffset,
-		features,
+		codeFeatures.withoutHighlightAndCompletion,
 	);
 	if (endTagOffset !== undefined) {
 		yield `, __VLS_elements`;
@@ -321,7 +306,7 @@ export function* generateElement(
 			ctx,
 			node.tag,
 			endTagOffset,
-			features,
+			codeFeatures.withoutHighlightAndCompletion,
 		);
 	}
 	yield `)(`;

packages/language-core/lib/codegen/template/slotOutlet.ts

@@ -1,5 +1,6 @@
 import * as CompilerDOM from '@vue/compiler-dom';
 import type { Code } from '../../types';
+import { getElementTagOffsets } from '../../utils/shared';
 import { codeFeatures } from '../codeFeatures';
 import { createVBindShorthandInlayHintInfo } from '../inlayHints';
 import { endOfLine, newLine } from '../utils';
@@ -16,8 +17,7 @@ export function* generateSlotOutlet(
 	ctx: TemplateCodegenContext,
 	node: CompilerDOM.SlotOutletNode,
 ): Generator<Code> {
-	const startTagOffset = node.loc.start.offset
-		+ options.template.content.slice(node.loc.start.offset).indexOf(node.tag);
+	const [startTagOffset] = getElementTagOffsets(node, options.template);
 	const startTagEndOffset = startTagOffset + node.tag.length;
 	const propsVar = ctx.getInternalVariable();
 	const nameProp = node.props.find(prop => {

packages/language-core/lib/utils/shared.ts

@@ -1,6 +1,7 @@
+import type * as CompilerDOM from '@vue/compiler-dom';
 import { hyphenate } from '@vue/shared';
 import type * as ts from 'typescript';
-import type { TextRange } from '../types';
+import type { Sfc, TextRange } from '../types';
 
 export { hyphenate as hyphenateTag } from '@vue/shared';
 
@@ -17,6 +18,22 @@ export function getSlotsPropertyName(vueVersion: number) {
 	return vueVersion < 3 ? '$scopedSlots' : '$slots';
 }
 
+export function getElementTagOffsets(
+	node: CompilerDOM.ElementNode,
+	template: NonNullable<Sfc['template']>,
+) {
+	const tagOffsets = [
+		template.content.indexOf(node.tag, node.loc.start.offset),
+	];
+	if (!node.isSelfClosing && template.lang === 'html') {
+		const endTagOffset = node.loc.start.offset + node.loc.source.lastIndexOf(node.tag);
+		if (endTagOffset > tagOffsets[0]) {
+			tagOffsets.push(endTagOffset);
+		}
+	}
+	return tagOffsets;
+}
+
 export function getStartEnd(
 	ts: typeof import('typescript'),
 	node: ts.Node,

packages/language-service/lib/plugins/vue-document-highlights.ts

@@ -1,4 +1,5 @@
 import type { DocumentHighlightKind, LanguageServicePlugin } from '@volar/language-service';
+import { forEachElementNode, getElementTagOffsets } from '@vue/language-core';
 import { getEmbeddedInfo } from '../utils';
 
 export function create(
@@ -18,7 +19,24 @@ export function create(
 					}
 					const { root } = info;
 
-					const result = await getDocumentHighlights(root.fileName, document.offsetAt(position));
+					const { template } = root.sfc;
+					const offset = document.offsetAt(position);
+
+					if (template?.ast && offset >= template.startTagEnd && offset <= template.endTagStart) {
+						const pos = offset - template.startTagEnd;
+						for (const node of forEachElementNode(template.ast)) {
+							if (pos < node.loc.start.offset || pos > node.loc.end.offset) {
+								continue;
+							}
+							for (const tagOffset of getElementTagOffsets(node, template)) {
+								if (pos >= tagOffset && pos <= tagOffset + node.tag.length) {
+									return;
+								}
+							}
+						}
+					}
+
+					const result = await getDocumentHighlights(root.fileName, offset);
 
 					return result
 						?.filter(({ fileName }) => fileName === root.fileName)