Ace Scroll Sync with Preview : Get line height of wrapped lines

Question

I have a Markdown editor and next to it a Markdown preview. I am trying to add a scroll sync feature like in this demo:

https://markdown-it.github.io/

But according to the author:

Existing solution in demo is a dirty hack, that can have different bugs in height calculations of textarea content. If you need guaranteed result, it's better to use codemirror / ace instead of textarea. They give better line offsets.

I didn't find similar plugin anywhere so I started recreating the sync algorithm. The problem I stumbled upon is that for the algorithm to work you need the exact height of lines in the editor. This is tricky when lines are soft-wrapped.

So the questions is how to get the line height of a specific line in Ace?

Answer 1

If you have a cursor = {row, column} you can use editor.renderer.scrollCursorIntoView(cursor) to scroll it into view or editor.renderer.scrollToLine(row) to scroll with animation. Note that for animation to work you need to enable it with editor.setOption("animatedScroll", true)