feat: fold memos according to horizontal rule (#478)

* feat: fold memos according to horizontal rule * fix: button and content * chore: update
usememos · Nov 15, 2022 · c89a666 · c89a666
1 parent 797accb
commit c89a666
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 12 deletions.
diff --git 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
@@ -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;