web: recover single global memo editor

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 {
+interface Props {}
-  className?: string;
-  editMemoId?: string;
-}
 
-const MemoEditor: React.FC<Props> = (props: Props) => {
+const MemoEditor: React.FC<Props> = () => {
-  const { className, editMemoId } = props;
   const { globalState } = useContext(appContext);
   const editorRef = useRef<EditorRefActions>(null);
+  const prevGlobalStateRef = useRef(globalState);
 
   useEffect(() => {
     if (globalState.markMemoId) {
-      if (editMemoId === globalState.editMemoId || (!editMemoId && !globalState.editMemoId)) {
+      const editorCurrentValue = editorRef.current?.getContent();
-        const editorCurrentValue = editorRef.current?.getContent();
+      const memoLinkText = `${editorCurrentValue ? "\n" : ""}Mark: [@MEMO](${globalState.markMemoId})`;
-        const memoLinkText = `${editorCurrentValue ? "\n" : ""}Mark: [@MEMO](${globalState.markMemoId})`;
+      editorRef.current?.insertText(memoLinkText);
-        editorRef.current?.insertText(memoLinkText);
+      globalStateService.setMarkMemoId("");
-        globalStateService.setMarkMemoId("");
-      }
     }
-  }, [globalState.markMemoId]);
 
-  useEffect(() => {
+    if (globalState.editMemoId && globalState.editMemoId !== prevGlobalStateRef.current.editMemoId) {
-    if (editMemoId) {
+      const editMemo = memoService.getMemoById(globalState.editMemoId);
-      const editMemo = memoService.getMemoById(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: Props) => {
       return;
     }
 
+    const { editMemoId } = globalStateService.getState();
+
     content = content.replaceAll("&nbsp;", " ");
 
     try {
@@ -83,7 +80,7 @@ const MemoEditor: React.FC<Props> = (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: Props) => {
       onCancelBtnClick: handleCancelBtnClick,
       onContentChange: handleContentChange,
     }),
-    [editMemoId]
+    [showEditStatus]
   );
 
   return (
-    <div className={`memo-editor-wrapper ${className} ${editMemoId ? "edit-ing" : ""}`}>
+    <div className={"memo-editor-wrapper " + (showEditStatus ? "edit-ing" : "")}>
-      <p className={"tip-text " + (editMemoId ? "" : "hidden")}>正在修改中...</p>
+      <p className={"tip-text " + (showEditStatus ? "" : "hidden")}>正在修改中...</p>
       <Editor ref={editorRef} {...editorConfig} />
     </div>
   );

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<Props> = () => {
 
   return (
     <div className={`memolist-wrapper ${isFetching ? "" : "completed"}`} onClick={handleMemoListClick} ref={wrapperElement}>
-      {shownMemos.map((memo) =>
+      {shownMemos.map((memo) => (
-        globalState.editMemoId === memo.id ? (
+        <Memo key={`${memo.id}-${memo.updatedAt}`} memo={memo} />
-          <MemoEditor key={memo.id} className="memo-edit" editMemoId={memo.id} />
+      ))}
-        ) : (
-          <Memo key={`${memo.id}-${memo.updatedAt}`} memo={memo} />
-        )
-      )}
       <div className="status-text-container">
         <p className="status-text">
           {isFetching ? "努力请求数据中..." : shownMemos.length === 0 ? "空空如也" : showMemoFilter ? "" : "所有数据加载完啦 🎉"}

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%;