I have been practicing a lot of algorithms problems to prepare for job interviews and found that there was no specific tool where I can store my code topic wise and edit it later. So I created a website for it [https://www.codingnotesonline.com/].

To create this web tool, I tried two javascript-based code editors (codeMirror & Monaco) and will be talking about things that worked for me, and maybe it helps you too in your project.

Monaco
It is among the top editors which you can use in your react project and also the editor that powers the famous VS code.

Basic Code Syntax

import React, { useState } from "react";
import Editor from "@monaco-editor/react";

function App() {
  const [theme, setTheme] = useState("light");
  const [language, setLanguage] = useState("javascript");
  const [isEditorReady, setIsEditorReady] = useState(false);

  function handleEditorDidMount() {
    setIsEditorReady(true);
  }

  function toggleTheme() {
    setTheme(theme === "light" ? "dark" : "light");
  }

  function toggleLanguage() {
    setLanguage(language === "javascript" ? "python" : "javascript");
  }

  return (
    <>
      <button onClick={toggleTheme} disabled={!isEditorReady}>
        Toggle theme
      </button>
      <button onClick={toggleLanguage} disabled={!isEditorReady}>
        Toggle language
      </button>

      <Editor
        height="90vh" // By default, it fully fits with its parent
        theme={theme}
        language={language}
        value={"javascript"}
        editorDidMount={handleEditorDidMount}
        loading={"Loading..."}
      />
    </>
  );
}

export default App;

Playground: [https://codesandbox.io/s/wizardly-varahamihira-zwv28?file=/src/monaco.js]
Monaco React : [https://monaco-react.surenatoyan.com/]

Advantages:

• Written in Typescript
• Supports several languages and themes
• Auto-completion is one of the strongest tools of Monaco in comparison to other editors.
• Bracket matching
• Errors & warnings
• Tones of editor options [https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html]
• Lot of developers use VS code and choosing Monaco can help you attract such customer base due to their familiarity with the editor.

Disadvantages:

• One of the major disadvantages that it does not support mobile browsers or webview apps. This was the only reason I didn't choose this editor as I wanted to convert my webpage in a mobile app using webview.

Code Mirror

Code mirror has been in the community for a long time and several versions of it have been released. There is a lot of similarity between the mirror and Monaco in terms of the options that they provide.

Basic Code Syntax

import {Controlled as CodeMirror} from 'react-codemirror2'

//Import Uncontrolled if you don't want to make any changes in the code like saving or manipulating code data.

<CodeMirror
  value={this.state.value}
  options={options}
  onBeforeChange={(editor, data, value) => {
    this.setState({value});
  }} // used in controlled component

  onChange={(editor, data, value) => {
  }}
/>

Playground : [https://codesandbox.io/s/objective-keller-0w0mb?file=/src/codeMirror.js]
CodeMirror React : [https://github.com/scniro/react-codemirror2]

Advantages:

• Code mirror code is clean, concise, and easy to understand. If you are looking for adding custom functionality then code mirror would be a better choice over Monaco and also supports mobile browsers.

• It is used in several big projects as a dev tool for Firefox, Chrome, and Safari, in Light Table, Adobe Brackets, Bitbucket, and many others.

• Other features include support of more 100 languages, various themes, split views, autocompletion and many other
  [https://codemirror.net/]

Disadvantage

• Written in Javascript(Type definition might not be perfect)

Several other sources where I found a comparison of code editors which could be useful in deciding the code editor as per your need

Link:[https://www.npmtrends.com/ace-code-editor-vs-codemirror-vs-monaco-editor]

Link: https://stackshare.io/stackups/codemirror-vs-monaco-editor

As per my understanding and research, there are three code editors in the market (Monaco, CodeMirror, Ace-code-editor) which are widely used. Ace-code-editor is similar to the other two in terms of features and functionality but does not support the mobile browser well.