FUSETOOLS2-1108 - improving Didact live preview (#543)

* FUSETOOLS2-1108 - initial cut at live preview

* updated preview keys
* updated docs and demos
* update keys in readme

Signed-off-by: Brian Fitzpatrick <[email protected]>

Author: bfitzpat

CHANGELOG.md

@@ -4,7 +4,9 @@ All notable changes to the "vscode-didact" extension will be documented in this
 
 ## 0.4.1
 
-- TBD
+- Integrated with the built-in VS Code Markdown Preview (Ctrl+Shift+V). Note that Didact links do not work from the built-in preview.
+  - Also note that the built-in preview for the AsciiDoc extension (https://marketplace.visualstudio.com/items?itemName=asciidoctor.asciidoctor-vscode) now works, though the stylesheets are not the same and Didact links do not work from the AsciiDoc preview.
+- Changed `Didact: Start Didact Tutorial from File` hotkeys from `Ctrl/Cmd+Shift+V` to `Ctrl/Cmd+Alt+D` to avoid conflicting with the Markdown and AsciiDoc preview functionality. This keybinding can be changed from the VS Code `Keyboard Shortcuts` window (`File->Preferences->Keyboard Shortcuts`).
 
 ## 0.4.0
 

README.md

@@ -40,7 +40,7 @@
 * In AsciiDoc, type `link:[Open a new terminal]`, put the cursor after `link:`, and press `Ctrl+Space`.
 4. Select `Start new Didact command link`.
 5. Choose a command from the hundreds VS Code has available (like `workbench.action.terminal.new`) and press `Enter`.
-6. Press `Ctrl+Alt+V` to view your new Didact tutorial and click the link you created! Done!
+6. Press `Ctrl/Cmd+Alt+D` to view your new Didact tutorial and click the link you created! Done!
 
 ![Open New Terminal Example](./images/open-new-terminal-example.gif)
 

demos/markdown/tutorial/tutorial.didact.md

@@ -19,7 +19,7 @@ Didact gives you a way of writing those same files but gives them a way to lever
 3. Create a new AsciiDoc or Markdown file and add “didact” to the file extension (`myfile.didact.adoc`, `myotherfile.didact.md`) [(Click here to create your first Didact markdown file named `myfirst.didact.md`.)](didact://?commandId=vscode.didact.scaffoldProject&extFilePath=redhat.vscode-didact/demos/markdown/tutorial/didactmdfile.json) [(Then click here to open the new `myfirst.didact.md` file.)](didact://?commandId=vscode.open&projectFilePath=didactmdfile.json)
 4. Start writing!
 5. When you get to a point where you want the user to click on a link to do something active, write a Didact link (we'll cover that in the next section).
-6. To open and test your Didact file, right-click on the file and select `Start Didact Tutorial from File` from the context menu or launch the Didact window while editing the file with `Ctrl+Shift+V` or `Cmd+Shift+V`.
+6. To open and test your Didact file, right-click on the file and select `Start Didact Tutorial from File` from the context menu or launch the Didact window while editing the file with `Ctrl+Alt+D` or `Cmd+Alt+D`.
 6. Repeat steps 4-6 until you’re done!
 
 ## The Basics of Didact

docs/writing-a-tutorial.md

@@ -52,7 +52,7 @@ Or [click here](didact://?commandId=workbench.action.showCommands) to see the Co
 
 For simple commands, that's all that necessary, so save your file.
 
-To see your link in action, just right-click on the Didact file (*.didact.md or *.didact.adoc) and select **Start Didact Tutorial from File** from the context menu.
+To open and test your Didact file, right-click on the file (*.didact.md or *.didact.adoc) and select `Start Didact Tutorial from File` from the context menu or launch the Didact window while editing the file with `Ctrl+Alt+D` or `Cmd+Alt+D`.
 
 If you click the `click here` link in your file, it should automatically open the Command Palette for you, just like we wanted it to.
 

package.json

@@ -166,8 +166,8 @@
 		"keybindings": [
 			{
 				"command": "vscode.didact.startDidact",
-				"key": "ctrl+shift+v",
-				"mac": "cmd+shift+v",
+				"key": "ctrl+alt+d",
+				"mac": "cmd+alt+d",
 				"when": "editorFocus && resourceFilename =~ /[.](didact)[.](md|adoc)$/"
 			},
 			{
@@ -258,7 +258,12 @@
 					".didact.adoc"
 				]
 			}
-		]
+		],
+		"markdown.previewStyles": [
+			"https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css",
+			"./media/webviewslim.css"
+		],
+		"markdown.markdownItPlugins": true
 	},
 	"files.associations": {
 		"*.didact.md": "markdown",

src/extension.ts

@@ -35,7 +35,7 @@ export const DEFAULT_TUTORIAL_NAME = "Didact Demo";
 export const didactTutorialsProvider = new DidactNodeProvider();
 let didactTreeView : vscode.TreeView<SimpleNode>;
 
-export async function activate(context: vscode.ExtensionContext): Promise<void> {
+export async function activate(context: vscode.ExtensionContext): Promise<any> {
 
 	extensionFunctions.initialize(context);
 
@@ -126,6 +126,21 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
 	if (openAtStartup) {
 		await extensionFunctions.openDidactWithDefault();
 	}
+
+	return {
+		extendMarkdownIt(md: any) {
+			const taskLists = require('markdown-it-task-lists');
+			const markdownItAttrs = require('markdown-it-attrs');
+			return md.set({ typographer: true })
+				.set({ linkify: true })
+				.enable('linkify')
+				.enable('replacements')
+				.enable('strikethrough')
+				.enable('table')
+				.use(taskLists, {enabled: true, label: true})
+				.use(markdownItAttrs, {});
+		}
+	  };
 }
 
 function createIntegrationsView(): void {