@gravity-ui/page-constructor 3.3.0 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [3.4.0](https://github.com/gravity-ui/page-constructor/compare/v3.3.0...v3.4.0) (2023-06-16)
+
+
+### Features
+
+* add editor mode switch  ([#404](https://github.com/gravity-ui/page-constructor/issues/404)) ([118a369](https://github.com/gravity-ui/page-constructor/commit/118a3694459479c240ca9829c6194c1185cad4a4))
+
 ## [3.3.0](https://github.com/gravity-ui/page-constructor/compare/v3.2.0...v3.3.0) (2023-06-14)
 
 

package/build/cjs/editor/components/AddBlock/AddBlock.css

@@ -1,5 +1,12 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-add-block {
+  position: fixed;
+  bottom: 32px;
+  left: calc(50% + var(--editor-left-column-width) / 2);
+  transform: translateX(-50%);
+  z-index: 110;
+}
 .pc-add-block__button {
   display: inline-block;
   margin: 0;

package/build/cjs/editor/components/BlockForm/BlockForm.js

@@ -7,18 +7,25 @@ const dynamic_forms_1 = require("@gravity-ui/dynamic-forms");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_final_form_1 = require("react-final-form");
 const config_1 = require("../../dynamic-forms-custom/config");
+const usePreviousValue_1 = tslib_1.__importDefault(require("../../hooks/usePreviousValue"));
 exports.BlockForm = (0, react_1.memo)((_a) => {
     var _b = _a.data, { type } = _b, content = tslib_1.__rest(_b, ["type"]), { onChange, onSelect, active, spec: specRaw } = _a;
     // get initial values only at first render, then the form manages data
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const initialValues = (0, react_1.useMemo)(() => ({ content }), []);
+    const prevContent = (0, usePreviousValue_1.default)(content);
     const spec = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, specRaw), { viewSpec: Object.assign(Object.assign({}, specRaw.viewSpec), { layoutOpen: active }) })), [specRaw, active]);
     return (react_1.default.createElement(react_final_form_1.Form, { initialValues: initialValues, onSubmit: lodash_1.default.noop }, () => (react_1.default.createElement("div", { onClick: () => {
             if (!active) {
                 onSelect();
             }
         } },
-        react_1.default.createElement(react_final_form_1.FormSpy, { onChange: ({ values }) => onChange(Object.assign({ type }, values.content)), subscription: { values: true } }),
+        react_1.default.createElement(react_final_form_1.FormSpy, { onChange: ({ values }) => {
+                // fix for FormSpy onChange called twice without content changes
+                if (!lodash_1.default.isEqual(values.content, prevContent)) {
+                    onChange(Object.assign({ type }, values.content));
+                }
+            }, subscription: { values: true } }),
         react_1.default.createElement(dynamic_forms_1.DynamicField, { name: "content", 
             // there is no way other way to manage with form open/close state now
             key: String(active), spec: spec, config: config_1.dynamicConfig })))));

package/build/cjs/editor/components/ControlPanel/ControlPanel.css

@@ -0,0 +1,26 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-control-panel {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: var(--editor-header-height);
+  padding: 8px 20px;
+  background-color: var(--yc-color-base-background);
+  border-bottom: 1px solid var(--yc-color-line-generic);
+}
+.pc-control-panel__icon {
+  display: flex;
+  align-items: center;
+}
+.pc-control-panel__radio-button {
+  margin-left: 12px;
+}
+.pc-control-panel__radio-button .yc-radio-button__option {
+  display: flex;
+  align-items: center;
+}
+.pc-control-panel__mode-switch {
+  display: flex;
+  align-items: center;
+}

package/build/cjs/editor/components/ControlPanel/ControlPanel.d.ts

@@ -0,0 +1,8 @@
+import { ClassNameProps } from '../../../models';
+import { ViewModeItem } from '../../types';
+export interface ControlPanelProps extends ClassNameProps {
+    viewMode?: ViewModeItem;
+    onViewModeChange: (viewMode: ViewModeItem) => void;
+}
+declare const ControlPanel: ({ viewMode, onViewModeChange, className, }: ControlPanelProps) => JSX.Element;
+export default ControlPanel;

package/build/cjs/editor/components/ControlPanel/ControlPanel.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 types_1 = require("../../types");
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
+const ICON_SIZE = 14;
+const b = (0, utils_1.block)('control-panel');
+const ControlPanelViewModeIcons = {
+    [types_1.ViewModeItem.Edititng]: icons_1.Pencil,
+    [types_1.ViewModeItem.View]: icons_1.Display,
+};
+const ControlPanel = ({ viewMode = types_1.ViewModeItem.Edititng, onViewModeChange, className, }) => (react_1.default.createElement("div", { className: b(null, className) },
+    react_1.default.createElement("div", { className: b('mode-switch') },
+        react_1.default.createElement("span", null, (0, i18n_1.default)('mode')),
+        react_1.default.createElement(uikit_1.RadioButton, { className: b('radio-button'), value: viewMode, onUpdate: (value) => onViewModeChange(value) }, Object.values(types_1.ViewModeItem).map((item) => {
+            const Icon = ControlPanelViewModeIcons[item];
+            return (react_1.default.createElement(uikit_1.RadioButton.Option, { key: item, value: item },
+                react_1.default.createElement(Icon, { className: b('icon'), width: ICON_SIZE, height: ICON_SIZE })));
+        })))));
+exports.default = ControlPanel;

package/build/cjs/editor/components/ControlPanel/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "mode": "Mode"
+}

package/build/cjs/editor/components/ControlPanel/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/cjs/editor/components/ControlPanel/i18n/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const registerKeyset_1 = require("../../../../utils/registerKeyset");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const COMPONENT = 'ControlPanel';
+exports.default = (0, registerKeyset_1.registerKeyset)({ en: en_json_1.default, ru: ru_json_1.default }, COMPONENT);

package/build/cjs/editor/components/ControlPanel/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "mode": "Режим"
+}

package/build/cjs/editor/components/Layout/Layout.css

@@ -0,0 +1,36 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+:root {
+  --editor-header-height: 48px;
+  --editor-divider-width: 12px;
+  --editor-left-column-width: calc(400px + var(--editor-divider-width));
+}
+
+.pc-editor-layout__left, .pc-editor-layout__right {
+  --yc-scrollbar-width: 0;
+  height: calc(100vh - var(--editor-header-height));
+  max-height: calc(100vh - var(--editor-header-height));
+  overflow-y: auto;
+}
+
+.pc-editor-layout {
+  position: relative;
+}
+.pc-editor-layout__panel {
+  top: 0;
+  position: sticky;
+  z-index: 2;
+}
+.pc-editor-layout__container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  z-index: 1;
+}
+.pc-editor-layout__left {
+  flex: 0 0 auto;
+  padding: 8px 20px 20px;
+  width: var(--editor-left-column-width);
+  border-right: var(--editor-divider-width) solid var(--yc-color-line-generic);
+  overflow-x: auto;
+}

package/build/cjs/editor/components/Layout/Layout.d.ts

@@ -0,0 +1,16 @@
+import React, { PropsWithChildren } from 'react';
+import { ViewModeItem } from '../../types';
+export interface LayoutProps {
+    mode: ViewModeItem;
+    onModeChange: (mode: ViewModeItem) => void;
+}
+declare const Layout: {
+    ({ children, mode, onModeChange }: PropsWithChildren<LayoutProps>): JSX.Element;
+    Left: React.FC<{
+        children?: React.ReactNode;
+    }>;
+    Right: React.FC<{
+        children?: React.ReactNode;
+    }>;
+};
+export default Layout;

package/build/cjs/editor/components/Layout/Layout.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../utils");
+const ControlPanel_1 = tslib_1.__importDefault(require("../ControlPanel/ControlPanel"));
+const b = (0, utils_1.block)('editor-layout');
+const Left = () => null;
+const Right = () => null;
+const Layout = ({ children, mode, onModeChange }) => {
+    let left, right;
+    function handleChild(child) {
+        switch (child === null || child === void 0 ? void 0 : child.type) {
+            case Left:
+                left = child === null || child === void 0 ? void 0 : child.props.children;
+                break;
+            case Right:
+                right = child === null || child === void 0 ? void 0 : child.props.children;
+                break;
+        }
+    }
+    if (react_1.default.Children.toArray(children).length) {
+        react_1.Children.forEach(children, handleChild);
+    }
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement(ControlPanel_1.default, { viewMode: mode, onViewModeChange: onModeChange, className: b('panel') }),
+        react_1.default.createElement("div", { className: b('container') },
+            react_1.default.createElement(react_1.Fragment, null,
+                left && react_1.default.createElement("div", { className: b('left') }, left),
+                right && react_1.default.createElement("div", { className: b('right') }, right)))));
+};
+Layout.Left = Left;
+Layout.Right = Right;
+exports.default = Layout;

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

@@ -3,35 +3,38 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Editor = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const utils_1 = require("../../../utils");
 const AddBlock_1 = tslib_1.__importDefault(require("../../components/AddBlock/AddBlock"));
 const EditBlock_1 = tslib_1.__importDefault(require("../../components/EditBlock/EditBlock"));
 const ErrorBoundary_1 = require("../../components/ErrorBoundary/ErrorBoundary");
+const Layout_1 = tslib_1.__importDefault(require("../../components/Layout/Layout"));
 const useFormSpec_1 = tslib_1.__importDefault(require("../../hooks/useFormSpec"));
 const store_1 = require("../../store");
-const utils_2 = require("../../utils");
+const types_1 = require("../../types");
+const utils_1 = require("../../utils");
 const Form_1 = require("../Form/Form");
-const b = (0, utils_1.block)('editor');
 const Editor = (_a) => {
     var { children, customSchema, onChange } = _a, rest = tslib_1.__rest(_a, ["children", "customSchema", "onChange"]);
-    const { content, activeBlockIndex, errorBoundaryState, onContentUpdate, onAdd, onSelect, injectEditBlockProps, } = (0, store_1.useEditorState)(rest);
-    const constructorProps = (0, react_1.useMemo)(() => ({
-        content,
-        custom: (0, utils_2.addCustomDecorator)([
-            (props) => react_1.default.createElement(EditBlock_1.default, Object.assign({}, injectEditBlockProps(props))),
-            // need errorBoundaryState flag to reset error on content update
-            (props) => (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, Object.assign({}, props, { key: `${(0, utils_2.getBlockId)(props)}-${errorBoundaryState}` }))),
-        ], rest.custom),
-    }), [injectEditBlockProps, content, errorBoundaryState, rest.custom]);
-    const formSpecs = (0, useFormSpec_1.default)(customSchema);
+    const { content, activeBlockIndex, errorBoundaryState, viewMode, onContentUpdate, onViewModeUpdate, onAdd, onSelect, injectEditBlockProps, } = (0, store_1.useEditorState)(rest);
+    const isEditingMode = viewMode === types_1.ViewModeItem.Edititng;
+    const constructorProps = (0, react_1.useMemo)(() => {
+        const custom = isEditingMode
+            ? (0, utils_1.addCustomDecorator)([
+                (props) => (react_1.default.createElement(EditBlock_1.default, Object.assign({}, injectEditBlockProps(props)))),
+                // need errorBoundaryState flag to reset error on content update
+                (props) => (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, Object.assign({}, props, { key: `${(0, utils_1.getBlockId)(props)}-${errorBoundaryState}` }))),
+            ], rest.custom)
+            : rest.custom;
+        return { content, custom };
+    }, [injectEditBlockProps, content, errorBoundaryState, isEditingMode, rest.custom]);
     (0, react_1.useEffect)(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(content);
     }, [content, onChange]);
-    return (react_1.default.createElement("div", { className: b() },
-        react_1.default.createElement("div", { className: b('form') },
-            react_1.default.createElement(Form_1.Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, onSelect: onSelect, spec: formSpecs })),
-        react_1.default.createElement("div", { className: b('preview') },
+    const formSpecs = (0, useFormSpec_1.default)(customSchema);
+    return (react_1.default.createElement(Layout_1.default, { mode: viewMode, onModeChange: onViewModeUpdate },
+        isEditingMode && (react_1.default.createElement(Layout_1.default.Left, null,
+            react_1.default.createElement(Form_1.Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, onSelect: onSelect, spec: formSpecs }))),
+        react_1.default.createElement(Layout_1.default.Right, null,
             react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { key: errorBoundaryState }, children(constructorProps)),
-            react_1.default.createElement(AddBlock_1.default, { onAdd: onAdd, className: b('add-button') }))));
+            isEditingMode && react_1.default.createElement(AddBlock_1.default, { onAdd: onAdd }))));
 };
 exports.Editor = Editor;

package/build/cjs/editor/hooks/usePreviousValue.d.ts

@@ -0,0 +1 @@
+export default function usePreviousValue<T>(value: T): T | undefined;

package/build/cjs/editor/hooks/usePreviousValue.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function usePreviousValue(value) {
+    const ref = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+exports.default = usePreviousValue;

package/build/cjs/editor/store/index.d.ts

@@ -1,12 +1,14 @@
 import { Block, BlockDecorationProps, PageContent } from '../../models';
-import { EditBlockProps, EditorProps } from '../types';
+import { EditBlockProps, EditorProps, ViewModeItem } from '../types';
 export type EditorBlockId = number | string;
 export declare function useEditorState({ content: intialContent, custom }: Omit<EditorProps, 'children'>): {
     activeBlockIndex: number;
     content: PageContent;
     errorBoundaryState: number;
+    viewMode: ViewModeItem;
     injectEditBlockProps: ({ type, index: relativeIndex, children, }: BlockDecorationProps) => EditBlockProps;
     onAdd: (block: Block) => void;
     onSelect: (index: number) => void;
     onContentUpdate: (newContent: PageContent) => void;
+    onViewModeUpdate: (newViewMode: ViewModeItem) => void;
 };

package/build/cjs/editor/store/index.js

@@ -5,13 +5,15 @@ const react_1 = require("react");
 const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const EditBlock_1 = require("../components/EditBlock/EditBlock");
+const types_1 = require("../types");
 const reducer_1 = require("./reducer");
 const utils_2 = require("./utils");
 function useEditorState({ content: intialContent, custom }) {
-    const [{ activeBlockIndex, content, errorBoundaryState }, dispatch] = (0, react_1.useReducer)(reducer_1.reducer, {
+    const [{ activeBlockIndex, content, errorBoundaryState, viewMode }, dispatch] = (0, react_1.useReducer)(reducer_1.reducer, {
         activeBlockIndex: 0,
         errorBoundaryState: 0,
         content: (0, utils_2.addEditorProps)(intialContent),
+        viewMode: types_1.ViewModeItem.Edititng,
     });
     return (0, react_1.useMemo)(() => {
         const headerBlockTypes = [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomHeaderTypes)(custom)];
@@ -33,6 +35,7 @@ function useEditorState({ content: intialContent, custom }) {
         };
         const onSelect = (index) => dispatch({ type: reducer_1.SELECT_BLOCK, payload: index });
         const onContentUpdate = (newContent) => dispatch({ type: reducer_1.UPDATE_CONTENT, payload: newContent });
+        const onViewModeUpdate = (newViewMode) => dispatch({ type: reducer_1.UPDATE_VIEW_MODE, payload: newViewMode });
         const injectEditBlockProps = ({ type, index: relativeIndex = 0, children, }) => {
             const orderedBlocksStartIndex = contentHasHeader ? 1 : 0;
             const isHeader = checkIsHeader(type);
@@ -68,11 +71,13 @@ function useEditorState({ content: intialContent, custom }) {
             activeBlockIndex,
             content,
             errorBoundaryState,
+            viewMode,
             injectEditBlockProps,
             onAdd,
             onSelect,
             onContentUpdate,
+            onViewModeUpdate,
         };
-    }, [content, activeBlockIndex, errorBoundaryState, custom]);
+    }, [content, activeBlockIndex, errorBoundaryState, custom, viewMode]);
 }
 exports.useEditorState = useEditorState;

package/build/cjs/editor/store/reducer.d.ts

@@ -1,9 +1,11 @@
 import { Block, PageContent } from '../../models';
+import { ViewModeItem } from '../types';
 export type EditorBlockId = number | string;
 interface EditorState {
     content: PageContent;
     activeBlockIndex: number;
     errorBoundaryState: number;
+    viewMode: ViewModeItem;
 }
 interface OrderBlockParams {
     oldIndex: number;
@@ -20,6 +22,7 @@ export declare const ADD_BLOCK = "ADD_BLOCK";
 export declare const SET_REGION = "SET_REGION";
 export declare const ORDER_BLOCK = "ORDER_BLOCK";
 export declare const UPDATE_CONTENT = "UPDATE_CONTENT";
+export declare const UPDATE_VIEW_MODE = "UPDATE_VIEW_MODE";
 interface SelectBlock {
     type: typeof SELECT_BLOCK;
     payload: number;
@@ -44,6 +47,10 @@ interface UpdateContent {
     type: typeof UPDATE_CONTENT;
     payload: PageContent;
 }
-export type EditorAction = SelectBlock | DeleteBlock | CopyBlock | AddBlock | OrderBlock | UpdateContent;
+interface UpdateViewMode {
+    type: typeof UPDATE_VIEW_MODE;
+    payload: ViewModeItem;
+}
+export type EditorAction = SelectBlock | DeleteBlock | CopyBlock | AddBlock | OrderBlock | UpdateContent | UpdateViewMode;
 export declare const reducer: (state: EditorState, action: EditorAction) => EditorState;
 export {};

package/build/cjs/editor/store/reducer.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reducer = exports.UPDATE_CONTENT = exports.ORDER_BLOCK = exports.SET_REGION = exports.ADD_BLOCK = exports.COPY_BLOCK = exports.DELETE_BLOCK = exports.SELECT_BLOCK = void 0;
+exports.reducer = exports.UPDATE_VIEW_MODE = exports.UPDATE_CONTENT = exports.ORDER_BLOCK = exports.SET_REGION = exports.ADD_BLOCK = exports.COPY_BLOCK = exports.DELETE_BLOCK = exports.SELECT_BLOCK = void 0;
 const utils_1 = require("./utils");
 // actions
 exports.SELECT_BLOCK = 'SELECT_BLOCK';
@@ -10,6 +10,7 @@ exports.ADD_BLOCK = 'ADD_BLOCK';
 exports.SET_REGION = 'SET_REGION';
 exports.ORDER_BLOCK = 'ORDER_BLOCK';
 exports.UPDATE_CONTENT = 'UPDATE_CONTENT';
+exports.UPDATE_VIEW_MODE = 'UPDATE_VIEW_MODE';
 // reducer
 const reducer = (state, action) => {
     const { content } = state;
@@ -35,6 +36,8 @@ const reducer = (state, action) => {
             const { oldIndex, newIndex } = action.payload;
             return getNewState((0, utils_1.changeBlocksOrder)(content.blocks, oldIndex, newIndex), newIndex);
         }
+        case exports.UPDATE_VIEW_MODE:
+            return Object.assign(Object.assign({}, state), { viewMode: action.payload });
         default:
             return state;
     }

package/build/cjs/editor/styles/root.css

@@ -0,0 +1,5 @@
+:root {
+  --editor-header-height: 48px;
+  --editor-divider-width: 12px;
+  --editor-left-column-width: calc(400px + var(--editor-divider-width));
+}

package/build/cjs/editor/types/index.d.ts

@@ -17,3 +17,7 @@ export interface EditBlockEditorProps {
 export interface EditBlockProps extends EditBlockEditorProps, BlockDecorationProps {
     isHeader?: boolean;
 }
+export declare enum ViewModeItem {
+    Edititng = "editing",
+    View = "view"
+}

package/build/cjs/editor/types/index.js

@@ -1,2 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewModeItem = void 0;
+var ViewModeItem;
+(function (ViewModeItem) {
+    ViewModeItem["Edititng"] = "editing";
+    ViewModeItem["View"] = "view";
+})(ViewModeItem = exports.ViewModeItem || (exports.ViewModeItem = {}));

package/build/esm/editor/components/AddBlock/AddBlock.css

@@ -1,5 +1,12 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-add-block {
+  position: fixed;
+  bottom: 32px;
+  left: calc(50% + var(--editor-left-column-width) / 2);
+  transform: translateX(-50%);
+  z-index: 110;
+}
 .pc-add-block__button {
   display: inline-block;
   margin: 0;

package/build/esm/editor/components/BlockForm/BlockForm.js

@@ -4,18 +4,25 @@ import { DynamicField } from '@gravity-ui/dynamic-forms';
 import _ from 'lodash';
 import { Form as FinalForm, FormSpy } from 'react-final-form';
 import { dynamicConfig } from '../../dynamic-forms-custom/config';
+import usePreviousValue from '../../hooks/usePreviousValue';
 export const BlockForm = memo((_a) => {
     var _b = _a.data, { type } = _b, content = __rest(_b, ["type"]), { onChange, onSelect, active, spec: specRaw } = _a;
     // get initial values only at first render, then the form manages data
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const initialValues = useMemo(() => ({ content }), []);
+    const prevContent = usePreviousValue(content);
     const spec = useMemo(() => (Object.assign(Object.assign({}, specRaw), { viewSpec: Object.assign(Object.assign({}, specRaw.viewSpec), { layoutOpen: active }) })), [specRaw, active]);
     return (React.createElement(FinalForm, { initialValues: initialValues, onSubmit: _.noop }, () => (React.createElement("div", { onClick: () => {
             if (!active) {
                 onSelect();
             }
         } },
-        React.createElement(FormSpy, { onChange: ({ values }) => onChange(Object.assign({ type }, values.content)), subscription: { values: true } }),
+        React.createElement(FormSpy, { onChange: ({ values }) => {
+                // fix for FormSpy onChange called twice without content changes
+                if (!_.isEqual(values.content, prevContent)) {
+                    onChange(Object.assign({ type }, values.content));
+                }
+            }, subscription: { values: true } }),
         React.createElement(DynamicField, { name: "content", 
             // there is no way other way to manage with form open/close state now
             key: String(active), spec: spec, config: dynamicConfig })))));

package/build/esm/editor/components/ControlPanel/ControlPanel.css

@@ -0,0 +1,26 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-control-panel {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: var(--editor-header-height);
+  padding: 8px 20px;
+  background-color: var(--yc-color-base-background);
+  border-bottom: 1px solid var(--yc-color-line-generic);
+}
+.pc-control-panel__icon {
+  display: flex;
+  align-items: center;
+}
+.pc-control-panel__radio-button {
+  margin-left: 12px;
+}
+.pc-control-panel__radio-button .yc-radio-button__option {
+  display: flex;
+  align-items: center;
+}
+.pc-control-panel__mode-switch {
+  display: flex;
+  align-items: center;
+}

package/build/esm/editor/components/ControlPanel/ControlPanel.d.ts

@@ -0,0 +1,9 @@
+import { ClassNameProps } from '../../../models';
+import { ViewModeItem } from '../../types';
+import './ControlPanel.css';
+export interface ControlPanelProps extends ClassNameProps {
+    viewMode?: ViewModeItem;
+    onViewModeChange: (viewMode: ViewModeItem) => void;
+}
+declare const ControlPanel: ({ viewMode, onViewModeChange, className, }: ControlPanelProps) => JSX.Element;
+export default ControlPanel;

package/build/esm/editor/components/ControlPanel/ControlPanel.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Display, Pencil } from '@gravity-ui/icons';
+import { RadioButton } from '@gravity-ui/uikit';
+import { block } from '../../../utils';
+import { ViewModeItem } from '../../types';
+import i18n from './i18n';
+const ICON_SIZE = 14;
+import './ControlPanel.css';
+const b = block('control-panel');
+const ControlPanelViewModeIcons = {
+    [ViewModeItem.Edititng]: Pencil,
+    [ViewModeItem.View]: Display,
+};
+const ControlPanel = ({ viewMode = ViewModeItem.Edititng, onViewModeChange, className, }) => (React.createElement("div", { className: b(null, className) },
+    React.createElement("div", { className: b('mode-switch') },
+        React.createElement("span", null, i18n('mode')),
+        React.createElement(RadioButton, { className: b('radio-button'), value: viewMode, onUpdate: (value) => onViewModeChange(value) }, Object.values(ViewModeItem).map((item) => {
+            const Icon = ControlPanelViewModeIcons[item];
+            return (React.createElement(RadioButton.Option, { key: item, value: item },
+                React.createElement(Icon, { className: b('icon'), width: ICON_SIZE, height: ICON_SIZE })));
+        })))));
+export default ControlPanel;

package/build/esm/editor/components/ControlPanel/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "mode": "Mode"
+}

package/build/esm/editor/components/ControlPanel/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/esm/editor/components/ControlPanel/i18n/index.js

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../../../../utils/registerKeyset';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'ControlPanel';
+export default registerKeyset({ en, ru }, COMPONENT);

package/build/esm/editor/components/ControlPanel/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "mode": "Режим"
+}

package/build/esm/editor/components/Layout/Layout.css

@@ -0,0 +1,36 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+:root {
+  --editor-header-height: 48px;
+  --editor-divider-width: 12px;
+  --editor-left-column-width: calc(400px + var(--editor-divider-width));
+}
+
+.pc-editor-layout__left, .pc-editor-layout__right {
+  --yc-scrollbar-width: 0;
+  height: calc(100vh - var(--editor-header-height));
+  max-height: calc(100vh - var(--editor-header-height));
+  overflow-y: auto;
+}
+
+.pc-editor-layout {
+  position: relative;
+}
+.pc-editor-layout__panel {
+  top: 0;
+  position: sticky;
+  z-index: 2;
+}
+.pc-editor-layout__container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  z-index: 1;
+}
+.pc-editor-layout__left {
+  flex: 0 0 auto;
+  padding: 8px 20px 20px;
+  width: var(--editor-left-column-width);
+  border-right: var(--editor-divider-width) solid var(--yc-color-line-generic);
+  overflow-x: auto;
+}

package/build/esm/editor/components/Layout/Layout.d.ts

@@ -0,0 +1,17 @@
+import React, { PropsWithChildren } from 'react';
+import { ViewModeItem } from '../../types';
+import './Layout.css';
+export interface LayoutProps {
+    mode: ViewModeItem;
+    onModeChange: (mode: ViewModeItem) => void;
+}
+declare const Layout: {
+    ({ children, mode, onModeChange }: PropsWithChildren<LayoutProps>): JSX.Element;
+    Left: React.FC<{
+        children?: React.ReactNode;
+    }>;
+    Right: React.FC<{
+        children?: React.ReactNode;
+    }>;
+};
+export default Layout;

package/build/esm/editor/components/Layout/Layout.js

@@ -0,0 +1,32 @@
+import React, { Children, Fragment } from 'react';
+import { block } from '../../../utils';
+import ControlPanel from '../ControlPanel/ControlPanel';
+import './Layout.css';
+const b = block('editor-layout');
+const Left = () => null;
+const Right = () => null;
+const Layout = ({ children, mode, onModeChange }) => {
+    let left, right;
+    function handleChild(child) {
+        switch (child === null || child === void 0 ? void 0 : child.type) {
+            case Left:
+                left = child === null || child === void 0 ? void 0 : child.props.children;
+                break;
+            case Right:
+                right = child === null || child === void 0 ? void 0 : child.props.children;
+                break;
+        }
+    }
+    if (React.Children.toArray(children).length) {
+        Children.forEach(children, handleChild);
+    }
+    return (React.createElement("div", { className: b() },
+        React.createElement(ControlPanel, { viewMode: mode, onViewModeChange: onModeChange, className: b('panel') }),
+        React.createElement("div", { className: b('container') },
+            React.createElement(Fragment, null,
+                left && React.createElement("div", { className: b('left') }, left),
+                right && React.createElement("div", { className: b('right') }, right)))));
+};
+Layout.Left = Left;
+Layout.Right = Right;
+export default Layout;

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

@@ -1,3 +1,2 @@
 import { EditorProps } from '../../types';
-import './Editor.css';
 export declare const Editor: ({ children, customSchema, onChange, ...rest }: EditorProps) => JSX.Element;

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

@@ -1,34 +1,36 @@
 import { __rest } from "tslib";
 import React, { useEffect, useMemo } from 'react';
-import { block } from '../../../utils';
 import AddBlock from '../../components/AddBlock/AddBlock';
 import EditBlock from '../../components/EditBlock/EditBlock';
 import { ErrorBoundary } from '../../components/ErrorBoundary/ErrorBoundary';
+import Layout from '../../components/Layout/Layout';
 import useFormSpec from '../../hooks/useFormSpec';
 import { useEditorState } from '../../store';
+import { ViewModeItem } from '../../types';
 import { addCustomDecorator, getBlockId } from '../../utils';
 import { Form } from '../Form/Form';
-import './Editor.css';
-const b = block('editor');
 export const Editor = (_a) => {
     var { children, customSchema, onChange } = _a, rest = __rest(_a, ["children", "customSchema", "onChange"]);
-    const { content, activeBlockIndex, errorBoundaryState, onContentUpdate, onAdd, onSelect, injectEditBlockProps, } = useEditorState(rest);
-    const constructorProps = useMemo(() => ({
-        content,
-        custom: addCustomDecorator([
-            (props) => React.createElement(EditBlock, Object.assign({}, injectEditBlockProps(props))),
-            // need errorBoundaryState flag to reset error on content update
-            (props) => (React.createElement(ErrorBoundary, Object.assign({}, props, { key: `${getBlockId(props)}-${errorBoundaryState}` }))),
-        ], rest.custom),
-    }), [injectEditBlockProps, content, errorBoundaryState, rest.custom]);
-    const formSpecs = useFormSpec(customSchema);
+    const { content, activeBlockIndex, errorBoundaryState, viewMode, onContentUpdate, onViewModeUpdate, onAdd, onSelect, injectEditBlockProps, } = useEditorState(rest);
+    const isEditingMode = viewMode === ViewModeItem.Edititng;
+    const constructorProps = useMemo(() => {
+        const custom = isEditingMode
+            ? addCustomDecorator([
+                (props) => (React.createElement(EditBlock, Object.assign({}, injectEditBlockProps(props)))),
+                // need errorBoundaryState flag to reset error on content update
+                (props) => (React.createElement(ErrorBoundary, Object.assign({}, props, { key: `${getBlockId(props)}-${errorBoundaryState}` }))),
+            ], rest.custom)
+            : rest.custom;
+        return { content, custom };
+    }, [injectEditBlockProps, content, errorBoundaryState, isEditingMode, rest.custom]);
     useEffect(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(content);
     }, [content, onChange]);
-    return (React.createElement("div", { className: b() },
-        React.createElement("div", { className: b('form') },
-            React.createElement(Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, onSelect: onSelect, spec: formSpecs })),
-        React.createElement("div", { className: b('preview') },
+    const formSpecs = useFormSpec(customSchema);
+    return (React.createElement(Layout, { mode: viewMode, onModeChange: onViewModeUpdate },
+        isEditingMode && (React.createElement(Layout.Left, null,
+            React.createElement(Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, onSelect: onSelect, spec: formSpecs }))),
+        React.createElement(Layout.Right, null,
             React.createElement(ErrorBoundary, { key: errorBoundaryState }, children(constructorProps)),
-            React.createElement(AddBlock, { onAdd: onAdd, className: b('add-button') }))));
+            isEditingMode && React.createElement(AddBlock, { onAdd: onAdd }))));
 };

package/build/esm/editor/hooks/usePreviousValue.d.ts

@@ -0,0 +1 @@
+export default function usePreviousValue<T>(value: T): T | undefined;

package/build/esm/editor/hooks/usePreviousValue.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from 'react';
+export default function usePreviousValue(value) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}

package/build/esm/editor/store/index.d.ts

@@ -1,12 +1,14 @@
 import { Block, BlockDecorationProps, PageContent } from '../../models';
-import { EditBlockProps, EditorProps } from '../types';
+import { EditBlockProps, EditorProps, ViewModeItem } from '../types';
 export type EditorBlockId = number | string;
 export declare function useEditorState({ content: intialContent, custom }: Omit<EditorProps, 'children'>): {
     activeBlockIndex: number;
     content: PageContent;
     errorBoundaryState: number;
+    viewMode: ViewModeItem;
     injectEditBlockProps: ({ type, index: relativeIndex, children, }: BlockDecorationProps) => EditBlockProps;
     onAdd: (block: Block) => void;
     onSelect: (index: number) => void;
     onContentUpdate: (newContent: PageContent) => void;
+    onViewModeUpdate: (newViewMode: ViewModeItem) => void;
 };

package/build/esm/editor/store/index.js

@@ -2,13 +2,15 @@ import { useMemo, useReducer } from 'react';
 import { HeaderBlockTypes } from '../../models';
 import { getCustomHeaderTypes, getHeaderBlock } from '../../utils';
 import { EditBlockControls } from '../components/EditBlock/EditBlock';
-import { ADD_BLOCK, COPY_BLOCK, DELETE_BLOCK, ORDER_BLOCK, SELECT_BLOCK, UPDATE_CONTENT, reducer, } from './reducer';
+import { ViewModeItem } from '../types';
+import { ADD_BLOCK, COPY_BLOCK, DELETE_BLOCK, ORDER_BLOCK, SELECT_BLOCK, UPDATE_CONTENT, UPDATE_VIEW_MODE, reducer, } from './reducer';
 import { addEditorProps } from './utils';
 export function useEditorState({ content: intialContent, custom }) {
-    const [{ activeBlockIndex, content, errorBoundaryState }, dispatch] = useReducer(reducer, {
+    const [{ activeBlockIndex, content, errorBoundaryState, viewMode }, dispatch] = useReducer(reducer, {
         activeBlockIndex: 0,
         errorBoundaryState: 0,
         content: addEditorProps(intialContent),
+        viewMode: ViewModeItem.Edititng,
     });
     return useMemo(() => {
         const headerBlockTypes = [...HeaderBlockTypes, ...getCustomHeaderTypes(custom)];
@@ -30,6 +32,7 @@ export function useEditorState({ content: intialContent, custom }) {
         };
         const onSelect = (index) => dispatch({ type: SELECT_BLOCK, payload: index });
         const onContentUpdate = (newContent) => dispatch({ type: UPDATE_CONTENT, payload: newContent });
+        const onViewModeUpdate = (newViewMode) => dispatch({ type: UPDATE_VIEW_MODE, payload: newViewMode });
         const injectEditBlockProps = ({ type, index: relativeIndex = 0, children, }) => {
             const orderedBlocksStartIndex = contentHasHeader ? 1 : 0;
             const isHeader = checkIsHeader(type);
@@ -65,10 +68,12 @@ export function useEditorState({ content: intialContent, custom }) {
             activeBlockIndex,
             content,
             errorBoundaryState,
+            viewMode,
             injectEditBlockProps,
             onAdd,
             onSelect,
             onContentUpdate,
+            onViewModeUpdate,
         };
-    }, [content, activeBlockIndex, errorBoundaryState, custom]);
+    }, [content, activeBlockIndex, errorBoundaryState, custom, viewMode]);
 }

package/build/esm/editor/store/reducer.d.ts

@@ -1,9 +1,11 @@
 import { Block, PageContent } from '../../models';
+import { ViewModeItem } from '../types';
 export type EditorBlockId = number | string;
 interface EditorState {
     content: PageContent;
     activeBlockIndex: number;
     errorBoundaryState: number;
+    viewMode: ViewModeItem;
 }
 interface OrderBlockParams {
     oldIndex: number;
@@ -20,6 +22,7 @@ export declare const ADD_BLOCK = "ADD_BLOCK";
 export declare const SET_REGION = "SET_REGION";
 export declare const ORDER_BLOCK = "ORDER_BLOCK";
 export declare const UPDATE_CONTENT = "UPDATE_CONTENT";
+export declare const UPDATE_VIEW_MODE = "UPDATE_VIEW_MODE";
 interface SelectBlock {
     type: typeof SELECT_BLOCK;
     payload: number;
@@ -44,6 +47,10 @@ interface UpdateContent {
     type: typeof UPDATE_CONTENT;
     payload: PageContent;
 }
-export type EditorAction = SelectBlock | DeleteBlock | CopyBlock | AddBlock | OrderBlock | UpdateContent;
+interface UpdateViewMode {
+    type: typeof UPDATE_VIEW_MODE;
+    payload: ViewModeItem;
+}
+export type EditorAction = SelectBlock | DeleteBlock | CopyBlock | AddBlock | OrderBlock | UpdateContent | UpdateViewMode;
 export declare const reducer: (state: EditorState, action: EditorAction) => EditorState;
 export {};

package/build/esm/editor/store/reducer.js

@@ -7,6 +7,7 @@ export const ADD_BLOCK = 'ADD_BLOCK';
 export const SET_REGION = 'SET_REGION';
 export const ORDER_BLOCK = 'ORDER_BLOCK';
 export const UPDATE_CONTENT = 'UPDATE_CONTENT';
+export const UPDATE_VIEW_MODE = 'UPDATE_VIEW_MODE';
 // reducer
 export const reducer = (state, action) => {
     const { content } = state;
@@ -32,6 +33,8 @@ export const reducer = (state, action) => {
             const { oldIndex, newIndex } = action.payload;
             return getNewState(changeBlocksOrder(content.blocks, oldIndex, newIndex), newIndex);
         }
+        case UPDATE_VIEW_MODE:
+            return Object.assign(Object.assign({}, state), { viewMode: action.payload });
         default:
             return state;
     }

package/build/esm/editor/styles/root.css

@@ -0,0 +1,5 @@
+:root {
+  --editor-header-height: 48px;
+  --editor-divider-width: 12px;
+  --editor-left-column-width: calc(400px + var(--editor-divider-width));
+}

package/build/esm/editor/types/index.d.ts

@@ -17,3 +17,7 @@ export interface EditBlockEditorProps {
 export interface EditBlockProps extends EditBlockEditorProps, BlockDecorationProps {
     isHeader?: boolean;
 }
+export declare enum ViewModeItem {
+    Edititng = "editing",
+    View = "view"
+}

package/build/esm/editor/types/index.js

@@ -1 +1,5 @@
-export {};
+export var ViewModeItem;
+(function (ViewModeItem) {
+    ViewModeItem["Edititng"] = "editing";
+    ViewModeItem["View"] = "view";
+})(ViewModeItem || (ViewModeItem = {}));

package/package.json

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

package/build/cjs/editor/containers/Editor/Editor.css

@@ -1,28 +0,0 @@
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
-.pc-editor__form, .pc-editor__preview {
-  --yc-scrollbar-width: 0;
-  height: 100vh;
-  max-height: 100vh;
-  overflow: auto;
-}
-
-.pc-editor {
-  display: flex;
-}
-.pc-editor__form {
-  flex: 0 0 auto;
-  padding: 20px;
-  width: 412px;
-  border-right: 12px solid var(--yc-color-line-generic);
-}
-.pc-editor__preview {
-  width: 100%;
-}
-.pc-editor__add-button {
-  position: fixed;
-  bottom: 32px;
-  left: calc(50% + 206px);
-  transform: translateX(-50%);
-  z-index: 110;
-}

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

@@ -1,28 +0,0 @@
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
-.pc-editor__form, .pc-editor__preview {
-  --yc-scrollbar-width: 0;
-  height: 100vh;
-  max-height: 100vh;
-  overflow: auto;
-}
-
-.pc-editor {
-  display: flex;
-}
-.pc-editor__form {
-  flex: 0 0 auto;
-  padding: 20px;
-  width: 412px;
-  border-right: 12px solid var(--yc-color-line-generic);
-}
-.pc-editor__preview {
-  width: 100%;
-}
-.pc-editor__add-button {
-  position: fixed;
-  bottom: 32px;
-  left: calc(50% + 206px);
-  transform: translateX(-50%);
-  z-index: 110;
-}