fix: Bring markdown engine into submission provider (LeetCode-OpenSource#398)

Vigilans · jdneo · commit ef4bcbd78443 · 2019-09-22T12:00:24.000+08:00
diff --git a/src/webview/leetCodeSubmissionProvider.ts b/src/webview/leetCodeSubmissionProvider.ts
@@ -9,10 +9,10 @@ import { markdownEngine } from "./markdownEngine";
 class LeetCodeSubmissionProvider extends LeetCodeWebview {
 
     protected readonly viewType: string = "leetcode.submission";
-    private result: string;
+    private result: IResult;
 
-    public show(result: string): void {
-        this.result = result;
+    public show(resultString: string): void {
+        this.result = this.parseResult(resultString);
         this.showWebviewInternal();
         this.showKeybindingsHint();
     }
@@ -25,18 +25,36 @@ class LeetCodeSubmissionProvider extends LeetCodeWebview {
     }
 
     protected getWebviewContent(): string {
-        return `<!DOCTYPE html>
-            <html lang="en">
+        const styles: string = markdownEngine.getStyles();
+        const title: string = `## ${this.result.messages[0]}`;
+        const messages: string[] = this.result.messages.slice(1).map((m: string) => `* ${m}`);
+        const sections: string[] = Object.keys(this.result)
+            .filter((key: string) => key !== "messages")
+            .map((key: string) => [
+                `### ${key}`,
+                "```",
+                this.result[key].join("\n"),
+                "```",
+            ].join("\n"));
+        const body: string = markdownEngine.render([
+            title,
+            ...messages,
+            ...sections,
+        ].join("\n"));
+        return `
+            <!DOCTYPE html>
+            <html>
             <head>
                 <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src https:; script-src vscode-resource:; style-src vscode-resource:;"/>
                 <meta charset="UTF-8">
                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                ${markdownEngine.getStyles()}
+                ${styles}
             </head>
-            <body>
-                <pre><code>${this.result.trim()}</code></pre>
+            <body class="vscode-body 'scrollBeyondLastLine' 'wordWrap' 'showEditorSelection'" style="tab-size:4">
+                ${body}
             </body>
-            </html>`;
+            </html>
+        `;
     }
 
     protected onDidDisposeWebview(): void {
@@ -52,6 +70,38 @@ class LeetCodeSubmissionProvider extends LeetCodeWebview {
             (): Promise<any> => openKeybindingsEditor("leetcode solution"),
         );
     }
+
+    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, value] = kvMatch.slice(1);
+                if (value) { // Do not show empty string
+                    if (!result[key]) {
+                        result[key] = [];
+                    }
+                    result[key].push(value);
+                }
+            } else {
+                result.messages.push(entry[1]);
+            }
+        } while (entry);
+        return result;
+    }
+}
+
+interface IResult {
+    [key: string]: string[];
+    messages: string[];
 }
 
 export const leetCodeSubmissionProvider: LeetCodeSubmissionProvider = new LeetCodeSubmissionProvider();
