From d10c793a600886c213e5f0b024fb42507fab4bae Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Tue, 21 Nov 2023 11:33:33 +0800
Subject: [PATCH] fix: cursor didnt focus on right position

---
 frontend/src/App.tsx                       |  5 +-
 frontend/src/components/CodeMirror.tsx     | 59 ++++++++++------------
 frontend/src/components/SettingsDialog.tsx |  6 +--
 frontend/src/types.ts                      |  7 ++-
 4 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 949582c..fea0fb1 100644
--- a/frontend/src/App.tsx
+++ b/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"
   );
diff --git a/frontend/src/components/CodeMirror.tsx b/frontend/src/components/CodeMirror.tsx
index 0c268a5..36093ee 100644
--- a/frontend/src/components/CodeMirror.tsx
+++ b/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);
-
-  useEffect(() => {
-    let selectedTheme = cobalt;
-    if (editorTheme === "espresso") {
-      selectedTheme = espresso;
-    }
-    view.current = new EditorView({
-      state: EditorState.create({
-        doc: code,
-        extensions: [
-          history(),
-          keymap.of([
-            ...defaultKeymap,
-            indentWithTab,
-            { key: "Mod-z", run: undo, preventDefault: true },
-            { key: "Mod-Shift-z", run: redo, preventDefault: true },
-          ]),
-          lineNumbers(),
-          bracketMatching(),
-          html(),
-          selectedTheme,
-          EditorView.lineWrapping,
-          EditorView.updateListener.of(update => {
-            if (update.changes) {
-              onCodeChange(view.current?.state.doc.toString() || "");
-            }
-          }),
-        ],
+  const editorState = EditorState.create({
+    extensions: [
+      history(),
+      keymap.of([
+        ...defaultKeymap,
+        indentWithTab,
+        { key: "Mod-z", run: undo, preventDefault: true },
+        { key: "Mod-Shift-z", run: redo, preventDefault: true },
+      ]),
+      lineNumbers(),
+      bracketMatching(),
+      html(),
+      editorTheme === EditorTheme.ESPRESSO ? espresso : cobalt,
+      EditorView.lineWrapping,
+      EditorView.updateListener.of((update: ViewUpdate) => {
+        if (update.docChanged) {
+          const updatedCode = update.state.doc.toString();
+          onCodeChange(updatedCode);
+        }
       }),
+    ],
+  });
+  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) {
diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index f7004d3..121c17c 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/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>
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 6f44e9f..04da945 100644
--- a/frontend/src/types.ts
+++ b/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;
 }