Skip to content

Commit c76866c

Browse files
committed
fix: fix ResizeObserver loop completed issue. (#202)
1 parent 2d3f450 commit c76866c

File tree

1 file changed

+21
-17
lines changed

1 file changed

+21
-17
lines changed

src/commands/fullscreen.tsx

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,30 +6,34 @@ const Fullscreen: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & T
66
const { editorProps } = props;
77
const $height = useRef<number>(0);
88
const [full, setFull] = useState(false);
9+
const robserver = useRef<ResizeObserver>();
10+
useEffect(() => {
11+
robserver.current = new ResizeObserver((entries) => {
12+
for (const entry of entries) {
13+
if (!$height.current) {
14+
$height.current = entry.target.clientHeight;
15+
}
16+
if (editorProps.editor?.current?.view?.dom) {
17+
if (full) {
18+
editorProps.editor.current.view.dom.style.height = `${entry.target.clientHeight}px`;
19+
} else {
20+
editorProps.editor.current.view.dom.removeAttribute('style');
21+
}
22+
}
23+
}
24+
});
25+
}, []);
926
useEffect(() => {
1027
if (
1128
editorProps.containerEditor &&
1229
editorProps.containerEditor.current &&
13-
editorProps.containerEditor.current.parentElement
30+
editorProps.containerEditor.current.parentElement &&
31+
robserver.current
1432
) {
1533
const parentElement = editorProps.containerEditor.current.parentElement;
16-
const robserver = new ResizeObserver((entries) => {
17-
for (const entry of entries) {
18-
if (!$height.current) {
19-
$height.current = entry.target.clientHeight;
20-
}
21-
if (editorProps.editor?.current?.view?.dom) {
22-
if (full) {
23-
editorProps.editor.current.view.dom.style.height = `${entry.target.clientHeight}px`;
24-
} else {
25-
editorProps.editor.current.view.dom.removeAttribute('style');
26-
}
27-
}
28-
}
29-
});
30-
robserver.observe(parentElement);
34+
robserver.current.observe(parentElement);
3135
}
32-
}, [editorProps.containerEditor, editorProps.editor, full]);
36+
}, [editorProps.containerEditor, editorProps.editor, full, robserver]);
3337

3438
useEffect(() => {
3539
if (!document) return;

0 commit comments

Comments
 (0)