Investigate Live preview functionality

[bfitzpat]

In a conversation recently, another developer brought up the idea of including a "Live" preview of Markdown/AsciiDoc Didact files in a fashion similar to https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid that uses the VS Code native "Preview" mode.

Right now we aren't really offering a "preview" as such, but more a "view" of the Didact file in the actual Didact webview. And it's definitely not live, it's one-way and to refresh it you'd have to re-open the Didact view. And yes, it is easy with Ctrl+Alt+V or Cmd+Alt+V from the keyboard, but it's definitely an extra step.

There are some details about the scroll lock and live preview here - https://code.visualstudio.com/docs/languages/markdown

[pwright]

not sure if this is related, but I was hoping to trigger workbench.action.webview.reloadWebviewAction in order to refresh the tutorial with changed content, but it didn't work.. Is that separate or similar issue? ie for my use case I don't mind the user clicking to refresh, maybe there's another way to trigger didact into doing it's magic?

[bfitzpat]

not sure if this is related, but I was hoping to trigger workbench.action.webview.reloadWebviewAction in order to refresh the tutorial with changed content, but it didn't work.. Is that separate or similar issue? ie for my use case I don't mind the user clicking to refresh, maybe there's another way to trigger didact into doing it's magic?

I will have to research a bit.

[bfitzpat]

@pwright can you give me a bit more of a use case for where you would want to trigger a refresh?

[pwright]

I'd like to add some interactivity to the skupper didact, get the user to issue a command, then display the results in the tutorial... (while also collecting data, which could also be useful for troubleshooting). Ultimately, I'd like to display a network dashboard, but to kick off the effort I just tried to capture the version in test.txt and then display that in the didact web view (works fine but requires restarting the didact):

icon:cogs[] link:++didact://?commandId=vscode.didact.sendNamedTerminalAString&text=setup$$skupper%20--version%20%3E%20test.txt++[Skupper-version]

----
include::test.txt[]
----

[bfitzpat]

@pwright Sounds like a reasonable case, but slightly different than the live preview. Can you spin it into its own issue with that description and maybe a simpler test case (something less skupper-ish perhaps. :) )?

[pwright]

created https://github.com/redhat-developer/vscode-didact/issues/370

[bfitzpat]

Spun up https://issues.redhat.com/browse/FUSETOOLS2-1108 to look at extending the built-in markdown preview per https://code.visualstudio.com/api/extension-guides/markdown-extension

[bfitzpat]

Did some work here - https://github.com/redhat-developer/vscode-didact/pull/543 and ran into an issue, as noted. Not sure how to handle the AsciiDoc side without relying on an existing extension as a dependency and hoping it provides a preview.

[bfitzpat]

Ok @pwright so according to https://github.com/microsoft/vscode/issues/122961#issuecomment-832300619 we have all we're going to get as far as a live preview goes with no working didact links inside. Is that enough?

[pwright]

@bfitzpat yes, that's great!, run didact if you wanna test didact links makes sense to me

[bfitzpat]

Ok, so two questions then.

1 for me. I need to figure out how to make this work on the asciidoc side of things as well. I expect all I'd need to do is add the asciidoctor CSS to it if they're using the same tech. What's the best asciidoctor extension to work with in vscode these days?

And 2 for you. If we go this route and people have been used to using Ctrl+Alt+V to open the preview in the Didact window itself, we'll have to change the key combo since that's tied directly to the preview.

[pwright]

1. I think you've no choice but to use https://marketplace.visualstudio.com/items?itemName=asciidoctor.asciidoctor-vscode ?
2. ctrl-alt-v never worked for me due to conflicts, always had to 'Didact: Start Didact Tutorial from file' - a new key combo would be good, but good luck in finding something that works for everyone :wink:

[bfitzpat]

1. Probably so. Unfortunately we cannot customize it in the same way. They are using a separate webview, which means we can't add any Didact-isms to the style (based on https://github.com/asciidoctor/asciidoctor-vscode/blob/65bfb9a847dd684b4d93af21d375ed75968f5509/src/commands/showPreview.ts#L47). It is tied to the Ctrl+Alt+V key binding already
2. Yes, probably. :) Anybody can set a new key combo for vscode.didact.startDidact in File->Preferences->Keyboard Shortcuts however, so maybe that's not as big a thing or we simply hunt around for a suitable replacement like Ctrl+Alt+D which doesn't seem to have anything assigned by default?

[bfitzpat]

Right now Ctrl+Shift+V is used for the markdown preview and start didact commands. Ctrl+Shift+D is in use, but Ctrl+Alt+D is not. One key different would make the difference. It's not a huge shift (no pun intended) to the new key binding.