|
|
|
|
@ -26,13 +26,15 @@ interface Props {
|
|
|
|
|
onDoubleClick?: (e: React.MouseEvent) => void;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
type ContentCompactView = "ALL" | "SNIPPET";
|
|
|
|
|
|
|
|
|
|
const MemoContent: React.FC<Props> = (props: Props) => {
|
|
|
|
|
const { className, contentClassName, nodes, memoName, embeddedMemos, onClick, onDoubleClick } = props;
|
|
|
|
|
const t = useTranslate();
|
|
|
|
|
const currentUser = useCurrentUser();
|
|
|
|
|
const memoStore = useMemoStore();
|
|
|
|
|
const memoContentContainerRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
const [showCompactMode, setShowCompactMode] = useState<boolean>(false);
|
|
|
|
|
const [showCompactMode, setShowCompactMode] = useState<ContentCompactView | undefined>(undefined);
|
|
|
|
|
const memo = memoName ? memoStore.getMemoByName(memoName) : null;
|
|
|
|
|
const allowEdit = !props.readonly && memo && (currentUser?.name === memo.creator || isSuperUser(currentUser));
|
|
|
|
|
|
|
|
|
|
@ -46,7 +48,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if ((memoContentContainerRef.current as HTMLDivElement).getBoundingClientRect().height > MAX_DISPLAY_HEIGHT) {
|
|
|
|
|
setShowCompactMode(true);
|
|
|
|
|
setShowCompactMode("ALL");
|
|
|
|
|
}
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
@ -64,6 +66,10 @@ const MemoContent: React.FC<Props> = (props: Props) => {
|
|
|
|
|
|
|
|
|
|
let prevNode: Node | null = null;
|
|
|
|
|
let skipNextLineBreakFlag = false;
|
|
|
|
|
const compactStates = {
|
|
|
|
|
ALL: { text: t("memo.show-more"), nextState: "SNIPPET" },
|
|
|
|
|
SNIPPET: { text: t("memo.show-less"), nextState: "ALL" },
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<RendererContext.Provider
|
|
|
|
|
@ -80,7 +86,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
|
|
|
|
|
ref={memoContentContainerRef}
|
|
|
|
|
className={clsx(
|
|
|
|
|
"relative w-full max-w-full word-break text-base leading-snug space-y-2 whitespace-pre-wrap",
|
|
|
|
|
showCompactMode && "line-clamp-6 max-h-60",
|
|
|
|
|
showCompactMode == "ALL" && "line-clamp-6 max-h-60",
|
|
|
|
|
contentClassName,
|
|
|
|
|
)}
|
|
|
|
|
onClick={handleMemoContentClick}
|
|
|
|
|
@ -95,17 +101,19 @@ const MemoContent: React.FC<Props> = (props: Props) => {
|
|
|
|
|
skipNextLineBreakFlag = true;
|
|
|
|
|
return <Renderer key={`${node.type}-${index}`} index={String(index)} node={node} />;
|
|
|
|
|
})}
|
|
|
|
|
{showCompactMode && (
|
|
|
|
|
{showCompactMode == "ALL" && (
|
|
|
|
|
<div className="absolute bottom-0 left-0 w-full h-12 bg-gradient-to-b from-transparent dark:to-zinc-800 to-white pointer-events-none"></div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
{showCompactMode && (
|
|
|
|
|
{showCompactMode != undefined && (
|
|
|
|
|
<div className="w-full mt-1">
|
|
|
|
|
<span
|
|
|
|
|
className="w-auto flex flex-row justify-start items-center cursor-pointer text-sm text-blue-600 dark:text-blue-400 hover:opacity-80"
|
|
|
|
|
onClick={() => setShowCompactMode(false)}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setShowCompactMode(compactStates[showCompactMode].nextState as ContentCompactView);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<span>{t("memo.show-more")}</span>
|
|
|
|
|
{compactStates[showCompactMode].text}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
|
RoccoSmit
6 months ago
committed by
GitHub