react-monaco-tm

    1.1.1 • Public • Published

    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
    

    Install

    npm i react-monaco-tm

    DownloadsWeekly Downloads

    3

    Version

    1.1.1

    License

    ISC

    Unpacked Size

    956 kB

    Total Files

    42

    Last publish

    Collaborators

    • ozonep