@griddo/ax 11.11.7 → 11.11.8-rc.1

package/src/modules/FramePreview/index.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { connect } from "react-redux";
 
 import { BrowserContent, Loading, Toast } from "@ax/components";
@@ -8,6 +9,9 @@ import { getDefaultTheme } from "@ax/helpers";
 import { useOnMessageReceivedFromOutside, useToast, useURLSearchParam } from "@ax/hooks";
 import type { FormContent, ILanguage, IRootState, ISite, ISocialState } from "@ax/types";
 
+import HeadingsOverlay from "./HeadingsOverlay";
+import { observeAndAddIdsToHeadings, observeAndHighlightKeywords } from "./utils";
+
 import * as S from "./style";
 
 const FramePreview = (props: IProps) => {
@@ -29,11 +33,19 @@ const FramePreview = (props: IProps) => {
 		copyModule,
 	} = props;
 
-	const isPreview = useURLSearchParam("preview");
-	const isDisabled = useURLSearchParam("disabled");
+	const previewParam = useURLSearchParam("preview");
+	const disabledParam = useURLSearchParam("disabled");
 	const type = useURLSearchParam("type");
-	document.body.classList.add("preview");
+	const headingFilter = useURLSearchParam("headingFilter");
+	const keywordFilter = useURLSearchParam("keywordFilter");
+
+	const isPreviewMode = previewParam === "true";
+	const isDisabled = disabledParam === "true";
 	const isForm = type === "form";
+	const isHeadingsEditor = type === "headings";
+	const isKeywordsEditor = type === "keywords";
+	const keywords: string[] = pageContent?.metaKeywords || [];
+	const filteredKeywords = keywordFilter ? [keywordFilter] : keywords;
 	const setSelectedContent = isForm ? setSelectedFormContent : setSelectedPageContent;
 	const setContent = isForm ? setFormContent : setEditorContent;
 	const content = isForm ? formContent : pageContent;
@@ -42,15 +54,40 @@ const FramePreview = (props: IProps) => {
 	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
 	useOnMessageReceivedFromOutside(setContent, setSelectedContent);
 
-	window.addEventListener("mousemove", (e) => {
-		window.parent.postMessage(
-			{
-				type: "iframe-mousemove",
-				clientX: e.clientX,
-			},
-			"*",
-		);
-	});
+	useEffect(() => {
+		document.body.classList.add("preview");
+
+		const handleMouseMove = (e: MouseEvent) => {
+			window.parent.postMessage(
+				{
+					type: "iframe-mousemove",
+					clientX: e.clientX,
+				},
+				"*",
+			);
+		};
+
+		window.addEventListener("mousemove", handleMouseMove);
+		return () => window.removeEventListener("mousemove", handleMouseMove);
+	}, []);
+
+	useEffect(() => {
+		if (isDisabled) {
+			localStorage.setItem("selectedID", "0");
+		}
+	}, [isDisabled]);
+
+	useEffect(() => {
+		if (isHeadingsEditor) {
+			return observeAndAddIdsToHeadings(document.body, headingFilter);
+		}
+	}, [isHeadingsEditor, headingFilter]);
+
+	useEffect(() => {
+		if (isKeywordsEditor) {
+			return observeAndHighlightKeywords(document.body, filteredKeywords);
+		}
+	}, [isKeywordsEditor, filteredKeywords]);
 
 	const selectEditorID = (
 		selectedComponent: { editorID: number; component: any; type: string; parentEditorID: number },
@@ -67,7 +104,7 @@ const FramePreview = (props: IProps) => {
 
 		const isNavigationModule = ["header", "footer"].includes(selectedComponent.type);
 
-		if (isPreview === "false" && (isDisabled === "false" || isNavigationModule)) {
+		if (!isPreviewMode && (!isDisabled || isNavigationModule)) {
 			window.parent.postMessage({ type: "module-click", message: editorID }, "*");
 			setSelectedContent?.(editorID);
 		}
@@ -84,7 +121,7 @@ const FramePreview = (props: IProps) => {
 	const theme = currentSiteInfo ? currentSiteInfo.theme : globalTheme;
 	const langs = currentSiteInfo ? siteLangs : globalLangs;
 	const siteID = currentSiteInfo ? currentSiteInfo.id : canonicalSite;
-	const renderer = isForm ? "forms" : isPreview === "true" ? "preview" : "editor";
+	const renderer = isForm ? "forms" : isPreviewMode ? "preview" : "editor";
 
 	const deleteModuleSelected = (editorID: number) => {
 		window.parent.postMessage({ type: "module-delete", message: editorID }, "*");
@@ -112,8 +149,8 @@ const FramePreview = (props: IProps) => {
 	if (isLoading) return <Loading />;
 
 	return (
-		// biome-ignore lint/suspicious/noAssignInExpressions: TODO: fix this
-		<S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
+		<S.Wrapper>
+			<S.GlobalScrollStyle />
 			<BrowserContent
 				cloudinaryName={cloudinaryName}
 				theme={theme}
@@ -131,6 +168,8 @@ const FramePreview = (props: IProps) => {
 				renderer={renderer}
 				selectHoverEditorID={selectHoverEditorID}
 			/>
+			{isHeadingsEditor && <S.Velo />}
+			{isHeadingsEditor && <HeadingsOverlay headingFilter={headingFilter} />}
 			{isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
 		</S.Wrapper>
 	);

package/src/modules/FramePreview/style.tsx

@@ -1,4 +1,20 @@
-import styled from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
+
+const GlobalScrollStyle = createGlobalStyle`
+  body.preview {
+    overflow-x: hidden;
+  }
+
+  body.preview::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 4px;
+  }
+
+  body.preview::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: ${(p: any) => p.theme.colors.iconNonActive};
+  }
+`;
 
 const Wrapper = styled.div`
   scroll-behavior: smooth;
@@ -12,6 +28,22 @@ const Wrapper = styled.div`
   body.preview:not(&) {
     min-width: 0 !important;
   }
+
+	.gdd-keyword {
+		background-color: #FFEF9A !important;
+		color: #1C1547 !important;
+		padding: ${(p) => `0 ${p.theme.spacing.xxs}`};
+	}
+`;
+
+const Velo = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  right: 0;
+  background: rgba(255, 255, 255, 0.4);
+  z-index: 1000;
 `;
 
-export { Wrapper };
+export { Wrapper, Velo, GlobalScrollStyle };

package/src/modules/FramePreview/utils.tsx

@@ -0,0 +1,140 @@
+const addIdsToHeadings = (container: HTMLElement, headingFilter: string | null): void => {
+	const selected = headingFilter ? headingFilter : "h1, h2, h3, h4, h5, h6";
+	const headings = container.querySelectorAll<HTMLElement>(selected);
+
+	headings.forEach((heading, index) => {
+		const text = heading.textContent?.trim();
+		if (!text) return;
+
+		heading.dataset.griddoid = `heading-${index + 1}`;
+	});
+};
+
+const observeAndAddIdsToHeadings = (container: HTMLElement, headingFilter: string | null): (() => void) => {
+	addIdsToHeadings(container, headingFilter);
+
+	const observer = new MutationObserver(() => {
+		addIdsToHeadings(container, headingFilter);
+	});
+
+	observer.observe(container, {
+		childList: true,
+		subtree: true,
+	});
+
+	return () => observer.disconnect();
+};
+
+const KEYWORD_HIGHLIGHT_CLASS = "gdd-keyword";
+
+const removeKeywordHighlights = (container: HTMLElement): void => {
+	const marks = container.querySelectorAll<HTMLElement>(`mark.${KEYWORD_HIGHLIGHT_CLASS}`);
+
+	marks.forEach((mark) => {
+		const parent = mark.parentNode;
+		if (!parent) return;
+		parent.replaceChild(document.createTextNode(mark.textContent || ""), mark);
+		parent.normalize();
+	});
+};
+
+const buildKeywordsRegex = (keywords: string[]): RegExp | null => {
+	const escapedKeywords = keywords
+		.filter((k) => k.trim())
+		.sort((a, b) => b.length - a.length)
+		.map((k) => k.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+
+	if (!escapedKeywords.length) return null;
+
+	return new RegExp(`(${escapedKeywords.join("|")})`, "gi");
+};
+
+const collectTextNodes = (container: HTMLElement): Text[] => {
+	const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, {
+		acceptNode: (node) => {
+			const parent = node.parentElement;
+			if (!parent) return NodeFilter.FILTER_REJECT;
+			if (["SCRIPT", "STYLE"].includes(parent.tagName)) return NodeFilter.FILTER_REJECT;
+			if (parent.classList.contains(KEYWORD_HIGHLIGHT_CLASS)) return NodeFilter.FILTER_REJECT;
+			return NodeFilter.FILTER_ACCEPT;
+		},
+	});
+
+	const textNodes: Text[] = [];
+	let current = walker.nextNode();
+	while (current) {
+		textNodes.push(current as Text);
+		current = walker.nextNode();
+	}
+
+	return textNodes;
+};
+
+const wrapMatches = (text: string, regex: RegExp): DocumentFragment => {
+	const fragment = document.createDocumentFragment();
+	let lastIndex = 0;
+	let match = regex.exec(text);
+
+	while (match !== null) {
+		if (match.index > lastIndex) {
+			fragment.appendChild(document.createTextNode(text.slice(lastIndex, match.index)));
+		}
+
+		const mark = document.createElement("mark");
+		mark.className = KEYWORD_HIGHLIGHT_CLASS;
+		mark.textContent = match[0];
+		fragment.appendChild(mark);
+
+		lastIndex = regex.lastIndex;
+		match = regex.exec(text);
+	}
+
+	if (lastIndex < text.length) {
+		fragment.appendChild(document.createTextNode(text.slice(lastIndex)));
+	}
+
+	return fragment;
+};
+
+const highlightKeywords = (container: HTMLElement, keywords: string[]): void => {
+	removeKeywordHighlights(container);
+
+	const regex = buildKeywordsRegex(keywords);
+	if (!regex) return;
+
+	const textNodes = collectTextNodes(container);
+
+	for (const textNode of textNodes) {
+		const text = textNode.textContent || "";
+		if (!regex.test(text)) continue;
+		regex.lastIndex = 0;
+
+		const fragment = wrapMatches(text, regex);
+		textNode.parentNode?.replaceChild(fragment, textNode);
+	}
+};
+
+const observeAndHighlightKeywords = (container: HTMLElement, keywords: string[]): (() => void) => {
+	const observer = new MutationObserver(() => {
+		observer.disconnect();
+		highlightKeywords(container, keywords);
+		observer.observe(container, { childList: true, subtree: true });
+	});
+
+	highlightKeywords(container, keywords);
+	observer.observe(container, { childList: true, subtree: true });
+
+	return () => {
+		observer.disconnect();
+		removeKeywordHighlights(container);
+	};
+};
+
+export {
+	addIdsToHeadings,
+	observeAndAddIdsToHeadings,
+	highlightKeywords,
+	removeKeywordHighlights,
+	observeAndHighlightKeywords,
+	KEYWORD_HIGHLIGHT_CLASS,
+};

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

@@ -1,8 +1,15 @@
-import React from "react";
 import { connect } from "react-redux";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { ConfigPanel, ResizePanel } from "@ax/components";
-import { IBreadcrumbItem, IModule, INotification, IRootState, ISchema, IUserEditing } from "@ax/types";
+import type {
+	HeadingFilter,
+	IBreadcrumbItem,
+	IModule,
+	INotification,
+	IRootState,
+	ISchema,
+	IUserEditing,
+} from "@ax/types";
 import PageBrowser from "../PageBrowser";
 
 const Editor = (props: IProps) => {
@@ -33,6 +40,12 @@ const Editor = (props: IProps) => {
 		setNotification,
 		isEditLive,
 		isDisabled,
+		toggleHeadingsPreview,
+		toggleKeywordsPreview,
+		isHeadingsPreviewOpen,
+		isKeywordsPreviewOpen,
+		headingsFilter,
+		keywordsFilter,
 	} = props;
 
 	const actions = {
@@ -46,11 +59,26 @@ const Editor = (props: IProps) => {
 		copyModuleAction: copyModule,
 		pasteModuleAction: pasteModule,
 		setNotificationAction: setNotification,
+		toggleHeadingsPreviewAction: toggleHeadingsPreview,
+		toggleKeywordsPreviewAction: toggleKeywordsPreview,
 	};
 
 	return (
 		<ResizePanel
-			leftPanel={<PageBrowser isReadOnly={isReadOnly || isEditLive} theme={theme} browserRef={browserRef} />}
+			disabled={isHeadingsPreviewOpen || isKeywordsPreviewOpen}
+			leftPanel={
+				<PageBrowser
+					isReadOnly={isReadOnly || isEditLive}
+					theme={theme}
+					browserRef={browserRef}
+					isHeadingsPreviewOpen={isHeadingsPreviewOpen}
+					toggleHeadingsPreview={toggleHeadingsPreview}
+					headingsFilter={headingsFilter}
+					toggleKeywordsPreview={toggleKeywordsPreview}
+					isKeywordsPreviewOpen={isKeywordsPreviewOpen}
+					keywordsFilter={keywordsFilter}
+				/>
+			}
 			rightPanel={
 				<ConfigPanel
 					schema={schema}
@@ -100,6 +128,8 @@ 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;
@@ -107,6 +137,10 @@ 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,8 +1,7 @@
 import { connect } from "react-redux";
 import { pageEditorActions } from "@ax/containers/PageEditor";
-
 import { Browser } from "@ax/components";
-import type { ILanguage, IRootState, ISchema, ISocialState } from "@ax/types";
+import type { HeadingFilter, ILanguage, IRootState, ISchema, ISocialState } from "@ax/types";
 
 const PageBrowser = (props: IProps) => {
 	const {
@@ -15,15 +14,22 @@ 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,
@@ -48,6 +54,11 @@ const PageBrowser = (props: IProps) => {
 			showIframe={true}
 			browserRef={browserRef}
 			actions={actions}
+			editorType={editorType}
+			toggleHeadingsPreview={toggleHeadingsPreview}
+			headingFilter={headingsFilter}
+			toggleKeywordsPreview={toggleKeywordsPreview}
+			keywordsFilter={keywordsFilter}
 		/>
 	);
 };
@@ -68,10 +79,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/GlobalEditor/Preview/index.tsx

@@ -1,5 +1,3 @@
-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: calc(100% - 44px);
+  height: 100%;
   width: 100%;
 `;