@griddo/ax 11.12.1-rc.1 → 11.12.1-rc.2

package/package.json

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

package/src/components/Browser/index.tsx

@@ -82,6 +82,9 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		localStorage.setItem("selectedID", "0");
 		(window as any).browserRef = null;
 
+		// Only setup ResizeObserver for pageEditor
+		if (!isPageEditor) return;
+
 		const el = frameWrapperRef.current;
 		if (!el) return;
 
@@ -99,7 +102,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		observer.observe(el);
 
 		return () => observer.disconnect();
-	}, []);
+	}, [isPageEditor]);
 
 	// Fetch share data when in preview mode
 	useEffect(() => {
@@ -188,7 +191,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		}
 	};
 
-	const scaledWidth = !isPreview
+	const scaledWidth = isPageEditor
 		? Math.floor(parseInt(dimensions.resolution) * (parseInt(dimensions.zoom) / 100))
 		: undefined;
 
@@ -201,7 +204,12 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 
 	return (
 		<S.OuterContainer ref={frameWrapperRef}>
-			<S.BrowserWrapper data-testid="browser-wrapper" ref={browserRef} scaledWidth={scaledWidth} isPreview={isPreview}>
+			<S.BrowserWrapper
+				data-testid="browser-wrapper"
+				ref={browserRef}
+				scaledWidth={scaledWidth}
+				isPreview={!isPageEditor}
+			>
 				{(isPageEditor || isHeadingsEditor || isKeywordsEditor) && (
 					<S.NavBar>
 						<S.NavUrl>{url}</S.NavUrl>
@@ -247,30 +255,34 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 								</S.IconWrapper>
 							</S.NavActions>
 						) : (
-							<S.NavActions data-testid="nav-actions-wrapper">
-								<S.ResolutionWrapper>
-									<S.SelectLabel>Screen</S.SelectLabel>
-									<Select
-										name="resolution"
-										options={resolutionOptions}
-										value={dimensions.resolution}
-										onChange={handleResolutionChange}
-										type="round"
-										offSet="30%"
-										mandatory
-									/>
-								</S.ResolutionWrapper>
-								<S.ZoomWrapper>
-									<Select
-										name="zoom"
-										options={zoomOptionsWithDisabled}
-										value={dimensions.zoom}
-										onChange={handleZoomChange}
-										type="round"
-										mandatory
-									/>
-								</S.ZoomWrapper>
-							</S.NavActions>
+							<>
+								{showIframe && (
+									<S.NavActions data-testid="nav-actions-wrapper">
+										<S.ResolutionWrapper>
+											<S.SelectLabel>Screen</S.SelectLabel>
+											<Select
+												name="resolution"
+												options={resolutionOptions}
+												value={dimensions.resolution}
+												onChange={handleResolutionChange}
+												type="round"
+												offSet="30%"
+												mandatory
+											/>
+										</S.ResolutionWrapper>
+										<S.ZoomWrapper>
+											<Select
+												name="zoom"
+												options={zoomOptionsWithDisabled}
+												value={dimensions.zoom}
+												onChange={handleZoomChange}
+												type="round"
+												mandatory
+											/>
+										</S.ZoomWrapper>
+									</S.NavActions>
+								)}
+							</>
 						)}
 					</S.NavBar>
 				)}
@@ -301,23 +313,23 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 							) : (
 								<div
 									style={{
-										width: `${scaledWidth}px`,
+										width: scaledWidth !== undefined ? `${scaledWidth}px` : "100%",
 										height: "100%",
 										overflow: "hidden",
-										flexShrink: 0,
+										flexShrink: isPageEditor ? 0 : "unset",
 									}}
 								>
 									<iframe
 										title="Preview"
-										width={dimensions.resolution}
+										width={isPageEditor ? dimensions.resolution : "100%"}
 										src={urlPreview}
 										loading="lazy"
 										className="frame-content"
 										style={{
 											display: "block",
-											transform: `scale(${parseInt(dimensions.zoom) / 100})`,
+											transform: isPageEditor ? `scale(${parseInt(dimensions.zoom) / 100})` : "scale(1)",
 											transformOrigin: "0 0",
-											height: `${Math.round(100 / (parseInt(dimensions.zoom) / 100))}%`,
+											height: isPageEditor ? `${Math.round(100 / (parseInt(dimensions.zoom) / 100))}%` : "100%",
 										}}
 									/>
 								</div>

package/src/components/Browser/style.tsx

@@ -70,7 +70,7 @@ const FrameWrapper = styled.div<{ hasBorder: boolean; isFormEditor: boolean }>`
   justify-content: center;
   flex: 1;
   min-height: 0;
-  padding: ${(p) => (p.isFormEditor ? p.theme.spacing.m : "0")};
+  padding: ${(p) => (p.isFormEditor ? `${p.theme.spacing.m} 0 0 ${p.theme.spacing.m}` : "0")};
 `;
 
 const OuterContainer = styled.div`

package/src/components/HeadingsPreviewModal/utils.tsx

@@ -67,12 +67,17 @@ const analyzeHeadings = (headings: HeadingNode[], isFiltering = false): IHeading
 
 	// 2. Check for incorrect nesting (skipped levels)
 	const nestingErrorIds: number[] = [];
-	for (let i = 1; i < flatHeadings.length; i++) {
-		const prevLevel = flatHeadings[i - 1].level;
+	let expectedMaxLevel = 2; // Start: we expect H1 or H2
+	for (let i = 0; i < flatHeadings.length; i++) {
 		const currLevel = flatHeadings[i].level;
 
-		if (currLevel > prevLevel && currLevel - prevLevel > 1) {
+		if (currLevel > expectedMaxLevel) {
+			// Heading skips levels - mark as error
 			nestingErrorIds.push(flatHeadings[i].id);
+			// Don't update expectedMaxLevel - stay strict on what we expect next
+		} else {
+			// Correct nesting - update expected max level for next heading
+			expectedMaxLevel = currLevel + 1;
 		}
 	}
 	if (nestingErrorIds.length > 0) {

package/src/components/ResizePanel/index.tsx

@@ -11,18 +11,27 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 
 	const [rwidth, setRwidth] = useState(MIN_WIDTH);
 	const rightPanelRef = useRef<HTMLDivElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
 
 	const calculateFixedPanelMinWidth = (currentWidth: number) => {
-		const minWidth = 1280 - currentWidth - 32;
-		return minWidth < 500 ? "500px" : `${minWidth}px`;
+		const containerWidth = containerRef.current?.offsetWidth ?? 1280;
+		const minWidth = Math.max(500, containerWidth - currentWidth - 32);
+		return `${minWidth}px`;
 	};
 
 	useEffect(() => {
-		requestAnimationFrame(() => {
-			if (rightPanelRef.current) {
-				setRwidth(rightPanelRef.current.offsetWidth);
-			}
-		});
+		const updateWidth = () => {
+			requestAnimationFrame(() => {
+				if (rightPanelRef.current) {
+					setRwidth(rightPanelRef.current.offsetWidth);
+				}
+			});
+		};
+
+		updateWidth();
+
+		window.addEventListener("resize", updateWidth);
+		return () => window.removeEventListener("resize", updateWidth);
 	}, []);
 
 	const resize = (value: number) => {
@@ -30,7 +39,7 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 	};
 
 	return (
-		<>
+		<div ref={containerRef} style={{ display: "flex", width: "100%", height: "100%" }}>
 			<S.LeftPanel data-testid="left-panel">
 				{fixed ? (
 					<S.FixedPanel
@@ -48,7 +57,7 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 			<S.RightPanel ref={rightPanelRef} data-testid="right-panel" style={{ width: rwidth ? `${rwidth}px` : "auto" }}>
 				{rightPanel}
 			</S.RightPanel>
-		</>
+		</div>
 	);
 };
 

package/src/components/ResizePanel/style.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 const LeftPanel = styled.section`
   position: relative;
   flex-grow: 1;
-  min-width: 500px;
+  min-width: 620px;
 `;
 
 const RightPanel = styled.section`
@@ -12,7 +12,7 @@ const RightPanel = styled.section`
   padding: ${(p) => `0 ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
   flex-shrink: 0;
   min-width: 368px;
-  max-width: ${(p) => `calc(100% - 500px - ${p.theme.spacing.m})`};
+  max-width: ${(p) => `calc(100% - 620px - ${p.theme.spacing.m})`};
   flex-direction: column;
 `;
 

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

@@ -21,8 +21,8 @@ const Label = styled.span<{ $color: string; $above?: boolean }>`
 		p.$above
 			? `
 		transform: none;
-		top: -25px;
-		left: 1px;
+		top: -20px;
+		left: -2px;
 	`
 			: `
 		transform: rotate(-90deg);