No Painful Merges

    @memsetzero/react-monaco-editor

    0.1.4 • Public • Published

    react-monaco-editor

    Use the Monaco editor within React! This project was first inspired by the work here: https://raw.githubusercontent.com/SurenAt93/monaco-react

    Purpose

    The Monaco Editor is a rich code editor, ported from Microsoft's VS Code base, written in Typescript, designed to be run from a web browser. However, it currently only supports AMD/ESM loading techniques, which makes it a challenge to use within a React application that was created and maintained with create-react-app. Most efforts require you to eject your project and modify the default webpack configuration. This project, like SurenAt93's project, aims to avoid this complexity by dynamically loading the Monaco scripts by inject some require code via script tag and using the window.monaco global space it creates.

    Installation

    yarn add @memsetzero/react-monaco-editor
    # or
    npm i @memsetzero/react-monaco-editor

    Demo

    Architecture

    In order to load the scripts a single time and allow for any number of editors to gain access to the monaco environment, I've created a MonacoProvider component, which should be near the top-level of your App and wrap any other Editor components, so they can obtain the Monaco environment via React Context.

    Controlled vs Uncontrolled

    Components/Props

    MonacoProvider

    Name Type Default Description
    theme enum: 'vs-light' | 'vs-dark' 'vs-light' Theme to be used for the Monaco environment.
    modelLanguages
    modelMarkers
    baseUrl
    loaderUrl
    workerMain

    Editor

    Name Type Default Description
    value
    options

    Controlled

    Name Type Default Description
    value
    options
    onChanged

    Uncontrolled

    Name Type Default Description
    value
    options

    DiffEditor

    Name Type Default Description
    original
    modified

    Examples

    Basic Editor

    import React from 'react';
    
    import {MonacoProvider, Editor} from '@memsetzero/react-monaco-editor';
    
    function App() {
      return (
        <MonacoProvider theme="vs-dark">
          <Editor 
            style={{width: "100%", height: "600px"}}
            value="Hello, Monaco World!"
            options={{
              lineNumbers: false
            }}
          />
        </MonacoProvider>
      );
    }
    

    Diff Editor

    import React from 'react';
    
    import {MonacoProvider, DiffEditor} from '@memsetzero/react-monaco-editor';
    
    function App() {
      return (
        <MonacoProvider theme="vs-dark">
          <DiffEditor
            style={{width: "100%", height: "600px"}}
            original={{
              value: "Hello, Monaco World!",
              language: "text/plain"
            }}
            modified={{
              value: "Hello, Monaco World, I'm different!",
              language: "text/plain"
            }}
          />
        </MonacoProvider>
      );
    }
    

    Controlled Editor

    import React, {useState} from 'react';
    
    import {MonacoProvider, Controlled as Editor} from '@memsetzero/react-monaco-editor';
    
    function App() {
      const [value, setValue] = useState("Hello, Monaco World!");
    
      return (
        <MonacoProvider theme="vs-light">
          <Editor
            style={{width: "100%", height: "600px"}}
            value={value}
            onChanged={setValue}
          />
        </MonacoProvider>
      );
    }
    

    Install

    npm i @memsetzero/react-monaco-editor

    DownloadsWeekly Downloads

    2

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    38.4 kB

    Total Files

    15

    Last publish

    Collaborators

    • memsetzero