build(deps): update package.json, App.js and yarn.lock

package.json

@@ -6,11 +6,13 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "monaco-editor-webpack-plugin": "^7.0.1",
     "node-sass": "^7.0.1",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.33.1",
+    "react-monaco-editor": "^0.49.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,12 +1,14 @@
 import "./App.scss";
 import Card from "./components/Card";
 import Testt from "./components/Testt";
+import ReactMonacoEditor from "./components/ReactMonacoEditor";
 
 function App() {
   return (
     <>
       <Card />
       <Testt />
+      <ReactMonacoEditor />
     </>
   );
 }

src/components/ReactMonacoEditor/index.js

@@ -0,0 +1,97 @@
+import React from "react";
+import { render } from "react-dom";
+import MonacoEditor, { MonacoDiffEditor } from "react-monaco-editor";
+
+class CodeEditor extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      code: "// type your code... \n",
+      theme: "vs-light",
+    };
+  }
+
+  onChange = (newValue) => {
+    console.log("onChange", newValue); // eslint-disable-line no-console
+  };
+
+  editorDidMount = (editor) => {
+    // eslint-disable-next-line no-console
+    console.log("editorDidMount", editor, editor.getValue(), editor.getModel());
+    this.editor = editor;
+  };
+
+  changeEditorValue = () => {
+    if (this.editor) {
+      this.editor.setValue("// code changed! \n");
+    }
+  };
+
+  changeBySetState = () => {
+    this.setState({ code: "// code changed by setState! \n" });
+  };
+
+  setDarkTheme = () => {
+    this.setState({ theme: "vs-dark" });
+  };
+
+  setLightTheme = () => {
+    this.setState({ theme: "vs-light" });
+  };
+
+  render() {
+    const { code, theme } = this.state;
+    const options = {
+      selectOnLineNumbers: true,
+      roundedSelection: false,
+      readOnly: false,
+      cursorStyle: "line",
+      automaticLayout: false,
+    };
+    return (
+      <div>
+        <div>
+          <button onClick={this.changeEditorValue} type="button">
+            Change value
+          </button>
+          <button onClick={this.changeBySetState} type="button">
+            Change by setState
+          </button>
+          <button onClick={this.setDarkTheme} type="button">
+            Set dark theme
+          </button>
+          <button onClick={this.setLightTheme} type="button">
+            Set light theme
+          </button>
+        </div>
+        <hr />
+        <MonacoEditor
+          height="400"
+          language="javascript"
+          value={code}
+          options={options}
+          onChange={this.onChange}
+          editorDidMount={this.editorDidMount}
+          theme={theme}
+        />
+      </div>
+    );
+  }
+}
+
+const ReactMonacoEditor = () => {
+  return (
+    <div>
+      <h2>Monaco Editor Sample (controlled mode)</h2>
+      <CodeEditor />
+      <hr />
+      <h2>Another editor (uncontrolled mode)</h2>
+      {/* <AnotherEditor /> */}
+      <hr />
+      <h2>Another editor (showing a diff)</h2>
+      {/* <DiffEditor /> */}
+    </div>
+  );
+};
+
+export default ReactMonacoEditor;

yarn.lock

@@ -6261,7 +6261,7 @@ loader-runner@^4.2.0:
   resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz"
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
-loader-utils@^2.0.0:
+loader-utils@^2.0.0, loader-utils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz"
   integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==
@@ -6634,6 +6634,13 @@ mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.6"
 
+monaco-editor-webpack-plugin@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.0.1.tgz#ba19c60aba990184e36ad8722b1ed6a564527c7c"
+  integrity sha512-M8qIqizltrPlIbrb73cZdTWfU9sIsUVFvAZkL3KGjAHmVWEJ0hZKa/uad14JuOckc0GwnCaoGHvMoYtJjVyCzw==
+  dependencies:
+    loader-utils "^2.0.2"
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
@@ -7974,6 +7981,13 @@ react-is@^18.0.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-monaco-editor@^0.49.0:
+  version "0.49.0"
+  resolved "https://registry.yarnpkg.com/react-monaco-editor/-/react-monaco-editor-0.49.0.tgz#c5f0601dc0e3df07585560ed8de817c82d717334"
+  integrity sha512-KZTNn1vJh1rlzIRPXjr/5HWYMPfbOoDhR+prCR7mIQCssjlkn8+SfpN4lNsiCTECo/UdpnyAdqgaIyY3yYjVeg==
+  dependencies:
+    prop-types "^15.8.1"
+
 react-redux@^7.2.0:
   version "7.2.8"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de"