Add Click the tree explorer should open the topic (#132)

package.json

@@ -33,6 +33,7 @@
         "onCommand:leetcode.createSession",
         "onCommand:leetcode.refreshExplorer",
         "onCommand:leetcode.showProblem",
+        "onCommand:leetcode.previewProblem",
         "onCommand:leetcode.searchProblem",
         "onCommand:leetcode.testSolution",
         "onCommand:leetcode.submitSolution",
@@ -94,6 +95,11 @@
                 "title": "Show Problem",
                 "category": "LeetCode"
             },
+            {
+                "command": "leetcode.previewProblem",
+                "title": "Preview Problem",
+                "category": "LeetCode"
+            },
             {
                 "command": "leetcode.searchProblem",
                 "title": "Search Problem",
@@ -164,6 +170,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/explorer/LeetCodeNode.ts

@@ -1,6 +1,7 @@
 // Copyright (c) jdneo. All rights reserved.
 // Licensed under the MIT license.
 
+import { Command } from "vscode";
 import { IProblem, ProblemState } from "../shared";
 
 export class LeetCodeNode {
@@ -48,4 +49,13 @@ export class LeetCodeNode {
     public get parentName(): string {
         return this.parentNodeName;
     }
+
+    public get previewCommand(): Command {
+        return {
+            title: "Preview Problem",
+            command: "leetcode.previewProblem",
+            arguments: [this],
+        };
+    }
+
 }

src/explorer/LeetCodeTreeDataProvider.ts

@@ -52,6 +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.previewCommand : undefined,
         };
     }
 

src/extension.ts

@@ -15,6 +15,7 @@ import { LeetCodeTreeDataProvider } from "./explorer/LeetCodeTreeDataProvider";
 import { leetCodeChannel } from "./leetCodeChannel";
 import { leetCodeExecutor } from "./leetCodeExecutor";
 import { leetCodeManager } from "./leetCodeManager";
+import { leetCodePreviewProvider } from "./leetCodePreviewProvider";
 import { leetCodeResultProvider } from "./leetCodeResultProvider";
 import { leetCodeStatusBarItem } from "./leetCodeStatusBarItem";
 
@@ -29,11 +30,13 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
     });
 
     const leetCodeTreeDataProvider: LeetCodeTreeDataProvider = new LeetCodeTreeDataProvider(context);
+    leetCodePreviewProvider.initialize(context);
     leetCodeResultProvider.initialize(context);
 
     context.subscriptions.push(
         leetCodeStatusBarItem,
         leetCodeChannel,
+        leetCodePreviewProvider,
         leetCodeResultProvider,
         vscode.window.registerTreeDataProvider("leetCodeExplorer", leetCodeTreeDataProvider),
         vscode.languages.registerCodeLensProvider({ scheme: "file" }, codeLensProvider),
@@ -43,6 +46,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) => leetCodePreviewProvider.preview(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/leetcodePreviewProvider.ts

@@ -0,0 +1,52 @@
+import { commands, Disposable, ExtensionContext, ViewColumn, WebviewPanel, window } from "vscode";
+import { IProblem, IWebViewMessage } from "./shared";
+import { renderHTML } from "./utils/webviewUtils";
+
+class LeetCodePreviewProvider implements Disposable {
+
+    private context: ExtensionContext;
+    private panel: WebviewPanel | undefined;
+
+    public initialize(context: ExtensionContext): void {
+        this.context = context;
+    }
+
+    public async preview(node: IProblem): Promise<void> {
+        if (!this.panel) {
+            const panelType: string = "previewProblem";
+            const panelTitle: string = node.name;
+            this.panel = window.createWebviewPanel(panelType, panelTitle, ViewColumn.Active, {
+                enableScripts: true,
+                enableCommandUris: true,
+                enableFindWidget: true,
+                retainContextWhenHidden: true,
+            });
+        }
+
+        this.panel.onDidDispose(() => {
+            this.panel = undefined;
+        }, null, this.context.subscriptions);
+
+        this.panel.webview.onDidReceiveMessage(async (message: IWebViewMessage) => {
+            switch (message.command) {
+                case "ShowProblem":
+                    await commands.executeCommand("leetcode.showProblem", node);
+                    this.dispose();
+                    return;
+            }
+        });
+        this.panel.webview.html = await this.provideHtmlContent(node);
+    }
+
+    public dispose(): void {
+        if (this.panel) {
+            this.panel.dispose();
+        }
+    }
+
+    private async provideHtmlContent(node: IProblem): Promise<string> {
+        return await renderHTML(node);
+    }
+}
+
+export const leetCodePreviewProvider: LeetCodePreviewProvider = new LeetCodePreviewProvider();

src/shared.ts

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

src/utils/webviewUtils.ts

@@ -0,0 +1,54 @@
+import { leetCodeExecutor } from "../leetCodeExecutor";
+import { 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: 1rem;
+                right: 1rem;
+                border: 0;
+                margin: 1rem 0;
+                padding: 0.2rem 1rem;
+                color: white;
+                background-color: var(--vscode-button-background);
+            }
+            #solve:hover {
+                background-color: var(--vscode-button-hoverBackground);
+            }
+            #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: 'ShowProblem',
+                        })
+                    }
+                }())
+            </script>
+        </body>
+    </html>
+    `;
+    return htmlTemplate;
+}