From c89a6665b66159b057c2f3cc33ce221043a6709d Mon Sep 17 00:00:00 2001
From: Stephen Zhou <hi@hyoban.cc>
Date: Tue, 15 Nov 2022 22:49:08 +0800
Subject: [PATCH] feat: fold memos according to horizontal rule (#478)

* feat: fold memos according to horizontal rule

* fix: button and content

* chore: update
---
 web/src/components/MemoContent.tsx | 12 +++++++-----
 web/src/less/memo-content.less     |  7 -------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/web/src/components/MemoContent.tsx b/web/src/components/MemoContent.tsx
index d03922ce..249dd88b 100644
--- a/web/src/components/MemoContent.tsx
+++ b/web/src/components/MemoContent.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { marked } from "../labs/marked";
 import Icon from "./Icon";
@@ -28,10 +28,12 @@ const defaultDisplayConfig: DisplayConfig = {
   enableExpand: true,
 };
 
-const MAX_MEMO_CONTAINER_HEIGHT = 384;
-
 const MemoContent: React.FC<Props> = (props: Props) => {
   const { className, content, onMemoContentClick, onMemoContentDoubleClick } = props;
+  const foldedContent = useMemo(() => {
+    const firstHorizontalRuleIndex = content.search(/^---$|^\*\*\*$|^___$/m);
+    return firstHorizontalRuleIndex !== -1 ? content.slice(0, firstHorizontalRuleIndex) : content;
+  }, [content]);
   const { t } = useTranslation();
   const [isFoldingEnabled] = useLocalStorage(SETTING_IS_FOLDING_ENABLED_KEY, IS_FOLDING_ENABLED_DEFAULT_VALUE);
   const [state, setState] = useState<State>({
@@ -49,7 +51,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
     }
 
     if (displayConfig.enableExpand && isFoldingEnabled) {
-      if (Number(memoContentContainerRef.current?.clientHeight) > MAX_MEMO_CONTAINER_HEIGHT) {
+      if (foldedContent.length !== content.length) {
         setState({
           ...state,
           expandButtonStatus: 0,
@@ -84,7 +86,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
         className={`memo-content-text ${state.expandButtonStatus === 0 ? "expanded" : ""}`}
         onClick={handleMemoContentClick}
         onDoubleClick={handleMemoContentDoubleClick}
-        dangerouslySetInnerHTML={{ __html: marked(content) }}
+        dangerouslySetInnerHTML={{ __html: marked(state.expandButtonStatus === 0 ? foldedContent : content) }}
       ></div>
       {state.expandButtonStatus !== -1 && (
         <div className="expand-btn-container">
diff --git a/web/src/less/memo-content.less b/web/src/less/memo-content.less
index 5991bf54..e06e518c 100644
--- a/web/src/less/memo-content.less
+++ b/web/src/less/memo-content.less
@@ -6,13 +6,6 @@
   > .memo-content-text {
     @apply w-full break-words text-base leading-7;
 
-    &.expanded {
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 8;
-      overflow: hidden;
-    }
-
     > p {
       @apply w-full h-auto mb-1 last:mb-0 text-base leading-6 whitespace-pre-wrap break-words;
       min-height: 24px;