@gravity-ui/page-constructor 8.5.0-alpha.5 → 8.5.0-alpha.7

package/build/cjs/common/constants.d.ts

@@ -0,0 +1 @@
+export declare const POST_MESSAGE_SOURCE = "page-constructor-editor";

package/build/cjs/common/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.POST_MESSAGE_SOURCE = void 0;
+exports.POST_MESSAGE_SOURCE = 'page-constructor-editor';
+//# sourceMappingURL=constants.js.map

package/build/cjs/common/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"../../../src","sources":["common/constants.ts"],"names":[],"mappings":";;;AAAa,QAAA,mBAAmB,GAAG,yBAAyB,CAAC","sourcesContent":["export const POST_MESSAGE_SOURCE = 'page-constructor-editor';\n"]}

package/build/cjs/common/postMessage.d.ts

@@ -1,4 +1,5 @@
 import { ActionMessageTypes, EventMessageTypes } from "./types/index.js";
+export declare function isValidPostMessage(data: unknown): data is Record<string, unknown>;
 export declare function requestActionPostMessage<K extends keyof ActionMessageTypes>(action: K, data: ActionMessageTypes[K], destinationElement: Window): void;
 export declare function listenPostMessageEvents<K extends keyof EventMessageTypes>(action: K, callback: (data: EventMessageTypes[K]) => void): () => void;
 export declare function usePostMessageAPIListener<K extends keyof EventMessageTypes>(action: K, callback: (data: EventMessageTypes[K]) => void, deps?: unknown[]): void;

package/build/cjs/common/postMessage.js

@@ -1,26 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isValidPostMessage = isValidPostMessage;
 exports.requestActionPostMessage = requestActionPostMessage;
 exports.listenPostMessageEvents = listenPostMessageEvents;
 exports.usePostMessageAPIListener = usePostMessageAPIListener;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const constants_1 = require("./constants.js");
+function isValidPostMessage(data) {
+    return (typeof data === 'object' &&
+        data !== null &&
+        data.source === constants_1.POST_MESSAGE_SOURCE);
+}
 function requestActionPostMessage(action, data, destinationElement) {
-    const message = { action, data };
+    const message = { action, data, source: constants_1.POST_MESSAGE_SOURCE };
     destinationElement.postMessage(message, '*');
 }
 function listenPostMessageEvents(action, callback) {
     const onMessage = (e) => {
+        if (!isValidPostMessage(e.data)) {
+            return undefined;
+        }
         const message = e.data;
-        if ('action' in message && message.action === action) {
+        if (message.action === action) {
             return callback(message.data);
         }
         return undefined;
     };
     window.addEventListener('message', onMessage);
-    return () => {
-        window.removeEventListener('message', onMessage);
-    };
+    return () => window.removeEventListener('message', onMessage);
 }
 function usePostMessageAPIListener(action, callback, deps = []) {
     React.useEffect(() => {

package/build/cjs/common/postMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"postMessage.js","sourceRoot":"../../../src","sources":["common/postMessage.ts"],"names":[],"mappings":";;AAIA,4DAOC;AAED,0DAmBC;AAED,8DASC;;AA3CD,qDAA+B;AAI/B,SAAgB,wBAAwB,CACpC,MAAS,EACT,IAA2B,EAC3B,kBAA0B;IAE1B,MAAM,OAAO,GAAG,EAAC,MAAM,EAAE,IAAI,EAA6B,CAAC;IAC3D,kBAAkB,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AACjD,CAAC;AAED,SAAgB,uBAAuB,CACnC,MAAS,EACT,QAA8C;IAE9C,MAAM,SAAS,GAAG,CAAC,CAAe,EAAE,EAAE;QAClC,MAAM,OAAO,GAAG,CAAC,CAAC,IAAgC,CAAC;QAEnD,IAAI,QAAQ,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YACnD,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,SAAS,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,GAAG,EAAE;QACR,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IACrD,CAAC,CAAC;AACN,CAAC;AAED,SAAgB,yBAAyB,CACrC,MAAS,EACT,QAA8C,EAC9C,OAAkB,EAAE;IAEpB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,OAAO,uBAAuB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QACjD,uDAAuD;IAC3D,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;AAClB,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ActionMessageTypes, EventMessageTypes, PostMessageAPIMessage} from './types';\n\nexport function requestActionPostMessage<K extends keyof ActionMessageTypes>(\n    action: K,\n    data: ActionMessageTypes[K],\n    destinationElement: Window,\n) {\n    const message = {action, data} as PostMessageAPIMessage<K>;\n    destinationElement.postMessage(message, '*');\n}\n\nexport function listenPostMessageEvents<K extends keyof EventMessageTypes>(\n    action: K,\n    callback: (data: EventMessageTypes[K]) => void,\n) {\n    const onMessage = (e: MessageEvent) => {\n        const message = e.data as PostMessageAPIMessage<K>;\n\n        if ('action' in message && message.action === action) {\n            return callback(message.data);\n        }\n\n        return undefined;\n    };\n\n    window.addEventListener('message', onMessage);\n\n    return () => {\n        window.removeEventListener('message', onMessage);\n    };\n}\n\nexport function usePostMessageAPIListener<K extends keyof EventMessageTypes>(\n    action: K,\n    callback: (data: EventMessageTypes[K]) => void,\n    deps: unknown[] = [],\n) {\n    React.useEffect(() => {\n        return listenPostMessageEvents(action, callback);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [...deps]);\n}\n"]}
+{"version":3,"file":"postMessage.js","sourceRoot":"../../../src","sources":["common/postMessage.ts"],"names":[],"mappings":";;AAKA,gDAMC;AAED,4DAOC;AAED,0DAmBC;AAED,8DASC;;AApDD,qDAA+B;AAE/B,8CAAgD;AAGhD,SAAgB,kBAAkB,CAAC,IAAa;IAC5C,OAAO,CACH,OAAO,IAAI,KAAK,QAAQ;QACxB,IAAI,KAAK,IAAI;QACZ,IAAgC,CAAC,MAAM,KAAK,+BAAmB,CACnE,CAAC;AACN,CAAC;AAED,SAAgB,wBAAwB,CACpC,MAAS,EACT,IAA2B,EAC3B,kBAA0B;IAE1B,MAAM,OAAO,GAAG,EAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,+BAAmB,EAA6B,CAAC;IACxF,kBAAkB,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AACjD,CAAC;AAED,SAAgB,uBAAuB,CACnC,MAAS,EACT,QAA8C;IAE9C,MAAM,SAAS,GAAG,CAAC,CAAe,EAAE,EAAE;QAClC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;YAC9B,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,MAAM,OAAO,GAAG,CAAC,CAAC,IAAgC,CAAC;QACnD,IAAI,OAAO,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YAC5B,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,SAAS,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAC9C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAClE,CAAC;AAED,SAAgB,yBAAyB,CACrC,MAAS,EACT,QAA8C,EAC9C,OAAkB,EAAE;IAEpB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,OAAO,uBAAuB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QACjD,uDAAuD;IAC3D,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;AAClB,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {POST_MESSAGE_SOURCE} from './constants';\nimport {ActionMessageTypes, EventMessageTypes, PostMessageAPIMessage} from './types';\n\nexport function isValidPostMessage(data: unknown): data is Record<string, unknown> {\n    return (\n        typeof data === 'object' &&\n        data !== null &&\n        (data as Record<string, unknown>).source === POST_MESSAGE_SOURCE\n    );\n}\n\nexport function requestActionPostMessage<K extends keyof ActionMessageTypes>(\n    action: K,\n    data: ActionMessageTypes[K],\n    destinationElement: Window,\n) {\n    const message = {action, data, source: POST_MESSAGE_SOURCE} as PostMessageAPIMessage<K>;\n    destinationElement.postMessage(message, '*');\n}\n\nexport function listenPostMessageEvents<K extends keyof EventMessageTypes>(\n    action: K,\n    callback: (data: EventMessageTypes[K]) => void,\n) {\n    const onMessage = (e: MessageEvent) => {\n        if (!isValidPostMessage(e.data)) {\n            return undefined;\n        }\n\n        const message = e.data as PostMessageAPIMessage<K>;\n        if (message.action === action) {\n            return callback(message.data);\n        }\n\n        return undefined;\n    };\n\n    window.addEventListener('message', onMessage);\n    return () => window.removeEventListener('message', onMessage);\n}\n\nexport function usePostMessageAPIListener<K extends keyof EventMessageTypes>(\n    action: K,\n    callback: (data: EventMessageTypes[K]) => void,\n    deps: unknown[] = [],\n) {\n    React.useEffect(() => {\n        return listenPostMessageEvents(action, callback);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [...deps]);\n}\n"]}

package/build/cjs/common/types/actions.d.ts

@@ -3,12 +3,7 @@ import { EditorState } from "../store.js";
 import { RectMapEntry } from "./rect.js";
 export type MessageTypes = EventMessageTypes & ActionMessageTypes;
 export type EventMessageTypes = {
-    ON_INIT: {
-        height: number;
-    };
-    ON_RESIZE: {
-        height: number;
-    };
+    ON_INIT: {};
     ON_UPDATE_RECT_MAP: {
         rects: RectMapEntry[];
     };

package/build/cjs/common/types/actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"actions.js","sourceRoot":"../../../../src","sources":["common/types/actions.ts"],"names":[],"mappings":"","sourcesContent":["import {PageContent} from '../../models';\nimport {EditorState} from '../store';\n\nimport {RectMapEntry} from './rect';\n\nexport type MessageTypes = EventMessageTypes & ActionMessageTypes;\n\nexport type EventMessageTypes = {\n    ON_INIT: {height: number};\n    ON_RESIZE: {height: number};\n    ON_UPDATE_RECT_MAP: {rects: RectMapEntry[]};\n    ON_SUPPORTED_BLOCKS: Pick<EditorState, 'blocks' | 'subBlocks' | 'global'>;\n    ON_INITIAL_CONTENT: PageContent;\n    /** Iframe → parent: user pressed Cmd/Ctrl+Z while preview had focus (parent runs editor undo). */\n    ON_EDITOR_UNDO: {};\n    /** Iframe → parent: Cmd/Ctrl+Shift+Z */\n    ON_EDITOR_REDO: {};\n};\n\nexport type ActionMessageTypes = {\n    GET_SUPPORTED_BLOCKS: {};\n    GET_INITIAL_CONTENT: {};\n};\n"]}
+{"version":3,"file":"actions.js","sourceRoot":"../../../../src","sources":["common/types/actions.ts"],"names":[],"mappings":"","sourcesContent":["import {PageContent} from '../../models';\nimport {EditorState} from '../store';\n\nimport {RectMapEntry} from './rect';\n\nexport type MessageTypes = EventMessageTypes & ActionMessageTypes;\n\nexport type EventMessageTypes = {\n    ON_INIT: {};\n    ON_UPDATE_RECT_MAP: {rects: RectMapEntry[]};\n    ON_SUPPORTED_BLOCKS: Pick<EditorState, 'blocks' | 'subBlocks' | 'global'>;\n    ON_INITIAL_CONTENT: PageContent;\n    /** Iframe → parent: user pressed Cmd/Ctrl+Z while preview had focus (parent runs editor undo). */\n    ON_EDITOR_UNDO: {};\n    /** Iframe → parent: Cmd/Ctrl+Shift+Z */\n    ON_EDITOR_REDO: {};\n};\n\nexport type ActionMessageTypes = {\n    GET_SUPPORTED_BLOCKS: {};\n    GET_INITIAL_CONTENT: {};\n};\n"]}

package/build/cjs/common/types/messages.d.ts

@@ -1,9 +1,12 @@
+import { POST_MESSAGE_SOURCE } from "../constants.js";
 import { EditorState } from "../store.js";
 import { MessageTypes } from "./actions.js";
 export type PostMessageAPIMessage<K extends keyof MessageTypes> = {
     action: K;
     data: MessageTypes[K];
+    source: typeof POST_MESSAGE_SOURCE;
 };
 export type StoreSyncMessage = {
     state: EditorState;
+    source: typeof POST_MESSAGE_SOURCE;
 };

package/build/cjs/common/types/messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"messages.js","sourceRoot":"../../../../src","sources":["common/types/messages.ts"],"names":[],"mappings":"","sourcesContent":["import {EditorState} from '../store';\n\nimport {MessageTypes} from './actions';\n\nexport type PostMessageAPIMessage<K extends keyof MessageTypes> = {\n    action: K;\n    data: MessageTypes[K];\n};\n\nexport type StoreSyncMessage = {\n    state: EditorState;\n};\n"]}
+{"version":3,"file":"messages.js","sourceRoot":"../../../../src","sources":["common/types/messages.ts"],"names":[],"mappings":"","sourcesContent":["import {POST_MESSAGE_SOURCE} from '../constants';\nimport {EditorState} from '../store';\n\nimport {MessageTypes} from './actions';\n\nexport type PostMessageAPIMessage<K extends keyof MessageTypes> = {\n    action: K;\n    data: MessageTypes[K];\n    source: typeof POST_MESSAGE_SOURCE;\n};\n\nexport type StoreSyncMessage = {\n    state: EditorState;\n    source: typeof POST_MESSAGE_SOURCE;\n};\n"]}

package/build/cjs/context/editorStoreContext/PCEditorStoreProvider.js

@@ -4,6 +4,7 @@ exports.PCEditorStoreProvider = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
+const postMessage_1 = require("../../common/postMessage.js");
 const store_1 = require("../../common/store.js");
 const usePostMessageAPI_1 = require("../../hooks/usePostMessageAPI.js");
 const PCEditorStoreContext_1 = require("./PCEditorStoreContext.js");
@@ -16,13 +17,14 @@ const PCEditorStoreProvider = ({ children }) => {
     }, []);
     React.useEffect(() => {
         const onMessage = (e) => {
+            if (!(0, postMessage_1.isValidPostMessage)(e.data)) {
+                return;
+            }
             const message = e.data;
             syncStore(message);
         };
         window.addEventListener('message', onMessage);
-        return () => {
-            window.removeEventListener('message', onMessage);
-        };
+        return () => window.removeEventListener('message', onMessage);
     }, [syncStore]);
     // When Page Constructor runs inside the editor preview iframe, keyboard focus stays in the iframe
     // after clicking the canvas — parent window never receives Cmd+Z. Forward to parent via postMessage.

package/build/cjs/context/editorStoreContext/PCEditorStoreProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"PCEditorStoreProvider.js","sourceRoot":"../../../../src","sources":["context/editorStoreContext/PCEditorStoreProvider.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAI/B,iDAAoE;AAEpE,wEAAmE;AAEnE,oEAA4D;AAIrD,MAAM,qBAAqB,GAAG,CAAC,EAAC,QAAQ,EAA6B,EAAE,EAAE;IAC5E,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAyB,CAAC;IAEvD,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,OAAyB,EAAE,EAAE;QAC9D,IAAI,QAAQ,CAAC,OAAO,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC;YACpC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,SAAS,GAAG,CAAC,CAAe,EAAE,EAAE;YAClC,MAAM,OAAO,GAAG,CAAC,CAAC,IAAwB,CAAC;YAC3C,SAAS,CAAC,OAAO,CAAC,CAAC;QACvB,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAE9C,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,kGAAkG;IAClG,qGAAqG;IACrG,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YAC5D,OAAO,SAAS,CAAC;QACrB,CAAC;QACD,MAAM,SAAS,GAAG,CAAC,CAAgB,EAAE,EAAE;YACnC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE,CAAC;gBAC3D,OAAO;YACX,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA4B,CAAC;YAC9C,IAAI,MAAM,EAAE,OAAO,CAAC,mDAAmD,CAAC,EAAE,CAAC;gBACvE,OAAO;YACX,CAAC;YAED,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;gBACb,IAAA,wCAAoB,EAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;YAC/C,CAAC;iBAAM,CAAC;gBACJ,IAAA,wCAAoB,EAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;YAC/C,CAAC;QACL,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;IACxE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACpB,QAAQ,CAAC,OAAO,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAC7C,CAAC;IAED,OAAO,CACH,uBAAC,2CAAoB,CAAC,QAAQ,IAC1B,KAAK,EAAE;YACH,KAAK,EAAE,QAAQ,CAAC,OAAO;SAC1B,YAEA,QAAQ,GACmB,CACnC,CAAC;AACN,CAAC,CAAC;AA/DW,QAAA,qBAAqB,yBA+DhC","sourcesContent":["import * as React from 'react';\n\nimport {StoreApi} from 'zustand';\n\nimport {EditorState, createPCEditorStore} from '../../common/store';\nimport {StoreSyncMessage} from '../../common/types';\nimport {sendEventPostMessage} from '../../hooks/usePostMessageAPI';\n\nimport {PCEditorStoreContext} from './PCEditorStoreContext';\n\ninterface PCEditorStoreProviderProps extends React.PropsWithChildren {}\n\nexport const PCEditorStoreProvider = ({children}: PCEditorStoreProviderProps) => {\n    const storeRef = React.useRef<StoreApi<EditorState>>();\n\n    const syncStore = React.useCallback((message: StoreSyncMessage) => {\n        if (storeRef.current && message.state) {\n            storeRef.current.setState(message.state);\n        }\n    }, []);\n\n    React.useEffect(() => {\n        const onMessage = (e: MessageEvent) => {\n            const message = e.data as StoreSyncMessage;\n            syncStore(message);\n        };\n\n        window.addEventListener('message', onMessage);\n\n        return () => {\n            window.removeEventListener('message', onMessage);\n        };\n    }, [syncStore]);\n\n    // When Page Constructor runs inside the editor preview iframe, keyboard focus stays in the iframe\n    // after clicking the canvas — parent window never receives Cmd+Z. Forward to parent via postMessage.\n    React.useEffect(() => {\n        if (typeof window === 'undefined' || window.parent === window) {\n            return undefined;\n        }\n        const onKeyDown = (e: KeyboardEvent) => {\n            if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== 'z') {\n                return;\n            }\n\n            const target = e.target as HTMLElement | null;\n            if (target?.closest('input, textarea, select, [contenteditable=\"true\"]')) {\n                return;\n            }\n\n            e.preventDefault();\n\n            if (e.shiftKey) {\n                sendEventPostMessage('ON_EDITOR_REDO', {});\n            } else {\n                sendEventPostMessage('ON_EDITOR_UNDO', {});\n            }\n        };\n        window.addEventListener('keydown', onKeyDown, true);\n        return () => window.removeEventListener('keydown', onKeyDown, true);\n    }, []);\n\n    if (!storeRef.current) {\n        storeRef.current = createPCEditorStore();\n    }\n\n    return (\n        <PCEditorStoreContext.Provider\n            value={{\n                state: storeRef.current,\n            }}\n        >\n            {children}\n        </PCEditorStoreContext.Provider>\n    );\n};\n"]}
+{"version":3,"file":"PCEditorStoreProvider.js","sourceRoot":"../../../../src","sources":["context/editorStoreContext/PCEditorStoreProvider.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAI/B,6DAA4D;AAC5D,iDAAoE;AAEpE,wEAAmE;AAEnE,oEAA4D;AAIrD,MAAM,qBAAqB,GAAG,CAAC,EAAC,QAAQ,EAA6B,EAAE,EAAE;IAC5E,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAyB,CAAC;IAEvD,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,OAAyB,EAAE,EAAE;QAC9D,IAAI,QAAQ,CAAC,OAAO,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC;YACpC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,SAAS,GAAG,CAAC,CAAe,EAAE,EAAE;YAClC,IAAI,CAAC,IAAA,gCAAkB,EAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC9B,OAAO;YACX,CAAC;YAED,MAAM,OAAO,GAAG,CAAC,CAAC,IAAwB,CAAC;YAC3C,SAAS,CAAC,OAAO,CAAC,CAAC;QACvB,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAC9C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAClE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,kGAAkG;IAClG,qGAAqG;IACrG,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YAC5D,OAAO,SAAS,CAAC;QACrB,CAAC;QACD,MAAM,SAAS,GAAG,CAAC,CAAgB,EAAE,EAAE;YACnC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE,CAAC;gBAC3D,OAAO;YACX,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA4B,CAAC;YAC9C,IAAI,MAAM,EAAE,OAAO,CAAC,mDAAmD,CAAC,EAAE,CAAC;gBACvE,OAAO;YACX,CAAC;YAED,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;gBACb,IAAA,wCAAoB,EAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;YAC/C,CAAC;iBAAM,CAAC;gBACJ,IAAA,wCAAoB,EAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;YAC/C,CAAC;QACL,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;IACxE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACpB,QAAQ,CAAC,OAAO,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAC7C,CAAC;IAED,OAAO,CACH,uBAAC,2CAAoB,CAAC,QAAQ,IAC1B,KAAK,EAAE;YACH,KAAK,EAAE,QAAQ,CAAC,OAAO;SAC1B,YAEA,QAAQ,GACmB,CACnC,CAAC;AACN,CAAC,CAAC;AAhEW,QAAA,qBAAqB,yBAgEhC","sourcesContent":["import * as React from 'react';\n\nimport {StoreApi} from 'zustand';\n\nimport {isValidPostMessage} from '../../common/postMessage';\nimport {EditorState, createPCEditorStore} from '../../common/store';\nimport {StoreSyncMessage} from '../../common/types';\nimport {sendEventPostMessage} from '../../hooks/usePostMessageAPI';\n\nimport {PCEditorStoreContext} from './PCEditorStoreContext';\n\ninterface PCEditorStoreProviderProps extends React.PropsWithChildren {}\n\nexport const PCEditorStoreProvider = ({children}: PCEditorStoreProviderProps) => {\n    const storeRef = React.useRef<StoreApi<EditorState>>();\n\n    const syncStore = React.useCallback((message: StoreSyncMessage) => {\n        if (storeRef.current && message.state) {\n            storeRef.current.setState(message.state);\n        }\n    }, []);\n\n    React.useEffect(() => {\n        const onMessage = (e: MessageEvent) => {\n            if (!isValidPostMessage(e.data)) {\n                return;\n            }\n\n            const message = e.data as StoreSyncMessage;\n            syncStore(message);\n        };\n\n        window.addEventListener('message', onMessage);\n        return () => window.removeEventListener('message', onMessage);\n    }, [syncStore]);\n\n    // When Page Constructor runs inside the editor preview iframe, keyboard focus stays in the iframe\n    // after clicking the canvas — parent window never receives Cmd+Z. Forward to parent via postMessage.\n    React.useEffect(() => {\n        if (typeof window === 'undefined' || window.parent === window) {\n            return undefined;\n        }\n        const onKeyDown = (e: KeyboardEvent) => {\n            if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== 'z') {\n                return;\n            }\n\n            const target = e.target as HTMLElement | null;\n            if (target?.closest('input, textarea, select, [contenteditable=\"true\"]')) {\n                return;\n            }\n\n            e.preventDefault();\n\n            if (e.shiftKey) {\n                sendEventPostMessage('ON_EDITOR_REDO', {});\n            } else {\n                sendEventPostMessage('ON_EDITOR_UNDO', {});\n            }\n        };\n        window.addEventListener('keydown', onKeyDown, true);\n        return () => window.removeEventListener('keydown', onKeyDown, true);\n    }, []);\n\n    if (!storeRef.current) {\n        storeRef.current = createPCEditorStore();\n    }\n\n    return (\n        <PCEditorStoreContext.Provider\n            value={{\n                state: storeRef.current,\n            }}\n        >\n            {children}\n        </PCEditorStoreContext.Provider>\n    );\n};\n"]}

package/build/cjs/editor-v2/containers/MiddleScreen/MiddleScreen.css

@@ -88,6 +88,7 @@
 .pceditor-middle-screen__iframe-container {
   position: relative;
   margin: 0 auto;
+  overflow: hidden;
 }
 .pceditor-middle-screen__iframe-container_fullscreen {
   height: 100%;

package/build/cjs/editor-v2/containers/MiddleScreen/MiddleScreen.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
-const postMessage_1 = require("../../../common/postMessage.js");
+const parent_1 = tslib_1.__importDefault(require("@iframe-resizer/parent"));
 const iframeContext_1 = require("../../context/iframeContext/index.js");
 const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
 const cn_1 = require("../../utils/cn.js");
@@ -13,24 +13,28 @@ const Overlay_1 = tslib_1.__importDefault(require("../Overlay/Overlay.js"));
 const b = (0, cn_1.editorCn)('middle-screen');
 const MiddleScreen = ({ className, CustomTop }) => {
     const { zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode } = (0, useMainEditorStore_1.useMainEditorStore)();
-    const { url, setIframeElement } = React.useContext(iframeContext_1.IframeContext);
+    const { url, iframeElement, setIframeElement } = React.useContext(iframeContext_1.IframeContext);
     const [canvasRef, setCanvasRef] = React.useState(null);
-    const [height, setHeight] = React.useState(0);
     const canvasStyle = React.useMemo(() => ({
         transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,
         height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
         width: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
         maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
     }), [isPreviewMode, zoom]);
-    const onResize = React.useCallback((newHeight) => {
-        setHeight(newHeight + 100);
-    }, [setHeight]);
-    (0, postMessage_1.usePostMessageAPIListener)('ON_RESIZE', ({ height: newHeight }) => {
-        onResize(newHeight);
-    });
-    (0, postMessage_1.usePostMessageAPIListener)('ON_INIT', ({ height: newHeight }) => {
-        onResize(newHeight);
-    });
+    React.useEffect(() => {
+        if (!iframeElement || isPreviewMode) {
+            return undefined;
+        }
+        const [instance] = (0, parent_1.default)({
+            license: 'GPLv3',
+            direction: 'vertical',
+            checkOrigin: false,
+            waitForLoad: true,
+        }, iframeElement);
+        return () => {
+            instance?.iFrameResizer?.disconnect();
+        };
+    }, [iframeElement, isPreviewMode]);
     const isWithBackground = React.useMemo(() => {
         return deviceWidth !== '100%';
     }, [deviceWidth]);
@@ -42,7 +46,7 @@ const MiddleScreen = ({ className, CustomTop }) => {
                                             if (instance) {
                                                 setIframeElement(instance);
                                             }
-                                        }, className: b('iframe', { fullscreen: isPreviewMode }), src: url, height: isPreviewMode ? '100%' : `${height}px`, width: isPreviewMode ? '100%' : deviceWidth, frameBorder: "0", title: "Page Constructor Iframe" }), !isPreviewMode && ((0, jsx_runtime_1.jsx)(Overlay_1.default, { className: b('overlay'), canvasElement: canvasRef }))] }), isPreviewMode && ((0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "normal-contrast", className: b('exit-preview'), onClick: togglePreviewMode, "aria-label": "Exit preview mode", title: "Exit preview mode", size: "l", children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { size: 24, data: icons_1.Xmark }) })), !initialized && ((0, jsx_runtime_1.jsx)("div", { className: b('loading'), children: (0, jsx_runtime_1.jsx)(uikit_1.Loader, { size: 'l' }) }))] }) }) })] }));
+                                        }, className: b('iframe', { fullscreen: isPreviewMode }), src: url, width: isPreviewMode ? '100%' : deviceWidth, frameBorder: "0", title: "Page Constructor Iframe" }), !isPreviewMode && ((0, jsx_runtime_1.jsx)(Overlay_1.default, { className: b('overlay'), canvasElement: canvasRef }))] }), isPreviewMode && ((0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "normal-contrast", className: b('exit-preview'), onClick: togglePreviewMode, "aria-label": "Exit preview mode", title: "Exit preview mode", size: "l", children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { size: 24, data: icons_1.Xmark }) })), !initialized && ((0, jsx_runtime_1.jsx)("div", { className: b('loading'), children: (0, jsx_runtime_1.jsx)(uikit_1.Loader, { size: 'l' }) }))] }) }) })] }));
 };
 exports.default = MiddleScreen;
 //# sourceMappingURL=MiddleScreen.js.map

package/build/cjs/editor-v2/containers/MiddleScreen/MiddleScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiddleScreen.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/MiddleScreen/MiddleScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Xmark} from '@gravity-ui/icons';\nimport {Button, Icon, Loader} from '@gravity-ui/uikit';\n\nimport {usePostMessageAPIListener} from '../../../common/postMessage';\nimport {IframeContext} from '../../context/iframeContext';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\nimport Overlay from '../Overlay/Overlay';\n\nimport './MiddleScreen.scss';\n\nconst b = editorCn('middle-screen');\n\ninterface MiddleScreenProps {\n    className?: string;\n    CustomTop?: React.ElementType;\n}\n\nconst MiddleScreen = ({className, CustomTop}: MiddleScreenProps) => {\n    const {zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode} = useMainEditorStore();\n    const {url, setIframeElement} = React.useContext(IframeContext);\n    const [canvasRef, setCanvasRef] = React.useState<HTMLDivElement | null>(null);\n    const [height, setHeight] = React.useState(0);\n\n    const canvasStyle = React.useMemo(\n        () => ({\n            transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,\n            height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n            width: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n            maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n        }),\n        [isPreviewMode, zoom],\n    );\n\n    const onResize = React.useCallback(\n        (newHeight: number) => {\n            setHeight(newHeight + 100);\n        },\n        [setHeight],\n    );\n\n    usePostMessageAPIListener('ON_RESIZE', ({height: newHeight}) => {\n        onResize(newHeight);\n    });\n\n    usePostMessageAPIListener('ON_INIT', ({height: newHeight}) => {\n        onResize(newHeight);\n    });\n\n    const isWithBackground = React.useMemo(() => {\n        return deviceWidth !== '100%';\n    }, [deviceWidth]);\n\n    return (\n        <div className={b(null, className)}>\n            {CustomTop && !isPreviewMode ? (\n                <div className={b('topbar')}>\n                    <CustomTop />\n                </div>\n            ) : null}\n            <div className={b('content', {fullscreen: isPreviewMode})}>\n                <div className={b('wrapper')}>\n                    <div\n                        ref={setCanvasRef}\n                        className={b('canvas', {\n                            hidden: !initialized,\n                            fullscreen: isPreviewMode,\n                            withBackground: isWithBackground,\n                        })}\n                        style={canvasStyle}\n                    >\n                        <div\n                            className={b('iframe-container', {fullscreen: isPreviewMode})}\n                            style={{width: isPreviewMode ? '100%' : deviceWidth}}\n                        >\n                            <iframe\n                                ref={(instance) => {\n                                    if (instance) {\n                                        setIframeElement(instance);\n                                    }\n                                }}\n                                className={b('iframe', {fullscreen: isPreviewMode})}\n                                src={url}\n                                height={isPreviewMode ? '100%' : `${height}px`}\n                                width={isPreviewMode ? '100%' : deviceWidth}\n                                frameBorder=\"0\"\n                                title=\"Page Constructor Iframe\"\n                            />\n                            {!isPreviewMode && (\n                                <Overlay className={b('overlay')} canvasElement={canvasRef} />\n                            )}\n                        </div>\n                        {isPreviewMode && (\n                            <Button\n                                view=\"normal-contrast\"\n                                className={b('exit-preview')}\n                                onClick={togglePreviewMode}\n                                aria-label=\"Exit preview mode\"\n                                title=\"Exit preview mode\"\n                                size=\"l\"\n                            >\n                                <Icon size={24} data={Xmark} />\n                            </Button>\n                        )}\n                        {!initialized && (\n                            <div className={b('loading')}>\n                                <Loader size={'l'} />\n                            </div>\n                        )}\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default MiddleScreen;\n"]}
+{"version":3,"file":"MiddleScreen.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/MiddleScreen/MiddleScreen.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,6CAAwC;AACxC,6CAAuD;AACvD,4EAAkD;AAElD,wEAA0D;AAC1D,0EAAkE;AAClE,0CAAwC;AACxC,4EAAyC;AAIzC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,eAAe,CAAC,CAAC;AAOpC,MAAM,YAAY,GAAG,CAAC,EAAC,SAAS,EAAE,SAAS,EAAoB,EAAE,EAAE;IAC/D,MAAM,EAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,iBAAiB,EAAC,GAAG,IAAA,uCAAkB,GAAE,CAAC;IAChG,MAAM,EAAC,GAAG,EAAE,aAAa,EAAE,gBAAgB,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,6BAAa,CAAC,CAAC;IAC/E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAE9E,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAC7B,GAAG,EAAE,CAAC,CAAC;QACH,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IAAI,IAAI;QACrD,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,GAAG;QACzD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,GAAG;QACxD,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,GAAG;KAC9D,CAAC,EACF,CAAC,aAAa,EAAE,IAAI,CAAC,CACxB,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,CAAC,aAAa,IAAI,aAAa,EAAE,CAAC;YAClC,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAA,gBAAY,EAC3B;YACI,OAAO,EAAE,OAAO;YAChB,SAAS,EAAE,UAAU;YACrB,WAAW,EAAE,KAAK;YAClB,WAAW,EAAE,IAAI;SACpB,EACD,aAAa,CAChB,CAAC;QAEF,OAAO,GAAG,EAAE;YACR,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC;QAC1C,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC;IAEnC,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,OAAO,WAAW,KAAK,MAAM,CAAC;IAClC,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC7B,SAAS,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAC3B,gCAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvB,uBAAC,SAAS,KAAG,GACX,CACT,CAAC,CAAC,CAAC,IAAI,EACR,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,UAAU,EAAE,aAAa,EAAC,CAAC,YACrD,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACxB,iCACI,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE;4BACnB,MAAM,EAAE,CAAC,WAAW;4BACpB,UAAU,EAAE,aAAa;4BACzB,cAAc,EAAE,gBAAgB;yBACnC,CAAC,EACF,KAAK,EAAE,WAAW,aAElB,iCACI,SAAS,EAAE,CAAC,CAAC,kBAAkB,EAAE,EAAC,UAAU,EAAE,aAAa,EAAC,CAAC,EAC7D,KAAK,EAAE,EAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EAAC,aAEpD,mCACI,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE;4CACd,IAAI,QAAQ,EAAE,CAAC;gDACX,gBAAgB,CAAC,QAAQ,CAAC,CAAC;4CAC/B,CAAC;wCACL,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,UAAU,EAAE,aAAa,EAAC,CAAC,EACnD,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EAC3C,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,yBAAyB,GACjC,EACD,CAAC,aAAa,IAAI,CACf,uBAAC,iBAAO,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,aAAa,EAAE,SAAS,GAAI,CACjE,IACC,EACL,aAAa,IAAI,CACd,uBAAC,cAAM,IACH,IAAI,EAAC,iBAAiB,EACtB,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAC5B,OAAO,EAAE,iBAAiB,gBACf,mBAAmB,EAC9B,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,GAAG,YAER,uBAAC,YAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,aAAK,GAAI,GAC1B,CACZ,EACA,CAAC,WAAW,IAAI,CACb,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACxB,uBAAC,cAAM,IAAC,IAAI,EAAE,GAAG,GAAI,GACnB,CACT,IACC,GACJ,GACJ,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Xmark} from '@gravity-ui/icons';\nimport {Button, Icon, Loader} from '@gravity-ui/uikit';\nimport iframeResize from '@iframe-resizer/parent';\n\nimport {IframeContext} from '../../context/iframeContext';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\nimport Overlay from '../Overlay/Overlay';\n\nimport './MiddleScreen.scss';\n\nconst b = editorCn('middle-screen');\n\ninterface MiddleScreenProps {\n    className?: string;\n    CustomTop?: React.ElementType;\n}\n\nconst MiddleScreen = ({className, CustomTop}: MiddleScreenProps) => {\n    const {zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode} = useMainEditorStore();\n    const {url, iframeElement, setIframeElement} = React.useContext(IframeContext);\n    const [canvasRef, setCanvasRef] = React.useState<HTMLDivElement | null>(null);\n\n    const canvasStyle = React.useMemo(\n        () => ({\n            transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,\n            height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n            width: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n            maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,\n        }),\n        [isPreviewMode, zoom],\n    );\n\n    React.useEffect(() => {\n        if (!iframeElement || isPreviewMode) {\n            return undefined;\n        }\n\n        const [instance] = iframeResize(\n            {\n                license: 'GPLv3',\n                direction: 'vertical',\n                checkOrigin: false,\n                waitForLoad: true,\n            },\n            iframeElement,\n        );\n\n        return () => {\n            instance?.iFrameResizer?.disconnect();\n        };\n    }, [iframeElement, isPreviewMode]);\n\n    const isWithBackground = React.useMemo(() => {\n        return deviceWidth !== '100%';\n    }, [deviceWidth]);\n\n    return (\n        <div className={b(null, className)}>\n            {CustomTop && !isPreviewMode ? (\n                <div className={b('topbar')}>\n                    <CustomTop />\n                </div>\n            ) : null}\n            <div className={b('content', {fullscreen: isPreviewMode})}>\n                <div className={b('wrapper')}>\n                    <div\n                        ref={setCanvasRef}\n                        className={b('canvas', {\n                            hidden: !initialized,\n                            fullscreen: isPreviewMode,\n                            withBackground: isWithBackground,\n                        })}\n                        style={canvasStyle}\n                    >\n                        <div\n                            className={b('iframe-container', {fullscreen: isPreviewMode})}\n                            style={{width: isPreviewMode ? '100%' : deviceWidth}}\n                        >\n                            <iframe\n                                ref={(instance) => {\n                                    if (instance) {\n                                        setIframeElement(instance);\n                                    }\n                                }}\n                                className={b('iframe', {fullscreen: isPreviewMode})}\n                                src={url}\n                                width={isPreviewMode ? '100%' : deviceWidth}\n                                frameBorder=\"0\"\n                                title=\"Page Constructor Iframe\"\n                            />\n                            {!isPreviewMode && (\n                                <Overlay className={b('overlay')} canvasElement={canvasRef} />\n                            )}\n                        </div>\n                        {isPreviewMode && (\n                            <Button\n                                view=\"normal-contrast\"\n                                className={b('exit-preview')}\n                                onClick={togglePreviewMode}\n                                aria-label=\"Exit preview mode\"\n                                title=\"Exit preview mode\"\n                                size=\"l\"\n                            >\n                                <Icon size={24} data={Xmark} />\n                            </Button>\n                        )}\n                        {!initialized && (\n                            <div className={b('loading')}>\n                                <Loader size={'l'} />\n                            </div>\n                        )}\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default MiddleScreen;\n"]}

package/build/cjs/editor-v2/context/editorStore/MainEditorStoreProvider.js

@@ -4,6 +4,7 @@ exports.MainEditorStoreProvider = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
+const constants_1 = require("../../../common/constants.js");
 const utils_1 = require("../../../common/utils.js");
 const store_1 = require("../../store.js");
 const iframeContext_1 = require("../iframeContext/index.js");
@@ -14,6 +15,7 @@ const MainEditorStoreProvider = ({ children }) => {
     const sendPostMessage = React.useCallback((data) => {
         const message = {
             state: data,
+            source: constants_1.POST_MESSAGE_SOURCE,
         };
         if (iframeElement && iframeElement.contentWindow) {
             iframeElement.contentWindow.postMessage(message, '*');

package/build/cjs/editor-v2/context/editorStore/MainEditorStoreProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"MainEditorStoreProvider.js","sourceRoot":"../../../../../src","sources":["editor-v2/context/editorStore/MainEditorStoreProvider.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAM/B,oDAA+C;AAC/C,0CAA2D;AAC3D,6DAA+C;AAE/C,wEAAgE;AAIzD,MAAM,uBAAuB,GAAG,CAAC,EAAC,QAAQ,EAA0B,EAAE,EAAE;IAC3E,MAAM,EAAC,aAAa,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,6BAAa,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAyB,CAAC;IAEvD,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CACrC,CAAC,IAAiB,EAAE,EAAE;QAClB,MAAM,OAAO,GAAqB;YAC9B,KAAK,EAAE,IAAI;SACd,CAAC;QAEF,IAAI,aAAa,IAAI,aAAa,CAAC,aAAa,EAAE,CAAC;YAC/C,aAAa,CAAC,aAAa,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QAC1D,CAAC;IACL,CAAC,EACD,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACpB,QAAQ,CAAC,OAAO,GAAG,IAAA,yBAAiB,GAAE,CAAC;IAC3C,CAAC;IAED,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YAClC,MAAM,EAAC,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,QAAQ,EAAC,GAAG,KAAK,CAAC;YACtF,eAAe,CAAC,IAAA,gBAAQ,EAAC,EAAC,GAAG,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE,EAAC,CAAC,CAAC,CAAC;QACjF,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO,CACH,uBAAC,+CAAsB,CAAC,QAAQ,IAC5B,KAAK,EAAE;YACH,KAAK,EAAE,QAAQ,CAAC,OAAO;SAC1B,YAEA,QAAQ,GACqB,CACrC,CAAC;AACN,CAAC,CAAC;AArCW,QAAA,uBAAuB,2BAqClC","sourcesContent":["import * as React from 'react';\n\nimport {StoreApi} from 'zustand';\n\nimport {EditorState} from '../../../common/store';\nimport {StoreSyncMessage} from '../../../common/types';\nimport {removeFn} from '../../../common/utils';\nimport {EditorStore, createEditorStore} from '../../store';\nimport {IframeContext} from '../iframeContext';\n\nimport {MainEditorStoreContext} from './MainEditorStoreContext';\n\ninterface MainEditorProviderProps extends React.PropsWithChildren {}\n\nexport const MainEditorStoreProvider = ({children}: MainEditorProviderProps) => {\n    const {iframeElement} = React.useContext(IframeContext);\n    const storeRef = React.useRef<StoreApi<EditorStore>>();\n\n    const sendPostMessage = React.useCallback(\n        (data: EditorState) => {\n            const message: StoreSyncMessage = {\n                state: data,\n            };\n\n            if (iframeElement && iframeElement.contentWindow) {\n                iframeElement.contentWindow.postMessage(message, '*');\n            }\n        },\n        [iframeElement],\n    );\n\n    if (!storeRef.current) {\n        storeRef.current = createEditorStore();\n    }\n\n    React.useEffect(() => {\n        storeRef.current?.subscribe((state) => {\n            const {historyPast: _historyPast, historyFuture: _historyFuture, ...syncable} = state;\n            sendPostMessage(removeFn({...syncable, historyPast: [], historyFuture: []}));\n        });\n    }, [sendPostMessage]);\n\n    return (\n        <MainEditorStoreContext.Provider\n            value={{\n                state: storeRef.current,\n            }}\n        >\n            {children}\n        </MainEditorStoreContext.Provider>\n    );\n};\n"]}
+{"version":3,"file":"MainEditorStoreProvider.js","sourceRoot":"../../../../../src","sources":["editor-v2/context/editorStore/MainEditorStoreProvider.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAI/B,4DAA8D;AAG9D,oDAA+C;AAC/C,0CAA2D;AAC3D,6DAA+C;AAE/C,wEAAgE;AAIzD,MAAM,uBAAuB,GAAG,CAAC,EAAC,QAAQ,EAA0B,EAAE,EAAE;IAC3E,MAAM,EAAC,aAAa,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,6BAAa,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAyB,CAAC;IAEvD,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CACrC,CAAC,IAAiB,EAAE,EAAE;QAClB,MAAM,OAAO,GAAqB;YAC9B,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,+BAAmB;SAC9B,CAAC;QAEF,IAAI,aAAa,IAAI,aAAa,CAAC,aAAa,EAAE,CAAC;YAC/C,aAAa,CAAC,aAAa,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QAC1D,CAAC;IACL,CAAC,EACD,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACpB,QAAQ,CAAC,OAAO,GAAG,IAAA,yBAAiB,GAAE,CAAC;IAC3C,CAAC;IAED,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YAClC,MAAM,EAAC,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,QAAQ,EAAC,GAAG,KAAK,CAAC;YACtF,eAAe,CAAC,IAAA,gBAAQ,EAAC,EAAC,GAAG,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE,EAAC,CAAC,CAAC,CAAC;QACjF,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO,CACH,uBAAC,+CAAsB,CAAC,QAAQ,IAC5B,KAAK,EAAE;YACH,KAAK,EAAE,QAAQ,CAAC,OAAO;SAC1B,YAEA,QAAQ,GACqB,CACrC,CAAC;AACN,CAAC,CAAC;AAtCW,QAAA,uBAAuB,2BAsClC","sourcesContent":["import * as React from 'react';\n\nimport {StoreApi} from 'zustand';\n\nimport {POST_MESSAGE_SOURCE} from '../../../common/constants';\nimport {EditorState} from '../../../common/store';\nimport {StoreSyncMessage} from '../../../common/types';\nimport {removeFn} from '../../../common/utils';\nimport {EditorStore, createEditorStore} from '../../store';\nimport {IframeContext} from '../iframeContext';\n\nimport {MainEditorStoreContext} from './MainEditorStoreContext';\n\ninterface MainEditorProviderProps extends React.PropsWithChildren {}\n\nexport const MainEditorStoreProvider = ({children}: MainEditorProviderProps) => {\n    const {iframeElement} = React.useContext(IframeContext);\n    const storeRef = React.useRef<StoreApi<EditorStore>>();\n\n    const sendPostMessage = React.useCallback(\n        (data: EditorState) => {\n            const message: StoreSyncMessage = {\n                state: data,\n                source: POST_MESSAGE_SOURCE,\n            };\n\n            if (iframeElement && iframeElement.contentWindow) {\n                iframeElement.contentWindow.postMessage(message, '*');\n            }\n        },\n        [iframeElement],\n    );\n\n    if (!storeRef.current) {\n        storeRef.current = createEditorStore();\n    }\n\n    React.useEffect(() => {\n        storeRef.current?.subscribe((state) => {\n            const {historyPast: _historyPast, historyFuture: _historyFuture, ...syncable} = state;\n            sendPostMessage(removeFn({...syncable, historyPast: [], historyFuture: []}));\n        });\n    }, [sendPostMessage]);\n\n    return (\n        <MainEditorStoreContext.Provider\n            value={{\n                state: storeRef.current,\n            }}\n        >\n            {children}\n        </MainEditorStoreContext.Provider>\n    );\n};\n"]}

package/build/cjs/hooks/usePCEditorInitializeEvents.d.ts

@@ -2,6 +2,7 @@ import { BlockData } from "../constructor-items.js";
 import { BlockRegistry } from "../context/blockRegistryContext/index.js";
 import { Fields } from "../form-generator-v2/types.js";
 import { PageContent } from "../models/index.js";
+import "../utils/iframe-resizer.js";
 interface UseEditorInitializeProps {
     initialContent: PageContent;
     setContent: (content: PageContent) => void;

package/build/cjs/hooks/usePCEditorInitializeEvents.js

@@ -5,6 +5,8 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const rect_1 = require("../common/types/rect.js");
+// eslint-disable-next-line import/no-unassigned-import
+require("../utils/iframe-resizer.js");
 const usePCEditorStore_1 = require("./usePCEditorStore.js");
 const usePostMessageAPI_1 = require("./usePostMessageAPI.js");
 function collectRectMap(registry) {
@@ -38,10 +40,6 @@ const usePCEditorInitializeEvents = ({ initialContent, setContent, blocks, globa
             global: global || [],
         });
     });
-    const onResize = React.useCallback(() => {
-        const height = document.body.scrollHeight;
-        (0, usePostMessageAPI_1.sendEventPostMessage)('ON_RESIZE', { height });
-    }, []);
     React.useEffect(() => {
         if (!registry) {
             return undefined;
@@ -73,18 +71,7 @@ const usePCEditorInitializeEvents = ({ initialContent, setContent, blocks, globa
         };
     }, [registry]);
     React.useEffect(() => {
-        window.addEventListener('resize', onResize);
-        const observer = new ResizeObserver(onResize);
-        observer.observe(document.documentElement);
-        observer.observe(document.body);
-        return () => {
-            window.removeEventListener('resize', onResize);
-            observer.disconnect();
-        };
-    }, [onResize]);
-    React.useEffect(() => {
-        const height = document.body.scrollHeight;
-        (0, usePostMessageAPI_1.sendEventPostMessage)('ON_INIT', { height });
+        (0, usePostMessageAPI_1.sendEventPostMessage)('ON_INIT', {});
     }, []);
 };
 exports.usePCEditorInitializeEvents = usePCEditorInitializeEvents;

package/build/cjs/hooks/usePCEditorInitializeEvents.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePCEditorInitializeEvents.js","sourceRoot":"../../../src","sources":["hooks/usePCEditorInitializeEvents.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport _ from 'lodash';\n\nimport {toSerializableRect} from '../common/types/rect';\nimport {BlockData} from '../constructor-items';\nimport {BlockRegistry} from '../context/blockRegistryContext';\nimport {Fields} from '../form-generator-v2/types';\nimport {PageContent} from '../models';\n\nimport {usePCEditorStore} from './usePCEditorStore';\nimport {sendEventPostMessage, useInternalPostMessageAPIListener} from './usePostMessageAPI';\n\ninterface UseEditorInitializeProps {\n    initialContent: PageContent;\n    setContent: (content: PageContent) => void;\n    blocks: Array<BlockData>;\n    global?: Fields;\n    blockInputs?: Fields;\n    registry: BlockRegistry | null;\n}\n\nfunction collectRectMap(registry: BlockRegistry) {\n    return registry.getEntries().map(({path, element, dropZone}) => {\n        const rect = element.getClientRects().item(0) ?? element.getBoundingClientRect();\n        return {path, rect: toSerializableRect(rect), dropZone};\n    });\n}\n\nexport const usePCEditorInitializeEvents = ({\n    initialContent,\n    setContent,\n    blocks,\n    global,\n    blockInputs,\n    registry,\n}: UseEditorInitializeProps) => {\n    const {initialized, content} = usePCEditorStore();\n\n    React.useEffect(() => {\n        if (initialized) {\n            setContent(content);\n        }\n    }, [content, initialized, setContent]);\n\n    useInternalPostMessageAPIListener('GET_INITIAL_CONTENT', () => {\n        sendEventPostMessage('ON_INITIAL_CONTENT', initialContent);\n    });\n\n    useInternalPostMessageAPIListener('GET_SUPPORTED_BLOCKS', () => {\n        sendEventPostMessage('ON_SUPPORTED_BLOCKS', {\n            blocks: blocks.map((block) => ({\n                type: block.type,\n                schema: blockInputs?.length\n                    ? {\n                          ...block.schema,\n                          inputs: [...blockInputs, ...(block.schema?.inputs || [])],\n                      }\n                    : block.schema,\n            })),\n            subBlocks: [],\n            global: global || [],\n        });\n    });\n\n    const onResize = React.useCallback(() => {\n        const height = document.body.scrollHeight;\n        sendEventPostMessage('ON_RESIZE', {height});\n    }, []);\n\n    React.useEffect(() => {\n        if (!registry) {\n            return undefined;\n        }\n\n        let frame: number | null = null;\n\n        const sendRectMap = () => {\n            frame = null;\n            sendEventPostMessage('ON_UPDATE_RECT_MAP', {rects: collectRectMap(registry)});\n        };\n\n        const scheduleSend = () => {\n            if (frame !== null) {\n                return;\n            }\n            frame = requestAnimationFrame(sendRectMap);\n        };\n\n        const throttledSchedule = _.throttle(scheduleSend, 100, {leading: true, trailing: true});\n\n        const unsubscribe = registry.subscribe(throttledSchedule);\n        const observer = new ResizeObserver(throttledSchedule);\n        observer.observe(document.body);\n\n        // Initial push once registry is ready.\n        throttledSchedule();\n\n        return () => {\n            throttledSchedule.cancel();\n            unsubscribe();\n            observer.disconnect();\n            if (frame !== null) {\n                cancelAnimationFrame(frame);\n            }\n        };\n    }, [registry]);\n\n    React.useEffect(() => {\n        window.addEventListener('resize', onResize);\n        const observer = new ResizeObserver(onResize);\n        observer.observe(document.documentElement);\n        observer.observe(document.body);\n\n        return () => {\n            window.removeEventListener('resize', onResize);\n            observer.disconnect();\n        };\n    }, [onResize]);\n\n    React.useEffect(() => {\n        const height = document.body.scrollHeight;\n        sendEventPostMessage('ON_INIT', {height});\n    }, []);\n};\n"]}
+{"version":3,"file":"usePCEditorInitializeEvents.js","sourceRoot":"../../../src","sources":["hooks/usePCEditorInitializeEvents.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,4DAAuB;AAEvB,kDAAwD;AAKxD,uDAAuD;AACvD,sCAAiC;AAEjC,4DAAoD;AACpD,8DAA4F;AAW5F,SAAS,cAAc,CAAC,QAAuB;IAC3C,OAAO,QAAQ,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAC,EAAE,EAAE;QAC3D,MAAM,IAAI,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,qBAAqB,EAAE,CAAC;QACjF,OAAO,EAAC,IAAI,EAAE,IAAI,EAAE,IAAA,yBAAkB,EAAC,IAAI,CAAC,EAAE,QAAQ,EAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;AACP,CAAC;AAEM,MAAM,2BAA2B,GAAG,CAAC,EACxC,cAAc,EACd,UAAU,EACV,MAAM,EACN,MAAM,EACN,WAAW,EACX,QAAQ,GACe,EAAE,EAAE;IAC3B,MAAM,EAAC,WAAW,EAAE,OAAO,EAAC,GAAG,IAAA,mCAAgB,GAAE,CAAC;IAElD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,WAAW,EAAE,CAAC;YACd,UAAU,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvC,IAAA,qDAAiC,EAAC,qBAAqB,EAAE,GAAG,EAAE;QAC1D,IAAA,wCAAoB,EAAC,oBAAoB,EAAE,cAAc,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,IAAA,qDAAiC,EAAC,sBAAsB,EAAE,GAAG,EAAE;QAC3D,IAAA,wCAAoB,EAAC,qBAAqB,EAAE;YACxC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;gBAC3B,IAAI,EAAE,KAAK,CAAC,IAAI;gBAChB,MAAM,EAAE,WAAW,EAAE,MAAM;oBACvB,CAAC,CAAC;wBACI,GAAG,KAAK,CAAC,MAAM;wBACf,MAAM,EAAE,CAAC,GAAG,WAAW,EAAE,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,IAAI,EAAE,CAAC,CAAC;qBAC5D;oBACH,CAAC,CAAC,KAAK,CAAC,MAAM;aACrB,CAAC,CAAC;YACH,SAAS,EAAE,EAAE;YACb,MAAM,EAAE,MAAM,IAAI,EAAE;SACvB,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACZ,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,IAAI,KAAK,GAAkB,IAAI,CAAC;QAEhC,MAAM,WAAW,GAAG,GAAG,EAAE;YACrB,KAAK,GAAG,IAAI,CAAC;YACb,IAAA,wCAAoB,EAAC,oBAAoB,EAAE,EAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,EAAC,CAAC,CAAC;QAClF,CAAC,CAAC;QAEF,MAAM,YAAY,GAAG,GAAG,EAAE;YACtB,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;gBACjB,OAAO;YACX,CAAC;YACD,KAAK,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAC;QAC/C,CAAC,CAAC;QAEF,MAAM,iBAAiB,GAAG,gBAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC;QAEzF,MAAM,WAAW,GAAG,QAAQ,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;QAC1D,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,iBAAiB,CAAC,CAAC;QACvD,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEhC,uCAAuC;QACvC,iBAAiB,EAAE,CAAC;QAEpB,OAAO,GAAG,EAAE;YACR,iBAAiB,CAAC,MAAM,EAAE,CAAC;YAC3B,WAAW,EAAE,CAAC;YACd,QAAQ,CAAC,UAAU,EAAE,CAAC;YACtB,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;gBACjB,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAChC,CAAC;QACL,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAA,wCAAoB,EAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;AACX,CAAC,CAAC;AA7EW,QAAA,2BAA2B,+BA6EtC","sourcesContent":["import * as React from 'react';\n\nimport _ from 'lodash';\n\nimport {toSerializableRect} from '../common/types/rect';\nimport {BlockData} from '../constructor-items';\nimport {BlockRegistry} from '../context/blockRegistryContext';\nimport {Fields} from '../form-generator-v2/types';\nimport {PageContent} from '../models';\n// eslint-disable-next-line import/no-unassigned-import\nimport '../utils/iframe-resizer';\n\nimport {usePCEditorStore} from './usePCEditorStore';\nimport {sendEventPostMessage, useInternalPostMessageAPIListener} from './usePostMessageAPI';\n\ninterface UseEditorInitializeProps {\n    initialContent: PageContent;\n    setContent: (content: PageContent) => void;\n    blocks: Array<BlockData>;\n    global?: Fields;\n    blockInputs?: Fields;\n    registry: BlockRegistry | null;\n}\n\nfunction collectRectMap(registry: BlockRegistry) {\n    return registry.getEntries().map(({path, element, dropZone}) => {\n        const rect = element.getClientRects().item(0) ?? element.getBoundingClientRect();\n        return {path, rect: toSerializableRect(rect), dropZone};\n    });\n}\n\nexport const usePCEditorInitializeEvents = ({\n    initialContent,\n    setContent,\n    blocks,\n    global,\n    blockInputs,\n    registry,\n}: UseEditorInitializeProps) => {\n    const {initialized, content} = usePCEditorStore();\n\n    React.useEffect(() => {\n        if (initialized) {\n            setContent(content);\n        }\n    }, [content, initialized, setContent]);\n\n    useInternalPostMessageAPIListener('GET_INITIAL_CONTENT', () => {\n        sendEventPostMessage('ON_INITIAL_CONTENT', initialContent);\n    });\n\n    useInternalPostMessageAPIListener('GET_SUPPORTED_BLOCKS', () => {\n        sendEventPostMessage('ON_SUPPORTED_BLOCKS', {\n            blocks: blocks.map((block) => ({\n                type: block.type,\n                schema: blockInputs?.length\n                    ? {\n                          ...block.schema,\n                          inputs: [...blockInputs, ...(block.schema?.inputs || [])],\n                      }\n                    : block.schema,\n            })),\n            subBlocks: [],\n            global: global || [],\n        });\n    });\n\n    React.useEffect(() => {\n        if (!registry) {\n            return undefined;\n        }\n\n        let frame: number | null = null;\n\n        const sendRectMap = () => {\n            frame = null;\n            sendEventPostMessage('ON_UPDATE_RECT_MAP', {rects: collectRectMap(registry)});\n        };\n\n        const scheduleSend = () => {\n            if (frame !== null) {\n                return;\n            }\n            frame = requestAnimationFrame(sendRectMap);\n        };\n\n        const throttledSchedule = _.throttle(scheduleSend, 100, {leading: true, trailing: true});\n\n        const unsubscribe = registry.subscribe(throttledSchedule);\n        const observer = new ResizeObserver(throttledSchedule);\n        observer.observe(document.body);\n\n        // Initial push once registry is ready.\n        throttledSchedule();\n\n        return () => {\n            throttledSchedule.cancel();\n            unsubscribe();\n            observer.disconnect();\n            if (frame !== null) {\n                cancelAnimationFrame(frame);\n            }\n        };\n    }, [registry]);\n\n    React.useEffect(() => {\n        sendEventPostMessage('ON_INIT', {});\n    }, []);\n};\n"]}

package/build/cjs/hooks/usePostMessageAPI.js

@@ -5,22 +5,25 @@ exports.listenPostMessageActions = listenPostMessageActions;
 exports.useInternalPostMessageAPIListener = useInternalPostMessageAPIListener;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const constants_1 = require("../common/constants.js");
+const postMessage_1 = require("../common/postMessage.js");
 function sendEventPostMessage(action, data) {
-    const message = { action, data };
+    const message = { action, data, source: constants_1.POST_MESSAGE_SOURCE };
     window.parent.postMessage(message, '*');
 }
 function listenPostMessageActions(action, callback) {
     const onMessage = (e) => {
+        if (!(0, postMessage_1.isValidPostMessage)(e.data)) {
+            return undefined;
+        }
         const message = e.data;
-        if ('action' in message && message.action === action) {
+        if (message.action === action) {
             return callback(message.data);
         }
         return undefined;
     };
     window.addEventListener('message', onMessage);
-    return () => {
-        window.removeEventListener('message', onMessage);
-    };
+    return () => window.removeEventListener('message', onMessage);
 }
 function useInternalPostMessageAPIListener(action, callback) {
     React.useEffect(() => {

package/build/cjs/hooks/usePostMessageAPI.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePostMessageAPI.js","sourceRoot":"../../../src","sources":["hooks/usePostMessageAPI.ts"],"names":[],"mappings":";;AAKA,oDAMC;AAED,4DAmBC;AAED,8EAOC;;AAzCD,qDAA+B;AAK/B,SAAgB,oBAAoB,CAChC,MAAS,EACT,IAA0B;IAE1B,MAAM,OAAO,GAAG,EAAC,MAAM,EAAE,IAAI,EAA6B,CAAC;IAC3D,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AAC5C,CAAC;AAED,SAAgB,wBAAwB,CACpC,MAAS,EACT,QAA+C;IAE/C,MAAM,SAAS,GAAG,CAAC,CAAe,EAAE,EAAE;QAClC,MAAM,OAAO,GAAG,CAAC,CAAC,IAAgC,CAAC;QAEnD,IAAI,QAAQ,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YACnD,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,SAAS,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,GAAG,EAAE;QACR,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IACrD,CAAC,CAAC;AACN,CAAC;AAED,SAAgB,iCAAiC,CAC7C,MAAS,EACT,QAA+C;IAE/C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,OAAO,wBAAwB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtD,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;AAC3B,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {PostMessageAPIMessage} from '../common/types';\nimport {ActionMessageTypes, EventMessageTypes} from '../common/types/actions';\n\nexport function sendEventPostMessage<K extends keyof EventMessageTypes>(\n    action: K,\n    data: EventMessageTypes[K],\n) {\n    const message = {action, data} as PostMessageAPIMessage<K>;\n    window.parent.postMessage(message, '*');\n}\n\nexport function listenPostMessageActions<K extends keyof ActionMessageTypes>(\n    action: K,\n    callback: (data: ActionMessageTypes[K]) => void,\n) {\n    const onMessage = (e: MessageEvent) => {\n        const message = e.data as PostMessageAPIMessage<K>;\n\n        if ('action' in message && message.action === action) {\n            return callback(message.data);\n        }\n\n        return undefined;\n    };\n\n    window.addEventListener('message', onMessage);\n\n    return () => {\n        window.removeEventListener('message', onMessage);\n    };\n}\n\nexport function useInternalPostMessageAPIListener<K extends keyof ActionMessageTypes>(\n    action: K,\n    callback: (data: ActionMessageTypes[K]) => void,\n) {\n    React.useEffect(() => {\n        return listenPostMessageActions(action, callback);\n    }, [action, callback]);\n}\n"]}
+{"version":3,"file":"usePostMessageAPI.js","sourceRoot":"../../../src","sources":["hooks/usePostMessageAPI.ts"],"names":[],"mappings":";;AAOA,oDAMC;AAED,4DAmBC;AAED,8EAOC;;AA3CD,qDAA+B;AAE/B,sDAAwD;AACxD,0DAAyD;AAIzD,SAAgB,oBAAoB,CAChC,MAAS,EACT,IAA0B;IAE1B,MAAM,OAAO,GAAG,EAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,+BAAmB,EAA6B,CAAC;IACxF,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AAC5C,CAAC;AAED,SAAgB,wBAAwB,CACpC,MAAS,EACT,QAA+C;IAE/C,MAAM,SAAS,GAAG,CAAC,CAAe,EAAE,EAAE;QAClC,IAAI,CAAC,IAAA,gCAAkB,EAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;YAC9B,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,MAAM,OAAO,GAAG,CAAC,CAAC,IAAgC,CAAC;QACnD,IAAI,OAAO,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YAC5B,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,SAAS,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAC9C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAClE,CAAC;AAED,SAAgB,iCAAiC,CAC7C,MAAS,EACT,QAA+C;IAE/C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,OAAO,wBAAwB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtD,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;AAC3B,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {POST_MESSAGE_SOURCE} from '../common/constants';\nimport {isValidPostMessage} from '../common/postMessage';\nimport {PostMessageAPIMessage} from '../common/types';\nimport {ActionMessageTypes, EventMessageTypes} from '../common/types/actions';\n\nexport function sendEventPostMessage<K extends keyof EventMessageTypes>(\n    action: K,\n    data: EventMessageTypes[K],\n) {\n    const message = {action, data, source: POST_MESSAGE_SOURCE} as PostMessageAPIMessage<K>;\n    window.parent.postMessage(message, '*');\n}\n\nexport function listenPostMessageActions<K extends keyof ActionMessageTypes>(\n    action: K,\n    callback: (data: ActionMessageTypes[K]) => void,\n) {\n    const onMessage = (e: MessageEvent) => {\n        if (!isValidPostMessage(e.data)) {\n            return undefined;\n        }\n\n        const message = e.data as PostMessageAPIMessage<K>;\n        if (message.action === action) {\n            return callback(message.data);\n        }\n\n        return undefined;\n    };\n\n    window.addEventListener('message', onMessage);\n    return () => window.removeEventListener('message', onMessage);\n}\n\nexport function useInternalPostMessageAPIListener<K extends keyof ActionMessageTypes>(\n    action: K,\n    callback: (data: ActionMessageTypes[K]) => void,\n) {\n    React.useEffect(() => {\n        return listenPostMessageActions(action, callback);\n    }, [action, callback]);\n}\n"]}

package/build/cjs/utils/iframe-resizer.d.ts

@@ -0,0 +1,8 @@
+import '@iframe-resizer/child';
+declare module '@iframe-resizer/child' {
+    namespace iframeResizer {
+        interface IFramePageOptions {
+            license?: string;
+        }
+    }
+}

package/build/cjs/utils/iframe-resizer.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// `@iframe-resizer/child` reads `window.iFrameResizer` lazily, on the first
+// init message from the parent — not at module-load time. So setting the
+// config before/after the side-effect import is equivalent.
+// eslint-disable-next-line import/no-unassigned-import
+require("@iframe-resizer/child");
+if (typeof window !== 'undefined') {
+    window.iFrameResizer = { license: 'GPLv3' };
+}
+//# sourceMappingURL=iframe-resizer.js.map

package/build/cjs/utils/iframe-resizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iframe-resizer.js","sourceRoot":"../../../src","sources":["utils/iframe-resizer.ts"],"names":[],"mappings":";;AAAA,4EAA4E;AAC5E,yEAAyE;AACzE,4DAA4D;AAC5D,uDAAuD;AACvD,iCAA+B;AAa/B,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAChC,MAAM,CAAC,aAAa,GAAG,EAAC,OAAO,EAAE,OAAO,EAAC,CAAC;AAC9C,CAAC","sourcesContent":["// `@iframe-resizer/child` reads `window.iFrameResizer` lazily, on the first\n// init message from the parent — not at module-load time. So setting the\n// config before/after the side-effect import is equivalent.\n// eslint-disable-next-line import/no-unassigned-import\nimport '@iframe-resizer/child';\n\n// Augmenting the library's namespace to add the missing `license` field; the\n// shipped .d.ts has not caught up with the v5 runtime that requires it.\ndeclare module '@iframe-resizer/child' {\n    // eslint-disable-next-line @typescript-eslint/no-namespace\n    namespace iframeResizer {\n        interface IFramePageOptions {\n            license?: string;\n        }\n    }\n}\n\nif (typeof window !== 'undefined') {\n    window.iFrameResizer = {license: 'GPLv3'};\n}\n"]}

package/build/esm/common/constants.d.ts

@@ -0,0 +1 @@
+export declare const POST_MESSAGE_SOURCE = "page-constructor-editor";

package/build/esm/common/constants.js

@@ -0,0 +1,2 @@
+export const POST_MESSAGE_SOURCE = 'page-constructor-editor';
+//# sourceMappingURL=constants.js.map

package/build/esm/common/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"../../../src","sources":["common/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,yBAAyB,CAAC","sourcesContent":["export const POST_MESSAGE_SOURCE = 'page-constructor-editor';\n"]}

package/build/esm/common/postMessage.d.ts

@@ -1,4 +1,5 @@
 import { ActionMessageTypes, EventMessageTypes } from "./types/index.js";
+export declare function isValidPostMessage(data: unknown): data is Record<string, unknown>;
 export declare function requestActionPostMessage<K extends keyof ActionMessageTypes>(action: K, data: ActionMessageTypes[K], destinationElement: Window): void;
 export declare function listenPostMessageEvents<K extends keyof EventMessageTypes>(action: K, callback: (data: EventMessageTypes[K]) => void): () => void;
 export declare function usePostMessageAPIListener<K extends keyof EventMessageTypes>(action: K, callback: (data: EventMessageTypes[K]) => void, deps?: unknown[]): void;

package/build/esm/common/postMessage.js

@@ -1,20 +1,27 @@
 import * as React from 'react';
+import { POST_MESSAGE_SOURCE } from "./constants.js";
+export function isValidPostMessage(data) {
+    return (typeof data === 'object' &&
+        data !== null &&
+        data.source === POST_MESSAGE_SOURCE);
+}
 export function requestActionPostMessage(action, data, destinationElement) {
-    const message = { action, data };
+    const message = { action, data, source: POST_MESSAGE_SOURCE };
     destinationElement.postMessage(message, '*');
 }
 export function listenPostMessageEvents(action, callback) {
     const onMessage = (e) => {
+        if (!isValidPostMessage(e.data)) {
+            return undefined;
+        }
         const message = e.data;
-        if ('action' in message && message.action === action) {
+        if (message.action === action) {
             return callback(message.data);
         }
         return undefined;
     };
     window.addEventListener('message', onMessage);
-    return () => {
-        window.removeEventListener('message', onMessage);
-    };
+    return () => window.removeEventListener('message', onMessage);
 }
 export function usePostMessageAPIListener(action, callback, deps = []) {
     React.useEffect(() => {

package/build/esm/common/postMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"postMessage.js","sourceRoot":"../../../src","sources":["common/postMessage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,UAAU,wBAAwB,CACpC,MAAS,EACT,IAA2B,EAC3B,kBAA0B;IAE1B,MAAM,OAAO,GAAG,EAAC,MAAM,EAAE,IAAI,EAA6B,CAAC;IAC3D,kBAAkB,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AACjD,CAAC;AAED,MAAM,UAAU,uBAAuB,CACnC,MAAS,EACT,QAA8C;IAE9C,MAAM,SAAS,GAAG,CAAC,CAAe,EAAE,EAAE;QAClC,MAAM,OAAO,GAAG,CAAC,CAAC,IAAgC,CAAC;QAEnD,IAAI,QAAQ,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YACnD,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,SAAS,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,GAAG,EAAE;QACR,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IACrD,CAAC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,yBAAyB,CACrC,MAAS,EACT,QAA8C,EAC9C,OAAkB,EAAE;IAEpB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,OAAO,uBAAuB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QACjD,uDAAuD;IAC3D,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;AAClB,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ActionMessageTypes, EventMessageTypes, PostMessageAPIMessage} from './types';\n\nexport function requestActionPostMessage<K extends keyof ActionMessageTypes>(\n    action: K,\n    data: ActionMessageTypes[K],\n    destinationElement: Window,\n) {\n    const message = {action, data} as PostMessageAPIMessage<K>;\n    destinationElement.postMessage(message, '*');\n}\n\nexport function listenPostMessageEvents<K extends keyof EventMessageTypes>(\n    action: K,\n    callback: (data: EventMessageTypes[K]) => void,\n) {\n    const onMessage = (e: MessageEvent) => {\n        const message = e.data as PostMessageAPIMessage<K>;\n\n        if ('action' in message && message.action === action) {\n            return callback(message.data);\n        }\n\n        return undefined;\n    };\n\n    window.addEventListener('message', onMessage);\n\n    return () => {\n        window.removeEventListener('message', onMessage);\n    };\n}\n\nexport function usePostMessageAPIListener<K extends keyof EventMessageTypes>(\n    action: K,\n    callback: (data: EventMessageTypes[K]) => void,\n    deps: unknown[] = [],\n) {\n    React.useEffect(() => {\n        return listenPostMessageEvents(action, callback);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [...deps]);\n}\n"]}
+{"version":3,"file":"postMessage.js","sourceRoot":"../../../src","sources":["common/postMessage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,mBAAmB,EAAC,uBAAoB;AAGhD,MAAM,UAAU,kBAAkB,CAAC,IAAa;IAC5C,OAAO,CACH,OAAO,IAAI,KAAK,QAAQ;QACxB,IAAI,KAAK,IAAI;QACZ,IAAgC,CAAC,MAAM,KAAK,mBAAmB,CACnE,CAAC;AACN,CAAC;AAED,MAAM,UAAU,wBAAwB,CACpC,MAAS,EACT,IAA2B,EAC3B,kBAA0B;IAE1B,MAAM,OAAO,GAAG,EAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,mBAAmB,EAA6B,CAAC;IACxF,kBAAkB,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AACjD,CAAC;AAED,MAAM,UAAU,uBAAuB,CACnC,MAAS,EACT,QAA8C;IAE9C,MAAM,SAAS,GAAG,CAAC,CAAe,EAAE,EAAE;QAClC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;YAC9B,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,MAAM,OAAO,GAAG,CAAC,CAAC,IAAgC,CAAC;QACnD,IAAI,OAAO,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YAC5B,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,SAAS,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAC9C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAClE,CAAC;AAED,MAAM,UAAU,yBAAyB,CACrC,MAAS,EACT,QAA8C,EAC9C,OAAkB,EAAE;IAEpB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,OAAO,uBAAuB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QACjD,uDAAuD;IAC3D,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;AAClB,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {POST_MESSAGE_SOURCE} from './constants';\nimport {ActionMessageTypes, EventMessageTypes, PostMessageAPIMessage} from './types';\n\nexport function isValidPostMessage(data: unknown): data is Record<string, unknown> {\n    return (\n        typeof data === 'object' &&\n        data !== null &&\n        (data as Record<string, unknown>).source === POST_MESSAGE_SOURCE\n    );\n}\n\nexport function requestActionPostMessage<K extends keyof ActionMessageTypes>(\n    action: K,\n    data: ActionMessageTypes[K],\n    destinationElement: Window,\n) {\n    const message = {action, data, source: POST_MESSAGE_SOURCE} as PostMessageAPIMessage<K>;\n    destinationElement.postMessage(message, '*');\n}\n\nexport function listenPostMessageEvents<K extends keyof EventMessageTypes>(\n    action: K,\n    callback: (data: EventMessageTypes[K]) => void,\n) {\n    const onMessage = (e: MessageEvent) => {\n        if (!isValidPostMessage(e.data)) {\n            return undefined;\n        }\n\n        const message = e.data as PostMessageAPIMessage<K>;\n        if (message.action === action) {\n            return callback(message.data);\n        }\n\n        return undefined;\n    };\n\n    window.addEventListener('message', onMessage);\n    return () => window.removeEventListener('message', onMessage);\n}\n\nexport function usePostMessageAPIListener<K extends keyof EventMessageTypes>(\n    action: K,\n    callback: (data: EventMessageTypes[K]) => void,\n    deps: unknown[] = [],\n) {\n    React.useEffect(() => {\n        return listenPostMessageEvents(action, callback);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [...deps]);\n}\n"]}

package/build/esm/common/types/actions.d.ts

@@ -3,12 +3,7 @@ import { EditorState } from "../store.js";
 import { RectMapEntry } from "./rect.js";
 export type MessageTypes = EventMessageTypes & ActionMessageTypes;
 export type EventMessageTypes = {
-    ON_INIT: {
-        height: number;
-    };
-    ON_RESIZE: {
-        height: number;
-    };
+    ON_INIT: {};
     ON_UPDATE_RECT_MAP: {
         rects: RectMapEntry[];
     };

package/build/esm/common/types/actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"actions.js","sourceRoot":"../../../../src","sources":["common/types/actions.ts"],"names":[],"mappings":"","sourcesContent":["import {PageContent} from '../../models';\nimport {EditorState} from '../store';\n\nimport {RectMapEntry} from './rect';\n\nexport type MessageTypes = EventMessageTypes & ActionMessageTypes;\n\nexport type EventMessageTypes = {\n    ON_INIT: {height: number};\n    ON_RESIZE: {height: number};\n    ON_UPDATE_RECT_MAP: {rects: RectMapEntry[]};\n    ON_SUPPORTED_BLOCKS: Pick<EditorState, 'blocks' | 'subBlocks' | 'global'>;\n    ON_INITIAL_CONTENT: PageContent;\n    /** Iframe → parent: user pressed Cmd/Ctrl+Z while preview had focus (parent runs editor undo). */\n    ON_EDITOR_UNDO: {};\n    /** Iframe → parent: Cmd/Ctrl+Shift+Z */\n    ON_EDITOR_REDO: {};\n};\n\nexport type ActionMessageTypes = {\n    GET_SUPPORTED_BLOCKS: {};\n    GET_INITIAL_CONTENT: {};\n};\n"]}
+{"version":3,"file":"actions.js","sourceRoot":"../../../../src","sources":["common/types/actions.ts"],"names":[],"mappings":"","sourcesContent":["import {PageContent} from '../../models';\nimport {EditorState} from '../store';\n\nimport {RectMapEntry} from './rect';\n\nexport type MessageTypes = EventMessageTypes & ActionMessageTypes;\n\nexport type EventMessageTypes = {\n    ON_INIT: {};\n    ON_UPDATE_RECT_MAP: {rects: RectMapEntry[]};\n    ON_SUPPORTED_BLOCKS: Pick<EditorState, 'blocks' | 'subBlocks' | 'global'>;\n    ON_INITIAL_CONTENT: PageContent;\n    /** Iframe → parent: user pressed Cmd/Ctrl+Z while preview had focus (parent runs editor undo). */\n    ON_EDITOR_UNDO: {};\n    /** Iframe → parent: Cmd/Ctrl+Shift+Z */\n    ON_EDITOR_REDO: {};\n};\n\nexport type ActionMessageTypes = {\n    GET_SUPPORTED_BLOCKS: {};\n    GET_INITIAL_CONTENT: {};\n};\n"]}

package/build/esm/common/types/messages.d.ts

@@ -1,9 +1,12 @@
+import { POST_MESSAGE_SOURCE } from "../constants.js";
 import { EditorState } from "../store.js";
 import { MessageTypes } from "./actions.js";
 export type PostMessageAPIMessage<K extends keyof MessageTypes> = {
     action: K;
     data: MessageTypes[K];
+    source: typeof POST_MESSAGE_SOURCE;
 };
 export type StoreSyncMessage = {
     state: EditorState;
+    source: typeof POST_MESSAGE_SOURCE;
 };

package/build/esm/common/types/messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"messages.js","sourceRoot":"../../../../src","sources":["common/types/messages.ts"],"names":[],"mappings":"","sourcesContent":["import {EditorState} from '../store';\n\nimport {MessageTypes} from './actions';\n\nexport type PostMessageAPIMessage<K extends keyof MessageTypes> = {\n    action: K;\n    data: MessageTypes[K];\n};\n\nexport type StoreSyncMessage = {\n    state: EditorState;\n};\n"]}
+{"version":3,"file":"messages.js","sourceRoot":"../../../../src","sources":["common/types/messages.ts"],"names":[],"mappings":"","sourcesContent":["import {POST_MESSAGE_SOURCE} from '../constants';\nimport {EditorState} from '../store';\n\nimport {MessageTypes} from './actions';\n\nexport type PostMessageAPIMessage<K extends keyof MessageTypes> = {\n    action: K;\n    data: MessageTypes[K];\n    source: typeof POST_MESSAGE_SOURCE;\n};\n\nexport type StoreSyncMessage = {\n    state: EditorState;\n    source: typeof POST_MESSAGE_SOURCE;\n};\n"]}