mahdi andalib 2 years ago
commit b564c6e6d3
  1. 2
      package.json
  2. 2
      src/App.js
  3. 97
      src/components/ReactMonacoEditor/index.js
  4. 16
      yarn.lock

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

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

@ -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;

@ -6261,7 +6261,7 @@ loader-runner@^4.2.0:
resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz" resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz"
integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg== 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" version "2.0.2"
resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz" resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz"
integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A== integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==
@ -6634,6 +6634,13 @@ mkdirp@~0.5.1:
dependencies: dependencies:
minimist "^1.2.6" 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: ms@2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz" 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" resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== 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: react-redux@^7.2.0:
version "7.2.8" version "7.2.8"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de"

Loading…
Cancel
Save