diff --git a/frontend/app/element/markdown.tsx b/frontend/app/element/markdown.tsx index 52cf9644e..b592252be 100644 --- a/frontend/app/element/markdown.tsx +++ b/frontend/app/element/markdown.tsx @@ -9,7 +9,7 @@ import { clsx } from "clsx"; import { Atom } from "jotai"; import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import ReactMarkdown from "react-markdown"; +import ReactMarkdown, { Components } from "react-markdown"; import rehypeRaw from "rehype-raw"; import rehypeSlug from "rehype-slug"; import RemarkFlexibleToc, { TocItem } from "remark-flexible-toc"; @@ -17,14 +17,24 @@ import remarkGfm from "remark-gfm"; import { openLink } from "../store/global"; import "./markdown.less"; -const Link = ({ href, children }: { href: string; children: React.ReactNode }) => { +const Link = ({ + setFocusedHeading, + props, +}: { + props: React.AnchorHTMLAttributes; + setFocusedHeading: (href: string) => void; +}) => { const onClick = (e: React.MouseEvent) => { e.preventDefault(); - openLink(href); + if (props.href.startsWith("#")) { + setFocusedHeading(props.href); + } else { + openLink(props.href); + } }; return ( - - {children} + + {props.children} ); }; @@ -183,8 +193,10 @@ const Markdown = ({ text, textAtom, showTocAtom, style, className, resolveOpts, } }, [focusedHeading]); - const markdownComponents = { - a: Link, + const markdownComponents: Partial = { + a: (props: React.HTMLAttributes) => ( + + ), h1: (props: React.HTMLAttributes) => ( ),