🐛 修复 callout 图片溢出

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;

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} />