Add Preview Function(#132)

Author: xuzaixian

package.json

@@ -93,6 +93,11 @@
                 "command": "leetcode.showProblem",
                 "title": "Show Problem",
                 "category": "LeetCode"
+            },
+			{
+                "command": "leetcode.previewProblem",
+                "title": "Preview Problem",
+                "category": "LeetCode"
             },
             {
                 "command": "leetcode.searchProblem",
@@ -164,6 +169,11 @@
                     "command": "leetcode.showProblem",
                     "when": "view == leetCodeExplorer && viewItem == problem",
                     "group": "leetcode@1"
+                },
+				{
+                    "command": "leetcode.previewProblem",
+                    "when": "view == leetCodeExplorer && viewItem == problem",
+                    "group": "leetcode@1"
                 }
             ],
             "commandPalette": [

src/commands/show.ts

@@ -8,8 +8,9 @@ import { LeetCodeNode } from "../explorer/LeetCodeNode";
 import { leetCodeChannel } from "../leetCodeChannel";
 import { leetCodeExecutor } from "../leetCodeExecutor";
 import { leetCodeManager } from "../leetCodeManager";
-import { IProblem, IQuickItemEx, languages, ProblemState } from "../shared";
+import { Command, IProblem, IQuickItemEx, IWebViewMessage, languages, ProblemState } from "../shared";
 import { DialogOptions, DialogType, promptForOpenOutputChannel, promptForSignIn } from "../utils/uiUtils";
+import { renderHTML } from "../utils/webviewUtils";
 import { selectWorkspaceFolder } from "../utils/workspaceUtils";
 import * as wsl from "../utils/wslUtils";
 import * as list from "./list";
@@ -135,3 +136,21 @@ async function resolveRelativePath(value: string, node: IProblem, selectedLangua
             throw new Error(errorMsg);
     }
 }
+
+export async function previewProblem(node: IProblem): Promise<void> {
+    const panelType: string = "previewProblem";
+    const panelTitle: string = node.name;
+    const panel: vscode.WebviewPanel = vscode.window.createWebviewPanel(panelType, panelTitle, vscode.ViewColumn.Active, {
+        enableScripts: true,
+        enableCommandUris: true,
+    });
+    panel.webview.onDidReceiveMessage(async (message: IWebViewMessage) => {
+        switch (message.command) {
+            case Command.ShowProblem:
+                await showProblemInternal(node);
+                panel.dispose();
+                return;
+        }
+    });
+    panel.webview.html = await renderHTML(node);
+}

src/explorer/LeetCodeNode.ts

@@ -50,6 +50,14 @@ export class LeetCodeNode {
         return this.parentNodeName;
     }
 
+    public get previewCommand(): Command {
+        return {
+            title: "Preview Problem",
+            command: "leetcode.previewProblem",
+            arguments: [this],
+        };
+    }
+
     public get selectedCommand(): Command {
         return {
             title: "Open Problem",

src/explorer/LeetCodeTreeDataProvider.ts

@@ -52,7 +52,7 @@ export class LeetCodeTreeDataProvider implements vscode.TreeDataProvider<LeetCod
             collapsibleState: element.isProblem ? vscode.TreeItemCollapsibleState.None : vscode.TreeItemCollapsibleState.Collapsed,
             contextValue: element.isProblem ? "problem" : element.id.toLowerCase(),
             iconPath: this.parseIconPathFromProblemState(element),
-            command: element.isProblem ? element.selectedCommand : undefined,
+            command: element.isProblem ? element.previewCommand : undefined,
         };
     }
 

src/extension.ts

@@ -43,6 +43,7 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
         vscode.commands.registerCommand("leetcode.signout", () => leetCodeManager.signOut()),
         vscode.commands.registerCommand("leetcode.selectSessions", () => session.selectSession()),
         vscode.commands.registerCommand("leetcode.createSession", () => session.createSession()),
+        vscode.commands.registerCommand("leetcode.previewProblem", (node: LeetCodeNode) => show.previewProblem(node)),
         vscode.commands.registerCommand("leetcode.showProblem", (node: LeetCodeNode) => show.showProblem(node)),
         vscode.commands.registerCommand("leetcode.searchProblem", () => show.searchProblem()),
         vscode.commands.registerCommand("leetcode.refreshExplorer", () => leetCodeTreeDataProvider.refresh()),

src/leetCodeExecutor.ts

@@ -87,6 +87,10 @@ class LeetCodeExecutor {
         return filePath;
     }
 
+    public async getDescription(node: IProblem): Promise<string> {
+        return await this.executeCommandWithProgressEx("Fetching problem description...", "node", [await this.getLeetCodeBinaryPath(), "show", node.id, "-x"]);
+    }
+
     public async listSessions(): Promise<string> {
         return await this.executeCommandEx("node", [await this.getLeetCodeBinaryPath(), "session"]);
     }

src/shared.ts

@@ -91,3 +91,11 @@ export enum Category {
     Company = "Company",
     Favorite = "Favorite",
 }
+
+export enum Command {
+    ShowProblem = "ShowProblem",
+}
+
+export interface IWebViewMessage {
+    command: string;
+}

src/utils/webviewUtils.ts

@@ -0,0 +1,54 @@
+import { leetCodeExecutor } from "../leetCodeExecutor";
+import { Command, IProblem } from "../shared";
+
+export async function renderHTML(node: IProblem): Promise<string> {
+    const description: string = await leetCodeExecutor.getDescription(node);
+    const descriptionHTML: string = description.replace(/\n/g, "<br>");
+    const htmlTemplate: string = `
+    <!DOCTYPE html>
+    <html>
+        <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>Preview Problem</title>
+        </head>
+        <style>
+            #solve {
+                position: fixed;
+                bottom: 10px;
+                right: 10px;
+                border: 0;
+                margin: 10px 0;
+                padding: 2px 14px;
+                color: white;
+                background-color: rgb(14, 99, 156);
+            }
+            #solve:hover {
+                background-color: rgb(17, 119, 187);
+            }
+            #solve:active {
+                border: 0;
+            }
+        </style>
+        <body>
+            <div >
+                ${ descriptionHTML}
+            </div>
+            <button id="solve">Code Now</button>
+            <script>
+                (function() {
+                    const vscode = acquireVsCodeApi();
+                    let button = document.getElementById('solve');
+                    button.onclick = solveHandler;
+                    function solveHandler() {
+                        vscode.postMessage({
+                            command: '${Command.ShowProblem}',
+                        })
+                    }
+                }())
+            </script>
+        </body>
+    </html>
+    `;
+    return htmlTemplate;
+}