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...
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.
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.