diff --git a/web/src/components/DailyMemo.tsx b/web/src/components/DailyMemo.tsx index 1555b766..93aec314 100644 --- a/web/src/components/DailyMemo.tsx +++ b/web/src/components/DailyMemo.tsx @@ -1,5 +1,5 @@ import * as utils from "../helpers/utils"; -import MemoContent, { DisplayConfig } from "./MemoContent"; +import MemoContent from "./MemoContent"; import MemoResources from "./MemoResources"; import "../less/daily-memo.less"; @@ -10,9 +10,6 @@ interface Props { const DailyMemo: React.FC = (props: Props) => { const { memo } = props; const createdTimeStr = utils.getTimeString(memo.createdTs); - const displayConfig: DisplayConfig = { - enableExpand: false, - }; return (
@@ -20,7 +17,7 @@ const DailyMemo: React.FC = (props: Props) => { {createdTimeStr}
- +
diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx index dda7b244..caec39df 100644 --- a/web/src/components/Memo.tsx +++ b/web/src/components/Memo.tsx @@ -1,4 +1,3 @@ -import { Tooltip } from "@mui/joy"; import copy from "copy-to-clipboard"; import dayjs from "dayjs"; import { memo, useEffect, useRef, useState } from "react"; @@ -39,7 +38,6 @@ const Memo: React.FC = (props: Props) => { const [createdTimeStr, setCreatedTimeStr] = useState(getFormatedMemoTimeStr(memo.createdTs, i18n.language)); const memoContainerRef = useRef(null); const isVisitorMode = userStore.isVisitorMode() || readonly; - const updatedTimeStr = getFormatedMemoTimeStr(memo.updatedTs, i18n.language); useEffect(() => { let intervalFlag: any = -1; @@ -111,7 +109,7 @@ const Memo: React.FC = (props: Props) => { } }; - const handleGenMemoImageBtnClick = () => { + const handleGenerateMemoImageBtnClick = () => { showShareMemo(memo); }; @@ -203,11 +201,9 @@ const Memo: React.FC = (props: Props) => { {memo.pinned &&
}
- - - {createdTimeStr} - - + + {createdTimeStr} + {isVisitorMode && ( @{memo.creatorName} @@ -238,7 +234,7 @@ const Memo: React.FC = (props: Props) => { {t("common.edit")}
-
+
{t("common.share")}
diff --git a/web/src/components/MemoContent.tsx b/web/src/components/MemoContent.tsx index c43819cb..300681fe 100644 --- a/web/src/components/MemoContent.tsx +++ b/web/src/components/MemoContent.tsx @@ -1,18 +1,15 @@ -import { useEffect, useMemo, useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; -import { useUserStore } from "../store/module"; import { marked } from "../labs/marked"; import Icon from "./Icon"; import "../less/memo-content.less"; -export interface DisplayConfig { - enableExpand: boolean; -} +const MAX_EXPAND_HEIGHT = 384; interface Props { content: string; className?: string; - displayConfig?: Partial; + showFull?: boolean; onMemoContentClick?: (e: React.MouseEvent) => void; onMemoContentDoubleClick?: (e: React.MouseEvent) => void; } @@ -23,48 +20,29 @@ interface State { expandButtonStatus: ExpandButtonStatus; } -const defaultDisplayConfig: DisplayConfig = { - enableExpand: true, -}; - const MemoContent: React.FC = (props: Props) => { - const { className, content, onMemoContentClick, onMemoContentDoubleClick } = props; + const { className, content, showFull, onMemoContentClick, onMemoContentDoubleClick } = props; const { t } = useTranslation(); - const userStore = useUserStore(); - const user = userStore.state.user; - const foldedContent = useMemo(() => { - const firstHorizontalRuleIndex = content.search(/^---$|^\*\*\*$|^___$/m); - return firstHorizontalRuleIndex !== -1 ? content.slice(0, firstHorizontalRuleIndex) : content; - }, [content]); const [state, setState] = useState({ expandButtonStatus: -1, }); const memoContentContainerRef = useRef(null); - const displayConfig = { - ...defaultDisplayConfig, - ...props.displayConfig, - }; useEffect(() => { - if (!memoContentContainerRef) { + if (showFull) { return; } - if (displayConfig.enableExpand && user && user.localSetting.enableFoldMemo) { - if (foldedContent.length !== content.length) { + if (memoContentContainerRef.current) { + const height = memoContentContainerRef.current.clientHeight; + if (height > MAX_EXPAND_HEIGHT) { setState({ - ...state, expandButtonStatus: 0, }); } - } else { - setState({ - ...state, - expandButtonStatus: -1, - }); } - }, [user?.localSetting.enableFoldMemo, content]); + }, []); const handleMemoContentClick = async (e: React.MouseEvent) => { if (onMemoContentClick) { @@ -89,17 +67,18 @@ const MemoContent: React.FC = (props: Props) => {
- {marked(state.expandButtonStatus === 0 ? foldedContent : content)} + {marked(content)}
{state.expandButtonStatus !== -1 && ( -
- +
+
+ {state.expandButtonStatus === 0 ? t("common.expand") : t("common.fold")} - +
)} diff --git a/web/src/components/Settings/PreferencesSection.tsx b/web/src/components/Settings/PreferencesSection.tsx index d88101f9..e9106f69 100644 --- a/web/src/components/Settings/PreferencesSection.tsx +++ b/web/src/components/Settings/PreferencesSection.tsx @@ -40,10 +40,6 @@ const PreferencesSection = () => { await userStore.upsertUserSetting("resourceVisibility", value); }; - const handleIsFoldingEnabledChanged = (event: React.ChangeEvent) => { - userStore.upsertLocalSetting({ ...localSetting, enableFoldMemo: event.target.checked }); - }; - const handleDoubleClickEnabledChanged = (event: React.ChangeEvent) => { userStore.upsertLocalSetting({ ...localSetting, enableDoubleClickEditing: event.target.checked }); }; @@ -131,10 +127,6 @@ const PreferencesSection = () => {
-