diff --git a/components/NotionPage.js b/components/NotionPage.js index 5f2e6967..b0c58f5c 100644 --- a/components/NotionPage.js +++ b/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
{ 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 diff --git a/styles/globals.css b/styles/globals.css index 04cd6aad..1df15802 100644 --- a/styles/globals.css +++ b/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 +} \ No newline at end of file