@oberoncms/core
Version:
OberonCMS is a cloud deployable CMS written in typescript based on the Puck visual editor
50 lines (49 loc) • 1.63 kB
JavaScript
"use client";
import { jsx, Fragment } from "react/jsx-runtime";
import "@puckeditor/core/puck.css";
import { useEffect } from "react";
const iframeTailwindSrc = "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4";
const PreviewIframe = ({
children,
iframeDocument,
previewMode
}) => {
useEffect(() => {
if (!iframeDocument) {
return;
}
if (!iframeDocument.getElementById("preview-frame-tailwind")) {
const tailwindScript = iframeDocument.createElement("script");
tailwindScript.setAttribute("id", "preview-frame-tailwind");
tailwindScript.setAttribute("src", iframeTailwindSrc);
iframeDocument.head.appendChild(tailwindScript);
}
iframeDocument.body.classList.add(...document.body.classList);
const syncPreviewTheme = () => {
const shouldUseDarkMode = previewMode === "dark" || previewMode === "follow" && document.documentElement.classList.contains("dark");
iframeDocument.documentElement.classList.toggle("dark", shouldUseDarkMode);
};
syncPreviewTheme();
if (previewMode !== "follow") {
return;
}
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.type === "attributes" && mutation.attributeName === "class") {
syncPreviewTheme();
}
}
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
return () => {
observer.disconnect();
};
}, [iframeDocument, previewMode]);
return /* @__PURE__ */ jsx(Fragment, { children });
};
export {
PreviewIframe
};