@gravity-ui/page-constructor 8.4.1 → 8.5.0-alpha.0

package/build/esm/editor-v2/containers/BlocksList/BlocksList.css

@@ -0,0 +1,62 @@
+.pceditor-blocks-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.pceditor-blocks-list__search {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.pceditor-blocks-list__title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  user-select: none;
+  outline: none;
+  color: var(--g-color-text-secondary);
+  font-size: var(--g-text-subheader-1-font-size);
+  line-height: var(--g-text-subheader-1-line-height);
+  font-weight: 500;
+  border-radius: 8px;
+  transition: background-color 0.2s;
+}
+.pceditor-blocks-list__title:hover {
+  background-color: var(--g-color-base-generic-hover);
+}
+.pceditor-blocks-list__title:focus {
+  outline: none;
+}
+.pceditor-blocks-list__title-icon {
+  flex-shrink: 0;
+  color: var(--g-color-text-hint);
+  transition: transform 0.2s;
+}
+.pceditor-blocks-list__group:first-child {
+  margin-top: 0;
+}
+.pceditor-blocks-list__group:last-child {
+  border-bottom: none;
+}
+.pceditor-blocks-list__group_collapsed .pceditor-blocks-list__title-icon {
+  transform: rotate(0deg);
+}
+.pceditor-blocks-list__group:not(.pceditor-blocks-list__group_collapsed) .pceditor-blocks-list__title-icon {
+  transform: rotate(0deg);
+}
+.pceditor-blocks-list__group-items {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 8px;
+  margin-top: 8px;
+}
+.pceditor-blocks-list__search-icon {
+  margin-left: 8px;
+  margin-right: 8px;
+}

package/build/esm/editor-v2/containers/BlocksList/BlocksList.d.ts

@@ -0,0 +1,6 @@
+import { ClassNameProps } from "../../../models/index.js";
+import './BlocksList.css';
+interface BlockListProps extends ClassNameProps {
+}
+declare const BlocksList: ({ className }: BlockListProps) => import("react/jsx-runtime").JSX.Element;
+export default BlocksList;

package/build/esm/editor-v2/containers/BlocksList/BlocksList.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ChevronDown, ChevronRight, Eye, EyeSlash, Folder, FolderOpen, Magnifier, } from '@gravity-ui/icons';
+import { DropdownMenu, Icon, TextInput } from '@gravity-ui/uikit';
+import BlockCard from "../../components/BlockCard/BlockCard.js";
+import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
+import { editorCn } from "../../utils/cn.js";
+import './BlocksList.css';
+const b = editorCn('blocks-list');
+const BlocksList = ({ className }) => {
+    const { blocks, enableInsertMode } = useMainEditorStore();
+    const [search, setSearch] = React.useState('');
+    const [collapsedGroups, setCollapsedGroups] = React.useState(new Set());
+    const [showHidden, setShowHidden] = React.useState(false);
+    const onMouseDown = React.useCallback((blockType) => {
+        enableInsertMode(blockType);
+    }, [enableInsertMode]);
+    const toggleGroup = React.useCallback((groupKey) => {
+        setCollapsedGroups((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(groupKey)) {
+                newSet.delete(groupKey);
+            }
+            else {
+                newSet.add(groupKey);
+            }
+            return newSet;
+        });
+    }, []);
+    const expandAll = React.useCallback(() => {
+        setCollapsedGroups(new Set());
+    }, []);
+    const groups = React.useMemo(() => {
+        const blocksGroups = blocks.reduce((acc, currentBlock) => {
+            const group = currentBlock.schema.group;
+            if (!showHidden && currentBlock.schema.hidden) {
+                return acc;
+            }
+            if (search &&
+                currentBlock.type.toLowerCase().indexOf(search.toLowerCase()) === -1 &&
+                currentBlock.schema.name.toLowerCase().indexOf(search.toLowerCase()) === -1) {
+                return acc;
+            }
+            if (group) {
+                if (!acc[group]) {
+                    /* eslint-disable no-param-reassign */
+                    acc[group] = [];
+                }
+                acc[group].push(currentBlock);
+            }
+            else {
+                if (!acc['Other']) {
+                    /* eslint-disable no-param-reassign */
+                    acc['Other'] = [];
+                }
+                acc['Other'].push(currentBlock);
+            }
+            return acc;
+        }, {});
+        return Object.keys(blocksGroups)
+            .sort()
+            .reduce((sortedGroups, key) => {
+            sortedGroups[key] = blocksGroups[key];
+            return sortedGroups;
+        }, {});
+    }, [blocks, search, showHidden]);
+    const collapseAll = React.useCallback(() => {
+        setCollapsedGroups(new Set(Object.keys(groups)));
+    }, [groups]);
+    const allGroupsExpanded = collapsedGroups.size === 0;
+    const allGroupsCollapsed = collapsedGroups.size === Object.keys(groups).length;
+    return (_jsxs("div", { className: b(null, className), children: [_jsxs("div", { className: b('search'), children: [_jsx(TextInput, { size: "m", hasClear: true, placeholder: "Search block", onUpdate: setSearch, value: search, startContent: _jsx(Icon, { className: b('search-icon'), data: Magnifier }) }), _jsx(DropdownMenu, { items: [
+                            {
+                                action: expandAll,
+                                text: 'Раскрыть все',
+                                iconStart: _jsx(Icon, { data: FolderOpen }),
+                                disabled: allGroupsExpanded,
+                            },
+                            {
+                                action: collapseAll,
+                                text: 'Свернуть все',
+                                iconStart: _jsx(Icon, { data: Folder }),
+                                disabled: allGroupsCollapsed,
+                            },
+                            {
+                                action: () => setShowHidden(!showHidden),
+                                text: showHidden ? 'Скрыть скрытые' : 'Показать скрытые',
+                                iconStart: _jsx(Icon, { data: showHidden ? EyeSlash : Eye }),
+                            },
+                        ] })] }), Object.entries(groups).map(([key, groupBlocks]) => {
+                const isCollapsed = collapsedGroups.has(key);
+                return (_jsxs("div", { className: b('group', { collapsed: isCollapsed }), children: [_jsxs("button", { className: b('title'), onClick: () => toggleGroup(key), type: "button", children: [_jsx(Icon, { className: b('title-icon'), data: isCollapsed ? ChevronRight : ChevronDown, size: 14 }), key] }), !isCollapsed && (_jsx("div", { className: b('group-items'), children: groupBlocks.map(({ type, schema: { name, previewImg } }) => (_jsx(BlockCard, { type: type, name: name, previewImg: previewImg, onMouseDown: onMouseDown }, type))) }))] }, key));
+            })] }));
+};
+export default BlocksList;
+//# sourceMappingURL=BlocksList.js.map

package/build/esm/editor-v2/containers/BlocksList/BlocksList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlocksList.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/BlocksList/BlocksList.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACH,WAAW,EACX,YAAY,EACZ,GAAG,EACH,QAAQ,EACR,MAAM,EACN,UAAU,EACV,SAAS,GACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAC,YAAY,EAAE,IAAI,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAIhE,OAAO,SAAS,gDAA6C;AAC7D,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AAExC,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAQlC,MAAM,UAAU,GAAG,CAAC,EAAC,SAAS,EAAiB,EAAE,EAAE;IAC/C,MAAM,EAAC,MAAM,EAAE,gBAAgB,EAAC,GAAG,kBAAkB,EAAE,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAc,IAAI,GAAG,EAAE,CAAC,CAAC;IACrF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,SAAiB,EAAE,EAAE;QAClB,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC,EACD,CAAC,gBAAgB,CAAC,CACrB,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAE,EAAE;QACvD,kBAAkB,CAAC,CAAC,IAAI,EAAE,EAAE;YACxB,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC;YAC7B,IAAI,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACvB,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YAC5B,CAAC;iBAAM,CAAC;gBACJ,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YACzB,CAAC;YACD,OAAO,MAAM,CAAC;QAClB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACrC,kBAAkB,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;IAClC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC9B,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAc,CAAC,GAAG,EAAE,YAAY,EAAE,EAAE;YAClE,MAAM,KAAK,GAAG,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC;YAExC,IAAI,CAAC,UAAU,IAAI,YAAY,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;gBAC5C,OAAO,GAAG,CAAC;YACf,CAAC;YAED,IACI,MAAM;gBACN,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC;gBACpE,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAC7E,CAAC;gBACC,OAAO,GAAG,CAAC;YACf,CAAC;YACD,IAAI,KAAK,EAAE,CAAC;gBACR,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;oBACd,sCAAsC;oBACtC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;gBACpB,CAAC;gBACD,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAClC,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;oBAChB,sCAAsC;oBACtC,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;gBACtB,CAAC;gBACD,GAAG,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACpC,CAAC;YAED,OAAO,GAAG,CAAC;QACf,CAAC,EAAE,EAAiB,CAAC,CAAC;QAEtB,OAAO,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;aAC3B,IAAI,EAAE;aACN,MAAM,CAAC,CAAC,YAAY,EAAE,GAAG,EAAE,EAAE;YAC1B,YAAY,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;YACtC,OAAO,YAAY,CAAC;QACxB,CAAC,EAAE,EAAiB,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAEjC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvC,kBAAkB,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,iBAAiB,GAAG,eAAe,CAAC,IAAI,KAAK,CAAC,CAAC;IACrD,MAAM,kBAAkB,GAAG,eAAe,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC;IAE/E,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,eAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACvB,KAAC,SAAS,IACN,IAAI,EAAC,GAAG,EACR,QAAQ,QACR,WAAW,EAAC,cAAc,EAC1B,QAAQ,EAAE,SAAS,EACnB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,KAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,GAAI,GACtE,EACF,KAAC,YAAY,IACT,KAAK,EAAE;4BACH;gCACI,MAAM,EAAE,SAAS;gCACjB,IAAI,EAAE,cAAc;gCACpB,SAAS,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,GAAI;gCACrC,QAAQ,EAAE,iBAAiB;6BAC9B;4BACD;gCACI,MAAM,EAAE,WAAW;gCACnB,IAAI,EAAE,cAAc;gCACpB,SAAS,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,GAAI;gCACjC,QAAQ,EAAE,kBAAkB;6BAC/B;4BACD;gCACI,MAAM,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC;gCACxC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,kBAAkB;gCACxD,SAAS,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,GAAI;6BACzD;yBACJ,GACH,IACA,EACL,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,WAAW,CAAC,EAAE,EAAE;gBAC/C,MAAM,WAAW,GAAG,eAAe,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;gBAC7C,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,SAAS,EAAE,WAAW,EAAC,CAAC,aAChD,kBACI,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,EAC/B,IAAI,EAAC,QAAQ,aAEb,KAAC,IAAI,IACD,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,EAC1B,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAC9C,IAAI,EAAE,EAAE,GACV,EACD,GAAG,IACC,EACR,CAAC,WAAW,IAAI,CACb,cAAK,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,YAC3B,WAAW,CAAC,GAAG,CAAC,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,EAAC,IAAI,EAAE,UAAU,EAAC,EAAC,EAAE,EAAE,CAAC,CACrD,KAAC,SAAS,IAEN,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,IAJnB,IAAI,CAKX,CACL,CAAC,GACA,CACT,KAzBsD,GAAG,CA0BxD,CACT,CAAC;YACN,CAAC,CAAC,IACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {\n    ChevronDown,\n    ChevronRight,\n    Eye,\n    EyeSlash,\n    Folder,\n    FolderOpen,\n    Magnifier,\n} from '@gravity-ui/icons';\nimport {DropdownMenu, Icon, TextInput} from '@gravity-ui/uikit';\n\nimport {ItemConfig} from '../../../common/types';\nimport {ClassNameProps} from '../../../models';\nimport BlockCard from '../../components/BlockCard/BlockCard';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './BlocksList.scss';\n\nconst b = editorCn('blocks-list');\n\ninterface BlockGroups {\n    [key: string]: ItemConfig[];\n}\n\ninterface BlockListProps extends ClassNameProps {}\n\nconst BlocksList = ({className}: BlockListProps) => {\n    const {blocks, enableInsertMode} = useMainEditorStore();\n    const [search, setSearch] = React.useState('');\n    const [collapsedGroups, setCollapsedGroups] = React.useState<Set<string>>(new Set());\n    const [showHidden, setShowHidden] = React.useState(false);\n\n    const onMouseDown = React.useCallback(\n        (blockType: string) => {\n            enableInsertMode(blockType);\n        },\n        [enableInsertMode],\n    );\n\n    const toggleGroup = React.useCallback((groupKey: string) => {\n        setCollapsedGroups((prev) => {\n            const newSet = new Set(prev);\n            if (newSet.has(groupKey)) {\n                newSet.delete(groupKey);\n            } else {\n                newSet.add(groupKey);\n            }\n            return newSet;\n        });\n    }, []);\n\n    const expandAll = React.useCallback(() => {\n        setCollapsedGroups(new Set());\n    }, []);\n\n    const groups = React.useMemo(() => {\n        const blocksGroups = blocks.reduce<BlockGroups>((acc, currentBlock) => {\n            const group = currentBlock.schema.group;\n\n            if (!showHidden && currentBlock.schema.hidden) {\n                return acc;\n            }\n\n            if (\n                search &&\n                currentBlock.type.toLowerCase().indexOf(search.toLowerCase()) === -1 &&\n                currentBlock.schema.name.toLowerCase().indexOf(search.toLowerCase()) === -1\n            ) {\n                return acc;\n            }\n            if (group) {\n                if (!acc[group]) {\n                    /* eslint-disable no-param-reassign */\n                    acc[group] = [];\n                }\n                acc[group].push(currentBlock);\n            } else {\n                if (!acc['Other']) {\n                    /* eslint-disable no-param-reassign */\n                    acc['Other'] = [];\n                }\n                acc['Other'].push(currentBlock);\n            }\n\n            return acc;\n        }, {} as BlockGroups);\n\n        return Object.keys(blocksGroups)\n            .sort()\n            .reduce((sortedGroups, key) => {\n                sortedGroups[key] = blocksGroups[key];\n                return sortedGroups;\n            }, {} as BlockGroups);\n    }, [blocks, search, showHidden]);\n\n    const collapseAll = React.useCallback(() => {\n        setCollapsedGroups(new Set(Object.keys(groups)));\n    }, [groups]);\n\n    const allGroupsExpanded = collapsedGroups.size === 0;\n    const allGroupsCollapsed = collapsedGroups.size === Object.keys(groups).length;\n\n    return (\n        <div className={b(null, className)}>\n            <div className={b('search')}>\n                <TextInput\n                    size=\"m\"\n                    hasClear\n                    placeholder=\"Search block\"\n                    onUpdate={setSearch}\n                    value={search}\n                    startContent={<Icon className={b('search-icon')} data={Magnifier} />}\n                />\n                <DropdownMenu\n                    items={[\n                        {\n                            action: expandAll,\n                            text: 'Раскрыть все',\n                            iconStart: <Icon data={FolderOpen} />,\n                            disabled: allGroupsExpanded,\n                        },\n                        {\n                            action: collapseAll,\n                            text: 'Свернуть все',\n                            iconStart: <Icon data={Folder} />,\n                            disabled: allGroupsCollapsed,\n                        },\n                        {\n                            action: () => setShowHidden(!showHidden),\n                            text: showHidden ? 'Скрыть скрытые' : 'Показать скрытые',\n                            iconStart: <Icon data={showHidden ? EyeSlash : Eye} />,\n                        },\n                    ]}\n                />\n            </div>\n            {Object.entries(groups).map(([key, groupBlocks]) => {\n                const isCollapsed = collapsedGroups.has(key);\n                return (\n                    <div className={b('group', {collapsed: isCollapsed})} key={key}>\n                        <button\n                            className={b('title')}\n                            onClick={() => toggleGroup(key)}\n                            type=\"button\"\n                        >\n                            <Icon\n                                className={b('title-icon')}\n                                data={isCollapsed ? ChevronRight : ChevronDown}\n                                size={14}\n                            />\n                            {key}\n                        </button>\n                        {!isCollapsed && (\n                            <div className={b('group-items')}>\n                                {groupBlocks.map(({type, schema: {name, previewImg}}) => (\n                                    <BlockCard\n                                        key={type}\n                                        type={type}\n                                        name={name}\n                                        previewImg={previewImg}\n                                        onMouseDown={onMouseDown}\n                                    />\n                                ))}\n                            </div>\n                        )}\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default BlocksList;\n"]}

package/build/esm/editor-v2/containers/Editor/Editor.css

@@ -0,0 +1,38 @@
+.pceditor-editor {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.pceditor-editor__header {
+  height: 0px;
+  width: 100%;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.pceditor-editor__body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  width: 100%;
+  max-height: calc(100% - 0px);
+}
+.pceditor-editor__canvas {
+  flex: 1;
+}
+.pceditor-editor__overlay {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 100;
+}
+.pceditor-editor__debug-store {
+  position: fixed;
+  right: 8px;
+  bottom: 8px;
+  z-index: 1000;
+}

package/build/esm/editor-v2/containers/Editor/Editor.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { PageContent } from "../../../models/index.js";
+import './Editor.css';
+interface SidebarTabComponent {
+    id: string;
+    title: string;
+    component: React.ElementType;
+}
+interface ComponentsConfig {
+    middleTop?: React.ElementType;
+    leftTop?: React.ElementType[];
+    rightTop?: React.ElementType[];
+    leftTabs?: SidebarTabComponent[];
+    rightTabs?: SidebarTabComponent[];
+}
+export interface EditorProviderProps {
+    initialUrl: string;
+    disableUrlField?: boolean;
+    children: React.ReactNode;
+}
+export interface EditorViewProps {
+    onUpdate?: (pageContent: PageContent) => void;
+    initialContent?: PageContent;
+    componentsConfig?: ComponentsConfig;
+}
+type EditorProps = Omit<EditorProviderProps, 'children'> & EditorViewProps;
+export declare const EditorProvider: ({ initialUrl, disableUrlField, children }: EditorProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EditorView: (props: EditorViewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Editor: (props: EditorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/esm/editor-v2/containers/Editor/Editor.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { usePostMessageAPIListener } from "../../../common/postMessage.js";
+import { Panels } from "../../components/Panels/Panels.js";
+import { Sidebar } from "../../components/Sidebar/Sidebar.js";
+import BigOverlay from "../BigOverlay/BigOverlay.js";
+import MiddleScreen from "../MiddleScreen/MiddleScreen.js";
+import { MainEditorStoreProvider } from "../../context/editorStore/index.js";
+import { IframeProvider } from "../../context/iframeContext/index.js";
+import { useEditorTabs } from "../../hooks/useEditorTabs.js";
+import useMainEditorInitialize from "../../hooks/useMainEditorInitialize.js";
+import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
+import { editorCn } from "../../utils/cn.js";
+import Source from "../Source/Source.js";
+import ViewSwitches from "../ViewSwitches/ViewSwitches.js";
+import './Editor.css';
+const b = editorCn('editor');
+const EditorViewInternal = ({ componentsConfig = {}, initialContent }) => {
+    const store = useMainEditorStore();
+    const { manipulateOverlayMode, disableMode, undo, redo } = store;
+    useMainEditorInitialize(initialContent);
+    usePostMessageAPIListener('ON_EDITOR_UNDO', () => {
+        undo();
+    }, [undo]);
+    usePostMessageAPIListener('ON_EDITOR_REDO', () => {
+        redo();
+    }, [redo]);
+    React.useEffect(() => {
+        const onKeyDown = (e) => {
+            if (!(e.metaKey || e.ctrlKey)) {
+                return;
+            }
+            if (e.key.toLowerCase() !== 'z') {
+                return;
+            }
+            const target = e.target;
+            if (target?.closest('input, textarea, select, [contenteditable="true"]')) {
+                return;
+            }
+            e.preventDefault();
+            if (e.shiftKey) {
+                redo();
+            }
+            else {
+                undo();
+            }
+        };
+        window.addEventListener('keydown', onKeyDown, true);
+        return () => window.removeEventListener('keydown', onKeyDown, true);
+    }, [redo, undo]);
+    // Disable insert mode on any MouseUp event
+    // Maybe should be attached to body
+    const onMouseUp = React.useCallback((e) => {
+        if (manipulateOverlayMode) {
+            e.preventDefault();
+            disableMode();
+        }
+    }, [disableMode, manipulateOverlayMode]);
+    const { left, right } = useEditorTabs(componentsConfig);
+    return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsxs("div", { className: b(), onMouseUp: onMouseUp, children: [_jsx("div", { className: b('body'), children: _jsx(Panels, { left: _jsx(Sidebar, { tabs: left, top: componentsConfig.leftTop }), right: _jsx(Sidebar, { tabs: right, top: [...(componentsConfig.rightTop || []), Source, ViewSwitches], defaultTab: "block-config" }), middle: _jsx(MiddleScreen, { CustomTop: componentsConfig.middleTop }) }) }), _jsx(BigOverlay, { className: b('overlay') })] }));
+};
+export const EditorProvider = ({ initialUrl, disableUrlField, children }) => {
+    return (_jsx(IframeProvider, { initialUrl: initialUrl, disableUrlField: disableUrlField, children: _jsx(MainEditorStoreProvider, { children: children }) }));
+};
+export const EditorView = (props) => _jsx(EditorViewInternal, { ...props });
+export const Editor = (props) => {
+    return (_jsx(EditorProvider, { initialUrl: props.initialUrl, disableUrlField: props.disableUrlField, children: _jsx(EditorView, { ...props }) }));
+};
+//# sourceMappingURL=Editor.js.map

package/build/esm/editor-v2/containers/Editor/Editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/Editor/Editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {usePostMessageAPIListener} from '../../../common/postMessage';\nimport {PageContent} from '../../../models';\nimport {Panels} from '../../components/Panels/Panels';\nimport {Sidebar} from '../../components/Sidebar/Sidebar';\nimport BigOverlay from '../../containers/BigOverlay/BigOverlay';\nimport MiddleScreen from '../../containers/MiddleScreen/MiddleScreen';\nimport {MainEditorStoreProvider} from '../../context/editorStore';\nimport {IframeProvider} from '../../context/iframeContext';\nimport {useEditorTabs} from '../../hooks/useEditorTabs';\nimport useMainEditorInitialize from '../../hooks/useMainEditorInitialize';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\nimport Source from '../Source/Source';\nimport ViewSwitches from '../ViewSwitches/ViewSwitches';\n\nimport './Editor.scss';\n\nconst b = editorCn('editor');\n\ninterface SidebarTabComponent {\n    id: string;\n    title: string;\n    component: React.ElementType;\n}\n\ninterface ComponentsConfig {\n    middleTop?: React.ElementType;\n    leftTop?: React.ElementType[];\n    rightTop?: React.ElementType[];\n    leftTabs?: SidebarTabComponent[];\n    rightTabs?: SidebarTabComponent[];\n}\n\nexport interface EditorProviderProps {\n    initialUrl: string;\n    disableUrlField?: boolean;\n    children: React.ReactNode;\n}\n\nexport interface EditorViewProps {\n    onUpdate?: (pageContent: PageContent) => void;\n    initialContent?: PageContent;\n    componentsConfig?: ComponentsConfig;\n}\n\ntype EditorProps = Omit<EditorProviderProps, 'children'> & EditorViewProps;\n\nconst EditorViewInternal = ({componentsConfig = {}, initialContent}: EditorViewProps) => {\n    const store = useMainEditorStore();\n    const {manipulateOverlayMode, disableMode, undo, redo} = store;\n\n    useMainEditorInitialize(initialContent);\n\n    usePostMessageAPIListener(\n        'ON_EDITOR_UNDO',\n        () => {\n            undo();\n        },\n        [undo],\n    );\n    usePostMessageAPIListener(\n        'ON_EDITOR_REDO',\n        () => {\n            redo();\n        },\n        [redo],\n    );\n\n    React.useEffect(() => {\n        const onKeyDown = (e: KeyboardEvent) => {\n            if (!(e.metaKey || e.ctrlKey)) {\n                return;\n            }\n\n            if (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                redo();\n            } else {\n                undo();\n            }\n        };\n\n        window.addEventListener('keydown', onKeyDown, true);\n\n        return () => window.removeEventListener('keydown', onKeyDown, true);\n    }, [redo, undo]);\n\n    // Disable insert mode on any MouseUp event\n    // Maybe should be attached to body\n    const onMouseUp = React.useCallback(\n        (e: React.MouseEvent) => {\n            if (manipulateOverlayMode) {\n                e.preventDefault();\n                disableMode();\n            }\n        },\n        [disableMode, manipulateOverlayMode],\n    );\n    const {left, right} = useEditorTabs(componentsConfig);\n\n    return (\n        // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n        <div className={b()} onMouseUp={onMouseUp}>\n            <div className={b('body')}>\n                <Panels\n                    left={<Sidebar tabs={left} top={componentsConfig.leftTop} />}\n                    right={\n                        <Sidebar\n                            tabs={right}\n                            top={[...(componentsConfig.rightTop || []), Source, ViewSwitches]}\n                            defaultTab=\"block-config\"\n                        />\n                    }\n                    middle={<MiddleScreen CustomTop={componentsConfig.middleTop} />}\n                />\n            </div>\n            <BigOverlay className={b('overlay')} />\n        </div>\n    );\n};\n\nexport const EditorProvider = ({initialUrl, disableUrlField, children}: EditorProviderProps) => {\n    return (\n        <IframeProvider initialUrl={initialUrl} disableUrlField={disableUrlField}>\n            <MainEditorStoreProvider>{children}</MainEditorStoreProvider>\n        </IframeProvider>\n    );\n};\n\nexport const EditorView = (props: EditorViewProps) => <EditorViewInternal {...props} />;\n\nexport const Editor = (props: EditorProps) => {\n    return (\n        <EditorProvider initialUrl={props.initialUrl} disableUrlField={props.disableUrlField}>\n            <EditorView {...props} />\n        </EditorProvider>\n    );\n};\n"]}

package/build/esm/editor-v2/containers/GlobalConfig/GlobalConfig.css

@@ -0,0 +1,8 @@
+.pceditor-global-config__title {
+  font-family: var(--g-text-subheader-font-family);
+  font-weight: var(--g-text-subheader-font-weight);
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
+  padding: 16px 12px;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}

package/build/esm/editor-v2/containers/GlobalConfig/GlobalConfig.d.ts

@@ -0,0 +1,6 @@
+import './GlobalConfig.css';
+export interface GlobalConfigProps {
+    className?: string;
+}
+declare const GlobalConfig: ({ className }: GlobalConfigProps) => import("react/jsx-runtime").JSX.Element;
+export default GlobalConfig;

package/build/esm/editor-v2/containers/GlobalConfig/GlobalConfig.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FormGenerator from "../../../form-generator-v2/FormGenerator.js";
+import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
+import { editorCn } from "../../utils/cn.js";
+import './GlobalConfig.css';
+const b = editorCn('global-config');
+const GlobalConfig = ({ className }) => {
+    const { global, content, updateField } = useMainEditorStore();
+    const onUpdate = (key, value) => {
+        updateField(key, value);
+    };
+    return (_jsxs("div", { className: b(null, className), children: [_jsx("div", { className: b('title'), children: "Global Config" }), _jsx(FormGenerator, { contentConfig: content, blockConfig: global, onUpdateByKey: onUpdate })] }));
+};
+export default GlobalConfig;
+//# sourceMappingURL=GlobalConfig.js.map

package/build/esm/editor-v2/containers/GlobalConfig/GlobalConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalConfig.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/GlobalConfig/GlobalConfig.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,oDAAiD;AACrE,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AAExC,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAMpC,MAAM,YAAY,GAAG,CAAC,EAAC,SAAS,EAAoB,EAAE,EAAE;IACpD,MAAM,EAAC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAC,GAAG,kBAAkB,EAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,KAAc,EAAE,EAAE;QAC7C,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,8BAAqB,EAC/C,KAAC,aAAa,IAAC,aAAa,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,GAAI,IACrF,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import FormGenerator from '../../../form-generator-v2/FormGenerator';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './GlobalConfig.scss';\n\nconst b = editorCn('global-config');\n\nexport interface GlobalConfigProps {\n    className?: string;\n}\n\nconst GlobalConfig = ({className}: GlobalConfigProps) => {\n    const {global, content, updateField} = useMainEditorStore();\n\n    const onUpdate = (key: string, value: unknown) => {\n        updateField(key, value);\n    };\n\n    return (\n        <div className={b(null, className)}>\n            <div className={b('title')}>Global Config</div>\n            <FormGenerator contentConfig={content} blockConfig={global} onUpdateByKey={onUpdate} />\n        </div>\n    );\n};\n\nexport default GlobalConfig;\n"]}

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

@@ -0,0 +1,135 @@
+.pceditor-middle-screen {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.pceditor-middle-screen__topbar {
+  flex: 0 0 auto;
+}
+.pceditor-middle-screen__content {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  background-color: var(--g-color-text-secondary);
+}
+.pceditor-middle-screen__content_fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1000;
+  background-color: #000;
+}
+.pceditor-middle-screen__wrapper {
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  overflow: hidden;
+  position: relative;
+}
+.pceditor-middle-screen__canvas {
+  scrollbar-width: thin;
+  scrollbar-color: var(--g-color-scroll-handle) transparent;
+  overflow: auto;
+}
+.pceditor-middle-screen__canvas::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: transparent;
+}
+.pceditor-middle-screen__canvas::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+.pceditor-middle-screen__canvas::-webkit-scrollbar-thumb {
+  background: var(--g-color-scroll-handle);
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  opacity: 0;
+}
+.pceditor-middle-screen__canvas::-webkit-scrollbar-thumb:hover {
+  background: var(--g-color-scroll-handle-hover);
+  opacity: 1;
+}
+.pceditor-middle-screen__canvas::-webkit-scrollbar-thumb:active {
+  background: var(--g-color-scroll-handle-hover);
+  opacity: 1;
+}
+.pceditor-middle-screen__canvas::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.pceditor-middle-screen__canvas:hover::-webkit-scrollbar-thumb {
+  opacity: 0.7;
+}
+.pceditor-middle-screen__canvas:not(:hover)::-webkit-scrollbar-thumb {
+  opacity: 0;
+  transition: opacity 0.5s ease-out;
+}
+.pceditor-middle-screen__canvas {
+  background-color: var(--g-color-base-background);
+  transform-origin: center top;
+  position: absolute;
+  height: 100%;
+  max-width: 100%;
+}
+.pceditor-middle-screen__canvas_fullscreen {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+}
+.pceditor-middle-screen__canvas_withBackground {
+  background-color: var(--g-color-base-generic-accent);
+}
+.pceditor-middle-screen__iframe-container {
+  position: relative;
+  margin: 0 auto;
+}
+.pceditor-middle-screen__iframe-container_fullscreen {
+  height: 100%;
+}
+.pceditor-middle-screen__iframe {
+  display: block;
+}
+.pceditor-middle-screen__iframe_fullscreen {
+  width: 100%;
+  height: 100%;
+}
+.pceditor-middle-screen__exit-preview.g-button {
+  position: fixed;
+  opacity: 0.5;
+  top: 16px;
+  right: 16px;
+  z-index: 1001;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pceditor-middle-screen__overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.pceditor-middle-screen__border {
+  position: absolute;
+  border: 3px var(--g-color-line-brand) solid;
+  border-radius: 10px;
+}
+.pceditor-middle-screen__loading {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--g-color-base-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/build/esm/editor-v2/containers/MiddleScreen/MiddleScreen.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import './MiddleScreen.css';
+interface MiddleScreenProps {
+    className?: string;
+    CustomTop?: React.ElementType;
+}
+declare const MiddleScreen: ({ className, CustomTop }: MiddleScreenProps) => import("react/jsx-runtime").JSX.Element;
+export default MiddleScreen;

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Xmark } from '@gravity-ui/icons';
+import { Button, Icon, Loader } from '@gravity-ui/uikit';
+import { usePostMessageAPIListener } from "../../../common/postMessage.js";
+import { IframeContext } from "../../context/iframeContext/index.js";
+import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
+import { editorCn } from "../../utils/cn.js";
+import Overlay from "../Overlay/Overlay.js";
+import './MiddleScreen.css';
+const b = editorCn('middle-screen');
+const MiddleScreen = ({ className, CustomTop }) => {
+    const { zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode } = useMainEditorStore();
+    const { url, setIframeElement } = React.useContext(IframeContext);
+    const [canvasRef, setCanvasRef] = React.useState(null);
+    const [height, setHeight] = React.useState(0);
+    const canvasStyle = React.useMemo(() => ({
+        transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,
+        height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
+        width: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
+        maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
+    }), [isPreviewMode, zoom]);
+    const onResize = React.useCallback((newHeight) => {
+        setHeight(newHeight + 100);
+    }, [setHeight]);
+    usePostMessageAPIListener('ON_RESIZE', ({ height: newHeight }) => {
+        onResize(newHeight);
+    });
+    usePostMessageAPIListener('ON_INIT', ({ height: newHeight }) => {
+        onResize(newHeight);
+    });
+    const isWithBackground = React.useMemo(() => {
+        return deviceWidth !== '100%';
+    }, [deviceWidth]);
+    return (_jsxs("div", { className: b(null, className), children: [CustomTop && !isPreviewMode ? (_jsx("div", { className: b('topbar'), children: _jsx(CustomTop, {}) })) : null, _jsx("div", { className: b('content', { fullscreen: isPreviewMode }), children: _jsx("div", { className: b('wrapper'), children: _jsxs("div", { ref: setCanvasRef, className: b('canvas', {
+                            hidden: !initialized,
+                            fullscreen: isPreviewMode,
+                            withBackground: isWithBackground,
+                        }), style: canvasStyle, children: [_jsxs("div", { className: b('iframe-container', { fullscreen: isPreviewMode }), style: { width: isPreviewMode ? '100%' : deviceWidth }, children: [_jsx("iframe", { ref: (instance) => {
+                                            if (instance) {
+                                                setIframeElement(instance);
+                                            }
+                                        }, className: b('iframe', { fullscreen: isPreviewMode }), src: url, height: isPreviewMode ? '100%' : `${height}px`, width: isPreviewMode ? '100%' : deviceWidth, frameBorder: "0", title: "Page Constructor Iframe" }), !isPreviewMode && (_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' }) }))] }) }) })] }));
+};
+export default MiddleScreen;
+//# sourceMappingURL=MiddleScreen.js.map

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

@@ -0,0 +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"]}