@griddo/ax 11.12.1-rc.11 → 11.12.1-rc.12

package/package.json

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

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

@@ -23,18 +23,6 @@ const isEffectivelyVisible = (el: HTMLElement): boolean => {
 	return true;
 };
 
-const isInStickyOrFixed = (el: HTMLElement): boolean => {
-	let parent: HTMLElement | null = el.parentElement;
-	while (parent && parent !== document.body) {
-		const style = window.getComputedStyle(parent);
-		if (style.position === "sticky" || style.position === "fixed") {
-			return true;
-		}
-		parent = parent.parentElement;
-	}
-	return false;
-};
-
 const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 	const [boxes, setBoxes] = useState<HeadingBox[]>([]);
 	const rafRef = useRef<number>(0);
@@ -59,7 +47,6 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 						rect,
 						scrollX,
 						scrollY,
-						inStickyOrFixed: isInStickyOrFixed(el),
 					});
 				}
 				setBoxes(boxes);
@@ -88,7 +75,7 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 
 	return createPortal(
 		<div data-testid="headings-overlay">
-			{boxes.map(({ id, tag, rect, scrollX, scrollY, inStickyOrFixed }) => {
+			{boxes.map(({ id, tag, rect, scrollX, scrollY }) => {
 				const color = headColors[tag];
 				if (!color) return null;
 				const labelAbove = rect.left < 30;
@@ -96,10 +83,9 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 					<S.Box
 						key={id}
 						$color={color}
-						$fixed={inStickyOrFixed}
 						style={{
-							top: inStickyOrFixed ? rect.top : rect.top + scrollY,
-							left: inStickyOrFixed ? rect.left : rect.left + scrollX,
+							top: rect.top + scrollY,
+							left: rect.left + scrollX,
 							width: rect.width,
 							height: rect.height,
 						}}
@@ -121,7 +107,6 @@ interface HeadingBox {
 	rect: DOMRect;
 	scrollX: number;
 	scrollY: number;
-	inStickyOrFixed: boolean;
 }
 
 export interface IHeadingsOverlayProps {

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

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
-const Box = styled.div<{ $color: string; $fixed?: boolean }>`
-	position: ${(p) => (p.$fixed ? "fixed" : "absolute")};
+const Box = styled.div<{ $color: string }>`
+	position: absolute;
 	outline: 2px solid ${(p) => p.$color};
 	z-index: 1001;
 	pointer-events: none;