Is there an easy way to sync-scroll a panel?

Development
1

I can think of a few tedious ways, but considering ya'll have done such an excellent job on sync-scrolling the markdownIt render, I thought it was worth asking. It seems like it needs more than just header hashes...

2

The difficulty depends on two factors. One is the quality of sync-scroll, and the other is the degree of freedom of your panels to be scrolled.

If you don't need the quality of your sync-scroll, its implementation may be not difficult. For example, older Joplin (v2.5 or before) has a naive synchronous scrolling between two scroll bars (not contents). It's easy to be implemented.

To implement high-quality sync-scroll like Joplin v2.6+, there is no easy way. Because there are too many factors specific to each application as follows.

  • A coordinate transformation is required between two panels. It possibly be needed to consider both logical (text or DOM) and physical (pixel) coordinates.
  • Event handling depends on underlying libraries (ex. CodeMirror and Electron's iframe) and browsers. In Joplin, it is helpful that Electron (Chromium) is the only browser to be supported.
  • Two panels possibly run in different processes. In such a case, IPC communications are needed to keep the synchronicity. Furthermore, if rendering DOM and controlling panels are processed in different processes, things get more complicated.
  • If a scrolled panel has extensibility (such as plugins in Joplin), interactions between the panel and its extensions introduce further complicated matters.
  • How to manage scroll positions and cursor positions in a consistent way is not trivial.
1 Like
3

Thanks so much for replying! I'm okay with a budget-scroll. Infact, while awaiting more info, I've managed to pretty easily mock up what I want to do in vscode, budget-scroll included, and I didn't need to make a markdown-it plugin, I can just use javascript regexp replace. I know it's slower, but when you're just trying to get something done, tangling with markdown-it is a real time-black-hole.

So getting back to Joplin, how do I do this simple sync scroll with a custom panel? I'm guessing it's something to do with the message mechanism?

And on a tangential issue, if there is a way to easily regexp replace the built in markdown-it render, that might be an even better option! No new panel needed. And the built-in awesome sync scroll might just work out of the box.