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"