fix: editor resource list (#445)

web/src/components/MemoEditor.tsx

@@ -40,8 +40,8 @@ interface State {
 
 const MemoEditor: React.FC = () => {
   const { t, i18n } = useTranslation();
-  const user = useAppSelector((state) => state.user.user);
+  const user = useAppSelector((state) => state.user.user as User);
-  const { setting } = useAppSelector((state) => state.user.user as User);
+  const setting = user.setting;
   const editorState = useAppSelector((state) => state.editor);
   const tags = useAppSelector((state) => state.memo.tags);
   const [state, setState] = useState<State>({
@@ -85,33 +85,29 @@ const MemoEditor: React.FC = () => {
   }, [editorState.markMemoId]);
 
   useEffect(() => {
-    if (
+    if (editorState.editMemoId) {
-      editorState.editMemoId &&
-      editorState.editMemoId !== UNKNOWN_ID &&
-      editorState.editMemoId !== prevGlobalStateRef.current.editMemoId
-    ) {
       memoService.getMemoById(editorState.editMemoId ?? UNKNOWN_ID).then((memo) => {
         if (memo) {
-          setState({
+          handleEditorFocus();
-            ...state,
-            resourceList: memo.resourceList,
-          });
           editorStateService.setMemoVisibility(memo.visibility);
           editorRef.current?.setContent(memo.content ?? "");
-          editorRef.current?.focus();
+          setState((state) => {
+            return {
+              ...state,
+              resourceList: memo.resourceList,
+            };
+          });
         }
       });
-    }
-
-    prevGlobalStateRef.current = editorState;
-    if (editorState.editMemoId) {
       storage.set({
         editingMemoIdCache: editorState.editMemoId,
       });
     } else {
       storage.remove(["editingMemoIdCache"]);
     }
-  }, [state, editorState.editMemoId]);
+
+    prevGlobalStateRef.current = editorState;
+  }, [editorState.editMemoId]);
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === "Escape" && state.fullscreen) {
@@ -241,7 +237,6 @@ const MemoEditor: React.FC = () => {
       fullscreen: false,
       resourceList: [],
     });
-    editorStateService.setMemoVisibility(setting.memoVisibility);
     setEditorContentCache("");
     storage.remove(["editingMemoVisibilityCache"]);
     editorRef.current?.setContent("");
@@ -338,7 +333,7 @@ const MemoEditor: React.FC = () => {
   const handleTagSeletorClick = useCallback((event: React.MouseEvent) => {
     if (tagSeletorRef.current !== event.target && tagSeletorRef.current?.contains(event.target as Node)) {
       editorRef.current?.insertText(`#${(event.target as HTMLElement).textContent} ` ?? "");
-      editorRef.current?.focus();
+      handleEditorFocus();
     }
   }, []);
 

web/src/components/MemoFilter.tsx

@@ -3,6 +3,7 @@ import { useAppSelector } from "../store";
 import { locationService, shortcutService } from "../services";
 import * as utils from "../helpers/utils";
 import { getTextWithMemoType } from "../helpers/filter";
+import Icon from "./Icon";
 import "../less/memo-filter.less";
 
 const MemoFilter = () => {
@@ -16,28 +17,28 @@ const MemoFilter = () => {
     <div className={`filter-query-container ${showFilter ? "" : "!hidden"}`}>
       <span className="tip-text">{t("common.filter")}:</span>
       <div
-        className={"filter-item-container " + (shortcut ? "" : "hidden")}
+        className={"filter-item-container " + (shortcut ? "" : "!hidden")}
         onClick={() => {
           locationService.setMemoShortcut(undefined);
         }}
       >
-        <span className="icon-text">🎯</span> {shortcut?.title}
+        <Icon.Target className="icon-text" /> {shortcut?.title}
       </div>
       <div
-        className={"filter-item-container " + (tagQuery ? "" : "hidden")}
+        className={"filter-item-container " + (tagQuery ? "" : "!hidden")}
         onClick={() => {
           locationService.setTagQuery(undefined);
         }}
       >
-        <span className="icon-text">🏷️</span> {tagQuery}
+        <Icon.Tag className="icon-text" /> {tagQuery}
       </div>
       <div
-        className={"filter-item-container " + (memoType ? "" : "hidden")}
+        className={"filter-item-container " + (memoType ? "" : "!hidden")}
         onClick={() => {
           locationService.setMemoTypeQuery(undefined);
         }}
       >
-        <span className="icon-text">📦</span> {t(getTextWithMemoType(memoType as MemoSpecType))}
+        <Icon.Box className="icon-text" /> {t(getTextWithMemoType(memoType as MemoSpecType))}
       </div>
       {duration && duration.from < duration.to ? (
         <div
@@ -46,16 +47,16 @@ const MemoFilter = () => {
             locationService.setFromAndToQuery();
           }}
         >
-          <span className="icon-text">🗓️</span> {utils.getDateString(duration.from)} to {utils.getDateString(duration.to)}
+          <Icon.Calendar className="icon-text" /> {utils.getDateString(duration.from)} to {utils.getDateString(duration.to)}
         </div>
       ) : null}
       <div
-        className={"filter-item-container " + (textQuery ? "" : "hidden")}
+        className={"filter-item-container " + (textQuery ? "" : "!hidden")}
         onClick={() => {
           locationService.setTextQuery("");
         }}
       >
-        <span className="icon-text">🔍</span> {textQuery}
+        <Icon.Search className="icon-text" /> {textQuery}
       </div>
     </div>
   );

web/src/components/Settings/SystemSection.tsx

@@ -68,8 +68,10 @@ const SystemSection = () => {
         className="w-full"
         sx={{
           fontFamily: "monospace",
+          fontSize: "14px",
         }}
         minRows={5}
+        maxRows={10}
         defaultValue={state.additionalStyle}
         onChange={(event) => handleAdditionalStyleChanged(event.target.value)}
       />

web/src/less/memo-editor.less

@@ -60,7 +60,7 @@
         @apply rounded-full;
 
         > .value-text {
-          @apply text-sm w-full;
+          @apply text-xs w-full;
         }
       }
     }

web/src/less/memo-filter.less

@@ -9,7 +9,11 @@
   }
 
   > .filter-item-container {
-    @apply px-2 mr-2 cursor-pointer bg-gray-200 rounded whitespace-nowrap truncate hover:line-through;
+    @apply flex flex-row justify-start items-center px-2 mr-2 cursor-pointer bg-gray-200 rounded whitespace-nowrap truncate hover:line-through;
     max-width: 256px;
+
+    > .icon-text {
+      @apply w-4 h-auto mr-1 text-gray-500;
+    }
   }
 }

web/src/less/memo-resources.less

@@ -5,7 +5,6 @@
 
   > .images-wrapper {
     @apply flex flex-row justify-start items-start mt-2 w-full overflow-x-auto overflow-y-hidden pb-1;
-    .pretty-scroll-bar(0, 2px);
 
     > .memo-img {
       @apply mr-2 last:mr-0 w-auto h-auto shrink-0 grow-0 overflow-y-hidden;

web/src/services/locationService.ts

@@ -3,7 +3,6 @@ import store from "../store";
 import { setQuery, setPathname, Query, updateStateWithLocation } from "../store/modules/location";
 
 const updateLocationUrl = (method: "replace" | "push" = "replace") => {
-  store.dispatch(updateStateWithLocation());
   const { query, pathname, hash } = store.getState().location;
   let queryString = stringify(query);
   if (queryString) {
@@ -17,6 +16,7 @@ const updateLocationUrl = (method: "replace" | "push" = "replace") => {
   } else {
     window.history.pushState(null, "", pathname + hash + queryString);
   }
+  store.dispatch(updateStateWithLocation());
 };
 
 const locationService = {