react-monaco-tm

Monaco Editor as React component with TextMate grammar support

WIP!

It's in testing phase.

Monaco Editor for React.

react-monaco-tm

Installation

yarn add react-monaco-hooks

Using with Webpack

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import MonacoEditor from 'react-monaco-tm';
 
function App(props) {
  const [code, setCode] = useState('// type your code...');
   
  const editorDidMount = (editor, monaco) => {
    console.log('editorDidMount', editor);
    editor.focus();
  };
  
  const onChange = (newValue, e) => {
    console.log('onChange', newValue, e);
  };
  
  const options = {
    selectOnLineNumbers: true
  };
  
  return (
    <MonacoEditor
      width="800"
      height="600"
      theme="vs-dark"
      value={code}
      options={options}
      onChange={onChange}
      editorDidMount={editorDidMount}
    />
   );
}
 
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Add the Monaco Webpack plugin monaco-editor-webpack-plugin to your webpack.config.js:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin-updated');
module.exports = {
  plugins: [
    new MonacoWebpackPlugin()
  ]
};

Properties

All the properties below are optional.

• width width of editor. Defaults to 100%.
• height height of editor. Defaults to 100%.
• value value of the auto created model in the editor.
• defaultValue the initial value of the auto created model in the editor.
• language the initial language of the auto created model in the editor.
• theme the theme of the editor
• options refer to Monaco interface IEditorConstructionOptions.
• onChange(newValue, event) an event emitted when the content of the current model has changed.
• editorWillMount(monaco) an event emitted before the editor mounted (similar to componentWillMount of React).
• editorDidMount(editor, monaco) an event emitted when the editor has been mounted (similar to componentDidMount of React).
• context allow to pass a different context then the global window onto which the monaco instance will be loaded. Useful if you want to load the editor in an iframe.

Options for Monaco Editor instance:

Refer to Monaco interface IEditor.

Events & Methods

Refer to Monaco interface IEditor.

Q & A

I don't get syntax highlighting / autocomplete / validation.

Make sure to use the Monaco Webpack plugin or follow the instructions on how to load the ESM version of Monaco.

How to get value of editor

const model = monaco.editor.getModel();
const value = model.getValue();

Available themes:

"vs",
"vs-dark",
"hc-black"
"one-dark" //One Dark Pro theme, default one