Added initial Monaco Editor to dev-ide, made console pane scrollable

web/src/components/IdeEditor/IdeEditor.js

@@ -1,28 +1,20 @@
 import { useContext } from 'react'
 import { IdeContext } from 'src/components/IdeToolbarNew'
+import Editor from '@monaco-editor/react'
 
 const IdeEditor = () => {
   const { state, dispatch } = useContext(IdeContext)
+
+  function handleCodeChange(value, _event) {
+    dispatch({ type: 'updateCode', payload: target.value })
+  }
+
   return (
-    <div className="p-8 border-2 m-2">
-      <div>hi I'm editor</div>
-      <div className="pb-2">code:</div>
-      <input
-        value={state.code}
-        className="font-mono"
-        onChange={({ target }) =>
-          dispatch({ type: 'updateCode', payload: target.value })
-        }
-      />
-      <button
-        onClick={() =>
-          dispatch({ type: 'render', payload: { code: state.code } })
-        }
-        className="m-2 border-2 shadow-md p-2 rounded"
-      >
-        Render plz
-      </button>
-    </div>
+    <Editor
+      defaultValue={ state.code }
+      defaultLanguage='javascript'
+      onChange={ handleCodeChange }
+    />
   )
 }