Code editor on a web page (React), what are the options?

Question

JavaScript

Good afternoon.
I am looking for options for a text editor of html, js, css files on the page, key requirements: syntax highlighting, the ability to add custom rules for highlighting (files may not be completely valid, all sorts of dynamic ones will be substituted), the ability to work with large files (1000+ lines ) without pain
What I tried:
https://www.npmjs.com/package/react-ace - could not find options to add custom rules for highlighting parts of the code.
https://prismjs.com/ is a great way to create code highlighting, everything is customizable, but there is no working editor out of the box.
https://www.npmjs.com/package/react-simple-code-editor- this thing, as stated, works with prismjs, but it does it very poorly: in the case of lines slightly wider than the screen width, everything goes.
At the moment I see only one solution: a custom component based on prismjs, but it will take a lot of work on performance.
If faced with similar tasks - tell me, maybe there is some kind of ready-made solution that I did not notice?
Thanks in advance

Answer 1

I highly recommend ace editor
The version for react is in the link. Very easy to set up and very good functionality.
UPD.
I almost forgot, there is also codemirror , it has an advantage in a large number of editor state controls, for example, you can make a preview, for students, of some kind of code, how to write it in stages, so that the code in the editor itself is written and the result is shown in parallel.
The same can be done through ace, but codemirror is easier. And ace has more features as an editor.