✔ First Commit

Author: archies-coder

package-lock.json

@@ -1,17 +1,19 @@
 {
-  "name": "codemirror",
+  "name": "codemirror-react",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "codemirror": "^5.48.0",
+    "highlight.js": "^9.15.8",
     "react": "^16.8.6",
+    "react-codemirror": "^1.0.0",
+    "react-codemirror2": "^6.0.0",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "build": "react-scripts build"
   },
   "eslintConfig": {
     "extends": "react-app"

package.json

@@ -1,33 +1,6 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.CodeMirror{
+  font-family: monospace;
+  font-size: 21pt;
+  height: 100%;
+  /* background-color: #44475a; */
+}

src/App.css

@@ -1,26 +1,52 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { Component } from 'react';
+// import CodeMirror from 'react-codemirror';
+import 'codemirror/lib/codemirror.css';
+import './App.css'
+import {Controlled as CodeMirror} from 'react-codemirror2'
+import 'codemirror/mode/xml/xml'
+import 'codemirror/theme/dracula.css'
+ 
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+
+export default class App extends Component {
+  constructor(){
+    super();
+    this.state = {
+      name: 'CodeMirror',
+      code: ':)'
+    };
+  }
+
+  updateCode = (newCode) => {
+		this.setState({
+      code: newCode,
+		});
+	}
+
+  render() {
+    const options = {
+      lineNumbers: true,
+      mode: 'xml',
+      theme: 'dracula'
+		};
+    return (
+      <div>
         <p>
-          Edit <code>src/App.js</code> and save to reload.
+          {this.state.code}
         </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+        {/* <CodeMirror value={this.state.code} onChange={this.updateCode} options={options} autoFocus={true} /> */}
+        <CodeMirror
+          value={this.state.code}
+          options={options}
+          onBeforeChange={(editor, data, code) => {
+            this.setState({code});
+          }}
+          onChange={(editor, data, code) => {
+            this.updateCode(code)
+          }}
+        />
+      </div>
+    );
+  }
 }
 
-export default App;

src/App.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';