From b63e2300ee1762d8cbbed2fddc8f3f685cc2c765 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Fri, 6 May 2022 17:30:11 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E4=BB=A3=E7=A0=81copy=E6=9C=BA=E5=88=B6?= =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/NotionPage.js | 92 +++++++++++++++++++++++++++++----------- 1 file changed, 68 insertions(+), 24 deletions(-) diff --git a/components/NotionPage.js b/components/NotionPage.js index b0c58f5c..bff705f5 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -1,5 +1,6 @@ import { NotionRenderer } from 'react-notion-x' import dynamic from 'next/dynamic' +import React from 'react' const Code = dynamic(() => import('react-notion-x/build/third-party/code').then((m) => m.Code), { ssr: false } @@ -19,33 +20,15 @@ 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 || ''} } - setTimeout(() => { - if (typeof document === 'undefined') { - return - } - 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 - } - } + React.useEffect(() => { + addWatch4Dom() + }) return
{
} +export default NotionPage + +/** + * 监听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') { + // console.log('1', mutation) + 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 @@ -70,5 +116,3 @@ const mapPageUrl = id => { // return 'https://www.notion.so/' + id.replace(/-/g, '') return '/article/' + id.replace(/-/g, '') } - -export default NotionPage From 6b372294d8b9e86a8c49c33d428717afa2637e21 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Fri, 6 May 2022 17:41:23 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E7=85=A7=E7=89=87=E9=9B=86=E9=80=82?= =?UTF-8?q?=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/NotionPage.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/NotionPage.js b/components/NotionPage.js index fd03fabc..9bf0c027 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -37,6 +37,8 @@ const NotionPage = ({ post }) => { React.useEffect(() => { addWatch4Dom() + }, []) + setTimeout(() => { // 将相册gallery下的图片加入放大功能 // const container = document?.getElementById('container') const imgList = document?.querySelectorAll('.notion-collection-card-cover img') @@ -50,7 +52,7 @@ const NotionPage = ({ post }) => { for (const e of cards) { e.removeAttribute('href') } - }) + }, 800) return
Date: Fri, 6 May 2022 17:52:38 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/NotionPage.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/components/NotionPage.js b/components/NotionPage.js index 9bf0c027..29fe3bed 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -40,7 +40,6 @@ const NotionPage = ({ post }) => { }, []) setTimeout(() => { // 将相册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++) { @@ -48,7 +47,7 @@ const NotionPage = ({ post }) => { } } - const cards = document.getElementsByClassName('notion-collection-card') + const cards = document?.getElementsByClassName('notion-collection-card') for (const e of cards) { e.removeAttribute('href') } @@ -74,7 +73,7 @@ const NotionPage = ({ post }) => { */ function addWatch4Dom(element) { // 选择需要观察变动的节点 - const targetNode = element || document.getElementById('container') + const targetNode = element || document?.getElementById('container') // 观察器的配置（需要观察什么变动） const config = { attributes: true,