diff --git a/components/NotionPage.js b/components/NotionPage.js index 77b75d69..d16ba916 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -47,10 +47,10 @@ import 'prismjs/components/prism-r.js' import '@/lib/mhchem' // https://github.com/txs -import PrismMac from '@/components/PrismMac' -// const PrismMac = dynamic(() => import('@/components/PrismMac'), { -// ssr: false -// }) +// import PrismMac from '@/components/PrismMac' +const PrismMac = dynamic(() => import('@/components/PrismMac'), { + ssr: false +}) const Collection = dynamic(() => import('react-notion-x/build/third-party/collection').then((m) => m.Collection), { ssr: true } diff --git a/components/PrismMac.js b/components/PrismMac.js index 8300f742..3e56c07f 100644 --- a/components/PrismMac.js +++ b/components/PrismMac.js @@ -19,20 +19,11 @@ import { useRouter } from 'next/router' const PrismMac = () => { const router = useRouter() const { isDarkMode } = useGlobal() + const scrollTop = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop React.useEffect(() => { renderPrismMac() - const codeToolBars = document?.getElementsByClassName('code-toolbar') - // Add pre-mac element for Mac Style UI - Array.from(codeToolBars).forEach(item => { - const existPreMac = item.getElementsByClassName('pre-mac') - if (existPreMac.length < codeToolBars.length) { - const preMac = document.createElement('div') - preMac.classList.add('pre-mac') - preMac.innerHTML = '' - item?.appendChild(preMac, item) - } - }) + window.scrollTo(0, scrollTop) router.events.on('routeChangeComplete', renderPrismMac) return () => { router.events.off('routeChangeComplete', renderPrismMac) @@ -40,8 +31,8 @@ const PrismMac = () => { }, [isDarkMode]) React.useEffect(() => { - mermaid.contentLoaded() - }) + addWatch4Dom() + }, []) return <> } @@ -56,21 +47,35 @@ function renderPrismMac() { } }) + // 重新渲染之前检查所有的多余text + try { Prism.highlightAll() + // Add line numbers + const codeBlocks = container?.getElementsByTagName('pre') + Array.from(codeBlocks).forEach(item => { + if (!item.classList.contains('line-numbers')) { + item.classList.add('line-numbers') + item.style.whiteSpace = 'pre-wrap' + } + }) + + setTimeout(() => { + // Add pre-mac element for Mac Style UI + Array.from(codeToolBars).forEach(item => { + const existPreMac = item.getElementsByClassName('pre-mac') + if (existPreMac.length < codeToolBars.length) { + const preMac = document.createElement('div') + preMac.classList.add('pre-mac') + preMac.innerHTML = '' + item?.appendChild(preMac, item) + } + }) + }, 0) } catch (err) { console.log('代码渲染', err) } - // Add line numbers - const codeBlocks = container?.getElementsByTagName('pre') - Array.from(codeBlocks).forEach(item => { - if (!item.classList.contains('line-numbers')) { - item.classList.add('line-numbers') - item.style.whiteSpace = 'pre-wrap' - } - }) - // 支持 Mermaid const mermaids = document.querySelectorAll('.notion-code .language-mermaid') for (const e of mermaids) { @@ -84,6 +89,7 @@ function renderPrismMac() { e.parentElement.parentElement.innerHTML = `
${chart}
` } } + mermaid.contentLoaded() } /** @@ -107,14 +113,19 @@ function addWatch4Dom(element) { const type = mutation.type switch (type) { case 'childList': - console.log('A child node has been added or removed.', mutation.target) + // console.log('A child node has been added or removed.', mutation) + if (mutation.addedNodes.length > 0) { + if (mutation.addedNodes[0].nodeName === '#text') { + mutation.addedNodes[0].remove() // 移除新增的内容 + } + } break case 'attributes': - console.log(`The ${mutation.attributeName} attribute was modified.`, mutation.target) - console.log(mutation.attributeName) + // console.log(`The ${mutation.attributeName} attribute was modified.`, mutation.target) + // console.log(mutation.attributeName) break case 'subtree': - console.log('The subtree was modified.', mutation.target) + // console.log('The subtree was modified.', mutation.target) break default: break