fix: fix empty md file does not trigger update

yuanyxh · May 9, 2024 · b9ea967 · b9ea967
1 parent 8a6c04b
commit b9ea967
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 45 deletions.
diff --git a/src/filehandle/md_editor/component/MDContent.tsx b/src/filehandle/md_editor/component/MDContent.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { confirm, error } from '@/utils';
 
@@ -14,30 +14,18 @@ import MDEditor from './MDEditor';
 import { Sidebar } from './MDSidebar';
 import styles from './styles/MDContent.module.less';
 
-const getMarkdown = async (handle: FH) => {
-  return handle.getFile().then((file) => file.text());
-};
-
 interface IMDContentProps {
   handle: DH | FH;
 }
 
 export const MDContent: React.FC<Readonly<IMDContentProps>> = (props) => {
   const { handle } = props;
 
-  const [markdown, setMarkdown] = useState('');
   const [changed, setChanged] = useState(false);
   const [currentHandle, setCurrentHandle] = useState<FH | null>(null);
 
   const editorRef = useRef<IMDEditorExpose>(null);
 
-  useMemo(() => {
-    currentHandle &&
-      getMarkdown(currentHandle).then((text) => {
-        setMarkdown(text);
-      });
-  }, [currentHandle]);
-
   useEffect(() => {
     if (isFileHandle(handle)) {
       setCurrentHandle(handle);
@@ -52,19 +40,21 @@ export const MDContent: React.FC<Readonly<IMDContentProps>> = (props) => {
       content: '是否保存更改？如果不保存，您的更改会丢失。',
       okText: '保存',
       cancelText: '放弃更改',
-      onOk() {
+      async onOk() {
         if (currentHandle && editorRef.current) {
-          writeFile(currentHandle, editorRef.current.getMarkdown())
-            .then(() => {
-              setCurrentHandle(handle);
-            })
-            .catch((err) => {
-              error((err as Error).message);
-            });
+          try {
+            writeFile(currentHandle, editorRef.current.getMarkdown());
+
+            setCurrentHandle(handle);
+            setChanged(false);
+          } catch (err) {
+            error((err as Error).message);
+          }
         }
       },
       onCancel() {
         setCurrentHandle(handle);
+        setChanged(false);
       }
     });
   };
@@ -73,15 +63,15 @@ export const MDContent: React.FC<Readonly<IMDContentProps>> = (props) => {
     setChanged(changed);
   };
 
-  const handleSave = (md: string) => {
+  const handleSave = async (md: string) => {
     if (currentHandle) {
-      writeFile(currentHandle, md)
-        .then(() => {
-          setChanged(false);
-        })
-        .catch((err) => {
-          error((err as Error).message);
-        });
+      try {
+        await writeFile(currentHandle, md);
+
+        setChanged(false);
+      } catch (err) {
+        error((err as Error).message);
+      }
     }
   };
 
@@ -94,7 +84,7 @@ export const MDContent: React.FC<Readonly<IMDContentProps>> = (props) => {
       <div className={styles.mdEditor}>
         <MDEditor
           ref={editorRef}
-          markdown={markdown}
+          currentHandle={currentHandle}
           changed={changed}
           onChanged={handleSetChanged}
           onSave={handleSave}

diff --git a/src/filehandle/md_editor/component/MDEditor.tsx b/src/filehandle/md_editor/component/MDEditor.tsx
@@ -1,5 +1,7 @@
 import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
 
+import type { FH } from '@/filehandle/utils/fileManager';
+
 import styles from './styles/MDEditor.module.less';
 import { reduce } from './theme-reduce';
 
@@ -35,7 +37,7 @@ import { gfm } from '@milkdown/preset-gfm';
 import { /* callCommand, */ getMarkdown /* insert */ } from '@milkdown/utils';
 
 interface IMDEditorProps {
-  markdown?: string;
+  currentHandle: FH | null;
   changed: boolean;
   onChanged(changed: boolean): any;
   onSave(markdown: string): any;
@@ -93,7 +95,7 @@ const getMDString = getMarkdown();
 
 const MDEditor = forwardRef<IMDEditorExpose, IMDEditorProps>(
   function MDEditor(props, ref) {
-    const { markdown = '', changed, onChanged, onSave } = props;
+    const { currentHandle, changed, onChanged, onSave } = props;
 
     const editorContainerRef = useRef<HTMLDivElement>(null);
     const editorRef = useRef<Editor>();
@@ -116,22 +118,29 @@ const MDEditor = forwardRef<IMDEditorExpose, IMDEditorProps>(
         editorRef.current.destroy(true);
       }
 
-      creatingRef.current = true;
-
-      createMDEditor(editorContainerRef.current!, markdown, onUpdate)
-        .then((value) => {
-          editorRef.current = value;
-          mdStringRef.current = markdown;
-          onChanged(false);
-        })
-        .finally(() => {
-          creatingRef.current = false;
-        });
+      if (currentHandle) {
+        creatingRef.current = true;
+
+        currentHandle
+          .getFile()
+          .then((file) => file.text())
+          .then((markdown) => {
+            createMDEditor(editorContainerRef.current!, markdown, onUpdate)
+              .then((value) => {
+                editorRef.current = value;
+                mdStringRef.current = markdown;
+                onChanged(false);
+              })
+              .finally(() => {
+                creatingRef.current = false;
+              });
+          });
+      }
 
       return () => {
         editorRef.current?.destroy(true);
       };
-    }, [markdown]);
+    }, [currentHandle]);
 
     function onUpdate(md: string) {
       onChanged(true);

diff --git a/src/filehandle/md_editor/index.tsx b/src/filehandle/md_editor/index.tsx
@@ -9,15 +9,20 @@ import type BackgroundManager from '../BackgroundManager';
 import type { FileHandle } from '../hooks/useFileSystem';
 import type { DH, FH } from '../utils/fileManager';
 
+let MDHandle: typeof import('./component/MDHandle').default;
 async function createMDHandleInstance(handle: DH | FH, bgm: BackgroundManager) {
-  const { default: MDHandle } = await import('./component/MDHandle');
+  if (!MDHandle) {
+    MDHandle = (await import('./component/MDHandle')).default;
+  }
 
   const el = createElementContainer();
   const root = createRoot(el);
+
   const destroy = () => {
     root.unmount();
     el.remove();
   };
+
   root.render(
     <StrictMode>
       <MDHandle handle={handle} backgroundManager={bgm} destroy={destroy} />