fix: toc hash

Signed-off-by: Innei <i@innei.in>

src/components/ui/markdown/Markdown.tsx

@@ -26,6 +26,7 @@ import { SpoilderRule } from './parsers/spoiler'
 import { MParagraph, MTableBody, MTableHead, MTableRow } from './renderers'
 import { MDetails } from './renderers/collapse'
 import { MFootNote } from './renderers/footnotes'
+import { MHeader } from './renderers/heading'
 import { MLink } from './renderers/link'
 
 const CodeBlock = dynamic(() => import('~/components/widgets/shared/CodeBlock'))
@@ -90,6 +91,15 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
         },
 
         extendsRules: {
+          heading: {
+            react(node, output, state) {
+              return (
+                <MHeader id={node.id} level={node.level} key={state?.key}>
+                  {output(node.content, state!)}
+                </MHeader>
+              )
+            },
+          },
           gfmTask: {
             react(node, _, state) {
               return (

src/components/ui/markdown/renderers/heading.tsx

@@ -0,0 +1,43 @@
+import { createElement } from 'react'
+import type { DOMAttributes } from 'react'
+
+import { springScrollToElement } from '~/lib/scroller'
+
+interface HeadingProps {
+  id: string
+  className?: string
+  children: React.ReactNode
+  level: number
+}
+
+export const MHeader = (props: HeadingProps) => {
+  const { children, id, level } = props
+
+  return createElement<DOMAttributes<HTMLHeadingElement>, HTMLHeadingElement>(
+    `h${level}`,
+    {
+      id,
+      className: 'group flex items-center',
+    } as any,
+    null,
+    <>
+      {children}
+      <span
+        className="ml-2 cursor-pointer select-none text-accent opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+        role="button"
+        tabIndex={0}
+        aria-hidden
+        onClick={() => {
+          const state = history.state
+          history.replaceState(state, '', `#${id}`)
+          springScrollToElement(
+            document.getElementById(id)!,
+            -window.innerHeight / 2,
+          )
+        }}
+      >
+        <i className="icon-[mingcute--hashtag-line]" />
+      </span>
+    </>,
+  )
+}

src/components/widgets/toc/TocAside.tsx

@@ -26,7 +26,6 @@ export const TocAside: Component<TocAsideProps & TocSharedProps> = ({
 }) => {
   const containerRef = useRef<HTMLUListElement>(null)
   const $article = useWrappedElement()
-  // const { h } = useWrappedElementSize()
 
   if (typeof $article === 'undefined') {
     throw new Error('<Toc /> must be used in <WrappedElementProvider />')

src/components/widgets/toc/TocAutoScroll.tsx

@@ -2,8 +2,6 @@
 
 import { useEffect } from 'react'
 
-import { usePageScrollLocationSelector } from '~/providers/root/page-scroll-info-provider'
-
 import { escapeSelector } from './escapeSelector'
 
 export const TocAutoScroll: Component = () => {
@@ -20,13 +18,13 @@ export const TocAutoScroll: Component = () => {
     }
   }, [])
 
-  const isTop = usePageScrollLocationSelector((y) => y < 10)
+  // const isTop = usePageScrollLocationSelector((y) => y < 10)
 
-  useEffect(() => {
-    if (isTop) {
-      history.replaceState(history.state, '', `#`)
-    }
-  }, [isTop])
+  // useEffect(() => {
+  //   if (isTop) {
+  //     history.replaceState(history.state, '', `#`)
+  //   }
+  // }, [isTop])
 
   return null
 }

src/components/widgets/toc/TocItem.tsx

@@ -4,7 +4,6 @@ import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 import { tv } from 'tailwind-variants'
 import type { FC, MouseEvent } from 'react'
 
-import { getIsInteractive } from '~/atoms/is-interactive'
 import { clsxm } from '~/lib/helper'
 
 const styles = tv({
@@ -39,14 +38,14 @@ export const TocItem: FC<{
 
   const $ref = useRef<HTMLAnchorElement>(null)
 
-  useEffect(() => {
-    if (!active) {
-      return
-    }
-    if (!getIsInteractive()) return
-    const state = history.state
-    history.replaceState(state, '', `#${anchorId}`)
-  }, [active, anchorId])
+  // useEffect(() => {
+  //   if (!active) {
+  //     return
+  //   }
+  //   if (!getIsInteractive()) return
+  //   const state = history.state
+  //   history.replaceState(state, '', `#${anchorId}`)
+  // }, [active, anchorId])
 
   useEffect(() => {
     if (active) {
@@ -92,3 +91,5 @@ export const TocItem: FC<{
     </a>
   )
 })
+
+TocItem.displayName = 'TocItem'