feat: add markdown documentation to compeletionItem

Author: shezhangzhang

src/extension.ts

@@ -3,7 +3,7 @@
 import * as vscode from "vscode";
 import getDesignToken from "antd-token-previewer/es/utils/getDesignToken";
 import rgbHex from "rgb-hex";
-import { getMarkdownString } from "./utils";
+import { genMarkdownString } from "./utils";
 
 // this method is called when your extension is activated
 // your extension is activated the very first time the command is executed
@@ -12,8 +12,6 @@ export function activate(context: vscode.ExtensionContext) {
   // This line of code will only be executed once when your extension is activated
   const fullToken = getDesignToken();
 
-  // vscode hover widget only support color style in <span></span>
-  // https://github.com/microsoft/vscode/blob/6d2920473c6f13759c978dd89104c4270a83422d/src/vs/base/browser/markdownRenderer.ts#L296
   vscode.languages.registerHoverProvider(
     [
       "javascript",
@@ -31,7 +29,7 @@ export function activate(context: vscode.ExtensionContext) {
 
         if (fullToken.hasOwnProperty(word as string)) {
           const value = String(fullToken[word as keyof typeof fullToken]);
-          const colorSpan = getMarkdownString(value);
+          const colorSpan = genMarkdownString(value);
 
           const markDownString = new vscode.MarkdownString(
             `<h3>antd design token: ${word}</h3>${colorSpan}<code>${value}</code><br></br>`
@@ -51,20 +49,21 @@ export function activate(context: vscode.ExtensionContext) {
   const items: any[] | undefined = [];
 
   for (let key in fullToken) {
-    const value = fullToken[key as keyof typeof fullToken];
+    const value = String(fullToken[key as keyof typeof fullToken]);
     const item = new vscode.CompletionItem(`${key}: ${value}`, 11);
     item.insertText = key;
     item.filterText = key;
     item.sortText = key;
 
-    const colorSpan = getMarkdownString(value);
-    const markDownString = new vscode.MarkdownString(
+    const colorSpan = genMarkdownString(value);
+    let documentContent: vscode.MarkdownString | string = "";
+
+    documentContent = new vscode.MarkdownString(
       `<h3>antd design token: ${key}</h3>${colorSpan}<code>${value}</code><br></br>`
     );
+    documentContent.supportHtml = true;
 
-    markDownString.supportHtml = true;
-    markDownString.isTrusted = true;
-    item.documentation = markDownString;
+    item.documentation = documentContent;
 
     items.push(item);
   }

src/utils/index.ts

@@ -1,12 +1,15 @@
 import rgbHex from "rgb-hex";
 
 /**
- * Get the MarkdownString for vscode.MarkdownString function
+ * Generate the MarkdownString for vscode.MarkdownString function
  * Note: should convert rgb color to hex
+ *
+ * vscode hover widget only support color style in <span></span>
+ * https://github.com/microsoft/vscode/blob/6d2920473c6f13759c978dd89104c4270a83422d/src/vs/base/browser/markdownRenderer.ts#L296
  * @param value string
  * @returns MarkdownString | string
  */
-export function getMarkdownString(value: string) {
+export function genMarkdownString(value: string): string {
   let hexColor = "";
   if (/#[0-9a-fA-F]+/.test(value)) {
     hexColor = value;