Fix liquid doc node hover text (#841)

Author: aswamy

.changeset/rare-dolls-complain.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme-language-server-common': patch
+---
+
+Fix bug where help text appears when hovering over liquid doc nodes outside param names

packages/theme-language-server-common/src/hover/HoverProvider.ts

@@ -57,7 +57,7 @@ export class HoverProvider {
       new TranslationHoverProvider(getTranslationsForURI, documentManager),
       new RenderSnippetHoverProvider(getSnippetDefinitionForURI),
       new RenderSnippetParameterHoverProvider(getSnippetDefinitionForURI),
-      new LiquidDocTagHoverProvider(),
+      new LiquidDocTagHoverProvider(documentManager),
     ];
   }
 

packages/theme-language-server-common/src/hover/providers/LiquidDocTagHoverProvider.spec.ts

@@ -48,30 +48,12 @@ describe('Module: RenderSnippetParameterHoverProvider', async () => {
     );
   });
 
-  it('should show the param help doc when hovering over the text', async () => {
+  it('should not show the param help doc when hovering over text outside param name', async () => {
     await expect(provider).to.hover(
       `{% doc %} @param {string} name - █your name {% enddoc %}`,
-      formatLiquidDocTagHandle(
-        'param',
-        SUPPORTED_LIQUID_DOC_TAG_HANDLES['param'].description,
-        SUPPORTED_LIQUID_DOC_TAG_HANDLES['param'].example,
-      ),
-    );
-    await expect(provider).to.hover(
-      `{% doc %} @example my █example {% enddoc %}`,
-      formatLiquidDocTagHandle(
-        'example',
-        SUPPORTED_LIQUID_DOC_TAG_HANDLES['example'].description,
-        SUPPORTED_LIQUID_DOC_TAG_HANDLES['example'].example,
-      ),
-    );
-    await expect(provider).to.hover(
-      `{% doc %} @description cool text█ is cool {% enddoc %}`,
-      formatLiquidDocTagHandle(
-        'description',
-        SUPPORTED_LIQUID_DOC_TAG_HANDLES['description'].description,
-        SUPPORTED_LIQUID_DOC_TAG_HANDLES['description'].example,
-      ),
+      null,
     );
+    await expect(provider).to.hover(`{% doc %} @example my █example {% enddoc %}`, null);
+    await expect(provider).to.hover(`{% doc %} @description cool text█ is cool {% enddoc %}`, null);
   });
 });

packages/theme-language-server-common/src/hover/providers/LiquidDocTagHoverProvider.ts

@@ -1,41 +1,44 @@
 import { NodeTypes } from '@shopify/liquid-html-parser';
 import { LiquidHtmlNode } from '@shopify/theme-check-common';
-import { Hover, MarkupKind } from 'vscode-languageserver';
+import { Hover, HoverParams, MarkupKind } from 'vscode-languageserver';
 import { BaseHoverProvider } from '../BaseHoverProvider';
 import { formatLiquidDocTagHandle, SUPPORTED_LIQUID_DOC_TAG_HANDLES } from '../../utils/liquidDoc';
+import { DocumentManager } from '../../documents';
 
 export class LiquidDocTagHoverProvider implements BaseHoverProvider {
-  constructor() {}
+  constructor(private documentManager: DocumentManager) {}
 
-  async hover(currentNode: LiquidHtmlNode, ancestors: LiquidHtmlNode[]): Promise<Hover | null> {
+  async hover(
+    currentNode: LiquidHtmlNode,
+    ancestors: LiquidHtmlNode[],
+    params: HoverParams,
+  ): Promise<Hover | null> {
     const parentNode = ancestors.at(-1);
 
-    let docTagNode;
-
-    // We could be hovering on the liquidDoc tag itself
     if (
-      currentNode.type === NodeTypes.LiquidDocParamNode ||
-      currentNode.type === NodeTypes.LiquidDocDescriptionNode ||
-      currentNode.type === NodeTypes.LiquidDocExampleNode
+      currentNode.type !== NodeTypes.LiquidDocParamNode &&
+      currentNode.type !== NodeTypes.LiquidDocDescriptionNode &&
+      currentNode.type !== NodeTypes.LiquidDocExampleNode
     ) {
-      docTagNode = currentNode;
+      return null;
     }
 
-    // or we could be hovering on the liquidDoc tag's text
+    const document = this.documentManager.get(params.textDocument.uri)?.textDocument;
+
+    // We only want to provide hover when we are on the exact tag name
+    // If the cursor is passed that but still within the tag node, we ignore it
+    //
+    // E.g.
+    // Provide hover: @para█m name - description
+    // Don't provide hover: @param █name - description
     if (
-      (parentNode?.type === NodeTypes.LiquidDocParamNode ||
-        parentNode?.type === NodeTypes.LiquidDocDescriptionNode ||
-        parentNode?.type === NodeTypes.LiquidDocExampleNode) &&
-      currentNode.type === NodeTypes.TextNode
+      document &&
+      document.offsetAt(params.position) > currentNode.position.start + currentNode.name.length
     ) {
-      docTagNode = parentNode;
-    }
-
-    if (!docTagNode) {
       return null;
     }
 
-    const docTagData = SUPPORTED_LIQUID_DOC_TAG_HANDLES[docTagNode.name];
+    const docTagData = SUPPORTED_LIQUID_DOC_TAG_HANDLES[currentNode.name];
 
     if (!docTagData) {
       return null;
@@ -45,7 +48,7 @@ export class LiquidDocTagHoverProvider implements BaseHoverProvider {
       contents: {
         kind: MarkupKind.Markdown,
         value: formatLiquidDocTagHandle(
-          docTagNode.name,
+          currentNode.name,
           docTagData.description,
           docTagData.example,
         ),