From 6730ee86086b19eadd4ed7f895f3c710d749ee3f Mon Sep 17 00:00:00 2001
From: Eric Shapiro <shape@seas.upenn.edu>
Date: Fri, 20 Sep 2024 12:39:33 -0400
Subject: [PATCH] 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-lock.json                        | 36 ++++++++++++++++++++++++
 package.json                             |  1 +
 src/app/editor/components/CodeEditor.tsx | 18 +++++++-----
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c9577ee..6320a2c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,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",
@@ -445,6 +446,30 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz",
+      "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz",
+      "integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.4.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@next/env": {
       "version": "13.5.6",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.6.tgz",
@@ -6897,6 +6922,12 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.52.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.0.tgz",
+      "integrity": "sha512-OeWhNpABLCeTqubfqLMXGsqf6OmPU6pHM85kF3dhy6kq5hnhuVS1p3VrEW/XhWHc71P2tHyS5JFySD8mgs1crw==",
+      "peer": true
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -8910,6 +8941,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
diff --git a/package.json b/package.json
index b1da4a3..cee7e03 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/editor/components/CodeEditor.tsx b/src/app/editor/components/CodeEditor.tsx
index 0ce6834..b0088a4 100644
--- a/src/app/editor/components/CodeEditor.tsx
+++ b/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,