fix: cursor didnt focus on right position

frontend/src/App.tsx

@@ -17,7 +17,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
 import CodeMirror from "./components/CodeMirror";
 import SettingsDialog from "./components/SettingsDialog";
-import { Settings } from "./types";
+import { Settings, EditorTheme } from "./types";
 import { IS_RUNNING_ON_CLOUD } from "./config";
 import { PicoBadge } from "./components/PicoBadge";
 import { OnboardingNote } from "./components/OnboardingNote";
@@ -34,12 +34,13 @@ function App() {
   const [executionConsole, setExecutionConsole] = useState<string[]>([]);
   const [updateInstruction, setUpdateInstruction] = useState("");
   const [history, setHistory] = useState<string[]>([]);
+  console.log('history', history)
   const [settings, setSettings] = usePersistedState<Settings>(
     {
       openAiApiKey: null,
       screenshotOneApiKey: null,
       isImageGenerationEnabled: true,
-      editorTheme: "cobalt",
+      editorTheme: EditorTheme.COBALT,
     },
     "setting"
   );

frontend/src/components/CodeMirror.tsx

@@ -1,6 +1,6 @@
 import { useRef, useEffect } from "react";
 import { EditorState } from "@codemirror/state";
-import { EditorView, keymap, lineNumbers } from "@codemirror/view";
+import { EditorView, keymap, lineNumbers, ViewUpdate } from "@codemirror/view";
 import { espresso, cobalt } from "thememirror";
 import {
   defaultKeymap,
@@ -11,45 +11,42 @@ import {
 } from "@codemirror/commands";
 import { bracketMatching } from "@codemirror/language";
 import { html } from "@codemirror/lang-html";
+import { EditorTheme } from "@/types";
 
 interface Props {
   code: string;
-  editorTheme: string;
+  editorTheme: EditorTheme;
   onCodeChange: (code: string) => void;
 }
 
 function CodeMirror({ code, editorTheme, onCodeChange }: Props) {
   const ref = useRef<HTMLDivElement>(null);
   const view = useRef<EditorView | null>(null);
-
+  const editorState = EditorState.create({
-  useEffect(() => {
+    extensions: [
-    let selectedTheme = cobalt;
+      history(),
-    if (editorTheme === "espresso") {
+      keymap.of([
-      selectedTheme = espresso;
+        ...defaultKeymap,
-    }
+        indentWithTab,
-    view.current = new EditorView({
+        { key: "Mod-z", run: undo, preventDefault: true },
-      state: EditorState.create({
+        { key: "Mod-Shift-z", run: redo, preventDefault: true },
-        doc: code,
+      ]),
-        extensions: [
+      lineNumbers(),
-          history(),
+      bracketMatching(),
-          keymap.of([
+      html(),
-            ...defaultKeymap,
+      editorTheme === EditorTheme.ESPRESSO ? espresso : cobalt,
-            indentWithTab,
+      EditorView.lineWrapping,
-            { key: "Mod-z", run: undo, preventDefault: true },
+      EditorView.updateListener.of((update: ViewUpdate) => {
-            { key: "Mod-Shift-z", run: redo, preventDefault: true },
+        if (update.docChanged) {
-          ]),
+          const updatedCode = update.state.doc.toString();
-          lineNumbers(),
+          onCodeChange(updatedCode);
-          bracketMatching(),
+        }
-          html(),
-          selectedTheme,
-          EditorView.lineWrapping,
-          EditorView.updateListener.of(update => {
-            if (update.changes) {
-              onCodeChange(view.current?.state.doc.toString() || "");
-            }
-          }),
-        ],
       }),
+    ],
+  });
+  useEffect(() => {
+    view.current = new EditorView({
+      state: editorState,
       parent: ref.current as Element,
     });
 
@@ -59,7 +56,7 @@ function CodeMirror({ code, editorTheme, onCodeChange }: Props) {
         view.current = null;
       }
     };
-  }, [code, editorTheme]);
+  }, []);
 
   useEffect(() => {
     if (view.current && view.current.state.doc.toString() !== code) {

frontend/src/components/SettingsDialog.tsx

@@ -9,7 +9,7 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { FaCog } from "react-icons/fa";
-import { Settings } from "../types";
+import { EditorTheme, Settings } from "../types";
 import { Switch } from "./ui/switch";
 import { Label } from "./ui/label";
 import { Input } from "./ui/input";
@@ -21,7 +21,7 @@ interface Props {
 }
 
 function SettingsDialog({ settings, setSettings }: Props) {
-  const handleThemeChange = (theme: string) => {
+  const handleThemeChange = (theme: EditorTheme) => {
     setSettings((s) => ({
       ...s,
       editorTheme: theme,
@@ -110,7 +110,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
               id="editor-theme"
               value={settings.editorTheme}
               onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-                handleThemeChange(e.target.value)
+                handleThemeChange(e.target.value as EditorTheme)
               }
             >
               <option value="cobalt">Cobalt</option>

frontend/src/types.ts

@@ -1,6 +1,11 @@
+export enum EditorTheme {
+  ESPRESSO = "espresso",
+  COBALT = "cobalt",
+}
+
 export interface Settings {
   openAiApiKey: string | null;
   screenshotOneApiKey: string | null;
   isImageGenerationEnabled: boolean;
-  editorTheme: string;
+  editorTheme: EditorTheme;
 }