@griddo/ax 11.11.8-rc.1 → 11.12.0

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

@@ -1,15 +1,8 @@
+import React from "react";
 import { connect } from "react-redux";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { ConfigPanel, ResizePanel } from "@ax/components";
-import type {
-	HeadingFilter,
-	IBreadcrumbItem,
-	IModule,
-	INotification,
-	IRootState,
-	ISchema,
-	IUserEditing,
-} from "@ax/types";
+import { IBreadcrumbItem, IModule, INotification, IRootState, ISchema, IUserEditing } from "@ax/types";
 import PageBrowser from "../PageBrowser";
 
 const Editor = (props: IProps) => {
@@ -40,12 +33,6 @@ const Editor = (props: IProps) => {
 		setNotification,
 		isEditLive,
 		isDisabled,
-		toggleHeadingsPreview,
-		toggleKeywordsPreview,
-		isHeadingsPreviewOpen,
-		isKeywordsPreviewOpen,
-		headingsFilter,
-		keywordsFilter,
 	} = props;
 
 	const actions = {
@@ -59,26 +46,11 @@ const Editor = (props: IProps) => {
 		copyModuleAction: copyModule,
 		pasteModuleAction: pasteModule,
 		setNotificationAction: setNotification,
-		toggleHeadingsPreviewAction: toggleHeadingsPreview,
-		toggleKeywordsPreviewAction: toggleKeywordsPreview,
 	};
 
 	return (
 		<ResizePanel
-			disabled={isHeadingsPreviewOpen || isKeywordsPreviewOpen}
-			leftPanel={
-				<PageBrowser
-					isReadOnly={isReadOnly || isEditLive}
-					theme={theme}
-					browserRef={browserRef}
-					isHeadingsPreviewOpen={isHeadingsPreviewOpen}
-					toggleHeadingsPreview={toggleHeadingsPreview}
-					headingsFilter={headingsFilter}
-					toggleKeywordsPreview={toggleKeywordsPreview}
-					isKeywordsPreviewOpen={isKeywordsPreviewOpen}
-					keywordsFilter={keywordsFilter}
-				/>
-			}
+			leftPanel={<PageBrowser isReadOnly={isReadOnly || isEditLive} theme={theme} browserRef={browserRef} />}
 			rightPanel={
 				<ConfigPanel
 					schema={schema}
@@ -128,8 +100,6 @@ interface IPageBrowserDispatchProps {
 	copyModule(editorID: number[]): boolean | number;
 	pasteModule(editorID: number, key: string, modulesToPaste: IModule[]): Promise<{ error?: INotification }>;
 	setNotification: (notification: INotification) => void;
-	toggleHeadingsPreview: () => void;
-	toggleKeywordsPreview: () => void;
 	isGlobal: boolean;
 	isEditable: boolean;
 	isReadOnly: boolean;
@@ -137,10 +107,6 @@ interface IPageBrowserDispatchProps {
 	browserRef: any;
 	isEditLive: boolean;
 	isDisabled: boolean;
-	isHeadingsPreviewOpen: boolean;
-	isKeywordsPreviewOpen: boolean;
-	headingsFilter: HeadingFilter;
-	keywordsFilter: string[];
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

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

@@ -1,7 +1,8 @@
 import { connect } from "react-redux";
 import { pageEditorActions } from "@ax/containers/PageEditor";
+
 import { Browser } from "@ax/components";
-import type { HeadingFilter, ILanguage, IRootState, ISchema, ISocialState } from "@ax/types";
+import type { ILanguage, IRootState, ISchema, ISocialState } from "@ax/types";
 
 const PageBrowser = (props: IProps) => {
 	const {
@@ -14,22 +15,15 @@ const PageBrowser = (props: IProps) => {
 		isReadOnly,
 		isPreview,
 		browserRef,
-		isHeadingsPreviewOpen = false,
-		isKeywordsPreviewOpen = false,
-		headingsFilter,
-		keywordsFilter,
 		deleteModule,
 		duplicateModule,
 		copyModule,
 		setScrollEditorID,
-		toggleHeadingsPreview,
-		toggleKeywordsPreview,
 	} = props;
 
 	const slugWithSlash = slug ? (slug.startsWith("/") ? slug : `/${slug}`) : "";
 	const pathWithoutSlash = path ? (path.endsWith("/") ? path.slice(0, -1) : path) : "";
 	const url = `${pathWithoutSlash}${slugWithSlash}`;
-	const editorType = isHeadingsPreviewOpen ? "headings" : isKeywordsPreviewOpen ? "keywords" : "page";
 
 	const actions = {
 		deleteModuleAction: deleteModule,
@@ -54,11 +48,6 @@ const PageBrowser = (props: IProps) => {
 			showIframe={true}
 			browserRef={browserRef}
 			actions={actions}
-			editorType={editorType}
-			toggleHeadingsPreview={toggleHeadingsPreview}
-			headingFilter={headingsFilter}
-			toggleKeywordsPreview={toggleKeywordsPreview}
-			keywordsFilter={keywordsFilter}
 		/>
 	);
 };
@@ -79,16 +68,10 @@ 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/GlobalEditor/Preview/index.tsx

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

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

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

package/src/modules/GlobalEditor/index.tsx

@@ -7,8 +7,6 @@ import {
 	CancelScheduleModal,
 	ErrorPage,
 	ErrorToast,
-	HeadingsPreviewModal,
-	KeywordsPreviewModal,
 	Loading,
 	MainWrapper,
 	Modal,
@@ -25,9 +23,8 @@ 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, useModals, usePermissions } from "@ax/hooks";
+import { useIsDirty, useModal, usePermission } from "@ax/hooks";
 import type {
-	HeadingFilter,
 	IErrorItem,
 	ILanguage,
 	INotification,
@@ -70,46 +67,35 @@ const GlobalEditor = (props: IProps) => {
 		getUserCurrentPermissions,
 		schedulePublication,
 		restorePage,
-		updateEditorContent,
 		schemaVersion,
 	} = props;
 
-	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 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 { 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;
@@ -118,7 +104,6 @@ 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.";
@@ -137,11 +122,12 @@ const GlobalEditor = (props: IProps) => {
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		const { pageID, getPage, sendPagePing, setStructuredDataFilter } = props;
+		const { pageID, getPage, setTab, sendPagePing, setStructuredDataFilter } = props;
 
 		editorContent?.structuredData && setStructuredDataFilter(editorContent.structuredData);
+		const defaultTab = "content";
 		const handleGetPage = async () => await getPage(pageID, true);
-		setTab(defaultContentTab);
+		setTab(defaultTab);
 		setToastMsg(null);
 		handleGetPage();
 		if (!pageID) {
@@ -164,11 +150,11 @@ const GlobalEditor = (props: IProps) => {
 		const { pageID, sendPagePing, currentUserID } = props;
 		if (userEditing && userEditing.id !== currentUserID) {
 			setIsReadOnly(true);
-			!isOpen("userEditing") && toggleModal("userEditing");
+			!isOpen && toggleModal();
 		} else {
 			setIsReadOnly(false);
 			pageID && sendPagePing(pageID);
-			isOpen("userEditing") && toggleModal("userEditing");
+			isOpen && toggleModal();
 		}
 	}, [userEditing]);
 
@@ -294,7 +280,7 @@ const GlobalEditor = (props: IProps) => {
 		const saved = await schedulePublication(dateString, isDraft);
 		if (saved) {
 			resetDirty();
-			toggleModal("schedule");
+			toggleScheduleModal();
 		}
 	};
 
@@ -303,7 +289,7 @@ const GlobalEditor = (props: IProps) => {
 		if (saved) {
 			setScheduleDate({ date: "", time: "12:00 am" });
 			resetDirty();
-			toggleModal("cancelSchedule");
+			toggleCancelScheduleModal();
 		}
 	};
 
@@ -324,7 +310,7 @@ const GlobalEditor = (props: IProps) => {
 						}
 					: {
 							label: status === pageStatus.UPLOAD_PENDING ? "Cancel publication" : "Unpublish",
-							action: hasDraft ? () => toggleModal("unpublish") : unpublishPage,
+							action: hasDraft ? toggleUnpublishModal : unpublishPage,
 						};
 			case pageStatus.MODIFIED:
 			case pageStatus.SCHEDULED:
@@ -339,24 +325,24 @@ const GlobalEditor = (props: IProps) => {
 
 	const menuOptions = [];
 
-	if (isAllowedTo.publishPages && !isScheduled && !isPublished && props.pageStatus !== pageStatus.OFFLINE_PENDING) {
+	if (isAllowedToPublishPages && !isScheduled && !isPublished && props.pageStatus !== pageStatus.OFFLINE_PENDING) {
 		menuOptions.push({
 			label: "Schedule",
 			icon: "calendar",
-			action: () => toggleModal("schedule"),
+			action: toggleScheduleModal,
 		});
 	}
 
-	if (isAllowedTo.publishPages && isScheduled) {
+	if (isAllowedToPublishPages && isScheduled) {
 		menuOptions.push({
 			label: "Cancel Schedule",
 			icon: "cancelEvent",
-			action: () => toggleModal("cancelSchedule"),
+			action: toggleCancelScheduleModal,
 		});
 	}
 
 	if (
-		isAllowedTo.editContentPages &&
+		isAllowedToEditContentPage &&
 		(props.pageStatus === pageStatus.PUBLISHED ||
 			props.pageStatus === pageStatus.OFFLINE ||
 			props.pageStatus === pageStatus.OFFLINE_PENDING ||
@@ -370,7 +356,7 @@ const GlobalEditor = (props: IProps) => {
 		});
 	}
 
-	if (isAllowedTo.editContentPages && !isScheduled && (isDraft || (isPublished && isDirty))) {
+	if (isAllowedToEditContentPage && !isScheduled && (isDraft || (isPublished && isDirty))) {
 		menuOptions.push({
 			label: "Discard changes",
 			icon: "close",
@@ -378,15 +364,15 @@ const GlobalEditor = (props: IProps) => {
 		});
 	}
 
-	if (props.pageStatus === pageStatus.PUBLISHED && !hasDraft && isDirty && isAllowedTo.publishPages) {
+	if (props.pageStatus === pageStatus.PUBLISHED && !hasDraft && isDirty && isAllowedToPublishPages) {
 		menuOptions.push({
 			label: "Unpublish",
 			icon: "offline",
-			action: isDraft ? () => toggleModal("unpublish") : unpublishPage,
+			action: isDraft ? toggleUnpublishModal : unpublishPage,
 		});
 	}
 
-	if (!isDraft && isAllowedTo.deletePages) {
+	if (!isDraft && isAllowedToDeletePage) {
 		menuOptions.push({
 			label: "Delete page",
 			icon: "delete",
@@ -396,7 +382,7 @@ const GlobalEditor = (props: IProps) => {
 
 	const downArrowMenu = {
 		displayed: !isReadOnly && !isDeleted,
-		button: isAllowedTo.publishPages ? getPublishButton(props.pageStatus) : undefined,
+		button: isAllowedToPublishPages ? getPublishButton(props.pageStatus) : undefined,
 		options: menuOptions,
 	};
 
@@ -444,7 +430,7 @@ const GlobalEditor = (props: IProps) => {
 		}
 	};
 
-	const rightButtonProps = isAllowedTo.editContentPages
+	const rightButtonProps = isAllowedToEditContentPage
 		? {
 				label: isSaving ? "Saving" : getSaveLabel(),
 				disabled: (!isDirty && pageID !== null && !isNewTranslation) || isSaving || isReadOnly,
@@ -476,11 +462,11 @@ const GlobalEditor = (props: IProps) => {
 
 	const onNavigateWithDirty = (navigateCallback: () => void) => {
 		setPendingNavigateCallback(() => navigateCallback);
-		toggleModal("dirtyNavigate");
+		toggleDirtyNavigateModal();
 	};
 
 	const handleConfirmDirtyNavigation = () => {
-		toggleModal("dirtyNavigate");
+		toggleDirtyNavigateModal();
 		if (pendingNavigateCallback) {
 			pendingNavigateCallback();
 			setPendingNavigateCallback(null);
@@ -488,7 +474,7 @@ const GlobalEditor = (props: IProps) => {
 	};
 
 	const handleCancelDirtyNavigation = () => {
-		toggleModal("dirtyNavigate");
+		toggleDirtyNavigateModal();
 		setPendingNavigateCallback(null);
 	};
 
@@ -532,7 +518,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: () => toggleModal("unpublish") };
+	const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
 
 	const mainScheduleModalAction = {
 		title: "Schedule",
@@ -541,7 +527,7 @@ const GlobalEditor = (props: IProps) => {
 
 	const secondaryScheduleModalAction = {
 		title: "Cancel",
-		onClick: () => toggleModal("schedule"),
+		onClick: toggleScheduleModal,
 	};
 
 	const mainCancelScheduleModalAction = {
@@ -551,10 +537,10 @@ const GlobalEditor = (props: IProps) => {
 
 	const secondaryCancelScheduleModalAction = {
 		title: "Back",
-		onClick: () => toggleModal("cancelSchedule"),
+		onClick: toggleCancelScheduleModal,
 	};
 
-	const tabIcons = isAllowedTo.editContentPages
+	const tabIcons = isAllowedToEditContentPage
 		? [
 				{ name: "edit", text: "Edit mode" },
 				{ name: "view", text: "Preview mode" },
@@ -572,7 +558,6 @@ const GlobalEditor = (props: IProps) => {
 		icons: tabIcons,
 		selectedTab,
 		action: (tab: string) => handleSelectedTab(tab),
-		disabled: isOpen("headingsPreview") || isOpen("keywordsPreview"),
 	};
 
 	const filteredLanguages = globalLangs.filter((lang) =>
@@ -602,7 +587,7 @@ const GlobalEditor = (props: IProps) => {
 			await getPage(selectedPageLanguage.pageId, true, isDraft);
 			resetDirty();
 		} else {
-			isAllowedTo.editContentPages && setSelectedTab("edit");
+			isAllowedToEditContentPage && setSelectedTab("edit");
 			createNewTranslation(true);
 			await getPage(pageID, true);
 		}
@@ -611,33 +596,11 @@ const GlobalEditor = (props: IProps) => {
 	const handleRestorePage = async () => {
 		const isRestored = await restorePage(pageID);
 		if (isRestored) {
-			isOpen("restore") && toggleModal("restore");
+			isRestoreOpen && toggleRestoreModal();
 			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 />
 	) : (
@@ -653,7 +616,7 @@ const GlobalEditor = (props: IProps) => {
 				pageStatus={props.pageStatus}
 				language={lang}
 				languageAction={handleLanguage}
-				availableLanguages={isAllowedTo.createPages && !isDeleted ? globalLangs : filteredLanguages}
+				availableLanguages={isAllowedToCreatePages && !isDeleted ? globalLangs : filteredLanguages}
 				currentLanguages={contentLanguages}
 				currentPageID={pageID}
 				fullWidth={true}
@@ -680,7 +643,7 @@ const GlobalEditor = (props: IProps) => {
 									type="error"
 									text={deletedNotificationText}
 									btnText="Restore page"
-									onClick={() => toggleModal("restore")}
+									onClick={toggleRestoreModal}
 								/>
 							</S.NotificationWrapper>
 						)}
@@ -711,12 +674,6 @@ 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>
 					</>
@@ -727,14 +684,14 @@ const GlobalEditor = (props: IProps) => {
 					</>
 				)}
 				<Modal
-					isOpen={isOpen("userEditing")}
-					hide={() => toggleModal("userEditing")}
+					isOpen={isOpen}
+					hide={toggleModal}
 					size="S"
 					title="This page is currently being edited"
 					mainAction={mainAction}
 					secondaryAction={secondaryAction}
 				>
-					{isOpen("userEditing") && (
+					{isOpen && (
 						<S.ModalContent>
 							<p>
 								<strong>{userEditing?.name}</strong> is currently working on this page. You can preview the page but{" "}
@@ -744,13 +701,13 @@ const GlobalEditor = (props: IProps) => {
 					)}
 				</Modal>
 				<Modal
-					isOpen={isOpen("unpublish")}
-					hide={() => toggleModal("unpublish")}
+					isOpen={isUnpublishOpen}
+					hide={toggleUnpublishModal}
 					size="S"
 					title="Unpublish Modified Page"
 					mainAction={mainUnpublishAction}
 				>
-					{isOpen("unpublish") && (
+					{isUnpublishOpen && (
 						<S.ModalContent>
 							<p>
 								There are some saved changes that are not published on this page. To Unpublish this page,{" "}
@@ -760,48 +717,31 @@ const GlobalEditor = (props: IProps) => {
 					)}
 				</Modal>
 				<ScheduleModal
-					isOpen={isOpen("schedule")}
-					toggleModal={() => toggleModal("schedule")}
+					isOpen={isScheduleOpen}
+					toggleModal={toggleScheduleModal}
 					mainModalAction={mainScheduleModalAction}
 					secondaryModalAction={secondaryScheduleModalAction}
 					scheduleDate={scheduleDate}
 					setScheduleDate={setScheduleDate}
 				/>
 				<CancelScheduleModal
-					isOpen={isOpen("cancelSchedule")}
-					toggleModal={() => toggleModal("cancelSchedule")}
+					isOpen={isCancelScheduleOpen}
+					toggleModal={toggleCancelScheduleModal}
 					mainModalAction={mainCancelScheduleModalAction}
 					secondaryModalAction={secondaryCancelScheduleModalAction}
 				/>
 				<RestoreModal
-					isOpen={isOpen("restore")}
-					toggleModal={() => toggleModal("restore")}
+					isOpen={isRestoreOpen}
+					toggleModal={toggleRestoreModal}
 					{...{
 						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={isOpen("dirtyNavigate")}
+				isOpen={isDirtyNavigateOpen}
 				hide={handleCancelDirtyNavigation}
 				size="S"
 				title="Unsaved changes"
@@ -878,7 +818,6 @@ const mapDispatchToProps = {
 	getUserCurrentPermissions: usersActions.getUserCurrentPermissions,
 	schedulePublication: pageEditorActions.schedulePublication,
 	restorePage: pageEditorActions.restorePage,
-	updateEditorContent: pageEditorActions.updateEditorContent,
 };
 
 interface IPageEditorDispatchProps {
@@ -905,7 +844,6 @@ 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,17 +4,7 @@ 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 {
-	HeadingFilter,
-	IBreadcrumbItem,
-	IModule,
-	INotification,
-	IRootState,
-	ISchema,
-	ISite,
-	IUserEditing,
-} from "@ax/types";
-
+import type { IBreadcrumbItem, IModule, INotification, IRootState, ISchema, ISite, IUserEditing } from "@ax/types";
 import PageBrowser from "../PageBrowser";
 
 const Editor = (props: IProps) => {
@@ -50,15 +40,9 @@ const Editor = (props: IProps) => {
 		pasteModule,
 		setNotification,
 		restorePageNavigation,
-		toggleHeadingsPreview,
-		toggleKeywordsPreview,
 		content,
 		isEditLive,
 		isDisabled,
-		isHeadingsPreviewOpen,
-		headingsFilter,
-		isKeywordsPreviewOpen,
-		keywordsFilter,
 		isDirty,
 		onNavigateWithDirty,
 	} = props;
@@ -84,24 +68,15 @@ 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={
@@ -167,20 +142,14 @@ 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: React.RefObject<HTMLDivElement>;
+	browserRef: any;
 	isEditLive: boolean;
 	isDisabled: boolean;
-	isHeadingsPreviewOpen: boolean;
-	headingsFilter: HeadingFilter;
-	isKeywordsPreviewOpen: boolean;
-	keywordsFilter: string[];
 	isDirty?: boolean;
 	onNavigateWithDirty?: (navigateCallback: () => void) => void;
 }