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,
});
useLayoutEffect(() => {
const scrollElement = scrollRef.current;
if (!scrollElement) return;
const observedElement: HTMLDivElement = scrollElement;
function updateMask(trackDirection = false) {
const element = scrollRef.current;
if (!element) return;
function updateMask(element: HTMLDivElement, trackDirection = false) {
const maxScrollLeft = Math.max(0, element.scrollWidth - element.clientWidth);
const scrollLeft = Math.min(Math.max(element.scrollLeft, 0), maxScrollLeft);
let nextDirection: ScrollDirection = null;
@ -222,29 +220,13 @@ function TableScrollFrame({
function scheduleMaskUpdate(trackDirection = false) {
window.cancelAnimationFrame(frameRef.current);
frameRef.current = window.requestAnimationFrame(() => updateMask(observedElement, trackDirection));
frameRef.current = window.requestAnimationFrame(() => updateMask(trackDirection));
}
function handleScroll() {
scheduleMaskUpdate(true);
}
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);
useLayoutEffect(() => {
updateMask();
return () => {
resizeObserver.disconnect();
observedElement.removeEventListener("scroll", handleScroll);
window.removeEventListener("resize", handleResize);
window.cancelAnimationFrame(frameRef.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.header.length > 0 && (
<thead>