@gravity-ui/page-constructor 8.5.0-alpha.5 → 8.5.0-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/common/constants.d.ts +1 -0
- package/build/cjs/common/constants.js +5 -0
- package/build/cjs/common/constants.js.map +1 -0
- package/build/cjs/common/postMessage.d.ts +1 -0
- package/build/cjs/common/postMessage.js +13 -5
- package/build/cjs/common/postMessage.js.map +1 -1
- package/build/cjs/common/types/messages.d.ts +3 -0
- package/build/cjs/common/types/messages.js.map +1 -1
- package/build/cjs/context/editorStoreContext/PCEditorStoreProvider.js +5 -3
- package/build/cjs/context/editorStoreContext/PCEditorStoreProvider.js.map +1 -1
- package/build/cjs/editor-v2/context/editorStore/MainEditorStoreProvider.js +2 -0
- package/build/cjs/editor-v2/context/editorStore/MainEditorStoreProvider.js.map +1 -1
- package/build/cjs/hooks/usePostMessageAPI.js +8 -5
- package/build/cjs/hooks/usePostMessageAPI.js.map +1 -1
- package/build/esm/common/constants.d.ts +1 -0
- package/build/esm/common/constants.js +2 -0
- package/build/esm/common/constants.js.map +1 -0
- package/build/esm/common/postMessage.d.ts +1 -0
- package/build/esm/common/postMessage.js +12 -5
- package/build/esm/common/postMessage.js.map +1 -1
- package/build/esm/common/types/messages.d.ts +3 -0
- package/build/esm/common/types/messages.js.map +1 -1
- package/build/esm/context/editorStoreContext/PCEditorStoreProvider.js +5 -3
- package/build/esm/context/editorStoreContext/PCEditorStoreProvider.js.map +1 -1
- package/build/esm/editor-v2/context/editorStore/MainEditorStoreProvider.js +2 -0
- package/build/esm/editor-v2/context/editorStore/MainEditorStoreProvider.js.map +1 -1
- package/build/esm/hooks/usePostMessageAPI.js +8 -5
- package/build/esm/hooks/usePostMessageAPI.js.map +1 -1
- package/package.json +1 -1
- package/widget/index.js +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const POST_MESSAGE_SOURCE = "page-constructor-editor";
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ActionMessageTypes, EventMessageTypes } from "./types/index.js";
|
|
2
|
+
export declare function isValidPostMessage(data: unknown): data is Record<string, unknown>;
|
|
2
3
|
export declare function requestActionPostMessage<K extends keyof ActionMessageTypes>(action: K, data: ActionMessageTypes[K], destinationElement: Window): void;
|
|
3
4
|
export declare function listenPostMessageEvents<K extends keyof EventMessageTypes>(action: K, callback: (data: EventMessageTypes[K]) => void): () => void;
|
|
4
5
|
export declare function usePostMessageAPIListener<K extends keyof EventMessageTypes>(action: K, callback: (data: EventMessageTypes[K]) => void, deps?: unknown[]): void;
|
|
@@ -1,26 +1,34 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.isValidPostMessage = isValidPostMessage;
|
|
3
4
|
exports.requestActionPostMessage = requestActionPostMessage;
|
|
4
5
|
exports.listenPostMessageEvents = listenPostMessageEvents;
|
|
5
6
|
exports.usePostMessageAPIListener = usePostMessageAPIListener;
|
|
6
7
|
const tslib_1 = require("tslib");
|
|
7
8
|
const React = tslib_1.__importStar(require("react"));
|
|
9
|
+
const constants_1 = require("./constants.js");
|
|
10
|
+
function isValidPostMessage(data) {
|
|
11
|
+
return (typeof data === 'object' &&
|
|
12
|
+
data !== null &&
|
|
13
|
+
data.source === constants_1.POST_MESSAGE_SOURCE);
|
|
14
|
+
}
|
|
8
15
|
function requestActionPostMessage(action, data, destinationElement) {
|
|
9
|
-
const message = { action, data };
|
|
16
|
+
const message = { action, data, source: constants_1.POST_MESSAGE_SOURCE };
|
|
10
17
|
destinationElement.postMessage(message, '*');
|
|
11
18
|
}
|
|
12
19
|
function listenPostMessageEvents(action, callback) {
|
|
13
20
|
const onMessage = (e) => {
|
|
21
|
+
if (!isValidPostMessage(e.data)) {
|
|
22
|
+
return undefined;
|
|
23
|
+
}
|
|
14
24
|
const message = e.data;
|
|
15
|
-
if (
|
|
25
|
+
if (message.action === action) {
|
|
16
26
|
return callback(message.data);
|
|
17
27
|
}
|
|
18
28
|
return undefined;
|
|
19
29
|
};
|
|
20
30
|
window.addEventListener('message', onMessage);
|
|
21
|
-
return () =>
|
|
22
|
-
window.removeEventListener('message', onMessage);
|
|
23
|
-
};
|
|
31
|
+
return () => window.removeEventListener('message', onMessage);
|
|
24
32
|
}
|
|
25
33
|
function usePostMessageAPIListener(action, callback, deps = []) {
|
|
26
34
|
React.useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"postMessage.js","sourceRoot":"../../../src","sources":["common/postMessage.ts"],"names":[],"mappings":";;
|
|
1
|
+
{"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"]}
|
|
@@ -1,9 +1,12 @@
|
|
|
1
|
+
import { POST_MESSAGE_SOURCE } from "../constants.js";
|
|
1
2
|
import { EditorState } from "../store.js";
|
|
2
3
|
import { MessageTypes } from "./actions.js";
|
|
3
4
|
export type PostMessageAPIMessage<K extends keyof MessageTypes> = {
|
|
4
5
|
action: K;
|
|
5
6
|
data: MessageTypes[K];
|
|
7
|
+
source: typeof POST_MESSAGE_SOURCE;
|
|
6
8
|
};
|
|
7
9
|
export type StoreSyncMessage = {
|
|
8
10
|
state: EditorState;
|
|
11
|
+
source: typeof POST_MESSAGE_SOURCE;
|
|
9
12
|
};
|
|
@@ -1 +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"]}
|
|
1
|
+
{"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"]}
|
|
@@ -4,6 +4,7 @@ exports.PCEditorStoreProvider = void 0;
|
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const React = tslib_1.__importStar(require("react"));
|
|
7
|
+
const postMessage_1 = require("../../common/postMessage.js");
|
|
7
8
|
const store_1 = require("../../common/store.js");
|
|
8
9
|
const usePostMessageAPI_1 = require("../../hooks/usePostMessageAPI.js");
|
|
9
10
|
const PCEditorStoreContext_1 = require("./PCEditorStoreContext.js");
|
|
@@ -16,13 +17,14 @@ const PCEditorStoreProvider = ({ children }) => {
|
|
|
16
17
|
}, []);
|
|
17
18
|
React.useEffect(() => {
|
|
18
19
|
const onMessage = (e) => {
|
|
20
|
+
if (!(0, postMessage_1.isValidPostMessage)(e.data)) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
19
23
|
const message = e.data;
|
|
20
24
|
syncStore(message);
|
|
21
25
|
};
|
|
22
26
|
window.addEventListener('message', onMessage);
|
|
23
|
-
return () =>
|
|
24
|
-
window.removeEventListener('message', onMessage);
|
|
25
|
-
};
|
|
27
|
+
return () => window.removeEventListener('message', onMessage);
|
|
26
28
|
}, [syncStore]);
|
|
27
29
|
// When Page Constructor runs inside the editor preview iframe, keyboard focus stays in the iframe
|
|
28
30
|
// after clicking the canvas — parent window never receives Cmd+Z. Forward to parent via postMessage.
|
|
@@ -1 +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;
|
|
1
|
+
{"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"]}
|
|
@@ -4,6 +4,7 @@ exports.MainEditorStoreProvider = void 0;
|
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const React = tslib_1.__importStar(require("react"));
|
|
7
|
+
const constants_1 = require("../../../common/constants.js");
|
|
7
8
|
const utils_1 = require("../../../common/utils.js");
|
|
8
9
|
const store_1 = require("../../store.js");
|
|
9
10
|
const iframeContext_1 = require("../iframeContext/index.js");
|
|
@@ -14,6 +15,7 @@ const MainEditorStoreProvider = ({ children }) => {
|
|
|
14
15
|
const sendPostMessage = React.useCallback((data) => {
|
|
15
16
|
const message = {
|
|
16
17
|
state: data,
|
|
18
|
+
source: constants_1.POST_MESSAGE_SOURCE,
|
|
17
19
|
};
|
|
18
20
|
if (iframeElement && iframeElement.contentWindow) {
|
|
19
21
|
iframeElement.contentWindow.postMessage(message, '*');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MainEditorStoreProvider.js","sourceRoot":"../../../../../src","sources":["editor-v2/context/editorStore/MainEditorStoreProvider.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;
|
|
1
|
+
{"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"]}
|
|
@@ -5,22 +5,25 @@ exports.listenPostMessageActions = listenPostMessageActions;
|
|
|
5
5
|
exports.useInternalPostMessageAPIListener = useInternalPostMessageAPIListener;
|
|
6
6
|
const tslib_1 = require("tslib");
|
|
7
7
|
const React = tslib_1.__importStar(require("react"));
|
|
8
|
+
const constants_1 = require("../common/constants.js");
|
|
9
|
+
const postMessage_1 = require("../common/postMessage.js");
|
|
8
10
|
function sendEventPostMessage(action, data) {
|
|
9
|
-
const message = { action, data };
|
|
11
|
+
const message = { action, data, source: constants_1.POST_MESSAGE_SOURCE };
|
|
10
12
|
window.parent.postMessage(message, '*');
|
|
11
13
|
}
|
|
12
14
|
function listenPostMessageActions(action, callback) {
|
|
13
15
|
const onMessage = (e) => {
|
|
16
|
+
if (!(0, postMessage_1.isValidPostMessage)(e.data)) {
|
|
17
|
+
return undefined;
|
|
18
|
+
}
|
|
14
19
|
const message = e.data;
|
|
15
|
-
if (
|
|
20
|
+
if (message.action === action) {
|
|
16
21
|
return callback(message.data);
|
|
17
22
|
}
|
|
18
23
|
return undefined;
|
|
19
24
|
};
|
|
20
25
|
window.addEventListener('message', onMessage);
|
|
21
|
-
return () =>
|
|
22
|
-
window.removeEventListener('message', onMessage);
|
|
23
|
-
};
|
|
26
|
+
return () => window.removeEventListener('message', onMessage);
|
|
24
27
|
}
|
|
25
28
|
function useInternalPostMessageAPIListener(action, callback) {
|
|
26
29
|
React.useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePostMessageAPI.js","sourceRoot":"../../../src","sources":["hooks/usePostMessageAPI.ts"],"names":[],"mappings":";;
|
|
1
|
+
{"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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const POST_MESSAGE_SOURCE = "page-constructor-editor";
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ActionMessageTypes, EventMessageTypes } from "./types/index.js";
|
|
2
|
+
export declare function isValidPostMessage(data: unknown): data is Record<string, unknown>;
|
|
2
3
|
export declare function requestActionPostMessage<K extends keyof ActionMessageTypes>(action: K, data: ActionMessageTypes[K], destinationElement: Window): void;
|
|
3
4
|
export declare function listenPostMessageEvents<K extends keyof EventMessageTypes>(action: K, callback: (data: EventMessageTypes[K]) => void): () => void;
|
|
4
5
|
export declare function usePostMessageAPIListener<K extends keyof EventMessageTypes>(action: K, callback: (data: EventMessageTypes[K]) => void, deps?: unknown[]): void;
|
|
@@ -1,20 +1,27 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { POST_MESSAGE_SOURCE } from "./constants.js";
|
|
3
|
+
export function isValidPostMessage(data) {
|
|
4
|
+
return (typeof data === 'object' &&
|
|
5
|
+
data !== null &&
|
|
6
|
+
data.source === POST_MESSAGE_SOURCE);
|
|
7
|
+
}
|
|
2
8
|
export function requestActionPostMessage(action, data, destinationElement) {
|
|
3
|
-
const message = { action, data };
|
|
9
|
+
const message = { action, data, source: POST_MESSAGE_SOURCE };
|
|
4
10
|
destinationElement.postMessage(message, '*');
|
|
5
11
|
}
|
|
6
12
|
export function listenPostMessageEvents(action, callback) {
|
|
7
13
|
const onMessage = (e) => {
|
|
14
|
+
if (!isValidPostMessage(e.data)) {
|
|
15
|
+
return undefined;
|
|
16
|
+
}
|
|
8
17
|
const message = e.data;
|
|
9
|
-
if (
|
|
18
|
+
if (message.action === action) {
|
|
10
19
|
return callback(message.data);
|
|
11
20
|
}
|
|
12
21
|
return undefined;
|
|
13
22
|
};
|
|
14
23
|
window.addEventListener('message', onMessage);
|
|
15
|
-
return () =>
|
|
16
|
-
window.removeEventListener('message', onMessage);
|
|
17
|
-
};
|
|
24
|
+
return () => window.removeEventListener('message', onMessage);
|
|
18
25
|
}
|
|
19
26
|
export function usePostMessageAPIListener(action, callback, deps = []) {
|
|
20
27
|
React.useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"postMessage.js","sourceRoot":"../../../src","sources":["common/postMessage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"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"]}
|
|
@@ -1,9 +1,12 @@
|
|
|
1
|
+
import { POST_MESSAGE_SOURCE } from "../constants.js";
|
|
1
2
|
import { EditorState } from "../store.js";
|
|
2
3
|
import { MessageTypes } from "./actions.js";
|
|
3
4
|
export type PostMessageAPIMessage<K extends keyof MessageTypes> = {
|
|
4
5
|
action: K;
|
|
5
6
|
data: MessageTypes[K];
|
|
7
|
+
source: typeof POST_MESSAGE_SOURCE;
|
|
6
8
|
};
|
|
7
9
|
export type StoreSyncMessage = {
|
|
8
10
|
state: EditorState;
|
|
11
|
+
source: typeof POST_MESSAGE_SOURCE;
|
|
9
12
|
};
|
|
@@ -1 +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"]}
|
|
1
|
+
{"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"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import * as React from 'react';
|
|
3
|
+
import { isValidPostMessage } from "../../common/postMessage.js";
|
|
3
4
|
import { createPCEditorStore } from "../../common/store.js";
|
|
4
5
|
import { sendEventPostMessage } from "../../hooks/usePostMessageAPI.js";
|
|
5
6
|
import { PCEditorStoreContext } from "./PCEditorStoreContext.js";
|
|
@@ -12,13 +13,14 @@ export const PCEditorStoreProvider = ({ children }) => {
|
|
|
12
13
|
}, []);
|
|
13
14
|
React.useEffect(() => {
|
|
14
15
|
const onMessage = (e) => {
|
|
16
|
+
if (!isValidPostMessage(e.data)) {
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
15
19
|
const message = e.data;
|
|
16
20
|
syncStore(message);
|
|
17
21
|
};
|
|
18
22
|
window.addEventListener('message', onMessage);
|
|
19
|
-
return () =>
|
|
20
|
-
window.removeEventListener('message', onMessage);
|
|
21
|
-
};
|
|
23
|
+
return () => window.removeEventListener('message', onMessage);
|
|
22
24
|
}, [syncStore]);
|
|
23
25
|
// When Page Constructor runs inside the editor preview iframe, keyboard focus stays in the iframe
|
|
24
26
|
// after clicking the canvas — parent window never receives Cmd+Z. Forward to parent via postMessage.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PCEditorStoreProvider.js","sourceRoot":"../../../../src","sources":["context/editorStoreContext/PCEditorStoreProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAc,mBAAmB,EAAC,8BAA2B;AAEpE,OAAO,EAAC,oBAAoB,EAAC,yCAAsC;AAEnE,OAAO,EAAC,oBAAoB,EAAC,kCAA+B;AAI5D,MAAM,CAAC,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;
|
|
1
|
+
{"version":3,"file":"PCEditorStoreProvider.js","sourceRoot":"../../../../src","sources":["context/editorStoreContext/PCEditorStoreProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,kBAAkB,EAAC,oCAAiC;AAC5D,OAAO,EAAc,mBAAmB,EAAC,8BAA2B;AAEpE,OAAO,EAAC,oBAAoB,EAAC,yCAAsC;AAEnE,OAAO,EAAC,oBAAoB,EAAC,kCAA+B;AAI5D,MAAM,CAAC,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,kBAAkB,CAAC,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,oBAAoB,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;YAC/C,CAAC;iBAAM,CAAC;gBACJ,oBAAoB,CAAC,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,mBAAmB,EAAE,CAAC;IAC7C,CAAC;IAED,OAAO,CACH,KAAC,oBAAoB,CAAC,QAAQ,IAC1B,KAAK,EAAE;YACH,KAAK,EAAE,QAAQ,CAAC,OAAO;SAC1B,YAEA,QAAQ,GACmB,CACnC,CAAC;AACN,CAAC,CAAC","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"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import * as React from 'react';
|
|
3
|
+
import { POST_MESSAGE_SOURCE } from "../../../common/constants.js";
|
|
3
4
|
import { removeFn } from "../../../common/utils.js";
|
|
4
5
|
import { createEditorStore } from "../../store.js";
|
|
5
6
|
import { IframeContext } from "../iframeContext/index.js";
|
|
@@ -10,6 +11,7 @@ export const MainEditorStoreProvider = ({ children }) => {
|
|
|
10
11
|
const sendPostMessage = React.useCallback((data) => {
|
|
11
12
|
const message = {
|
|
12
13
|
state: data,
|
|
14
|
+
source: POST_MESSAGE_SOURCE,
|
|
13
15
|
};
|
|
14
16
|
if (iframeElement && iframeElement.contentWindow) {
|
|
15
17
|
iframeElement.contentWindow.postMessage(message, '*');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MainEditorStoreProvider.js","sourceRoot":"../../../../../src","sources":["editor-v2/context/editorStore/MainEditorStoreProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"MainEditorStoreProvider.js","sourceRoot":"../../../../../src","sources":["editor-v2/context/editorStore/MainEditorStoreProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,mBAAmB,EAAC,qCAAkC;AAG9D,OAAO,EAAC,QAAQ,EAAC,iCAA8B;AAC/C,OAAO,EAAc,iBAAiB,EAAC,uBAAoB;AAC3D,OAAO,EAAC,aAAa,EAAC,kCAAyB;AAE/C,OAAO,EAAC,sBAAsB,EAAC,oCAAiC;AAIhE,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAC,QAAQ,EAA0B,EAAE,EAAE;IAC3E,MAAM,EAAC,aAAa,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,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,mBAAmB;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,iBAAiB,EAAE,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,QAAQ,CAAC,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,KAAC,sBAAsB,CAAC,QAAQ,IAC5B,KAAK,EAAE;YACH,KAAK,EAAE,QAAQ,CAAC,OAAO;SAC1B,YAEA,QAAQ,GACqB,CACrC,CAAC;AACN,CAAC,CAAC","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"]}
|
|
@@ -1,20 +1,23 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { POST_MESSAGE_SOURCE } from "../common/constants.js";
|
|
3
|
+
import { isValidPostMessage } from "../common/postMessage.js";
|
|
2
4
|
export function sendEventPostMessage(action, data) {
|
|
3
|
-
const message = { action, data };
|
|
5
|
+
const message = { action, data, source: POST_MESSAGE_SOURCE };
|
|
4
6
|
window.parent.postMessage(message, '*');
|
|
5
7
|
}
|
|
6
8
|
export function listenPostMessageActions(action, callback) {
|
|
7
9
|
const onMessage = (e) => {
|
|
10
|
+
if (!isValidPostMessage(e.data)) {
|
|
11
|
+
return undefined;
|
|
12
|
+
}
|
|
8
13
|
const message = e.data;
|
|
9
|
-
if (
|
|
14
|
+
if (message.action === action) {
|
|
10
15
|
return callback(message.data);
|
|
11
16
|
}
|
|
12
17
|
return undefined;
|
|
13
18
|
};
|
|
14
19
|
window.addEventListener('message', onMessage);
|
|
15
|
-
return () =>
|
|
16
|
-
window.removeEventListener('message', onMessage);
|
|
17
|
-
};
|
|
20
|
+
return () => window.removeEventListener('message', onMessage);
|
|
18
21
|
}
|
|
19
22
|
export function useInternalPostMessageAPIListener(action, callback) {
|
|
20
23
|
React.useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePostMessageAPI.js","sourceRoot":"../../../src","sources":["hooks/usePostMessageAPI.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"usePostMessageAPI.js","sourceRoot":"../../../src","sources":["hooks/usePostMessageAPI.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,mBAAmB,EAAC,+BAA4B;AACxD,OAAO,EAAC,kBAAkB,EAAC,iCAA8B;AAIzD,MAAM,UAAU,oBAAoB,CAChC,MAAS,EACT,IAA0B;IAE1B,MAAM,OAAO,GAAG,EAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,mBAAmB,EAA6B,CAAC;IACxF,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,UAAU,wBAAwB,CACpC,MAAS,EACT,QAA+C;IAE/C,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,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"]}
|