From 782acf5b3a59f3ff5b1973476511dbf70b9e21ce Mon Sep 17 00:00:00 2001 From: Guilherme Cassolato Date: Wed, 4 Jan 2023 19:44:34 +0100 Subject: [PATCH] feature: new command 'Reload Preview' MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Usage: Having either the preview panel itself or the editor for its source markdown file active, ⇧ ⌘ P Tothom: Reload Preview --- CHANGELOG.md | 1 + README.md | 9 ++++++--- package.json | 5 +++++ samples/tothom.md | 18 ++++++++++++------ src/extension.ts | 4 +++- src/tothom.ts | 21 +++++++++++++++------ 6 files changed, 42 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5a16026..903500c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index 74db5b3..620905c 100644 --- a/README.md +++ b/README.md @@ -5,14 +5,17 @@ that gives you nice ▶️ _Run in terminal_ buttons for your code bl ## Features +- Markdown preview (⇧⌘P _Tothom: Markdown Preview_) - ▶️ _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 (⇧⌘P _Tothom: Reload Preview_) - Native VSCode _Find_ widget enabled in the preview ## Usage @@ -26,7 +29,7 @@ that gives you nice ▶️ _Run in terminal_ buttons for your code bl echo 'Hello World!' ``` -2. Run the **_Tothom: Markdown Preview_** command (⌘ + ⇧ + P) +2. Run the **_Tothom: Markdown Preview_** command (⇧⌘P) 3. Click on the ▶️ button automatically rendered with each of your code blocks, to run the code in the Visual Studio Code terminal. ## Extension Settings diff --git a/package.json b/package.json index f951539..174043b 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,11 @@ "command": "tothom.markdownPreview", "title": "Markdown Preview", "category": "Tothom" + }, + { + "command": "tothom.reloadPreview", + "title": "Reload Preview", + "category": "Tothom" } ] }, diff --git a/samples/tothom.md b/samples/tothom.md index 3f6ee5f..3da3b97 100644 --- a/samples/tothom.md +++ b/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 +
+ Show details + + Details are visible. +
+ +### 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 --- diff --git a/src/extension.ts b/src/extension.ts index 3ae88f6..3d1bf68 100644 --- a/src/extension.ts +++ b/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())); } diff --git a/src/tothom.ts b/src/tothom.ts index 84c2a2f..c6b84f6 100644 --- a/src/tothom.ts +++ b/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)); };