From 5f4e7fa10ac01737fd9fa803cffade135e41aa10 Mon Sep 17 00:00:00 2001
From: aiktb <ai.ourship@gmail.com>
Date: Sun, 27 Oct 2024 21:48:07 +0800
Subject: [PATCH] feat: auto save when the editor is blurred

---
 app/components/code-mirror-editor.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/components/code-mirror-editor.tsx b/app/components/code-mirror-editor.tsx
index e4dc5e1..872f6a1 100644
--- a/app/components/code-mirror-editor.tsx
+++ b/app/components/code-mirror-editor.tsx
@@ -1,7 +1,7 @@
 import { vue } from "@codemirror/lang-vue";
 import { EditorView, keymap } from "@codemirror/view";
 import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
-import CodeMirror from "@uiw/react-codemirror";
+import CodeMirror, { type ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import { useTheme } from "next-themes";
 import * as parserBabel from "prettier/parser-babel";
 import * as parserHtml from "prettier/parser-html";
@@ -79,6 +79,7 @@ const CodeMirrorEditorProps = ({ code, onChange }: CodeMirrorEditorProps) => {
   ]);
 
   const [unsavedChanges, setUnsavedChanges] = useState(false);
+  const editor = useRef<ReactCodeMirrorRef>(null);
   return (
     <div className="relative h-full">
       <ShortcutTips className="absolute top-0 right-0 z-10" unsavedChanges={unsavedChanges} />
@@ -86,10 +87,17 @@ const CodeMirrorEditorProps = ({ code, onChange }: CodeMirrorEditorProps) => {
         value={code}
         className="h-full"
         height="100%"
+        ref={editor}
         autoFocus
         translate="no"
         theme={resolvedTheme === "light" ? githubLight : githubDark}
         extensions={[vue(), styleTheme, customKeymap]}
+        onBlur={() => {
+          if (editor.current?.state) {
+            onChange(editor.current.state.doc.toString());
+            setUnsavedChanges(false);
+          }
+        }}
         onChange={() => {
           setUnsavedChanges(true);
         }}