search

jupyter-book / mystmd

Command line tools for working with MyST Markdown.
https://mystmd.org/guide
MIT License
191 stars 62 forks source link

Local browser view keeps scrolling down #231

Open thesamovar opened 1 year ago

thesamovar commented 1 year ago

What version of mystjs are you using?

0.1.11

How did you install myst?

npm

What operating system are you using?

Windows

Which area is this feature request for?

Command Line Interface

Describe the Bug

When running myst locally and viewing on localhost, when I update a markdown file, the page rebuilds automatically (great) but for some reason it scrolls down a little way meaning I keep having to switch to the browser and scroll back up. It's a minor bug but surprisingly irritating! 😂

Expected Behavior

Current view should stay where it was.

To Reproduce

View a page when editing with multiple sections, figures and equations (not sure if relevant).

welcome[bot] commented 1 year ago

Thanks for opening your first issue here! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.
If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).
Welcome to the EBP community! :tada:

rowanc1 commented 1 year ago

Thanks @thesamovar for the feedback. I was writing a blog a few months ago and had to stop and implement the first-version of scroll restoration because I couldn't concentrate on the writing with all the jumping -- totally understand the frustration, and thought I had got it working well enough.

The current version saves your scroll height to local storage before triggering a reload, and then scrolls back there ~30ms after load.

Current implementation is here.

Can you let me know if there are images above your scroll position? Or something else above your viewport that would change size? That would help track this down I think.

thesamovar commented 1 year ago

There's all sorts! Images, equations and some mermaid diagrams.

thesamovar commented 1 year ago

I just checked and can confirm it's the mermaid diagrams that cause the problem. If I remove them the scroll works fine!

rowanc1 commented 1 year ago

Ok, thanks for doing that debugging, I think we might need to save the heights/aspect-ratio of the diagrams after they are rendered (probably in a separate headless browser, which also allows screenshots to be taken for other export tasks).

Doing that properly is a fair bit of work, but we could probably fake it and get some thing that improves the experience for now.

Can you give me a sense of the variation of heights the mermaid diagrams you are using? For example by running something like this in your web console?

[...document.querySelectorAll('figure > div > svg')].map((e) => e.clientHeight)
rowanc1 commented 1 year ago

Hm, I suppose that we could actually do that calculation on the fly and remember it in your browser and then it would be exact as long as you aren't editing those diagrams.