further down the codemirror rabbit hole

package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@tauri-apps/api": "^1.5.2",
+    "@uiw/react-codemirror": "^4.21.21",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "codemirror": "^6.0.1",

src/components/Cell.tsx

@@ -1,7 +1,8 @@
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 
-import { useCell } from "../hooks/useCell";
+import { useCell } from "@/hooks/useCell";
+import { Editor } from "@/components//Editor";
 
 const Cell = ({ cellID }: { cellID: string }) => {
   const { content, executeCell, updateCell, cellState, executionCount } = useCell(cellID);
@@ -27,19 +28,25 @@ const Cell = ({ cellID }: { cellID: string }) => {
         variant="ghost"
         className="font-mono mr-2 text-sm group w-14"
         onClick={executeCell}
+        // onKeyPress={(event) => {
+        //   if (event.key === 'Enter') {
+        //     executeCell();
+        //   }
+        // }}
       >
         [
         <div className="group-hover:block hidden">{actionIcon}</div>
         <span className="group-hover:hidden">{executionCount}</span>
         ]
       </Button>
-      <Input
+      <Editor cellID={cellID} />
+      {/* <Input
         type="text"
         placeholder="write code..."
         className="mr-2 font-mono text-sm"
         value={content}
         onChange={(e) => updateCell(e.target.value)}
-      />
+      /> */}
     </div>
   );
 };

src/components/Editor.tsx

@@ -1,44 +1,31 @@
-import { useRef, useEffect, useState } from 'react';
-
-import { basicSetup } from 'codemirror';
-
-import { EditorState} from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
-import { defaultKeymap, indentWithTab } from '@codemirror/commands';
-import { javascript } from '@codemirror/lang-javascript';
-
-import {lightTheme} from "@/codemirror-themes"
-
-export const Editor = (/*{ setEditorState }*/) => {
-  const editor = useRef<HTMLDivElement | null>(null);
-  const [code, setCode] = useState('');
-
-  const onUpdate = EditorView.updateListener.of((v) => {
-    setCode(v.state.doc.toString());
-  });
-
-  useEffect(() => {
-    const state = EditorState.create({
-      doc: code,
-      extensions: [
-        basicSetup,
-        keymap.of([...defaultKeymap, indentWithTab]),
-        lightTheme,
-        javascript(),
-        onUpdate,
-      ],
-    });
-
-    if(editor.current === null) {
-      return;
-    }
-
-    const view = new EditorView({ state, parent: editor.current });
-
-    return () => {
-      view.destroy();
-    };
-  }, [editor.current]);
-
-  return <div ref={editor}></div>;
-};
+import CodeMirror from "@uiw/react-codemirror";
+import { javascript } from "@codemirror/lang-javascript";
+import { lightTheme } from "@/codemirror-themes";
+import { useCell } from "@/hooks/useCell";
+
+import { cn } from "@/lib/utils"
+
+
+export const Editor = ({ cellID, className }: { cellID: string, className?: string }) => {
+  const { content, updateCell } = useCell(cellID);
+
+  const bigclasses = cn(
+    "flex w-full h-full border border-input bg-transparent text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+    className
+  )
+
+  return (
+    <CodeMirror
+      value={content}
+      width="100%"
+      height="100%"
+      // Revert to CodeMirror's default for Accessibility -- not indenting with tab.
+      // We can bring it back if we put escape in place
+      indentWithTab={false}
+      extensions={[javascript({ jsx: true })]}
+      onChange={updateCell}
+      className={bigclasses}
+      theme={lightTheme}
+    />
+  );
+};