web/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.11.0",
+    "@monaco-editor/react": "^4.0.11",
     "@redwoodjs/auth": "^0.26.2",
     "@redwoodjs/forms": "^0.26.2",
     "@redwoodjs/router": "^0.26.2",

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: 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>

web/src/index.css

@@ -96,3 +96,8 @@ label {
 input.error, textarea.error {
   border: 1px solid red;
 }
+
+/* used in IdeContainer component */
+#cadhub-ide .mosaic-window.console .mosaic-window-body {
+  overflow-y: auto;
+}

yarn.lock

@@ -1826,6 +1826,22 @@
     prop-types "^15.7.2"
     react-is "^16.8.0 || ^17.0.0"
 
+"@monaco-editor/loader@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.0.0.tgz#c7ea78ef07cebcae83d92bbfe2bddab563468102"
+  integrity sha512-CA35bf5Y7wFWfeJZfkLslOxiatln3oTBKkfbdo+TF5H+UdPP96qHvhOUjjd1DeQ2NWsRkVPSnoSYek7NE5B26w==
+  dependencies:
+    state-local "^1.0.6"
+
+"@monaco-editor/react@^4.0.11":
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.0.11.tgz#e5f9f651988f2f73ac776ffb8391e81d121d5c32"
+  integrity sha512-IxGpfvCx9p5bTI+T8i7KPbvqsNppUYMT6xA6u65BKmI3/mrlRVFdDyzZTcd+SAAs+5n7n0m/gzAoeglUL+lWDQ==
+  dependencies:
+    "@monaco-editor/loader" "^1.0.0"
+    prop-types "^15.7.2"
+    state-local "^1.0.7"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -14943,6 +14959,11 @@ stackframe@^1.1.1:
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.0.tgz#52429492d63c62eb989804c11552e3d22e779303"
   integrity sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==
 
+state-local@^1.0.6, state-local@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
+  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
+
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"