Add support for live preview and live navigation

[xoofx]

Hi @madskristensen,

I have started to work on:

• a live preview that would update the document at every typing (after a 0.5s delay of pause)
• a live navigation that scrolls according to the top level line

This PR is not yet ready for merge, it's a work in progress! Just wanted to get early feedback on it.

The live preview seems working well.
For the live navigation, I have yet to found a more reliable way to scroll to the best suitable position. It may also be more relevant to keep the previous system (offset in document) and provide a settings+a button to disable live navigation sync.

[madskristensen]

Man, that looks sweet. That's my early feedback :)

It's been a big user request for years in Web Essentials to sync scrolling in the preview window. One way of doing it is to use the WebBrowser class as a ScriptObject to communicate with the HtmlDocument instance to make it scroll.

[xoofx]

The navigation sync is actually not so bad after testing it on several big markdown documents. It is using a new markdig extension that can emit pragma-line HTML ids so that synchronization is quite precise. There are a few cases may be where it is not ideal.

Not sure now how I can add a checkbox somewhere on the document/adornment to allow to disable live navigation sync on the document being edited (I will have to add this also at the general settings level)

[madskristensen]

That's great. You can add a Boolean option in Options.cs for now

[madskristensen]

Instead of an adornment, I know how to add custom XAML into the status bar. We can add an icon that looks like a sync symbol that the user can click to toggle enable/disable. It would still persist the setting in Options.cs so we need that regardless. What do you think about that?

[xoofx]

I have added the option to the settings.

Instead of an adornment, I know how to add custom XAML into the status bar. We can add an icon that looks like a sync symbol that the user can click to toggle enable/disable. It would still persist the setting in Options.cs so we need that regardless

Actually, I was more thinking about a document level checkbox that takes the value from the general option (when initialized), but then can be changed on the document being edited. This way, if sync is not working well for a particular doc we can disable it, and keep sync for others. Thoughts?

[madskristensen]

Yes, that makes sense. That's exactly what my idea of a statusbar icon would be. Instead of a checkbox in the editor itself, it is a sync symbol in the status bar that can be toggled. VSCode uses the status bar for this type of stuff and we could do the same

[madskristensen]

here's a screenshot of VSCode statusbar

[xoofx]

Let me know if you want me to do more things on this branch or you will be able to start from this state.

[madskristensen]

We can add the bells and whistles later. Is it ready to be merged?

[xoofx]

Somehow yes, but test it before!

[madskristensen]

Ok. I'll do it first thing in the morning.

[madskristensen]

Oh man, it works great. This is a great experience that I know people will love

[madskristensen]

It doesn't always scroll. It may be when there are no headings and only inline/paragraph content in the file. Can we make it so that when you move the cursor or click in the editor that the preview window syncs to that location?