@griddo/ax 11.12.0 → 11.12.1-rc.0

package/src/__tests__/modules/FramePreview/HeadingsOverlay/HeadingsOverlay.test.tsx

@@ -0,0 +1,185 @@
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, act } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import HeadingsOverlay from "@ax/modules/FramePreview/HeadingsOverlay";
+import globalTheme from "@ax/themes/theme.json";
+
+const renderWithTheme = (ui: React.ReactElement) =>
+	render(<ThemeProvider theme={parseTheme(globalTheme)}>{ui}</ThemeProvider>);
+
+beforeEach(() => {
+	jest.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
+		cb(0);
+		return 0;
+	});
+});
+
+afterEach(() => {
+	cleanup();
+	for (const el of document.querySelectorAll("h1, h2, h3, h4, h5, h6")) el.remove();
+	jest.restoreAllMocks();
+});
+
+describe("HeadingsOverlay rendering", () => {
+	it("should render without boxes when no headings exist in the document", () => {
+		renderWithTheme(<HeadingsOverlay headingFilter={null} />);
+
+		expect(screen.queryByText("H1")).toBeNull();
+		expect(screen.queryByText("H2")).toBeNull();
+	});
+
+	it("should render a labeled box for an h1 element with a non-zero bounding rect", async () => {
+		const h1 = document.createElement("h1");
+		h1.dataset.griddoid = "heading-1";
+		document.body.appendChild(h1);
+		jest.spyOn(h1, "getBoundingClientRect").mockReturnValue({
+			top: 10,
+			left: 10,
+			width: 200,
+			height: 40,
+			bottom: 50,
+			right: 210,
+			x: 10,
+			y: 10,
+			toJSON: () => {},
+		} as DOMRect);
+
+		await act(async () => {
+			renderWithTheme(<HeadingsOverlay headingFilter={null} />);
+		});
+
+		expect(screen.getByText("H1")).toBeTruthy();
+	});
+
+	it("should render an uppercase label for the heading tag", async () => {
+		const h2 = document.createElement("h2");
+		h2.dataset.griddoid = "heading-1";
+		document.body.appendChild(h2);
+		jest.spyOn(h2, "getBoundingClientRect").mockReturnValue({
+			top: 10,
+			left: 10,
+			width: 200,
+			height: 40,
+			bottom: 50,
+			right: 210,
+			x: 10,
+			y: 10,
+			toJSON: () => {},
+		} as DOMRect);
+
+		await act(async () => {
+			renderWithTheme(<HeadingsOverlay headingFilter={null} />);
+		});
+
+		expect(screen.getByText("H2")).toBeTruthy();
+	});
+
+	it("should not render boxes for headings with zero bounding rect", () => {
+		const h1 = document.createElement("h1");
+		document.body.appendChild(h1);
+		// JSDOM returns zero rect by default — no mock needed
+
+		renderWithTheme(<HeadingsOverlay headingFilter={null} />);
+
+		expect(screen.queryByText("H1")).toBeNull();
+	});
+
+	it("should not render a box for a heading with display:none", async () => {
+		const h1 = document.createElement("h1");
+		h1.dataset.griddoid = "heading-1";
+		document.body.appendChild(h1);
+		jest.spyOn(h1, "getBoundingClientRect").mockReturnValue({
+			top: 10,
+			left: 10,
+			width: 200,
+			height: 40,
+			bottom: 50,
+			right: 210,
+			x: 10,
+			y: 10,
+			toJSON: () => {},
+		} as DOMRect);
+
+		const originalGetComputedStyle = window.getComputedStyle.bind(window);
+		jest.spyOn(window, "getComputedStyle").mockImplementation((el) => {
+			if (el === h1) return { display: "none", visibility: "", opacity: "1" } as CSSStyleDeclaration;
+			return originalGetComputedStyle(el);
+		});
+
+		await act(async () => {
+			renderWithTheme(<HeadingsOverlay headingFilter={null} />);
+		});
+
+		expect(screen.queryByText("H1")).toBeNull();
+	});
+
+	it("should not render a box for a heading with opacity 0", async () => {
+		const h1 = document.createElement("h1");
+		h1.dataset.griddoid = "heading-1";
+		document.body.appendChild(h1);
+		jest.spyOn(h1, "getBoundingClientRect").mockReturnValue({
+			top: 10,
+			left: 10,
+			width: 200,
+			height: 40,
+			bottom: 50,
+			right: 210,
+			x: 10,
+			y: 10,
+			toJSON: () => {},
+		} as DOMRect);
+
+		const originalGetComputedStyle = window.getComputedStyle.bind(window);
+		jest.spyOn(window, "getComputedStyle").mockImplementation((el) => {
+			if (el === h1) return { display: "block", visibility: "visible", opacity: "0" } as CSSStyleDeclaration;
+			return originalGetComputedStyle(el);
+		});
+
+		await act(async () => {
+			renderWithTheme(<HeadingsOverlay headingFilter={null} />);
+		});
+
+		expect(screen.queryByText("H1")).toBeNull();
+	});
+
+	it("should only render boxes for headings matching the headingFilter", async () => {
+		const h1 = document.createElement("h1");
+		h1.dataset.griddoid = "heading-1";
+		document.body.appendChild(h1);
+		jest.spyOn(h1, "getBoundingClientRect").mockReturnValue({
+			top: 10,
+			left: 10,
+			width: 200,
+			height: 40,
+			bottom: 50,
+			right: 210,
+			x: 10,
+			y: 10,
+			toJSON: () => {},
+		} as DOMRect);
+
+		const h2 = document.createElement("h2");
+		h2.dataset.griddoid = "heading-2";
+		document.body.appendChild(h2);
+		jest.spyOn(h2, "getBoundingClientRect").mockReturnValue({
+			top: 60,
+			left: 10,
+			width: 200,
+			height: 40,
+			bottom: 100,
+			right: 210,
+			x: 10,
+			y: 60,
+			toJSON: () => {},
+		} as DOMRect);
+
+		await act(async () => {
+			renderWithTheme(<HeadingsOverlay headingFilter="h1" />);
+		});
+
+		expect(screen.getByText("H1")).toBeTruthy();
+		expect(screen.queryByText("H2")).toBeNull();
+	});
+});

package/src/components/Browser/index.tsx

@@ -1,20 +1,36 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import type { IShareData } from "@ax/api";
 import { shareToken as shareTokenApi } from "@ax/api";
-import { OcassionalToast } from "@ax/components";
+import { BrowserContent, Icon, OcassionalToast, Select, SharePageModal, Toast, Tooltip } from "@ax/components";
 import { findByEditorID } from "@ax/forms";
 import { DEV_NOW, getShareTokenInfo } from "@ax/helpers";
 import { useModal, useOnMessageReceivedFromIframe, useToast } from "@ax/hooks";
+import type { HeadingFilter } from "@ax/types";
 
-import BrowserContent from "../BrowserContent";
-import Icon from "../Icon";
-import SharePageModal from "../SharePageModal";
-import Toast from "../Toast";
-import Tooltip from "../Tooltip";
+import { calcAutoZoom, calcDefaultResolution } from "./utils";
 
 import * as S from "./style";
 
+const DEFAULT_RESOLUTION = "1280px";
+
+const resolutionOptions = [
+	{ value: "1920px", label: "1920px" },
+	{ value: "1440px", label: "1440px" },
+	{ value: "1280px", label: "1280px" },
+	{ value: "1024px", label: "1024px" },
+	{ value: "768px", label: "768px" },
+	{ value: "360px", label: "360px" },
+];
+
+const zoomOptions = [
+	{ value: "reset", label: "Reset" },
+	{ value: "100", label: "100%" },
+	{ value: "75", label: "75%" },
+	{ value: "50", label: "50%" },
+	{ value: "25", label: "25%" },
+];
+
 const Browser = (props: IBrowserProps): JSX.Element => {
 	const {
 		url,
@@ -33,15 +49,27 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		browserRef,
 		actions,
 		editorType = "page",
+		headingFilter,
+		keywordsFilter,
+		toggleHeadingsPreview,
+		toggleKeywordsPreview,
 	} = props;
 
 	const { id, entity, haveDraftPage } = content;
 	const domain = window.location.origin;
-	const urlPreview = `${domain}/editor/page-preview?preview=${!!isPreview}&disabled=${!!disabled}&type=${editorType}`;
+	const headingFilterParam = !headingFilter || headingFilter === "all" ? "" : `&headingFilter=${headingFilter}`;
+	const keywordsFilterParam = !keywordsFilter || !keywordsFilter.length ? "" : `&keywordFilter=${keywordsFilter}`;
 	const isPageEditor = editorType === "page";
 	const isFormEditor = editorType === "form";
+	const isHeadingsEditor = editorType === "headings";
+	const isKeywordsEditor = editorType === "keywords";
 
-	const [resolution, setResolution] = useState("desktop");
+	const frameWrapperRef = useRef<HTMLDivElement>(null);
+
+	const [previewResolution, setPreviewResolution] = useState("desktop");
+	const [dimensions, setDimensions] = useState({ resolution: DEFAULT_RESOLUTION, zoom: "100" });
+
+	const urlPreview = `${domain}/editor/page-preview?preview=${!!isPreview}&disabled=${!!disabled}&type=${editorType}${headingFilterParam}${keywordsFilterParam}`;
 	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
 	const { isOpen: isShareOpen, toggleModal: toggleSharePageModal } = useModal(false, true);
 	const [shareData, setShareData] = useState<IShareData | null>(null);
@@ -53,6 +81,24 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 	useEffect(() => {
 		localStorage.setItem("selectedID", "0");
 		(window as any).browserRef = null;
+
+		const el = frameWrapperRef.current;
+		if (!el) return;
+
+		let lastWidth = 0;
+		const observer = new ResizeObserver(([entry]) => {
+			const containerWidth = entry.contentRect.width;
+			if (containerWidth > 0 && Math.abs(containerWidth - lastWidth) > 20) {
+				lastWidth = containerWidth;
+				const resolution = calcDefaultResolution(containerWidth, resolutionOptions);
+				const newZoom = calcAutoZoom(containerWidth, resolution);
+				setDimensions({ resolution, zoom: newZoom });
+			}
+		});
+
+		observer.observe(el);
+
+		return () => observer.disconnect();
 	}, []);
 
 	// Fetch share data when in preview mode
@@ -85,159 +131,254 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		}
 	};
 
-	const deleteModuleSelected = (editorID: number) => {
-		actions?.setSelectedContentAction(0);
-		actions?.deleteModuleAction?.([editorID]);
-	};
+	const getWidth = (res: string) => {
+		if (!isPreview) return dimensions.resolution;
 
-	const duplicateModuleSelected = (editorID: number) => {
-		const duplicatedEditorID = actions?.duplicateModuleAction?.([editorID]);
-		duplicatedEditorID && actions?.setSelectedContentAction(duplicatedEditorID);
+		switch (res) {
+			case "tablet":
+				return "768px";
+			case "phone":
+				return "425px";
+			default:
+				return "100%";
+		}
 	};
 
-	const copyModuleSelected = (editorID: number) => {
-		const isCopied = actions?.copyModuleAction?.([editorID]);
-		isCopied && toggleToast("1 module copied to clipboard");
+	const moduleActions = useMemo(
+		() => ({
+			deleteModuleAction: (editorID: number) => {
+				actions?.setSelectedContentAction(0);
+				actions?.deleteModuleAction?.([editorID]);
+			},
+			duplicateModuleAction: (editorID: number) => {
+				const duplicatedEditorID = actions?.duplicateModuleAction?.([editorID]);
+				duplicatedEditorID && actions?.setSelectedContentAction(duplicatedEditorID);
+			},
+			copyModuleAction: (editorID: number) => {
+				const isCopied = actions?.copyModuleAction?.([editorID]);
+				isCopied && toggleToast("1 module copied to clipboard");
+			},
+		}),
+		[actions, toggleToast],
+	);
+
+	const maxFittingZoom = parseInt(calcAutoZoom(frameWrapperRef.current?.clientWidth ?? 0, dimensions.resolution));
+	const zoomOptionsWithDisabled = useMemo(() => {
+		const isCurrentZoomInOptions = zoomOptions.some((opt) => opt.value === dimensions.zoom);
+		return [
+			...(!isCurrentZoomInOptions ? [{ value: dimensions.zoom, label: `${dimensions.zoom}%` }] : []),
+			...zoomOptions.map((option) => ({
+				...option,
+				isDisabled: option.value === "reset" ? !isCurrentZoomInOptions : parseInt(option.value) > maxFittingZoom,
+			})),
+		];
+	}, [dimensions.zoom, maxFittingZoom]);
+
+	const handleResolutionChange = (resolution: string) => {
+		const containerWidth = frameWrapperRef.current?.clientWidth ?? 0;
+		setDimensions({ resolution, zoom: calcAutoZoom(containerWidth, resolution) });
 	};
 
-	const moduleActions = {
-		deleteModuleAction: deleteModuleSelected,
-		duplicateModuleAction: duplicateModuleSelected,
-		copyModuleAction: copyModuleSelected,
+	const handleZoomChange = (zoom: string) => {
+		if (zoom === "reset") {
+			const containerWidth = frameWrapperRef.current?.clientWidth ?? 0;
+			setDimensions((prev) => ({ ...prev, zoom: calcAutoZoom(containerWidth, prev.resolution) }));
+		} else {
+			setDimensions((prev) => ({ ...prev, zoom }));
+		}
 	};
 
+	const scaledWidth = !isPreview
+		? Math.floor(parseInt(dimensions.resolution) * (parseInt(dimensions.zoom) / 100))
+		: undefined;
+
+	const isCompact = scaledWidth !== undefined && scaledWidth <= 400;
+	const floatingNoteConfig = isHeadingsEditor
+		? { label: "Headings", onClick: toggleHeadingsPreview }
+		: isKeywordsEditor
+			? { label: "Keywords", onClick: toggleKeywordsPreview }
+			: null;
+
 	return (
-		<S.BrowserWrapper data-testid="browser-wrapper" ref={browserRef}>
-			{isPageEditor && (
-				<S.NavBar>
-					<S.NavUrl>{url}</S.NavUrl>
-					{isPreview && (
-						<S.NavActions data-testid="nav-actions-wrapper">
-							<S.IconWrapper
-								data-testid="icon-wrapper-browser"
-								onClick={haveDraftPage ? undefined : toggleSharePageModal}
-								active={!haveDraftPage}
-							>
-								<Tooltip
-									hideOnClick={!haveDraftPage}
-									content={
-										haveDraftPage ? "Only available for drafts. This page already has a public URL." : "Share draft"
-									}
-									bottom
+		<S.OuterContainer ref={frameWrapperRef}>
+			<S.BrowserWrapper data-testid="browser-wrapper" ref={browserRef} scaledWidth={scaledWidth} isPreview={isPreview}>
+				{(isPageEditor || isHeadingsEditor || isKeywordsEditor) && (
+					<S.NavBar>
+						<S.NavUrl>{url}</S.NavUrl>
+						{isPreview ? (
+							<S.NavActions data-testid="nav-actions-wrapper">
+								<S.IconWrapper
+									data-testid="icon-wrapper-browser"
+									onClick={haveDraftPage ? undefined : toggleSharePageModal}
+									active={!haveDraftPage}
 								>
-									<Icon name="share" size="24" />
-								</Tooltip>
-							</S.IconWrapper>
-							<S.IconWrapper active={resolution === "desktop"} onClick={() => setResolution("desktop")}>
-								<Tooltip content="Desktop" bottom>
-									<Icon name="desktop" size="24" />
-								</Tooltip>
-							</S.IconWrapper>
-							<S.IconWrapper
-								data-testid="icon-res-tablet"
-								active={resolution === "tablet"}
-								onClick={() => setResolution("tablet")}
-							>
-								<Tooltip content="Tablet" bottom>
-									<Icon name="tablet" size="24" />
-								</Tooltip>
-							</S.IconWrapper>
-							<S.IconWrapper
-								data-testid="icon-res-phone"
-								active={resolution === "phone"}
-								onClick={() => setResolution("phone")}
-							>
-								<Tooltip content="Mobile" bottom>
-									<Icon name="phone" size="24" />
-								</Tooltip>
-							</S.IconWrapper>
-						</S.NavActions>
-					)}
-				</S.NavBar>
-			)}
-
-			{showIframe ? (
-				<S.FrameWrapper hasBorder={isPageEditor} isFormEditor={isFormEditor} data-testid="navbar-iframe-wrapper">
-					<iframe
-						title="Preview"
-						width={getWidth(resolution)}
-						height="100%"
-						src={urlPreview}
-						loading="lazy"
-						className="frame-content"
+									<Tooltip
+										hideOnClick={!haveDraftPage}
+										content={
+											haveDraftPage ? "Only available for drafts. This page already has a public URL." : "Share draft"
+										}
+										bottom
+									>
+										<Icon name="share" size="24" />
+									</Tooltip>
+								</S.IconWrapper>
+								<S.IconWrapper active={previewResolution === "desktop"} onClick={() => setPreviewResolution("desktop")}>
+									<Tooltip content="Desktop" bottom>
+										<Icon name="desktop" size="24" />
+									</Tooltip>
+								</S.IconWrapper>
+								<S.IconWrapper
+									data-testid="icon-res-tablet"
+									active={previewResolution === "tablet"}
+									onClick={() => setPreviewResolution("tablet")}
+								>
+									<Tooltip content="Tablet" bottom>
+										<Icon name="tablet" size="24" />
+									</Tooltip>
+								</S.IconWrapper>
+								<S.IconWrapper
+									data-testid="icon-res-phone"
+									active={previewResolution === "phone"}
+									onClick={() => setPreviewResolution("phone")}
+								>
+									<Tooltip content="Mobile" bottom>
+										<Icon name="phone" size="24" />
+									</Tooltip>
+								</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>
+						)}
+					</S.NavBar>
+				)}
+				{showIframe ? (
+					<S.ContentWrapper>
+						{floatingNoteConfig && (
+							<S.StyledFloatingNote
+								message={`You are viewing the ${floatingNoteConfig.label} editor${isCompact ? "" : " of this page"}`}
+								btnText={isCompact ? "Back" : "Back to Page Editor"}
+								onClick={floatingNoteConfig.onClick}
+								$compact={isCompact}
+							/>
+						)}
+						<S.FrameWrapper
+							hasBorder={isPageEditor || isHeadingsEditor || isKeywordsEditor}
+							isFormEditor={isFormEditor}
+							data-testid="navbar-iframe-wrapper"
+						>
+							{isPreview ? (
+								<iframe
+									title="Preview"
+									width={getWidth(previewResolution)}
+									height="100%"
+									src={urlPreview}
+									loading="lazy"
+									className="frame-content"
+								/>
+							) : (
+								<div
+									style={{
+										width: `${scaledWidth}px`,
+										height: "100%",
+										overflow: "hidden",
+										flexShrink: 0,
+									}}
+								>
+									<iframe
+										title="Preview"
+										width={dimensions.resolution}
+										src={urlPreview}
+										loading="lazy"
+										className="frame-content"
+										style={{
+											display: "block",
+											transform: `scale(${parseInt(dimensions.zoom) / 100})`,
+											transformOrigin: "0 0",
+											height: `${Math.round(100 / (parseInt(dimensions.zoom) / 100))}%`,
+										}}
+									/>
+								</div>
+							)}
+						</S.FrameWrapper>
+					</S.ContentWrapper>
+				) : (
+					<S.Wrapper data-testid="browser-content-wrapper" className="browser-content">
+						<BrowserContent
+							cloudinaryName={cloudinaryName}
+							theme={theme}
+							socials={socials}
+							siteLangs={siteLangs}
+							selectEditorID={selectEditorID}
+							siteID={siteID}
+							isPage={isPage}
+							content={content}
+							header={header}
+							footer={footer}
+							languageID={content.language}
+							pageLanguages={content.pageLanguages}
+							moduleActions={moduleActions}
+							renderer="editor"
+						/>
+					</S.Wrapper>
+				)}
+				{isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
+				{isPreview && shareData && tokenInfo && (
+					<OcassionalToast
+						message={
+							<>
+								{tokenInfo.tokenHasExpired
+									? `Access to this draft link expired on ${tokenInfo.tokenExpirationDate}. You need to generate a `
+									: `This draft link expires on ${tokenInfo.tokenExpirationDate}. ${tokenInfo.tokenCanBeRenewed ? "Renew it" : "Open details"}${" "}`}
+								<button type="button" onClick={toggleSharePageModal}>
+									<strong style={{ textDecoration: "underline" }}>
+										{tokenInfo.tokenHasExpired ? "new one" : "here"}
+									</strong>
+								</button>
+							</>
+						}
+						icon={tokenInfo.tokenHasExpired ? "hide" : "view"}
 					/>
-				</S.FrameWrapper>
-			) : (
-				<S.Wrapper
-					data-testid="browser-content-wrapper"
-					// biome-ignore lint/suspicious/noAssignInExpressions: TODO: fix this
-					ref={(ref: any) => ((window as any).browserRef = ref)}
-					className="browser-content"
-				>
-					<BrowserContent
-						cloudinaryName={cloudinaryName}
-						theme={theme}
-						socials={socials}
-						siteLangs={siteLangs}
-						selectEditorID={selectEditorID}
-						siteID={siteID}
-						isPage={isPage}
-						content={content}
-						header={header}
-						footer={footer}
-						languageID={content.language}
-						pageLanguages={content.pageLanguages}
-						moduleActions={moduleActions}
-						renderer="editor"
+				)}
+
+				{isPreview && (
+					<SharePageModal
+						pageTitle={content.title}
+						isOpen={isShareOpen}
+						hide={toggleSharePageModal}
+						pageID={id}
+						entity={entity}
+						shareData={shareData}
+						onShareChange={setShareData}
 					/>
-				</S.Wrapper>
-			)}
-
-			{isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
-
-			{isPreview && shareData && tokenInfo && (
-				<OcassionalToast
-					message={
-						<>
-							{tokenInfo.tokenHasExpired
-								? `Access to this draft link expired on ${tokenInfo.tokenExpirationDate}. You need to generate a `
-								: `This draft link expires on ${tokenInfo.tokenExpirationDate}. ${tokenInfo.tokenCanBeRenewed ? "Renew it" : "Open details"}${" "}`}
-							<button type="button" onClick={toggleSharePageModal}>
-								<strong style={{ textDecoration: "underline" }}>
-									{tokenInfo.tokenHasExpired ? "new one" : "here"}
-								</strong>
-							</button>
-						</>
-					}
-					icon={tokenInfo.tokenHasExpired ? "hide" : "view"}
-				/>
-			)}
-
-			{isPreview && (
-				<SharePageModal
-					pageTitle={content.title}
-					isOpen={isShareOpen}
-					hide={toggleSharePageModal}
-					pageID={id}
-					entity={entity}
-					shareData={shareData}
-					onShareChange={setShareData}
-				/>
-			)}
-		</S.BrowserWrapper>
+				)}
+			</S.BrowserWrapper>
+		</S.OuterContainer>
 	);
 };
 
-function getWidth(res: string) {
-	switch (res) {
-		case "tablet":
-			return "768px";
-		case "phone":
-			return "425px";
-		default:
-			return "100%";
-	}
-}
 export interface IBrowserProps {
 	content: any;
 	header?: any;
@@ -253,7 +394,11 @@ export interface IBrowserProps {
 	isPreview?: boolean;
 	showIframe?: boolean;
 	browserRef?: React.RefObject<HTMLDivElement>;
-	editorType?: "form" | "page";
+	editorType?: "form" | "page" | "headings" | "keywords";
+	headingFilter?: HeadingFilter;
+	keywordsFilter?: string[];
+	toggleHeadingsPreview?(): void;
+	toggleKeywordsPreview?(): void;
 	actions?: {
 		setSelectedContentAction(editorID: number): void;
 		deleteModuleAction?(editorID: number[]): void;