Basic codemirror editor

vweb/src/forge_editor.jsx

@@ -1,7 +1,28 @@
 import './snippet_emulator.css'
-import React, {useCallback, useState} from 'react'
+import React, {useCallback, useState, useRef, useEffect} from 'react'
+import {basicSetup, EditorView} from 'codemirror'
+import {gruvboxDark} from 'cm6-theme-gruvbox-dark'
 
 export default function ForgeEditor({ src, updateSrc }) {
+    const editor = useRef(null)
+    const container = useRef(null)
+
+    useEffect(() => {
+        if (container.current) {
+            editor.current = new EditorView({
+                doc: src,
+                extensions: [
+                    basicSetup,
+                    gruvboxDark,
+                    EditorView.updateListener.of((update) => {
+                        updateSrc(update.state.doc.text.join('\n'))
+                    })
+                ],
+                parent: container.current
+            })
+        }
+    }, [container.current])
+
     const onChangeSrc = useCallback((e) => { updateSrc(e.target.value) }, [updateSrc])
-    return <textarea value={src} onChange={onChangeSrc}></textarea>
+    return <div className='editor' ref={container}/>
 }

vweb/src/simulator.css

@@ -35,23 +35,28 @@ a { color: #cccccc; }
     margin: 0;
 }
 
-/* Make the textarea look presentable (TODO: replace with CodeMirror) */
-.content textarea {
-    height: 100%;
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    background: #000000;
-    color: #a0a0a0;
-    border: none;
-    resize: none;
-    outline: none;
+/* Make the editor fill the entire height */
+.content .editor .cm-editor {
+    height: calc(100vh - 5em)
 }
 
-.forge-editor textarea:focus {
-    border: none;
-    outline: none;
-}
+/*!* Make the textarea look presentable (TODO: replace with CodeMirror) *!*/
+/*.content textarea {*/
+/*    height: 100%;*/
+/*    width: 100%;*/
+/*    padding: 0;*/
+/*    margin: 0;*/
+/*    background: #000000;*/
+/*    color: #a0a0a0;*/
+/*    border: none;*/
+/*    resize: none;*/
+/*    outline: none;*/
+/*}*/
+
+/*.forge-editor textarea:focus {*/
+/*    border: none;*/
+/*    outline: none;*/
+/*}*/
 
 /* Status, btns, tabs all look right */
 .status, .buttons, .tabbar { font-weight: bold; }