@gravity-ui/page-constructor 5.14.4-alpha.1 → 5.14.4-alpha.2

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

@@ -9,6 +9,7 @@ const iframeContext_1 = require("../../context/iframeContext");
 const messagesContext_1 = require("../../context/messagesContext");
 const b = (0, utils_1.block)('big-overlay');
 const BigOverlay = ({ className }) => {
+    const { zoom } = (0, iframeContext_1.useIframeStore)();
     const { iframeElement } = (0, react_1.useContext)(iframeContext_1.IframeContext);
     const [mousePosition, setMousePosition] = (0, react_1.useState)(undefined);
     (0, messagesContext_1.useMessageObserver)(types_1.ActionTypes.OverlayModeOnMove, (payload, meta) => {
@@ -16,12 +17,14 @@ const BigOverlay = ({ className }) => {
             const { x, y } = payload.cursor;
             const iframeRect = iframeElement === null || iframeElement === void 0 ? void 0 : iframeElement.getClientRects().item(0);
             if (iframeRect) {
-                const newX = meta.source === 'editor' ? x : x + iframeRect.x;
-                const newY = meta.source === 'editor' ? y : y + iframeRect.y;
+                const zoomedX = (x * zoom) / 100;
+                const zoomedY = (y * zoom) / 100;
+                const newX = meta.source === 'editor' ? x : zoomedX + iframeRect.x;
+                const newY = meta.source === 'editor' ? y : zoomedY + iframeRect.y;
                 setMousePosition({ x: newX, y: newY });
             }
         }
-    }, [iframeElement]);
+    }, [iframeElement, zoom]);
     (0, messagesContext_1.useMessageObserver)(types_1.ActionTypes.InsertModeDisable, () => {
         setMousePosition(undefined);
     });

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

@@ -17,11 +17,13 @@ body {
   flex-direction: column;
 }
 .pc-middle-screen__topbar {
-  height: 50px;
+  height: 40px;
 }
-.pc-middle-screen__canvas {
+.pc-middle-screen__wrapper {
   height: 100%;
-  width: 100%;
+}
+.pc-middle-screen__canvas {
+  transform-origin: left top;
   overflow-y: scroll;
   position: relative;
 }

package/build/cjs/editor-v2/components/MiddleScreen/MiddleScreen.js

@@ -10,20 +10,25 @@ const Overlay_1 = tslib_1.__importDefault(require("../Overlay/Overlay"));
 const TopBar_1 = tslib_1.__importDefault(require("../TopBar/TopBar"));
 const b = (0, utils_1.block)('middle-screen');
 const MiddleScreen = ({ className }) => {
-    const { url, height } = (0, iframeContext_1.useIframeStore)();
+    const { url, height, zoom, decreaseZoom, increaseZoom, setZoom } = (0, iframeContext_1.useIframeStore)();
     const { initialized } = (0, editorContext_1.useEditorStore)();
     const { setIframeElement } = (0, react_1.useContext)(iframeContext_1.IframeContext);
     return (react_1.default.createElement("div", { className: b(null, className) },
         react_1.default.createElement("div", { className: b('topbar') },
-            react_1.default.createElement(TopBar_1.default, null)),
-        react_1.default.createElement("div", { className: b('canvas', { hidden: !initialized }) },
-            react_1.default.createElement("iframe", { ref: (element) => {
-                    if (element) {
-                        setIframeElement(element);
-                    }
-                }, className: b('iframe'), src: url, height: `${height}px`, width: "100%", frameBorder: "0" }),
-            react_1.default.createElement(Overlay_1.default, { className: b('overlay') }),
-            !initialized && (react_1.default.createElement("div", { className: b('loading') },
-                react_1.default.createElement(uikit_1.Loader, { size: 'l' }))))));
+            react_1.default.createElement(TopBar_1.default, { onZoomUpdate: setZoom, zoom: zoom, onDecreaseZoom: decreaseZoom, onIncreaseZoom: increaseZoom })),
+        react_1.default.createElement("div", { className: b('wrapper') },
+            react_1.default.createElement("div", { className: b('canvas', { hidden: !initialized }), style: {
+                    transform: `scale(${zoom}%)`,
+                    height: `${(100 / zoom) * 100}%`,
+                    width: `${(100 / zoom) * 100}%`,
+                } },
+                react_1.default.createElement("iframe", { ref: (element) => {
+                        if (element) {
+                            setIframeElement(element);
+                        }
+                    }, className: b('iframe'), src: url, height: `${height}px`, width: "100%", frameBorder: "0" }),
+                react_1.default.createElement(Overlay_1.default, { className: b('overlay') }),
+                !initialized && (react_1.default.createElement("div", { className: b('loading') },
+                    react_1.default.createElement(uikit_1.Loader, { size: 'l' })))))));
 };
 exports.default = MiddleScreen;

package/build/cjs/editor-v2/components/SourceCode/SourceCode.css

@@ -11,22 +11,34 @@ body {
 }
 
 .pc-source-code {
-  padding: 10px;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.pc-source-code__code {
   white-space: pre;
   font-family: var(--g-font-family-monospace);
   font-size: var(--g-text-code-inline-1-font-size);
   line-height: var(--g-text-code-inline-1-line-height);
   font-weight: var(--g-text-code-font-weight);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+  padding: 0 10px 10px;
+  overflow: auto;
 }
-.pc-source-code__code {
-  user-select: all;
+.pc-source-code__head {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  padding: 10px 10px 0;
 }
 .pc-source-code__textarea textarea {
   font-family: var(--g-font-family-monospace);
   font-size: var(--g-text-code-inline-1-font-size);
   line-height: var(--g-text-code-inline-1-line-height);
   font-weight: var(--g-text-code-font-weight);
+}
+.pc-source-code__alert {
+  margin-bottom: 8px;
 }

package/build/cjs/editor-v2/components/SourceCode/SourceCode.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
+const js_yaml_1 = tslib_1.__importDefault(require("js-yaml"));
 const utils_1 = require("../../../utils");
 const useContentConfigStore_1 = require("../../context/contentConfig/hooks/useContentConfigStore");
 const b = (0, utils_1.block)('source-code');
@@ -10,25 +12,44 @@ const SourceCode = ({ className }) => {
     const { config, setConfig } = (0, useContentConfigStore_1.useContentConfigStore)();
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [tempConfig, setTempConfig] = (0, react_1.useState)('');
+    const [format, setFormat] = (0, react_1.useState)('yaml');
     const onUpdate = () => {
         let object;
         try {
-            object = JSON.parse(tempConfig);
+            if (tempConfig.trim().startsWith('{') && tempConfig.trim().endsWith('}')) {
+                object = JSON.parse(tempConfig);
+            }
+            else {
+                object = js_yaml_1.default.load(tempConfig);
+            }
         }
         catch (_a) {
             // eslint-disable-next-line no-console
             console.error('JSON.parse failed');
         }
-        setConfig(object);
+        if (object) {
+            setConfig(object);
+        }
         setIsOpen(false);
     };
+    const text = format === 'yaml' ? js_yaml_1.default.dump(config) : JSON.stringify(config, null, 2);
     return (react_1.default.createElement("div", { className: b(null, className) },
-        react_1.default.createElement(uikit_1.Button, { onClick: () => setIsOpen(true) }, "Update"),
-        react_1.default.createElement("div", { className: b('code') }, JSON.stringify(config, null, 2)),
+        react_1.default.createElement("div", { className: b('head') },
+            react_1.default.createElement(uikit_1.RadioButton, { value: format, onUpdate: setFormat },
+                react_1.default.createElement(uikit_1.RadioButton.Option, { value: 'yaml', content: 'YAML' }),
+                react_1.default.createElement(uikit_1.RadioButton.Option, { value: 'json', content: 'JSON' })),
+            react_1.default.createElement(uikit_1.CopyToClipboard, { text: text, timeout: 1000 }, (status) => (react_1.default.createElement(uikit_1.Button, null,
+                status === 'pending' ? (react_1.default.createElement(uikit_1.Icon, { data: icons_1.Copy })) : (react_1.default.createElement(uikit_1.Icon, { data: icons_1.CopyCheck })),
+                "Copy"))),
+            react_1.default.createElement(uikit_1.Button, { onClick: () => setIsOpen(true) },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowDownToSquare }),
+                "Import")),
+        react_1.default.createElement("div", { className: b('code') }, text),
         react_1.default.createElement(uikit_1.Dialog, { onClose: () => setIsOpen(false), open: isOpen, size: 'l' },
             react_1.default.createElement(uikit_1.Dialog.Header, { caption: "New configuration" }),
             react_1.default.createElement(uikit_1.Dialog.Body, null,
-                react_1.default.createElement(uikit_1.TextArea, { className: b('textarea'), value: tempConfig, onUpdate: setTempConfig, rows: 30 })),
+                react_1.default.createElement(uikit_1.Alert, { className: b('alert'), theme: 'info', title: 'You can use YAML or JSON', message: 'The editor will automatically understand which format is needed.' }),
+                react_1.default.createElement(uikit_1.TextArea, { className: b('textarea'), value: tempConfig, onUpdate: setTempConfig, rows: 25 })),
             react_1.default.createElement(uikit_1.Dialog.Footer, { showError: false, listenKeyEnter: true, preset: 'default', textButtonApply: 'Apply', textButtonCancel: 'Cancel', onClickButtonApply: onUpdate, onClickButtonCancel: () => setIsOpen(false) }))));
 };
 exports.default = SourceCode;

package/build/cjs/editor-v2/components/TopBar/TopBar.d.ts

@@ -1,6 +1,10 @@
 import React from 'react';
 import { ClassNameProps } from '../../../models';
 interface TopBarProps extends ClassNameProps {
+    onZoomUpdate: (zoom: number) => void;
+    onDecreaseZoom: () => void;
+    onIncreaseZoom: () => void;
+    zoom: number;
 }
 declare const TopBar: React.FC<TopBarProps>;
 export default TopBar;

package/build/cjs/editor-v2/components/TopBar/TopBar.js

@@ -6,10 +6,10 @@ const utils_1 = require("../../../utils");
 const Source_1 = tslib_1.__importDefault(require("../Source/Source"));
 const ViewSwitches_1 = tslib_1.__importDefault(require("../ViewSwitches/ViewSwitches"));
 const b = (0, utils_1.block)('topbar');
-const TopBar = ({ className }) => {
+const TopBar = ({ zoom, onDecreaseZoom, onIncreaseZoom, onZoomUpdate, className, }) => {
     return (react_1.default.createElement("div", { className: b(null, className) },
         react_1.default.createElement("div", { className: b('switches') },
-            react_1.default.createElement(ViewSwitches_1.default, null)),
+            react_1.default.createElement(ViewSwitches_1.default, { onZoomUpdate: onZoomUpdate, onDecreaseZoom: onDecreaseZoom, onIncreaseZoom: onIncreaseZoom, zoom: zoom })),
         react_1.default.createElement(Source_1.default, { className: b('source') })));
 };
 exports.default = TopBar;

package/build/cjs/editor-v2/components/ViewSwitches/ViewSwitches.css

@@ -13,4 +13,11 @@ body {
 .pc-view-switches {
   display: inline-flex;
   gap: 12px;
+}
+.pc-view-switches__zoom {
+  display: flex;
+  gap: 4px;
+}
+.pc-view-switches__zoom-input {
+  width: 40px;
 }

package/build/cjs/editor-v2/components/ViewSwitches/ViewSwitches.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
-import { RadioButtonOption } from '@gravity-ui/uikit';
 import { ClassNameProps } from '../../../models';
 interface ViewSwitchesProps extends ClassNameProps {
+    onZoomUpdate: (zoom: number) => void;
+    onDecreaseZoom: () => void;
+    onIncreaseZoom: () => void;
+    zoom: number;
 }
-export declare const options2: RadioButtonOption[];
 declare const ViewSwitches: React.FC<ViewSwitchesProps>;
 export default ViewSwitches;

package/build/cjs/editor-v2/components/ViewSwitches/ViewSwitches.js

@@ -1,25 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.options2 = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
+const constants_1 = require("../../constants");
 const b = (0, utils_1.block)('view-switches');
-const options1 = [
-    { value: 'edit-mode', content: react_1.default.createElement(uikit_1.Icon, { data: icons_1.SquareDashedText }) },
-    { value: 'preview-mode', content: react_1.default.createElement(uikit_1.Icon, { data: icons_1.Eye }) },
-];
-exports.options2 = [
-    { value: 'desktop-mode', content: react_1.default.createElement(uikit_1.Icon, { data: icons_1.Display }) },
-    { value: 'tablet-mode', content: react_1.default.createElement(uikit_1.Icon, { data: icons_1.Square }) },
-    { value: 'phone-mode', content: react_1.default.createElement(uikit_1.Icon, { data: icons_1.Smartphone }) },
-];
-// TODO: To be done
-const ViewSwitches = ({ className }) => {
+const ViewSwitches = ({ zoom, onIncreaseZoom, onDecreaseZoom, onZoomUpdate, className, }) => {
     return (react_1.default.createElement("div", { className: b(null, className) },
-        react_1.default.createElement(uikit_1.RadioButton, { className: b('switch'), name: "group1", defaultValue: options1[0].value, options: options1, size: "m", disabled: true }),
-        react_1.default.createElement(uikit_1.RadioButton, { className: b('switch'), name: "group2", defaultValue: exports.options2[0].value, options: exports.options2, size: "m", disabled: true })));
+        react_1.default.createElement("div", { className: b('zoom') },
+            react_1.default.createElement(uikit_1.Button, { view: 'flat', onClick: onDecreaseZoom },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.Minus })),
+            react_1.default.createElement(uikit_1.Select, { multiple: false, value: [String(zoom)], options: constants_1.ZOOM_STEPS.map((step) => ({
+                    value: String(step),
+                    content: `${String(step)}%`,
+                })), onUpdate: (value) => onZoomUpdate(Number(value)) }),
+            react_1.default.createElement(uikit_1.Button, { view: 'flat', onClick: onIncreaseZoom },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus })))));
 };
 exports.default = ViewSwitches;

package/build/cjs/editor-v2/constants.d.ts

@@ -0,0 +1 @@
+export declare const ZOOM_STEPS: number[];

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

@@ -0,0 +1,4 @@
+"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];

package/build/cjs/editor-v2/context/iframeContext/store.d.ts

@@ -2,9 +2,13 @@ import { WithStoreReducer } from '../../../common/types';
 export interface IframeState {
     url: string;
     height?: number;
+    zoom: number;
 }
 export interface IframeMethods extends WithStoreReducer {
     setUrl: (url: string) => void;
+    setZoom: (zoom: number) => void;
+    increaseZoom: () => void;
+    decreaseZoom: () => void;
 }
 export type IframeStore = IframeState & IframeMethods;
 export declare const createIframeStore: (overrideInitialState?: Partial<IframeState> | undefined) => import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<IframeState & IframeMethods>, "subscribe"> & {

package/build/cjs/editor-v2/context/iframeContext/store.js

@@ -2,11 +2,37 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createIframeStore = void 0;
 const types_1 = require("../../../common/types");
+const constants_1 = require("../../constants");
 const store_1 = require("../../utils/store");
 exports.createIframeStore = (0, store_1.initializeStore)({
     url: '',
     height: 400,
-}, (set) => ({
+    zoom: 100,
+}, (set, get) => ({
+    setZoom: function (zoom) {
+        if (zoom > 0) {
+            set((state) => (Object.assign(Object.assign({}, state), { zoom })));
+        }
+    },
+    increaseZoom: function () {
+        const currentZoom = get().zoom;
+        for (const step of constants_1.ZOOM_STEPS) {
+            if (currentZoom < step) {
+                get().setZoom(step);
+                break;
+            }
+        }
+    },
+    decreaseZoom: function () {
+        const currentZoom = get().zoom;
+        const reverseSteps = constants_1.ZOOM_STEPS.slice().reverse();
+        for (const step of reverseSteps) {
+            if (currentZoom > step) {
+                get().setZoom(step);
+                break;
+            }
+        }
+    },
     setUrl: (url) => set((state) => (Object.assign(Object.assign({}, state), { url }))),
     reducer: (action) => {
         switch (action.type) {

package/build/esm/editor-v2/components/BigOverlay/BigOverlay.js

@@ -2,11 +2,12 @@ import React, { useContext, useState } from 'react';
 import { Stop } from '@gravity-ui/icons';
 import { ActionTypes, } from '../../../common/types';
 import { block } from '../../../utils';
-import { IframeContext } from '../../context/iframeContext';
+import { IframeContext, useIframeStore } from '../../context/iframeContext';
 import { useMessageObserver } from '../../context/messagesContext';
 import './BigOverlay.css';
 const b = block('big-overlay');
 const BigOverlay = ({ className }) => {
+    const { zoom } = useIframeStore();
     const { iframeElement } = useContext(IframeContext);
     const [mousePosition, setMousePosition] = useState(undefined);
     useMessageObserver(ActionTypes.OverlayModeOnMove, (payload, meta) => {
@@ -14,12 +15,14 @@ const BigOverlay = ({ className }) => {
             const { x, y } = payload.cursor;
             const iframeRect = iframeElement === null || iframeElement === void 0 ? void 0 : iframeElement.getClientRects().item(0);
             if (iframeRect) {
-                const newX = meta.source === 'editor' ? x : x + iframeRect.x;
-                const newY = meta.source === 'editor' ? y : y + iframeRect.y;
+                const zoomedX = (x * zoom) / 100;
+                const zoomedY = (y * zoom) / 100;
+                const newX = meta.source === 'editor' ? x : zoomedX + iframeRect.x;
+                const newY = meta.source === 'editor' ? y : zoomedY + iframeRect.y;
                 setMousePosition({ x: newX, y: newY });
             }
         }
-    }, [iframeElement]);
+    }, [iframeElement, zoom]);
     useMessageObserver(ActionTypes.InsertModeDisable, () => {
         setMousePosition(undefined);
     });

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

@@ -17,11 +17,13 @@ body {
   flex-direction: column;
 }
 .pc-middle-screen__topbar {
-  height: 50px;
+  height: 40px;
 }
-.pc-middle-screen__canvas {
+.pc-middle-screen__wrapper {
   height: 100%;
-  width: 100%;
+}
+.pc-middle-screen__canvas {
+  transform-origin: left top;
   overflow-y: scroll;
   position: relative;
 }

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

@@ -8,20 +8,25 @@ import TopBar from '../TopBar/TopBar';
 import './MiddleScreen.css';
 const b = block('middle-screen');
 const MiddleScreen = ({ className }) => {
-    const { url, height } = useIframeStore();
+    const { url, height, zoom, decreaseZoom, increaseZoom, setZoom } = useIframeStore();
     const { initialized } = useEditorStore();
     const { setIframeElement } = useContext(IframeContext);
     return (React.createElement("div", { className: b(null, className) },
         React.createElement("div", { className: b('topbar') },
-            React.createElement(TopBar, null)),
-        React.createElement("div", { className: b('canvas', { hidden: !initialized }) },
-            React.createElement("iframe", { ref: (element) => {
-                    if (element) {
-                        setIframeElement(element);
-                    }
-                }, className: b('iframe'), src: url, height: `${height}px`, width: "100%", frameBorder: "0" }),
-            React.createElement(Overlay, { className: b('overlay') }),
-            !initialized && (React.createElement("div", { className: b('loading') },
-                React.createElement(Loader, { size: 'l' }))))));
+            React.createElement(TopBar, { onZoomUpdate: setZoom, zoom: zoom, onDecreaseZoom: decreaseZoom, onIncreaseZoom: increaseZoom })),
+        React.createElement("div", { className: b('wrapper') },
+            React.createElement("div", { className: b('canvas', { hidden: !initialized }), style: {
+                    transform: `scale(${zoom}%)`,
+                    height: `${(100 / zoom) * 100}%`,
+                    width: `${(100 / zoom) * 100}%`,
+                } },
+                React.createElement("iframe", { ref: (element) => {
+                        if (element) {
+                            setIframeElement(element);
+                        }
+                    }, className: b('iframe'), src: url, height: `${height}px`, width: "100%", frameBorder: "0" }),
+                React.createElement(Overlay, { className: b('overlay') }),
+                !initialized && (React.createElement("div", { className: b('loading') },
+                    React.createElement(Loader, { size: 'l' })))))));
 };
 export default MiddleScreen;

package/build/esm/editor-v2/components/SourceCode/SourceCode.css

@@ -11,22 +11,34 @@ body {
 }
 
 .pc-source-code {
-  padding: 10px;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.pc-source-code__code {
   white-space: pre;
   font-family: var(--g-font-family-monospace);
   font-size: var(--g-text-code-inline-1-font-size);
   line-height: var(--g-text-code-inline-1-line-height);
   font-weight: var(--g-text-code-font-weight);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+  padding: 0 10px 10px;
+  overflow: auto;
 }
-.pc-source-code__code {
-  user-select: all;
+.pc-source-code__head {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  padding: 10px 10px 0;
 }
 .pc-source-code__textarea textarea {
   font-family: var(--g-font-family-monospace);
   font-size: var(--g-text-code-inline-1-font-size);
   line-height: var(--g-text-code-inline-1-line-height);
   font-weight: var(--g-text-code-font-weight);
+}
+.pc-source-code__alert {
+  margin-bottom: 8px;
 }

package/build/esm/editor-v2/components/SourceCode/SourceCode.js

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
-import { Button, Dialog, TextArea } from '@gravity-ui/uikit';
+import { ArrowDownToSquare, Copy, CopyCheck } from '@gravity-ui/icons';
+import { Alert, Button, CopyToClipboard, Dialog, Icon, RadioButton, TextArea, } from '@gravity-ui/uikit';
+import yaml from 'js-yaml';
 import { block } from '../../../utils';
 import { useContentConfigStore } from '../../context/contentConfig/hooks/useContentConfigStore';
 import './SourceCode.css';
@@ -8,25 +10,44 @@ const SourceCode = ({ className }) => {
     const { config, setConfig } = useContentConfigStore();
     const [isOpen, setIsOpen] = useState(false);
     const [tempConfig, setTempConfig] = useState('');
+    const [format, setFormat] = useState('yaml');
     const onUpdate = () => {
         let object;
         try {
-            object = JSON.parse(tempConfig);
+            if (tempConfig.trim().startsWith('{') && tempConfig.trim().endsWith('}')) {
+                object = JSON.parse(tempConfig);
+            }
+            else {
+                object = yaml.load(tempConfig);
+            }
         }
         catch (_a) {
             // eslint-disable-next-line no-console
             console.error('JSON.parse failed');
         }
-        setConfig(object);
+        if (object) {
+            setConfig(object);
+        }
         setIsOpen(false);
     };
+    const text = format === 'yaml' ? yaml.dump(config) : JSON.stringify(config, null, 2);
     return (React.createElement("div", { className: b(null, className) },
-        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Update"),
-        React.createElement("div", { className: b('code') }, JSON.stringify(config, null, 2)),
+        React.createElement("div", { className: b('head') },
+            React.createElement(RadioButton, { value: format, onUpdate: setFormat },
+                React.createElement(RadioButton.Option, { value: 'yaml', content: 'YAML' }),
+                React.createElement(RadioButton.Option, { value: 'json', content: 'JSON' })),
+            React.createElement(CopyToClipboard, { text: text, timeout: 1000 }, (status) => (React.createElement(Button, null,
+                status === 'pending' ? (React.createElement(Icon, { data: Copy })) : (React.createElement(Icon, { data: CopyCheck })),
+                "Copy"))),
+            React.createElement(Button, { onClick: () => setIsOpen(true) },
+                React.createElement(Icon, { data: ArrowDownToSquare }),
+                "Import")),
+        React.createElement("div", { className: b('code') }, text),
         React.createElement(Dialog, { onClose: () => setIsOpen(false), open: isOpen, size: 'l' },
             React.createElement(Dialog.Header, { caption: "New configuration" }),
             React.createElement(Dialog.Body, null,
-                React.createElement(TextArea, { className: b('textarea'), value: tempConfig, onUpdate: setTempConfig, rows: 30 })),
+                React.createElement(Alert, { className: b('alert'), theme: 'info', title: 'You can use YAML or JSON', message: 'The editor will automatically understand which format is needed.' }),
+                React.createElement(TextArea, { className: b('textarea'), value: tempConfig, onUpdate: setTempConfig, rows: 25 })),
             React.createElement(Dialog.Footer, { showError: false, listenKeyEnter: true, preset: 'default', textButtonApply: 'Apply', textButtonCancel: 'Cancel', onClickButtonApply: onUpdate, onClickButtonCancel: () => setIsOpen(false) }))));
 };
 export default SourceCode;

package/build/esm/editor-v2/components/TopBar/TopBar.d.ts

@@ -2,6 +2,10 @@ import React from 'react';
 import { ClassNameProps } from '../../../models';
 import './TopBar.css';
 interface TopBarProps extends ClassNameProps {
+    onZoomUpdate: (zoom: number) => void;
+    onDecreaseZoom: () => void;
+    onIncreaseZoom: () => void;
+    zoom: number;
 }
 declare const TopBar: React.FC<TopBarProps>;
 export default TopBar;

package/build/esm/editor-v2/components/TopBar/TopBar.js

@@ -4,10 +4,10 @@ import Source from '../Source/Source';
 import ViewSwitches from '../ViewSwitches/ViewSwitches';
 import './TopBar.css';
 const b = block('topbar');
-const TopBar = ({ className }) => {
+const TopBar = ({ zoom, onDecreaseZoom, onIncreaseZoom, onZoomUpdate, className, }) => {
     return (React.createElement("div", { className: b(null, className) },
         React.createElement("div", { className: b('switches') },
-            React.createElement(ViewSwitches, null)),
+            React.createElement(ViewSwitches, { onZoomUpdate: onZoomUpdate, onDecreaseZoom: onDecreaseZoom, onIncreaseZoom: onIncreaseZoom, zoom: zoom })),
         React.createElement(Source, { className: b('source') })));
 };
 export default TopBar;

package/build/esm/editor-v2/components/ViewSwitches/ViewSwitches.css

@@ -13,4 +13,11 @@ body {
 .pc-view-switches {
   display: inline-flex;
   gap: 12px;
+}
+.pc-view-switches__zoom {
+  display: flex;
+  gap: 4px;
+}
+.pc-view-switches__zoom-input {
+  width: 40px;
 }

package/build/esm/editor-v2/components/ViewSwitches/ViewSwitches.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-import { RadioButtonOption } from '@gravity-ui/uikit';
 import { ClassNameProps } from '../../../models';
 import './ViewSwitches.css';
 interface ViewSwitchesProps extends ClassNameProps {
+    onZoomUpdate: (zoom: number) => void;
+    onDecreaseZoom: () => void;
+    onIncreaseZoom: () => void;
+    zoom: number;
 }
-export declare const options2: RadioButtonOption[];
 declare const ViewSwitches: React.FC<ViewSwitchesProps>;
 export default ViewSwitches;

package/build/esm/editor-v2/components/ViewSwitches/ViewSwitches.js

@@ -1,22 +1,20 @@
 import React from 'react';
-import { Display, Eye, Smartphone, Square, SquareDashedText } from '@gravity-ui/icons';
-import { Icon, RadioButton } from '@gravity-ui/uikit';
+import { Minus, Plus } from '@gravity-ui/icons';
+import { Button, Icon, Select } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
+import { ZOOM_STEPS } from '../../constants';
 import './ViewSwitches.css';
 const b = block('view-switches');
-const options1 = [
-    { value: 'edit-mode', content: React.createElement(Icon, { data: SquareDashedText }) },
-    { value: 'preview-mode', content: React.createElement(Icon, { data: Eye }) },
-];
-export const options2 = [
-    { value: 'desktop-mode', content: React.createElement(Icon, { data: Display }) },
-    { value: 'tablet-mode', content: React.createElement(Icon, { data: Square }) },
-    { value: 'phone-mode', content: React.createElement(Icon, { data: Smartphone }) },
-];
-// TODO: To be done
-const ViewSwitches = ({ className }) => {
+const ViewSwitches = ({ zoom, onIncreaseZoom, onDecreaseZoom, onZoomUpdate, className, }) => {
     return (React.createElement("div", { className: b(null, className) },
-        React.createElement(RadioButton, { className: b('switch'), name: "group1", defaultValue: options1[0].value, options: options1, size: "m", disabled: true }),
-        React.createElement(RadioButton, { className: b('switch'), name: "group2", defaultValue: options2[0].value, options: options2, size: "m", disabled: true })));
+        React.createElement("div", { className: b('zoom') },
+            React.createElement(Button, { view: 'flat', onClick: onDecreaseZoom },
+                React.createElement(Icon, { data: Minus })),
+            React.createElement(Select, { multiple: false, value: [String(zoom)], options: ZOOM_STEPS.map((step) => ({
+                    value: String(step),
+                    content: `${String(step)}%`,
+                })), onUpdate: (value) => onZoomUpdate(Number(value)) }),
+            React.createElement(Button, { view: 'flat', onClick: onIncreaseZoom },
+                React.createElement(Icon, { data: Plus })))));
 };
 export default ViewSwitches;

package/build/esm/editor-v2/constants.d.ts

@@ -0,0 +1 @@
+export declare const ZOOM_STEPS: number[];

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

@@ -0,0 +1 @@
+export const ZOOM_STEPS = [25, 33, 50, 75, 100, 125, 150, 200, 250, 300];

package/build/esm/editor-v2/context/iframeContext/store.d.ts

@@ -2,9 +2,13 @@ import { WithStoreReducer } from '../../../common/types';
 export interface IframeState {
     url: string;
     height?: number;
+    zoom: number;
 }
 export interface IframeMethods extends WithStoreReducer {
     setUrl: (url: string) => void;
+    setZoom: (zoom: number) => void;
+    increaseZoom: () => void;
+    decreaseZoom: () => void;
 }
 export type IframeStore = IframeState & IframeMethods;
 export declare const createIframeStore: (overrideInitialState?: Partial<IframeState> | undefined) => import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<IframeState & IframeMethods>, "subscribe"> & {

package/build/esm/editor-v2/context/iframeContext/store.js

@@ -1,9 +1,35 @@
 import { ActionTypes } from '../../../common/types';
+import { ZOOM_STEPS } from '../../constants';
 import { initializeStore } from '../../utils/store';
 export const createIframeStore = initializeStore({
     url: '',
     height: 400,
-}, (set) => ({
+    zoom: 100,
+}, (set, get) => ({
+    setZoom: function (zoom) {
+        if (zoom > 0) {
+            set((state) => (Object.assign(Object.assign({}, state), { zoom })));
+        }
+    },
+    increaseZoom: function () {
+        const currentZoom = get().zoom;
+        for (const step of ZOOM_STEPS) {
+            if (currentZoom < step) {
+                get().setZoom(step);
+                break;
+            }
+        }
+    },
+    decreaseZoom: function () {
+        const currentZoom = get().zoom;
+        const reverseSteps = ZOOM_STEPS.slice().reverse();
+        for (const step of reverseSteps) {
+            if (currentZoom > step) {
+                get().setZoom(step);
+                break;
+            }
+        }
+    },
     setUrl: (url) => set((state) => (Object.assign(Object.assign({}, state), { url }))),
     reducer: (action) => {
         switch (action.type) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "5.14.4-alpha.1",
+  "version": "5.14.4-alpha.2",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {