Initial commit

App.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+// formating styles (makes sure text stays inside editor box)
+import 'codemirror/lib/codemirror.css';
+
+// aesthetic styles
+import 'codemirror/theme/material.css'; // syntax highlighting
+import 'codemirror/mode/xml/xml'; // theme styles
+
+import { Controlled as ControlledEditor } from 'react-codemirror2';
+
+import './style.css';
+
+export default function App() {
+  const [value, setValue] = React.useState('bruh');
+  return (
+    <div>
+      <h1>Hello StackBlitz!</h1>
+      <p>Start editing to see some magic happen :)</p>
+      <ControlledEditor
+        onBeforeChange={(editor, data, value) => {
+          setValue(value);
+        }}
+        value={value}
+        className="code-mirror-wrapper"
+        options={{
+          lineWrapping: true,
+          lint: true,
+          mode: 'xml',
+          theme: 'material',
+          lineNumbers: true,
+        }}
+      />
+    </div>
+  );
+}

README.md

@@ -0,0 +1,3 @@
+# react-codemirror-demos
+
+[Edit on StackBlitz ⚡️](https://stackblitz.com/edit/react-ts-4hgcxn)

index.html

@@ -0,0 +1 @@
+<div id="root"></div>

index.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App';
+
+const rootElement = document.getElementById('root');
+const root = createRoot(rootElement);
+
+root.render(
+  // removed strickmode to fix doubled editor bug
+  // see source for more details:
+  // https://stackoverflow.com/questions/72464452/codemirror-editor-duplicating
+  // <StrictMode>
+  <App />
+  // </StrictMode>
+);

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "react-ts",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "codemirror": "5.x",
+    "react": "^18.2.0",
+    "react-codemirror2": "^7.2.1",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "react-scripts": "latest"
+  }
+}

style.css

@@ -0,0 +1,3 @@
+h1, p {
+  font-family: Lato;
+}