feat: fold memo when content overflow (#1327)

* feat: fold memo when content overflow

* chore: update

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: Props) => {
   const { memo } = props;
   const createdTimeStr = utils.getTimeString(memo.createdTs);
-  const displayConfig: DisplayConfig = {
-    enableExpand: false,
-  };
 
   return (
     <div className="daily-memo-wrapper">
@@ -20,7 +17,7 @@ const DailyMemo: React.FC<Props> = (props: Props) => {
         <span className="normal-text">{createdTimeStr}</span>
       </div>
       <div className="memo-container">
-        <MemoContent content={memo.content} displayConfig={displayConfig} />
+        <MemoContent content={memo.content} showFull={true} />
         <MemoResources resourceList={memo.resourceList} />
       </div>
       <div className="split-line"></div>

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: Props) => {
   const [createdTimeStr, setCreatedTimeStr] = useState<string>(getFormatedMemoTimeStr(memo.createdTs, i18n.language));
   const memoContainerRef = useRef<HTMLDivElement>(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: Props) => {
     }
   };
 
-  const handleGenMemoImageBtnClick = () => {
+  const handleGenerateMemoImageBtnClick = () => {
     showShareMemo(memo);
   };
 
@@ -203,11 +201,9 @@ const Memo: React.FC<Props> = (props: Props) => {
       {memo.pinned && <div className="corner-container"></div>}
       <div className="memo-top-wrapper">
         <div className="status-text-container">
-          <Tooltip title={`Updated at ${updatedTimeStr}`} placement="top" arrow>
           <span className="time-text" onDoubleClick={handleMemoCreatedTimeClick}>
             {createdTimeStr}
           </span>
-          </Tooltip>
           {isVisitorMode && (
             <a className="name-text" href={`/u/${memo.creatorId}`}>
               @{memo.creatorName}
@@ -238,7 +234,7 @@ const Memo: React.FC<Props> = (props: Props) => {
                     <Icon.Edit3 className="icon-img" />
                     <span className="tip-text">{t("common.edit")}</span>
                   </div>
-                  <div className="btn" onClick={handleGenMemoImageBtnClick}>
+                  <div className="btn" onClick={handleGenerateMemoImageBtnClick}>
                     <Icon.Share className="icon-img" />
                     <span className="tip-text">{t("common.share")}</span>
                   </div>

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 {
+const MAX_EXPAND_HEIGHT = 384;
-  enableExpand: boolean;
-}
 
 interface Props {
   content: string;
   className?: string;
-  displayConfig?: Partial<DisplayConfig>;
+  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: 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<State>({
     expandButtonStatus: -1,
   });
   const memoContentContainerRef = useRef<HTMLDivElement>(null);
-  const displayConfig = {
-    ...defaultDisplayConfig,
-    ...props.displayConfig,
-  };
 
   useEffect(() => {
-    if (!memoContentContainerRef) {
+    if (showFull) {
       return;
     }
 
-    if (displayConfig.enableExpand && user && user.localSetting.enableFoldMemo) {
+    if (memoContentContainerRef.current) {
-      if (foldedContent.length !== content.length) {
+      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: Props) => {
     <div className={`memo-content-wrapper ${className || ""}`}>
       <div
         ref={memoContentContainerRef}
-        className={`memo-content-text ${state.expandButtonStatus === 0 ? "expanded" : ""}`}
+        className={`memo-content-text ${state.expandButtonStatus === 0 ? "max-h-64 overflow-y-hidden" : ""}`}
         onClick={handleMemoContentClick}
         onDoubleClick={handleMemoContentDoubleClick}
       >
-        {marked(state.expandButtonStatus === 0 ? foldedContent : content)}
+        {marked(content)}
       </div>
       {state.expandButtonStatus !== -1 && (
-        <div className="expand-btn-container">
+        <div className={`expand-btn-container ${state.expandButtonStatus === 0 && "!-mt-7"}`}>
-          <span className={`btn ${state.expandButtonStatus === 0 ? "expand-btn" : "fold-btn"}`} onClick={handleExpandBtnClick}>
+          <div className="absolute top-0 left-0 w-full h-full blur-lg bg-white"></div>
+          <span className={`btn z-10 ${state.expandButtonStatus === 0 ? "expand-btn" : "fold-btn"}`} onClick={handleExpandBtnClick}>
             {state.expandButtonStatus === 0 ? t("common.expand") : t("common.fold")}
-            <Icon.ChevronRight className="icon-img" />
+            <Icon.ChevronRight className="icon-img opacity-80" />
           </span>
         </div>
       )}

web/src/components/Settings/PreferencesSection.tsx

@@ -40,10 +40,6 @@ const PreferencesSection = () => {
     await userStore.upsertUserSetting("resourceVisibility", value);
   };
 
-  const handleIsFoldingEnabledChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
-    userStore.upsertLocalSetting({ ...localSetting, enableFoldMemo: event.target.checked });
-  };
-
   const handleDoubleClickEnabledChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
     userStore.upsertLocalSetting({ ...localSetting, enableDoubleClickEditing: event.target.checked });
   };
@@ -131,10 +127,6 @@ const PreferencesSection = () => {
         </span>
       </div>
 
-      <label className="form-label selector">
-        <span className="normal-text">{t("setting.preference-section.enable-folding-memo")}</span>
-        <Switch className="ml-2" checked={localSetting.enableFoldMemo} onChange={handleIsFoldingEnabledChanged} />
-      </label>
       <label className="form-label selector">
         <span className="normal-text">{t("setting.preference-section.enable-double-click")}</span>
         <Switch className="ml-2" checked={localSetting.enableDoubleClickEditing} onChange={handleDoubleClickEnabledChanged} />

web/src/components/ShareMemoDialog.tsx

@@ -126,7 +126,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
         <div className="memo-container" ref={memoElRef}>
           <span className="time-text">{memo.createdAtStr}</span>
           <div className="memo-content-wrapper">
-            <MemoContent content={memo.content} displayConfig={{ enableExpand: false }} />
+            <MemoContent content={memo.content} showFull={true} />
             <MemoResources resourceList={memo.resourceList} />
           </div>
           <div className="watermark-container">

web/src/less/memo-content.less

@@ -110,11 +110,9 @@
     @apply w-full relative flex flex-row justify-start items-center;
 
     > .btn {
-      @apply flex flex-row justify-start items-center pl-2 pr-1 py-1 my-1 text-xs rounded-lg border bg-gray-100 dark:bg-zinc-600 border-gray-200 dark:border-zinc-600 opacity-80 shadow hover:opacity-60 cursor-pointer;
+      @apply flex flex-row justify-start items-center pl-2 pr-1 py-1 my-2 text-xs rounded-lg border bg-gray-100 dark:bg-zinc-600 border-gray-200 dark:border-zinc-600 shadow hover:opacity-90 cursor-pointer;
 
       &.expand-btn {
-        @apply mt-2;
-
         > .icon-img {
           @apply rotate-90;
         }

web/src/store/module/user.ts

@@ -14,7 +14,6 @@ const defaultSetting: Setting = {
 };
 
 const defaultLocalSetting: LocalSetting = {
-  enableFoldMemo: true,
   enableDoubleClickEditing: true,
   dailyReviewTimeOffset: 0,
 };

web/src/types/modules/setting.d.ts

@@ -8,7 +8,6 @@ interface Setting {
 }
 
 interface LocalSetting {
-  enableFoldMemo: boolean;
   enableDoubleClickEditing: boolean;
   dailyReviewTimeOffset: number;
 }