Компилятор: клик/выделение в превью должно раскрывать/выделять соответствующий исходный Markdown (особенно математику)

Проблема / Мотивация

При редактировании постов с большим количеством математики часто бывает сложно найти точный источник отрендеренного уравнения в редакторе Markdown.

В длинных постах с множеством встроенных выражений $…$ или нескольких блоков отображения $$…$$ рабочий процесс сводится к следующему:

обнаружить ошибку в предпросмотре → вручную искать её в исходном Markdown → внести исправления → снова проверить предпросмотр

Это особенно утомительно при мелких правках (отсутствующий знак минус, неверный индекс, корректировка пробелов и т. д.), и ситуация усугубляется по мере роста постов.

Предлагаемое поведение

В редакторе:

  • При клике или выделении отрендеренного элемента в панели предпросмотра должно происходить следующее:
  • прокрутка редактора исходного Markdown к соответствующему источнику,
  • установка курсора внутри (или выделение) исходного текста, который его сгенерировал.

Это будет особенно эффективно для:
• Математических выражений (, $$…$$)
• Цитат
• Списков
• Ссылок
• Других обработанных элементов

Математика — наиболее убедительный вариант использования, но такое поведение будет полезно в целом.

Чем это отличается от синхронизации прокрутки

Речь не идёт о синхронизированной прокрутке во время набора текста.

Это переход от предпросмотра к источнику, аналогичный по духу SyncTeX в LaTeX-редакторах:

«Я смотрю на этот отрендеренный элемент — покажи мне, откуда он взялся».

Возможное направление реализации (на высоком уровне)

В процессе обработки выходные узлы могут содержать лёгкие метаданные сопоставления с источником (например, data-sourcepos="start:end" или аналогичные).

В предпросмотре редактора:

  • При клике / выделении переходить вверх по DOM к ближайшему узлу с метаданными позиции в источнике.
  • Использовать существующий API редактора для установки диапазона выделения в исходном редакторе и прокрутки его в поле зрения.

Такой вид сопоставления с источником уже концептуально существует в инструментах CommonMark, и блоки математики, в частности, являются естественными кандидатами, поскольку они уже токенизируются отдельно.

Почему это было бы ценно

  • Значительно более быстрая итерация при работе с контентом, насыщенным математикой
  • Снижение когнитивной нагрузки при редактировании длинных технических постов
  • Делает панель предпросмотра по-настоящему интерактивной, а не пассивной
  • Хорошо масштабируется на другие обработанные элементы, помимо математики

Готов подготовить короткую GIF-анимацию, если это поможет проиллюстрировать взаимодействие.

2 лайка