@griddo/ax 11.12.0 → 11.12.1-rc.0

package/src/modules/GlobalEditor/index.tsx

@@ -7,6 +7,8 @@ import {
 	CancelScheduleModal,
 	ErrorPage,
 	ErrorToast,
+	HeadingsPreviewModal,
+	KeywordsPreviewModal,
 	Loading,
 	MainWrapper,
 	Modal,
@@ -23,8 +25,9 @@ import { structuredDataActions } from "@ax/containers/StructuredData";
 import { usersActions } from "@ax/containers/Users";
 import { RouteLeavingGuard } from "@ax/guards";
 import { dateToString, getDefaultTheme } from "@ax/helpers";
-import { useIsDirty, useModal, usePermission } from "@ax/hooks";
+import { useIsDirty, useModals, usePermissions } from "@ax/hooks";
 import type {
+	HeadingFilter,
 	IErrorItem,
 	ILanguage,
 	INotification,
@@ -67,35 +70,46 @@ const GlobalEditor = (props: IProps) => {
 		getUserCurrentPermissions,
 		schedulePublication,
 		restorePage,
+		updateEditorContent,
 		schemaVersion,
 	} = props;
 
-	const isAllowedToPublishPages = usePermission("global.globalData.publishUnpublishAllGlobalData");
-	const isAllowedToCreatePages = usePermission("global.globalData.createAllGlobalData");
-	const isAllowedToDeletePage = usePermission("global.globalData.deleteAllGlobalData");
-	const isAllowedToEditContentPage = usePermission("global.globalData.editAllGlobalData");
-	//
-	const defaultTab = isAllowedToEditContentPage ? "edit" : "view";
+	const isAllowedTo = usePermissions({
+		publishPages: "global.globalData.publishUnpublishAllGlobalData",
+		createPages: "global.globalData.createAllGlobalData",
+		deletePages: "global.globalData.deleteAllGlobalData",
+		editContentPages: "global.globalData.editAllGlobalData",
+	});
+
+	const defaultTab = isAllowedTo.editContentPages ? "edit" : "view";
 
-	const { isOpen, toggleModal } = useModal();
-	const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
 	const [isReadOnly, setIsReadOnly] = useState(false);
 	const [selectedTab, setSelectedTab] = useState(defaultTab);
 	const [notification, setNotification] = useState<INotification | null>(null);
 	const [toastMsg, setToastMsg] = useState<string | null>(null);
-	const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
 	const [errorPagesChecked, setErrorPagesChecked] = useState(false);
+	const [headingsFilter, setHeadingsFilter] = useState<HeadingFilter>("all");
+	const [keywordsFilter, setKeywordsFilter] = useState<string[]>([]);
 	const [scheduleDate, setScheduleDate] = useState({
 		date: dateToString(new Date(), "yyy/MM/dd"),
 		time: "12:00 am",
 	});
-	const { isOpen: isScheduleOpen, toggleModal: toggleScheduleModal } = useModal();
-	const { isOpen: isCancelScheduleOpen, toggleModal: toggleCancelScheduleModal } = useModal();
-	const { isOpen: isRestoreOpen, toggleModal: toggleRestoreModal } = useModal();
-	const { isOpen: isDirtyNavigateOpen, toggleModal: toggleDirtyNavigateModal } = useModal();
 	const [pendingNavigateCallback, setPendingNavigateCallback] = useState<(() => void) | null>(null);
 	const browserRef = useRef<HTMLDivElement>(null);
 
+	const { isOpen, toggleModal } = useModals([
+		"userEditing",
+		"unpublish",
+		"schedule",
+		"cancelSchedule",
+		"restore",
+		"headingsPreview",
+		"keywordsPreview",
+		"dirtyNavigate",
+	]);
+
+	const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
+
 	const isPublished = props.pageStatus === pageStatus.PUBLISHED || props.pageStatus === pageStatus.UPLOAD_PENDING;
 	const isDraft = props.pageStatus === pageStatus.MODIFIED || !!editorContent.draftFromPage;
 	const hasDraft: boolean = editorContent && !!editorContent.haveDraftPage;
@@ -104,6 +118,7 @@ const GlobalEditor = (props: IProps) => {
 	const isEditLive = isPublished && hasDraft;
 	const isScheduled = props.pageStatus === pageStatus.SCHEDULED;
 	const isDeleted = editorContent.deleted;
+	const defaultContentTab = "content";
 
 	const errorNotificationText =
 		"There are some errors on the page so you can not publish yet. Please review them in the error panel.";
@@ -122,12 +137,11 @@ const GlobalEditor = (props: IProps) => {
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		const { pageID, getPage, setTab, sendPagePing, setStructuredDataFilter } = props;
+		const { pageID, getPage, sendPagePing, setStructuredDataFilter } = props;
 
 		editorContent?.structuredData && setStructuredDataFilter(editorContent.structuredData);
-		const defaultTab = "content";
 		const handleGetPage = async () => await getPage(pageID, true);
-		setTab(defaultTab);
+		setTab(defaultContentTab);
 		setToastMsg(null);
 		handleGetPage();
 		if (!pageID) {
@@ -150,11 +164,11 @@ const GlobalEditor = (props: IProps) => {
 		const { pageID, sendPagePing, currentUserID } = props;
 		if (userEditing && userEditing.id !== currentUserID) {
 			setIsReadOnly(true);
-			!isOpen && toggleModal();
+			!isOpen("userEditing") && toggleModal("userEditing");
 		} else {
 			setIsReadOnly(false);
 			pageID && sendPagePing(pageID);
-			isOpen && toggleModal();
+			isOpen("userEditing") && toggleModal("userEditing");
 		}
 	}, [userEditing]);
 
@@ -280,7 +294,7 @@ const GlobalEditor = (props: IProps) => {
 		const saved = await schedulePublication(dateString, isDraft);
 		if (saved) {
 			resetDirty();
-			toggleScheduleModal();
+			toggleModal("schedule");
 		}
 	};
 
@@ -289,7 +303,7 @@ const GlobalEditor = (props: IProps) => {
 		if (saved) {
 			setScheduleDate({ date: "", time: "12:00 am" });
 			resetDirty();
-			toggleCancelScheduleModal();
+			toggleModal("cancelSchedule");
 		}
 	};
 
@@ -310,7 +324,7 @@ const GlobalEditor = (props: IProps) => {
 						}
 					: {
 							label: status === pageStatus.UPLOAD_PENDING ? "Cancel publication" : "Unpublish",
-							action: hasDraft ? toggleUnpublishModal : unpublishPage,
+							action: hasDraft ? () => toggleModal("unpublish") : unpublishPage,
 						};
 			case pageStatus.MODIFIED:
 			case pageStatus.SCHEDULED:
@@ -325,24 +339,24 @@ const GlobalEditor = (props: IProps) => {
 
 	const menuOptions = [];
 
-	if (isAllowedToPublishPages && !isScheduled && !isPublished && props.pageStatus !== pageStatus.OFFLINE_PENDING) {
+	if (isAllowedTo.publishPages && !isScheduled && !isPublished && props.pageStatus !== pageStatus.OFFLINE_PENDING) {
 		menuOptions.push({
 			label: "Schedule",
 			icon: "calendar",
-			action: toggleScheduleModal,
+			action: () => toggleModal("schedule"),
 		});
 	}
 
-	if (isAllowedToPublishPages && isScheduled) {
+	if (isAllowedTo.publishPages && isScheduled) {
 		menuOptions.push({
 			label: "Cancel Schedule",
 			icon: "cancelEvent",
-			action: toggleCancelScheduleModal,
+			action: () => toggleModal("cancelSchedule"),
 		});
 	}
 
 	if (
-		isAllowedToEditContentPage &&
+		isAllowedTo.editContentPages &&
 		(props.pageStatus === pageStatus.PUBLISHED ||
 			props.pageStatus === pageStatus.OFFLINE ||
 			props.pageStatus === pageStatus.OFFLINE_PENDING ||
@@ -356,7 +370,7 @@ const GlobalEditor = (props: IProps) => {
 		});
 	}
 
-	if (isAllowedToEditContentPage && !isScheduled && (isDraft || (isPublished && isDirty))) {
+	if (isAllowedTo.editContentPages && !isScheduled && (isDraft || (isPublished && isDirty))) {
 		menuOptions.push({
 			label: "Discard changes",
 			icon: "close",
@@ -364,15 +378,15 @@ const GlobalEditor = (props: IProps) => {
 		});
 	}
 
-	if (props.pageStatus === pageStatus.PUBLISHED && !hasDraft && isDirty && isAllowedToPublishPages) {
+	if (props.pageStatus === pageStatus.PUBLISHED && !hasDraft && isDirty && isAllowedTo.publishPages) {
 		menuOptions.push({
 			label: "Unpublish",
 			icon: "offline",
-			action: isDraft ? toggleUnpublishModal : unpublishPage,
+			action: isDraft ? () => toggleModal("unpublish") : unpublishPage,
 		});
 	}
 
-	if (!isDraft && isAllowedToDeletePage) {
+	if (!isDraft && isAllowedTo.deletePages) {
 		menuOptions.push({
 			label: "Delete page",
 			icon: "delete",
@@ -382,7 +396,7 @@ const GlobalEditor = (props: IProps) => {
 
 	const downArrowMenu = {
 		displayed: !isReadOnly && !isDeleted,
-		button: isAllowedToPublishPages ? getPublishButton(props.pageStatus) : undefined,
+		button: isAllowedTo.publishPages ? getPublishButton(props.pageStatus) : undefined,
 		options: menuOptions,
 	};
 
@@ -430,7 +444,7 @@ const GlobalEditor = (props: IProps) => {
 		}
 	};
 
-	const rightButtonProps = isAllowedToEditContentPage
+	const rightButtonProps = isAllowedTo.editContentPages
 		? {
 				label: isSaving ? "Saving" : getSaveLabel(),
 				disabled: (!isDirty && pageID !== null && !isNewTranslation) || isSaving || isReadOnly,
@@ -462,11 +476,11 @@ const GlobalEditor = (props: IProps) => {
 
 	const onNavigateWithDirty = (navigateCallback: () => void) => {
 		setPendingNavigateCallback(() => navigateCallback);
-		toggleDirtyNavigateModal();
+		toggleModal("dirtyNavigate");
 	};
 
 	const handleConfirmDirtyNavigation = () => {
-		toggleDirtyNavigateModal();
+		toggleModal("dirtyNavigate");
 		if (pendingNavigateCallback) {
 			pendingNavigateCallback();
 			setPendingNavigateCallback(null);
@@ -474,7 +488,7 @@ const GlobalEditor = (props: IProps) => {
 	};
 
 	const handleCancelDirtyNavigation = () => {
-		toggleDirtyNavigateModal();
+		toggleModal("dirtyNavigate");
 		setPendingNavigateCallback(null);
 	};
 
@@ -518,7 +532,7 @@ const GlobalEditor = (props: IProps) => {
 	const mainAction = { title: "Preview Page", onClick: toggleModal };
 	const secondaryAction = { title: "Ok, go back", onClick: handleGoBack };
 
-	const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
+	const mainUnpublishAction = { title: "Ok", onClick: () => toggleModal("unpublish") };
 
 	const mainScheduleModalAction = {
 		title: "Schedule",
@@ -527,7 +541,7 @@ const GlobalEditor = (props: IProps) => {
 
 	const secondaryScheduleModalAction = {
 		title: "Cancel",
-		onClick: toggleScheduleModal,
+		onClick: () => toggleModal("schedule"),
 	};
 
 	const mainCancelScheduleModalAction = {
@@ -537,10 +551,10 @@ const GlobalEditor = (props: IProps) => {
 
 	const secondaryCancelScheduleModalAction = {
 		title: "Back",
-		onClick: toggleCancelScheduleModal,
+		onClick: () => toggleModal("cancelSchedule"),
 	};
 
-	const tabIcons = isAllowedToEditContentPage
+	const tabIcons = isAllowedTo.editContentPages
 		? [
 				{ name: "edit", text: "Edit mode" },
 				{ name: "view", text: "Preview mode" },
@@ -558,6 +572,7 @@ const GlobalEditor = (props: IProps) => {
 		icons: tabIcons,
 		selectedTab,
 		action: (tab: string) => handleSelectedTab(tab),
+		disabled: isOpen("headingsPreview") || isOpen("keywordsPreview"),
 	};
 
 	const filteredLanguages = globalLangs.filter((lang) =>
@@ -587,7 +602,7 @@ const GlobalEditor = (props: IProps) => {
 			await getPage(selectedPageLanguage.pageId, true, isDraft);
 			resetDirty();
 		} else {
-			isAllowedToEditContentPage && setSelectedTab("edit");
+			isAllowedTo.editContentPages && setSelectedTab("edit");
 			createNewTranslation(true);
 			await getPage(pageID, true);
 		}
@@ -596,11 +611,33 @@ const GlobalEditor = (props: IProps) => {
 	const handleRestorePage = async () => {
 		const isRestored = await restorePage(pageID);
 		if (isRestored) {
-			isRestoreOpen && toggleRestoreModal();
+			isOpen("restore") && toggleModal("restore");
 			await getPage(pageID);
 		}
 	};
 
+	const handleAddKeywords = (newKeywords: string[]) => {
+		const keywords: string[] = [...editorContent.metaKeywords, ...newKeywords];
+		updateEditorContent(0, "metaKeywords", keywords);
+		handleSavePage();
+	};
+
+	const handledeleteKeyword = (keyword: string) => {
+		const newKeywords = (editorContent.metaKeywords as string[]).filter((key) => key !== keyword);
+		updateEditorContent(0, "metaKeywords", newKeywords);
+		handleSavePage();
+	};
+
+	const handleToggleHeadingsEditor = () => {
+		toggleModal("headingsPreview");
+		setTab(defaultContentTab);
+	};
+
+	const handleToggleKeywordsEditor = () => {
+		toggleModal("keywordsPreview");
+		setTab(defaultContentTab);
+	};
+
 	return isLoading ? (
 		<Loading />
 	) : (
@@ -616,7 +653,7 @@ const GlobalEditor = (props: IProps) => {
 				pageStatus={props.pageStatus}
 				language={lang}
 				languageAction={handleLanguage}
-				availableLanguages={isAllowedToCreatePages && !isDeleted ? globalLangs : filteredLanguages}
+				availableLanguages={isAllowedTo.createPages && !isDeleted ? globalLangs : filteredLanguages}
 				currentLanguages={contentLanguages}
 				currentPageID={pageID}
 				fullWidth={true}
@@ -643,7 +680,7 @@ const GlobalEditor = (props: IProps) => {
 									type="error"
 									text={deletedNotificationText}
 									btnText="Restore page"
-									onClick={toggleRestoreModal}
+									onClick={() => toggleModal("restore")}
 								/>
 							</S.NotificationWrapper>
 						)}
@@ -674,6 +711,12 @@ const GlobalEditor = (props: IProps) => {
 								setNotification={setNotification}
 								isEditLive={isEditLive}
 								isDisabled={isDeleted}
+								toggleHeadingsPreview={handleToggleHeadingsEditor}
+								isHeadingsPreviewOpen={isOpen("headingsPreview")}
+								headingsFilter={headingsFilter}
+								toggleKeywordsPreview={handleToggleKeywordsEditor}
+								isKeywordsPreviewOpen={isOpen("keywordsPreview")}
+								keywordsFilter={keywordsFilter}
 							/>
 						</S.Content>
 					</>
@@ -684,14 +727,14 @@ const GlobalEditor = (props: IProps) => {
 					</>
 				)}
 				<Modal
-					isOpen={isOpen}
-					hide={toggleModal}
+					isOpen={isOpen("userEditing")}
+					hide={() => toggleModal("userEditing")}
 					size="S"
 					title="This page is currently being edited"
 					mainAction={mainAction}
 					secondaryAction={secondaryAction}
 				>
-					{isOpen && (
+					{isOpen("userEditing") && (
 						<S.ModalContent>
 							<p>
 								<strong>{userEditing?.name}</strong> is currently working on this page. You can preview the page but{" "}
@@ -701,13 +744,13 @@ const GlobalEditor = (props: IProps) => {
 					)}
 				</Modal>
 				<Modal
-					isOpen={isUnpublishOpen}
-					hide={toggleUnpublishModal}
+					isOpen={isOpen("unpublish")}
+					hide={() => toggleModal("unpublish")}
 					size="S"
 					title="Unpublish Modified Page"
 					mainAction={mainUnpublishAction}
 				>
-					{isUnpublishOpen && (
+					{isOpen("unpublish") && (
 						<S.ModalContent>
 							<p>
 								There are some saved changes that are not published on this page. To Unpublish this page,{" "}
@@ -717,31 +760,48 @@ const GlobalEditor = (props: IProps) => {
 					)}
 				</Modal>
 				<ScheduleModal
-					isOpen={isScheduleOpen}
-					toggleModal={toggleScheduleModal}
+					isOpen={isOpen("schedule")}
+					toggleModal={() => toggleModal("schedule")}
 					mainModalAction={mainScheduleModalAction}
 					secondaryModalAction={secondaryScheduleModalAction}
 					scheduleDate={scheduleDate}
 					setScheduleDate={setScheduleDate}
 				/>
 				<CancelScheduleModal
-					isOpen={isCancelScheduleOpen}
-					toggleModal={toggleCancelScheduleModal}
+					isOpen={isOpen("cancelSchedule")}
+					toggleModal={() => toggleModal("cancelSchedule")}
 					mainModalAction={mainCancelScheduleModalAction}
 					secondaryModalAction={secondaryCancelScheduleModalAction}
 				/>
 				<RestoreModal
-					isOpen={isRestoreOpen}
-					toggleModal={toggleRestoreModal}
+					isOpen={isOpen("restore")}
+					toggleModal={() => toggleModal("restore")}
 					{...{
 						isChild: false,
 						hasIssues: schemaVersion !== editorContent.schemaVersionTimestamp,
 						restorePage: handleRestorePage,
 					}}
 				/>
+				<HeadingsPreviewModal
+					isOpen={isOpen("headingsPreview")}
+					toggleModal={handleToggleHeadingsEditor}
+					browserRef={browserRef}
+					headingsFilter={headingsFilter}
+					setHeadingsFilter={setHeadingsFilter}
+				/>
+				<KeywordsPreviewModal
+					isOpen={isOpen("keywordsPreview")}
+					toggleModal={handleToggleKeywordsEditor}
+					browserRef={browserRef}
+					keywords={editorContent?.metaKeywords || []}
+					keywordsFilter={keywordsFilter}
+					setKeywordsFilter={setKeywordsFilter}
+					addKeywords={handleAddKeywords}
+					deleteKeyword={handledeleteKeyword}
+				/>
 			</MainWrapper>
 			<Modal
-				isOpen={isDirtyNavigateOpen}
+				isOpen={isOpen("dirtyNavigate")}
 				hide={handleCancelDirtyNavigation}
 				size="S"
 				title="Unsaved changes"
@@ -818,6 +878,7 @@ const mapDispatchToProps = {
 	getUserCurrentPermissions: usersActions.getUserCurrentPermissions,
 	schedulePublication: pageEditorActions.schedulePublication,
 	restorePage: pageEditorActions.restorePage,
+	updateEditorContent: pageEditorActions.updateEditorContent,
 };
 
 interface IPageEditorDispatchProps {
@@ -844,6 +905,7 @@ interface IPageEditorDispatchProps {
 	getUserCurrentPermissions(): Promise<void>;
 	schedulePublication(date: string | null, isDraft: boolean): Promise<boolean>;
 	restorePage(id: number | number[]): Promise<boolean>;
+	updateEditorContent(selectedEditorID: number, key: string, value: any): void;
 }
 
 type IProps = IPageEditorStateProps & IPageEditorDispatchProps & RouteComponentProps;

package/src/modules/PageEditor/Editor/index.tsx

@@ -4,7 +4,17 @@ import { pageEditorActions } from "@ax/containers/PageEditor";
 import { sitesActions } from "@ax/containers/Sites";
 import { appActions } from "@ax/containers/App";
 import { ConfigPanel, ResizePanel } from "@ax/components";
-import type { IBreadcrumbItem, IModule, INotification, IRootState, ISchema, ISite, IUserEditing } from "@ax/types";
+import type {
+	HeadingFilter,
+	IBreadcrumbItem,
+	IModule,
+	INotification,
+	IRootState,
+	ISchema,
+	ISite,
+	IUserEditing,
+} from "@ax/types";
+
 import PageBrowser from "../PageBrowser";
 
 const Editor = (props: IProps) => {
@@ -40,9 +50,15 @@ const Editor = (props: IProps) => {
 		pasteModule,
 		setNotification,
 		restorePageNavigation,
+		toggleHeadingsPreview,
+		toggleKeywordsPreview,
 		content,
 		isEditLive,
 		isDisabled,
+		isHeadingsPreviewOpen,
+		headingsFilter,
+		isKeywordsPreviewOpen,
+		keywordsFilter,
 		isDirty,
 		onNavigateWithDirty,
 	} = props;
@@ -68,15 +84,24 @@ const Editor = (props: IProps) => {
 		pasteModuleAction: pasteModule,
 		setNotificationAction: setNotification,
 		restorePageNavigationAction: restorePageNavigation,
+		toggleHeadingsPreviewAction: toggleHeadingsPreview,
+		toggleKeywordsPreviewAction: toggleKeywordsPreview,
 	};
 
 	return (
 		<ResizePanel
+			disabled={isHeadingsPreviewOpen || isKeywordsPreviewOpen}
 			leftPanel={
 				<PageBrowser
 					isTemplateActivated={isTemplateActivated}
 					isReadOnly={isReadOnly || isEditLive || isDisabled}
 					browserRef={browserRef}
+					isHeadingsPreviewOpen={isHeadingsPreviewOpen}
+					toggleHeadingsPreview={toggleHeadingsPreview}
+					headingsFilter={headingsFilter}
+					toggleKeywordsPreview={toggleKeywordsPreview}
+					isKeywordsPreviewOpen={isKeywordsPreviewOpen}
+					keywordsFilter={keywordsFilter}
 				/>
 			}
 			rightPanel={
@@ -142,14 +167,20 @@ interface IPageBrowserDispatchProps {
 	pasteModule(editorID: number, key: string, modulesToPaste: IModule[]): Promise<{ error?: INotification }>;
 	setNotification: (notification: INotification) => void;
 	restorePageNavigation: (key: string) => void;
+	toggleHeadingsPreview: () => void;
+	toggleKeywordsPreview: () => void;
 	isTemplateActivated: boolean;
 	isGlobal: boolean;
 	isEditable: boolean;
 	pageTitle: string;
 	isReadOnly: boolean;
-	browserRef: any;
+	browserRef: React.RefObject<HTMLDivElement>;
 	isEditLive: boolean;
 	isDisabled: boolean;
+	isHeadingsPreviewOpen: boolean;
+	headingsFilter: HeadingFilter;
+	isKeywordsPreviewOpen: boolean;
+	keywordsFilter: string[];
 	isDirty?: boolean;
 	onNavigateWithDirty?: (navigateCallback: () => void) => void;
 }

package/src/modules/PageEditor/PageBrowser/index.tsx

@@ -2,7 +2,7 @@ import { connect } from "react-redux";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 
 import { Browser } from "@ax/components";
-import type { ILanguage, IRootState, ISite, ISocialState } from "@ax/types";
+import type { HeadingFilter, ILanguage, IRootState, ISite, ISocialState } from "@ax/types";
 
 const PageBrowser = (props: IProps) => {
 	const {
@@ -16,10 +16,16 @@ const PageBrowser = (props: IProps) => {
 		isReadOnly,
 		isPreview,
 		browserRef,
+		isHeadingsPreviewOpen = false,
+		isKeywordsPreviewOpen = false,
+		headingsFilter,
+		keywordsFilter,
 		deleteModule,
 		duplicateModule,
 		copyModule,
 		setScrollEditorID,
+		toggleHeadingsPreview,
+		toggleKeywordsPreview,
 	} = props;
 
 	if (!currentSiteInfo) {
@@ -31,7 +37,8 @@ const PageBrowser = (props: IProps) => {
 	const slugWithSlash = slug ? (slug.startsWith("/") ? slug : `/${slug}`) : "";
 	const pathWithoutSlash = path ? (path.endsWith("/") ? path.slice(0, -1) : path) : "";
 	const url = `${pathWithoutSlash}${slugWithSlash}`;
-	const disabled = isTemplateActivated === false || isReadOnly;
+	const disabled = isTemplateActivated === false || isReadOnly || isHeadingsPreviewOpen || isKeywordsPreviewOpen;
+	const editorType = isHeadingsPreviewOpen ? "headings" : isKeywordsPreviewOpen ? "keywords" : "page";
 
 	const actions = {
 		deleteModuleAction: deleteModule,
@@ -58,6 +65,11 @@ const PageBrowser = (props: IProps) => {
 			showIframe={true}
 			browserRef={browserRef}
 			actions={actions}
+			editorType={editorType}
+			toggleHeadingsPreview={toggleHeadingsPreview}
+			toggleKeywordsPreview={toggleKeywordsPreview}
+			headingFilter={headingsFilter}
+			keywordsFilter={keywordsFilter}
 		/>
 	);
 };
@@ -78,10 +90,16 @@ interface IPageBrowserDispatchProps {
 	isReadOnly: boolean;
 	isPreview?: boolean;
 	browserRef?: any;
+	isHeadingsPreviewOpen?: boolean;
+	isKeywordsPreviewOpen?: boolean;
+	headingsFilter?: HeadingFilter;
+	keywordsFilter?: string[];
 	deleteModule(editorID: number[]): void;
 	duplicateModule(editorID: number[]): number;
 	copyModule(editorID: number[]): number | boolean;
 	setScrollEditorID(editorID: number | null): void;
+	toggleHeadingsPreview?(): void;
+	toggleKeywordsPreview?(): void;
 }
 
 type IProps = IPageBrowserStateProps & IPageBrowserDispatchProps;

package/src/modules/PageEditor/Preview/index.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import PageBrowser from "../PageBrowser";
 import * as S from "./style";
 

package/src/modules/PageEditor/Preview/style.tsx

@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 const BrowserWrapper = styled.div`
   background-color: ${(p) => p.theme.color.uiBackground01};
-  height: calc(100% - 44px);
+  height: 100%;
   width: 100%;
 `;
 

package/src/modules/PageEditor/atoms.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { IModal } from "@ax/types";
+import type { IModal } from "@ax/types";
 import { Modal, FieldsBehavior } from "@ax/components";
 
 import * as S from "./style";