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

use built-in slug prefix

Browse Source
This commit is contained in:
Evan Simkowitz 2024-09-07 11:18:38 -07:00
parent 97b9760109
commit f2050f6155
No known key found for this signature in database
1 changed files with 10 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,10 +39,10 @@ const Link = ({
);
};
const Heading = ({ id, children, hnum }: { id?: string; children: React.ReactNode; hnum: number }) => {
const Heading = ({ props, hnum }: { props: React.HTMLAttributes<HTMLHeadingElement>; hnum: number }) => {
return (
<div id={id} className={clsx("heading", `is-${hnum}`)}>
{children}
<div id={props.id} className={clsx("heading", `is-${hnum}`)}>
{props.children}
</div>
);
};
@ -197,24 +197,12 @@ const Markdown = ({ text, textAtom, showTocAtom, style, className, resolveOpts,
a: (props: React.HTMLAttributes<HTMLAnchorElement>) => (
<Link props={props} setFocusedHeading={setFocusedHeading} />
),
h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
<Heading children={props.children} id={idPrefix + props.id} hnum={1} />
),
h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
<Heading children={props.children} id={idPrefix + props.id} hnum={2} />
),
h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
<Heading children={props.children} id={idPrefix + props.id} hnum={3} />
),
h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
<Heading children={props.children} id={idPrefix + props.id} hnum={4} />
),
h5: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
<Heading children={props.children} id={idPrefix + props.id} hnum={5} />
),
h6: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
<Heading children={props.children} id={idPrefix + props.id} hnum={6} />
),
h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => <Heading props={props} hnum={1} />,
h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => <Heading props={props} hnum={2} />,
h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => <Heading props={props} hnum={3} />,
h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => <Heading props={props} hnum={4} />,
h5: (props: React.HTMLAttributes<HTMLHeadingElement>) => <Heading props={props} hnum={5} />,
h6: (props: React.HTMLAttributes<HTMLHeadingElement>) => <Heading props={props} hnum={6} />,
img: (props: React.HTMLAttributes<HTMLImageElement>) => <MarkdownImg props={props} resolveOpts={resolveOpts} />,
source: (props: React.HTMLAttributes<HTMLSourceElement>) => <MarkdownSource {...props} />,
code: Code,
@ -251,7 +239,7 @@ const Markdown = ({ text, textAtom, showTocAtom, style, className, resolveOpts,
>
<ReactMarkdown
remarkPlugins={[remarkGfm, [RemarkFlexibleToc, { tocRef: tocRef.current }]]}
rehypePlugins={[rehypeRaw, rehypeSlug]}
rehypePlugins={[rehypeRaw, () => rehypeSlug({ prefix: idPrefix })]}
components={markdownComponents}
>
{text}