feat: use HoverProvider instead of DocumentLinkProvider to avoid style conflicts

Author: 9romise

src/index.ts

@@ -12,7 +12,7 @@ import { YamlExtractor } from './extractors/yaml'
 import { displayName, version } from './generated-meta'
 import { VersionCompletionItemProvider } from './providers/completion-item/version'
 import { registerDiagnosticCollection } from './providers/diagnostics'
-import { NpmxDocumentLinkProvider } from './providers/document-link/npmx'
+import { NpmxHoverProvider } from './providers/hover/npmx'
 import { config, logger } from './state'
 
 export const { activate, deactivate } = defineExtension((ctx) => {
@@ -22,13 +22,13 @@ export const { activate, deactivate } = defineExtension((ctx) => {
   const yamlExtractor = new YamlExtractor()
 
   ctx.subscriptions.push(
-    languages.registerDocumentLinkProvider(
+    languages.registerHoverProvider(
       { pattern: PACKAGE_JSON_PATTERN },
-      new NpmxDocumentLinkProvider(jsonExtractor),
+      new NpmxHoverProvider(jsonExtractor),
     ),
-    languages.registerDocumentLinkProvider(
+    languages.registerHoverProvider(
       { pattern: PNPM_WORKSPACE_PATTERN },
-      new NpmxDocumentLinkProvider(yamlExtractor),
+      new NpmxHoverProvider(yamlExtractor),
     ),
   )
 

src/providers/document-link/npmx.ts

@@ -0,0 +1,32 @@
+import type { Extractor } from '#types/extractor'
+import type { HoverProvider, Position, TextDocument } from 'vscode'
+import { encodePackageName } from '#utils/npm'
+import { Hover, MarkdownString } from 'vscode'
+
+export class NpmxHoverProvider<T extends Extractor> implements HoverProvider {
+  extractor: T
+
+  constructor(extractor: T) {
+    this.extractor = extractor
+  }
+
+  provideHover(document: TextDocument, position: Position) {
+    const root = this.extractor.parse(document)
+    if (!root)
+      return
+
+    const offset = document.offsetAt(position)
+    const info = this.extractor.getDependencyInfoByOffset(root, offset)
+    if (!info)
+      return
+
+    const { name } = info
+
+    const md = new MarkdownString('')
+    md.isTrusted = true
+
+    md.appendMarkdown(`[View on npmx](https://npmx.dev/package/${encodePackageName(name)})  \n`)
+
+    return new Hover(md)
+  }
+}