fantasticit
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

client: add resize handler in tocs

pull/64/head
fantasticit 2022-05-30 17:32:04 +08:00
parent 19924b740b
commit d010f3aaba
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/client/src/tiptap/editor/tocs/index.tsx
View File

@ -51,17 +51,19 @@ export const Tocs: React.FC<{ editor: Editor; getContainer: () => HTMLElement }>
if (!el) return; if (!el) return;
const handler = throttle(() => { const handler = () => {
const diffWidth = el.offsetWidth - (el.firstChild as HTMLDivElement).offsetWidth; const diffWidth = el.offsetWidth - (el.firstChild as HTMLDivElement).offsetWidth;
toggleCollapsed(diffWidth <= TOCS_WIDTH); toggleCollapsed(diffWidth <= TOCS_WIDTH);
}, 200); };
handler(); handler();
const observer = new MutationObserver(handler); const observer = new MutationObserver(handler);
observer.observe(el, { attributes: true, childList: true, subtree: true }); observer.observe(el, { attributes: true, childList: true, subtree: true });
window.addEventListener('resize', handler);
return () => { return () => {
observer.disconnect(); observer.disconnect();
window.removeEventListener('resize', handler);
}; };
}, [getContainer, toggleCollapsed]); }, [getContainer, toggleCollapsed]);