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

package/package.json

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

package/src/__tests__/components/Browser/Browser.test.tsx

@@ -70,7 +70,7 @@ describe("Browser component rendering", () => {
 
 		renderBrowser(defaultProps);
 
-		expect(screen.getByTestId("nav-actions-wrapper")).toBeInTheDocument();
+		expect(screen.queryByTestId("nav-actions-wrapper")).not.toBeInTheDocument();
 		expect(screen.queryByTestId("navbar-iframe-wrapper")).not.toBeInTheDocument();
 		expect(screen.getByTestId("browser-content-wrapper")).toBeInTheDocument();
 	});

package/src/components/Browser/index.tsx

@@ -63,6 +63,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 	const isFormEditor = editorType === "form";
 	const isHeadingsEditor = editorType === "headings";
 	const isKeywordsEditor = editorType === "keywords";
+	const isZoomEditor = isPageEditor || isHeadingsEditor || isKeywordsEditor;
 
 	const frameWrapperRef = useRef<HTMLDivElement>(null);
 
@@ -82,8 +83,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		localStorage.setItem("selectedID", "0");
 		(window as any).browserRef = null;
 
-		// Only setup ResizeObserver for pageEditor
-		if (!isPageEditor) return;
+		if (!isZoomEditor) return;
 
 		const el = frameWrapperRef.current;
 		if (!el) return;
@@ -102,7 +102,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		observer.observe(el);
 
 		return () => observer.disconnect();
-	}, [isPageEditor]);
+	}, [isZoomEditor]);
 
 	// Fetch share data when in preview mode
 	useEffect(() => {
@@ -191,7 +191,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		}
 	};
 
-	const scaledWidth = isPageEditor
+	const scaledWidth = isZoomEditor
 		? Math.floor(parseInt(dimensions.resolution) * (parseInt(dimensions.zoom) / 100))
 		: undefined;
 
@@ -208,9 +208,9 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 				data-testid="browser-wrapper"
 				ref={browserRef}
 				scaledWidth={scaledWidth}
-				isPreview={!isPageEditor}
+				isPreview={!isZoomEditor}
 			>
-				{(isPageEditor || isHeadingsEditor || isKeywordsEditor) && (
+				{isZoomEditor && (
 					<S.NavBar>
 						<S.NavUrl>{url}</S.NavUrl>
 						{isPreview ? (
@@ -296,11 +296,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 								$compact={isCompact}
 							/>
 						)}
-						<S.FrameWrapper
-							hasBorder={isPageEditor || isHeadingsEditor || isKeywordsEditor}
-							isFormEditor={isFormEditor}
-							data-testid="navbar-iframe-wrapper"
-						>
+						<S.FrameWrapper hasBorder={isZoomEditor} isFormEditor={isFormEditor} data-testid="navbar-iframe-wrapper">
 							{isPreview ? (
 								<iframe
 									title="Preview"
@@ -316,20 +312,20 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 										width: scaledWidth !== undefined ? `${scaledWidth}px` : "100%",
 										height: "100%",
 										overflow: "hidden",
-										flexShrink: isPageEditor ? 0 : "unset",
+										flexShrink: isZoomEditor ? 0 : "unset",
 									}}
 								>
 									<iframe
 										title="Preview"
-										width={isPageEditor ? dimensions.resolution : "100%"}
+										width={isZoomEditor ? dimensions.resolution : "100%"}
 										src={urlPreview}
 										loading="lazy"
 										className="frame-content"
 										style={{
 											display: "block",
-											transform: isPageEditor ? `scale(${parseInt(dimensions.zoom) / 100})` : "scale(1)",
+											transform: isZoomEditor ? `scale(${parseInt(dimensions.zoom) / 100})` : "scale(1)",
 											transformOrigin: "0 0",
-											height: isPageEditor ? `${Math.round(100 / (parseInt(dimensions.zoom) / 100))}%` : "100%",
+											height: isZoomEditor ? `${Math.round(100 / (parseInt(dimensions.zoom) / 100))}%` : "100%",
 										}}
 									/>
 								</div>

package/src/components/HeadingsPreviewModal/ErrorsBanner/ErrorItem/index.tsx

@@ -7,7 +7,7 @@ import type { IHeadingError } from "../../utils";
 import * as S from "./style";
 
 const ErrorsItem = (props: IErrorsItemProps) => {
-	const { error, onSelectHeading } = props;
+	const { error, onSelectHeading, onDelete } = props;
 	const { message, description, headingIds } = error;
 
 	const [isOpen, setIsOpen] = useState(false);
@@ -54,7 +54,12 @@ const ErrorsItem = (props: IErrorsItemProps) => {
 								<Icon name={isOpen ? "UpArrow" : "DownArrow"} size="16" />
 							</S.IconWrapper>
 						)}
-						<S.IconWrapper onClick={() => setIsDeleted(true)}>
+						<S.IconWrapper
+							onClick={() => {
+								setIsDeleted(true);
+								onDelete();
+							}}
+						>
 							<Icon name="close" size="16" />
 						</S.IconWrapper>
 					</S.ErrorActions>
@@ -80,6 +85,7 @@ const ErrorsItem = (props: IErrorsItemProps) => {
 interface IErrorsItemProps {
 	error: IHeadingError;
 	onSelectHeading: (id: number) => () => void;
+	onDelete: () => void;
 }
 
 export default ErrorsItem;

package/src/components/HeadingsPreviewModal/ErrorsBanner/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 import { Icon } from "@ax/components";
 
@@ -11,8 +11,18 @@ const ErrorsBanner = (props: IErrorsBannerProps) => {
 	const { errors, onSelectHeading, isOpen, setIsOpen, resetKey } = props;
 
 	const [isDeleted, setIsDeleted] = useState(false);
+	const [deletedErrorIndices, setDeletedErrorIndices] = useState<Set<number>>(new Set());
 
-	if (isDeleted) {
+	const allErrorsDeleted = useMemo(
+		() => deletedErrorIndices.size === errors.length && errors.length > 0,
+		[deletedErrorIndices.size, errors.length],
+	);
+
+	const handleErrorDelete = (index: number) => {
+		setDeletedErrorIndices((prev) => new Set([...prev, index]));
+	};
+
+	if (isDeleted || allErrorsDeleted) {
 		return <></>;
 	}
 
@@ -37,8 +47,13 @@ const ErrorsBanner = (props: IErrorsBannerProps) => {
 					Review <strong>suggestions and warnings</strong> to enhance your page's search engine optimization.
 				</S.Description>
 				<S.ErrorListWrapper>
-					{errors.map((error) => (
-						<ErrorItem key={`${error.message}-${resetKey}`} error={error} onSelectHeading={onSelectHeading} />
+					{errors.map((error, index) => (
+						<ErrorItem
+							key={`${error.message}-${resetKey}`}
+							error={error}
+							onSelectHeading={onSelectHeading}
+							onDelete={() => handleErrorDelete(index)}
+						/>
 					))}
 				</S.ErrorListWrapper>
 			</S.ErrorsContent>

package/src/components/HeadingsPreviewModal/utils.tsx

@@ -67,17 +67,16 @@ const analyzeHeadings = (headings: HeadingNode[], isFiltering = false): IHeading
 
 	// 2. Check for incorrect nesting (skipped levels)
 	const nestingErrorIds: number[] = [];
-	let expectedMaxLevel = 2; // Start: we expect H1 or H2
-	for (let i = 0; i < flatHeadings.length; i++) {
+	let lastValidLevel = flatHeadings[0].level;
+	for (let i = 1; i < flatHeadings.length; i++) {
 		const currLevel = flatHeadings[i].level;
 
-		if (currLevel > expectedMaxLevel) {
+		if (currLevel > lastValidLevel + 1) {
 			// 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;
+			// Correct nesting - update last valid level
+			lastValidLevel = currLevel;
 		}
 	}
 	if (nestingErrorIds.length > 0) {

package/src/components/KeywordsPreviewModal/index.tsx

@@ -39,11 +39,22 @@ const KeywordsPreviewModal = (props: IKeywordsPreviewProps) => {
 	const handleDeleteKeyword = (value: string) => {
 		setDeletedKeyword(value);
 		deleteKeyword(value);
+		setKeywordsFilter([]);
+	};
+
+	const handleCloseModal = () => {
+		setKeywordsFilter([]);
+		toggleModal();
+	};
+
+	const handleAddKeywords = (value: string[]) => {
+		setKeywordsFilter([]);
+		addKeywords(value);
 	};
 
 	return (
 		<S.Wrapper>
-			<FloatingPanel title="Keywords" toggleModal={toggleModal} closeOnOutsideClick={false} isOpen={isOpen} width={358}>
+			<FloatingPanel title="Keywords" toggleModal={handleCloseModal} closeOnOutsideClick={false} isOpen={isOpen} width={358}>
 				{isOpen && (
 					<S.KeywordsWrapper>
 						{keywordsFilter.length > 0 && (
@@ -79,7 +90,7 @@ const KeywordsPreviewModal = (props: IKeywordsPreviewProps) => {
 					</S.KeywordsWrapper>
 				)}
 			</FloatingPanel>
-			<AddKeywordsModal isOpen={isAddOpen} toggleModal={toggleAddModal} addNewKeyword={addKeywords} />
+			<AddKeywordsModal isOpen={isAddOpen} toggleModal={toggleAddModal} addNewKeyword={handleAddKeywords} />
 			{isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
 		</S.Wrapper>
 	);

package/src/hooks/modals.tsx

@@ -13,14 +13,14 @@ const useModal = (initialState?: boolean, bodyBlock = true) => {
 			}
 			return () => {
 				// Solo eliminar si no hay otros modales abiertos
-				const modals = document.querySelectorAll('[data-testid="modal-wrapper"]');
+				const modals = document.querySelectorAll('[data-testid="modal-wrapper"], [data-testid="floating-panel"]');
 				if (modals.length <= 1) {
 					document.body.classList.remove("modal-open");
 				}
 			};
 		} else if (!bodyBlock || !isOpen) {
 			// Solo eliminar si no hay modales abiertos
-			const modals = document.querySelectorAll('[data-testid="modal-wrapper"]');
+			const modals = document.querySelectorAll('[data-testid="modal-wrapper"], [data-testid="floating-panel"]');
 			if (modals.length === 0) {
 				document.body.classList.remove("modal-open");
 			}
@@ -72,14 +72,14 @@ const useModals = <T extends string>(modalKeys: readonly T[], bodyBlock = true)
 			}
 			return () => {
 				// Solo eliminar si no hay otros modales abiertos
-				const modals = document.querySelectorAll('[data-testid="modal-wrapper"]');
+				const modals = document.querySelectorAll('[data-testid="modal-wrapper"], [data-testid="floating-panel"]');
 				if (modals.length <= 1) {
 					document.body.classList.remove("modal-open");
 				}
 			};
 		}
 		// Solo eliminar si no hay modales abiertos
-		const modals = document.querySelectorAll('[data-testid="modal-wrapper"]');
+		const modals = document.querySelectorAll('[data-testid="modal-wrapper"], [data-testid="floating-panel"]');
 		if (modals.length === 0) {
 			document.body.classList.remove("modal-open");
 		}