microsoft
Provide ability to block editing specific lines
Monaco is a great editor for providing programmatic interfaces for users to an application.
One feature that'd significantly help with the user experience is to make specific lines read-only, such that user can enter their code within a specific block (e.g., between a function block).
Would it be possible to include this as a core features/API of the editor?
Thank you for the reply. I have seen the previous issue, and this request is essentially another plea to reconsider adding back the feature (or providing some sort of native alternative).
Providing editable/read-only ranges is really useful, and the hack suggested is rather dirty/doesn't make for a good experience.
For example, consider an educational software where the following template is created, and the user/student has to enter their code in between:
function foo(arg1, arg2) {
// your code goes here
}
Yes, this would be amazingly useful for me as well, I am even considering to switch from Ace editor, if this feature can be implemented in Monaco.
Agree this would be indeed very helpful for a scenario I'm having with a current app. Based on the comment in the first line (which contains meta) additional rules are applied. So having the first line locked down in order to prevent the user from unintentionally deleting it (CTRL+A DEL) would be awesome.
@virus2016 nope... but if you use monaco editor version 0.4.X ... you can do that...
Yeah, that would be really useful for me as well, I am thinking to use monaco editor for our production
@alexandrudima is it something that can be implemented elegantly with the editor's current design? will you accept a PR adding back this functionality, assuming you answered yes on the former question?
I'm not sure from reading these discussions if this is a hopeless cause or simply lacking interest and manpower.
Perhaps this can be solved by a different kind of solution, like adding a before-change event which offers a canceling mechanism for changes... Any alternative which isn't a hack would be a blessing..
Another use case is wrapping code in a function when the context is different from globalThis. E.g. in my game editor, I have fields for editing several functions that are executed by specific classes, and thus I need a code like this to tell the context to Typescript, with "frozen" first and last lines:
function onCreate(this: Copy) {
// User-written code
}
I would personally appreciate a little more granularity than just 'lines', possibly a character range, with helper methods for doing lines?
Is there any update on this issue? Any possible workarounds for non-js files meanwhile?
@mehulmpt probably... there was no update for this issues for about 2 year... maybe? m.m
@rcjsuen How to achive this using existing monaco api?
@GNSubrahmanyam Sorry, I have no idea. This is not something I have ever tried to investigate as I do not have this use case in my own use of the Monaco Editor.
Example
from line 14 it should me editable.
If you use SetEditableRange function() then you should use previous Version of Monaco Editor. Probabley... I think you can find previous version in release history in github page.. (0.13.X?... I think) good luck.
@GNSubrahmanyam, I think this post will be useful for you. I have created a way to restrict editable area in monaco-editor. This basically undos the values typed in the restricted area. You can see the demo here. I am not sure whether it will have good performance ( Try it by yourself in the demo ) , But I thought something is better than nothing. You can refer the complete code here
This is a feature that we need, we have had to hack around it, just wanted to add a +1
it's not really complicated to implement this:
const editor = monaco.editor.create(document.getElementById("container"), {
value: [
"const readonlyRange = new monaco.Range (10, 0, 15, 0)",
"editor.onKeyDown (e => {",
" const contains = editor.getSelections ().findIndex (range => readonlyRange.intersectRanges (range))",
" if (contains !== -1) {",
" e.stopPropagation ()",
" e.preventDefault ()",
" }",
"})",
].join ("\n"),
language: "javascript"
})
const readonlyRange = new monaco.Range (5, 0, 7, 0)
editor.onKeyDown (e => {
const contains = editor.getSelections ().findIndex (range => readonlyRange.intersectRanges (range))
if (contains !== -1) {
e.stopPropagation ()
e.preventDefault () // for Ctrl+C, Ctrl+V
}
})
it's not really complicated to implement this:
const editor = monaco.editor.create(document.getElementById("container"), { value: [ "const readonlyRange = new monaco.Range (10, 0, 15, 0)", "editor.onKeyDown (e => {", " const contains = editor.getSelections ().findIndex (range => readonlyRange.intersectRanges (range))", " if (contains !== -1) {", " e.stopPropagation ()", " e.preventDefault ()", " }", "})", ].join ("\n"), language: "javascript" }) const readonlyRange = new monaco.Range (5, 0, 7, 0) editor.onKeyDown (e => { const contains = editor.getSelections ().findIndex (range => readonlyRange.intersectRanges (range)) if (contains !== -1) { e.stopPropagation () e.preventDefault () // for Ctrl+C, Ctrl+V } })
This idea is quite simple and elegant, but i guess this has its downsides. These ranges seems static, so if I press enter on line no 4 , it becomes line 5 and my previous content ( content which has to be readonly ) in line 7 goes to 8, thus making it editable
Please refer the video for demo
https://user-images.githubusercontent.com/29809906/113811043-1abf7200-9789-11eb-8628-06b55aface6d.mov
PS : If you are interested please refer my way of implementing restricted editor which will handle the above downside. The link for the website is available here
Indeed my comment is a little naive. There are many special cases to deal with. I hadn't seen your post and code, and created mine with a different approach.
I have not tested it in real cases but you can try it in the playground: https://gist.github.com/corbane/37c8751b6c60018a03fa4dd3ea48bf3e