Comments (29)
+1 on including setEditableRange
and setHiddenAreas
.
from monaco-editor.
I noticed that, although being a user feature request, setEditableRange
seems to be removed from vscode as "unused code" as part of this issue
Please consider re-including a setEditableRange
into the supported API.
It is useful in education and/or alongside code-generation; use cases where the user isn't intended to edit all of the source file.
from monaco-editor.
Would be greatt for my case, too. I would like the user to write code that contains the await keyword without exposing him to the async function around. So basically I would like to wrap the user code inside this:
(async () => {
//user code goes here
})()
Without exposing this wrapper function to my user.
from monaco-editor.
The internal ICodeEditor.setHiddenAreas(IRange[])
works well for this. It's an internal API but its used heavily in the newer notebooks stuff, so I'm willing to take the risk. I'm using the editor to view logs, and I wanted to be able to filter them in a way that hides anything that doesn't match and it works well.
editor.setHiddenAreas([])
will show them again, and editor.setHiddenAreas([new Range(1,0,10,0), new Range(20,0,30,0)]);
will hide the first 10 and last 10 of a 30 line file. Line numbers stay correct for the areas shown.
I'd like to propose to maintainers that this api become public, this is a useful feature.
from monaco-editor.
any update on this issue?
I'm making a 'code-playground' and I'd really like to have monaco hide some import statements.
(I couldn't get typescript to 'globalize' modules)
from monaco-editor.
If you are using typescript, you can use
monaco.languages.typescript.typescriptDefaults.addExtraLib('const arr = [];')
to achieve similar effect. Now arr
variable will appear in intellisense.
from monaco-editor.
I have the same requirement, where ideally I would have a few lines hidden before and after the user code, this way the user wouldn't have to worry about boilerplate code and at the same time VSCode would still validate the code as if the boilerplate was wrapping the user code.
For instance on my case i would like the user to edit:
myEvent: (data) => {
// do something
},
anotherEvent: (data) => {
// do something
},
And before validating I would like to wrap it all in events = { ${code} }
basically making a simplification for my user to edit a javascript object.
from monaco-editor.
Any update on this?
from monaco-editor.
Sorry for the late reply, there is a non-API way (might get removed in the future):
editor.getMode().setEditableRange(myRange)
.
interface IModel {
...
/**
* Set an editable range on the model.
* @internal
*/
setEditableRange(range:IRange): void;
...
}
from monaco-editor.
So I made a solution, at least for some cases. I've made the first and last line uneditable.
If what you want to achieve is doable with addExtraLib
, do use it. This is a nice official way to add typings and stuff. My solution handles the case where it was not enough, mainly to change the context of functions (change to what this
points).
For my game editor ct.js, I ended up with tons of hacks that establish hidden and uneditable lines around the code: https://github.com/ct-js/ct-js/blob/develop/src/js/codeEditorHelpers.js#L74
Beware: it uses several unofficial APIs and this is not a solution to the original issue, but a collection of hacks due to the absence of better alternatives.The hacks block direct editing from a keyboard, manage cursors and selectors, handle "Replace all" command, and hide the first and the last lines. Some constants are hard-coded, so you will need to improve the code for multiple hidden lines. The known issue is that you can view and delete the hidden code in the peek view, as it creates additional editors.
from monaco-editor.
Ideas:
onDidChangeCursorPosition
andonDidChangeCursorSelection
, then force the cursor away from read-only rangesdeltaDecorations
to make read-only appear in grey
I would like to add one more idea, if we undo the values entered in the areas which we marked as read-only, then user wont feel like that area is editable, and we can show it as a boilerplate code for the users
Actually i tried implementing this idea and for me it is working pretty well.
If you are interested to see the demo please check this link
If anyone wants to know more about the implementation read this article
For the code , see the github repo
from monaco-editor.
Looking for this as well.
from monaco-editor.
How do you expose the API?
One way is to extend the interface and then cast your instance to that interface and call the method:
interface IMyStandaloneCodeEditor extends monaco.editor.IStandaloneCodeEditor {
setHiddenAreas(range: monaco.IRange[]): void;
}
...
const casted = editor as IMyStandaloneCodeEditor;
const range = new monaco.Range(1, 0, 1, 0);
casted.setHiddenAreas([range]);
from monaco-editor.
Hi @alexdima.
It looks like setEditableRange
and setHiddenAreas
are no longer a part of the API. I would really appreciate it if you could suggest a workaround for this if you're aware of any.
from monaco-editor.
I need this functionality also. I'm currently working out a way to approximate the behaviour perhaps by intercepting and cancelling edits in "read only" ranges.
Ideas:
onDidChangeCursorPosition
andonDidChangeCursorSelection
, then force the cursor away from read-only rangesdeltaDecorations
to make read-only appear in grey- Toggle read-only mode based on whether editing is currently permitted:
editor.updateOptions({ readOnly: true|false })
Edit: Added third idea above
from monaco-editor.
It looks like
setEditableRange
andsetHiddenAreas
are no longer a part of the API. I would really appreciate it if you could suggest a workaround for this if you're aware of any.
setHiddenAreas
still seems to be there, but setEditableRange
does appear to be gone.
Current vscode/main/src/vs/editor/editorBrowser.ts
it will appear as though its not there, you just have to @ts-ignore
or cast to any when using it in ts (editor as any).setHiddenAreas(...)
you won't get any code completion for it, but it will work.
The current published version 0.34.1 this still works. here it is in the playground
from monaco-editor.
The editor I'm trying to modify its values is not created by me, I am making use of
window.editor
to get the model instance. I've snooped around and can't seem to find an elegant way of getting the current editor's instance since I'm not creating the editor myself andwindow.editor.setHiddenAreas()
wouldn't work. Is there a way to navigate around that?
@Gbahdeyboh monaco.editor.getEditors()
returns an array of editor instances, if you have access to the global monaco object you can get access to the editor instance I'm guessing window.editor is that but I'm not sure. If you're not driving monaco, then the more advanced things you try to do the harder it's going to be. GL!
from monaco-editor.
Thank you,
this helps a lot.
In addition i solved to hide parts of the code by calling:
editor.setHiddenArea(myRange)
But for that to work I had to overwrite the FoldingController, it also handles the hidden Areas and was overriding mine.
Would be great to have a build in way to hide Areas in combination with the Folding controller.
from monaco-editor.
👍 we plan at one point to make setHiddenArea
more cooperative. Today the FoldingController thinks it owns those.
from monaco-editor.
Any update on this issue ?
from monaco-editor.
now it's called setHiddenAreas
however it doesn't honor the startColumn
or endColumn
:(
So it hides whole lines! Can we add support to hide specific columns please!
from monaco-editor.
Never mind, I can do this :)
const matches = contentModel.findMatches("someregex", false, true, false, null, true);
contentModel.applyEdits(matches.map(x => {
return {
text: "",
range: x.range
}
}));
However, the use case is that I would need to is to colorize using monaco.editor.ITokenThemeRule[]
and then strip the things out. As soon as I strip them out, the line renders again and hence the colors are gone ... :(
from monaco-editor.
If you are using typescript, you can use
monaco.languages.typescript.typescriptDefaults.addExtraLib('const arr = [];')
to achieve similar effect. Now
arr
variable will appear in intellisense.
And it is better use like this
import Space, { env as EnvClass } from 'vpt';
declare global {
const space: Space;
const env: typeof EnvClass;
}
from monaco-editor.
Can we hide parts of the code instead of folding it or making it read only?
from monaco-editor.
Any update on this one ?
from monaco-editor.
Any update?
from monaco-editor.
Is there any update on this API? Or any available workarounds to disable a bunch of lines for editing in monaco?
from monaco-editor.
The internal
ICodeEditor.setHiddenAreas(IRange[])
works well for this. It's an internal API but its used heavily in the newer notebooks stuff, so I'm willing to take the risk. I'm using the editor to view logs, and I wanted to be able to filter them in a way that hides anything that doesn't match and it works well.
editor.setHiddenAreas([])
will show them again, andeditor.setHiddenAreas([new Range(1,0,10,0), new Range(20,0,30,0)]);
will hide the first 10 and last 10 of a 30 line file. Line numbers stay correct for the areas shown.I'd like to propose to maintainers that this api become public, this is a useful feature.
How do you expose the API?
from monaco-editor.
Thanks, @RickeyWard. I've been doing it wrong. I was trying to .setHiddenAreas
on a model instance.
The editor I'm trying to modify its values is not created by me, I am making use of window.editor
to get the model instance. I've snooped around and can't seem to find an elegant way of getting the current editor's instance since I'm not creating the editor myself and window.editor.setHiddenAreas()
wouldn't work. Is there a way to navigate around that?
from monaco-editor.
Related Issues (20)
- [Bug] DiffEditor with glyphMargin: false, still renders glyphMargin when rendered side by side. HOT 1
- [Bug] Monaco does not render markers of the dedicated model after switching to this model. HOT 1
- [Bug] Tab only accept the empty space HOT 3
- how to convert luau.tmLanguage.json to a something setMonarchLanguageProvider will accept
- [Bug] There is always a focus-border around editor when editor background is transparent HOT 1
- [Bug] Support CSS :has() pseudo-class HOT 1
- _foreignProxy from createWebWorker never resolved
- Zonde does not move to the next line if you add a line break on the line before it
- Reopen "Background color does not seems to be working on monaco.editor.defineTheme rules section." HOT 2
- [Bug] "Developer: Inspect Editor Tokens and Scopes" causes error HOT 1
- [Feature Request] Support for package.json conditional exports map, for extra libs typings acquisition HOT 1
- [Bug] d.classList is undefined
- [Bug] typescript type check HOT 1
- [Bug] Wrong cursor position if editor has `transform: scale(0.4);` HOT 1
- [Bug] Update Inlay Hints Provider Example to use `paddingRight` and `paddingLeft`
- [Feature Request] completionItems with insertText having quotes can have extra quotes in the front
- [Bug] paste by ctrl+v not working inside editor after update to 0.46.0 HOT 1
- [Bug] Glyph margin decorations/widgets for deleted lines not rendering in the inline view
- [Bug] createScopedLocalize is undefined HOT 1
- [Bug] Crash / Slowness when JSON Schema is applied
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from monaco-editor.