@monaco-editor/react ·

Monaco Editor for React · use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins

• :loudspeaker: for React v19 users: check out the v4.7.0-rc.0 version (use npm install @monaco-editor/react@next or yarn add @monaco-editor/react@next) and let us know if you face any issues
• :keyboard: rewritten with TypeScript :fire:
• :zap: multi-model editor is already supported; enjoy it :tada:
• :tada: version v4 is here - to see what's new in the new version and how to migrate from v3, please read this doc (also, if you need the old version README, it's here)
• :video_game: the new section Development / Playground has been created - now you can run the playground and play with the internals of the library
• :dizzy: it's already integrated with @monaco-editor/loader

Synopsis

Monaco editor wrapper for easy/one-line integration with any React application without needing to use webpack (or any other module bundler) configuration files / plugins. It can be used with apps generated by create-react-app, create-snowpack-app, vite, Next.js or any other app generators - you don't need to eject or rewire them.

Motivation

The monaco-editor is a well-known web technology based code editor that powers VS Code. This library handles the setup process of the monaco-editor and provides a clean API to interact with monaco from any React environment

Demo

Check it out!

Documentation

• Installation
• Introduction
• Usage
  • Simple usage
  • Get value
  • editor instance
  • monaco instance
  • useMonaco
  • loader/config
  • Multi-model editor
  • onValidate
  • Notes
    • For electron users
    • For Next.js users
  • Create your own editor!
• Development / Playground
• Props
  • Editor
  • Diff Editor

Installation

npm install @monaco-editor/react # or @monaco-editor/react@next for React v19

or

yarn add @monaco-editor/react

or you can use CDN. Here is an example

NOTE: For TypeScript type definitions, this package uses the monaco-editor package as a peer dependency. So, if you need types and don't already have the monaco-editor package installed, you will need to do so

Ask AI

Monaco-React AI will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.

Introduction

Besides types, the library exports Editorand DiffEditor components, as well as the loader utility and the useMonaco hook:

import Editor, { DiffEditor, useMonaco, loader } from '@monaco-editor/react';

Usage

Simple usage

Here is an example of a simple integration of monaco editor with a React project.
You just need to import and render the Editor component:

import React from 'react';
import ReactDOM from 'react-dom';

import Editor from '@monaco-editor/react';

function App() {
  return <Editor height="90vh" defaultLanguage="javascript" defaultValue="// some comment" />;
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

codesandbox

import React from 'react';
import ReactDOM from 'react-dom';

import Editor from '@monaco-editor/react';

function App() {
  function handleEditorChange(value, event) {
    // here is the current value
  }

  function handleEditorDidMount(editor, monaco) {
    console.log('onMount: the editor instance:', editor);
    console.log('onMount: the monaco instance:', monaco);
  }

  function handleEditorWillMount(monaco) {
    console.log('beforeMount: the monaco instance:', monaco);
  }

  function handleEditorValidation(markers) {
    // model markers
    // markers.forEach(marker => console.log('onValidate:', marker.message));
  }

  return (
    <Editor
      height="90vh"
      defaultLanguage="javascript"
      defaultValue="// some comment"
      onChange={handleEditorChange}
      onMount={handleEditorDidMount}
      beforeMount={handleEditorWillMount}
      onValidate={handleEditorValidation}
    />
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

Get value

There are two options to get the current value:

1. get the current model value from the editor instance

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';

import Editor from '@monaco-editor/react';

function App() {
  const editorRef = useRef(null);

  function handleEditorDidMount(editor, monaco) {
    editorRef.current = editor;
  }

  function showValue() {
    alert(editorRef.current.getValue());
  }

  return (
    <>
      <button onClick={showValue}>Show value</button>
      <Editor
        height="90vh"
        defaultLanguage="javascript"
        defaultValue="// some comment"
        onMount={handleEditorDidMount}
      />
    </>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

codesandbox

1. get the current model value via onChange prop

import React from 'react';
import ReactDOM from 'react-dom';

import Editor from '@monaco-editor/react';

function App() {
  function handleEditorChange(value, event) {
    console.log('here is the current model value:', value);
  }

  return (
    <Editor
      height="90vh"
      defaultLanguage="javascript"
      defaultValue="// some comment"
      onChange={handleEditorChange}
    />
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

codesandbox

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';

import { DiffEditor } from '@monaco-editor/react';

function App() {
  const diffEditorRef = useRef(null);

  function handleEditorDidMount(editor, monaco) {
    diffEditorRef.current = editor;
  }

  function showOriginalValue() {
    alert(diffEditorRef.current.getOriginalEditor().getValue());
  }

  function showModifiedValue() {
    alert(diffEditorRef.current.getModifiedEditor().getValue());
  }

  return (
    <>
      <button onClick={showOriginalValue}>show original value</button>
      <button onClick={showModifiedValue}>show modified value</button>
      <DiffEditor
        height="90vh"
        language="javascript"
        original="// the original code"
        modified="// the modified code"
        onMount={handleEditorDidMount}
      />
    </>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

editor instance

The editor instance is exposed from the onMount prop as a first parameter, the second is the monaco instance

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';

import Editor from '@monaco-editor/react';

function App() {
  const editorRef = useRef(null);

  function handleEditorDidMount(editor, monaco) {
    // here is the editor instance
    // you can store it in `useRef` for further usage
    editorRef.current = editor;
  }

  return (
    <Editor
      height="90vh"
      defaultLanguage="javascript"
      defaultValue="// some comment"
      onMount={handleEditorDidMount}
    />
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

codesandbox

monaco instance

There are three options to get the monaco instance:

1. via onMount/beforeMount

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';

import Editor from '@monaco-editor/react';

function App() {
  const monacoRef = useRef(null);

  function handleEditorWillMount(monaco) {
    // here is the monaco instance
    // do something before editor is mounted
    monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
  }

  function handleEditorDidMount(editor, monaco) {
    // here is another way to get monaco instance
    // you can also store it in `useRef` for further usage
    monacoRef.current = monaco;
  }

  return (
    <Editor
      height="90vh"
      defaultLanguage="javascript"
      defaultValue="// some comment"
      beforeMount={handleEditorWillMount}
      onMount={handleEditorDidMount}
    />
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

codesandbox

1. via loader utility

import { loader } from '@monaco-editor/react';

loader.init().then((monaco) => console.log('here is the monaco instance:', monaco));

codesandbox

1. via useMonaco hook

import React from 'react';
import ReactDOM from 'react-dom';

import Editor, { useMonaco } from '@monaco-editor/react';

function App() {
  const monaco = useMonaco();

  useEffect(() => {
    if (monaco) {
      console.log('here is the monaco instance:', monaco);
    }
  }, [monaco]);

  return <Editor height="90vh" defaultValue="// some comment" defaultLanguage="javascript" />;
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

codesandbox

useMonaco

useMonaco is a React hook that returns the instance of the monaco. But there is an important note that should be considered: the initialization process is being handled by the loader utility (the reference of @monaco-editor/loader): that process is being done asynchronously and only once. So, if the first initiator of the initialization is useMonaco hook, the first returned value will be null, due to its asynchronous installation. Just check the returned value of useMonaco

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';

import Editor, { useMonaco } from '@monaco-editor/react';

function App() {
  const monaco = useMonaco();

  useEffect(() => {
    // do conditional chaining
    monaco?.languages.typescript.javascriptDefaults.setEagerModelSync(true);
    // or make sure that it exists by other ways
    if (monaco) {
      console.log('here is the monaco instance:', monaco);
    }
  }, [monaco]);

  return <Editor height="90vh" defaultValue="// some comment" defaultLanguage="javascript" />;
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

codesandbox

loader-config

The library exports (named) the utility called loader. Basically, it's the reference of @monaco-editor/loader. By default, monaco files are being downloaded from CDN. There is an ability to change this behavior, and other things concerning the AMD loader of monaco. We have a default config file that you can modify by the way shown below:

import { loader } from '@monaco-editor/react';

// you can change the source of the monaco files
loader.config({ paths: { vs: '...' } });

// you can configure the locales
loader.config({ 'vs/nls': { availableLanguages: { '*': 'de' } } });

// or
loader.config({
  paths: {
    vs: '...',
  },
  'vs/nls': {
    availableLanguages: {
      '*': 'de',
    },
  },
});

use monaco-editor as an npm package

Starting from version v4.4.0 it's possible to use monaco-editor as an npm package; import it from node_modules and include monaco sources into your bundle (instead of using CDN). To make it work you can do the following:

import * as monaco from 'monaco-editor';
import { loader } from '@monaco-editor/react';

loader.config({ monaco });

// ...

NOTE: you should be aware that this may require additional webpack plugins, like monaco-editor-webpack-plugin or it may be impossible to use in apps generated by CRA without ejecting them.

If you use Vite, you need to do this:

import { loader } from '@monaco-editor/react';

import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === 'json') {
      return new jsonWorker();
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return new cssWorker();
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return new htmlWorker();
    }
    if (label === 'typescript' || label === 'javascript') {
      return new tsWorker();
    }
    return new editorWorker();
  },
};

loader.config({ monaco });

loader.init().then(/* ... */);

codesandbox

NOTE: your passed object will be deeply merged with the default one

Multi-model editor

When you render the Editor component, a default model is being created. It's important to mention that when you change the language or value props, they affect the same model that has been auto-created at the mount of the component. In most cases it's okay, but the developers face problems when they want to implement a multi-model editor to support tabs/files like in IDEs. And previously to handle multiple models they had to do it manually and out of the component. Now, the multi-model API is supported :tada: Let's check how it works. There are three parameters to create a model - value, language and path (monaco.editor.createModel(value, language, monaco.Uri.parse(path))). You can consider last one (path) as an identifier for the model. The Editor component, now, has a path prop. When you specify a path prop, the Editor component checks if it has a model by that path or not. If yes, the existing model will be shown, otherwise, a new one will be created (and stored). Using this technique you can correspond your files with paths, and create a fully multi-model editor. You can open your file, do some changes, choose another file, and when you come back to the first one the previous model will be shown with the whole view state, text selection, undo stack, scroll position, etc. (simple demo)

Here is a simple example: let's imagine we have a JSON like representation of some file structure, something like this:

const files = {
  'script.js': {
    name: 'script.js',
    language: 'javascript',
    value: someJSCodeExample,
  },
  'style.css': {
    name: 'style.css',
    language: 'css',
    value: someCSSCodeExample,
  },
  'index.html': {
    name: 'index.html',
    language: 'html',
    value: someHTMLCodeExample,
  },
};

And here is our simple multi-model editor implementation:

import React from 'react';
import ReactDOM from 'react-dom';

import Editor from '@monaco-editor/react';

function App() {
  const [fileName, setFileName] = useState('script.js');

  const file = files[fileName];

  return (
    <>
      <button disabled={fileName === 'script.js'} onClick={() => setFileName('script.js')}>
        script.js
      </button>
      <button disabled={fileName === 'style.css'} onClick={() => setFileName('style.css')}>
        style.css
      </button>
      <button disabled={fileName === 'index.html'} onClick={() => setFileName('index.html')}>
        index.html
      </button>
      <Editor
        height="80vh"
        theme="vs-dark"
        path={file.name}
        defaultLanguage={file.language}
        defaultValue={file.value}
      />
    </>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

The properties:

• defaultValue
• defaultLanguage
• defaultPath
• value
• language
• path
• saveViewState

will give you more flexibility in working with a multi-model editor.

NOTE

defaultValue, defaultLanguage, and defaultPath are being considered only during a new model creation
value, language, and path are being tracked the whole time
saveViewState is an indicator whether to save the models' view states between model changes or not

codesandbox

onValidate

onValidate is an additional property. An event is emitted when the content of the current model is changed and the current model markers are ready. It will be fired with the current model markers

import React from 'react';
import ReactDOM from 'react-dom';

import Editor from '@monaco-editor/react';

function App() {
  function handleEditorValidation(markers) {
    // model markers
    markers.forEach((marker) => console.log('onValidate:', marker.message));
  }

  return (
    <Editor
      height="90vh"
      defaultLanguage="javascript"
      defaultValue="// let's write some broken code 😈"
      onValidate={handleEditorValidation}
    />
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

codesandbox

It's important to mention that according to monaco-editor, the whole supported languages are divided into two groups:

1. languages that have rich IntelliSense and validation

2. TypeScript

3. JavaScript
4. CSS
5. LESS
6. SCSS
7. JSON

8. HTML

9. languages with only basic syntax colorization

10. XML

11. PHP
12. C#
13. C++
14. Razor
15. Markdown
16. Diff
17. Java
18. VB
19. CoffeeScript
20. Handlebars
21. Batch
22. Pug
23. F#
24. Lua
25. Powershell
26. Python
27. Ruby
28. SASS
29. R
30. Objective-C

As you can guess, onValidate prop will work only with the languages from the first group

Notes

For electron users

As a usual React component, this one also works fine with an electron-react environment, without need to have a webpack configuration or other extra things. But there are several cases that developers usually face to and sometimes it can be confusing. Here they are:

1. You see loading screen stuck Usually, it's because your environment doesn't allow you to load external sources. By default, it loads monaco sources from CDN. You can see the default configuration. But sure you can change that behavior; the library is fully configurable. Read about it here. So, if you want to download it from your local files, you can do it like this:

import { loader } from '@monaco-editor/react';

loader.config({ paths: { vs: '../path-to-monaco' } });

1. Based on your electron environment it can be required to have an absolute URL The utility function taken from here can help you to achieve that. Let's imagine you have monaco-editor package installed and you want to load monaco from the node_modules rather than from CDN: in that case, you can write something like this:

function ensureFirstBackSlash(str) {
  return str.length > 0 && str.charAt(0) !== '/' ? '/' + str : str;
}

function uriFromPath(_path) {
  const pathName = path.resolve(_path).replace(/\\/g, '/');
  return encodeURI('file://' + ensureFirstBackSlash(pathName));
}

loader.config({
  paths: {
    vs: uriFromPath(path.join(__dirname, '../node_modules/monaco-editor/min/vs')),
  },
});

There were several issues about this topic that can be helpful too - 1 2 3 4

Also, there is a blog post about using @monaco-editor/react in Electron in offline mode. You may find it helpful.

And if you use electron with monaco and react and have faced an issue different than the above-discribed ones, please let us know to make this section more helpful

For Next.js users

Like other React components, this one also works with Next.js without a hitch. The part of the source that should be pre-parsed is optimized for server-side rendering, so, in usual cases, it will work fine, but if you want to have access, for example, to monaco instance you should be aware that it wants to access the document object, and it requires browser environment. Basically you just need to avoid running that part out of browser environment, there are several ways to do that. The one is described here

And if you use monaco with Next.js and have faced an issue different than the above-described one, please let us know to make this section more helpful

Create your own editor

Under the hood this library uses @monaco-editor/loader that provides a utility called loader. The loader utility is a collection of functions that are being used to setup monaco editor into your browser. loader.init() handles the whole initialization process and returns the instance of the monaco - loader.init().then(monaco => console.log("here is the monaco instance:", monaco)). The Editor component uses this utility, gains access to monaco instance and creates the editor. Here is the implementation of the Editor component. You can use the same technique to create your own Editor. You can just import the loader utility, access to monaco instance, and create your own editor with your own custom logic. The shortest way to do it:

import loader from '@monaco-editor/loader';

loader.init().then((monaco) => {
  const wrapper = document.getElementById('root');
  wrapper.style.height = '100vh';
  const properties = {
    value: 'function hello() {\n\talert("Hello world!");\n}',
    language: 'javascript',
  };

  monaco.editor.create(wrapper, properties);
});

That's all. You can wrap it into a React component, or Vue, or Angular or leave it as vanilla one or whatever you want; it's written in pure js

codesandbox

Development-Playground

It's always important to have a place, where you can play with the internals of the library. The playground is a minimal React app that directly uses the sources of the library. So, if you are going to open a PR, or want to check something, or just want to try the freshest state of the library, you can run the playground and enjoy it

• clone the repository

git clone https://github.com/suren-atoyan/monaco-react.git

• go to the library folder

 cd monaco-react

• install the library's dependencies

 npm install # yarn

• go to the playground

 cd playground

• install the playground's dependencies

npm install # yarn

• and run the playground

npm run dev # yarn dev

monaco-react
├── playground
│   ├── src/      # playground sources
├── src/          # library sources
└── ...

If you want to change something in the library, go to monaco-react/src/..., the library will be automatically re-built and the playground will use the latest build

Props

Editor

DiffEditor

License

MIT

Versions

4.7.0

• package: update @monaco-editor/loader to the latest (v1.5.0) version (this uses monaco-editor v0.52.2)
• package: inherit all changes from v4.7.0-rc.0

4.7.0-rc.0

• package: add support for react/react-dom v19 as a peer dependency
• playground: update playground's React version to 19

4.6.0

Oct 6, 2023

• Editor/DiffEditor: use 'use client' on top of Editor.tsx and DiffEditor.tsx
• loader: update @monaco-editor/loader version (1.4.0)
• playground: use createRoot for bootstrapping

4.5.2

Aug 23, 2023

• DiffEditor: apply updated on originalModelPath and modifiedModelPath before original and modified props

4.5.1

May 5, 2023

• DiffEditor: track originalModelPath and modifiedModelPath changes and get or create a new model accordingly
• types: fix typo in comment
• package: replace prepublish with prepublishOnly

4.5.0

Apr 7, 2023

• Editor: implement preventTriggerChangeEvent flag

from 4.5.0-beta.0

• DiffEditor: add preventCreation flag to diff editor
• project: rewrite with TypeScript
• project: implement prettier
• loader: update @monaco-editor/loader version (1.3.2)

4.5.0-beta.0

Apr 2, 2023

• DiffEditor: add preventCreation flag to diff editor
• project: rewrite with TypeScript
• project: implement prettier
• loader: update @monaco-editor/loader version (1.3.2)

4.4.6

Sep 24, 2022

• fix onChange: unconditionally call onChange inside onDidChangeModelContent
• add preventCreation flag
• update lock files

4.4.5

May 11, 2022

• loader: update @monaco-editor/loader version (1.3.2)

4.4.4

Apr 23, 2022

• package: fix npm prepublish step

4.4.3

Apr 23, 2022

• loader: update @monaco-editor/loader version (1.3.1)

4.4.2

Apr 12, 2022

• package: support react/react-dom v18 as a peer dependency

4.4.1

Mar 29, 2022

• types: add missing type monaco in loader.config

4.4.0

Mar 28, 2022

• loader: update @monaco-editor/loader version (1.3.0); using monaco from node_modules is supported
• playground: update playground packages

4.3.1

Oct 3, 2021

• types: update types according to the new loader version and the new wrapperProps property

4.3.0

Oct 3, 2021

• Editor/DiffEditor: add wrapperProps property
• DiffEditor: allow DiffEditor to use existing models
• package.json: update @monaco-editor/loader version to v1.2.0 (monaco version 0.28.1)

4.2.2

Aug 9, 2021

• Editor: onValidate integrate onDidChangeMarkers (released in v0.22.0)
• package.json: after onDidChangeMarkers integration state-local became redundant; remove it

4.2.1

Jun 21, 2021

• loader: update @monaco-editor/loader package version to the latest one (v1.1.1)
• monaco-editor: set monaco-editor peerDependency version to >= 0.25.0 < 1
• tests: update snapshots

4.2.0

Jun 13, 2021

• loader: update @monaco-editor/loader package version to the latest one (v1.1.0)
• demo: update demo examples
• tests: update snapshots

4.1.3

Apr 21, 2021

• types: add keepCurrentOriginalModel and keepCurrentModifiedModel to type definition

4.1.2

Apr 19, 2021

• DiffEditor: add keepCurrentOriginalModel and keepCurrentModifiedModel properties; indicator whether to dispose the current original/modified model when the DiffEditor is unmounted or not
• package.json: update monaco-editor peerDependency to the lates one (0.23.0)

4.1.1

Apr 2, 2021

• DiffEditor: update DiffEditor's modified value by executeEdits
• README: add an example for getting the values of DiffEditor

4.1.0

Mar 15, 2021

• loader: update @monaco-editor/loader dependency to version 1.0.1
• types: fix Theme type; vs-dark instead of dark

4.0.11

Feb 27, 2021

• Editor: add an additional check in case if line is undefined

4.0.10

Feb 16, 2021

• Editor: use revealLine for line update instead of setScrollPosition

4.0.9

Jan 29, 2021

• Editor: save and restore current model view state, if keepCurrentModel is true

4.0.8

Jan 29, 2021

• Editor: add keepCurrentModel property to the Editor component; indicator whether to dispose the current model when the Editor is unmounted or not

4.0.7

Jan 21, 2021

• Editor: fire onValidate unconditionally, always, with the current model markers

4.0.6

Jan 19, 2021

• DiffEditor: check if originalModelPath and modifiedModelPath exist in setModels function
• DiffEditor: remove originalModelPath and modifiedModelPath from defaultProps

4.0.5

Jan 19, 2021

• utils: check if path exists in createModel utility function
• Editor: remove defaultPath from defaultProps

4.0.4

Jan 18, 2021

• package.json: update husky precommit hook to remove lib folder

4.0.3

Jan 18, 2021

• Editor: enable multi-model support
• types: add path, defaultLanguage and saveViewState for multi-model support

4.0.2

Jan 18, 2021

• types: declare and export useMonaco type

4.0.1

Jan 18, 2021

• Editor: dispose the current model if the Editor component is unmounted

4.0.0

Jan 16, 2021

• package.json: update dependency (@monaco-editor/loader) version to - v1.0.0
• hooks: create useMonaco hook
• lib: export (named) useMonaco from the entry file
• monaco: rename the main utility: monaco -> loader
• Editor/Diff: rename editorDidMount to onMount
• Editor/Diff: expose monaco instance from onMount as a second argument (first is the editor instance)
• Editor/Diff: add beforeMount prop: function with a single argument -> monaco instance
• Editor: add defaultModelPath prop, use it as a default model path
• Editor: add defaultValue prop and use it during default model creation
• Editor: add subscription (onChange prop) to listen default model content change
• Editor: remove _isControlledMode prop
• Diff: add originalModelPath and modifiedModelPath props, use them as model paths for original/modified models
• ControlledEditor: remove; the Editor component, now, handles both controlled and uncontrolled modes
• package.json: move prop-types to dependencies
• types: fix types according to changed
• Editor: add onValidate prop: an event emitted when the length of the model markers of the current model isn't 0

3.8.3

Jan 8, 2021

• README: fix DiffEditor options prop type name
• types: rename index.d.ts to types.d.ts

3.8.2

Jan 7, 2021

• package.json: add @monaco-editor/loader as a dependency
• Editor/Diff Editor components: use @monaco-editor/loader instead of monaco utility
• utilities: remove utilities that were being replaced by the @monaco-editor/loader
• utilities: collect remaining utilities all in the entry file / add some new ones for the next version
• config: remove config as it's already replaced by the @monaco-editor/loader
• hooks: create usePrevious hook
• cs: coding style fixes
• build: use Rollup as a build system; now, we have bundles for cjs/es/umd

3.7.5

Jan 3, 2021

• utilities (monaco): fix state-local import

3.7.4

Dec 16, 2020

• Editor/Diff Editor components: fix componentDidMount call order
• src: (minor) some corrections according to coding style

3.7.3

Dec 15, 2020

• Editor component: set forceMoveMarkers true in executeEdits

3.7.2

Dec 5, 2020

• package: add react/react-dom 17 version as a peer dependency

3.7.1

Nov 29, 2020

• editor: fix - remove unnecessary value set before language update

3.7.0

Nov 11, 2020

• monaco: update monaco version to 0.21.2

3.6.3

Sep 22, 2020

• types: add missing props; className and wrapperClassName

3.6.2

Aug 19, 2020

• eslint: update eslint rules: add 'eslint:recommended' and 'no-unused-vars' -> 'error'
• src: refactor according to new eslint rules
• package.json: update github username, add author email

3.6.1

Aug 18, 2020

• ControlledEditor: store current value in ref instead of making it a dependency of handleEditorModelChange

3.6.0

Aug 18, 2020

• ControlledEditor: fix onChange handler issue; dispose prev listener and attach a new one for every new onChange
• ControlledEditor: do not trigger onChange in programmatic changes

3.5.7

Aug 9, 2020

• utilities (monaco): remove intermediate function for injecting scripts

3.5.6

Aug 6, 2020

• dependencies: add state-local as a dependency (replace with local-state util)

3.5.5

Aug 3, 2020

• dependencies: move @babel/runtime from peer dependencies to dependencies

3.5.4

Aug 3, 2020

• dependencies: add @babel/runtime as a peer dependency

3.5.3

Aug 3, 2020

• babel: update babel version (v.7.11.0) / activate helpers (decrease bundle size)
• hooks: move out hooks from utils to root
• utilities: remove utils/store to utils/local-state

3.5.2

Aug 2, 2020

• utilities: redesign store utility

3.5.1

July 30, 2020

• utilities (monaco): correct config obj name

3.5.0

July 30, 2020

• utilities (monaco): redesign utility monaco; get rid of class, make it more fp
• utilities: create compose utility
• utilities: create store utility; for internal usage (in other utilities)

3.4.2

July 15, 2020

• controlled editor: fix undo/redo issue

3.4.1

July 3, 2020

• editor: improve initialization error handling

3.4.0

June 28, 2020

• editor: fix 'readOnly' option check
• editor: add className and wrapperClassName props
• diffEditor: add className and wrapperClassName props

3.3.2

June 20, 2020

• utils: (monaco) add a possibility to pass src of config script

3.3.1

May 30, 2020

• editor: add overrideServices prop

3.2.1

Apr 13, 2020

• package: update default package version to 0.20.0

3.2.1

Mar 31, 2020

• types: fix monaco.config types

3.2.0

Mar 31, 2020

• fix: check the existence of target[key] in deepMerge
• config: deprecate indirect way of configuration and add deprecation message
• config: create a new structure of the configuration; the passed object will be directly passed to require.config
• readme: redesign the config section according to the new structure

3.1.2

Mar 16, 2020

• diff editor: remove line prop as it's not used (and can't be used)

3.1.1

Feb 25, 2020

• package: update devDependencies
• demo: update all dependencies

3.1.0

Feb 6, 2020

• monaco: update monaco version to 0.19.0
• utils: create new util - makeCancelable (for promises)
• editor/diffEditor: cancel promise before unmount
• demo: make "dark" default theme, update package version

3.0.1

Dec 26, 2019

• readme: update installation section

3.0.0

Dec 24, 2019

• monaco: update monaco version to 0.19.0

2.6.1

Dec 23, 2019

• versions: fix version

2.5.1

Dec 23, 2019

• types: fix type of "loading"

2.5.0

Dec 19, 2019

• types: fix type of theme; user should be able to pass any kind of theme (string)

2.4.0

Dec 11, 2019

• types: add config into namespace monaco
• types: change type of "loading" from React.ElementType to React.ReactNode

2.3.5

Dec 10, 2019

• optimize babel build with runtime transform

2.3.4

Dec 10, 2019

• add xxx.spec.js.snap files to npmignore

2.3.2 & 3

Dec 10, 2019

• fix typo in npmignore

2.3.1

Dec 10, 2019

• add unnecessary files to npmignore

2.3.0

Nov 9, 2019

• prevent onchange in case of undo/redo (controlled editor)
• create separate component for MonacoContainer

2.2.0

Nov 9, 2019

• force additional tokenization in controlled mode to avoid blinking

2.1.1

Oct 25, 2019

• fix "options" types

2.1.0

Oct 25, 2019

• add monaco-editor as peer dependency for proper type definitions
• write more proper types

2.0.0

Oct 9, 2019

• set the default version of monaco to 0.18.1
• set last value by .setValue method before changing the language

1.2.3

Oct 7, 2019

• (TYPES) add "void" to the "ControlledEditorOnChange" return types

1.2.2

Oct 3, 2019

• update dev dependencies
• check editor existence in "removeEditor" function
• replace "jest-dom" with "@testing-library/jest-dom"

1.2.1

Aug 20, 2019

• Set editor value directly in case of read only

1.2.0

Aug 16, 2019

• Add method to modify default config

1.1.0

July 26, 2019

• Apply edit by using executeEdits method
• Correct ControlledEditor usage examples in Docs

1.0.8

July 24, 2019

• Export utility 'monaco' to be able to access to the monaco instance

1.0.7

July 21, 2019

• Add controlled version of editor component

1.0.5

July 19, 2019

• Add a possibility to interact with Editor before it is mounted

1.0.4

July 13, 2019

• FIX: add "types" fild to package.json

1.0.3

July 13, 2019

• Add basic support for TypeScript

1.0.2

June 26, 2019

• Update package description

1.0.1

June 26, 2019

• Move from 'unpkg.com' to 'cdn.jsdelivr.net' (NOTE: in the future, it will be configurable)

1.0.0

June 25, 2019

:tada: First stable version :tada:

• Add monaco version to CDN urls to avoid 302 redirects

0.0.3

June 22, 2019

• Remove redundant peer dependency

0.0.2

June 22, 2019

• Make text-align of the wrapper of editors independent from outside

0.0.1

June 21, 2019

First version of the library