Isolating Mantine Providers #7505

RampantDespair · 2025-02-18T21:27:31Z

RampantDespair
Feb 18, 2025

Hey there, currently trying to isolate an iframe completely on my NextJs app, however despite overriding the Provider, it's theme and it's manager, it still remains linked to the parent component.
I was wondering if anyone had been able to achieve something like this, or if it's possible at all?

"use client";

import {
  ActionIcon,
  Tooltip,
  useComputedColorScheme,
  useMantineColorScheme,
} from "@mantine/core";
import { IconMoon, IconSun } from "@tabler/icons-react";
import classes from "./theme.module.scss";

export function ButtonTheme() {
  const { setColorScheme } = useMantineColorScheme();
  const computedColorScheme = useComputedColorScheme("dark", {
    getInitialValueInEffect: true,
  });

  return (
    <Tooltip
      label={`Switch to ${computedColorScheme === "light" ? "dark" : "light"} mode`}
    >
      <ActionIcon
        onClick={() =>
          setColorScheme(computedColorScheme === "light" ? "dark" : "light")
        }
        variant="default"
        size="xl"
        aria-label="Toggle color scheme"
      >
        <IconSun className={classes.light} size={22} stroke={1.5} />
        <IconMoon className={classes.dark} size={22} stroke={1.5} />
      </ActionIcon>
    </Tooltip>
  );
}

"use client";

import {
  ColorSchemeScript,
  createTheme,
  MantineColorScheme,
  MantineColorSchemeManager,
  MantineProvider,
} from "@mantine/core";
import { ModalsProvider } from "@mantine/modals";
import React, { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { createRoot, Root } from "react-dom/client";

interface IsolatedFrameProps {
  children: React.ReactNode;
  style?: React.CSSProperties;
  defaultColorScheme?: MantineColorScheme;
}

export function IsolatedFrame({
  children,
  style,
  defaultColorScheme = "dark",
}: Readonly<IsolatedFrameProps>) {
  const iframeRef = useRef<HTMLIFrameElement>(null);
  const rootRef = useRef<Root | null>(null);
  const [colorScheme, setColorScheme] =
    useState<MantineColorScheme>(defaultColorScheme);
  const [updateSubscriber, setUpdateSubscriber] = useState<
    ((colorScheme: MantineColorScheme) => void) | null
  >(null);

  const isolatedTheme = createTheme({
    /* Put your mantine theme override here */
  });

  const isolatedManager: MantineColorSchemeManager = {
    get: (defaultValue) => colorScheme || defaultValue,
    set: (value) => {
      setColorScheme(value);
      updateSubscriber?.(value);
    },
    subscribe: (onUpdate) => {
      setUpdateSubscriber(() => onUpdate);
    },
    unsubscribe: () => {
      setUpdateSubscriber(null);
    },
    clear: () => {
      setColorScheme(defaultColorScheme);
      updateSubscriber?.(defaultColorScheme);
    },
  };

  useEffect(() => {
    const iframe = iframeRef.current;
    if (!iframe?.contentDocument) return;

    const iframeDocument = iframe.contentDocument;

    if (!iframeDocument.getElementById("isolated-root")) {
      iframeDocument.open();
      iframeDocument.write(`
        <html>
          <head></head>
          <body>
            <div id="isolated-root"></div>
            <div id="mantine-modals"></div>
          </body>
        </html>
      `);
      iframeDocument.close();

      const portalContainer = iframeDocument.head;
      if (portalContainer) {
        const scriptRoot = createRoot(portalContainer);
        scriptRoot.render(
          createPortal(
            <ColorSchemeScript defaultColorScheme="dark" />,
            portalContainer,
          ),
        );
      }
    }

    const cloneParentStyles = () => {
      const existingStyles = iframeDocument.querySelectorAll(
        'link[rel="stylesheet"], style',
      );
      existingStyles.forEach((style) => style.remove());

      document
        .querySelectorAll('link[rel="stylesheet"], style')
        .forEach((style) => {
          iframeDocument.head.appendChild(style.cloneNode(true));
        });
    };

    cloneParentStyles();

    const observer = new MutationObserver(cloneParentStyles);
    observer.observe(document.head, { childList: true, subtree: true });

    return () => {
      observer.disconnect();
    };
  }, []);

  useEffect(() => {
    const iframe = iframeRef.current;
    if (!iframe?.contentDocument) return;

    const container = iframe.contentDocument.getElementById("isolated-root");
    const modalsContainer =
      iframe.contentDocument.getElementById("mantine-modals");

    if (container && modalsContainer) {
      if (!rootRef.current) {
        rootRef.current = createRoot(container);
      }

      rootRef.current.render(
        <MantineProvider
          theme={isolatedTheme}
          colorSchemeManager={isolatedManager}
          defaultColorScheme={colorScheme}
        >
          <ModalsProvider
            modalProps={{
              portalProps: {
                target: modalsContainer,
              },
            }}
          >
            {children}
          </ModalsProvider>
        </MantineProvider>,
      );
    }

    return () => {};
  }, [children, colorScheme, isolatedManager, isolatedTheme]);

  useEffect(() => {
    return () => {
      if (rootRef.current) {
        rootRef.current.unmount();
        rootRef.current = null;
      }
    };
  }, []);

  return (
    <iframe
      title="Isolated Frame"
      ref={iframeRef}
      style={{
        width: "350px",
        height: "500px",
        border: "1px solid black",
        ...style,
      }}
    />
  );
}

export default IsolatedFrame;

As a MRE:

import "@mantine/core/styles.css";

import { ButtonTheme } from "@/components/buttons/theme/theme";
import IsolatedFrame from "@/components/wrappers/isolated-frame";
import {
 ColorSchemeScript,
 createTheme,
 mantineHtmlProps,
 MantineProvider,
 MantineThemeOverride,
} from "@mantine/core";
import { ModalsProvider } from "@mantine/modals";
import { ReactNode } from "react";

export default function RootLayout({
 children,
}: Readonly<{
 children: ReactNode;
}>) {
 const theme: MantineThemeOverride = createTheme({});

 return (
   <html lang="en" {...mantineHtmlProps}>
     <head>
       <ColorSchemeScript defaultColorScheme="dark" />
     </head>
     <body>
       <MantineProvider defaultColorScheme="dark" theme={theme}>
         <ModalsProvider>
           <ButtonTheme />
           <IsolatedFrame>
             <ButtonTheme />
           </IsolatedFrame>
         </ModalsProvider>
       </MantineProvider>
     </body>
   </html>
 );
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mantine

Isolating Mantine Providers #7505

{{title}}

Replies: 0 comments

Select a reply

Mantine

Isolating Mantine Providers #7505

RampantDespair Feb 18, 2025

Replies: 0 comments

RampantDespair
Feb 18, 2025