修复code-copy-bug,移除冗余mediumzoom

components/NotionPage.js

@@ -1,8 +1,5 @@
 import { NotionRenderer } from 'react-notion-x'
-import mediumZoom from 'medium-zoom'
-import { useEffect, useRef } from 'react'
 import dynamic from 'next/dynamic'
-import { useRouter } from 'next/router'
 
 const Code = dynamic(() =>
   import('react-notion-x/build/third-party/code').then((m) => m.Code), { ssr: false }
@@ -27,25 +24,28 @@ const NotionPage = ({ post }) => {
     return <>{post?.summary || ''}</>
   }
 
-  const zoom = typeof window !== 'undefined' && mediumZoom({
-    container: '.notion-viewport',
-    background: 'rgba(0, 0, 0, 0.2)',
-    margin: getMediumZoomMargin()
-  })
-  const zoomRef = useRef(zoom ? zoom.clone() : null)
-
-  const router = useRouter()
-
-  useEffect(() => {
-    // 将所有container下的所有图片添加medium-zoom
-    const container = document?.getElementById('container')
-    const imgList = container?.getElementsByTagName('img')
-    if (imgList && zoomRef.current) {
-      for (let i = 0; i < imgList.length; i++) {
-        (zoomRef.current).attach(imgList[i])
-      }
+  setTimeout(() => {
+    if (typeof document === 'undefined') {
+      return
     }
-  }, [router?.events])
+    const buttons = document.getElementsByClassName('notion-code-copy')
+    for (const e of buttons) {
+      e.addEventListener('click', fixCopy)
+    }
+  }, 500)
+
+  /**
+   * 复制代码后，会重复 @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'>
     <NotionRenderer
@@ -71,22 +71,4 @@ const mapPageUrl = id => {
   return '/article/' + id.replace(/-/g, '')
 }
 
-function getMediumZoomMargin() {
-  const width = window.innerWidth
-
-  if (width < 500) {
-    return 8
-  } else if (width < 800) {
-    return 20
-  } else if (width < 1280) {
-    return 30
-  } else if (width < 1600) {
-    return 40
-  } else if (width < 1920) {
-    return 48
-  } else {
-    return 72
-  }
-}
-
 export default NotionPage

styles/globals.css

@@ -142,3 +142,7 @@ nav {
 .shadow-text{
   text-shadow: 0.1em 0.1em 0.2em black;
 }
+
+.notion-code-copy-button > svg{
+  pointer-events:none
+}