3.6.0 hotfix - Prism

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 }

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 = '<span></span><span></span><span></span>'
-        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 = '<span></span><span></span><span></span>'
+          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 = `<div class="mermaid">${chart}</div>`
     }
   }
+  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