From 3fa416763a14d6916e2560121fcfffa89c1c7bee Mon Sep 17 00:00:00 2001
From: tangly <tlyong1992@hotmail.com>
Date: Mon, 21 Nov 2022 20:41:41 +0800
Subject: [PATCH] =?UTF-8?q?3.6.0=20=E6=9C=80=E5=90=8E=E7=9A=84=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/NotionPage.js | 63 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/components/NotionPage.js b/components/NotionPage.js
index d16ba916..e9a4025e 100644
--- a/components/NotionPage.js
+++ b/components/NotionPage.js
@@ -45,6 +45,8 @@ import 'prismjs/components/prism-r.js'
 
 // 化学方程式
 import '@/lib/mhchem'
+// 页面渲染观察者
+let observer
 
 // https://github.com/txs
 // import PrismMac from '@/components/PrismMac'
@@ -74,6 +76,10 @@ const NotionPage = ({ post }) => {
 
   const zoomRef = React.useRef(zoom ? zoom.clone() : null)
 
+  if (isBrowser() && !observer) {
+    addWatch4Dom()
+  }
+
   React.useEffect(() => {
     setTimeout(() => {
       if (window.location.hash) {
@@ -148,4 +154,61 @@ function getMediumZoomMargin() {
   }
 }
 
+/**
+ * 监听DOM变化
+ * @param {*} element
+ */
+// eslint-disable-next-line no-unused-vars
+function addWatch4Dom(element) {
+  // 选择需要观察变动的节点
+  const targetNode = element || document?.getElementById('container')
+  // 观察器的配置（需要观察什么变动）
+  const config = {
+    attributes: true,
+    childList: true,
+    subtree: true
+  }
+
+  // 创建一个观察器实例并传入回调函数
+  observer = new MutationObserver(mutationCallback)
+  //   console.log('观察节点变化', observer)
+  // 以上述配置开始观察目标节点
+  if (targetNode) {
+    observer.observe(targetNode, config)
+  }
+
+  //   observer.disconnect()
+}
+
+// 当页面发生时会调用此函数
+const mutationCallback = (mutations) => {
+  for (const mutation of mutations) {
+    const type = mutation.type
+    switch (type) {
+      case 'childList':
+        //   console.log('A child node has been added or removed.', mutation)
+        if (mutation.addedNodes.length > 0) {
+          if (mutation?.target?.parentElement?.nodeName === 'PRE' || mutation?.target?.parentElement?.nodeName === 'CODE') {
+            if (mutation.addedNodes[0].nodeName === '#text' && mutation.target.childElementCount > 0) {
+              mutation.addedNodes[0].remove() // 移除新增的内容
+            }
+          }
+          if (mutation?.target?.className === 'language-mermaid') {
+            // mermaid重刷新bug TODO
+          }
+        }
+        break
+      case 'attributes':
+        //   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)
+        break
+      default:
+        break
+    }
+  }
+}
+
 export default NotionPage