From d1aa6aa7f8394dea7c4146b18d4a8912ebd3e3a6 Mon Sep 17 00:00:00 2001 From: boojack Date: Sat, 12 Nov 2022 09:04:26 +0800 Subject: [PATCH] fix: editor resource list (#445) --- web/src/components/MemoEditor.tsx | 33 ++++++++----------- web/src/components/MemoFilter.tsx | 19 ++++++----- web/src/components/Settings/SystemSection.tsx | 2 ++ web/src/less/memo-editor.less | 2 +- web/src/less/memo-filter.less | 6 +++- web/src/less/memo-resources.less | 1 - web/src/services/locationService.ts | 2 +- 7 files changed, 33 insertions(+), 32 deletions(-) diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx index 454a8756..6a8e805d 100644 --- a/web/src/components/MemoEditor.tsx +++ b/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 { setting } = useAppSelector((state) => state.user.user as User); + const user = 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({ @@ -85,33 +85,29 @@ const MemoEditor: React.FC = () => { }, [editorState.markMemoId]); useEffect(() => { - if ( - editorState.editMemoId && - editorState.editMemoId !== UNKNOWN_ID && - editorState.editMemoId !== prevGlobalStateRef.current.editMemoId - ) { + if (editorState.editMemoId) { memoService.getMemoById(editorState.editMemoId ?? UNKNOWN_ID).then((memo) => { if (memo) { - setState({ - ...state, - resourceList: memo.resourceList, - }); + handleEditorFocus(); 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(); } }, []); diff --git a/web/src/components/MemoFilter.tsx b/web/src/components/MemoFilter.tsx index fb92ad8f..40b620d9 100644 --- a/web/src/components/MemoFilter.tsx +++ b/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 = () => {
{t("common.filter")}:
{ locationService.setMemoShortcut(undefined); }} > - 🎯 {shortcut?.title} + {shortcut?.title}
{ locationService.setTagQuery(undefined); }} > - 🏷️ {tagQuery} + {tagQuery}
{ locationService.setMemoTypeQuery(undefined); }} > - 📦 {t(getTextWithMemoType(memoType as MemoSpecType))} + {t(getTextWithMemoType(memoType as MemoSpecType))}
{duration && duration.from < duration.to ? (
{ locationService.setFromAndToQuery(); }} > - 🗓️ {utils.getDateString(duration.from)} to {utils.getDateString(duration.to)} + {utils.getDateString(duration.from)} to {utils.getDateString(duration.to)}
) : null}
{ locationService.setTextQuery(""); }} > - 🔍 {textQuery} + {textQuery}
); diff --git a/web/src/components/Settings/SystemSection.tsx b/web/src/components/Settings/SystemSection.tsx index 7b9c40cd..683617e1 100644 --- a/web/src/components/Settings/SystemSection.tsx +++ b/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)} /> diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less index 6e49f767..43693ef6 100644 --- a/web/src/less/memo-editor.less +++ b/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; } } } diff --git a/web/src/less/memo-filter.less b/web/src/less/memo-filter.less index d15affd3..6ada0d78 100644 --- a/web/src/less/memo-filter.less +++ b/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; + } } } diff --git a/web/src/less/memo-resources.less b/web/src/less/memo-resources.less index cffdf7af..5d38370c 100644 --- a/web/src/less/memo-resources.less +++ b/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; diff --git a/web/src/services/locationService.ts b/web/src/services/locationService.ts index f7427890..2a64fc40 100644 --- a/web/src/services/locationService.ts +++ b/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 = {