@gravity-ui/page-constructor 6.3.2-alpha.0 → 6.3.2-alpha.11

package/build/cjs/editor-v2/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZOOM_STEPS = void 0;
+exports.ZOOM_STEPS = [25, 33, 50, 75, 100, 125, 150, 200, 250, 300];
+//# sourceMappingURL=constants.js.map

package/build/cjs/editor-v2/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"../../../src","sources":["editor-v2/constants.ts"],"names":[],"mappings":";;;AAAa,QAAA,UAAU,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC","sourcesContent":["export const ZOOM_STEPS = [25, 33, 50, 75, 100, 125, 150, 200, 250, 300];\n"]}

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

@@ -0,0 +1,22 @@
+.pceditor-big-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: hidden;
+}
+.pceditor-big-overlay__border {
+  pointer-events: none;
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  margin-left: -20px;
+  margin-top: -20px;
+  background-color: var(--g-color-base-brand);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+}

package/build/cjs/editor-v2/containers/BigOverlay/BigOverlay.d.ts

@@ -0,0 +1,4 @@
+declare const BigOverlay: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default BigOverlay;

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@gravity-ui/icons");
+const React = tslib_1.__importStar(require("react"));
+const postMessage_1 = require("../../../common/postMessage.js");
+const iframeContext_1 = require("../../context/iframeContext/index.js");
+const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
+const cn_1 = require("../../utils/cn.js");
+const b = (0, cn_1.editorCn)('big-overlay');
+const BigOverlay = ({ className }) => {
+    const { zoom, manipulateOverlayMode } = (0, useMainEditorStore_1.useMainEditorStore)();
+    const { iframeElement } = React.useContext(iframeContext_1.IframeContext);
+    const [mousePosition, setMousePosition] = React.useState(undefined);
+    const [source, setSource] = React.useState('main');
+    const onMouseUp = React.useCallback(() => {
+        setMousePosition(undefined);
+    }, []);
+    const onIframeMouseEvent = React.useCallback((position) => {
+        setMousePosition(position);
+        setSource('iframe');
+    }, []);
+    (0, postMessage_1.usePostMessageAPIListener)('ON_MOUSE_UP', onMouseUp);
+    (0, postMessage_1.usePostMessageAPIListener)('ON_MOUSE_MOVE', onIframeMouseEvent);
+    React.useEffect(() => {
+        const onEditorMouseEvent = (event) => {
+            setMousePosition({ x: event.clientX, y: event.clientY });
+            setSource('main');
+        };
+        document.addEventListener('mousemove', onEditorMouseEvent);
+        document.addEventListener('mousedown', onEditorMouseEvent);
+        return () => {
+            document.removeEventListener('mousemove', onEditorMouseEvent);
+            document.removeEventListener('mousedown', onEditorMouseEvent);
+        };
+    }, []);
+    const realPositions = React.useMemo(() => {
+        if (mousePosition) {
+            const { x, y } = mousePosition;
+            const iframeRect = iframeElement?.getClientRects().item(0);
+            if (iframeRect) {
+                const zoomedX = (x * zoom) / 100;
+                const zoomedY = (y * zoom) / 100;
+                const newX = source === 'main' ? x : zoomedX + iframeRect.x;
+                const newY = source === 'main' ? y : zoomedY + iframeRect.y;
+                return { x: newX, y: newY };
+            }
+        }
+        return undefined;
+    }, [mousePosition, source, iframeElement, zoom]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: b(null, className), children: realPositions && manipulateOverlayMode ? ((0, jsx_runtime_1.jsx)("div", { className: b('border'), style: {
+                top: realPositions.y,
+                left: realPositions.x,
+            }, children: (0, jsx_runtime_1.jsx)(icons_1.Stop, { height: 20, width: 20 }) })) : null }));
+};
+exports.default = BigOverlay;
+//# sourceMappingURL=BigOverlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BigOverlay.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/BigOverlay/BigOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Stop} from '@gravity-ui/icons';\nimport * as React from 'react';\n\nimport {usePostMessageAPIListener} from '../../../common/postMessage';\nimport {IframeContext} from '../../context/iframeContext';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './BigOverlay.scss';\n\nconst b = editorCn('big-overlay');\n\nconst BigOverlay = ({className}: {className?: string}) => {\n    const {zoom, manipulateOverlayMode} = useMainEditorStore();\n    const {iframeElement} = React.useContext(IframeContext);\n    const [mousePosition, setMousePosition] = React.useState<{x: number; y: number} | undefined>(\n        undefined,\n    );\n    const [source, setSource] = React.useState<'main' | 'iframe'>('main');\n\n    const onMouseUp = React.useCallback(() => {\n        setMousePosition(undefined);\n    }, []);\n\n    const onIframeMouseEvent = React.useCallback((position: {x: number; y: number}) => {\n        setMousePosition(position);\n        setSource('iframe');\n    }, []);\n\n    usePostMessageAPIListener('ON_MOUSE_UP', onMouseUp);\n    usePostMessageAPIListener('ON_MOUSE_MOVE', onIframeMouseEvent);\n\n    React.useEffect(() => {\n        const onEditorMouseEvent = (event: MouseEvent) => {\n            setMousePosition({x: event.clientX, y: event.clientY});\n            setSource('main');\n        };\n\n        document.addEventListener('mousemove', onEditorMouseEvent);\n        document.addEventListener('mousedown', onEditorMouseEvent);\n\n        return () => {\n            document.removeEventListener('mousemove', onEditorMouseEvent);\n            document.removeEventListener('mousedown', onEditorMouseEvent);\n        };\n    }, []);\n\n    const realPositions = React.useMemo(() => {\n        if (mousePosition) {\n            const {x, y} = mousePosition;\n            const iframeRect = iframeElement?.getClientRects().item(0);\n            if (iframeRect) {\n                const zoomedX = (x * zoom) / 100;\n                const zoomedY = (y * zoom) / 100;\n                const newX = source === 'main' ? x : zoomedX + iframeRect.x;\n                const newY = source === 'main' ? y : zoomedY + iframeRect.y;\n                return {x: newX, y: newY};\n            }\n        }\n\n        return undefined;\n    }, [mousePosition, source, iframeElement, zoom]);\n\n    return (\n        <div className={b(null, className)}>\n            {realPositions && manipulateOverlayMode ? (\n                <div\n                    className={b('border')}\n                    style={{\n                        top: realPositions.y,\n                        left: realPositions.x,\n                    }}\n                >\n                    <Stop height={20} width={20} />\n                </div>\n            ) : null}\n        </div>\n    );\n};\n\nexport default BigOverlay;\n"]}

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

@@ -0,0 +1,21 @@
+.pceditor-block-config-form_empty {
+  padding: 16px 12px;
+}
+.pceditor-block-config-form__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);
+}
+.pceditor-block-config-form__form {
+  padding: 12px 0;
+}
+.pceditor-block-config-form__empty {
+  padding: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+  width: 100%;
+}

package/build/cjs/editor-v2/containers/BlockConfigForm/BlockConfigForm.d.ts

@@ -0,0 +1,5 @@
+interface BlockConfigFormProps {
+    className?: string;
+}
+declare const BlockConfigForm: ({ className }: BlockConfigFormProps) => import("react/jsx-runtime").JSX.Element;
+export default BlockConfigForm;

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const DynamicForm_1 = tslib_1.__importDefault(require("../../components/DynamicForm/DynamicForm.js"));
+const MessageCard_1 = require("../../components/MessageCard/index.js");
+const messages_1 = require("../../constants/messages.js");
+const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
+const utils_1 = require("../../utils/index.js");
+const cn_1 = require("../../utils/cn.js");
+const b = (0, cn_1.editorCn)('block-config-form');
+const BlockConfigForm = ({ className }) => {
+    const { selectedBlock, content, blocks, subBlocks, updateField } = (0, useMainEditorStore_1.useMainEditorStore)();
+    const currentBlockPath = selectedBlock ? (0, utils_1.generateChildrenPathFromArray)(selectedBlock) : '[]';
+    const currentConfig = lodash_1.default.get(content.blocks, currentBlockPath || '');
+    const currentSchema = [...blocks, ...subBlocks].find(({ type }) => type === currentConfig?.type);
+    const onUpdate = (key, value) => {
+        updateField('blocks' + currentBlockPath + '.' + key, value);
+    };
+    if (!currentConfig) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: b({ empty: true }, className), children: (0, jsx_runtime_1.jsx)(MessageCard_1.MessageCard, { title: messages_1.MESSAGES.NO_BLOCK_SELECTED.title, description: messages_1.MESSAGES.NO_BLOCK_SELECTED.description, theme: "info" }) }));
+    }
+    if (!currentSchema) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: b({ empty: true }, className), children: (0, jsx_runtime_1.jsx)(MessageCard_1.MessageCard, { title: messages_1.MESSAGES.UNSUPPORTED_BLOCK.title, description: messages_1.MESSAGES.UNSUPPORTED_BLOCK.description, theme: "warning" }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [(0, jsx_runtime_1.jsx)("div", { className: b('title'), children: currentSchema.schema.name }), (0, jsx_runtime_1.jsx)("div", { className: b('form'), children: (0, jsx_runtime_1.jsx)(DynamicForm_1.default, { contentConfig: currentConfig, blockConfig: currentSchema.schema.inputs, onUpdateByKey: onUpdate }) })] }));
+};
+exports.default = BlockConfigForm;
+//# sourceMappingURL=BlockConfigForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockConfigForm.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/BlockConfigForm/BlockConfigForm.tsx"],"names":[],"mappings":";;;;AAAA,4DAAuB;AAGvB,sGAAmE;AACnE,uEAAyD;AACzD,0DAAkD;AAClD,0EAAkE;AAClE,gDAA0D;AAC1D,0CAAwC;AAIxC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,mBAAmB,CAAC,CAAC;AAMxC,MAAM,eAAe,GAAG,CAAC,EAAC,SAAS,EAAuB,EAAE,EAAE;IAC1D,MAAM,EAAC,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAC,GAAG,IAAA,uCAAkB,GAAE,CAAC;IAEtF,MAAM,gBAAgB,GAAG,aAAa,CAAC,CAAC,CAAC,IAAA,qCAA6B,EAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7F,MAAM,aAAa,GAAG,gBAAC,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC;IACpE,MAAM,aAAa,GAAG,CAAC,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,EAAE,CAAC,IAAI,KAAK,aAAa,EAAE,IAAI,CAAC,CAAC;IAE/F,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,KAAuB,EAAE,EAAE;QACtD,WAAW,CAAC,QAAQ,GAAG,gBAAgB,GAAG,GAAG,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,IAAI,CAAC,aAAa,EAAE,CAAC;QACjB,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,IAAI,EAAC,EAAE,SAAS,CAAC,YACvC,uBAAC,yBAAW,IACR,KAAK,EAAE,mBAAQ,CAAC,iBAAiB,CAAC,KAAK,EACvC,WAAW,EAAE,mBAAQ,CAAC,iBAAiB,CAAC,WAAW,EACnD,KAAK,EAAC,MAAM,GACd,GACA,CACT,CAAC;IACN,CAAC;IAED,IAAI,CAAC,aAAa,EAAE,CAAC;QACjB,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,IAAI,EAAC,EAAE,SAAS,CAAC,YACvC,uBAAC,yBAAW,IACR,KAAK,EAAE,mBAAQ,CAAC,iBAAiB,CAAC,KAAK,EACvC,WAAW,EAAE,mBAAQ,CAAC,iBAAiB,CAAC,WAAW,EACnD,KAAK,EAAC,SAAS,GACjB,GACA,CACT,CAAC;IACN,CAAC;IAED,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YAAG,aAAa,CAAC,MAAM,CAAC,IAAI,GAAO,EAC7D,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,uBAAC,qBAAW,IACR,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EACxC,aAAa,EAAE,QAAQ,GACzB,GACA,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["import _ from 'lodash';\n\nimport {DynamicFormValue} from '../../../common/types';\nimport DynamicForm from '../../components/DynamicForm/DynamicForm';\nimport {MessageCard} from '../../components/MessageCard';\nimport {MESSAGES} from '../../constants/messages';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {generateChildrenPathFromArray} from '../../utils';\nimport {editorCn} from '../../utils/cn';\n\nimport './BlockConfigForm.scss';\n\nconst b = editorCn('block-config-form');\n\ninterface BlockConfigFormProps {\n    className?: string;\n}\n\nconst BlockConfigForm = ({className}: BlockConfigFormProps) => {\n    const {selectedBlock, content, blocks, subBlocks, updateField} = useMainEditorStore();\n\n    const currentBlockPath = selectedBlock ? generateChildrenPathFromArray(selectedBlock) : '[]';\n\n    const currentConfig = _.get(content.blocks, currentBlockPath || '');\n    const currentSchema = [...blocks, ...subBlocks].find(({type}) => type === currentConfig?.type);\n\n    const onUpdate = (key: string, value: DynamicFormValue) => {\n        updateField('blocks' + currentBlockPath + '.' + key, value);\n    };\n\n    if (!currentConfig) {\n        return (\n            <div className={b({empty: true}, className)}>\n                <MessageCard\n                    title={MESSAGES.NO_BLOCK_SELECTED.title}\n                    description={MESSAGES.NO_BLOCK_SELECTED.description}\n                    theme=\"info\"\n                />\n            </div>\n        );\n    }\n\n    if (!currentSchema) {\n        return (\n            <div className={b({empty: true}, className)}>\n                <MessageCard\n                    title={MESSAGES.UNSUPPORTED_BLOCK.title}\n                    description={MESSAGES.UNSUPPORTED_BLOCK.description}\n                    theme=\"warning\"\n                />\n            </div>\n        );\n    }\n\n    return (\n        <div className={b(null, className)}>\n            <div className={b('title')}>{currentSchema.schema.name}</div>\n            <div className={b('form')}>\n                <DynamicForm\n                    contentConfig={currentConfig}\n                    blockConfig={currentSchema.schema.inputs}\n                    onUpdateByKey={onUpdate}\n                />\n            </div>\n        </div>\n    );\n};\n\nexport default BlockConfigForm;\n"]}

package/build/cjs/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(150px, 1fr));
+  gap: 8px;
+  margin-top: 8px;
+}
+.pceditor-blocks-list__search-icon {
+  margin-left: 8px;
+  margin-right: 8px;
+}

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

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

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

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const React = tslib_1.__importStar(require("react"));
+const BlockCard_1 = tslib_1.__importDefault(require("../../components/BlockCard/BlockCard.js"));
+const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
+const cn_1 = require("../../utils/cn.js");
+const b = (0, cn_1.editorCn)('blocks-list');
+const BlocksList = ({ className }) => {
+    const { blocks, enableInsertMode } = (0, useMainEditorStore_1.useMainEditorStore)();
+    const [search, setSearch] = React.useState('');
+    const [collapsedGroups, setCollapsedGroups] = React.useState(new Set());
+    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(() => {
+        return blocks.reduce((acc, currentBlock) => {
+            const group = currentBlock.schema.group;
+            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;
+        }, {});
+    }, [blocks, search]);
+    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 ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('search'), children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, { size: "m", hasClear: true, placeholder: "Search block", onUpdate: setSearch, value: search, startContent: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('search-icon'), data: icons_1.Magnifier }) }), (0, jsx_runtime_1.jsx)(uikit_1.DropdownMenu, { items: [
+                            {
+                                action: expandAll,
+                                text: 'Раскрыть все',
+                                iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.FolderOpen }),
+                                disabled: allGroupsExpanded,
+                            },
+                            {
+                                action: collapseAll,
+                                text: 'Свернуть все',
+                                iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Folder }),
+                                disabled: allGroupsCollapsed,
+                            },
+                        ] })] }), Object.entries(groups).map(([key, groupBlocks]) => {
+                const isCollapsed = collapsedGroups.has(key);
+                return ((0, jsx_runtime_1.jsxs)("div", { className: b('group', { collapsed: isCollapsed }), children: [(0, jsx_runtime_1.jsxs)("button", { className: b('title'), onClick: () => toggleGroup(key), type: "button", children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('title-icon'), data: isCollapsed ? icons_1.ChevronRight : icons_1.ChevronDown, size: 14 }), key] }), !isCollapsed && ((0, jsx_runtime_1.jsx)("div", { className: b('group-items'), children: groupBlocks.map(({ type, schema: { name, previewImg } }) => ((0, jsx_runtime_1.jsx)(BlockCard_1.default, { type: type, name: name, previewImg: previewImg, onMouseDown: onMouseDown }, type))) }))] }, key));
+            })] }));
+};
+exports.default = BlocksList;
+//# sourceMappingURL=BlocksList.js.map

package/build/cjs/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":"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","sourcesContent":["import {ChevronDown, ChevronRight, Folder, FolderOpen, Magnifier} from '@gravity-ui/icons';\nimport {DropdownMenu, Icon, TextInput} from '@gravity-ui/uikit';\nimport * as React from 'react';\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\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        return blocks.reduce<BlockGroups>((acc, currentBlock) => {\n            const group = currentBlock.schema.group;\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    }, [blocks, search]);\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                />\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/cjs/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/cjs/editor-v2/containers/Editor/Editor.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { PageContentWithNavigation } from "../../../models/index.js";
+interface SidebarTabComponent {
+    id: string;
+    title: string;
+    component: React.ElementType;
+}
+interface EditorViewProps {
+    onUpdate?: (pageContent: PageContentWithNavigation) => void;
+    initialUrl: string;
+    initialContent?: PageContentWithNavigation;
+    disableUrlField?: boolean;
+    componentsConfig?: {
+        middleTop?: React.ElementType;
+        leftTop?: React.ElementType[];
+        rightTop?: React.ElementType[];
+        leftTabs?: SidebarTabComponent[];
+        rightTabs?: SidebarTabComponent[];
+    };
+}
+export declare const Editor: (props: EditorViewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Editor = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const Panels_1 = require("../../components/Panels/Panels.js");
+const Sidebar_1 = require("../../components/Sidebar/Sidebar.js");
+const BigOverlay_1 = tslib_1.__importDefault(require("../BigOverlay/BigOverlay.js"));
+const MiddleScreen_1 = tslib_1.__importDefault(require("../MiddleScreen/MiddleScreen.js"));
+const editorStore_1 = require("../../context/editorStore/index.js");
+const iframeContext_1 = require("../../context/iframeContext/index.js");
+const useEditorTabs_1 = require("../../hooks/useEditorTabs.js");
+const useMainEditorInitialize_1 = tslib_1.__importDefault(require("../../hooks/useMainEditorInitialize.js"));
+const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
+const cn_1 = require("../../utils/cn.js");
+const Source_1 = tslib_1.__importDefault(require("../Source/Source.js"));
+const ViewSwitches_1 = tslib_1.__importDefault(require("../ViewSwitches/ViewSwitches.js"));
+const b = (0, cn_1.editorCn)('editor');
+const EditorView = ({ componentsConfig = {}, initialContent }) => {
+    const store = (0, useMainEditorStore_1.useMainEditorStore)();
+    const { manipulateOverlayMode, disableMode } = store;
+    (0, useMainEditorInitialize_1.default)(initialContent);
+    // 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 } = (0, useEditorTabs_1.useEditorTabs)(componentsConfig);
+    return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, jsx_runtime_1.jsxs)("div", { className: b(), onMouseUp: onMouseUp, children: [(0, jsx_runtime_1.jsx)("div", { className: b('body'), children: (0, jsx_runtime_1.jsx)(Panels_1.Panels, { left: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { tabs: left, top: componentsConfig.leftTop }), right: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { tabs: right, top: [...(componentsConfig.rightTop || []), Source_1.default, ViewSwitches_1.default], defaultTab: "block-config" }), middle: (0, jsx_runtime_1.jsx)(MiddleScreen_1.default, { CustomTop: componentsConfig.middleTop }) }) }), (0, jsx_runtime_1.jsx)(BigOverlay_1.default, { className: b('overlay') })] }));
+};
+const Editor = (props) => {
+    return ((0, jsx_runtime_1.jsx)(iframeContext_1.IframeProvider, { initialUrl: props.initialUrl, disableUrlField: props.disableUrlField, children: (0, jsx_runtime_1.jsx)(editorStore_1.MainEditorStoreProvider, { children: (0, jsx_runtime_1.jsx)(EditorView, { ...props }) }) }));
+};
+exports.Editor = Editor;
+//# sourceMappingURL=Editor.js.map

package/build/cjs/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":";;;;;AAAA,qDAA+B;AAG/B,8DAAsD;AACtD,iEAAyD;AACzD,qFAAgE;AAChE,2FAAsE;AACtE,oEAAkE;AAClE,wEAA2D;AAC3D,gEAAwD;AACxD,6GAA0E;AAC1E,0EAAkE;AAClE,0CAAwC;AACxC,yEAAsC;AACtC,2FAAwD;AAIxD,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,QAAQ,CAAC,CAAC;AAqB7B,MAAM,UAAU,GAAG,CAAC,EAAC,gBAAgB,GAAG,EAAE,EAAE,cAAc,EAAkB,EAAE,EAAE;IAC5E,MAAM,KAAK,GAAG,IAAA,uCAAkB,GAAE,CAAC;IACnC,MAAM,EAAC,qBAAqB,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IAEnD,IAAA,iCAAuB,EAAC,cAAc,CAAC,CAAC;IAExC,2CAA2C;IAC3C,mCAAmC;IACnC,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAC/B,CAAC,CAAmB,EAAE,EAAE;QACpB,IAAI,qBAAqB,EAAE,CAAC;YACxB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,WAAW,EAAE,CAAC;QAClB,CAAC;IACL,CAAC,EACD,CAAC,WAAW,EAAE,qBAAqB,CAAC,CACvC,CAAC;IACF,MAAM,EAAC,IAAI,EAAE,KAAK,EAAC,GAAG,IAAA,6BAAa,EAAC,gBAAgB,CAAC,CAAC;IAEtD,OAAO;IACH,mEAAmE;IACnE,iCAAK,SAAS,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,aACrC,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,uBAAC,eAAM,IACH,IAAI,EAAE,uBAAC,iBAAO,IAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,gBAAgB,CAAC,OAAO,GAAI,EAC5D,KAAK,EACD,uBAAC,iBAAO,IACJ,IAAI,EAAE,KAAK,EACX,GAAG,EAAE,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,gBAAM,EAAE,sBAAY,CAAC,EACjE,UAAU,EAAC,cAAc,GAC3B,EAEN,MAAM,EAAE,uBAAC,sBAAY,IAAC,SAAS,EAAE,gBAAgB,CAAC,SAAS,GAAI,GACjE,GACA,EACN,uBAAC,oBAAU,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,GAAI,IACrC,CACT,CAAC;AACN,CAAC,CAAC;AAEK,MAAM,MAAM,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC7C,OAAO,CACH,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,YAChF,uBAAC,qCAAuB,cACpB,uBAAC,UAAU,OAAK,KAAK,GAAI,GACH,GACb,CACpB,CAAC;AACN,CAAC,CAAC;AARW,QAAA,MAAM,UAQjB","sourcesContent":["import * as React from 'react';\n\nimport {PageContentWithNavigation} 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}\ninterface EditorViewProps {\n    onUpdate?: (pageContent: PageContentWithNavigation) => void;\n    initialUrl: string;\n    initialContent?: PageContentWithNavigation;\n    disableUrlField?: boolean;\n    componentsConfig?: {\n        middleTop?: React.ElementType;\n        leftTop?: React.ElementType[];\n        rightTop?: React.ElementType[];\n        leftTabs?: SidebarTabComponent[];\n        rightTabs?: SidebarTabComponent[];\n    };\n}\n\nconst EditorView = ({componentsConfig = {}, initialContent}: EditorViewProps) => {\n    const store = useMainEditorStore();\n    const {manipulateOverlayMode, disableMode} = store;\n\n    useMainEditorInitialize(initialContent);\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 Editor = (props: EditorViewProps) => {\n    return (\n        <IframeProvider initialUrl={props.initialUrl} disableUrlField={props.disableUrlField}>\n            <MainEditorStoreProvider>\n                <EditorView {...props} />\n            </MainEditorStoreProvider>\n        </IframeProvider>\n    );\n};\n"]}

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

@@ -0,0 +1,6 @@
+.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);
+}

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DynamicForm_1 = tslib_1.__importDefault(require("../../components/DynamicForm/DynamicForm.js"));
+const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
+const cn_1 = require("../../utils/cn.js");
+const b = (0, cn_1.editorCn)('global-config');
+const GlobalConfig = ({ className }) => {
+    const { global, content, updateField } = (0, useMainEditorStore_1.useMainEditorStore)();
+    const onUpdate = (key, value) => {
+        updateField('navigation.' + key, value);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [(0, jsx_runtime_1.jsx)("div", { className: b('title'), children: "Global Config" }), (0, jsx_runtime_1.jsx)(DynamicForm_1.default, { contentConfig: content.navigation, blockConfig: global, onUpdateByKey: onUpdate })] }));
+};
+exports.default = GlobalConfig;
+//# sourceMappingURL=GlobalConfig.js.map

package/build/cjs/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":";;;;AACA,sGAAmE;AACnE,0EAAkE;AAClE,0CAAwC;AAIxC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,eAAe,CAAC,CAAC;AAMpC,MAAM,YAAY,GAAG,CAAC,EAAC,SAAS,EAAoB,EAAE,EAAE;IACpD,MAAM,EAAC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAC,GAAG,IAAA,uCAAkB,GAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,KAAuB,EAAE,EAAE;QACtD,WAAW,CAAC,aAAa,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC;IAC5C,CAAC,CAAC;IAEF,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,8BAAqB,EAC/C,uBAAC,qBAAW,IACR,aAAa,EAAE,OAAO,CAAC,UAAU,EACjC,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,QAAQ,GACzB,IACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC","sourcesContent":["import {DynamicFormValue} from '../../../common/types';\nimport DynamicForm from '../../components/DynamicForm/DynamicForm';\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: DynamicFormValue) => {\n        updateField('navigation.' + key, value);\n    };\n\n    return (\n        <div className={b(null, className)}>\n            <div className={b('title')}>Global Config</div>\n            <DynamicForm\n                contentConfig={content.navigation}\n                blockConfig={global}\n                onUpdateByKey={onUpdate}\n            />\n        </div>\n    );\n};\n\nexport default GlobalConfig;\n"]}

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

@@ -0,0 +1,125 @@
+.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;
+  background-color: var(--g-color-base-background);
+  transform-origin: center top;
+  position: absolute;
+  height: 100%;
+  max-width: 100%;
+}
+.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_fullscreen {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+}
+.pceditor-middle-screen__iframe {
+  display: block;
+  margin: 0 auto;
+}
+.pceditor-middle-screen__iframe_fullscreen {
+  width: 100%;
+  height: 100%;
+}
+.pceditor-middle-screen__exit-preview {
+  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%;
+  pointer-events: none;
+}
+.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;
+}