Merge pull request #227 from tangly1024/bug-fix-code-copy-repeat

Bug fix code copy repeat

components/NotionPage.js

@@ -21,6 +21,7 @@ const Pdf = dynamic(
 const Modal = dynamic(
   () => import('react-notion-x/build/third-party/modal').then((m) => m.Modal), { ssr: false }
 )
+
 const NotionPage = ({ post }) => {
   if (!post || !post.blockMap) {
     return <>{post?.summary || ''}</>
@@ -34,41 +35,24 @@ const NotionPage = ({ post }) => {
 
   const zoomRef = React.useRef(zoom ? zoom.clone() : null)
 
+  React.useEffect(() => {
+    addWatch4Dom()
+  }, [])
   setTimeout(() => {
-    if (typeof document !== 'undefined') {
-      const buttons = document.getElementsByClassName('notion-code-copy')
-      for (const e of buttons) {
-        e.addEventListener('click', fixCopy)
-      }
-      // 将相册gallery下的图片加入放大功能
-      // const container = document?.getElementById('container')
-      const imgList = document?.querySelectorAll('.notion-collection-card-cover img')
-      if (imgList && zoomRef.current) {
-        for (let i = 0; i < imgList.length; i++) {
-          (zoomRef.current).attach(imgList[i])
-        }
+    // 将相册gallery下的图片加入放大功能
+    const imgList = document?.querySelectorAll('.notion-collection-card-cover img')
+    if (imgList && zoomRef.current) {
+      for (let i = 0; i < imgList.length; i++) {
+        (zoomRef.current).attach(imgList[i])
       }
+    }
 
-      const cards = document.getElementsByClassName('notion-collection-card')
-      for (const e of cards) {
-        e.removeAttribute('href')
-      }
+    const cards = document?.getElementsByClassName('notion-collection-card')
+    for (const e of cards) {
+      e.removeAttribute('href')
     }
   }, 800)
 
-  /**
-   * 复制代码后，会重复 @see https://github.com/tangly1024/NotionNext/issues/165
-   * @param {*} e
-   */
-  function fixCopy(e) {
-    const codeE = e.target.parentElement.parentElement.lastElementChild
-    console.log(codeE)
-    const codeEnd = codeE.lastChild
-    if (codeEnd.nodeName === '#text' && codeE.childNodes.length > 1) {
-      codeEnd.nodeValue = null
-    }
-  }
-
   return <div id='container' className='max-w-4xl mx-auto'>
     <NotionRenderer
       recordMap={post.blockMap}
@@ -83,6 +67,66 @@ const NotionPage = ({ post }) => {
   </div>
 }
 
+/**
+ * 监听DOM变化
+ * @param {*} element
+ */
+function addWatch4Dom(element) {
+  // 选择需要观察变动的节点
+  const targetNode = element || document?.getElementById('container')
+  // 观察器的配置（需要观察什么变动）
+  const config = {
+    attributes: true,
+    childList: true,
+    subtree: true
+  }
+
+  // 当观察到变动时执行的回调函数
+  const mutationCallback = (mutations) => {
+    for (const mutation of mutations) {
+      const type = mutation.type
+      switch (type) {
+        case 'childList':
+          if (mutation.target.className === 'notion-code-copy') {
+            fixCopy(mutation)
+          }
+          //   console.log('A child node has been added or removed.')
+          break
+        case 'attributes':
+        //   console.log(`The ${mutation.attributeName} attribute was modified.`)
+        //   console.log(mutation.attributeName)
+          break
+        case 'subtree':
+        //   console.log('The subtree was modified.')
+          break
+        default:
+          break
+      }
+    }
+  }
+
+  // 创建一个观察器实例并传入回调函数
+  const observer = new MutationObserver(mutationCallback)
+  //   console.log(observer)
+  // 以上述配置开始观察目标节点
+  observer.observe(targetNode, config)
+
+  // observer.disconnect();
+}
+
+/**
+   * 复制代码后，会重复 @see https://github.com/tangly1024/NotionNext/issues/165
+   * @param {*} e
+   */
+function fixCopy(e) {
+  const codeE = e.target.parentElement.lastElementChild
+  //   console.log('2', codeE)
+  const codeEnd = codeE.lastChild
+  if (codeEnd.nodeName === '#text' && codeE.childNodes.length > 1) {
+    codeEnd.nodeValue = null
+  }
+}
+
 /**
  * 将id映射成博文内部链接。
  * @param {*} id