@gravity-ui/page-constructor 5.13.0 → 5.14.1

package/build/cjs/blocks/Questions/QuestionBlockItem/QuestionBlockItem.css

@@ -56,6 +56,7 @@ unpredictable css rules order in build */
 .pc-QuestionsBlockItem__link.pc-QuestionsBlockItem__link a {
   outline-offset: -2px;
   border-radius: calc(var(--g-focus-border-radius) + 2px);
+  display: inline-block;
 }
 
 .pc-QuestionsBlockItem__text {

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

@@ -2,8 +2,7 @@
 unpredictable css rules order in build */
 .pc-add-block {
   position: absolute;
-  bottom: 32px;
-  left: calc(50% + var(--pc-editor-left-column-width) / 2);
+  left: 50%;
   transform: translateX(-50%);
   z-index: 110;
 }

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

@@ -1,7 +1,9 @@
 .pc-code-editor {
-  height: 100%;
+  z-index: 2;
+  height: 60vh;
   position: relative;
   overflow: hidden;
+  box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
 }
 .pc-code-editor_fullscreen {
   position: absolute;

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

@@ -14,17 +14,15 @@ unpredictable css rules order in build */
   display: flex;
   align-items: center;
 }
-.pc-control-panel__radio-button {
-  margin-left: 12px;
-}
 .pc-control-panel__radio-button .g-radio-button__option {
   display: flex;
   align-items: center;
 }
-.pc-control-panel__mode-switch {
+.pc-control-panel__switch-container {
   display: flex;
   align-items: center;
   place-self: center;
+  gap: 12px;
 }
 .pc-control-panel__theme-switch {
   place-self: center end;

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

@@ -1,10 +1,12 @@
 import { ClassNameProps, Theme } from '../../../models';
-import { ViewModeItem } from '../../types';
+import { EditModeItem, ViewModeItem } from '../../types';
 export interface ControlPanelProps extends ClassNameProps {
     viewMode?: ViewModeItem;
+    editMode?: EditModeItem;
     onViewModeChange: (viewMode: ViewModeItem) => void;
+    onEditModeChange: (editMode: EditModeItem) => void;
     theme: Theme;
     onThemeChange: (theme: Theme) => void;
 }
-declare const ControlPanel: ({ viewMode, onViewModeChange, className, theme, onThemeChange, }: ControlPanelProps) => JSX.Element;
+declare const ControlPanel: ({ viewMode, editMode, onViewModeChange, onEditModeChange, className, theme, onThemeChange, }: ControlPanelProps) => JSX.Element;
 export default ControlPanel;

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

@@ -12,24 +12,33 @@ const i18n_1 = 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.Desktop]: icons_1.Display,
     [types_1.ViewModeItem.Tablet]: Tablet_1.Tablet,
     [types_1.ViewModeItem.Mobile]: icons_1.Smartphone,
 };
-const ControlPanel = ({ viewMode = types_1.ViewModeItem.Edititng, onViewModeChange, className, theme, onThemeChange, }) => {
-    return (react_1.default.createElement("div", { className: b(null, className) },
-        react_1.default.createElement("div", null),
-        react_1.default.createElement("div", { className: b('mode-switch') },
-            react_1.default.createElement("span", null, (0, i18n_1.i18n)('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("span", { className: b('icon') },
-                        react_1.default.createElement(Icon, { width: ICON_SIZE, height: ICON_SIZE }))));
-            }))),
-        react_1.default.createElement("div", { className: b('theme-switch') },
-            react_1.default.createElement("span", null, (0, i18n_1.i18n)('theme')),
-            react_1.default.createElement(uikit_1.Select, { value: [theme], onUpdate: (value) => onThemeChange(value[0]) }, Object.values(models_1.Theme).map((item) => (react_1.default.createElement(uikit_1.Select.Option, { key: item, value: item }, models_1.themeNames[item])))))));
+const ControlPanelEditModeIcons = {
+    [types_1.EditModeItem.View]: icons_1.Eye,
+    [types_1.EditModeItem.Form]: icons_1.SquareDashedText,
+    [types_1.EditModeItem.Code]: icons_1.Code,
 };
+const ControlPanel = ({ viewMode = types_1.ViewModeItem.Desktop, editMode = types_1.EditModeItem.Form, onViewModeChange, onEditModeChange, className, theme, onThemeChange, }) => (react_1.default.createElement("div", { className: b(null, className) },
+    react_1.default.createElement("div", { className: b('switch-container') },
+        react_1.default.createElement("span", null, (0, i18n_1.i18n)('edit_mode')),
+        react_1.default.createElement(uikit_1.RadioButton, { className: b('radio-button'), value: editMode, onUpdate: (value) => onEditModeChange(value) }, Object.values(types_1.EditModeItem).map((item) => {
+            const Icon = ControlPanelEditModeIcons[item];
+            return (react_1.default.createElement(uikit_1.RadioButton.Option, { key: item, value: item },
+                react_1.default.createElement("span", { className: b('icon') },
+                    react_1.default.createElement(Icon, { width: ICON_SIZE, height: ICON_SIZE }))));
+        }))),
+    react_1.default.createElement("div", { className: b('switch-container') },
+        react_1.default.createElement("span", null, (0, i18n_1.i18n)('view_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("span", { className: b('icon') },
+                    react_1.default.createElement(Icon, { width: ICON_SIZE, height: ICON_SIZE }))));
+        }))),
+    react_1.default.createElement("div", { className: b('switch-container') },
+        react_1.default.createElement("span", null, (0, i18n_1.i18n)('theme')),
+        react_1.default.createElement(uikit_1.Select, { value: [theme], onUpdate: (value) => onThemeChange(value[0]) }, Object.values(models_1.Theme).map((item) => (react_1.default.createElement(uikit_1.Select.Option, { key: item, value: item }, models_1.themeNames[item])))))));
 exports.default = ControlPanel;

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

@@ -1,4 +1,5 @@
 {
-  "mode": "Mode",
+  "view_mode": "View mode",
+  "edit_mode": "Edit mode",
   "theme": "Theme"
 }

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

@@ -1 +1 @@
-export declare const i18n: (key: "theme" | "mode", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: (key: "theme" | "view_mode" | "edit_mode", params?: import("@gravity-ui/i18n").Params | undefined) => string;

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

@@ -1,4 +1,5 @@
 {
-  "mode": "Режим",
+  "view_mode": "Режим просмотра",
+  "edit_mode": "Режим редактирования",
   "theme": "Тема"
 }

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

@@ -20,11 +20,6 @@ body {
 .pc-editor-layout {
   position: relative;
 }
-.pc-editor-layout__panel {
-  top: 0;
-  position: sticky;
-  z-index: 2;
-}
 .pc-editor-layout__container {
   position: relative;
   display: flex;
@@ -33,14 +28,23 @@ body {
 }
 .pc-editor-layout__left {
   flex: 0 0 auto;
-  padding: 24px 16px;
+  padding: 24px;
   width: var(--pc-editor-left-column-width);
   border-right: var(--pc-editor-divider-width) solid var(--g-color-line-generic);
   overflow-x: auto;
 }
+.pc-editor-layout__left_closed {
+  display: none;
+}
 .pc-editor-layout__right {
+  position: relative;
   width: 100%;
 }
 .pc-editor-layout__right_editing {
   padding-bottom: 200px;
+}
+.pc-editor-layout__arrow-toggle {
+  padding: 12px;
+  cursor: pointer;
+  border-right: 1px solid var(--g-color-line-generic);
 }

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

@@ -1,14 +1,11 @@
 import React, { PropsWithChildren } from 'react';
-import { Theme } from '../../../models';
-import { ViewModeItem } from '../../types';
+import { EditModeItem, ViewModeItem } from '../../types';
 export interface LayoutProps {
-    mode: ViewModeItem;
-    onModeChange: (mode: ViewModeItem) => void;
-    theme: Theme;
-    onThemeChange: (theme: Theme) => void;
+    editMode: EditModeItem;
+    viewMode: ViewModeItem;
 }
 declare const Layout: {
-    ({ children, mode, onModeChange, theme, onThemeChange, }: PropsWithChildren<LayoutProps>): JSX.Element;
+    ({ children, editMode, viewMode }: PropsWithChildren<LayoutProps>): JSX.Element;
     Left: React.FC<{
         children?: React.ReactNode;
     }>;

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

@@ -4,14 +4,14 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../../utils");
 const types_1 = require("../../types");
-const ControlPanel_1 = tslib_1.__importDefault(require("../ControlPanel/ControlPanel"));
 const DeviceEmulation_1 = tslib_1.__importDefault(require("../DeviceEmulation/DeviceEmulation"));
 const b = (0, utils_1.block)('editor-layout');
 const Left = () => null;
 const Right = () => null;
-const Layout = ({ children, mode, onModeChange, theme, onThemeChange, }) => {
+// TODO in https://github.com/gravity-ui/page-constructor/issues/884 this component will be disappeared
+const Layout = ({ children, editMode, viewMode }) => {
     let left, right;
-    const isEditingMode = mode === types_1.ViewModeItem.Edititng;
+    const isEditingMode = editMode === types_1.EditModeItem.Form;
     function handleChild(child) {
         switch (child === null || child === void 0 ? void 0 : child.type) {
             case Left:
@@ -25,13 +25,11 @@ const Layout = ({ children, mode, onModeChange, theme, onThemeChange, }) => {
     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'), theme: theme, onThemeChange: onThemeChange }),
-        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', { editing: isEditingMode }) },
-                    react_1.default.createElement(DeviceEmulation_1.default, { mode: mode }, right)))))));
+    return (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', { editing: isEditingMode }) },
+                react_1.default.createElement(DeviceEmulation_1.default, { mode: viewMode }, right))))));
 };
 Layout.Left = Left;
 Layout.Right = Right;

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

@@ -0,0 +1,26 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-editor-page-settings__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 12px;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.pc-editor-page-settings__container .g-disclosure__content {
+  width: 100%;
+}
+.pc-editor-page-settings__form {
+  margin-top: 16px;
+}

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

@@ -0,0 +1,11 @@
+import { JSONSchema4 } from 'json-schema';
+import { PageContent } from '../../../models';
+export interface PageSettingsProps {
+    content: PageContent;
+    schema: JSONSchema4;
+    onChange: (content: PageContent) => void;
+}
+export declare const PageSettings: {
+    ({ schema, content, onChange }: PageSettingsProps): JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageSettings = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const dynamic_forms_1 = require("@gravity-ui/dynamic-forms");
+const uikit_1 = require("@gravity-ui/uikit");
+const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+const react_final_form_1 = require("react-final-form");
+const utils_1 = require("../../../utils");
+const config_1 = require("../../dynamic-forms-custom/config");
+const useFormSpec_1 = tslib_1.__importDefault(require("../../hooks/useFormSpec"));
+const i18n_1 = require("./i18n");
+const b = (0, utils_1.block)('editor-page-settings');
+const PageSettings = ({ schema, content, onChange }) => {
+    const spec = (0, useFormSpec_1.default)(schema);
+    const { page: pageSpec } = spec || {};
+    const initialPage = (0, react_1.useMemo)(() => {
+        const _a = content || {}, { blocks: _ } = _a, page = tslib_1.__rest(_a, ["blocks"]);
+        return page;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (react_1.default.createElement(uikit_1.Disclosure, { className: b('container'), summary: (0, i18n_1.i18n)('page-settings-title'), size: "l" },
+        react_1.default.createElement("div", { className: b('form') },
+            react_1.default.createElement(react_final_form_1.Form, { initialValues: { content: initialPage }, onSubmit: noop_1.default }, () => (react_1.default.createElement("div", null,
+                react_1.default.createElement(react_final_form_1.FormSpy, { onChange: ({ values }) => onChange(Object.assign(Object.assign({}, content), values.content)), subscription: { values: true } }),
+                react_1.default.createElement(dynamic_forms_1.DynamicField, { name: "content", spec: pageSpec, config: config_1.dynamicConfig })))))));
+};
+exports.PageSettings = PageSettings;
+exports.PageSettings.displayName = 'PageSettings';

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

@@ -0,0 +1,3 @@
+{
+  "page-settings-title": "Global page settings"
+}

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

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

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+const tslib_1 = require("tslib");
+const i18n_1 = require("@gravity-ui/uikit/i18n");
+const cn_1 = require("../../../../utils/cn");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}PageSettings`);

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

@@ -0,0 +1,3 @@
+{
+  "page-settings-title": "Глобальные настройки страницы"
+}

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

@@ -0,0 +1,17 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-editor__panel {
+  top: 0;
+  position: sticky;
+  z-index: 2;
+}

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

@@ -1,2 +1,2 @@
 import { EditorProps } from '../../types';
-export declare const Editor: ({ customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, theme: editorTheme, ...rest }: EditorProps) => JSX.Element;
+export declare const Editor: (props: EditorProps) => JSX.Element;

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

@@ -2,81 +2,33 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Editor = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const PageConstructor_1 = require("../../../containers/PageConstructor");
-const schema_1 = require("../../../schema");
+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 CodeEditor_1 = require("../../components/CodeEditor/CodeEditor");
+const ControlPanel_1 = tslib_1.__importDefault(require("../../components/ControlPanel/ControlPanel"));
 const ErrorBoundary_1 = require("../../components/ErrorBoundary/ErrorBoundary");
 const Layout_1 = tslib_1.__importDefault(require("../../components/Layout/Layout"));
-const NotFoundBlock_1 = require("../../components/NotFoundBlock/NotFoundBlock");
+const PageSettings_1 = require("../../components/PageSettings/PageSettings");
 const context_1 = require("../../context");
-const useCodeValidator_1 = require("../../hooks/useCodeValidator");
-const main_1 = require("../../store/main");
-const settings_1 = require("../../store/settings");
-const types_1 = require("../../types");
-const index_1 = require("../../types/index");
-const utils_1 = require("../../utils");
 const Form_1 = require("../Form/Form");
-const Editor = (_a) => {
-    var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, theme: editorTheme } = _a, rest = tslib_1.__rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings", "theme"]);
-    const { content, activeBlockIndex, errorBoundaryState, onContentUpdate, onAdd, onSelect, injectEditBlockProps, } = (0, main_1.useMainState)(rest);
-    const { viewMode, theme: constructorTheme, onViewModeUpdate, onThemeUpdate, formTab, onFormTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, } = (0, settings_1.useSettingsState)();
-    const isEditingMode = viewMode === types_1.ViewModeItem.Edititng;
-    const isCodeOnlyMode = codeFullscreeModeOn && formTab === index_1.FormTab.Code && viewMode === types_1.ViewModeItem.Edititng;
-    const transformedContent = (0, react_1.useMemo)(() => (transformContent ? transformContent(content, { viewMode }) : content), [content, transformContent, viewMode]);
-    const schema = (0, react_1.useMemo)(() => (0, schema_1.generateDefaultSchema)(customSchema), [customSchema]);
-    const codeValidator = (0, useCodeValidator_1.useCodeValidator)(schema);
-    const outgoingProps = (0, react_1.useMemo)(() => {
-        const custom = isEditingMode
-            ? (0, utils_1.addCustomDecorator)([
-                (props) => react_1.default.createElement(NotFoundBlock_1.NotFoundBlock, Object.assign({}, props)),
-                (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: transformedContent,
-            custom,
-            viewMode,
-        };
-    }, [
-        injectEditBlockProps,
-        errorBoundaryState,
-        isEditingMode,
-        viewMode,
-        transformedContent,
-        rest.custom,
-    ]);
-    const context = (0, react_1.useMemo)(() => ({
-        constructorProps: {
-            content: transformedContent,
-            custom: rest.custom,
-        },
-        providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: (0, utils_1.checkIsMobile)(viewMode), theme: constructorTheme }),
-        deviceEmulationSettings,
-        theme: editorTheme,
-    }), [
-        providerProps,
-        rest.custom,
-        viewMode,
-        transformedContent,
-        deviceEmulationSettings,
-        constructorTheme,
-        editorTheme,
-    ]);
-    (0, react_1.useEffect)(() => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(content);
-    }, [content, onChange]);
+const useEditorState_1 = require("./hooks/useEditorState");
+const b = (0, utils_1.block)('editor');
+const Editor = (props) => {
+    const { providerProps } = props;
+    const { context, viewMode, editMode, constructorTheme, onThemeUpdate, onViewModeUpdate, onEditModeUpdate, isCodeEditMode, isFormEditMode, isDesktopViewMode, content, schema, onContentUpdate, code, codeValidator, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, activeBlockIndex, onSelect, isCodeOnlyMode, errorBoundaryState, outgoingProps, onAdd, } = (0, useEditorState_1.useEditorState)(props);
     return (react_1.default.createElement(context_1.EditorContext.Provider, { value: context },
-        react_1.default.createElement(Layout_1.default, { mode: viewMode, onModeChange: onViewModeUpdate, theme: constructorTheme, onThemeChange: onThemeUpdate },
-            isEditingMode && (react_1.default.createElement(Layout_1.default.Left, null,
-                react_1.default.createElement(Form_1.Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, activeTab: formTab, codeFullscreeModeOn: codeFullscreeModeOn, schema: schema, codeValidator: codeValidator, onActiveTabUpdate: onFormTabUpdate, onCodeFullscreeModeOnUpdate: onCodeFullscreeModeOnUpdate, onSelect: onSelect }))),
+        react_1.default.createElement(ControlPanel_1.default, { viewMode: viewMode, onViewModeChange: onViewModeUpdate, editMode: editMode, onEditModeChange: onEditModeUpdate, theme: constructorTheme, className: b('panel'), onThemeChange: onThemeUpdate }),
+        isFormEditMode && isDesktopViewMode && (react_1.default.createElement(PageSettings_1.PageSettings, { content: content, schema: schema, onChange: onContentUpdate })),
+        isCodeEditMode && (react_1.default.createElement(CodeEditor_1.CodeEditor, { code: code, onChange: onContentUpdate, validator: codeValidator, fullscreenModeOn: codeFullscreeModeOn, onFullscreenModeOnUpdate: onCodeFullscreeModeOnUpdate })),
+        react_1.default.createElement(Layout_1.default, { editMode: editMode, viewMode: viewMode },
+            isFormEditMode && isDesktopViewMode && (react_1.default.createElement(Layout_1.default.Left, null,
+                react_1.default.createElement(Form_1.Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, schema: schema, onSelect: onSelect }))),
             !isCodeOnlyMode && (react_1.default.createElement(Layout_1.default.Right, null,
                 react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { key: errorBoundaryState },
                     react_1.default.createElement(PageConstructor_1.PageConstructorProvider, Object.assign({}, providerProps, { theme: constructorTheme }),
                         react_1.default.createElement(PageConstructor_1.PageConstructor, Object.assign({}, outgoingProps)))),
-                isEditingMode && react_1.default.createElement(AddBlock_1.default, { onAdd: onAdd }))))));
+                isFormEditMode && react_1.default.createElement(AddBlock_1.default, { onAdd: onAdd }))))));
 };
 exports.Editor = Editor;

package/build/cjs/editor/containers/Editor/hooks/useCode.d.ts

@@ -0,0 +1,14 @@
+import { PageContent } from '../../../../models';
+type UseCodeProps = {
+    content: PageContent;
+    codeFullscreeModeOn: boolean;
+    isCodeEditMode: boolean;
+};
+/**
+ * Transorms PageConstructor content in JSON to YAML on code editor mode switching
+ *
+ * @param {Object} props - props parent from form
+ * @returns {string} - updated code
+ */
+export declare function useCode({ content, codeFullscreeModeOn, isCodeEditMode }: UseCodeProps): string;
+export {};

package/build/cjs/editor/containers/{Form/hooks.js → Editor/hooks/useCode.js}

@@ -4,36 +4,26 @@ exports.useCode = void 0;
 const tslib_1 = require("tslib");
 const react_1 = require("react");
 const js_yaml_1 = tslib_1.__importDefault(require("js-yaml"));
-const usePreviousValue_1 = tslib_1.__importDefault(require("../../hooks/usePreviousValue"));
-const types_1 = require("../../types");
+const usePreviousValue_1 = tslib_1.__importDefault(require("../../../hooks/usePreviousValue"));
 /**
  * Transorms PageConstructor content in JSON to YAML on code editor mode switching
  *
  * @param {Object} props - props parent from form
  * @returns {string} - updated code
  */
-function useCode({ activeTab, content, codeFullscreeModeOn, }) {
+function useCode({ content, codeFullscreeModeOn, isCodeEditMode }) {
     var _a;
     const [code, setCode] = (0, react_1.useState)('');
-    const prevTab = (0, usePreviousValue_1.default)(activeTab);
     const prevContentLength = (0, usePreviousValue_1.default)((_a = content.blocks) === null || _a === void 0 ? void 0 : _a.length);
     const prevCodeFullscreeModeOn = (0, usePreviousValue_1.default)(codeFullscreeModeOn);
     (0, react_1.useEffect)(() => {
         var _a;
-        const switchedToCodeEditing = activeTab !== prevTab && activeTab === types_1.FormTab.Code;
         const blocksCountChanged = prevContentLength !== ((_a = content.blocks) === null || _a === void 0 ? void 0 : _a.length);
         const codeModeSwitched = codeFullscreeModeOn !== prevCodeFullscreeModeOn;
-        if (blocksCountChanged || switchedToCodeEditing || codeModeSwitched) {
+        if (blocksCountChanged || isCodeEditMode || codeModeSwitched) {
             setCode(js_yaml_1.default.dump(content, { lineWidth: -1 }));
         }
-    }, [
-        activeTab,
-        prevTab,
-        content,
-        prevContentLength,
-        codeFullscreeModeOn,
-        prevCodeFullscreeModeOn,
-    ]);
+    }, [isCodeEditMode, content, prevContentLength, codeFullscreeModeOn, prevCodeFullscreeModeOn]);
     return code;
 }
 exports.useCode = useCode;

package/build/cjs/editor/containers/Editor/hooks/useEditorState.d.ts

@@ -0,0 +1,49 @@
+import { EditModeItem, EditorProps, ViewModeItem } from '../../../types';
+export declare const useEditorState: ({ customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, theme: editorTheme, ...rest }: EditorProps) => {
+    context: {
+        constructorProps: {
+            content: import("../../../../models").PageContent;
+            custom: import("../../../../models").CustomConfig | undefined;
+        };
+        providerProps: {
+            isMobile: boolean;
+            theme: import("../../../../models").Theme;
+            locale?: import("../../../../context/localeContext").LocaleContextProps | undefined;
+            location?: import("../../../../context/locationContext").LocationContextProps | undefined;
+            ssrConfig?: import("../../../../context/ssrContext").SSRContextProps | undefined;
+            mapsContext?: import("../../../../context/mapsContext/mapsContext").MapsContextType | undefined;
+            projectSettings?: import("../../../../context/projectSettingsContext").ProjectSettingsContextProps | undefined;
+            analytics?: import("../../../..").AnalyticsContextProps | undefined;
+            forms?: import("../../../../context/formsContext").FormsContextProps | undefined;
+            image?: import("../../../../context/imageContext").ImageContextProps | undefined;
+        };
+        deviceEmulationSettings: import("../../../types").DeviceEmulationSettings | undefined;
+        theme: import("../../../../models").Theme | undefined;
+    };
+    viewMode: ViewModeItem;
+    editMode: EditModeItem;
+    constructorTheme: import("../../../../models").Theme;
+    onThemeUpdate: (newTheme: import("../../../../models").Theme) => void;
+    onViewModeUpdate: (newViewMode: ViewModeItem) => void;
+    onEditModeUpdate: (newEditMode: EditModeItem) => void;
+    isCodeEditMode: boolean;
+    isDesktopViewMode: boolean;
+    content: import("../../../../models").PageContent;
+    schema: import("json-schema").JSONSchema4;
+    onContentUpdate: (newContent: import("../../../../models").PageContent) => void;
+    code: string;
+    codeValidator: import("../../../hooks/useCodeValidator").CodeValidator;
+    codeFullscreeModeOn: boolean;
+    onCodeFullscreeModeOnUpdate: (newCodeFullscreeModeOn: boolean) => void;
+    activeBlockIndex: number;
+    onSelect: (index: number) => void;
+    isCodeOnlyMode: boolean;
+    errorBoundaryState: number;
+    outgoingProps: {
+        content: import("../../../../models").PageContent;
+        custom: import("../../../../models").CustomConfig | undefined;
+        viewMode: ViewModeItem;
+    };
+    onAdd: (block: import("../../../../models").Block) => void;
+    isFormEditMode: boolean;
+};