add codemirror

repl/src/App.tsx

@@ -7,6 +7,7 @@ import useCycle from './useCycle';
 import type { Hap, Pattern } from './types';
 import * as tunes from './tunes';
 import * as krill from './parse';
+import CodeMirror from './CodeMirror';
 
 const { tetris, tetrisMini, tetrisHaskell } = tunes;
 
@@ -68,6 +69,7 @@ function App() {
       // cycle.query(cycle.activeCycle()); // reschedule active cycle
       setError(undefined);
     } catch (err: any) {
+      console.warn(err);
       setError(err);
     }
   }, [code]);
@@ -75,38 +77,40 @@ function App() {
   useLayoutEffect(() => {
     logBox.current.scrollTop = logBox.current?.scrollHeight;
   }, [log]);
-
   return (
-    <div className="h-[100vh] bg-slate-900 flex-row">
-      <header className="px-2 flex items-center space-x-2 border-b border-gray-200 bg-white">
+    <div className="h-screen bg-slate-900 flex flex-col">
+      <header className="flex-none w-full h-16 px-2 flex items-center space-x-2 border-b border-gray-200 bg-white">
         <img src={logo} className="Tidal-logo w-16 h-16" alt="logo" />
         <h1 className="text-2xl">Strudel REPL</h1>
       </header>
-      <section className="grow p-2 text-gray-100">
-        <div className="relative">
-          <div className="absolute right-2 bottom-2 text-red-500">{error?.message}</div>
-          <textarea
+      <section className="grow flex flex-col p-2 text-gray-100">
+        <div className="grow relative">
+          <div className={cx('h-full bg-slate-600', error ? 'focus:ring-red-500' : 'focus:ring-slate-800')}>
+            <CodeMirror
+              value={code}
+              onChange={(_: any, __: any, value: any) => {
+                setLog((log) => log + `${log ? '\n\n' : ''}✏️ edit\n${code}\n${value}`);
+                setCode(value);
+              }}
+            />
+          </div>
+          {error && <div className="absolute right-2 bottom-2 text-red-500">{error?.message || 'unknown error'}</div>}
+          {/* <textarea
             className={cx('w-full h-64 bg-slate-600', error ? 'focus:ring-red-500' : 'focus:ring-slate-800')}
             value={code}
             onChange={(e) => {
               setLog((log) => log + `${log ? '\n\n' : ''}✏️ edit\n${code}\n${e.target.value}`);
               setCode(e.target.value);
             }}
-          />
+          /> */}
         </div>
-        <textarea
-          className="w-full h-64 bg-slate-600"
-          value={log}
-          readOnly
-          ref={logBox}
-          style={{ fontFamily: 'monospace' }}
-        />
         <button
-          className="w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
+          className="flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
           onClick={() => cycle.toggle()}
         >
           {cycle.started ? 'pause' : 'play'}
         </button>
+        <textarea className="grow bg-[#283237] border-0" value={log} readOnly ref={logBox} style={{ fontFamily: 'monospace' }} />
       </section>
     </div>
   );

repl/src/CodeMirror.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Controlled as CodeMirror2 } from 'react-codemirror2';
+import 'codemirror/mode/javascript/javascript.js';
+import 'codemirror/theme/material.css';
+import 'codemirror/lib/codemirror.css';
+
+export default function CodeMirror({ value, onChange, options }: any) {
+  options = options || {
+    mode: 'javascript',
+    theme: 'material',
+    lineNumbers: true,
+  };
+  return <CodeMirror2 value={value} options={options} onBeforeChange={onChange} />;
+}