feat(puck context):added iframe ref to the puck context

packages/core/components/AutoFrame/index.tsx

@@ -8,6 +8,7 @@ import {
 } from "react";
 import hash from "object-hash";
 import { createPortal } from "react-dom";
+import { appContext } from "../Puck/context";
 
 const styleSelector = 'style, link[rel="stylesheet"]';
 
@@ -326,6 +327,7 @@ function AutoFrame({
   const [ctx, setCtx] = useState<AutoFrameContext>({});
   const ref = useRef<HTMLIFrameElement>(null);
   const [mountTarget, setMountTarget] = useState<HTMLElement | null>();
+  const { setIframe, iframe } = useContext(appContext);
 
   useEffect(() => {
     if (ref.current) {
@@ -334,6 +336,11 @@ function AutoFrame({
         window: ref.current.contentWindow || undefined,
       });
 
+      setIframe({
+        ...iframe,
+        ref: ref,
+      });
+
       setMountTarget(ref.current.contentDocument?.getElementById("frame-root"));
     }
   }, [ref, loaded]);

packages/core/components/Puck/context.tsx

@@ -78,6 +78,7 @@ export type AppContext<
   status: Status;
   setStatus: (status: Status) => void;
   iframe: IframeConfig;
+  setIframe: (iframe: IframeConfig) => void;
   safariFallbackMode?: boolean;
   globalPermissions?: Partial<Permissions>;
   selectedItem?: G["UserData"]["content"][0];
@@ -105,6 +106,7 @@ const defaultContext: AppContext = {
   status: "LOADING",
   setStatus: () => null,
   iframe: {},
+  setIframe: () => null,
   safariFallbackMode: false,
   globalPermissions: {},
   getPermissions: () => ({}),

packages/core/components/Puck/index.tsx

@@ -105,17 +105,17 @@ export function Puck<
   headerTitle?: string;
   headerPath?: string;
   viewports?: Viewports;
-  iframe?: IframeConfig;
+  iframe?: Omit<IframeConfig, "ref">;
   dnd?: {
     disableAutoScroll?: boolean;
   };
   initialHistory?: InitialHistory;
 }) {
-  const iframe: IframeConfig = {
+  const [iframe, setIframe] = useState<IframeConfig>({
     enabled: true,
     waitForStyles: true,
     ..._iframe,
-  };
+  });
 
   const [generatedAppState] = useState<G["UserAppState"]>(() => {
     const initial = { ...defaultAppState.ui, ...initialUi };
@@ -415,6 +415,7 @@ export function Puck<
           history,
           viewports,
           iframe,
+          setIframe,
           globalPermissions: {
             delete: true,
             drag: true,

packages/core/lib/use-puck.ts

@@ -7,6 +7,7 @@ export const usePuck = <UserConfig extends Config = Config>() => {
     config,
     history,
     dispatch,
+    iframe,
     selectedItem: currentItem,
     getPermissions,
     refreshPermissions,
@@ -30,5 +31,7 @@ export const usePuck = <UserConfig extends Config = Config>() => {
       historyStore: history.historyStore,
     },
     selectedItem: currentItem || null,
+    /** @description Iframe ref if enabled otherwise returns undefined */
+    iframeRef: iframe.ref,
   };
 };

packages/core/types/API/index.ts

@@ -14,6 +14,7 @@ export type Permissions = {
 export type IframeConfig = {
   enabled?: boolean;
   waitForStyles?: boolean;
+  ref?: React.RefObject<HTMLIFrameElement>;
 };
 
 export type OnAction<UserData extends Data = Data> = (