diff --git a/package.json b/package.json
index 9469328..6264147 100644
--- a/package.json
+++ b/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"
},
diff --git a/src/App.js b/src/App.js
index bbe98c7..c619ff8 100644
--- a/src/App.js
+++ b/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 (
<>
+
>
);
}
diff --git a/src/components/ReactMonacoEditor/index.js b/src/components/ReactMonacoEditor/index.js
new file mode 100644
index 0000000..632edb1
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+const ReactMonacoEditor = () => {
+ return (
+
+
Monaco Editor Sample (controlled mode)
+
+
+
Another editor (uncontrolled mode)
+ {/*
*/}
+
+
Another editor (showing a diff)
+ {/*
*/}
+
+ );
+};
+
+export default ReactMonacoEditor;
diff --git a/yarn.lock b/yarn.lock
index 29d6bc8..b45f6d8 100644
--- a/yarn.lock
+++ b/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"