Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-21 16:38:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add back memoization for toc

Browse Source
This commit is contained in:
Evan Simkowitz 2024-09-06 16:32:29 -07:00
parent 7c4d00cbfa
commit 1a7fb41182
No known key found for this signature in database
1 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/app/element/markdown.tsx
View File

@ -8,7 +8,7 @@ import { isBlank, makeConnRoute, useAtomValueSafe } from "@/util/util";
import { clsx } from "clsx";
import { Atom } from "jotai";
import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
import { useEffect, useRef, useState } from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import RemarkFlexibleToc, { TocItem } from "remark-flexible-toc";
@ -148,7 +148,7 @@ const Markdown = ({ text, textAtom, showTocAtom, style, className, resolveOpts,
const showToc = useAtomValueSafe(showTocAtom) ?? false;
const contentsOsRef = useRef<OverlayScrollbarsComponentRef>(null);
const onTocClick = (data: string) => {
const onTocClick = useCallback((data: string) => {
if (contentsOsRef.current && contentsOsRef.current.osInstance()) {
const { viewport } = contentsOsRef.current.osInstance().elements();
const headings = viewport.getElementsByClassName("heading");
@ -162,7 +162,7 @@ const Markdown = ({ text, textAtom, showTocAtom, style, className, resolveOpts,
}
}
}
};
}, []);
const markdownComponents = {
a: Link,
@ -178,11 +178,22 @@ const Markdown = ({ text, textAtom, showTocAtom, style, className, resolveOpts,
pre: (props: any) => <CodeBlock {...props} onClickExecute={onClickExecute} />,
};
// const toc = useMemo(() => {
// if (showToc && tocRef.current.length > 0) {
// return
// }
// }, [showToc, tocRef]);
const toc = useMemo(() => {
if (showToc && tocRef.current.length > 0) {
return tocRef.current.map((item) => {
return (
<a
key={item.href}
className="toc-item"
style={{ "--indent-factor": item.depth } as React.CSSProperties}
onClick={() => onTocClick(item.value)}
>
{item.value}
</a>
);
});
}
}, [showToc, tocRef]);
text = textAtomValue ?? text;
@ -201,22 +212,11 @@ const Markdown = ({ text, textAtom, showTocAtom, style, className, resolveOpts,
{text}
</ReactMarkdown>
</OverlayScrollbarsComponent>
{showToc && (
{toc && (
<OverlayScrollbarsComponent className="toc" options={{ scrollbars: { autoHide: "leave" } }}>
<div className="toc-inner">
<h4>Table of Contents</h4>
{tocRef.current.map((item) => {
return (
<a
key={item.href}
className="toc-item"
style={{ "--indent-factor": item.depth } as React.CSSProperties}
onClick={() => onTocClick(item.value)}
>
{item.value}
</a>
);
})}
{toc}
</div>
</OverlayScrollbarsComponent>
)}