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