Apply markdown engine to result provider (#232)

Vigilans · jdneo · commit 4eefc70b00a1 · 2019-03-27T18:57:24.000+08:00
diff --git a/package.json b/package.json
@@ -321,6 +321,7 @@
     "dependencies": {
         "fs-extra": "^6.0.1",
         "highlight.js": "^9.15.6",
+        "lodash": "^4.17.11",
         "lodash.kebabcase": "^4.1.1",
         "markdown-it": "^8.4.2",
         "require-from-string": "^2.0.2",
diff --git a/src/explorer/LeetCodeTreeDataProvider.ts b/src/explorer/LeetCodeTreeDataProvider.ts
@@ -1,6 +1,7 @@
 // Copyright (c) jdneo. All rights reserved.
 // Licensed under the MIT license.
 
+import * as _ from "lodash";
 import * as os from "os";
 import * as path from "path";
 import * as vscode from "vscode";
@@ -201,10 +202,10 @@ export class LeetCodeTreeDataProvider implements vscode.TreeDataProvider<LeetCod
     private addProblemToTreeData(problem: IProblem): void {
         this.putProblemToMap(this.treeData.Difficulty, problem.difficulty, problem);
         for (const tag of problem.tags) {
-            this.putProblemToMap(this.treeData.Tag, this.beautifyCategoryName(tag), problem);
+            this.putProblemToMap(this.treeData.Tag, _.startCase(tag), problem);
         }
         for (const company of problem.companies) {
-            this.putProblemToMap(this.treeData.Company, this.beautifyCategoryName(company), problem);
+            this.putProblemToMap(this.treeData.Company, _.startCase(company), problem);
         }
     }
 
@@ -217,10 +218,6 @@ export class LeetCodeTreeDataProvider implements vscode.TreeDataProvider<LeetCod
         }
     }
 
-    private beautifyCategoryName(name: string): string {
-        return name.split("-").map((c: string) => c[0].toUpperCase() + c.slice(1)).join(" ");
-    }
-
     private getSubCategoryNodes(map: Map<string, IProblem[]>, category: Category): LeetCodeNode[] {
         const subCategoryNodes: LeetCodeNode[] = Array.from(map.keys()).map((subCategory: string) => {
             return new LeetCodeNode(Object.assign({}, defaultProblem, {
diff --git a/src/webview/leetCodePreviewProvider.ts b/src/webview/leetCodePreviewProvider.ts
@@ -39,7 +39,7 @@ class LeetCodePreviewProvider implements Disposable {
         }
 
         this.panel.webview.html = await this.provideHtmlContent(node);
-        this.panel.title = node.name;
+        this.panel.title = `${node.name}: Preview`;
         this.panel.reveal();
     }
 
diff --git a/src/webview/leetCodeResultProvider.ts b/src/webview/leetCodeResultProvider.ts
@@ -1,7 +1,9 @@
 // Copyright (c) jdneo. All rights reserved.
 // Licensed under the MIT license.
 
+import * as _ from "lodash";
 import { Disposable, ExtensionContext, ViewColumn, WebviewPanel, window } from "vscode";
+import { markdownEngine } from "./markdownEngine";
 
 class LeetCodeResultProvider implements Disposable {
 
@@ -12,19 +14,21 @@ class LeetCodeResultProvider implements Disposable {
         this.context = context;
     }
 
-    public async show(result: string): Promise<void> {
+    public async show(resultString: string): Promise<void> {
         if (!this.panel) {
-            this.panel = window.createWebviewPanel("leetcode.result", "LeetCode Results", ViewColumn.Two, {
+            this.panel = window.createWebviewPanel("leetcode.result", "Submission Result", ViewColumn.Two, {
                 retainContextWhenHidden: true,
                 enableFindWidget: true,
+                localResourceRoots: markdownEngine.localResourceRoots,
             });
 
             this.panel.onDidDispose(() => {
                 this.panel = undefined;
             }, null, this.context.subscriptions);
         }
 
-        this.panel.webview.html = await this.provideHtmlContent(result);
+        const result: IResult = this.parseResult(resultString);
+        this.panel.webview.html = this.getWebViewContent(result);
         this.panel.reveal(ViewColumn.Two);
     }
 
@@ -34,19 +38,67 @@ class LeetCodeResultProvider implements Disposable {
         }
     }
 
-    private async provideHtmlContent(result: string): Promise<string> {
-        return `<!DOCTYPE html>
-            <html lang="en">
+    private parseResult(raw: string): IResult {
+        raw = raw.concat("  √ "); // Append a dummy sentinel to the end of raw string
+        const regSplit: RegExp = /  [√×✔✘vx] ([^]+?)\n(?=  [√×✔✘vx] )/g;
+        const regKeyVal: RegExp = /(.+?): ([^]*)/;
+        const result: IResult = { messages: [] };
+        let entry: RegExpExecArray | null;
+        do {
+            entry = regSplit.exec(raw);
+            if (!entry) {
+                continue;
+            }
+            const kvMatch: RegExpExecArray | null = regKeyVal.exec(entry[1]);
+            if (kvMatch) {
+                const key: string = _.startCase(kvMatch[1]);
+                let value: string = kvMatch[2];
+                if (!result[key]) {
+                    result[key] = [];
+                }
+                if (key === "Testcase") {
+                    value = value.slice(1, -1).replace("\\n", "\n");
+                }
+                result[key].push(value);
+            } else {
+                result.messages.push(entry[1]);
+            }
+        } while (entry);
+        return result;
+    }
+
+    private getWebViewContent(result: IResult): string {
+        const styles: string = markdownEngine.getStylesHTML();
+        const title: string = `## ${result.messages[0]}`;
+        const messages: string[] = result.messages.slice(1).map((m: string) => `* ${m}`);
+        const sections: string[] = Object.keys(result).filter((k: string) => k !== "messages").map((key: string) => [
+            `### ${key}`,
+            "```",
+            result[key].join("\n\n"),
+            "```",
+        ].join("\n"));
+        const body: string = markdownEngine.render([
+            title,
+            ...messages,
+            ...sections,
+        ].join("\n"));
+        return `
+            <!DOCTYPE html>
+            <html>
             <head>
-                <meta charset="UTF-8">
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                <title>LeetCode Results</title>
+                ${styles}
             </head>
-            <body>
-                <pre>${result.trim()}</pre>
+            <body class="vscode-body 'scrollBeyondLastLine' 'wordWrap' 'showEditorSelection'" style="tab-size:4">
+                ${body}
             </body>
-            </html>`;
+            </html>
+        `;
     }
 }
 
+interface IResult {
+    [key: string]: string[];
+    messages: string[];
+}
+
 export const leetCodeResultProvider: LeetCodeResultProvider = new LeetCodeResultProvider();
diff --git a/src/webview/leetCodeSolutionProvider.ts b/src/webview/leetCodeSolutionProvider.ts
@@ -3,36 +3,33 @@
 
 import { Disposable, ExtensionContext, ViewColumn, WebviewPanel, window } from "vscode";
 import { IProblem } from "../shared";
-import { MarkdownEngine } from "./MarkdownEngine";
+import { markdownEngine } from "./markdownEngine";
 
 class LeetCodeSolutionProvider implements Disposable {
 
     private context: ExtensionContext;
     private panel: WebviewPanel | undefined;
-    private mdEngine: MarkdownEngine;
-    private solution: Solution;
 
     public initialize(context: ExtensionContext): void {
         this.context = context;
-        this.mdEngine = new MarkdownEngine();
     }
 
     public async show(solutionString: string, problem: IProblem): Promise<void> {
         if (!this.panel) {
             this.panel = window.createWebviewPanel("leetCode.solution", "Top Voted Solution", ViewColumn.Active, {
                 retainContextWhenHidden: true,
                 enableFindWidget: true,
-                localResourceRoots: this.mdEngine.localResourceRoots,
+                localResourceRoots: markdownEngine.localResourceRoots,
             });
 
             this.panel.onDidDispose(() => {
                 this.panel = undefined;
             }, null, this.context.subscriptions);
         }
 
-        this.solution = this.parseSolution(solutionString);
-        this.panel.title = problem.name;
-        this.panel.webview.html = this.getWebViewContent(this.solution);
+        const solution: Solution = this.parseSolution(solutionString);
+        this.panel.title = `${problem.name}: Solution`;
+        this.panel.webview.html = this.getWebViewContent(solution);
         this.panel.reveal(ViewColumn.Active);
     }
 
@@ -56,17 +53,17 @@ class LeetCodeSolutionProvider implements Disposable {
     }
 
     private getWebViewContent(solution: Solution): string {
-        const styles: string = this.mdEngine.getStylesHTML();
+        const styles: string = markdownEngine.getStylesHTML();
         const { title, url, lang, author, votes } = solution;
-        const head: string = this.mdEngine.render(`# [${title}](${url})`);
+        const head: string = markdownEngine.render(`# [${title}](${url})`);
         const auth: string = `[${author}](https://leetcode.com/${author}/)`;
-        const info: string = this.mdEngine.render([
+        const info: string = markdownEngine.render([
             `| Language |  Author  |  Votes   |`,
             `| :------: | :------: | :------: |`,
             `| ${lang}  | ${auth}  | ${votes} |`,
         ].join("\n"));
-        const body: string = this.mdEngine.render(solution.body, {
-            lang: this.solution.lang,
+        const body: string = markdownEngine.render(solution.body, {
+            lang: solution.lang,
             host: "https://discuss.leetcode.com/",
         });
         return `
diff --git a/src/webview/markdownEngine.ts b/src/webview/markdownEngine.ts
@@ -8,7 +8,7 @@ import * as path from "path";
 import * as vscode from "vscode";
 import { leetCodeChannel } from "../leetCodeChannel";
 
-export class MarkdownEngine {
+class MarkdownEngine {
 
     private readonly engine: MarkdownIt;
     private readonly extRoot: string; // root path of vscode built-in markdown extension
@@ -106,3 +106,5 @@ export class MarkdownEngine {
         };
     }
 }
+
+export const markdownEngine: MarkdownEngine = new MarkdownEngine();

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`// Copyright (c) jdneo. All rights reserved.`
`2`	`2`	`// Licensed under the MIT license.`
`3`	`3`
	`4`	`+import * as _ from "lodash";`
`4`	`5`	`import * as os from "os";`
`5`	`6`	`import * as path from "path";`
`6`	`7`	`import * as vscode from "vscode";`
`@@ -201,10 +202,10 @@ export class LeetCodeTreeDataProvider implements vscode.TreeDataProvider<LeetCod`
`201`	`202`	`private addProblemToTreeData(problem: IProblem): void {`
`202`	`203`	`this.putProblemToMap(this.treeData.Difficulty, problem.difficulty, problem);`
`203`	`204`	`for (const tag of problem.tags) {`
`204`		`- this.putProblemToMap(this.treeData.Tag, this.beautifyCategoryName(tag), problem);`
	`205`	`+ this.putProblemToMap(this.treeData.Tag, _.startCase(tag), problem);`
`205`	`206`	`}`
`206`	`207`	`for (const company of problem.companies) {`
`207`		`- this.putProblemToMap(this.treeData.Company, this.beautifyCategoryName(company), problem);`
	`208`	`+ this.putProblemToMap(this.treeData.Company, _.startCase(company), problem);`
`208`	`209`	`}`
`209`	`210`	`}`
`210`	`211`
`@@ -217,10 +218,6 @@ export class LeetCodeTreeDataProvider implements vscode.TreeDataProvider<LeetCod`
`217`	`218`	`}`
`218`	`219`	`}`
`219`	`220`
`220`		`- private beautifyCategoryName(name: string): string {`
`221`		`- return name.split("-").map((c: string) => c[0].toUpperCase() + c.slice(1)).join(" ");`
`222`		`- }`
`223`		`-`
`224`	`221`	`private getSubCategoryNodes(map: Map<string, IProblem[]>, category: Category): LeetCodeNode[] {`
`225`	`222`	`const subCategoryNodes: LeetCodeNode[] = Array.from(map.keys()).map((subCategory: string) => {`
`226`	`223`	`return new LeetCodeNode(Object.assign({}, defaultProblem, {`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ class LeetCodePreviewProvider implements Disposable {`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`this.panel.webview.html = await this.provideHtmlContent(node);`
`42`		`- this.panel.title = node.name;`
	`42`	+ this.panel.title = `${node.name}: Preview`;
`43`	`43`	`this.panel.reveal();`
`44`	`44`	`}`
`45`	`45`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ import * as path from "path";`
`8`	`8`	`import * as vscode from "vscode";`
`9`	`9`	`import { leetCodeChannel } from "../leetCodeChannel";`
`10`	`10`
`11`		`-export class MarkdownEngine {`
	`11`	`+class MarkdownEngine {`
`12`	`12`
`13`	`13`	`private readonly engine: MarkdownIt;`
`14`	`14`	`private readonly extRoot: string; // root path of vscode built-in markdown extension`
`@@ -106,3 +106,5 @@ export class MarkdownEngine {`
`106`	`106`	`};`
`107`	`107`	`}`
`108`	`108`	`}`
	`109`	`+`
	`110`	`+export const markdownEngine: MarkdownEngine = new MarkdownEngine();`