monaco-editor – Tarik Billa

Monaco editor dynamically resizable

August 4, 2023 by Tarik

TL;DR: add automaticLayout: true to your editor’s configuration. NL;PR: Monaco has a built-in auto resize to parent container functionality: createEditorWithAutoResize(){ this.editor = monaco.editor.create( this.editorDiv.current, { value: “var x = 0;”, language: ‘javascript’, automaticLayout: true // <<== the important part } ); } componentDidMount(){this.createEditorWithAutoResize();} constructor(props){super(props); this.editorDiv = React.createRef();} render(){return <div ref={this.editorDiv} className=”editor” ></div>} And the CSS … Read more

Get the value of Monaco Editor

July 20, 2023 by Tarik

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); }