search

agoose77 / jupyterlab-markup

JupyterLab extension to enable markdown-it rendering, with support for markdown-it plugins
BSD 3-Clause "New" or "Revised" License
48 stars 13 forks source link

Sync scrolling in markdown preview? #27

Open bollwyvl opened 3 years ago

bollwyvl commented 3 years ago

Elevator Pitch

Add bi-directional scrolling between an Editor and a Markdown Preview. Allow disabling this behavior.

Motivation

Yesterday during the collaborative editing demo during the community call, it was somewhat painful watching people editing markdown and have weird scrolling happen in an otherwise great experience.

As we can't get that data out marked upstream, this seems like the best place to land it. It's been a tick since I've looked at the code (binder's busted, btw), and I'd make this a plugin, but it feels like a it should be a core feature to this "ecosystem".

The other whammy is the default 300ms delay which is way too long with multiple editors, but that's for another day...

Design Ideas

The upstream demo contains the primary content for basic synced scrolling. Doing it right right is harder, but this would give us someplace to start.

As both the Editor and Markdown Preview documents have empty toolbars (by default), my inclination would be to enable this by default and offer a toggleable in Main Menu item in Edit or something.

Future Work

With more knowledge of the tokens between two documents, we could do even prettier LSP-style things, like jump-to-token and synced highlighting.

agoose77 commented 3 years ago

@bollwyvl thanks for the heads up about Binder. I'd noticed the CI was failing but left it on the backburner until I had more time. Fixed in 420e9eb. This is an interesting idea, and one that I'd be interested in!

bollwyvl commented 3 years ago

cool. working it right now.

so there's a bit of bookkeeping between the viewers and editors... it's already smelling manager-like, but the first pass will be a void-providing plugin, until it works... I'm sure somebody would want to listen in on it, though...

bollwyvl commented 3 years ago

Still nothing to show for it.

One thing: i did have to hoist the allowedAttributes up to the sanitize options in IPlugin, as it was stripping out data-source-line.

I had forgotten how much i dislike syncing to referent frames... the codemirror stuff sounds tantalizingly close in a number of places with things like getViewport, but it's not really fit for this purpose as it (rightly) is more interested in it's rendering window rather than what's visible.

Meanwhile, scrolling the RenderedMarkdown has some pitfalls. One doesn't really read from scrollTop, and when editing, it's really quite often the scrollTop + offsetHeight. So there's probably gotta be some scaling factor where there percent of total scroll impacts where the other scroll ends up.

The last thing, and something i didn't realize about markdownit, is that, for example, fence is taken by the diagram plugin, and needs some nasty tricks to get data-source-line added to it.

Will update if i make more progress!

agoose77 commented 3 years ago

Thanks for keeping me in the loop! It sounds a little gnarly work to be honest, glad someone is tackling it ;)