Синхронизация Ace Scroll с предварительным просмотром: получение высоты завернутой строки

У меня есть редактор Markdown, а рядом с ним предварительный просмотр Markdown. Я пытаюсь добавить функцию синхронизации прокрутки, как в этой демонстрации:

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

Но по мнению автора:

Существующее решение в демо-версии — это грязный хак, который может иметь различные ошибки в вычислении высоты содержимого текстовой области. Если вам нужен гарантированный результат, лучше использовать codemirror/ace вместо textarea. Они дают лучшее смещение линии.

Подобного плагина я нигде не нашел, поэтому начал воссоздавать алгоритм синхронизации. Проблема, на которую я наткнулся, заключается в том, что для работы алгоритма нужна точная высота строк в редакторе. Это сложно, когда линии имеют мягкую обертку.

Итак, вопрос в том, как получить высоту строки конкретной строки в Ace?


person Itay Grudev    schedule 24.06.2015    source источник


Ответы (1)


Если у вас есть cursor = {row, column}, вы можете использовать editor.renderer.scrollCursorIntoView(cursor) для прокрутки в поле зрения или editor.renderer.scrollToLine(row) для прокрутки с анимацией. Обратите внимание, что для работы анимации необходимо включить ее с помощью editor.setOption("animatedScroll", true)

person a user    schedule 24.06.2015
comment
Я не думаю, что это отвечает на мой вопрос. Если вы имеете в виду всю функциональность синхронизации прокрутки, она более сложна, поскольку разные строки из источника отображаются с разной высотой, поэтому простого сопоставления между источником и предварительным просмотром не существует. Посмотрите на пример, который я привел. - person Itay Grudev; 24.06.2015
comment
С ace вам не нужно постоянно отображать положение прокрутки в положение прокрутки, как это делает scrollMap в приведенном вами примере, вместо этого вам нужно сохранить aceLineNumber в resultScrollPosition и позволить ace определить положение прокрутки на основе номера строки. - person a user; 24.06.2015