@gravity-ui/page-constructor 8.5.0-alpha.6 → 8.5.0-alpha.7
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/types/actions.d.ts +1 -6
- package/build/cjs/common/types/actions.js.map +1 -1
- package/build/cjs/editor-v2/containers/MiddleScreen/MiddleScreen.css +1 -0
- package/build/cjs/editor-v2/containers/MiddleScreen/MiddleScreen.js +17 -13
- package/build/cjs/editor-v2/containers/MiddleScreen/MiddleScreen.js.map +1 -1
- package/build/cjs/hooks/usePCEditorInitializeEvents.d.ts +1 -0
- package/build/cjs/hooks/usePCEditorInitializeEvents.js +3 -16
- package/build/cjs/hooks/usePCEditorInitializeEvents.js.map +1 -1
- package/build/cjs/utils/iframe-resizer.d.ts +8 -0
- package/build/cjs/utils/iframe-resizer.js +11 -0
- package/build/cjs/utils/iframe-resizer.js.map +1 -0
- package/build/esm/common/types/actions.d.ts +1 -6
- package/build/esm/common/types/actions.js.map +1 -1
- package/build/esm/editor-v2/containers/MiddleScreen/MiddleScreen.css +1 -0
- package/build/esm/editor-v2/containers/MiddleScreen/MiddleScreen.js +17 -13
- package/build/esm/editor-v2/containers/MiddleScreen/MiddleScreen.js.map +1 -1
- package/build/esm/hooks/usePCEditorInitializeEvents.d.ts +1 -0
- package/build/esm/hooks/usePCEditorInitializeEvents.js +3 -16
- package/build/esm/hooks/usePCEditorInitializeEvents.js.map +1 -1
- package/build/esm/utils/iframe-resizer.d.ts +8 -0
- package/build/esm/utils/iframe-resizer.js +9 -0
- package/build/esm/utils/iframe-resizer.js.map +1 -0
- package/package.json +4 -3
- package/widget/index.js +1 -1
|
@@ -3,12 +3,7 @@ import { EditorState } from "../store.js";
|
|
|
3
3
|
import { RectMapEntry } from "./rect.js";
|
|
4
4
|
export type MessageTypes = EventMessageTypes & ActionMessageTypes;
|
|
5
5
|
export type EventMessageTypes = {
|
|
6
|
-
ON_INIT: {
|
|
7
|
-
height: number;
|
|
8
|
-
};
|
|
9
|
-
ON_RESIZE: {
|
|
10
|
-
height: number;
|
|
11
|
-
};
|
|
6
|
+
ON_INIT: {};
|
|
12
7
|
ON_UPDATE_RECT_MAP: {
|
|
13
8
|
rects: RectMapEntry[];
|
|
14
9
|
};
|
|
@@ -1 +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: {
|
|
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: {};\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"]}
|
|
@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const React = tslib_1.__importStar(require("react"));
|
|
6
6
|
const icons_1 = require("@gravity-ui/icons");
|
|
7
7
|
const uikit_1 = require("@gravity-ui/uikit");
|
|
8
|
-
const
|
|
8
|
+
const parent_1 = tslib_1.__importDefault(require("@iframe-resizer/parent"));
|
|
9
9
|
const iframeContext_1 = require("../../context/iframeContext/index.js");
|
|
10
10
|
const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
|
|
11
11
|
const cn_1 = require("../../utils/cn.js");
|
|
@@ -13,24 +13,28 @@ const Overlay_1 = tslib_1.__importDefault(require("../Overlay/Overlay.js"));
|
|
|
13
13
|
const b = (0, cn_1.editorCn)('middle-screen');
|
|
14
14
|
const MiddleScreen = ({ className, CustomTop }) => {
|
|
15
15
|
const { zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode } = (0, useMainEditorStore_1.useMainEditorStore)();
|
|
16
|
-
const { url, setIframeElement } = React.useContext(iframeContext_1.IframeContext);
|
|
16
|
+
const { url, iframeElement, setIframeElement } = React.useContext(iframeContext_1.IframeContext);
|
|
17
17
|
const [canvasRef, setCanvasRef] = React.useState(null);
|
|
18
|
-
const [height, setHeight] = React.useState(0);
|
|
19
18
|
const canvasStyle = React.useMemo(() => ({
|
|
20
19
|
transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,
|
|
21
20
|
height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
|
|
22
21
|
width: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
|
|
23
22
|
maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
|
|
24
23
|
}), [isPreviewMode, zoom]);
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
24
|
+
React.useEffect(() => {
|
|
25
|
+
if (!iframeElement || isPreviewMode) {
|
|
26
|
+
return undefined;
|
|
27
|
+
}
|
|
28
|
+
const [instance] = (0, parent_1.default)({
|
|
29
|
+
license: 'GPLv3',
|
|
30
|
+
direction: 'vertical',
|
|
31
|
+
checkOrigin: false,
|
|
32
|
+
waitForLoad: true,
|
|
33
|
+
}, iframeElement);
|
|
34
|
+
return () => {
|
|
35
|
+
instance?.iFrameResizer?.disconnect();
|
|
36
|
+
};
|
|
37
|
+
}, [iframeElement, isPreviewMode]);
|
|
34
38
|
const isWithBackground = React.useMemo(() => {
|
|
35
39
|
return deviceWidth !== '100%';
|
|
36
40
|
}, [deviceWidth]);
|
|
@@ -42,7 +46,7 @@ const MiddleScreen = ({ className, CustomTop }) => {
|
|
|
42
46
|
if (instance) {
|
|
43
47
|
setIframeElement(instance);
|
|
44
48
|
}
|
|
45
|
-
}, className: b('iframe', { fullscreen: isPreviewMode }), src: url,
|
|
49
|
+
}, 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' }) }))] }) }) })] }));
|
|
46
50
|
};
|
|
47
51
|
exports.default = MiddleScreen;
|
|
48
52
|
//# sourceMappingURL=MiddleScreen.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MiddleScreen.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/MiddleScreen/MiddleScreen.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,6CAAwC;AACxC,6CAAuD;
|
|
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';\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"]}
|
|
@@ -2,6 +2,7 @@ import { BlockData } from "../constructor-items.js";
|
|
|
2
2
|
import { BlockRegistry } from "../context/blockRegistryContext/index.js";
|
|
3
3
|
import { Fields } from "../form-generator-v2/types.js";
|
|
4
4
|
import { PageContent } from "../models/index.js";
|
|
5
|
+
import "../utils/iframe-resizer.js";
|
|
5
6
|
interface UseEditorInitializeProps {
|
|
6
7
|
initialContent: PageContent;
|
|
7
8
|
setContent: (content: PageContent) => void;
|
|
@@ -5,6 +5,8 @@ const tslib_1 = require("tslib");
|
|
|
5
5
|
const React = tslib_1.__importStar(require("react"));
|
|
6
6
|
const lodash_1 = tslib_1.__importDefault(require("lodash"));
|
|
7
7
|
const rect_1 = require("../common/types/rect.js");
|
|
8
|
+
// eslint-disable-next-line import/no-unassigned-import
|
|
9
|
+
require("../utils/iframe-resizer.js");
|
|
8
10
|
const usePCEditorStore_1 = require("./usePCEditorStore.js");
|
|
9
11
|
const usePostMessageAPI_1 = require("./usePostMessageAPI.js");
|
|
10
12
|
function collectRectMap(registry) {
|
|
@@ -38,10 +40,6 @@ const usePCEditorInitializeEvents = ({ initialContent, setContent, blocks, globa
|
|
|
38
40
|
global: global || [],
|
|
39
41
|
});
|
|
40
42
|
});
|
|
41
|
-
const onResize = React.useCallback(() => {
|
|
42
|
-
const height = document.body.scrollHeight;
|
|
43
|
-
(0, usePostMessageAPI_1.sendEventPostMessage)('ON_RESIZE', { height });
|
|
44
|
-
}, []);
|
|
45
43
|
React.useEffect(() => {
|
|
46
44
|
if (!registry) {
|
|
47
45
|
return undefined;
|
|
@@ -73,18 +71,7 @@ const usePCEditorInitializeEvents = ({ initialContent, setContent, blocks, globa
|
|
|
73
71
|
};
|
|
74
72
|
}, [registry]);
|
|
75
73
|
React.useEffect(() => {
|
|
76
|
-
|
|
77
|
-
const observer = new ResizeObserver(onResize);
|
|
78
|
-
observer.observe(document.documentElement);
|
|
79
|
-
observer.observe(document.body);
|
|
80
|
-
return () => {
|
|
81
|
-
window.removeEventListener('resize', onResize);
|
|
82
|
-
observer.disconnect();
|
|
83
|
-
};
|
|
84
|
-
}, [onResize]);
|
|
85
|
-
React.useEffect(() => {
|
|
86
|
-
const height = document.body.scrollHeight;
|
|
87
|
-
(0, usePostMessageAPI_1.sendEventPostMessage)('ON_INIT', { height });
|
|
74
|
+
(0, usePostMessageAPI_1.sendEventPostMessage)('ON_INIT', {});
|
|
88
75
|
}, []);
|
|
89
76
|
};
|
|
90
77
|
exports.usePCEditorInitializeEvents = usePCEditorInitializeEvents;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePCEditorInitializeEvents.js","sourceRoot":"../../../src","sources":["hooks/usePCEditorInitializeEvents.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,4DAAuB;AAEvB,kDAAwD;
|
|
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// 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"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
// `@iframe-resizer/child` reads `window.iFrameResizer` lazily, on the first
|
|
4
|
+
// init message from the parent — not at module-load time. So setting the
|
|
5
|
+
// config before/after the side-effect import is equivalent.
|
|
6
|
+
// eslint-disable-next-line import/no-unassigned-import
|
|
7
|
+
require("@iframe-resizer/child");
|
|
8
|
+
if (typeof window !== 'undefined') {
|
|
9
|
+
window.iFrameResizer = { license: 'GPLv3' };
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=iframe-resizer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -3,12 +3,7 @@ import { EditorState } from "../store.js";
|
|
|
3
3
|
import { RectMapEntry } from "./rect.js";
|
|
4
4
|
export type MessageTypes = EventMessageTypes & ActionMessageTypes;
|
|
5
5
|
export type EventMessageTypes = {
|
|
6
|
-
ON_INIT: {
|
|
7
|
-
height: number;
|
|
8
|
-
};
|
|
9
|
-
ON_RESIZE: {
|
|
10
|
-
height: number;
|
|
11
|
-
};
|
|
6
|
+
ON_INIT: {};
|
|
12
7
|
ON_UPDATE_RECT_MAP: {
|
|
13
8
|
rects: RectMapEntry[];
|
|
14
9
|
};
|
|
@@ -1 +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: {
|
|
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: {};\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"]}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { Xmark } from '@gravity-ui/icons';
|
|
4
4
|
import { Button, Icon, Loader } from '@gravity-ui/uikit';
|
|
5
|
-
import
|
|
5
|
+
import iframeResize from '@iframe-resizer/parent';
|
|
6
6
|
import { IframeContext } from "../../context/iframeContext/index.js";
|
|
7
7
|
import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
|
|
8
8
|
import { editorCn } from "../../utils/cn.js";
|
|
@@ -11,24 +11,28 @@ import './MiddleScreen.css';
|
|
|
11
11
|
const b = editorCn('middle-screen');
|
|
12
12
|
const MiddleScreen = ({ className, CustomTop }) => {
|
|
13
13
|
const { zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode } = useMainEditorStore();
|
|
14
|
-
const { url, setIframeElement } = React.useContext(IframeContext);
|
|
14
|
+
const { url, iframeElement, setIframeElement } = React.useContext(IframeContext);
|
|
15
15
|
const [canvasRef, setCanvasRef] = React.useState(null);
|
|
16
|
-
const [height, setHeight] = React.useState(0);
|
|
17
16
|
const canvasStyle = React.useMemo(() => ({
|
|
18
17
|
transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,
|
|
19
18
|
height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
|
|
20
19
|
width: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
|
|
21
20
|
maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
|
|
22
21
|
}), [isPreviewMode, zoom]);
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
22
|
+
React.useEffect(() => {
|
|
23
|
+
if (!iframeElement || isPreviewMode) {
|
|
24
|
+
return undefined;
|
|
25
|
+
}
|
|
26
|
+
const [instance] = iframeResize({
|
|
27
|
+
license: 'GPLv3',
|
|
28
|
+
direction: 'vertical',
|
|
29
|
+
checkOrigin: false,
|
|
30
|
+
waitForLoad: true,
|
|
31
|
+
}, iframeElement);
|
|
32
|
+
return () => {
|
|
33
|
+
instance?.iFrameResizer?.disconnect();
|
|
34
|
+
};
|
|
35
|
+
}, [iframeElement, isPreviewMode]);
|
|
32
36
|
const isWithBackground = React.useMemo(() => {
|
|
33
37
|
return deviceWidth !== '100%';
|
|
34
38
|
}, [deviceWidth]);
|
|
@@ -40,7 +44,7 @@ const MiddleScreen = ({ className, CustomTop }) => {
|
|
|
40
44
|
if (instance) {
|
|
41
45
|
setIframeElement(instance);
|
|
42
46
|
}
|
|
43
|
-
}, className: b('iframe', { fullscreen: isPreviewMode }), src: url,
|
|
47
|
+
}, className: b('iframe', { fullscreen: isPreviewMode }), src: url, width: isPreviewMode ? '100%' : deviceWidth, frameBorder: "0", title: "Page Constructor Iframe" }), !isPreviewMode && (_jsx(Overlay, { className: b('overlay'), canvasElement: canvasRef }))] }), isPreviewMode && (_jsx(Button, { view: "normal-contrast", className: b('exit-preview'), onClick: togglePreviewMode, "aria-label": "Exit preview mode", title: "Exit preview mode", size: "l", children: _jsx(Icon, { size: 24, data: Xmark }) })), !initialized && (_jsx("div", { className: b('loading'), children: _jsx(Loader, { size: 'l' }) }))] }) }) })] }));
|
|
44
48
|
};
|
|
45
49
|
export default MiddleScreen;
|
|
46
50
|
//# sourceMappingURL=MiddleScreen.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MiddleScreen.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/MiddleScreen/MiddleScreen.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAC,MAAM,mBAAmB,CAAC;
|
|
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';\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"]}
|
|
@@ -2,6 +2,7 @@ import { BlockData } from "../constructor-items.js";
|
|
|
2
2
|
import { BlockRegistry } from "../context/blockRegistryContext/index.js";
|
|
3
3
|
import { Fields } from "../form-generator-v2/types.js";
|
|
4
4
|
import { PageContent } from "../models/index.js";
|
|
5
|
+
import "../utils/iframe-resizer.js";
|
|
5
6
|
interface UseEditorInitializeProps {
|
|
6
7
|
initialContent: PageContent;
|
|
7
8
|
setContent: (content: PageContent) => void;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import _ from 'lodash';
|
|
3
3
|
import { toSerializableRect } from "../common/types/rect.js";
|
|
4
|
+
// eslint-disable-next-line import/no-unassigned-import
|
|
5
|
+
import "../utils/iframe-resizer.js";
|
|
4
6
|
import { usePCEditorStore } from "./usePCEditorStore.js";
|
|
5
7
|
import { sendEventPostMessage, useInternalPostMessageAPIListener } from "./usePostMessageAPI.js";
|
|
6
8
|
function collectRectMap(registry) {
|
|
@@ -34,10 +36,6 @@ export const usePCEditorInitializeEvents = ({ initialContent, setContent, blocks
|
|
|
34
36
|
global: global || [],
|
|
35
37
|
});
|
|
36
38
|
});
|
|
37
|
-
const onResize = React.useCallback(() => {
|
|
38
|
-
const height = document.body.scrollHeight;
|
|
39
|
-
sendEventPostMessage('ON_RESIZE', { height });
|
|
40
|
-
}, []);
|
|
41
39
|
React.useEffect(() => {
|
|
42
40
|
if (!registry) {
|
|
43
41
|
return undefined;
|
|
@@ -69,18 +67,7 @@ export const usePCEditorInitializeEvents = ({ initialContent, setContent, blocks
|
|
|
69
67
|
};
|
|
70
68
|
}, [registry]);
|
|
71
69
|
React.useEffect(() => {
|
|
72
|
-
|
|
73
|
-
const observer = new ResizeObserver(onResize);
|
|
74
|
-
observer.observe(document.documentElement);
|
|
75
|
-
observer.observe(document.body);
|
|
76
|
-
return () => {
|
|
77
|
-
window.removeEventListener('resize', onResize);
|
|
78
|
-
observer.disconnect();
|
|
79
|
-
};
|
|
80
|
-
}, [onResize]);
|
|
81
|
-
React.useEffect(() => {
|
|
82
|
-
const height = document.body.scrollHeight;
|
|
83
|
-
sendEventPostMessage('ON_INIT', { height });
|
|
70
|
+
sendEventPostMessage('ON_INIT', {});
|
|
84
71
|
}, []);
|
|
85
72
|
};
|
|
86
73
|
//# sourceMappingURL=usePCEditorInitializeEvents.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePCEditorInitializeEvents.js","sourceRoot":"../../../src","sources":["hooks/usePCEditorInitializeEvents.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,CAAC,MAAM,QAAQ,CAAC;AAEvB,OAAO,EAAC,kBAAkB,EAAC,gCAA6B;
|
|
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// 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"]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// `@iframe-resizer/child` reads `window.iFrameResizer` lazily, on the first
|
|
2
|
+
// init message from the parent — not at module-load time. So setting the
|
|
3
|
+
// config before/after the side-effect import is equivalent.
|
|
4
|
+
// eslint-disable-next-line import/no-unassigned-import
|
|
5
|
+
import '@iframe-resizer/child';
|
|
6
|
+
if (typeof window !== 'undefined') {
|
|
7
|
+
window.iFrameResizer = { license: 'GPLv3' };
|
|
8
|
+
}
|
|
9
|
+
//# sourceMappingURL=iframe-resizer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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,OAAO,uBAAuB,CAAC;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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gravity-ui/page-constructor",
|
|
3
|
-
"version": "8.5.0-alpha.
|
|
3
|
+
"version": "8.5.0-alpha.7",
|
|
4
4
|
"description": "Gravity UI Page Constructor",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "commonjs",
|
|
@@ -157,6 +157,7 @@
|
|
|
157
157
|
"deep-object-diff": "^1.1.9",
|
|
158
158
|
"final-form": "^4.20.9",
|
|
159
159
|
"github-buttons": "2.23.0",
|
|
160
|
+
"iframe-resizer": "^5.5.9",
|
|
160
161
|
"immutable": "^4.3.7",
|
|
161
162
|
"js-yaml-source-map": "^0.2.2",
|
|
162
163
|
"lodash": "^4.17.21",
|
|
@@ -284,8 +285,8 @@
|
|
|
284
285
|
"webpack-shell-plugin-next": "^2.3.1"
|
|
285
286
|
},
|
|
286
287
|
"optionalDependencies": {
|
|
287
|
-
"@rollup/rollup-
|
|
288
|
-
"@rollup/rollup-
|
|
288
|
+
"@rollup/rollup-darwin-arm64": "^4.60.1",
|
|
289
|
+
"@rollup/rollup-linux-x64-gnu": "^4.60.1"
|
|
289
290
|
},
|
|
290
291
|
"lint-staged": {
|
|
291
292
|
"*.{css,scss}": [
|