How to "Freeze" some lines from editing at monaco editor?

Question

I want to load JavaScript file contents to the editor but "freeze" some lines. Best way to do that?

Let's say there are 100 lines of code.

I want the user to be able to edit anything between line 10-90th but don't allow to edit between 0-10th or 90-100th.

Doing that inside create-react-app application. Looking for way w/o ejecting the react scripts.

Answer 1

I just found the solution. While I'm working with create-react-app application I used this:

https://github.com/SurenAt93/monaco-react#controlled-editor

But the idea is the same no matter the environment.

The controlled editor allows listening onChange event and return new code. So on this handler, I'm checking if the required range is not changed and if it is, I don't allow that by returning unchanged code and showing nice notification to the user which is totally unrelated to this question.