diff --git a/src/filehandle/md_editor/component/MDContent.tsx b/src/filehandle/md_editor/component/MDContent.tsx index bb8f7c3..be729d2 100644 --- 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,10 +14,6 @@ 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; } @@ -25,19 +21,11 @@ interface IMDContentProps { export const MDContent: React.FC> = (props) => { const { handle } = props; - const [markdown, setMarkdown] = useState(''); const [changed, setChanged] = useState(false); const [currentHandle, setCurrentHandle] = useState(null); const editorRef = useRef(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> = (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> = (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> = (props) => {
( function MDEditor(props, ref) { - const { markdown = '', changed, onChanged, onSave } = props; + const { currentHandle, changed, onChanged, onSave } = props; const editorContainerRef = useRef(null); const editorRef = useRef(); @@ -116,22 +118,29 @@ const MDEditor = forwardRef( 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 index bcb7fc3..0bd4dea 100644 --- 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(