Merge pull request #24 from guicassolato/feature/cmd-reload

New command 'Reload Preview'

CHANGELOG.md

@@ -10,6 +10,7 @@ This file is structured according to the [Keep a Changelog](http://keepachangelo
 
 - Added support for HTML tag attributes (with markdown-it-attrs)
 - Option to configure the ▶️ label of the 'Run in terminal' button
+- Command to force reload the preview
 
 ### Changed
 

README.md

@@ -5,14 +5,17 @@ that gives you nice <kbd>▶️</kbd> _Run in terminal_ buttons for your code bl
 
 ## Features
 
+- Markdown preview (<kbd>⇧⌘P</kbd></kbd> _Tothom: Markdown Preview_)
 - <kbd>▶️</kbd> _Run in terminal_ actions for code blocks (auto-generated)
 - GitHub styling
 - Syntax highlight for code blocks
 - Dark/light mode
 - Anchor links
-- Tasks/todo lists (with [markdown-it-task-lists](https://www.npmjs.com/package/markdown-it-task-lists))
+- Tasks/TODO lists (with [markdown-it-task-lists](https://www.npmjs.com/package/markdown-it-task-lists))
 - HTML tag attributes (with [markdown-it-attrs](https://www.npmjs.com/package/markdown-it-attrs))
-- Independent preview tabs (for each markdown file)
+- Automatic reload of the preview on edit the source markdown file
+- Independent preview tabs for each markdown file
+- Force preview reload (<kbd>⇧⌘P</kbd></kbd> _Tothom: Reload Preview_)
 - Native VSCode _Find_ widget enabled in the preview
 
 ## Usage
@@ -26,7 +29,7 @@ that gives you nice <kbd>▶️</kbd> _Run in terminal_ buttons for your code bl
    echo 'Hello World!'
    ```
    </pre>
-2. Run the **_Tothom: Markdown Preview_** command (<kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>P</kbd>)
+2. Run the **_Tothom: Markdown Preview_** command (<kbd>⇧⌘P</kbd></kbd>)
 3. Click on the <kbd>▶️</kbd> button automatically rendered with each of your code blocks, to run the code in the Visual Studio Code terminal.
 
 ## Extension Settings

package.json

@@ -71,6 +71,11 @@
         "command": "tothom.markdownPreview",
         "title": "Markdown Preview",
         "category": "Tothom"
+      },
+      {
+        "command": "tothom.reloadPreview",
+        "title": "Reload Preview",
+        "category": "Tothom"
       }
     ]
   },

samples/tothom.md

@@ -16,9 +16,9 @@
   - [Links](#links)
   - [Tables](#tables)
   - [Images](#images)
-  - [Other](#other)
-    - [Blockquote](#blockquote)
-    - [Horizontal line](#horizontal-line)
+  - [Details](#details)
+  - [Blockquote](#blockquote)
+  - [Horizontal line](#horizontal-line)
 
 ## Code blocks
 
@@ -121,13 +121,19 @@ This has a title. {title="this is the title"}
 
 ![Tothom](../resources/tothom.png)
 
-### Other
+### Details
 
-#### Blockquote
+<details>
+  <summary>Show details</summary>
+
+  Details are visible.
+</details>
+
+### Blockquote
 
 > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
-#### Horizontal line
+### Horizontal line
 
 ---
 

src/extension.ts

@@ -3,6 +3,7 @@ import * as vscode from 'vscode';
 import { Tothom, TothomOptions } from './tothom';
 
 const TOTHOM_MARKDOWN_PREVIEW = 'tothom.markdownPreview';
+const TOTHOM_RELOAD_PREVIEW = 'tothom.reloadPreview';
 
 const tothomOptions = (): TothomOptions => {
   const config = vscode.workspace.getConfiguration('tothom');
@@ -20,8 +21,9 @@ export function activate(context: vscode.ExtensionContext) {
   const tothom = new Tothom(context.extensionUri, tothomOptions());
 
   context.subscriptions.push(vscode.commands.registerCommand(TOTHOM_MARKDOWN_PREVIEW, tothom.openPreview));
+  context.subscriptions.push(vscode.commands.registerCommand(TOTHOM_RELOAD_PREVIEW, tothom.reloadPreview));
 
-  vscode.workspace.onDidChangeTextDocument(event => tothom.reloadPreview(event.document.uri));
+  vscode.workspace.onDidChangeTextDocument(event => tothom.reloadPreview(event.document.uri, { reveal: false }));
   vscode.workspace.onDidChangeConfiguration(() => tothom.setOptions(tothomOptions()));
 }
 

src/tothom.ts

@@ -62,20 +62,25 @@ export class Tothom {
       this._views.set(resource, panel);
     }
 
-    this.reloadPreview(uri);
-    panel.reveal(0);
+    this.reloadPreview(resource);
 
     return webview;
   };
 
-  reloadPreview = (uri: any): vscode.Webview | undefined => {
-    const resource = utils.resourceFromUri(uri);
+  reloadPreview = (uri: any, options?: { reveal?: boolean | undefined }): vscode.Webview | undefined => {
+    const resource = uri || this.getActiveViewUri() || utils.resourceFromUri(uri);
+    const panel = this._views.get(resource);
 
-    let webview = this._views.get(resource)?.webview;
-    if (!webview) {
+    if (!panel) {
+      vscode.window.showInformationMessage(`Tothom preview not found for resource ${utils.resourceName(resource)}`);
       return undefined;
     }
 
+    if (!options || options.reveal || options.reveal === undefined) {
+      panel.reveal(0);
+    }
+
+    const webview = panel.webview;
     const markdown = utils.readFileContent(resource);
     const html = this._engine.render(markdown, { imageFunc: this.renderImage(webview, resource) });
     webview.html = this.renderHtmlContent(webview, resource, html);
@@ -88,6 +93,10 @@ export class Tothom {
   private colorScheme = (): string => this.options?.colorScheme || defaultColorScheme;
   private bracketedPasteMode = (): boolean => this.options?.bracketedPasteMode || defaultBracketedPasteMode;
 
+  private getActiveViewUri = (): vscode.Uri | undefined => {
+    return [...this._views.keys()].find(key => { return this._views.get(key)?.active;});
+  };
+
   private mediaFilePath = (webview: vscode.Webview, filePath: string): vscode.Uri => {
     return webview.asWebviewUri(vscode.Uri.joinPath(this.extensionUri, 'media', filePath));
   };