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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.12.1-rc.7",
+  "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": "e82b8235adc4aafe57ee0e892f3532a036492b08"
+  "gitHead": "e32cbe0e89e5a45fe9ca85413bcf382975d53d05"
 }

package/src/components/HeadingsPreviewModal/index.tsx

@@ -35,6 +35,7 @@ const HeadingsPreviewModal = (props: IHeadingsPreviewProps) => {
 			setHeadings(headings);
 		} else {
 			setHeadingsFilter("all");
+			window.scrollTo(0, 0);
 		}
 	}, [isOpen, getSEOHeadings, setHeadingsFilter]);
 

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(),
@@ -55,20 +77,57 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 
 		update();
 
+		document.fonts.ready.then(update);
+
 		window.addEventListener("resize", update);
-		window.addEventListener("scroll", update, true);
 		document.addEventListener("animationend", update, true);
 		document.addEventListener("transitionend", update, true);
 
-		const observer = new MutationObserver(update);
-		observer.observe(document.body, { childList: true, subtree: true, attributes: true });
+		// 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 () => {
 			cancelAnimationFrame(rafRef.current);
 			window.removeEventListener("resize", update);
-			window.removeEventListener("scroll", update, true);
 			document.removeEventListener("animationend", update, true);
 			document.removeEventListener("transitionend", update, true);
+			scrollContainers.forEach((container) => {
+				container.removeEventListener("scroll", update);
+			});
 			observer.disconnect();
 		};
 	}, [headingFilter]);

package/src/modules/FramePreview/utils.tsx

@@ -6,7 +6,10 @@ const addIdsToHeadings = (container: HTMLElement, headingFilter: string | null):
 		const text = heading.textContent?.trim();
 		if (!text) return;
 
-		heading.dataset.griddoid = `heading-${index + 1}`;
+		const id = `heading-${index + 1}`;
+		if (heading.dataset.griddoid !== id) {
+			heading.dataset.griddoid = id;
+		}
 	});
 };