Implement collapsible rows

- Replaces code editor component with Monaco
- Monaco is what VSCode is built on, so it looks quite good.
- onChange passes the new text value within the editor, which is simple
  to deal with, especially in comparison to CodeMirror

package.json

@@ -17,6 +17,7 @@
     "@empirica/core": "^1.11.0",
     "@hello-pangea/dnd": "^16.6.0",
     "@hookform/resolvers": "^3.6.0",
+    "@monaco-editor/react": "^4.6.0",
     "@uiw/react-textarea-code-editor": "^2.1.9",
     "@watts-lab/surveys": "^1.13.4",
     "next": "^13.5.6",

src/app/editor/components/CodeEditor.tsx

@@ -1,5 +1,5 @@
 'use client'
-import YamlEditor from '@uiw/react-textarea-code-editor'
+import Editor from '@monaco-editor/react'
 import { useState, useEffect, useMemo } from 'react'
 import { parse } from 'yaml'
 import { stringify } from 'yaml'
@@ -103,9 +103,9 @@ export default function CodeEditor() {
     }
   }, [defaultTreatment])
 
-  function handleChange(evn: any) {
-    let entry = evn.target.value
-    setCode(entry)
+  function handleChange(newValue: any) {
+    console.log('newValue from editor OnChange: ', newValue)
+    setCode(newValue)
   }
 
   function handleSave(e: any) {
@@ -125,14 +125,18 @@ export default function CodeEditor() {
       <div
         style={{ height: '95vh', overflow: 'auto', backgroundColor: '#F0F2F6' }}
       >
-        <YamlEditor
+        <Editor
           data-cy="code-editor"
           value={code}
           language="yaml"
-          placeholder={
+          options={{
+            wordWrap: 'on',
+            showFoldingControls: 'always',
+          }}
+          defaulValue={
             'Please enter treatment configuration. Do not refresh the page before saving.'
           }
-          onChange={(env) => handleChange(env)}
+          onChange={(newValue) => handleChange(newValue)}
           padding={5}
           style={{
             fontSize: 12,