Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-02 18:39:05 +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 { clsx } from "clsx";
import { Atom } from "jotai"; import { Atom } from "jotai";
import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react"; 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 ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw"; import rehypeRaw from "rehype-raw";
import RemarkFlexibleToc, { TocItem } from "remark-flexible-toc"; 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 showToc = useAtomValueSafe(showTocAtom) ?? false;
const contentsOsRef = useRef<OverlayScrollbarsComponentRef>(null); const contentsOsRef = useRef<OverlayScrollbarsComponentRef>(null);
const onTocClick = (data: string) => { const onTocClick = useCallback((data: string) => {
if (contentsOsRef.current && contentsOsRef.current.osInstance()) { if (contentsOsRef.current && contentsOsRef.current.osInstance()) {
const { viewport } = contentsOsRef.current.osInstance().elements(); const { viewport } = contentsOsRef.current.osInstance().elements();
const headings = viewport.getElementsByClassName("heading"); const headings = viewport.getElementsByClassName("heading");
@ -162,7 +162,7 @@ const Markdown = ({ text, textAtom, showTocAtom, style, className, resolveOpts,
} }
} }
} }
}; }, []);
const markdownComponents = { const markdownComponents = {
a: Link, a: Link,
@ -178,11 +178,22 @@ const Markdown = ({ text, textAtom, showTocAtom, style, className, resolveOpts,
pre: (props: any) => <CodeBlock {...props} onClickExecute={onClickExecute} />, pre: (props: any) => <CodeBlock {...props} onClickExecute={onClickExecute} />,
}; };
// const toc = useMemo(() => { const toc = useMemo(() => {
// if (showToc && tocRef.current.length > 0) { if (showToc && tocRef.current.length > 0) {
// return return tocRef.current.map((item) => {
// } return (
// }, [showToc, tocRef]); <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; text = textAtomValue ?? text;
@ -201,22 +212,11 @@ const Markdown = ({ text, textAtom, showTocAtom, style, className, resolveOpts,
{text} {text}
</ReactMarkdown> </ReactMarkdown>
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>
{showToc && ( {toc && (
<OverlayScrollbarsComponent className="toc" options={{ scrollbars: { autoHide: "leave" } }}> <OverlayScrollbarsComponent className="toc" options={{ scrollbars: { autoHide: "leave" } }}>
<div className="toc-inner"> <div className="toc-inner">
<h4>Table of Contents</h4> <h4>Table of Contents</h4>
{tocRef.current.map((item) => { {toc}
return (
<a
key={item.href}
className="toc-item"
style={{ "--indent-factor": item.depth } as React.CSSProperties}
onClick={() => onTocClick(item.value)}
>
{item.value}
</a>
);
})}
</div> </div>
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>
)} )}