Northern Pileated Marmoset

    @typefox/monaco-editor-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0-next.6 • Public • Published

    React component for Monaco-Editor and Monaco Languageclient

    This packages provides a React component that wraps monaco-editor. It behaves in nearly the same way as the monaco editor, with the primary difference being that you interact with it through a React component.

    The monaco-languageclient can be activated to connect to a language server either via jsonrpc over a websocket to an exernal server process or via language server protocol for browser where the language server runs in a web worker.

    Getting Started

    If you have node.js LTS available, then from the root of the project run:

    npm i
    npm run build

    Afterwards launch the Vite.js development mode:

    npm run dev

    You find examples (manual human testing) in the root of the repository index.html. They can be used once Vite is running.

    Usage

    You can import the monaco react component for easy use in an existing React project. Below you can see a quick example of a fully functional implementation for some TypeScript.

    import { MonacoEditorReactComp, addMonacoStyles } from 'monaco-editor-react/allLanguages';
    
    const languageId = 'typescript';
    const codeMain = `function sayHello(): string {
        return "Hello";
    };`;
    
    const comp = <MonacoEditorReactComp
        languageId={languageId}
        text={codeMain}
        style={{
            'paddingTop': '5px',
            'height': '100%',
            'width': '100%'
        }}
    />;

    You can also pass in custom syntax highlighting using the Monarch language. Here's an example for a simple statemachine language.

    // helps to bring in Monaco from the react component, but not required
    import { monaco } from 'monaco-editor-react';
    
    const syntaxHighlighting = {
      keywords: [
          'actions', 'commands', 'end', 'events', 'initialState', 'state', 'statemachine'
      ],
      tokenizer: {
          root: [
              [/[a-z_$][\w$]*/, {
                  cases: {
                      '@keywords': 'keyword',
                      '@default': 'identifier'
                  }
              }],
              { include: '@whitespace' }
          ],
          comment: [
              [/[^\/*]+/, 'comment'],
              [/\/\*/, 'comment', '@push'],
              ["\\*/", 'comment', '@pop'],
              [/[\/*]/, 'comment']
          ],
          whitespace: [
              [/[ \t\r\n]+/, 'white'],
              [/\/\*/, 'comment', '@comment'],
              [/\/\/.*$/, 'comment'],
          ]
      }
    } as monaco.languages.IMonarchLanguage;
    
    ...
    
    <MonacoEditorReactComp
        languaegId="statemachine"
        text={codeMain}
        syntax={syntaxHighlighting}>

    Bundled Usage

    For special cases where you might want the component to be processed in advance, so we also provide a pre-bundled version that you can reference instead. This can be helpful if you're working within some other framework besides React (Hugo for example).

    import { MonacoEditorReactComp } from '@typefox/monaco-editor-react/bundle';
    
    // use this utility funciton to add monaco-editor css/ttf when using the bundle
    addMonacoStyles('monaco-editor-styles');
    ...
    
    const comp = <MonacoEditorReactComp languageId="statemachine" text={codeMain}/>

    Invoking Custom Commands

    An experimental feature.

    If you have hooked up this component to talk with a language server, then you also may want to invoke custom LSP commands. This can be helpful when you want to perform specific actions on the internal representation of your language, or when you want to expose some details about your language for use in your React application. This could include generator functionality, such that other parts of your application can interact with your language without knowledge of the language server's internals.

    Custom commands can be invoked by getting a reference to your Monaco component. This breaks the standard encapsulation that React is built on, so no guarantees this won't cause other issues with your React app.

    // based on the official React example for refs:
    // https://reactjs.org/docs/refs-and-the-dom.html#creating-refs
    
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.myRef = React.createRef();
      }
    
      render() {
        return <MonacoEditorReactComp ref={this.myRef} .../>;
      }
    }

    You can then access the current property of the ref to get a refernce to your component. This can then be used to invoke the executeCommands function present in the component.

    this.myRef.current.executeCommand('myCustomCommand', args...);

    This will return an instance of Thenable, which should contain the returned data of executing your custom command. As you can imagine, this is incredibly helpful for getting internal access for specific language handilng, but without needing details about the internals of your language server to do it.

    Install

    npm i @typefox/monaco-editor-react

    DownloadsWeekly Downloads

    13

    Version

    1.0.0-next.6

    License

    MIT

    Unpacked Size

    10.5 MB

    Total Files

    16

    Last publish

    Collaborators

    • kaisalmen
    • msujew
    • typefox-team
    • spoenemann