This application shows how we can restrict editing of certain places in monaco editor.
To see the repository click here
- Actual Code
- Why this snippet is needed ?
- How this is achieved ?
- So, What it does ?
- Use Cases
- See Part 2
- Might Solve this
setEditableRange functionality was removed from it. Refer this.
This snippets tries to establish the restriction in editable area
- This snippet needs the start and end phrases, to which the editable restriction has to be implemented
onDidChangeContentFasthooks is watched for the changes and if that change is not happening in the allowed area the
undowill be triggered, which nullifies the content which is typed/pasted
- Promise.resolve() - is used to move the
undoingfunction to the microtask queue , by this monaco editor is allowed to do its stuff and once it gets completed, this
undoingfunction gets triggered
- The area above the start phrase and end phrase will be restricted
Note : Microtask queue is having more priority than Event queue, thus Promise.resolve becomes a better option than setTimeout(fn,0) in this scenario
By this, we can create an
illusionlike, nothing is allowed to type in the restricted area, but what actually happens is all the typed values are getting undo once it is getting typed in the restricted area
- Advantage of using this snippet is
there will not be any UI lag while undoing, Previously when using setTimeout, the undoing operation will be visible to the user
- Autocompletion suggestions from the restricted area will be available
- This requires starting and ending phrase
- I haven't tested this code with large amount of pasting of texts, So it may break at that stage. This will work fine for typing
- If you are trying to design an online coding interview platform using monaco editor and you wish to allow the candidates to edit only certain places, This can be used
This might become a solution to this github issue