From 8f85142db2fd73c43389ae59c47a4f178febbe13 Mon Sep 17 00:00:00 2001
From: Carlos Perez-Guerra <karlitoffel01@yahoo.com>
Date: Tue, 26 Oct 2021 08:52:43 +0200
Subject: [PATCH 1/5] Update parseDescription

---
 src/webview/leetCodePreviewProvider.ts | 294 +++++++++++++------------
 1 file changed, 154 insertions(+), 140 deletions(-)

diff --git a/src/webview/leetCodePreviewProvider.ts b/src/webview/leetCodePreviewProvider.ts
index 78b4099..27479c5 100644
--- a/src/webview/leetCodePreviewProvider.ts
+++ b/src/webview/leetCodePreviewProvider.ts
@@ -8,51 +8,54 @@ import { ILeetCodeWebviewOption, LeetCodeWebview } from "./LeetCodeWebview";
 import { markdownEngine } from "./markdownEngine";
 
 class LeetCodePreviewProvider extends LeetCodeWebview {
-
-    protected readonly viewType: string = "leetcode.preview";
-    private node: IProblem;
-    private description: IDescription;
-    private sideMode: boolean = false;
-
-    public isSideMode(): boolean {
-        return this.sideMode;
-    }
-
-    public show(descString: string, node: IProblem, isSideMode: boolean = false): void {
-        this.description = this.parseDescription(descString, node);
-        this.node = node;
-        this.sideMode = isSideMode;
-        this.showWebviewInternal();
-        // Comment out this operation since it sometimes may cause the webview become empty.
-        // Waiting for the progress of the VS Code side issue: https://github.com/microsoft/vscode/issues/3742
-        // if (this.sideMode) {
-        //     this.hideSideBar(); // For better view area
-        // }
-    }
-
-    protected getWebviewOption(): ILeetCodeWebviewOption {
-        if (!this.sideMode) {
-            return {
-                title: `${this.node.name}: Preview`,
-                viewColumn: ViewColumn.One,
-            };
-        } else {
-            return {
-                title: "Description",
-                viewColumn: ViewColumn.Two,
-                preserveFocus: true,
-            };
-        }
+  protected readonly viewType: string = "leetcode.preview";
+  private node: IProblem;
+  private description: IDescription;
+  private sideMode: boolean = false;
+
+  public isSideMode(): boolean {
+    return this.sideMode;
+  }
+
+  public show(
+    descString: string,
+    node: IProblem,
+    isSideMode: boolean = false
+  ): void {
+    this.description = this.parseDescription(descString, node);
+    this.node = node;
+    this.sideMode = isSideMode;
+    this.showWebviewInternal();
+    // Comment out this operation since it sometimes may cause the webview become empty.
+    // Waiting for the progress of the VS Code side issue: https://github.com/microsoft/vscode/issues/3742
+    // if (this.sideMode) {
+    //     this.hideSideBar(); // For better view area
+    // }
+  }
+
+  protected getWebviewOption(): ILeetCodeWebviewOption {
+    if (!this.sideMode) {
+      return {
+        title: `${this.node.name}: Preview`,
+        viewColumn: ViewColumn.One,
+      };
+    } else {
+      return {
+        title: "Description",
+        viewColumn: ViewColumn.Two,
+        preserveFocus: true,
+      };
     }
+  }
 
-    protected getWebviewContent(): string {
-        const button: { element: string, script: string, style: string } = {
-            element: `<button id="solve">Code Now</button>`,
-            script: `const button = document.getElementById('solve');
+  protected getWebviewContent(): string {
+    const button: { element: string; script: string; style: string } = {
+      element: `<button id="solve">Code Now</button>`,
+      script: `const button = document.getElementById('solve');
                     button.onclick = () => vscode.postMessage({
                         command: 'ShowProblem',
                     });`,
-            style: `<style>
+      style: `<style>
                 #solve {
                     position: fixed;
                     bottom: 1rem;
@@ -70,36 +73,41 @@ class LeetCodePreviewProvider extends LeetCodeWebview {
                     border: 0;
                 }
                 </style>`,
-        };
-        const { title, url, category, difficulty, likes, dislikes, body } = this.description;
-        const head: string = markdownEngine.render(`# [${title}](${url})`);
-        const info: string = markdownEngine.render([
-            `| Category | Difficulty | Likes | Dislikes |`,
-            `| :------: | :--------: | :---: | :------: |`,
-            `| ${category} | ${difficulty} | ${likes} | ${dislikes} |`,
-        ].join("\n"));
-        const tags: string = [
-            `<details>`,
-            `<summary><strong>Tags</strong></summary>`,
-            markdownEngine.render(
-                this.description.tags
-                    .map((t: string) => `[\`${t}\`](https://leetcode.com/tag/${t})`)
-                    .join(" | "),
-            ),
-            `</details>`,
-        ].join("\n");
-        const companies: string = [
-            `<details>`,
-            `<summary><strong>Companies</strong></summary>`,
-            markdownEngine.render(
-                this.description.companies
-                    .map((c: string) => `\`${c}\``)
-                    .join(" | "),
-            ),
-            `</details>`,
-        ].join("\n");
-        const links: string = markdownEngine.render(`[Discussion](${this.getDiscussionLink(url)}) | [Solution](${this.getSolutionLink(url)})`);
-        return `
+    };
+    const { title, url, category, difficulty, likes, dislikes, body } =
+      this.description;
+    const head: string = markdownEngine.render(`# [${title}](${url})`);
+    const info: string = markdownEngine.render(
+      [
+        `| Category | Difficulty | Likes | Dislikes |`,
+        `| :------: | :--------: | :---: | :------: |`,
+        `| ${category} | ${difficulty} | ${likes} | ${dislikes} |`,
+      ].join("\n")
+    );
+    const tags: string = [
+      `<details>`,
+      `<summary><strong>Tags</strong></summary>`,
+      markdownEngine.render(
+        this.description.tags
+          .map((t: string) => `[\`${t}\`](https://leetcode.com/tag/${t})`)
+          .join(" | ")
+      ),
+      `</details>`,
+    ].join("\n");
+    const companies: string = [
+      `<details>`,
+      `<summary><strong>Companies</strong></summary>`,
+      markdownEngine.render(
+        this.description.companies.map((c: string) => `\`${c}\``).join(" | ")
+      ),
+      `</details>`,
+    ].join("\n");
+    const links: string = markdownEngine.render(
+      `[Discussion](${this.getDiscussionLink(
+        url
+      )}) | [Solution](${this.getSolutionLink(url)})`
+    );
+    return `
             <!DOCTYPE html>
             <html>
             <head>
@@ -126,85 +134,91 @@ class LeetCodePreviewProvider extends LeetCodeWebview {
             </body>
             </html>
         `;
+  }
+
+  protected onDidDisposeWebview(): void {
+    super.onDidDisposeWebview();
+    this.sideMode = false;
+  }
+
+  protected async onDidReceiveMessage(message: IWebViewMessage): Promise<void> {
+    switch (message.command) {
+      case "ShowProblem": {
+        await commands.executeCommand("leetcode.showProblem", this.node);
+        break;
+      }
     }
-
-    protected onDidDisposeWebview(): void {
-        super.onDidDisposeWebview();
-        this.sideMode = false;
+  }
+
+  // private async hideSideBar(): Promise<void> {
+  //     await commands.executeCommand("workbench.action.focusSideBar");
+  //     await commands.executeCommand("workbench.action.toggleSidebarVisibility");
+  // }
+
+  private parseDescription(descString, problem) {
+    // Parse body by looking for the first html tag
+    const bodyStartIdx = descString.search(/<.*>/);
+    const bodyRaw = descString.substring(bodyStartIdx);
+
+    const { name: title, tags, companies } = problem;
+    return {
+      title,
+      tags,
+      companies,
+      url: descString.match(/https:.*leetcode.*/)?.[0] || "??",
+      category: descString.match(/\*.*/)?.[0]?.slice(2) || "??", // Category is the first element in list
+      difficulty: descString.match(/.*\%.*/)?.[0]?.slice(2) || "??", // Difficulty is the first element in list with a percentage sign
+      likes:
+        descString
+          .match(/Likes.*?\n/)?.[0]
+          ?.split(": ")[1]
+          ?.trim() || "0",
+      dislikes:
+        descString
+          .match(/Dislikes.*?\n/)?.[0]
+          ?.split(": ")[1]
+          ?.trim() || "0",
+      body: bodyRaw.replace(
+        /<pre>[\r\n]*([^]+?)[\r\n]*<\/pre>/g,
+        "<pre><code>$1</code></pre>"
+      ),
+    };
+  }
+
+  private getDiscussionLink(url: string): string {
+    const endPoint: string = getLeetCodeEndpoint();
+    if (endPoint === Endpoint.LeetCodeCN) {
+      return url.replace("/description/", "/comments/");
+    } else if (endPoint === Endpoint.LeetCode) {
+      return url.replace(
+        "/description/",
+        "/discuss/?currentPage=1&orderBy=most_votes&query="
+      );
     }
 
-    protected async onDidReceiveMessage(message: IWebViewMessage): Promise<void> {
-        switch (message.command) {
-            case "ShowProblem": {
-                await commands.executeCommand("leetcode.showProblem", this.node);
-                break;
-            }
-        }
-    }
+    return "https://leetcode.com";
+  }
 
-    // private async hideSideBar(): Promise<void> {
-    //     await commands.executeCommand("workbench.action.focusSideBar");
-    //     await commands.executeCommand("workbench.action.toggleSidebarVisibility");
-    // }
-
-    private parseDescription(descString: string, problem: IProblem): IDescription {
-        const [
-            /* title */, ,
-            url, ,
-            /* tags */, ,
-            /* langs */, ,
-            category,
-            difficulty,
-            likes,
-            dislikes,
-            /* accepted */,
-            /* submissions */,
-            /* testcase */, ,
-            ...body
-        ] = descString.split("\n");
-        return {
-            title: problem.name,
-            url,
-            tags: problem.tags,
-            companies: problem.companies,
-            category: category.slice(2),
-            difficulty: difficulty.slice(2),
-            likes: likes.split(": ")[1].trim(),
-            dislikes: dislikes.split(": ")[1].trim(),
-            body: body.join("\n").replace(/<pre>[\r\n]*([^]+?)[\r\n]*<\/pre>/g, "<pre><code>$1</code></pre>"),
-        };
-    }
-
-    private getDiscussionLink(url: string): string {
-        const endPoint: string = getLeetCodeEndpoint();
-        if (endPoint === Endpoint.LeetCodeCN) {
-            return url.replace("/description/", "/comments/");
-        } else if (endPoint === Endpoint.LeetCode) {
-            return url.replace("/description/", "/discuss/?currentPage=1&orderBy=most_votes&query=");
-        }
-
-        return "https://leetcode.com";
-    }
-
-    private getSolutionLink(url: string): string {
-        return url.replace("/description/", "/solution/");
-    }
+  private getSolutionLink(url: string): string {
+    return url.replace("/description/", "/solution/");
+  }
 }
 
 interface IDescription {
-    title: string;
-    url: string;
-    tags: string[];
-    companies: string[];
-    category: string;
-    difficulty: string;
-    likes: string;
-    dislikes: string;
-    body: string;
+  title: string;
+  url: string;
+  tags: string[];
+  companies: string[];
+  category: string;
+  difficulty: string;
+  likes: string;
+  dislikes: string;
+  body: string;
 }
 
 interface IWebViewMessage {
-    command: string;
+  command: string;
 }
 
-export const leetCodePreviewProvider: LeetCodePreviewProvider = new LeetCodePreviewProvider();
+export const leetCodePreviewProvider: LeetCodePreviewProvider =
+  new LeetCodePreviewProvider();

From 811f8496472290fb5fcdab240d0f79475c02607e Mon Sep 17 00:00:00 2001
From: Carlos Perez-Guerra <karlitoffel01@yahoo.com>
Date: Tue, 26 Oct 2021 08:55:43 +0200
Subject: [PATCH 2/5] Fix formatting

---
 src/webview/leetCodePreviewProvider.ts | 296 ++++++++++++-------------
 1 file changed, 142 insertions(+), 154 deletions(-)

diff --git a/src/webview/leetCodePreviewProvider.ts b/src/webview/leetCodePreviewProvider.ts
index 27479c5..910962d 100644
--- a/src/webview/leetCodePreviewProvider.ts
+++ b/src/webview/leetCodePreviewProvider.ts
@@ -8,54 +8,51 @@ import { ILeetCodeWebviewOption, LeetCodeWebview } from "./LeetCodeWebview";
 import { markdownEngine } from "./markdownEngine";
 
 class LeetCodePreviewProvider extends LeetCodeWebview {
-  protected readonly viewType: string = "leetcode.preview";
-  private node: IProblem;
-  private description: IDescription;
-  private sideMode: boolean = false;
-
-  public isSideMode(): boolean {
-    return this.sideMode;
-  }
-
-  public show(
-    descString: string,
-    node: IProblem,
-    isSideMode: boolean = false
-  ): void {
-    this.description = this.parseDescription(descString, node);
-    this.node = node;
-    this.sideMode = isSideMode;
-    this.showWebviewInternal();
-    // Comment out this operation since it sometimes may cause the webview become empty.
-    // Waiting for the progress of the VS Code side issue: https://github.com/microsoft/vscode/issues/3742
-    // if (this.sideMode) {
-    //     this.hideSideBar(); // For better view area
-    // }
-  }
-
-  protected getWebviewOption(): ILeetCodeWebviewOption {
-    if (!this.sideMode) {
-      return {
-        title: `${this.node.name}: Preview`,
-        viewColumn: ViewColumn.One,
-      };
-    } else {
-      return {
-        title: "Description",
-        viewColumn: ViewColumn.Two,
-        preserveFocus: true,
-      };
+
+    protected readonly viewType: string = "leetcode.preview";
+    private node: IProblem;
+    private description: IDescription;
+    private sideMode: boolean = false;
+
+    public isSideMode(): boolean {
+        return this.sideMode;
+    }
+
+    public show(descString: string, node: IProblem, isSideMode: boolean = false): void {
+        this.description = this.parseDescription(descString, node);
+        this.node = node;
+        this.sideMode = isSideMode;
+        this.showWebviewInternal();
+        // Comment out this operation since it sometimes may cause the webview become empty.
+        // Waiting for the progress of the VS Code side issue: https://github.com/microsoft/vscode/issues/3742
+        // if (this.sideMode) {
+        //     this.hideSideBar(); // For better view area
+        // }
     }
-  }
 
-  protected getWebviewContent(): string {
-    const button: { element: string; script: string; style: string } = {
-      element: `<button id="solve">Code Now</button>`,
-      script: `const button = document.getElementById('solve');
+    protected getWebviewOption(): ILeetCodeWebviewOption {
+        if (!this.sideMode) {
+            return {
+                title: `${this.node.name}: Preview`,
+                viewColumn: ViewColumn.One,
+            };
+        } else {
+            return {
+                title: "Description",
+                viewColumn: ViewColumn.Two,
+                preserveFocus: true,
+            };
+        }
+    }
+
+    protected getWebviewContent(): string {
+        const button: { element: string, script: string, style: string } = {
+            element: `<button id="solve">Code Now</button>`,
+            script: `const button = document.getElementById('solve');
                     button.onclick = () => vscode.postMessage({
                         command: 'ShowProblem',
                     });`,
-      style: `<style>
+            style: `<style>
                 #solve {
                     position: fixed;
                     bottom: 1rem;
@@ -73,41 +70,36 @@ class LeetCodePreviewProvider extends LeetCodeWebview {
                     border: 0;
                 }
                 </style>`,
-    };
-    const { title, url, category, difficulty, likes, dislikes, body } =
-      this.description;
-    const head: string = markdownEngine.render(`# [${title}](${url})`);
-    const info: string = markdownEngine.render(
-      [
-        `| Category | Difficulty | Likes | Dislikes |`,
-        `| :------: | :--------: | :---: | :------: |`,
-        `| ${category} | ${difficulty} | ${likes} | ${dislikes} |`,
-      ].join("\n")
-    );
-    const tags: string = [
-      `<details>`,
-      `<summary><strong>Tags</strong></summary>`,
-      markdownEngine.render(
-        this.description.tags
-          .map((t: string) => `[\`${t}\`](https://leetcode.com/tag/${t})`)
-          .join(" | ")
-      ),
-      `</details>`,
-    ].join("\n");
-    const companies: string = [
-      `<details>`,
-      `<summary><strong>Companies</strong></summary>`,
-      markdownEngine.render(
-        this.description.companies.map((c: string) => `\`${c}\``).join(" | ")
-      ),
-      `</details>`,
-    ].join("\n");
-    const links: string = markdownEngine.render(
-      `[Discussion](${this.getDiscussionLink(
-        url
-      )}) | [Solution](${this.getSolutionLink(url)})`
-    );
-    return `
+        };
+        const { title, url, category, difficulty, likes, dislikes, body } = this.description;
+        const head: string = markdownEngine.render(`# [${title}](${url})`);
+        const info: string = markdownEngine.render([
+            `| Category | Difficulty | Likes | Dislikes |`,
+            `| :------: | :--------: | :---: | :------: |`,
+            `| ${category} | ${difficulty} | ${likes} | ${dislikes} |`,
+        ].join("\n"));
+        const tags: string = [
+            `<details>`,
+            `<summary><strong>Tags</strong></summary>`,
+            markdownEngine.render(
+                this.description.tags
+                    .map((t: string) => `[\`${t}\`](https://leetcode.com/tag/${t})`)
+                    .join(" | "),
+            ),
+            `</details>`,
+        ].join("\n");
+        const companies: string = [
+            `<details>`,
+            `<summary><strong>Companies</strong></summary>`,
+            markdownEngine.render(
+                this.description.companies
+                    .map((c: string) => `\`${c}\``)
+                    .join(" | "),
+            ),
+            `</details>`,
+        ].join("\n");
+        const links: string = markdownEngine.render(`[Discussion](${this.getDiscussionLink(url)}) | [Solution](${this.getSolutionLink(url)})`);
+        return `
             <!DOCTYPE html>
             <html>
             <head>
@@ -134,91 +126,87 @@ class LeetCodePreviewProvider extends LeetCodeWebview {
             </body>
             </html>
         `;
-  }
-
-  protected onDidDisposeWebview(): void {
-    super.onDidDisposeWebview();
-    this.sideMode = false;
-  }
-
-  protected async onDidReceiveMessage(message: IWebViewMessage): Promise<void> {
-    switch (message.command) {
-      case "ShowProblem": {
-        await commands.executeCommand("leetcode.showProblem", this.node);
-        break;
-      }
     }
-  }
-
-  // private async hideSideBar(): Promise<void> {
-  //     await commands.executeCommand("workbench.action.focusSideBar");
-  //     await commands.executeCommand("workbench.action.toggleSidebarVisibility");
-  // }
-
-  private parseDescription(descString, problem) {
-    // Parse body by looking for the first html tag
-    const bodyStartIdx = descString.search(/<.*>/);
-    const bodyRaw = descString.substring(bodyStartIdx);
-
-    const { name: title, tags, companies } = problem;
-    return {
-      title,
-      tags,
-      companies,
-      url: descString.match(/https:.*leetcode.*/)?.[0] || "??",
-      category: descString.match(/\*.*/)?.[0]?.slice(2) || "??", // Category is the first element in list
-      difficulty: descString.match(/.*\%.*/)?.[0]?.slice(2) || "??", // Difficulty is the first element in list with a percentage sign
-      likes:
-        descString
-          .match(/Likes.*?\n/)?.[0]
-          ?.split(": ")[1]
-          ?.trim() || "0",
-      dislikes:
-        descString
-          .match(/Dislikes.*?\n/)?.[0]
-          ?.split(": ")[1]
-          ?.trim() || "0",
-      body: bodyRaw.replace(
-        /<pre>[\r\n]*([^]+?)[\r\n]*<\/pre>/g,
-        "<pre><code>$1</code></pre>"
-      ),
-    };
-  }
-
-  private getDiscussionLink(url: string): string {
-    const endPoint: string = getLeetCodeEndpoint();
-    if (endPoint === Endpoint.LeetCodeCN) {
-      return url.replace("/description/", "/comments/");
-    } else if (endPoint === Endpoint.LeetCode) {
-      return url.replace(
-        "/description/",
-        "/discuss/?currentPage=1&orderBy=most_votes&query="
-      );
+
+    protected onDidDisposeWebview(): void {
+        super.onDidDisposeWebview();
+        this.sideMode = false;
     }
 
-    return "https://leetcode.com";
-  }
+    protected async onDidReceiveMessage(message: IWebViewMessage): Promise<void> {
+        switch (message.command) {
+            case "ShowProblem": {
+                await commands.executeCommand("leetcode.showProblem", this.node);
+                break;
+            }
+        }
+    }
+
+    // private async hideSideBar(): Promise<void> {
+    //     await commands.executeCommand("workbench.action.focusSideBar");
+    //     await commands.executeCommand("workbench.action.toggleSidebarVisibility");
+    // }
+
+    private parseDescription(descString, problem) {
+        // Parse body by looking for the first html tag
+        const bodyStartIdx = descString.search(/<.*>/);
+        const bodyRaw = descString.substring(bodyStartIdx);
+
+        const { name: title, tags, companies } = problem;
+        return {
+          title,
+          tags,
+          companies,
+          url: descString.match(/https:.*leetcode.*/)?.[0] || "??",
+          category: descString.match(/\*.*/)?.[0]?.slice(2) || "??", // Category is the first element in list
+          difficulty: descString.match(/.*\%.*/)?.[0]?.slice(2) || "??", // Difficulty is the first element in list with a percentage sign
+          likes:
+            descString
+              .match(/Likes.*?\n/)?.[0]
+              ?.split(": ")[1]
+              ?.trim() || "0",
+          dislikes:
+            descString
+              .match(/Dislikes.*?\n/)?.[0]
+              ?.split(": ")[1]
+              ?.trim() || "0",
+          body: bodyRaw.replace(
+            /<pre>[\r\n]*([^]+?)[\r\n]*<\/pre>/g,
+            "<pre><code>$1</code></pre>"
+          ),
+        };
+      }
+    private getDiscussionLink(url: string): string {
+        const endPoint: string = getLeetCodeEndpoint();
+        if (endPoint === Endpoint.LeetCodeCN) {
+            return url.replace("/description/", "/comments/");
+        } else if (endPoint === Endpoint.LeetCode) {
+            return url.replace("/description/", "/discuss/?currentPage=1&orderBy=most_votes&query=");
+        }
+
+        return "https://leetcode.com";
+    }
 
-  private getSolutionLink(url: string): string {
-    return url.replace("/description/", "/solution/");
-  }
+    private getSolutionLink(url: string): string {
+        return url.replace("/description/", "/solution/");
+    }
 }
 
 interface IDescription {
-  title: string;
-  url: string;
-  tags: string[];
-  companies: string[];
-  category: string;
-  difficulty: string;
-  likes: string;
-  dislikes: string;
-  body: string;
+    title: string;
+    url: string;
+    tags: string[];
+    companies: string[];
+    category: string;
+    difficulty: string;
+    likes: string;
+    dislikes: string;
+    body: string;
 }
 
 interface IWebViewMessage {
-  command: string;
+    command: string;
 }
 
-export const leetCodePreviewProvider: LeetCodePreviewProvider =
-  new LeetCodePreviewProvider();
+export const leetCodePreviewProvider: LeetCodePreviewProvider = new LeetCodePreviewProvider();
+

From 55e55175c112f89a8900cc396a77af55650e22c4 Mon Sep 17 00:00:00 2001
From: Carlos Perez-Guerra <karlitoffel01@yahoo.com>
Date: Tue, 26 Oct 2021 08:57:09 +0200
Subject: [PATCH 3/5] Move comments so they are on their own line

---
 src/webview/leetCodePreviewProvider.ts | 297 +++++++++++++------------
 1 file changed, 156 insertions(+), 141 deletions(-)

diff --git a/src/webview/leetCodePreviewProvider.ts b/src/webview/leetCodePreviewProvider.ts
index 910962d..3c9f2f3 100644
--- a/src/webview/leetCodePreviewProvider.ts
+++ b/src/webview/leetCodePreviewProvider.ts
@@ -8,51 +8,54 @@ import { ILeetCodeWebviewOption, LeetCodeWebview } from "./LeetCodeWebview";
 import { markdownEngine } from "./markdownEngine";
 
 class LeetCodePreviewProvider extends LeetCodeWebview {
-
-    protected readonly viewType: string = "leetcode.preview";
-    private node: IProblem;
-    private description: IDescription;
-    private sideMode: boolean = false;
-
-    public isSideMode(): boolean {
-        return this.sideMode;
-    }
-
-    public show(descString: string, node: IProblem, isSideMode: boolean = false): void {
-        this.description = this.parseDescription(descString, node);
-        this.node = node;
-        this.sideMode = isSideMode;
-        this.showWebviewInternal();
-        // Comment out this operation since it sometimes may cause the webview become empty.
-        // Waiting for the progress of the VS Code side issue: https://github.com/microsoft/vscode/issues/3742
-        // if (this.sideMode) {
-        //     this.hideSideBar(); // For better view area
-        // }
-    }
-
-    protected getWebviewOption(): ILeetCodeWebviewOption {
-        if (!this.sideMode) {
-            return {
-                title: `${this.node.name}: Preview`,
-                viewColumn: ViewColumn.One,
-            };
-        } else {
-            return {
-                title: "Description",
-                viewColumn: ViewColumn.Two,
-                preserveFocus: true,
-            };
-        }
+  protected readonly viewType: string = "leetcode.preview";
+  private node: IProblem;
+  private description: IDescription;
+  private sideMode: boolean = false;
+
+  public isSideMode(): boolean {
+    return this.sideMode;
+  }
+
+  public show(
+    descString: string,
+    node: IProblem,
+    isSideMode: boolean = false
+  ): void {
+    this.description = this.parseDescription(descString, node);
+    this.node = node;
+    this.sideMode = isSideMode;
+    this.showWebviewInternal();
+    // Comment out this operation since it sometimes may cause the webview become empty.
+    // Waiting for the progress of the VS Code side issue: https://github.com/microsoft/vscode/issues/3742
+    // if (this.sideMode) {
+    //     this.hideSideBar(); // For better view area
+    // }
+  }
+
+  protected getWebviewOption(): ILeetCodeWebviewOption {
+    if (!this.sideMode) {
+      return {
+        title: `${this.node.name}: Preview`,
+        viewColumn: ViewColumn.One,
+      };
+    } else {
+      return {
+        title: "Description",
+        viewColumn: ViewColumn.Two,
+        preserveFocus: true,
+      };
     }
+  }
 
-    protected getWebviewContent(): string {
-        const button: { element: string, script: string, style: string } = {
-            element: `<button id="solve">Code Now</button>`,
-            script: `const button = document.getElementById('solve');
+  protected getWebviewContent(): string {
+    const button: { element: string; script: string; style: string } = {
+      element: `<button id="solve">Code Now</button>`,
+      script: `const button = document.getElementById('solve');
                     button.onclick = () => vscode.postMessage({
                         command: 'ShowProblem',
                     });`,
-            style: `<style>
+      style: `<style>
                 #solve {
                     position: fixed;
                     bottom: 1rem;
@@ -70,36 +73,41 @@ class LeetCodePreviewProvider extends LeetCodeWebview {
                     border: 0;
                 }
                 </style>`,
-        };
-        const { title, url, category, difficulty, likes, dislikes, body } = this.description;
-        const head: string = markdownEngine.render(`# [${title}](${url})`);
-        const info: string = markdownEngine.render([
-            `| Category | Difficulty | Likes | Dislikes |`,
-            `| :------: | :--------: | :---: | :------: |`,
-            `| ${category} | ${difficulty} | ${likes} | ${dislikes} |`,
-        ].join("\n"));
-        const tags: string = [
-            `<details>`,
-            `<summary><strong>Tags</strong></summary>`,
-            markdownEngine.render(
-                this.description.tags
-                    .map((t: string) => `[\`${t}\`](https://leetcode.com/tag/${t})`)
-                    .join(" | "),
-            ),
-            `</details>`,
-        ].join("\n");
-        const companies: string = [
-            `<details>`,
-            `<summary><strong>Companies</strong></summary>`,
-            markdownEngine.render(
-                this.description.companies
-                    .map((c: string) => `\`${c}\``)
-                    .join(" | "),
-            ),
-            `</details>`,
-        ].join("\n");
-        const links: string = markdownEngine.render(`[Discussion](${this.getDiscussionLink(url)}) | [Solution](${this.getSolutionLink(url)})`);
-        return `
+    };
+    const { title, url, category, difficulty, likes, dislikes, body } =
+      this.description;
+    const head: string = markdownEngine.render(`# [${title}](${url})`);
+    const info: string = markdownEngine.render(
+      [
+        `| Category | Difficulty | Likes | Dislikes |`,
+        `| :------: | :--------: | :---: | :------: |`,
+        `| ${category} | ${difficulty} | ${likes} | ${dislikes} |`,
+      ].join("\n")
+    );
+    const tags: string = [
+      `<details>`,
+      `<summary><strong>Tags</strong></summary>`,
+      markdownEngine.render(
+        this.description.tags
+          .map((t: string) => `[\`${t}\`](https://leetcode.com/tag/${t})`)
+          .join(" | ")
+      ),
+      `</details>`,
+    ].join("\n");
+    const companies: string = [
+      `<details>`,
+      `<summary><strong>Companies</strong></summary>`,
+      markdownEngine.render(
+        this.description.companies.map((c: string) => `\`${c}\``).join(" | ")
+      ),
+      `</details>`,
+    ].join("\n");
+    const links: string = markdownEngine.render(
+      `[Discussion](${this.getDiscussionLink(
+        url
+      )}) | [Solution](${this.getSolutionLink(url)})`
+    );
+    return `
             <!DOCTYPE html>
             <html>
             <head>
@@ -126,87 +134,94 @@ class LeetCodePreviewProvider extends LeetCodeWebview {
             </body>
             </html>
         `;
+  }
+
+  protected onDidDisposeWebview(): void {
+    super.onDidDisposeWebview();
+    this.sideMode = false;
+  }
+
+  protected async onDidReceiveMessage(message: IWebViewMessage): Promise<void> {
+    switch (message.command) {
+      case "ShowProblem": {
+        await commands.executeCommand("leetcode.showProblem", this.node);
+        break;
+      }
     }
-
-    protected onDidDisposeWebview(): void {
-        super.onDidDisposeWebview();
-        this.sideMode = false;
-    }
-
-    protected async onDidReceiveMessage(message: IWebViewMessage): Promise<void> {
-        switch (message.command) {
-            case "ShowProblem": {
-                await commands.executeCommand("leetcode.showProblem", this.node);
-                break;
-            }
-        }
+  }
+
+  // private async hideSideBar(): Promise<void> {
+  //     await commands.executeCommand("workbench.action.focusSideBar");
+  //     await commands.executeCommand("workbench.action.toggleSidebarVisibility");
+  // }
+
+  private parseDescription(descString, problem) {
+    // Parse body by looking for the first html tag
+    const bodyStartIdx = descString.search(/<.*>/);
+    const bodyRaw = descString.substring(bodyStartIdx);
+
+    const { name: title, tags, companies } = problem;
+    return {
+      title,
+      tags,
+      companies,
+      url: descString.match(/https:.*leetcode.*/)?.[0] || "??",
+      // Category is the first element in list
+      category: descString.match(/\*.*/)?.[0]?.slice(2) || "??",
+      // Difficulty is the first element in list with a percentage sign
+      difficulty: descString.match(/.*\%.*/)?.[0]?.slice(2) || "??",
+      likes:
+        descString
+          .match(/Likes.*?\n/)?.[0]
+          ?.split(": ")[1]
+          ?.trim() || "0",
+      dislikes:
+        descString
+          .match(/Dislikes.*?\n/)?.[0]
+          ?.split(": ")[1]
+          ?.trim() || "0",
+      body: bodyRaw.replace(
+        /<pre>[\r\n]*([^]+?)[\r\n]*<\/pre>/g,
+        "<pre><code>$1</code></pre>"
+      ),
+    };
+  }
+
+  private getDiscussionLink(url: string): string {
+    const endPoint: string = getLeetCodeEndpoint();
+    if (endPoint === Endpoint.LeetCodeCN) {
+      return url.replace("/description/", "/comments/");
+    } else if (endPoint === Endpoint.LeetCode) {
+      return url.replace(
+        "/description/",
+        "/discuss/?currentPage=1&orderBy=most_votes&query="
+      );
     }
 
-    // private async hideSideBar(): Promise<void> {
-    //     await commands.executeCommand("workbench.action.focusSideBar");
-    //     await commands.executeCommand("workbench.action.toggleSidebarVisibility");
-    // }
-
-    private parseDescription(descString, problem) {
-        // Parse body by looking for the first html tag
-        const bodyStartIdx = descString.search(/<.*>/);
-        const bodyRaw = descString.substring(bodyStartIdx);
-
-        const { name: title, tags, companies } = problem;
-        return {
-          title,
-          tags,
-          companies,
-          url: descString.match(/https:.*leetcode.*/)?.[0] || "??",
-          category: descString.match(/\*.*/)?.[0]?.slice(2) || "??", // Category is the first element in list
-          difficulty: descString.match(/.*\%.*/)?.[0]?.slice(2) || "??", // Difficulty is the first element in list with a percentage sign
-          likes:
-            descString
-              .match(/Likes.*?\n/)?.[0]
-              ?.split(": ")[1]
-              ?.trim() || "0",
-          dislikes:
-            descString
-              .match(/Dislikes.*?\n/)?.[0]
-              ?.split(": ")[1]
-              ?.trim() || "0",
-          body: bodyRaw.replace(
-            /<pre>[\r\n]*([^]+?)[\r\n]*<\/pre>/g,
-            "<pre><code>$1</code></pre>"
-          ),
-        };
-      }
-    private getDiscussionLink(url: string): string {
-        const endPoint: string = getLeetCodeEndpoint();
-        if (endPoint === Endpoint.LeetCodeCN) {
-            return url.replace("/description/", "/comments/");
-        } else if (endPoint === Endpoint.LeetCode) {
-            return url.replace("/description/", "/discuss/?currentPage=1&orderBy=most_votes&query=");
-        }
-
-        return "https://leetcode.com";
-    }
+    return "https://leetcode.com";
+  }
 
-    private getSolutionLink(url: string): string {
-        return url.replace("/description/", "/solution/");
-    }
+  private getSolutionLink(url: string): string {
+    return url.replace("/description/", "/solution/");
+  }
 }
 
 interface IDescription {
-    title: string;
-    url: string;
-    tags: string[];
-    companies: string[];
-    category: string;
-    difficulty: string;
-    likes: string;
-    dislikes: string;
-    body: string;
+  title: string;
+  url: string;
+  tags: string[];
+  companies: string[];
+  category: string;
+  difficulty: string;
+  likes: string;
+  dislikes: string;
+  body: string;
 }
 
 interface IWebViewMessage {
-    command: string;
+  command: string;
 }
 
-export const leetCodePreviewProvider: LeetCodePreviewProvider = new LeetCodePreviewProvider();
+export const leetCodePreviewProvider: LeetCodePreviewProvider =
+  new LeetCodePreviewProvider();
 

From 1d141cf601ae6b0a1089da3ab7eb317203c10417 Mon Sep 17 00:00:00 2001
From: Carlos Perez-Guerra <karlitoffel01@yahoo.com>
Date: Tue, 26 Oct 2021 09:01:16 +0200
Subject: [PATCH 4/5] Fix prettier again

---
 src/webview/leetCodePreviewProvider.ts | 300 ++++++++++++-------------
 1 file changed, 144 insertions(+), 156 deletions(-)

diff --git a/src/webview/leetCodePreviewProvider.ts b/src/webview/leetCodePreviewProvider.ts
index 3c9f2f3..d4e652a 100644
--- a/src/webview/leetCodePreviewProvider.ts
+++ b/src/webview/leetCodePreviewProvider.ts
@@ -8,54 +8,51 @@ import { ILeetCodeWebviewOption, LeetCodeWebview } from "./LeetCodeWebview";
 import { markdownEngine } from "./markdownEngine";
 
 class LeetCodePreviewProvider extends LeetCodeWebview {
-  protected readonly viewType: string = "leetcode.preview";
-  private node: IProblem;
-  private description: IDescription;
-  private sideMode: boolean = false;
-
-  public isSideMode(): boolean {
-    return this.sideMode;
-  }
-
-  public show(
-    descString: string,
-    node: IProblem,
-    isSideMode: boolean = false
-  ): void {
-    this.description = this.parseDescription(descString, node);
-    this.node = node;
-    this.sideMode = isSideMode;
-    this.showWebviewInternal();
-    // Comment out this operation since it sometimes may cause the webview become empty.
-    // Waiting for the progress of the VS Code side issue: https://github.com/microsoft/vscode/issues/3742
-    // if (this.sideMode) {
-    //     this.hideSideBar(); // For better view area
-    // }
-  }
-
-  protected getWebviewOption(): ILeetCodeWebviewOption {
-    if (!this.sideMode) {
-      return {
-        title: `${this.node.name}: Preview`,
-        viewColumn: ViewColumn.One,
-      };
-    } else {
-      return {
-        title: "Description",
-        viewColumn: ViewColumn.Two,
-        preserveFocus: true,
-      };
+
+    protected readonly viewType: string = "leetcode.preview";
+    private node: IProblem;
+    private description: IDescription;
+    private sideMode: boolean = false;
+
+    public isSideMode(): boolean {
+        return this.sideMode;
+    }
+
+    public show(descString: string, node: IProblem, isSideMode: boolean = false): void {
+        this.description = this.parseDescription(descString, node);
+        this.node = node;
+        this.sideMode = isSideMode;
+        this.showWebviewInternal();
+        // Comment out this operation since it sometimes may cause the webview become empty.
+        // Waiting for the progress of the VS Code side issue: https://github.com/microsoft/vscode/issues/3742
+        // if (this.sideMode) {
+        //     this.hideSideBar(); // For better view area
+        // }
     }
-  }
 
-  protected getWebviewContent(): string {
-    const button: { element: string; script: string; style: string } = {
-      element: `<button id="solve">Code Now</button>`,
-      script: `const button = document.getElementById('solve');
+    protected getWebviewOption(): ILeetCodeWebviewOption {
+        if (!this.sideMode) {
+            return {
+                title: `${this.node.name}: Preview`,
+                viewColumn: ViewColumn.One,
+            };
+        } else {
+            return {
+                title: "Description",
+                viewColumn: ViewColumn.Two,
+                preserveFocus: true,
+            };
+        }
+    }
+
+    protected getWebviewContent(): string {
+        const button: { element: string, script: string, style: string } = {
+            element: `<button id="solve">Code Now</button>`,
+            script: `const button = document.getElementById('solve');
                     button.onclick = () => vscode.postMessage({
                         command: 'ShowProblem',
                     });`,
-      style: `<style>
+            style: `<style>
                 #solve {
                     position: fixed;
                     bottom: 1rem;
@@ -73,41 +70,36 @@ class LeetCodePreviewProvider extends LeetCodeWebview {
                     border: 0;
                 }
                 </style>`,
-    };
-    const { title, url, category, difficulty, likes, dislikes, body } =
-      this.description;
-    const head: string = markdownEngine.render(`# [${title}](${url})`);
-    const info: string = markdownEngine.render(
-      [
-        `| Category | Difficulty | Likes | Dislikes |`,
-        `| :------: | :--------: | :---: | :------: |`,
-        `| ${category} | ${difficulty} | ${likes} | ${dislikes} |`,
-      ].join("\n")
-    );
-    const tags: string = [
-      `<details>`,
-      `<summary><strong>Tags</strong></summary>`,
-      markdownEngine.render(
-        this.description.tags
-          .map((t: string) => `[\`${t}\`](https://leetcode.com/tag/${t})`)
-          .join(" | ")
-      ),
-      `</details>`,
-    ].join("\n");
-    const companies: string = [
-      `<details>`,
-      `<summary><strong>Companies</strong></summary>`,
-      markdownEngine.render(
-        this.description.companies.map((c: string) => `\`${c}\``).join(" | ")
-      ),
-      `</details>`,
-    ].join("\n");
-    const links: string = markdownEngine.render(
-      `[Discussion](${this.getDiscussionLink(
-        url
-      )}) | [Solution](${this.getSolutionLink(url)})`
-    );
-    return `
+        };
+        const { title, url, category, difficulty, likes, dislikes, body } = this.description;
+        const head: string = markdownEngine.render(`# [${title}](${url})`);
+        const info: string = markdownEngine.render([
+            `| Category | Difficulty | Likes | Dislikes |`,
+            `| :------: | :--------: | :---: | :------: |`,
+            `| ${category} | ${difficulty} | ${likes} | ${dislikes} |`,
+        ].join("\n"));
+        const tags: string = [
+            `<details>`,
+            `<summary><strong>Tags</strong></summary>`,
+            markdownEngine.render(
+                this.description.tags
+                    .map((t: string) => `[\`${t}\`](https://leetcode.com/tag/${t})`)
+                    .join(" | "),
+            ),
+            `</details>`,
+        ].join("\n");
+        const companies: string = [
+            `<details>`,
+            `<summary><strong>Companies</strong></summary>`,
+            markdownEngine.render(
+                this.description.companies
+                    .map((c: string) => `\`${c}\``)
+                    .join(" | "),
+            ),
+            `</details>`,
+        ].join("\n");
+        const links: string = markdownEngine.render(`[Discussion](${this.getDiscussionLink(url)}) | [Solution](${this.getSolutionLink(url)})`);
+        return `
             <!DOCTYPE html>
             <html>
             <head>
@@ -134,94 +126,90 @@ class LeetCodePreviewProvider extends LeetCodeWebview {
             </body>
             </html>
         `;
-  }
-
-  protected onDidDisposeWebview(): void {
-    super.onDidDisposeWebview();
-    this.sideMode = false;
-  }
-
-  protected async onDidReceiveMessage(message: IWebViewMessage): Promise<void> {
-    switch (message.command) {
-      case "ShowProblem": {
-        await commands.executeCommand("leetcode.showProblem", this.node);
-        break;
-      }
     }
-  }
-
-  // private async hideSideBar(): Promise<void> {
-  //     await commands.executeCommand("workbench.action.focusSideBar");
-  //     await commands.executeCommand("workbench.action.toggleSidebarVisibility");
-  // }
-
-  private parseDescription(descString, problem) {
-    // Parse body by looking for the first html tag
-    const bodyStartIdx = descString.search(/<.*>/);
-    const bodyRaw = descString.substring(bodyStartIdx);
-
-    const { name: title, tags, companies } = problem;
-    return {
-      title,
-      tags,
-      companies,
-      url: descString.match(/https:.*leetcode.*/)?.[0] || "??",
-      // Category is the first element in list
-      category: descString.match(/\*.*/)?.[0]?.slice(2) || "??",
-      // Difficulty is the first element in list with a percentage sign
-      difficulty: descString.match(/.*\%.*/)?.[0]?.slice(2) || "??",
-      likes:
-        descString
-          .match(/Likes.*?\n/)?.[0]
-          ?.split(": ")[1]
-          ?.trim() || "0",
-      dislikes:
-        descString
-          .match(/Dislikes.*?\n/)?.[0]
-          ?.split(": ")[1]
-          ?.trim() || "0",
-      body: bodyRaw.replace(
-        /<pre>[\r\n]*([^]+?)[\r\n]*<\/pre>/g,
-        "<pre><code>$1</code></pre>"
-      ),
-    };
-  }
-
-  private getDiscussionLink(url: string): string {
-    const endPoint: string = getLeetCodeEndpoint();
-    if (endPoint === Endpoint.LeetCodeCN) {
-      return url.replace("/description/", "/comments/");
-    } else if (endPoint === Endpoint.LeetCode) {
-      return url.replace(
-        "/description/",
-        "/discuss/?currentPage=1&orderBy=most_votes&query="
-      );
+
+    protected onDidDisposeWebview(): void {
+        super.onDidDisposeWebview();
+        this.sideMode = false;
     }
 
-    return "https://leetcode.com";
-  }
+    protected async onDidReceiveMessage(message: IWebViewMessage): Promise<void> {
+        switch (message.command) {
+            case "ShowProblem": {
+                await commands.executeCommand("leetcode.showProblem", this.node);
+                break;
+            }
+        }
+    }
+
+    // private async hideSideBar(): Promise<void> {
+    //     await commands.executeCommand("workbench.action.focusSideBar");
+    //     await commands.executeCommand("workbench.action.toggleSidebarVisibility");
+    // }
+
+    private parseDescription(descString, problem) {
+        // Parse body by looking for the first html tag
+        const bodyStartIdx = descString.search(/<.*>/);
+        const bodyRaw = descString.substring(bodyStartIdx);
+
+        const { name: title, tags, companies } = problem;
+        return {
+          title,
+          tags,
+          companies,
+          url: descString.match(/https:.*leetcode.*/)?.[0] || "??",
+          // Category is the first element in list
+          category: descString.match(/\*.*/)?.[0]?.slice(2) || "??",
+          // Difficulty is the first element in list with a percentage sign
+          difficulty: descString.match(/.*\%.*/)?.[0]?.slice(2) || "??",
+          likes:
+            descString
+              .match(/Likes.*?\n/)?.[0]
+              ?.split(": ")[1]
+              ?.trim() || "0",
+          dislikes:
+            descString
+              .match(/Dislikes.*?\n/)?.[0]
+              ?.split(": ")[1]
+              ?.trim() || "0",
+          body: bodyRaw.replace(
+            /<pre>[\r\n]*([^]+?)[\r\n]*<\/pre>/g,
+            "<pre><code>$1</code></pre>"
+          ),
+        };
+      }
+    private getDiscussionLink(url: string): string {
+        const endPoint: string = getLeetCodeEndpoint();
+        if (endPoint === Endpoint.LeetCodeCN) {
+            return url.replace("/description/", "/comments/");
+        } else if (endPoint === Endpoint.LeetCode) {
+            return url.replace("/description/", "/discuss/?currentPage=1&orderBy=most_votes&query=");
+        }
+
+        return "https://leetcode.com";
+    }
 
-  private getSolutionLink(url: string): string {
-    return url.replace("/description/", "/solution/");
-  }
+    private getSolutionLink(url: string): string {
+        return url.replace("/description/", "/solution/");
+    }
 }
 
 interface IDescription {
-  title: string;
-  url: string;
-  tags: string[];
-  companies: string[];
-  category: string;
-  difficulty: string;
-  likes: string;
-  dislikes: string;
-  body: string;
+    title: string;
+    url: string;
+    tags: string[];
+    companies: string[];
+    category: string;
+    difficulty: string;
+    likes: string;
+    dislikes: string;
+    body: string;
 }
 
 interface IWebViewMessage {
-  command: string;
+    command: string;
 }
 
-export const leetCodePreviewProvider: LeetCodePreviewProvider =
-  new LeetCodePreviewProvider();
+export const leetCodePreviewProvider: LeetCodePreviewProvider = new LeetCodePreviewProvider();
+
 

From 39d73d1cede8c1b112ed440ac95065def68e6f48 Mon Sep 17 00:00:00 2001
From: Carlos Perez-Guerra <karlitoffel01@yahoo.com>
Date: Tue, 26 Oct 2021 09:01:53 +0200
Subject: [PATCH 5/5] Remove newlines

---
 src/webview/leetCodePreviewProvider.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/webview/leetCodePreviewProvider.ts b/src/webview/leetCodePreviewProvider.ts
index d4e652a..8d73c1f 100644
--- a/src/webview/leetCodePreviewProvider.ts
+++ b/src/webview/leetCodePreviewProvider.ts
@@ -211,5 +211,3 @@ interface IWebViewMessage {
 }
 
 export const leetCodePreviewProvider: LeetCodePreviewProvider = new LeetCodePreviewProvider();
-
-