fix: footernote anchor

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/ui/markdown/Markdown.tsx

@@ -37,6 +37,7 @@ import { MFootNote } from './renderers/footnotes'
 import { MHeader } from './renderers/heading'
 import { MarkdownImage } from './renderers/image'
 import { MTag } from './renderers/tag'
+import { getFootNoteDomId } from './utils/get-id'
 import { redHighlight } from './utils/redHighlight'
 
 const CodeBlock = dynamic(() => import('~/components/widgets/shared/CodeBlock'))
@@ -167,46 +168,34 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
                   return undefined
                 }
               })()
-              const footnotes = () => {
-                return (
-                  <Fragment key={state?.key}>
-                    <a
-                      href={`#fn:${content}`}
-                      onClick={(e) => {
-                        e.preventDefault()
-                        springScrollToElement(
-                          document.getElementById(`fn:${content}`)!,
-                          -window.innerHeight / 2,
-                        )
-                        redHighlight(`fn:${content}`)
-                      }}
-                    >
-                      <sup id={`fnref:${content}`}>{`[^${content}]`}</sup>
-                    </a>
-                    {linkCardId && (
-                      <LinkCard id={linkCardId} source="mx-space" />
-                    )}
-                  </Fragment>
-                )
-              }
+
               return (
-                <FloatPopover
-                  as="span"
-                  TriggerComponent={footnotes}
-                  type="popover"
-                  wrapperClassName="footnotes_text"
-                >
-                  <div className="space-y-2 leading-relaxed">
-                    <p className="flex items-center space-x-1 opacity-80">
-                      <span
-                        className="font-medium"
-                        dangerouslySetInnerHTML={{
-                          __html: footnote?.footnote?.substring(1),
+                <Fragment key={state?.key}>
+                  <FloatPopover
+                    wrapperClassName="inline"
+                    as="span"
+                    TriggerComponent={() => (
+                      <a
+                        href={`#fn:${content}`}
+                        onClick={(e) => {
+                          e.preventDefault()
+                          const id = getFootNoteDomId(content)
+                          springScrollToElement(
+                            document.getElementById(id)!,
+                            -window.innerHeight / 2,
+                          )
+                          redHighlight(id)
                         }}
-                      />
-                    </p>
-                  </div>
-                </FloatPopover>
+                      >
+                        <sup id={`fnref:${content}`}>{`[^${content}]`}</sup>
+                      </a>
+                    )}
+                    type="tooltip"
+                  >
+                    {footnote?.footnote?.substring(1)}
+                  </FloatPopover>
+                  {linkCardId && <LinkCard id={linkCardId} source="mx-space" />}
+                </Fragment>
               )
             },
           },

src/components/ui/markdown/markdown.module.css

@@ -88,6 +88,8 @@
 
   input[type='checkbox'] {
     @apply checkbox checkbox-xs my-0 mr-2 align-text-bottom;
+
+    vertical-align: inherit;
   }
 
   input[type='checkbox']:disabled,

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

@@ -4,6 +4,7 @@ import type { FC, PropsWithChildren } from 'react'
 import { springScrollToElement } from '~/lib/scroller'
 
 import { Divider } from '../../divider'
+import { getFootNoteDomId, getFootNoteRefDomId } from '../utils/get-id'
 import { redHighlight } from '../utils/redHighlight'
 
 export const MFootNote: FC<PropsWithChildren> = (props) => {
@@ -13,20 +14,22 @@ export const MFootNote: FC<PropsWithChildren> = (props) => {
       {React.Children.map(props.children, (child, index) => {
         if (React.isValidElement(child)) {
           return (
-            <div id={`fn:${index + 1}`}>
+            <div id={`${getFootNoteDomId(index + 1)}`}>
               <p className="inline">
                 {React.cloneElement(child as React.ReactElement<any>, {
-                  style: { display: 'inline' }, // 设置 child 的 display 样式
+                  className: 'inline',
                 })}
                 <a
-                  href={`#fnref:${index + 1}`}
+                  href={`#${getFootNoteRefDomId(index + 1)}`}
                   onClick={(e) => {
                     e.preventDefault()
                     springScrollToElement(
-                      document.getElementById(`fnref:${index + 1}`)!,
+                      document.getElementById(
+                        `${getFootNoteRefDomId(index + 1)}`,
+                      )!,
                       -window.innerHeight / 2,
                     )
-                    redHighlight(`fnref:${index + 1}`)
+                    redHighlight(`${getFootNoteRefDomId(index + 1)}`)
                   }}
                   className="inline"
                 >

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

@@ -27,7 +27,7 @@ export const MParagraph: FC<
       )
     }
   }
-  // console.log(children)
+
   return (
     <p className={clsx('paragraph', className)} {...rest}>
       {children}

src/components/ui/markdown/utils/get-id.ts

@@ -0,0 +1,3 @@
+export const getFootNoteRefDomId = (id: string | number) => `footnote-ref-${id}`
+
+export const getFootNoteDomId = (id: string | number) => `footnote-${id}`

src/hooks/shared/use-mask-scrollarea.ts

@@ -8,7 +8,7 @@ import { useEventCallback } from '../common/use-event-callback'
 export const useMaskScrollArea = <T extends HTMLElement = HTMLElement>() => {
   const containerRef = useRef<T>(null)
   const [isScrollToBottom, setIsScrollToBottom] = useState(false)
-  const [isScrollToTop, setIsScrollToTop] = useState(true)
+  const [isScrollToTop, setIsScrollToTop] = useState(false)
   const [canScroll, setCanScroll] = useState(false)
   const h = useViewport((v) => v.h)
 
@@ -18,7 +18,12 @@ export const useMaskScrollArea = <T extends HTMLElement = HTMLElement>() => {
     if (!$) return
 
     // if $ can not scroll, return null
-    if ($.scrollHeight <= $.clientHeight + 2) return
+    if ($.scrollHeight <= $.clientHeight + 2) {
+      setCanScroll(false)
+      setIsScrollToBottom(false)
+      setIsScrollToTop(false)
+      return
+    }
 
     setCanScroll(true)
 
@@ -56,10 +61,12 @@ export const useMaskScrollArea = <T extends HTMLElement = HTMLElement>() => {
 
   return [
     containerRef,
-    clsx(
-      isScrollToBottom && 'mask-t',
-      isScrollToTop && 'mask-b',
-      canScroll && !isScrollToBottom && !isScrollToTop && 'mask-both',
-    ),
-  ]
+    canScroll
+      ? clsx(
+          isScrollToBottom && 'mask-t',
+          isScrollToTop && 'mask-b',
+          !isScrollToBottom && !isScrollToTop && 'mask-both',
+        )
+      : '',
+  ] as const
 }