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

web/src/components/IdeContainer/IdeContainer.js

@@ -15,10 +15,10 @@ const ELEMENT_MAP = {
 const IdeContainer = () => {
   const { state, dispatch } = useContext(IdeContext)
 
-  return (<div className='h-screen'>
+  return (<div id='cadhub-ide' className='h-screen'>
     <Mosaic
       renderTile={ (id, path) => (
-        <MosaicWindow path={path} title={id}>
+        <MosaicWindow path={path} title={id} className={id.toLowerCase()}>
           { ELEMENT_MAP[id] }
         </MosaicWindow>
       )}

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

web/src/components/IdeToolbarNew/IdeToolbarNew.js

@@ -7,6 +7,7 @@ export const IdeContext = createContext()
 const IdeToolbarNew = () => {
   const [state, dispatch] = useIdeState()
   function setIdeType(ide) { dispatch({ type: 'setIdeType', payload: { message: ide } }) }
+  function handleRender() { dispatch({ type: 'render', payload: { code: state.code } }) }
 
   return (
     <IdeContext.Provider value={{ state, dispatch }}>
@@ -15,6 +16,7 @@ const IdeToolbarNew = () => {
         <nav class="flex">
           <button onClick={() => setIdeType('openCascade')} class="p-2 br-2 border-2 m-2 bg-blue-200">Switch to OpenCascade</button>
           <button onClick={() => setIdeType('openScad')} class="p-2 br-2 border-2 m-2 bg-indigo-200">Switch to OpenSCAD</button>
+          <button onClick={ handleRender } class="p-2 br-2 border-2 m-2">Render</button>
         </nav>
         <IdeContainer />
       </div>