require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
window.editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
});
function save() {
// get the value of the data
var value = window.editor.getValue()
saveValueSomewhere(value);
}
Answer from Jonathan on Stack Overflow
» npm install @monaco-editor/react
require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
window.editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
});
function save() {
// get the value of the data
var value = window.editor.getValue()
saveValueSomewhere(value);
}
Both the editor and the model support getting the contents:
monaco.editor.IModel.getValue()monaco.editor.IStandaloneCodeEditor.getValue()
So as long as you keep a reference to the editor or model you can query the contents:
var editor = monaco.editor.create(...);
var text = editor.getValue();
Or in case of the model:
var model = monaco.editor.createModel(...);
var text = model.getValue();
If you have a diff-editor you cannot access the text directly on the editor but you can access them on the individual models (i.e. through IStandaloneDiffEditor.getModel()):
var diffEditor = monaco.editor.createDiffEditor(...);
var originalText = diffEditor.getModel().original.getValue();
var modifiedText = diffEditor.getModel().modified.getValue();
Or through the different editors (getModifiedEditor() and getOriginalEditor()):
var originalText = diffEditor.getModifiedEditor().getValue();
var modifiedText = diffEditor.getOriginalEditor().getValue();
Just in case you're interested in a part of the text, the model also supports getValueInRange() which gives you the text in a specified range, delimited by a starting and ending column and linenumber, for example:
var editor = monaco.editor.create(...);
var model = editor.getModel();
var partOfTheText = model.getValueInRange({
startLineNumber: 1,
startColumn: 2,
endLineNumber: 3,
endColumn: 10,
})
I have come up with one solution that works for me but I am still interested if others have ideas.
So what I did was:
- create a local state variable in my component and initialize to the code prop.
- in the onChange method, instead of calling the action creator, I update local state.
- I added an idle timer to the component set to one second. So if the user stops typing for one second, it will call the action creator to update redux.
My approach is two-fold:
If immediate action is needed (e.g. code completion) then I execute the task on each change.
If an action can be delayed (e.g. error checking) then the actual change doesn't matter. In that case I start a timer (which is reset on each change) and runs the required actions, once it fires. No need to keep state in this case, since it is not necessary.
Of course, if the actual change still matters (say, to limit an action to a certain range that got modified since the last run) then you would of course need to store it (or a derived value, like a range).
» npm install @monaco-editor/react
» npm install react-monaco-editor