Редактор кода на веб-странице(React), какие могут быть варианты?

Question

[Афанасий Захаров]

Добрый день.

Ищу варианты для текстового редактора html, js, css файлов на странице, ключевые требования: подсветка синтаксиса, возможность добавлять кастомные правила для подсветки (файлы могут быть не полностью валидные, будут подставляться всякие динамические), возможность для работы с большими файлами (1000+ строк) без боли

Что попробовал:
https://www.npmjs.com/package/react-ace - не смог найти варианты, чтобы добавить кастомные правила подсветки частей кода.

https://prismjs.com/ - отличный способ создавать подсветку кода, все кастомизируется, но нет рабочего редактора "из коробки".

https://www.npmjs.com/package/react-simple-code-editor - эта штука, как заявлено, работает с prismjs, но делает это очень плохо: в случае со строками чуть шире, чем ширина экрана все едет.

В текущий момент вижу только одно решение: кастомный компонент на основе prismjs, но надо будет очень много работать над перформансом.

Если сталкивались с похожими задачами - подскажите, может есть какое то готовое решение, которое я не заметил?
Заранее спасибо

Answer 1

[Сергей Сунцев]

Очень сильно советую ace editor
В ссылке версия для реакта. Очень просто настраивается, и оч хороший функционал.

UPD.
чуть не забыл, есть ещё codemirror, у него преимущество в большом кол-ве управлений состоянием редактора, к примеру можно сделать превью, для студентов, какого то кода, как поэтапно его писать, чтоб код в редакторе сам писался и параллаельно показывался результат.
Тоже самое можно сделать и через ace, но codemirror проще. А в ace больше возможностей, как редактора.

Comments

[Афанасий Захаров]

я прошу прощения, но кажется вы меня не поняли.
В тексте вопроса есть упоминание этого редактора, и я не смог найти вариантов добавить кастомные настройки для подсветки невалидных с точки зрения html или js конструкций.

Если вы знаете, как это сделать - подскажите пожалуйста.

[Афанасий Захаров]

За codemirror спасибо, сейчас посмотрю, подойдет ли он

[Сергей Сунцев]

Афанасий Захаров, в ace вместо выделения можно использовать анотации (в параметрах с.м. annotations), но конечно это не то.