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}/>
 }