feat: add iframe override for style injection

measuredco · Aug 30, 2024 · 7cac376 · 7cac376
1 parent f0655f0
commit 7cac376
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 5 deletions.
diff --git a/apps/docs/pages/docs/api-reference/overrides.mdx b/apps/docs/pages/docs/api-reference/overrides.mdx
@@ -19,6 +19,7 @@ const overrides = {
 - [`fieldTypes`](overrides/field-types): Override each [field type](/docs/api-reference/fields).
 - [`header`](overrides/header): Override the header.
 - [`headerActions`](overrides/header-actions): Override the header actions. Return a fragment so your items appear inline.
+- [`iframe`](overrides/iframe): Override the root of the iframe. Useful for injecting styles.
 - [`outline`](overrides/outline): Override the outline.
 - [`preview`](overrides/preview): Override the drag-and-drop preview.
 - [`puck`](overrides/puck): Override the Puck children. This is the equivalent of passing in [`children`](/docs/api-reference/components/puck#children) to the [`<Puck>`](/docs/api-reference/components/puck) component.
diff --git a/apps/docs/pages/docs/api-reference/overrides/iframe.mdx b/apps/docs/pages/docs/api-reference/overrides/iframe.mdx
@@ -0,0 +1,36 @@
+---
+title: iframe
+---
+
+# iframe
+
+Override the root of the iframe.
+
+```tsx copy
+const overrides = {
+  iframe: ({ children, document }) => {
+    useEffect(() => {
+      if (document) {
+        document.body.setAttribute("style", "background: hotpink;");
+      }
+    }, [document]);
+
+    return <>{children}</>;
+  },
+};
+```
+
+## Props
+
+| Prop                    | Example   | Type      |
+| ----------------------- | --------- | --------- |
+| [`document`](#document) | `{}`      | Document  |
+| [`children`](#children) | `<div />` | ReactNode |
+
+### `document`
+
+The document of the iframe window.
+
+### `children`
+
+The default node for the iframe.
diff --git a/packages/core/components/Puck/components/Preview/index.tsx b/packages/core/components/Puck/components/Preview/index.tsx
@@ -1,18 +1,20 @@
 import { DropZone } from "../../../DropZone";
 import { rootDroppableId } from "../../../../lib/root-droppable-id";
-import { ReactNode, useCallback, useRef } from "react";
+import { ReactNode, useCallback, useMemo, useRef } from "react";
 import { useAppContext } from "../../context";
 import AutoFrame from "../../../AutoFrame";
 import styles from "./styles.module.css";
 import { getClassNameFactory } from "../../../../lib";
 import { DefaultRootProps } from "../../../../types/Config";
+import { FrameContextConsumer } from "react-frame-component";
 
 const getClassName = getClassNameFactory("PuckPreview", styles);
 
 type PageProps = DefaultRootProps & { children: ReactNode };
 
 export const Preview = ({ id = "puck-preview" }: { id?: string }) => {
-  const { config, dispatch, state, setStatus, iframe } = useAppContext();
+  const { config, dispatch, state, setStatus, iframe, overrides } =
+    useAppContext();
 
   const Page = useCallback<React.FC<PageProps>>(
     (pageProps) =>
@@ -29,6 +31,8 @@ export const Preview = ({ id = "puck-preview" }: { id?: string }) => {
     [config.root]
   );
 
+  const Frame = useMemo(() => overrides.iframe || "div", [overrides]);
+
   // DEPRECATED
   const rootProps = state.data.root.props || state.data.root;
 
@@ -52,9 +56,17 @@ export const Preview = ({ id = "puck-preview" }: { id?: string }) => {
             setStatus("READY");
           }}
         >
-          <Page dispatch={dispatch} state={state} {...rootProps}>
-            <DropZone zone={rootDroppableId} />
-          </Page>
+          <FrameContextConsumer>
+            {({ document }) => {
+              return (
+                <Frame document={document}>
+                  <Page dispatch={dispatch} state={state} {...rootProps}>
+                    <DropZone zone={rootDroppableId} />
+                  </Page>
+                </Frame>
+              );
+            }}
+          </FrameContextConsumer>
         </AutoFrame>
       ) : (
         <div id="preview-frame" className={getClassName("frame")}>

diff --git a/packages/core/types/Overrides.ts b/packages/core/types/Overrides.ts
@@ -48,6 +48,7 @@ export type Overrides = OverridesGeneric<{
   }>;
   components: RenderFunc;
   componentItem: RenderFunc<{ children: ReactNode; name: string }>;
+  iframe: RenderFunc<{ children: ReactNode; document?: Document }>;
   outline: RenderFunc;
   puck: RenderFunc;
 }>;