?HAMA

Edit File Size: 2.39 KB

/home/nshryvcy/radiantskinclinics.org/wp-content/plugins/extendify_old/src/Agent/hooks/useSiteVibesOverride.js

Text Base64

import { isInEditor } from '@agent/lib/util';
import { useCallback, useEffect, useRef, useState } from '@wordpress/element';

const styleId = 'block-style-variation-styles-inline-css';
const editorIframeSelector = 'iframe[name="editor-canvas"]';
const editorStylesWrapper = '.editor-styles-wrapper';

const getEditorDocument = () => {
	const iframe = document.querySelector(editorIframeSelector);
	return iframe?.contentDocument || document;
};

// update the CSS so that it won't affect the switcher preview area
const transformVibeCSS = (css, slug) => css.replaceAll(slug, 'natural-1');

export const useSiteVibesOverride = ({ css, slug }) => {
	const blockStyles = useRef(null);
	const [theDocument, setDocument] = useState(null);
	const onEditor = isInEditor();

useEffect(() => {
		if (!css || onEditor || !slug) return;
		const style = document.getElementById(styleId);
		if (!style) return;
		if (!blockStyles.current) {
			blockStyles.current = style.innerHTML;
		}
		style.innerHTML = transformVibeCSS(css, slug);
	}, [css, slug, onEditor]);

useEffect(() => {
		if (!css || !theDocument || !onEditor) return;
		const style = theDocument.getElementById(styleId);
		const hasIframe = document.querySelector(editorIframeSelector);

let modifiedCss = css
			.replaceAll(':root', hasIframe ? ':root' : editorStylesWrapper)
			.replaceAll(slug, 'natural-1')
			.replace(
				/:where$([^)]+)$/g,
				':where($1):not(.ext-vibe-container, .ext-vibe-container *)',
			);

if (!hasIframe) {
			modifiedCss = modifiedCss
				.replace('body{', `${editorStylesWrapper}{`)
				.replace(
					/(h[1-6](?:\s*,\s*h[1-6])*)\s*\{/g,
					`${editorStylesWrapper} $1{`,
				);
		}

style.innerHTML = modifiedCss;
	}, [css, slug, theDocument, onEditor]);

useEffect(() => {
		if (theDocument) return;
		const timer = setTimeout(() => {
			if (theDocument) return;
			const doc = getEditorDocument();
			if (!doc || !doc.body) return;
			const newStyle = doc.createElement('style');
			newStyle.id = styleId;
			doc.body.appendChild(newStyle);
			setDocument(doc);
		}, 300);
		return () => clearTimeout(timer);
	}, [theDocument]);

const undoChange = useCallback(() => {
		const style = document.getElementById(styleId);
		if (style && blockStyles.current) {
			style.innerHTML = blockStyles.current;
		}

if (!onEditor) return;
		const doc = getEditorDocument();
		doc?.getElementById(styleId)?.remove();
	}, [onEditor]);

return { undoChange };
};

Exit & Reset Text mode: syntax highlighting auto-detects file type.

Name	Size	Perms	Modified	Actions
useDraggable.js	3.77 KB	lrw-r--r--	2026-02-19 03:27:14	Edit Download recursive recursive
useFontVariationOverride.js	3.92 KB	lrw-r--r--	2026-03-19 23:35:18	Edit Download recursive recursive
useIframeScale.js	1.11 KB	lrw-r--r--	2026-04-16 23:02:08	Edit Download recursive recursive
useLockPost.js	607 B	lrw-r--r--	2026-03-24 18:55:54	Edit Download recursive recursive
usePortal.js	478 B	lrw-r--r--	2026-03-19 23:35:18	Edit Download recursive recursive
useResizable.js	3.17 KB	lrw-r--r--	2026-02-19 03:27:14	Edit Download recursive recursive
useSiteVibesOverride.js	2.39 KB	lrw-r--r--	2026-03-19 23:35:18	Edit Download recursive recursive
useSiteVibesVariations.js	1.82 KB	lrw-r--r--	2026-02-19 03:27:14	Edit Download recursive recursive
useThemeFontsVariations.js	1.17 KB	lrw-r--r--	2026-02-19 03:27:14	Edit Download recursive recursive
useThemeVariations.js	1.14 KB	lrw-r--r--	2025-09-09 19:55:14	Edit Download recursive recursive
useVariationOverride.js	3.14 KB	lrw-r--r--	2026-03-19 23:35:18	Edit Download recursive recursive
useWhenFinishedToolProps.js	2.20 KB	lrw-r--r--	2026-03-05 22:57:38	Edit Download recursive recursive

Directory Contents