diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx index d3ad8306..edcbeb19 100644 --- a/web/src/components/MemoEditor.tsx +++ b/web/src/components/MemoEditor.tsx @@ -7,36 +7,31 @@ import toastHelper from "./Toast"; import Editor, { EditorRefActions } from "./Editor/Editor"; import "../less/memo-editor.less"; -interface Props { - className?: string; - editMemoId?: string; -} +interface Props {} -const MemoEditor: React.FC = (props: Props) => { - const { className, editMemoId } = props; +const MemoEditor: React.FC = () => { const { globalState } = useContext(appContext); const editorRef = useRef(null); + const prevGlobalStateRef = useRef(globalState); useEffect(() => { if (globalState.markMemoId) { - if (editMemoId === globalState.editMemoId || (!editMemoId && !globalState.editMemoId)) { - const editorCurrentValue = editorRef.current?.getContent(); - const memoLinkText = `${editorCurrentValue ? "\n" : ""}Mark: [@MEMO](${globalState.markMemoId})`; - editorRef.current?.insertText(memoLinkText); - globalStateService.setMarkMemoId(""); - } + const editorCurrentValue = editorRef.current?.getContent(); + const memoLinkText = `${editorCurrentValue ? "\n" : ""}Mark: [@MEMO](${globalState.markMemoId})`; + editorRef.current?.insertText(memoLinkText); + globalStateService.setMarkMemoId(""); } - }, [globalState.markMemoId]); - useEffect(() => { - if (editMemoId) { - const editMemo = memoService.getMemoById(editMemoId); + if (globalState.editMemoId && globalState.editMemoId !== prevGlobalStateRef.current.editMemoId) { + const editMemo = memoService.getMemoById(globalState.editMemoId); if (editMemo) { editorRef.current?.setContent(editMemo.content ?? ""); editorRef.current?.focus(); } } - }, [editMemoId]); + + prevGlobalStateRef.current = globalState; + }, [globalState.markMemoId, globalState.editMemoId]); const handleSaveBtnClick = useCallback(async (content: string) => { if (content === "") { @@ -44,6 +39,8 @@ const MemoEditor: React.FC = (props: Props) => { return; } + const { editMemoId } = globalStateService.getState(); + content = content.replaceAll(" ", " "); try { @@ -83,7 +80,7 @@ const MemoEditor: React.FC = (props: Props) => { setEditorContentCache(content); }, []); - const showEditStatus = Boolean(editMemoId); + const showEditStatus = Boolean(globalState.editMemoId); const editorConfig = useMemo( () => ({ @@ -97,12 +94,12 @@ const MemoEditor: React.FC = (props: Props) => { onCancelBtnClick: handleCancelBtnClick, onContentChange: handleContentChange, }), - [editMemoId] + [showEditStatus] ); return ( -
-

正在修改中...

+
+

正在修改中...

); diff --git a/web/src/components/MemoList.tsx b/web/src/components/MemoList.tsx index 7021baf7..d3bc0051 100644 --- a/web/src/components/MemoList.tsx +++ b/web/src/components/MemoList.tsx @@ -6,7 +6,6 @@ import utils from "../helpers/utils"; import { checkShouldShowMemoWithFilters } from "../helpers/filter"; import Memo from "./Memo"; import toastHelper from "./Toast"; -import MemoEditor from "./MemoEditor"; import "../less/memolist.less"; interface Props {} @@ -95,13 +94,9 @@ const MemoList: React.FC = () => { return (
- {shownMemos.map((memo) => - globalState.editMemoId === memo.id ? ( - - ) : ( - - ) - )} + {shownMemos.map((memo) => ( + + ))}

{isFetching ? "努力请求数据中..." : shownMemos.length === 0 ? "空空如也" : showMemoFilter ? "" : "所有数据加载完啦 🎉"} diff --git a/web/src/less/memolist.less b/web/src/less/memolist.less index 2684d375..20ea0703 100644 --- a/web/src/less/memolist.less +++ b/web/src/less/memolist.less @@ -7,11 +7,6 @@ overflow-y: scroll; .hide-scroll-bar(); - > .memo-edit { - margin-top: 8px; - width: 100%; - } - > .status-text-container { .flex(column, flex-start, center); width: 100%;