feat: Semantic document highlight (#1408)

* ts, html, css

* WIP

* fast forward

* general svelte blocks and tag

* only same file highlights

* else highlights for if block

* await block

* highlight in style attribute

* exclude unsupported

* don't filter out highlights if original is not in it
function and class highlght its name

* config

* ts, html and css test

* svelte test

* format

* merge two utils files

* revert unnecessary changes

* single config, mark as experimental

* move the svelte highlight to ts using ast returned by svelte2tsx

* config description

* word based highlight for unsupported languages

* format

* ignore for svelte 5

* fix svelte 5 issues. workaround the await block issue and fixing it separately

* Apply suggestions from code review

Co-authored-by: Simon H <[email protected]>

* prevent word-base fallback

* fix nested if, if block without else if

* remove experimental
keep the config so people can still go back to the word base highlight

* fix svelte 4 again

* fix

* Update packages/language-server/src/plugins/PluginHost.ts

* fix the fix

---------

Co-authored-by: Simon H <[email protected]>
Co-authored-by: Simon Holthausen <[email protected]>

Author: jasonlyu123

packages/language-server/README.md

@@ -289,6 +289,10 @@ Whether or not to show a code lens at the top of Svelte files indicating if they
 
 The default language to use when generating new script tags in Svelte. _Default_: `none`
 
+#### `svelte.plugin.svelte.documentHighlight.enable`
+
+Enable document highlight support. Requires a restart. _Default_: `true`
+
 ## Credits
 
 -   [James Birtles](https://github.com/jamesbirtles) for creating the foundation which this language server is built on

packages/language-server/src/lib/documentHighlight/wordHighlight.ts

@@ -0,0 +1,89 @@
+import {
+    DocumentHighlight,
+    DocumentHighlightKind,
+    Position,
+    Range
+} from 'vscode-languageserver-types';
+import { Document, TagInformation } from '../documents';
+
+export function wordHighlightForTag(
+    document: Document,
+    position: Position,
+    tag: TagInformation | null,
+    wordPattern: RegExp
+): DocumentHighlight[] | null {
+    if (!tag || tag.start === tag.end) {
+        return null;
+    }
+
+    const offset = document.offsetAt(position);
+
+    const text = document.getText();
+    if (
+        offset < tag.start ||
+        offset > tag.end ||
+        // empty before and after the cursor
+        !text.slice(offset - 1, offset + 1).trim()
+    ) {
+        return null;
+    }
+
+    const word = wordAt(document, position, wordPattern);
+    if (!word) {
+        return null;
+    }
+
+    const searching = document.getText().slice(tag.start, tag.end);
+
+    const highlights: DocumentHighlight[] = [];
+
+    let index = 0;
+    while (index < searching.length) {
+        index = searching.indexOf(word, index);
+        if (index === -1) {
+            break;
+        }
+
+        const start = tag.start + index;
+        highlights.push({
+            range: {
+                start: document.positionAt(start),
+                end: document.positionAt(start + word.length)
+            },
+            kind: DocumentHighlightKind.Text
+        });
+
+        index += word.length;
+    }
+
+    return highlights;
+}
+
+function wordAt(document: Document, position: Position, wordPattern: RegExp): string | null {
+    const line = document
+        .getText(
+            Range.create(Position.create(position.line, 0), Position.create(position.line + 1, 0))
+        )
+        .trimEnd();
+
+    wordPattern.lastIndex = 0;
+
+    let start: number | undefined;
+    let end: number | undefined;
+    const matchEnd = Math.min(position.character, line.length);
+    while (wordPattern.lastIndex < matchEnd) {
+        const match = wordPattern.exec(line);
+        if (!match) {
+            break;
+        }
+
+        start = match.index;
+        end = match.index + match[0].length;
+    }
+
+    if (start === undefined || end === undefined || end < position.character) {
+        return null;
+    }
+
+    return line.slice(start, end);
+}

packages/language-server/src/lib/documents/utils.ts

@@ -453,3 +453,11 @@ export function isInsideMoustacheTag(html: string, tagStart: number | null, posi
         return charactersInNode.lastIndexOf('{') > charactersInNode.lastIndexOf('}');
     }
 }
+
+export function inStyleOrScript(document: Document, position: Position) {
+    return (
+        isInTag(position, document.styleInfo) ||
+        isInTag(position, document.scriptInfo) ||
+        isInTag(position, document.moduleScriptInfo)
+    );
+}

packages/language-server/src/plugins/PluginHost.ts

@@ -16,6 +16,7 @@ import {
     CompletionList,
     DefinitionLink,
     Diagnostic,
+    DocumentHighlight,
     FoldingRange,
     FormattingOptions,
     Hover,
@@ -677,6 +678,25 @@ export class PluginHost implements LSProvider, OnWatchFileChanges {
         );
     }
 
+    findDocumentHighlight(
+        textDocument: TextDocumentIdentifier,
+        position: Position
+    ): Promise<DocumentHighlight[] | null> {
+        const document = this.getDocument(textDocument.uri);
+        if (!document) {
+            throw new Error('Cannot call methods on an unopened document');
+        }
+
+        return (
+            this.execute<DocumentHighlight[] | null>(
+                'findDocumentHighlight',
+                [document, position],
+                ExecuteMode.FirstNonNull,
+                'high'
+            ) ?? [] // fall back to empty array to prevent fallback to word-based highlighting
+        );
+    }
+
     onWatchFileChanges(onWatchFileChangesParas: OnWatchFileChangesPara[]): void {
         for (const support of this.plugins) {
             support.onWatchFileChanges?.(onWatchFileChangesParas);

packages/language-server/src/plugins/css/CSSPlugin.ts

@@ -14,6 +14,7 @@ import {
     CompletionItem,
     CompletionItemKind,
     SelectionRange,
+    DocumentHighlight,
     WorkspaceFolder
 } from 'vscode-languageserver';
 import {
@@ -36,6 +37,7 @@ import {
     CompletionsProvider,
     DiagnosticsProvider,
     DocumentColorsProvider,
+    DocumentHighlightProvider,
     DocumentSymbolsProvider,
     FoldingRangeProvider,
     HoverProvider,
@@ -50,8 +52,12 @@ import { StyleAttributeDocument } from './StyleAttributeDocument';
 import { getDocumentContext } from '../documentContext';
 import { FoldingRange, FoldingRangeKind } from 'vscode-languageserver-types';
 import { indentBasedFoldingRangeForTag } from '../../lib/foldingRange/indentFolding';
+import { wordHighlightForTag } from '../../lib/documentHighlight/wordHighlight';
 import { isNotNullOrUndefined, urlToPath } from '../../utils';
 
+// https://github.com/microsoft/vscode/blob/c6f507deeb99925e713271b1048f21dbaab4bd54/extensions/css/language-configuration.json#L34
+const wordPattern = /(#?-?\d*\.\d\w*%?)|(::?[\w-]*(?=[^,{;]*[,{]))|(([@#.!])?[\w-?]+%?|[@#!.])/g;
+
 export class CSSPlugin
     implements
         HoverProvider,
@@ -61,6 +67,7 @@ export class CSSPlugin
         ColorPresentationsProvider,
         DocumentSymbolsProvider,
         SelectionRangeProvider,
+        DocumentHighlightProvider,
         FoldingRangeProvider
 {
     __name = 'css';
@@ -388,7 +395,6 @@ export class CSSPlugin
         }
 
         const cssDocument = this.getCSSDoc(document);
-
         if (shouldUseIndentBasedFolding(cssDocument.languageId)) {
             return this.nonSyntacticFolding(document, document.styleInfo);
         }
@@ -441,6 +447,48 @@ export class CSSPlugin
         return ranges.sort((a, b) => a.startLine - b.startLine);
     }
 
+    findDocumentHighlight(document: Document, position: Position): DocumentHighlight[] | null {
+        const cssDocument = this.getCSSDoc(document);
+        if (cssDocument.isInGenerated(position)) {
+            if (shouldExcludeDocumentHighlights(cssDocument)) {
+                return wordHighlightForTag(document, position, document.styleInfo, wordPattern);
+            }
+
+            return this.findDocumentHighlightInternal(cssDocument, position);
+        }
+
+        const attributeContext = getAttributeContextAtPosition(document, position);
+        if (
+            attributeContext &&
+            this.inStyleAttributeWithoutInterpolation(attributeContext, document.getText())
+        ) {
+            const [start, end] = attributeContext.valueRange;
+            return this.findDocumentHighlightInternal(
+                new StyleAttributeDocument(document, start, end, this.cssLanguageServices),
+                position
+            );
+        }
+
+        return null;
+    }
+
+    private findDocumentHighlightInternal(
+        cssDocument: CSSDocumentBase,
+        position: Position
+    ): DocumentHighlight[] | null {
+        const kind = extractLanguage(cssDocument);
+
+        const result = getLanguageService(this.cssLanguageServices, kind)
+            .findDocumentHighlights(
+                cssDocument,
+                cssDocument.getGeneratedPosition(position),
+                cssDocument.stylesheet
+            )
+            .map((highlight) => mapObjWithRangeToOriginal(cssDocument, highlight));
+
+        return result;
+    }
+
     private getCSSDoc(document: Document) {
         let cssDoc = this.cssDocuments.get(document);
         if (!cssDoc || cssDoc.version < document.version) {
@@ -535,6 +583,18 @@ function shouldUseIndentBasedFolding(kind?: string) {
     }
 }
 
+function shouldExcludeDocumentHighlights(document: CSSDocumentBase) {
+    switch (extractLanguage(document)) {
+        case 'postcss':
+        case 'sass':
+        case 'stylus':
+        case 'styl':
+            return true;
+        default:
+            return false;
+    }
+}
+
 function isSASS(document: CSSDocumentBase) {
     switch (extractLanguage(document)) {
         case 'sass':

packages/language-server/src/plugins/html/HTMLPlugin.ts

@@ -18,7 +18,8 @@ import {
     WorkspaceEdit,
     LinkedEditingRanges,
     CompletionContext,
-    FoldingRange
+    FoldingRange,
+    DocumentHighlight
 } from 'vscode-languageserver';
 import {
     DocumentManager,
@@ -33,22 +34,28 @@ import {
     CompletionsProvider,
     RenameProvider,
     LinkedEditingRangesProvider,
-    FoldingRangeProvider
+    FoldingRangeProvider,
+    DocumentHighlightProvider
 } from '../interfaces';
 import { isInsideMoustacheTag, toRange } from '../../lib/documents/utils';
 import { isNotNullOrUndefined, possiblyComponent } from '../../utils';
 import { importPrettier } from '../../importPackage';
 import path from 'path';
 import { Logger } from '../../logger';
 import { indentBasedFoldingRangeForTag } from '../../lib/foldingRange/indentFolding';
+import { wordHighlightForTag } from '../../lib/documentHighlight/wordHighlight';
+
+// https://github.com/microsoft/vscode/blob/c6f507deeb99925e713271b1048f21dbaab4bd54/extensions/html/language-configuration.json#L34
+const wordPattern = /(-?\d*\.\d\w*)|([^`~!@$^&*()=+[{\]}\|;:'",.<>\/\s]+)/g;
 
 export class HTMLPlugin
     implements
         HoverProvider,
         CompletionsProvider,
         RenameProvider,
         LinkedEditingRangesProvider,
-        FoldingRangeProvider
+        FoldingRangeProvider,
+        DocumentHighlightProvider
 {
     __name = 'html';
     private lang = getLanguageService({
@@ -409,6 +416,36 @@ export class HTMLPlugin
         return result.concat(templateRange);
     }
 
+    findDocumentHighlight(document: Document, position: Position): DocumentHighlight[] | null {
+        const html = this.documents.get(document);
+        if (!html) {
+            return null;
+        }
+
+        const templateResult = wordHighlightForTag(
+            document,
+            position,
+            document.templateInfo,
+            wordPattern
+        );
+
+        if (templateResult) {
+            return templateResult;
+        }
+
+        const node = html.findNodeAt(document.offsetAt(position));
+        if (possiblyComponent(node)) {
+            return null;
+        }
+        const result = this.lang.findDocumentHighlights(document, position, html);
+
+        if (!result.length) {
+            return null;
+        }
+
+        return result;
+    }
+
     /**
      * Returns true if rename happens at the tag name, not anywhere inbetween.
      */

packages/language-server/src/plugins/interfaces.ts

@@ -21,6 +21,7 @@ import {
     CompletionList,
     DefinitionLink,
     Diagnostic,
+    DocumentHighlight,
     FoldingRange,
     FormattingOptions,
     Hover,
@@ -243,6 +244,13 @@ export interface FoldingRangeProvider {
     getFoldingRanges(document: Document): Resolvable<FoldingRange[]>;
 }
 
+export interface DocumentHighlightProvider {
+    findDocumentHighlight(
+        document: Document,
+        position: Position
+    ): Resolvable<DocumentHighlight[] | null>;
+}
+
 export interface OnWatchFileChanges {
     onWatchFileChanges(onWatchFileChangesParas: OnWatchFileChangesPara[]): void;
 }
@@ -273,7 +281,8 @@ type ProviderBase = DiagnosticsProvider &
     InlayHintProvider &
     CallHierarchyProvider &
     FoldingRangeProvider &
-    CodeLensProvider;
+    CodeLensProvider &
+    DocumentHighlightProvider;
 
 export type LSProvider = ProviderBase & BackwardsCompatibleDefinitionsProvider;