// Render eslint message as marker in monaco _updateMarkers(message) { window.requestAnimationFrame(() => { const model = this.editor.getModel(); if (model && model.getVersionId() === message.data.version) { monaco.editor.setModelMarkers(model, 'eslint', message.data.markers); } }); }
// Pass code to eslint linterWorker for processing _lintCode(code) { const model = this.editor.getModel(); monaco.editor.setModelMarkers(model, 'eslint', []); this._linterWorker.postMessage({ code, version: model.getVersionId(), }); }
// Setup or restore monaco model for the opening file path _openFile(path) { let model = this._initializeFile(path); // Restore the editor state for the file const editorState = this.editorStates.get(path); if (editorState) { this.editor.restoreViewState(editorState); } // Bring browser focus to the editor text this.editor.focus(); // Subscribe to change in value so we can notify the parent this._subscription = model.onDidChangeContent(() => { const value = model.getValue(); this.props.onValueChange(value); this._lintCode(value); }); }
componentDidUpdate(prevProps) { const { path/*, ...rest*/ } = this.props; //this._editor.updateOptions(rest); * TODO - Ryan if (path !== prevProps.path) { this.editorStates.set(prevProps.path, this.editor.saveViewState()); this._openFile(path); } else { const model = this.editor.getModel(); if (value !== model.getValue()) { model.pushEditOperations( [], [ { range: model.getFullModelRange(), text: value, } ] ); } } }
componentDidMount() { const path = window.require('path'); const fs = window.require('fs'); var file = fs.readFileSync(this.props.path, { encoding: 'utf8' }); // initialize editor this.editor = monaco.editor.create(document.getElementById('editor-container'), { language: this._getLanguage(this.props.path), theme: 'ayu-dark', lineNumbers: 'on', wordWrap: 'on', scrollBeyondLastLine: false, automaticLayout: true, glyphMargin: true }, ); // Intialize the linter this._linterWorker = new ESLintWorker(); this._linterWorker.addEventListener('message', (message) => { this._updateMarkers(message); }); this._openFile(this.props.path); }
let model = monaco.editor .getModels() .find(model => model.uri.path === path); model.pushEditOperations( [], range: model.getFullModelRange(), text: value, }, model = monaco.editor.createModel( value, this._getLanguage(this.props.path), new monaco.Uri().with({ path }), model.updateOptions({ tabSize: 2, insertSpaces: true, }); this.editor.setModel(model); return model;
onSave() { console.log(this.editor.getValue()) }
componentWillUnmount() { this.editor.dispose(); }
render() { const options = { selectOnLineNumbers: true, model: monaco.editor.getModel(Uri.parse("file:///main.tsx")) || monaco.editor.createModel(code, "typescript", monaco.Uri.parse("file:///main.tsx")) } return ( <MonacoEditor width="800" height="800" language="typescript" theme="vs-dark" defaultValue='' value={this.state.code} onChange={this.onChange} editorWillMount={this.editorWillMount} editorDidMount={this.editorDidMount} options={options} /> ) }