@griddo/ax 11.12.1-rc.8 → 11.12.1-rc.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.12.1-rc.8",
+  "version": "11.12.1-rc.9",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -217,5 +217,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dd8aea4aa1eeea915e2b432f15bded59ff906892"
+  "gitHead": "e32cbe0e89e5a45fe9ca85413bcf382975d53d05"
 }

package/src/modules/FramePreview/HeadingsOverlay/index.tsx

@@ -23,6 +23,29 @@ const isEffectivelyVisible = (el: HTMLElement): boolean => {
 	return true;
 };
 
+const getScrollOffset = (el: HTMLElement): { scrollX: number; scrollY: number } => {
+	let scrollX = window.scrollX;
+	let scrollY = window.scrollY;
+
+	let parent: HTMLElement | null = el.parentElement;
+	while (parent && parent !== document.body) {
+		const style = window.getComputedStyle(parent);
+		const overflowY = style.overflowY;
+		const overflowX = style.overflowX;
+
+		if (overflowY === "auto" || overflowY === "scroll") {
+			scrollY = parent.scrollTop;
+		}
+		if (overflowX === "auto" || overflowX === "scroll") {
+			scrollX = parent.scrollLeft;
+		}
+
+		parent = parent.parentElement;
+	}
+
+	return { scrollX, scrollY };
+};
+
 const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 	const [boxes, setBoxes] = useState<HeadingBox[]>([]);
 	const rafRef = useRef<number>(0);
@@ -33,14 +56,13 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 			rafRef.current = requestAnimationFrame(() => {
 				const selector = headingFilter || "h1, h2, h3, h4, h5, h6";
 				const headings = Array.from(document.querySelectorAll<HTMLElement>(selector));
-				const scrollX = window.scrollX;
-				const scrollY = window.scrollY;
 				const boxes: HeadingBox[] = [];
 				for (let i = 0; i < headings.length; i++) {
 					const el = headings[i];
 					const rect = el.getBoundingClientRect();
 					if (rect.width === 0 && rect.height === 0) continue;
 					if (!isEffectivelyVisible(el)) continue;
+					const { scrollX, scrollY } = getScrollOffset(el);
 					boxes.push({
 						id: el.dataset.griddoid || `heading-${i}`,
 						tag: el.tagName.toLowerCase(),
@@ -61,7 +83,41 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 		document.addEventListener("animationend", update, true);
 		document.addEventListener("transitionend", update, true);
 
-		const observer = new MutationObserver(update);
+		// Detectar contenedores scrollables y escuchar su scroll
+		const scrollContainers = new Set<Element>();
+		const detectScrollContainers = () => {
+			scrollContainers.clear();
+			const headings = Array.from(document.querySelectorAll<HTMLElement>(headingFilter || "h1, h2, h3, h4, h5, h6"));
+			headings.forEach((el) => {
+				let parent: HTMLElement | null = el.parentElement;
+				while (parent && parent !== document.body) {
+					const style = window.getComputedStyle(parent);
+					if (
+						style.overflowY === "auto" ||
+						style.overflowY === "scroll" ||
+						style.overflowX === "auto" ||
+						style.overflowX === "scroll"
+					) {
+						scrollContainers.add(parent);
+						break;
+					}
+					parent = parent.parentElement;
+				}
+			});
+		};
+
+		detectScrollContainers();
+		scrollContainers.forEach((container) => {
+			container.addEventListener("scroll", update, { passive: true });
+		});
+
+		const observer = new MutationObserver(() => {
+			detectScrollContainers();
+			scrollContainers.forEach((container) => {
+				container.addEventListener("scroll", update, { passive: true });
+			});
+			update();
+		});
 		observer.observe(document.body, { childList: true, subtree: true });
 
 		return () => {
@@ -69,6 +125,9 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 			window.removeEventListener("resize", update);
 			document.removeEventListener("animationend", update, true);
 			document.removeEventListener("transitionend", update, true);
+			scrollContainers.forEach((container) => {
+				container.removeEventListener("scroll", update);
+			});
 			observer.disconnect();
 		};
 	}, [headingFilter]);