fix: footnote id (#142)

Signed-off-by: Asuka Miya <me@umika.ink>
Innei · Nov 6, 2023 · f15caf7 · f15caf7
1 parent 950ea4b
commit f15caf7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/src/components/ui/markdown/Markdown.tsx b/src/components/ui/markdown/Markdown.tsx
@@ -38,7 +38,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 { getFootNoteDomId, getFootNoteRefDomId } from './utils/get-id'
 import { redHighlight } from './utils/redHighlight'
 
 const CodeBlock = dynamic(() => import('~/components/widgets/shared/CodeBlock'))
@@ -157,7 +157,7 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
 
           footnoteReference: {
             react(node, output, state) {
-              const { footnoteMap, target, content } = node
+              const { footnoteMap, content } = node
               const footnote = footnoteMap.get(content)
               const linkCardId = (() => {
                 try {
@@ -181,7 +181,7 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
                     as="span"
                     TriggerComponent={() => (
                       <a
-                        href={`#fn:${content}`}
+                        href={`${getFootNoteDomId(content)}`}
                         onClick={(e) => {
                           e.preventDefault()
                           const id = getFootNoteDomId(content)
@@ -192,7 +192,9 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
                           redHighlight(id)
                         }}
                       >
-                        <sup id={`fnref:${content}`}>{`[^${content}]`}</sup>
+                        <sup
+                          id={`${getFootNoteRefDomId(content)}`}
+                        >{`[^${content}]`}</sup>
                       </a>
                     )}
                     type="tooltip"

diff --git a/src/components/ui/markdown/renderers/footnotes.tsx b/src/components/ui/markdown/renderers/footnotes.tsx
@@ -11,25 +11,24 @@ export const MFootNote: FC<PropsWithChildren> = (props) => {
   return (
     <div className="children:my-2 children:leading-6 children:text-base mt-4">
       <Divider />
-      {React.Children.map(props.children, (child, index) => {
+      {React.Children.map(props.children, (child) => {
         if (React.isValidElement(child)) {
+          const id = child.props.id
           return (
-            <div id={`${getFootNoteDomId(index + 1)}`}>
+            <div id={`${getFootNoteDomId(id)}`}>
               <p className="inline">
-                {React.cloneElement(child as React.ReactElement<any>, {
+                {React.cloneElement(child as React.ReactElement, {
                   className: 'inline',
                 })}
                 <a
-                  href={`#${getFootNoteRefDomId(index + 1)}`}
+                  href={`#${getFootNoteRefDomId(id)}`}
                   onClick={(e) => {
                     e.preventDefault()
                     springScrollToElement(
-                      document.getElementById(
-                        `${getFootNoteRefDomId(index + 1)}`,
-                      )!,
+                      document.getElementById(`${getFootNoteRefDomId(id)}`)!,
                       -window.innerHeight / 2,
                     )
-                    redHighlight(`${getFootNoteRefDomId(index + 1)}`)
+                    redHighlight(`${getFootNoteRefDomId(id)}`)
                   }}
                   className="inline"
                 >