ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix different slugs generated in ToC vs text (#1405)

This commit is contained in:
ekzyis 2024-09-13 22:54:30 +02:00 committed by GitHub
parent be7ea41d03
commit 85a8fc5dcd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 6 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/table-of-contents.js
View File

@ -5,7 +5,7 @@ import TocIcon from '@/svgs/list-unordered.svg'
import { fromMarkdown } from 'mdast-util-from-markdown'
import { visit } from 'unist-util-visit'
import { toString } from 'mdast-util-to-string'
import GithubSlugger from 'github-slugger'
import { slug } from 'github-slugger'
import { useRouter } from 'next/router'
export default function Toc ({ text }) {
@ -17,11 +17,11 @@ export default function Toc ({ text }) {
const toc = useMemo(() => {
const tree = fromMarkdown(text)
const toc = []
const slugger = new GithubSlugger()
visit(tree, 'heading', (node, position, parent) => {
const str = toString(node)
toc.push({ heading: str, slug: slugger.slug(str.replace(/[^\w\-\s]+/gi, '')), depth: node.depth })
toc.push({ heading: str, slug: slug(str.replace(/[^\w\-\s]+/gi, '')), depth: node.depth })
})
return toc
}, [text])

8
components/text.js
View File

@ -6,7 +6,7 @@ import atomDark from 'react-syntax-highlighter/dist/cjs/styles/prism/atom-dark'
import mention from '@/lib/remark-mention'
import sub from '@/lib/remark-sub'
import React, { useState, memo, useRef, useCallback, useMemo, useEffect } from 'react'
import GithubSlugger from 'github-slugger'
import { slug } from 'github-slugger'
import LinkIcon from '@/svgs/link.svg'
import Thumb from '@/svgs/thumb-up-fill.svg'
import { toString } from 'mdast-util-to-string'
@ -82,12 +82,10 @@ export default memo(function Text ({ rel, imgproxyUrls, children, tab, itemId, o
}
}, [containerRef.current, setOverflowing])
const slugger = useMemo(() => new GithubSlugger(), [])
const Heading = useCallback(({ children, node, ...props }) => {
const [copied, setCopied] = useState(false)
const nodeText = toString(node)
const id = useMemo(() => noFragments ? undefined : slugger?.slug(nodeText.replace(/[^\w\-\s]+/gi, '')), [nodeText, noFragments, slugger])
const id = useMemo(() => noFragments ? undefined : slug(nodeText.replace(/[^\w\-\s]+/gi, '')), [nodeText, noFragments])
const h = useMemo(() => {
if (topLevel) {
return node?.TagName
@ -120,7 +118,7 @@ export default memo(function Text ({ rel, imgproxyUrls, children, tab, itemId, o
</a>}
</span>
)
}, [topLevel, noFragments, slugger])
}, [topLevel, noFragments])
const Table = useCallback(({ node, ...props }) =>
<span className='table-responsive'>