@gravity-ui/page-constructor 8.5.0-alpha.7 → 8.5.0-alpha.8
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 +6 -1
- package/build/cjs/common/types/actions.js.map +1 -1
- package/build/cjs/editor-v2/containers/MiddleScreen/MiddleScreen.css +0 -1
- package/build/cjs/editor-v2/containers/MiddleScreen/MiddleScreen.js +13 -17
- package/build/cjs/editor-v2/containers/MiddleScreen/MiddleScreen.js.map +1 -1
- package/build/cjs/gravity-blocks/extensions/BlockBaseExtension.js +7 -1
- package/build/cjs/gravity-blocks/extensions/BlockBaseExtension.js.map +1 -1
- package/build/cjs/hooks/usePCEditorInitializeEvents.d.ts +0 -1
- package/build/cjs/hooks/usePCEditorInitializeEvents.js +16 -3
- package/build/cjs/hooks/usePCEditorInitializeEvents.js.map +1 -1
- package/build/esm/common/types/actions.d.ts +6 -1
- package/build/esm/common/types/actions.js.map +1 -1
- package/build/esm/editor-v2/containers/MiddleScreen/MiddleScreen.css +0 -1
- package/build/esm/editor-v2/containers/MiddleScreen/MiddleScreen.js +13 -17
- package/build/esm/editor-v2/containers/MiddleScreen/MiddleScreen.js.map +1 -1
- package/build/esm/gravity-blocks/extensions/BlockBaseExtension.js +7 -1
- package/build/esm/gravity-blocks/extensions/BlockBaseExtension.js.map +1 -1
- package/build/esm/hooks/usePCEditorInitializeEvents.d.ts +0 -1
- package/build/esm/hooks/usePCEditorInitializeEvents.js +16 -3
- package/build/esm/hooks/usePCEditorInitializeEvents.js.map +1 -1
- package/package.json +3 -4
- package/widget/index.js +1 -1
- package/build/cjs/utils/iframe-resizer.d.ts +0 -8
- package/build/cjs/utils/iframe-resizer.js +0 -11
- package/build/cjs/utils/iframe-resizer.js.map +0 -1
- package/build/esm/utils/iframe-resizer.d.ts +0 -8
- package/build/esm/utils/iframe-resizer.js +0 -9
- package/build/esm/utils/iframe-resizer.js.map +0 -1
|
@@ -3,7 +3,12 @@ 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: {
|
|
6
|
+
ON_INIT: {
|
|
7
|
+
height: number;
|
|
8
|
+
};
|
|
9
|
+
ON_RESIZE: {
|
|
10
|
+
height: number;
|
|
11
|
+
};
|
|
7
12
|
ON_UPDATE_RECT_MAP: {
|
|
8
13
|
rects: RectMapEntry[];
|
|
9
14
|
};
|
|
@@ -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: {};\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"]}
|
|
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"]}
|
|
@@ -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 postMessage_1 = require("../../../common/postMessage.js");
|
|
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,28 +13,24 @@ 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,
|
|
16
|
+
const { url, setIframeElement } = React.useContext(iframeContext_1.IframeContext);
|
|
17
17
|
const [canvasRef, setCanvasRef] = React.useState(null);
|
|
18
|
+
const [height, setHeight] = React.useState(0);
|
|
18
19
|
const canvasStyle = React.useMemo(() => ({
|
|
19
20
|
transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,
|
|
20
21
|
height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
|
|
21
22
|
width: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
|
|
22
23
|
maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
|
|
23
24
|
}), [isPreviewMode, zoom]);
|
|
24
|
-
React.
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}, iframeElement);
|
|
34
|
-
return () => {
|
|
35
|
-
instance?.iFrameResizer?.disconnect();
|
|
36
|
-
};
|
|
37
|
-
}, [iframeElement, isPreviewMode]);
|
|
25
|
+
const onResize = React.useCallback((newHeight) => {
|
|
26
|
+
setHeight(newHeight + 100);
|
|
27
|
+
}, [setHeight]);
|
|
28
|
+
(0, postMessage_1.usePostMessageAPIListener)('ON_RESIZE', ({ height: newHeight }) => {
|
|
29
|
+
onResize(newHeight);
|
|
30
|
+
});
|
|
31
|
+
(0, postMessage_1.usePostMessageAPIListener)('ON_INIT', ({ height: newHeight }) => {
|
|
32
|
+
onResize(newHeight);
|
|
33
|
+
});
|
|
38
34
|
const isWithBackground = React.useMemo(() => {
|
|
39
35
|
return deviceWidth !== '100%';
|
|
40
36
|
}, [deviceWidth]);
|
|
@@ -46,7 +42,7 @@ const MiddleScreen = ({ className, CustomTop }) => {
|
|
|
46
42
|
if (instance) {
|
|
47
43
|
setIframeElement(instance);
|
|
48
44
|
}
|
|
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' }) }))] }) }) })] }));
|
|
45
|
+
}, 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' }) }))] }) }) })] }));
|
|
50
46
|
};
|
|
51
47
|
exports.default = MiddleScreen;
|
|
52
48
|
//# 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';\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"]}
|
|
@@ -4,7 +4,13 @@ exports.blockBaseExtension = exports.BlockBaseExtensionBlockWrapper = void 0;
|
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const BlockBase_1 = tslib_1.__importDefault(require("../../components/BlockBase/BlockBase.js"));
|
|
7
|
-
const BlockBaseExtensionBlockWrapper = ({ props, content, children }) =>
|
|
7
|
+
const BlockBaseExtensionBlockWrapper = ({ props, content, children, type }) => {
|
|
8
|
+
let defaultIndent;
|
|
9
|
+
if (type.includes('header-block')) {
|
|
10
|
+
defaultIndent = { top: '0', bottom: '0' };
|
|
11
|
+
}
|
|
12
|
+
return ((0, jsx_runtime_1.jsx)(BlockBase_1.default, { anchor: content?.anchor ?? props?.anchor, indent: content?.indent ?? props?.indent ?? defaultIndent, visible: content?.visible ?? props?.visible, resetPaddings: content?.resetPaddings ?? props?.resetPaddings, qa: content?.qa ?? props?.qa, children: children }));
|
|
13
|
+
};
|
|
8
14
|
exports.BlockBaseExtensionBlockWrapper = BlockBaseExtensionBlockWrapper;
|
|
9
15
|
const blockBaseExtension = () => ({
|
|
10
16
|
name: 'Block Base',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlockBaseExtension.js","sourceRoot":"../../../../src","sources":["gravity-blocks/extensions/BlockBaseExtension.tsx"],"names":[],"mappings":";;;;;AAEA,gGAA6D;
|
|
1
|
+
{"version":3,"file":"BlockBaseExtension.js","sourceRoot":"../../../../src","sources":["gravity-blocks/extensions/BlockBaseExtension.tsx"],"names":[],"mappings":";;;;;AAEA,gGAA6D;AAKtD,MAAM,8BAA8B,GAEvC,CAAC,EAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAC,EAAE,EAAE;IACrC,IAAI,aAAa,CAAC;IAElB,IAAI,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC;QAChC,aAAa,GAAG,EAAC,GAAG,EAAE,GAAkB,EAAE,MAAM,EAAE,GAAkB,EAAC,CAAC;IAC1E,CAAC;IAED,OAAO,CACH,uBAAC,mBAAS,IACN,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,MAAM,EACxC,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,MAAM,IAAI,aAAa,EACzD,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,OAAO,EAC3C,aAAa,EAAE,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,aAAa,EAC7D,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,KAAK,EAAE,EAAE,YAE3B,QAAQ,GACD,CACf,CAAC;AACN,CAAC,CAAC;AApBW,QAAA,8BAA8B,kCAoBzC;AAEK,MAAM,kBAAkB,GAAG,GAAqD,EAAE,CAAC,CAAC;IACvF,IAAI,EAAE,YAAY;IAClB,EAAE,EAAE,yCAAyC;IAC7C,QAAQ,EAAE;QACN,YAAY,EAAE,sCAA8B;QAC5C,WAAW,EAAE;YACT;gBACI,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,YAAY;gBACnB,MAAM,EAAE;oBACJ;wBACI,IAAI,EAAE,WAAW;wBACjB,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,YAAY;qBACrB;oBACD;wBACI,IAAI,EAAE,WAAW;wBACjB,KAAK,EAAE,aAAa;wBACpB,IAAI,EAAE,aAAa;qBACtB;oBACD;wBACI,IAAI,EAAE,QAAQ;wBACd,KAAK,EAAE,YAAY;wBACnB,IAAI,EAAE,YAAY;wBAClB,QAAQ,EAAE,IAAI;wBACd,OAAO,EAAE;4BACL,EAAC,KAAK,EAAE,GAAG,EAAC;4BACZ,EAAC,KAAK,EAAE,IAAI,EAAC;4BACb,EAAC,KAAK,EAAE,GAAG,EAAC;4BACZ,EAAC,KAAK,EAAE,GAAG,EAAC;4BACZ,EAAC,KAAK,EAAE,GAAG,EAAC;4BACZ,EAAC,KAAK,EAAE,IAAI,EAAC;yBAChB;qBACJ;oBACD;wBACI,IAAI,EAAE,QAAQ;wBACd,KAAK,EAAE,eAAe;wBACtB,IAAI,EAAE,eAAe;wBACrB,QAAQ,EAAE,IAAI;wBACd,OAAO,EAAE;4BACL,EAAC,KAAK,EAAE,GAAG,EAAC;4BACZ,EAAC,KAAK,EAAE,IAAI,EAAC;4BACb,EAAC,KAAK,EAAE,GAAG,EAAC;4BACZ,EAAC,KAAK,EAAE,GAAG,EAAC;4BACZ,EAAC,KAAK,EAAE,GAAG,EAAC;4BACZ,EAAC,KAAK,EAAE,IAAI,EAAC;yBAChB;qBACJ;oBACD;wBACI,IAAI,EAAE,QAAQ;wBACd,KAAK,EAAE,oBAAoB;wBAC3B,IAAI,EAAE,SAAS;wBACf,QAAQ,EAAE,IAAI;wBACd,OAAO,EAAE;4BACL,EAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAC;4BACjC,EAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAC;4BACrC,EAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAC;4BACrC,EAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAC;yBACxC;qBACJ;iBACJ;aACJ;SACJ;KACJ;CACJ,CAAC,CAAC;AAhEU,QAAA,kBAAkB,sBAgE5B","sourcesContent":["import * as React from 'react';\n\nimport BlockBase from '../../components/BlockBase/BlockBase';\nimport type {PageConstructorExtension} from '../../containers/PageConstructor/PageConstructor';\nimport type {BlockBaseProps, BlockWrapperDataProps} from '../../models';\nimport {IndentValue} from '../grid';\n\nexport const BlockBaseExtensionBlockWrapper: React.FC<\n BlockWrapperDataProps<BlockBaseProps> & React.PropsWithChildren\n> = ({props, content, children, type}) => {\n let defaultIndent;\n\n if (type.includes('header-block')) {\n defaultIndent = {top: '0' as IndentValue, bottom: '0' as IndentValue};\n }\n\n return (\n <BlockBase\n anchor={content?.anchor ?? props?.anchor}\n indent={content?.indent ?? props?.indent ?? defaultIndent}\n visible={content?.visible ?? props?.visible}\n resetPaddings={content?.resetPaddings ?? props?.resetPaddings}\n qa={content?.qa ?? props?.qa}\n >\n {children}\n </BlockBase>\n );\n};\n\nexport const blockBaseExtension = (): PageConstructorExtension<{}, {}, BlockBaseProps> => ({\n name: 'Block Base',\n id: '@gravity-ui/page-constructor/block-base',\n settings: {\n blockWrapper: BlockBaseExtensionBlockWrapper,\n blockInputs: [\n {\n type: 'section',\n title: 'Block Base',\n fields: [\n {\n type: 'textInput',\n title: 'Anchor',\n name: 'anchor.url',\n },\n {\n type: 'textInput',\n title: 'Anchor text',\n name: 'anchor.text',\n },\n {\n type: 'select',\n title: 'Top indent',\n name: 'indent.top',\n hasClear: true,\n options: [\n {value: '0'},\n {value: 'xs'},\n {value: 's'},\n {value: 'm'},\n {value: 'l'},\n {value: 'xl'},\n ],\n },\n {\n type: 'select',\n title: 'Bottom indent',\n name: 'indent.bottom',\n hasClear: true,\n options: [\n {value: '0'},\n {value: 'xs'},\n {value: 's'},\n {value: 'm'},\n {value: 'l'},\n {value: 'xl'},\n ],\n },\n {\n type: 'select',\n title: 'Hide on breakpoint',\n name: 'visible',\n hasClear: true,\n options: [\n {value: 'sm', content: 'SM only'},\n {value: 'md', content: 'MD and down'},\n {value: 'lg', content: 'LG and down'},\n {value: 'xl', content: 'XL and down'},\n ],\n },\n ],\n },\n ],\n },\n});\n"]}
|
|
@@ -2,7 +2,6 @@ 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";
|
|
6
5
|
interface UseEditorInitializeProps {
|
|
7
6
|
initialContent: PageContent;
|
|
8
7
|
setContent: (content: PageContent) => void;
|
|
@@ -5,8 +5,6 @@ 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");
|
|
10
8
|
const usePCEditorStore_1 = require("./usePCEditorStore.js");
|
|
11
9
|
const usePostMessageAPI_1 = require("./usePostMessageAPI.js");
|
|
12
10
|
function collectRectMap(registry) {
|
|
@@ -40,6 +38,10 @@ const usePCEditorInitializeEvents = ({ initialContent, setContent, blocks, globa
|
|
|
40
38
|
global: global || [],
|
|
41
39
|
});
|
|
42
40
|
});
|
|
41
|
+
const onResize = React.useCallback(() => {
|
|
42
|
+
const height = document.body.scrollHeight;
|
|
43
|
+
(0, usePostMessageAPI_1.sendEventPostMessage)('ON_RESIZE', { height });
|
|
44
|
+
}, []);
|
|
43
45
|
React.useEffect(() => {
|
|
44
46
|
if (!registry) {
|
|
45
47
|
return undefined;
|
|
@@ -71,7 +73,18 @@ const usePCEditorInitializeEvents = ({ initialContent, setContent, blocks, globa
|
|
|
71
73
|
};
|
|
72
74
|
}, [registry]);
|
|
73
75
|
React.useEffect(() => {
|
|
74
|
-
|
|
76
|
+
window.addEventListener('resize', onResize);
|
|
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 });
|
|
75
88
|
}, []);
|
|
76
89
|
};
|
|
77
90
|
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\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"]}
|
|
@@ -3,7 +3,12 @@ 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: {
|
|
6
|
+
ON_INIT: {
|
|
7
|
+
height: number;
|
|
8
|
+
};
|
|
9
|
+
ON_RESIZE: {
|
|
10
|
+
height: number;
|
|
11
|
+
};
|
|
7
12
|
ON_UPDATE_RECT_MAP: {
|
|
8
13
|
rects: RectMapEntry[];
|
|
9
14
|
};
|
|
@@ -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: {};\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"]}
|
|
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"]}
|
|
@@ -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 { usePostMessageAPIListener } from "../../../common/postMessage.js";
|
|
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,28 +11,24 @@ 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,
|
|
14
|
+
const { url, setIframeElement } = React.useContext(IframeContext);
|
|
15
15
|
const [canvasRef, setCanvasRef] = React.useState(null);
|
|
16
|
+
const [height, setHeight] = React.useState(0);
|
|
16
17
|
const canvasStyle = React.useMemo(() => ({
|
|
17
18
|
transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,
|
|
18
19
|
height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
|
|
19
20
|
width: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
|
|
20
21
|
maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
|
|
21
22
|
}), [isPreviewMode, zoom]);
|
|
22
|
-
React.
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}, iframeElement);
|
|
32
|
-
return () => {
|
|
33
|
-
instance?.iFrameResizer?.disconnect();
|
|
34
|
-
};
|
|
35
|
-
}, [iframeElement, isPreviewMode]);
|
|
23
|
+
const onResize = React.useCallback((newHeight) => {
|
|
24
|
+
setHeight(newHeight + 100);
|
|
25
|
+
}, [setHeight]);
|
|
26
|
+
usePostMessageAPIListener('ON_RESIZE', ({ height: newHeight }) => {
|
|
27
|
+
onResize(newHeight);
|
|
28
|
+
});
|
|
29
|
+
usePostMessageAPIListener('ON_INIT', ({ height: newHeight }) => {
|
|
30
|
+
onResize(newHeight);
|
|
31
|
+
});
|
|
36
32
|
const isWithBackground = React.useMemo(() => {
|
|
37
33
|
return deviceWidth !== '100%';
|
|
38
34
|
}, [deviceWidth]);
|
|
@@ -44,7 +40,7 @@ const MiddleScreen = ({ className, CustomTop }) => {
|
|
|
44
40
|
if (instance) {
|
|
45
41
|
setIframeElement(instance);
|
|
46
42
|
}
|
|
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' }) }))] }) }) })] }));
|
|
43
|
+
}, className: b('iframe', { fullscreen: isPreviewMode }), src: url, height: isPreviewMode ? '100%' : `${height}px`, 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' }) }))] }) }) })] }));
|
|
48
44
|
};
|
|
49
45
|
export default MiddleScreen;
|
|
50
46
|
//# 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';\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"]}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import BlockBase from "../../components/BlockBase/BlockBase.js";
|
|
3
|
-
export const BlockBaseExtensionBlockWrapper = ({ props, content, children }) =>
|
|
3
|
+
export const BlockBaseExtensionBlockWrapper = ({ props, content, children, type }) => {
|
|
4
|
+
let defaultIndent;
|
|
5
|
+
if (type.includes('header-block')) {
|
|
6
|
+
defaultIndent = { top: '0', bottom: '0' };
|
|
7
|
+
}
|
|
8
|
+
return (_jsx(BlockBase, { anchor: content?.anchor ?? props?.anchor, indent: content?.indent ?? props?.indent ?? defaultIndent, visible: content?.visible ?? props?.visible, resetPaddings: content?.resetPaddings ?? props?.resetPaddings, qa: content?.qa ?? props?.qa, children: children }));
|
|
9
|
+
};
|
|
4
10
|
export const blockBaseExtension = () => ({
|
|
5
11
|
name: 'Block Base',
|
|
6
12
|
id: '@gravity-ui/page-constructor/block-base',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlockBaseExtension.js","sourceRoot":"../../../../src","sources":["gravity-blocks/extensions/BlockBaseExtension.tsx"],"names":[],"mappings":";AAEA,OAAO,SAAS,gDAA6C;
|
|
1
|
+
{"version":3,"file":"BlockBaseExtension.js","sourceRoot":"../../../../src","sources":["gravity-blocks/extensions/BlockBaseExtension.tsx"],"names":[],"mappings":";AAEA,OAAO,SAAS,gDAA6C;AAK7D,MAAM,CAAC,MAAM,8BAA8B,GAEvC,CAAC,EAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAC,EAAE,EAAE;IACrC,IAAI,aAAa,CAAC;IAElB,IAAI,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC;QAChC,aAAa,GAAG,EAAC,GAAG,EAAE,GAAkB,EAAE,MAAM,EAAE,GAAkB,EAAC,CAAC;IAC1E,CAAC;IAED,OAAO,CACH,KAAC,SAAS,IACN,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,MAAM,EACxC,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,MAAM,IAAI,aAAa,EACzD,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,OAAO,EAC3C,aAAa,EAAE,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,aAAa,EAC7D,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,KAAK,EAAE,EAAE,YAE3B,QAAQ,GACD,CACf,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAqD,EAAE,CAAC,CAAC;IACvF,IAAI,EAAE,YAAY;IAClB,EAAE,EAAE,yCAAyC;IAC7C,QAAQ,EAAE;QACN,YAAY,EAAE,8BAA8B;QAC5C,WAAW,EAAE;YACT;gBACI,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,YAAY;gBACnB,MAAM,EAAE;oBACJ;wBACI,IAAI,EAAE,WAAW;wBACjB,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,YAAY;qBACrB;oBACD;wBACI,IAAI,EAAE,WAAW;wBACjB,KAAK,EAAE,aAAa;wBACpB,IAAI,EAAE,aAAa;qBACtB;oBACD;wBACI,IAAI,EAAE,QAAQ;wBACd,KAAK,EAAE,YAAY;wBACnB,IAAI,EAAE,YAAY;wBAClB,QAAQ,EAAE,IAAI;wBACd,OAAO,EAAE;4BACL,EAAC,KAAK,EAAE,GAAG,EAAC;4BACZ,EAAC,KAAK,EAAE,IAAI,EAAC;4BACb,EAAC,KAAK,EAAE,GAAG,EAAC;4BACZ,EAAC,KAAK,EAAE,GAAG,EAAC;4BACZ,EAAC,KAAK,EAAE,GAAG,EAAC;4BACZ,EAAC,KAAK,EAAE,IAAI,EAAC;yBAChB;qBACJ;oBACD;wBACI,IAAI,EAAE,QAAQ;wBACd,KAAK,EAAE,eAAe;wBACtB,IAAI,EAAE,eAAe;wBACrB,QAAQ,EAAE,IAAI;wBACd,OAAO,EAAE;4BACL,EAAC,KAAK,EAAE,GAAG,EAAC;4BACZ,EAAC,KAAK,EAAE,IAAI,EAAC;4BACb,EAAC,KAAK,EAAE,GAAG,EAAC;4BACZ,EAAC,KAAK,EAAE,GAAG,EAAC;4BACZ,EAAC,KAAK,EAAE,GAAG,EAAC;4BACZ,EAAC,KAAK,EAAE,IAAI,EAAC;yBAChB;qBACJ;oBACD;wBACI,IAAI,EAAE,QAAQ;wBACd,KAAK,EAAE,oBAAoB;wBAC3B,IAAI,EAAE,SAAS;wBACf,QAAQ,EAAE,IAAI;wBACd,OAAO,EAAE;4BACL,EAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAC;4BACjC,EAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAC;4BACrC,EAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAC;4BACrC,EAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAC;yBACxC;qBACJ;iBACJ;aACJ;SACJ;KACJ;CACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport BlockBase from '../../components/BlockBase/BlockBase';\nimport type {PageConstructorExtension} from '../../containers/PageConstructor/PageConstructor';\nimport type {BlockBaseProps, BlockWrapperDataProps} from '../../models';\nimport {IndentValue} from '../grid';\n\nexport const BlockBaseExtensionBlockWrapper: React.FC<\n BlockWrapperDataProps<BlockBaseProps> & React.PropsWithChildren\n> = ({props, content, children, type}) => {\n let defaultIndent;\n\n if (type.includes('header-block')) {\n defaultIndent = {top: '0' as IndentValue, bottom: '0' as IndentValue};\n }\n\n return (\n <BlockBase\n anchor={content?.anchor ?? props?.anchor}\n indent={content?.indent ?? props?.indent ?? defaultIndent}\n visible={content?.visible ?? props?.visible}\n resetPaddings={content?.resetPaddings ?? props?.resetPaddings}\n qa={content?.qa ?? props?.qa}\n >\n {children}\n </BlockBase>\n );\n};\n\nexport const blockBaseExtension = (): PageConstructorExtension<{}, {}, BlockBaseProps> => ({\n name: 'Block Base',\n id: '@gravity-ui/page-constructor/block-base',\n settings: {\n blockWrapper: BlockBaseExtensionBlockWrapper,\n blockInputs: [\n {\n type: 'section',\n title: 'Block Base',\n fields: [\n {\n type: 'textInput',\n title: 'Anchor',\n name: 'anchor.url',\n },\n {\n type: 'textInput',\n title: 'Anchor text',\n name: 'anchor.text',\n },\n {\n type: 'select',\n title: 'Top indent',\n name: 'indent.top',\n hasClear: true,\n options: [\n {value: '0'},\n {value: 'xs'},\n {value: 's'},\n {value: 'm'},\n {value: 'l'},\n {value: 'xl'},\n ],\n },\n {\n type: 'select',\n title: 'Bottom indent',\n name: 'indent.bottom',\n hasClear: true,\n options: [\n {value: '0'},\n {value: 'xs'},\n {value: 's'},\n {value: 'm'},\n {value: 'l'},\n {value: 'xl'},\n ],\n },\n {\n type: 'select',\n title: 'Hide on breakpoint',\n name: 'visible',\n hasClear: true,\n options: [\n {value: 'sm', content: 'SM only'},\n {value: 'md', content: 'MD and down'},\n {value: 'lg', content: 'LG and down'},\n {value: 'xl', content: 'XL and down'},\n ],\n },\n ],\n },\n ],\n },\n});\n"]}
|
|
@@ -2,7 +2,6 @@ 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";
|
|
6
5
|
interface UseEditorInitializeProps {
|
|
7
6
|
initialContent: PageContent;
|
|
8
7
|
setContent: (content: PageContent) => void;
|
|
@@ -1,8 +1,6 @@
|
|
|
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";
|
|
6
4
|
import { usePCEditorStore } from "./usePCEditorStore.js";
|
|
7
5
|
import { sendEventPostMessage, useInternalPostMessageAPIListener } from "./usePostMessageAPI.js";
|
|
8
6
|
function collectRectMap(registry) {
|
|
@@ -36,6 +34,10 @@ export const usePCEditorInitializeEvents = ({ initialContent, setContent, blocks
|
|
|
36
34
|
global: global || [],
|
|
37
35
|
});
|
|
38
36
|
});
|
|
37
|
+
const onResize = React.useCallback(() => {
|
|
38
|
+
const height = document.body.scrollHeight;
|
|
39
|
+
sendEventPostMessage('ON_RESIZE', { height });
|
|
40
|
+
}, []);
|
|
39
41
|
React.useEffect(() => {
|
|
40
42
|
if (!registry) {
|
|
41
43
|
return undefined;
|
|
@@ -67,7 +69,18 @@ export const usePCEditorInitializeEvents = ({ initialContent, setContent, blocks
|
|
|
67
69
|
};
|
|
68
70
|
}, [registry]);
|
|
69
71
|
React.useEffect(() => {
|
|
70
|
-
|
|
72
|
+
window.addEventListener('resize', onResize);
|
|
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 });
|
|
71
84
|
}, []);
|
|
72
85
|
};
|
|
73
86
|
//# 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\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"]}
|
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.8",
|
|
4
4
|
"description": "Gravity UI Page Constructor",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "commonjs",
|
|
@@ -157,7 +157,6 @@
|
|
|
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",
|
|
161
160
|
"immutable": "^4.3.7",
|
|
162
161
|
"js-yaml-source-map": "^0.2.2",
|
|
163
162
|
"lodash": "^4.17.21",
|
|
@@ -285,8 +284,8 @@
|
|
|
285
284
|
"webpack-shell-plugin-next": "^2.3.1"
|
|
286
285
|
},
|
|
287
286
|
"optionalDependencies": {
|
|
288
|
-
"@rollup/rollup-
|
|
289
|
-
"@rollup/rollup-
|
|
287
|
+
"@rollup/rollup-linux-x64-gnu": "^4.60.1",
|
|
288
|
+
"@rollup/rollup-darwin-arm64": "^4.60.1"
|
|
290
289
|
},
|
|
291
290
|
"lint-staged": {
|
|
292
291
|
"*.{css,scss}": [
|