From e19e775c9f28c20af4ec5160beac3a37ca1bab9c Mon Sep 17 00:00:00 2001
From: Rylan <1217013295@qq.com>
Date: Mon, 29 Jan 2024 21:06:15 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D=20callout=20?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=BA=A2=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hooks/useAdjustStyle.js | 33 +++++++++++++++++++++++++++++++++
 pages/_app.js           |  3 +++
 2 files changed, 36 insertions(+)
 create mode 100644 hooks/useAdjustStyle.js

diff --git a/hooks/useAdjustStyle.js b/hooks/useAdjustStyle.js
new file mode 100644
index 00000000..e3177d38
--- /dev/null
+++ b/hooks/useAdjustStyle.js
@@ -0,0 +1,33 @@
+import { isBrowser } from '@/lib/utils';
+import { useEffect } from 'react';
+
+const useAdjustStyle = () => {
+    /**
+     * 避免 callout 含有图片时溢出撑开父容器
+     */
+    const adjustCalloutImg = () => {
+        const callouts = document.querySelectorAll('.notion-callout-text');
+        callouts.forEach((callout) => {
+            const images = callout.querySelectorAll('figure.notion-asset-wrapper.notion-asset-wrapper-image > div');
+            const calloutWidth = callout.offsetWidth;
+            images.forEach((container) => {
+                const imageWidth = container.offsetWidth;
+                if (imageWidth + 50 > calloutWidth) {
+                    container.style.setProperty('width', '100%');
+                }
+            });
+        });
+    };
+
+    useEffect(() => {
+        if (isBrowser) {
+            adjustCalloutImg();
+            window.addEventListener('resize', adjustCalloutImg);
+            return () => {
+                window.removeEventListener('resize', adjustCalloutImg);
+            };
+        }
+    }, []);
+};
+
+export default useAdjustStyle;
diff --git a/pages/_app.js b/pages/_app.js
index da9b3efc..4fb5c7a0 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -9,11 +9,14 @@ import '@/styles/notion.css' //  重写部分样式
 import 'aos/dist/aos.css' // You can also use <link> for styles
 
 import { GlobalContextProvider } from '@/lib/global'
+import useAdjustStyle from '@/hooks/useAdjustStyle'
 
 // 各种扩展插件 这个要阻塞引入
 import ExternalPlugins from '@/components/ExternalPlugins'
 
 const MyApp = ({ Component, pageProps }) => {
+  // 一些可能出现 bug 的样式，可以统一放入该钩子进行调整
+  useAdjustStyle();
   return (
         <GlobalContextProvider {...pageProps}>
             <Component {...pageProps} />