SheWhoReignsSupreme/Equicord
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

MarkdownTables: Dont Use Observer

Browse source
This commit is contained in:
thororen 2026-09-26 21:16:05 -04:00
parent 12c9b21d67
commit e8bb78ca02
No known key found for this signature in database
1 changed files with 58 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/equicordplugins/markdownTables/index.tsx
View file

@ -172,12 +172,10 @@ function TableScrollFrame({
direction: null, direction: null,
}); });
useLayoutEffect(() => { function updateMask(trackDirection = false) {
const scrollElement = scrollRef.current; const element = scrollRef.current;
if (!scrollElement) return; if (!element) return;
const observedElement: HTMLDivElement = scrollElement;
function updateMask(element: HTMLDivElement, trackDirection = false) {
const maxScrollLeft = Math.max(0, element.scrollWidth - element.clientWidth); const maxScrollLeft = Math.max(0, element.scrollWidth - element.clientWidth);
const scrollLeft = Math.min(Math.max(element.scrollLeft, 0), maxScrollLeft); const scrollLeft = Math.min(Math.max(element.scrollLeft, 0), maxScrollLeft);
let nextDirection: ScrollDirection = null; let nextDirection: ScrollDirection = null;
@ -222,29 +220,13 @@ function TableScrollFrame({
function scheduleMaskUpdate(trackDirection = false) { function scheduleMaskUpdate(trackDirection = false) {
window.cancelAnimationFrame(frameRef.current); window.cancelAnimationFrame(frameRef.current);
frameRef.current = window.requestAnimationFrame(() => updateMask(observedElement, trackDirection)); frameRef.current = window.requestAnimationFrame(() => updateMask(trackDirection));
} }
function handleScroll() { useLayoutEffect(() => {
scheduleMaskUpdate(true); updateMask();
}
function handleResize() {
scheduleMaskUpdate();
}
const resizeObserver = new ResizeObserver(() => scheduleMaskUpdate());
resizeObserver.observe(observedElement);
if (observedElement.firstElementChild) resizeObserver.observe(observedElement.firstElementChild);
updateMask(observedElement);
observedElement.addEventListener("scroll", handleScroll, { passive: true });
window.addEventListener("resize", handleResize);
return () => { return () => {
resizeObserver.disconnect();
observedElement.removeEventListener("scroll", handleScroll);
window.removeEventListener("resize", handleResize);
window.cancelAnimationFrame(frameRef.current); window.cancelAnimationFrame(frameRef.current);
window.clearTimeout(directionResetRef.current); window.clearTimeout(directionResetRef.current);
}; };
@ -262,7 +244,12 @@ function TableScrollFrame({
}, },
)} )}
> >
<div className={cl("scroll")} ref={scrollRef}> <div
className={cl("scroll")}
ref={scrollRef}
onScroll={() => scheduleMaskUpdate(true)}
onMouseEnter={() => scheduleMaskUpdate()}
>
<table className={cl("table")}> <table className={cl("table")}>
{table.header.length > 0 && ( {table.header.length > 0 && (
<thead> <thead>