update App.js, src/components/Modal/index.js, src/components/ReactMonacoEditor/index.js and src/components/Tabbar/index.js

master
mahdi 2 years ago
parent b564c6e6d3
commit fe04b3e2d9
  1. 4
      src/App.js
  2. 6
      src/components/Modal/index.js
  3. 176
      src/components/ReactMonacoEditor/index.js

@ -7,8 +7,8 @@ function App() {
return (
<>
<Card />
<Testt />
<ReactMonacoEditor />
{/* <Testt /> */}
{/* <ReactMonacoEditor /> */}
</>
);
}

@ -3,9 +3,12 @@ import React, { useState } from "react";
import Button from "../Button";
import Tabbar from "../Tabbar";
const Modal = ({ activeTab }) => {
const Modal = ({ activeTab, children }) => {
const [openModal, setOpenModal] = useState(false);
// <Modal>
// <div
// </Modal>
return (
<div>
<Button
@ -16,6 +19,7 @@ const Modal = ({ activeTab }) => {
text={"ویرایش"}
onClick={() => setOpenModal(true)}
/>
{children}
<div
className={`cursor-pointer w-screen h-screen flex items-center justify-center bg-black fixed left-0 top-0 duration-300 transition-all
${openModal ? "opacity-90" : "opacity-0 pointer-events-none"}

@ -1,97 +1,105 @@
import React from "react";
import { render } from "react-dom";
import MonacoEditor, { MonacoDiffEditor } from "react-monaco-editor";
// 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",
};
}
// 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
};
// 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;
};
// 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");
}
};
// changeEditorValue = () => {
// if (this.editor) {
// this.editor.setValue("// code changed! \n");
// }
// };
changeBySetState = () => {
this.setState({ code: "// code changed by setState! \n" });
};
// changeBySetState = () => {
// this.setState({ code: "// code changed by setState! \n" });
// };
setDarkTheme = () => {
this.setState({ theme: "vs-dark" });
};
// setDarkTheme = () => {
// this.setState({ theme: "vs-dark" });
// };
setLightTheme = () => {
this.setState({ theme: "vs-light" });
};
// 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>
);
}
}
// 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;
import React from "react";
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>
);
return <div>ReactMonacoEditor</div>;
};
export default ReactMonacoEditor;

Loading…
Cancel
Save