Skip to content

Commit

Permalink
refactor: support non-transformed iframes
Browse files Browse the repository at this point in the history
  • Loading branch information
chrisvxd committed Oct 31, 2024
1 parent 25d9218 commit b75af9a
Showing 1 changed file with 29 additions and 1 deletion.
30 changes: 29 additions & 1 deletion packages/core/components/Puck/components/Preview/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { DropZone } from "../../../DropZone";
import { rootDroppableId } from "../../../../lib/root-droppable-id";
import { ReactNode, useCallback, useEffect, useRef } from "react";
import { ReactNode, RefObject, useCallback, useEffect, useRef } from "react";
import { useAppContext } from "../../context";
import AutoFrame from "../../../AutoFrame";
import styles from "./styles.module.css";
Expand All @@ -11,6 +11,32 @@ const getClassName = getClassNameFactory("PuckPreview", styles);

type PageProps = DefaultRootProps & { children: ReactNode };

const useBubbleIframeEvents = (ref: RefObject<HTMLIFrameElement>) => {
useEffect(() => {
if (ref.current) {
const iframe = ref.current!;

// NB pointermove doesn't trigger whilst dragging on iframes
iframe.contentWindow?.addEventListener("mousemove", function (event) {
const rect = iframe.getBoundingClientRect();

// NB this is a different event
const evt = new CustomEvent("pointermove", {
bubbles: true,
cancelable: false,
}) as any;

const scaleFactor =
rect.width / (iframe.contentWindow?.innerWidth || 1);

evt.clientX = event.clientX * scaleFactor + rect.left;
evt.clientY = event.clientY * scaleFactor + rect.top;

iframe.dispatchEvent(evt);
});
}
}, [ref]);
};
export const Preview = ({ id = "puck-preview" }: { id?: string }) => {
const { config, dispatch, state, setStatus, iframe } = useAppContext();

Expand All @@ -34,6 +60,8 @@ export const Preview = ({ id = "puck-preview" }: { id?: string }) => {

const ref = useRef<HTMLIFrameElement>(null);

useBubbleIframeEvents(ref);

return (
<div
className={getClassName()}
Expand Down

0 comments on commit b75af9a

Please sign in to comment.