YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* feat: fold memos according to horizontal rule

* fix: button and content

* chore: update
This commit is contained in:
Stephen Zhou
2022-11-15 22:49:08 +08:00
committed by GitHub
parent 797accbc2c
commit c89a6665b6
2 changed files with 7 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/components/MemoContent.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { marked } from "../labs/marked"; import { marked } from "../labs/marked";
import Icon from "./Icon"; import Icon from "./Icon";
@ -28,10 +28,12 @@ const defaultDisplayConfig: DisplayConfig = {
enableExpand: true, enableExpand: true,
}; };
const MAX_MEMO_CONTAINER_HEIGHT = 384;
const MemoContent: React.FC<Props> = (props: Props) => { const MemoContent: React.FC<Props> = (props: Props) => {
const { className, content, onMemoContentClick, onMemoContentDoubleClick } = 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 { t } = useTranslation();
const [isFoldingEnabled] = useLocalStorage(SETTING_IS_FOLDING_ENABLED_KEY, IS_FOLDING_ENABLED_DEFAULT_VALUE); const [isFoldingEnabled] = useLocalStorage(SETTING_IS_FOLDING_ENABLED_KEY, IS_FOLDING_ENABLED_DEFAULT_VALUE);
const [state, setState] = useState<State>({ const [state, setState] = useState<State>({
@ -49,7 +51,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
} }
if (displayConfig.enableExpand && isFoldingEnabled) { if (displayConfig.enableExpand && isFoldingEnabled) {
if (Number(memoContentContainerRef.current?.clientHeight) > MAX_MEMO_CONTAINER_HEIGHT) { if (foldedContent.length !== content.length) {
setState({ setState({
...state, ...state,
expandButtonStatus: 0, expandButtonStatus: 0,
@ -84,7 +86,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
className={`memo-content-text ${state.expandButtonStatus === 0 ? "expanded" : ""}`} className={`memo-content-text ${state.expandButtonStatus === 0 ? "expanded" : ""}`}
onClick={handleMemoContentClick} onClick={handleMemoContentClick}
onDoubleClick={handleMemoContentDoubleClick} onDoubleClick={handleMemoContentDoubleClick}
dangerouslySetInnerHTML={{ __html: marked(content) }} dangerouslySetInnerHTML={{ __html: marked(state.expandButtonStatus === 0 ? foldedContent : content) }}
></div> ></div>
{state.expandButtonStatus !== -1 && ( {state.expandButtonStatus !== -1 && (
<div className="expand-btn-container"> <div className="expand-btn-container">

7
web/src/less/memo-content.less
View File

@ -6,13 +6,6 @@
> .memo-content-text { > .memo-content-text {
@apply w-full break-words text-base leading-7; @apply w-full break-words text-base leading-7;
&.expanded {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 8;
overflow: hidden;
}
> p { > p {
@apply w-full h-auto mb-1 last:mb-0 text-base leading-6 whitespace-pre-wrap break-words; @apply w-full h-auto mb-1 last:mb-0 text-base leading-6 whitespace-pre-wrap break-words;
min-height: 24px; min-height: 24px;