feat: Optimize Footnote Display (#129)

Author: TNXG

src/components/ui/markdown/Markdown.tsx

@@ -32,7 +32,7 @@ import {
   MTableRow,
 } from './renderers'
 import { MDetails } from './renderers/collapse'
-import { MFootNote } from './renderers/footnotes'
+import { MFootNote, red_highlight } from './renderers/footnotes'
 import { MHeader } from './renderers/heading'
 import { MarkdownImage } from './renderers/image'
 import { MTag } from './renderers/tag'
@@ -156,7 +156,6 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
                   const thisUrl = new URL(footnote?.footnote?.replace(': ', ''))
                   const isCurrentHost =
                     thisUrl.hostname === window.location.hostname
-
                   if (!isCurrentHost && !isDev) {
                     return undefined
                   }
@@ -170,18 +169,17 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
               return (
                 <Fragment key={state?.key}>
                   <a
-                    href={sanitizeUrl(target)!}
+                    href={`#fn:${content}`}
                     onClick={(e) => {
                       e.preventDefault()
-
                       springScrollToElement(
-                        document.getElementById(content)!,
-
+                        document.getElementById(`fn:${content}`)!,
                         -window.innerHeight / 2,
                       )
+                      red_highlight(`fn:${content}`)
                     }}
                   >
-                    <sup key={state?.key}>^{content}</sup>
+                    <sup id={`fnref:${content}`}>{`[^${content}]`}</sup>
                   </a>
                   {linkCardId && <LinkCard id={linkCardId} source="mx-space" />}
                 </Fragment>

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

@@ -1,13 +1,55 @@
 import React from 'react'
 import type { FC, PropsWithChildren } from 'react'
 
+import { springScrollToElement } from '~/lib/scroller'
+
 import { Divider } from '../../divider'
 
 export const MFootNote: FC<PropsWithChildren> = (props) => {
   return (
     <div className="children:my-2 children:leading-6 children:text-base mt-4">
       <Divider />
-      {props.children}
+      {React.Children.map(props.children, (child, index) => {
+        if (React.isValidElement(child)) {
+          return (
+            <div id={`fn:${index + 1}`}>
+              <p style={{ display: 'inline' }}>
+                {React.cloneElement(child as React.ReactElement<any>, {
+                  style: { display: 'inline' }, // 设置child的display样式
+                })}
+                <a
+                  href={`#fnref:${index + 1}`}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    springScrollToElement(
+                      document.getElementById(`fnref:${index + 1}`)!,
+                      -window.innerHeight / 2,
+                    )
+                    red_highlight(`fnref:${index + 1}`)
+                  }}
+                  style={{ display: 'inline' }}
+                >
+                  ↩
+                </a>
+              </p>
+            </div>
+          )
+        } else {
+          return null // 或者其他处理方式
+        }
+      })}
     </div>
   )
 }
+
+export function red_highlight(id: string) {
+  const fnRefElement = document.getElementById(id)
+  if (fnRefElement) {
+    fnRefElement.style.color = 'red'
+    setTimeout(() => {
+      fnRefElement.style.color = ''
+    }, 5000)
+  } else {
+    console.log(`Element with id fnref:${id} not found.`)
+  }
+}