How to implement automatic scroll sync for a Markdown editor/preview app?

I'm currently building a Markdown note-taking app with ct3a: https://luccanotes.vercel.app/ Source code can be found here: https://github.com/ChromeUniverse/luccanotes So far the app works reasonably well for real-world note-taking but a very important feature that's currently missing is automatic scroll synchronization between the editor and preview panels. The idea would be to guarantee that the corresponding element you're editing in the editor (say an h1 heading) is always visible in the preview component. Of course, a simple one-to-one mapping of the scroll height/view height ratio doesn't work because Markdown elements (and their rendered markup) such as links, images, tables and code snippets can often vertically shift content quite drastically (especially in longer documents). I've attached some screenshots of what the note editor and the Markdown preview components look like. Honestly I don't even know where to start looking for solutions to this problem. I've tried looking up specific components to handle this but no luck so far. Any ideas?

GitHub

GitHub - ChromeUniverse/luccanotes: A full-stack note-taking app fo...

A full-stack note-taking app for Markdown lovers 💙 - GitHub - ChromeUniverse/luccanotes: A full-stack note-taking app for Markdown lovers 💙