forked from tangly1024/NotionNext
-
Notifications
You must be signed in to change notification settings - Fork 0
/
useAdjustStyle.js
36 lines (33 loc) · 1007 Bytes
/
useAdjustStyle.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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;