升级react-notion-x，修复部分样式问题

components/NotionPage.js

@@ -1,27 +1,51 @@
 import { NotionRenderer } from 'react-notion-x'
 import dynamic from 'next/dynamic'
-import mediumZoom from 'medium-zoom'
+// import mediumZoom from 'medium-zoom'
+import mediumZoom from '@fisch0920/medium-zoom'
 import React from 'react'
 import { isBrowser } from '@/lib/utils'
 import Image from 'next/image'
 import Link from 'next/link'
 import { Code } from 'react-notion-x/build/third-party/code'
-
-// 支持更多的自定义语言
+import { Pdf } from 'react-notion-x/build/third-party/pdf'
+import { Equation } from 'react-notion-x/build/third-party/equation'
+import 'prismjs/components/prism-bash.js'
+import 'prismjs/components/prism-markup-templating.js'
+import 'prismjs/components/prism-markup.js'
+import 'prismjs/components/prism-c.js'
+import 'prismjs/components/prism-cpp.js'
+import 'prismjs/components/prism-csharp.js'
+import 'prismjs/components/prism-docker.js'
+import 'prismjs/components/prism-java.js'
+import 'prismjs/components/prism-js-templates.js'
+import 'prismjs/components/prism-coffeescript.js'
+import 'prismjs/components/prism-diff.js'
+import 'prismjs/components/prism-git.js'
+import 'prismjs/components/prism-go.js'
+import 'prismjs/components/prism-graphql.js'
+import 'prismjs/components/prism-handlebars.js'
+import 'prismjs/components/prism-less.js'
+import 'prismjs/components/prism-makefile.js'
+import 'prismjs/components/prism-markdown.js'
+import 'prismjs/components/prism-objectivec.js'
+import 'prismjs/components/prism-ocaml.js'
+import 'prismjs/components/prism-python.js'
+import 'prismjs/components/prism-reason.js'
+import 'prismjs/components/prism-rust.js'
+import 'prismjs/components/prism-sass.js'
+import 'prismjs/components/prism-scss.js'
+import 'prismjs/components/prism-solidity.js'
+import 'prismjs/components/prism-sql.js'
+import 'prismjs/components/prism-stylus.js'
+import 'prismjs/components/prism-swift.js'
+import 'prismjs/components/prism-wasm.js'
+import 'prismjs/components/prism-yaml.js'
 import 'prismjs/components/prism-r.js'
 
 const Collection = dynamic(() =>
   import('react-notion-x/build/third-party/collection').then((m) => m.Collection), { ssr: true }
 )
 
-const Equation = dynamic(() =>
-  import('react-notion-x/build/third-party/equation').then((m) => m.Equation), { ssr: true }
-)
-
-const Pdf = dynamic(
-  () => import('react-notion-x/build/third-party/pdf').then((m) => m.Pdf), { ssr: false }
-)
-
 const Modal = dynamic(
   () => import('react-notion-x/build/third-party/modal').then((m) => m.Modal), { ssr: false }
 )
@@ -140,7 +164,9 @@ function addWatch4Dom(element) {
   const observer = new MutationObserver(mutationCallback)
   //   console.log(observer)
   // 以上述配置开始观察目标节点
-  observer.observe(targetNode, config)
+  if (targetNode) {
+    observer.observe(targetNode, config)
+  }
 
   // observer.disconnect();
 }

package.json

@@ -34,8 +34,8 @@
     "memory-cache": "^0.2.0",
     "mongodb": "^4.6.0",
     "next": "12.1.6",
-    "notion-client": "6.12.9",
-    "notion-utils": "6.10.0",
+    "notion-client": "6.15.6",
+    "notion-utils": "6.15.6",
     "preact": "^10.5.15",
     "qrcode.react": "^1.0.1",
     "react": "17.0.2",
@@ -44,7 +44,7 @@
     "react-dom": "17.0.2",
     "react-facebook": "^8.1.4",
     "react-messenger-customer-chat": "^0.8.0",
-    "react-notion-x": "6.6.2",
+    "react-notion-x": "6.15.6",
     "react-share": "^4.4.0",
     "smoothscroll-polyfill": "^0.4.4",
     "typed.js": "^2.0.12",

pages/_app.js

@@ -9,7 +9,8 @@ import '@/styles/notion.css' //  重写部分样式
 // used for collection views (optional)
 // import 'rc-dropdown/assets/index.css'
 import 'prismjs/themes/prism-tomorrow.min.css'
-import 'react-notion-x/build/third-party/equation.css'
+// import 'react-notion-x/build/third-party/equation.css'
+import 'katex/dist/katex.min.css'
 
 // waline 评论插件
 import '@waline/client/dist/waline.css'

styles/notion.css

@@ -1902,3 +1902,11 @@ pre[class*='language-'] {
 .notion-table-cell-multi_select {
   padding: 7px 8px 0;
 }
+
+.notion-simple-table  {
+ width: 100% !important;
+}
+
+.notion-simple-table td {
+ white-space: nowrap;
+}