@gravity-ui/page-constructor 5.13.0 → 5.14.1

package/build/esm/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/esm/editor/components/PageSettings/PageSettings.d.ts

@@ -0,0 +1,12 @@
+import { JSONSchema4 } from 'json-schema';
+import { PageContent } from '../../../models';
+import './PageSettings.css';
+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/esm/editor/components/PageSettings/PageSettings.js

@@ -0,0 +1,27 @@
+import { __rest } from "tslib";
+import React, { useMemo } from 'react';
+import { DynamicField } from '@gravity-ui/dynamic-forms';
+import { Disclosure } from '@gravity-ui/uikit';
+import noop from 'lodash/noop';
+import { Form as FinalForm, FormSpy } from 'react-final-form';
+import { block } from '../../../utils';
+import { dynamicConfig } from '../../dynamic-forms-custom/config';
+import useFormSpec from '../../hooks/useFormSpec';
+import { i18n } from './i18n';
+import './PageSettings.css';
+const b = block('editor-page-settings');
+export const PageSettings = ({ schema, content, onChange }) => {
+    const spec = useFormSpec(schema);
+    const { page: pageSpec } = spec || {};
+    const initialPage = useMemo(() => {
+        const _a = content || {}, { blocks: _ } = _a, page = __rest(_a, ["blocks"]);
+        return page;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (React.createElement(Disclosure, { className: b('container'), summary: i18n('page-settings-title'), size: "l" },
+        React.createElement("div", { className: b('form') },
+            React.createElement(FinalForm, { initialValues: { content: initialPage }, onSubmit: noop }, () => (React.createElement("div", null,
+                React.createElement(FormSpy, { onChange: ({ values }) => onChange(Object.assign(Object.assign({}, content), values.content)), subscription: { values: true } }),
+                React.createElement(DynamicField, { name: "content", spec: pageSpec, config: dynamicConfig })))))));
+};
+PageSettings.displayName = 'PageSettings';

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

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

package/build/esm/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/esm/editor/components/PageSettings/i18n/index.js

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}PageSettings`);

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

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

package/build/esm/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/esm/editor/containers/Editor/Editor.d.ts

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

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

@@ -1,78 +1,30 @@
-import { __rest } from "tslib";
-import React, { useEffect, useMemo } from 'react';
+import React from 'react';
 import { PageConstructor, PageConstructorProvider } from '../../../containers/PageConstructor';
-import { generateDefaultSchema } from '../../../schema';
+import { block } from '../../../utils';
 import AddBlock from '../../components/AddBlock/AddBlock';
-import EditBlock from '../../components/EditBlock/EditBlock';
+import { CodeEditor } from '../../components/CodeEditor/CodeEditor';
+import ControlPanel from '../../components/ControlPanel/ControlPanel';
 import { ErrorBoundary } from '../../components/ErrorBoundary/ErrorBoundary';
 import Layout from '../../components/Layout/Layout';
-import { NotFoundBlock } from '../../components/NotFoundBlock/NotFoundBlock';
+import { PageSettings } from '../../components/PageSettings/PageSettings';
 import { EditorContext } from '../../context';
-import { useCodeValidator } from '../../hooks/useCodeValidator';
-import { useMainState } from '../../store/main';
-import { useSettingsState } from '../../store/settings';
-import { ViewModeItem } from '../../types';
-import { FormTab } from '../../types/index';
-import { addCustomDecorator, checkIsMobile, getBlockId } from '../../utils';
 import { Form } from '../Form/Form';
-export const Editor = (_a) => {
-    var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, theme: editorTheme } = _a, rest = __rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings", "theme"]);
-    const { content, activeBlockIndex, errorBoundaryState, onContentUpdate, onAdd, onSelect, injectEditBlockProps, } = useMainState(rest);
-    const { viewMode, theme: constructorTheme, onViewModeUpdate, onThemeUpdate, formTab, onFormTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, } = useSettingsState();
-    const isEditingMode = viewMode === ViewModeItem.Edititng;
-    const isCodeOnlyMode = codeFullscreeModeOn && formTab === FormTab.Code && viewMode === ViewModeItem.Edititng;
-    const transformedContent = useMemo(() => (transformContent ? transformContent(content, { viewMode }) : content), [content, transformContent, viewMode]);
-    const schema = useMemo(() => generateDefaultSchema(customSchema), [customSchema]);
-    const codeValidator = useCodeValidator(schema);
-    const outgoingProps = useMemo(() => {
-        const custom = isEditingMode
-            ? addCustomDecorator([
-                (props) => React.createElement(NotFoundBlock, Object.assign({}, props)),
-                (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: transformedContent,
-            custom,
-            viewMode,
-        };
-    }, [
-        injectEditBlockProps,
-        errorBoundaryState,
-        isEditingMode,
-        viewMode,
-        transformedContent,
-        rest.custom,
-    ]);
-    const context = useMemo(() => ({
-        constructorProps: {
-            content: transformedContent,
-            custom: rest.custom,
-        },
-        providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: checkIsMobile(viewMode), theme: constructorTheme }),
-        deviceEmulationSettings,
-        theme: editorTheme,
-    }), [
-        providerProps,
-        rest.custom,
-        viewMode,
-        transformedContent,
-        deviceEmulationSettings,
-        constructorTheme,
-        editorTheme,
-    ]);
-    useEffect(() => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(content);
-    }, [content, onChange]);
+import { useEditorState } from './hooks/useEditorState';
+import './Editor.css';
+const b = block('editor');
+export 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, } = useEditorState(props);
     return (React.createElement(EditorContext.Provider, { value: context },
-        React.createElement(Layout, { mode: viewMode, onModeChange: onViewModeUpdate, theme: constructorTheme, onThemeChange: onThemeUpdate },
-            isEditingMode && (React.createElement(Layout.Left, null,
-                React.createElement(Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, activeTab: formTab, codeFullscreeModeOn: codeFullscreeModeOn, schema: schema, codeValidator: codeValidator, onActiveTabUpdate: onFormTabUpdate, onCodeFullscreeModeOnUpdate: onCodeFullscreeModeOnUpdate, onSelect: onSelect }))),
+        React.createElement(ControlPanel, { viewMode: viewMode, onViewModeChange: onViewModeUpdate, editMode: editMode, onEditModeChange: onEditModeUpdate, theme: constructorTheme, className: b('panel'), onThemeChange: onThemeUpdate }),
+        isFormEditMode && isDesktopViewMode && (React.createElement(PageSettings, { content: content, schema: schema, onChange: onContentUpdate })),
+        isCodeEditMode && (React.createElement(CodeEditor, { code: code, onChange: onContentUpdate, validator: codeValidator, fullscreenModeOn: codeFullscreeModeOn, onFullscreenModeOnUpdate: onCodeFullscreeModeOnUpdate })),
+        React.createElement(Layout, { editMode: editMode, viewMode: viewMode },
+            isFormEditMode && isDesktopViewMode && (React.createElement(Layout.Left, null,
+                React.createElement(Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, schema: schema, onSelect: onSelect }))),
             !isCodeOnlyMode && (React.createElement(Layout.Right, null,
                 React.createElement(ErrorBoundary, { key: errorBoundaryState },
                     React.createElement(PageConstructorProvider, Object.assign({}, providerProps, { theme: constructorTheme }),
                         React.createElement(PageConstructor, Object.assign({}, outgoingProps)))),
-                isEditingMode && React.createElement(AddBlock, { onAdd: onAdd }))))));
+                isFormEditMode && React.createElement(AddBlock, { onAdd: onAdd }))))));
 };

package/build/esm/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/esm/editor/containers/{Form/hooks.js → Editor/hooks/useCode.js}

@@ -1,34 +1,24 @@
 import { useEffect, useState } from 'react';
 import yaml from 'js-yaml';
-import usePreviousValue from '../../hooks/usePreviousValue';
-import { FormTab } from '../../types';
+import usePreviousValue from '../../../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
  */
-export function useCode({ activeTab, content, codeFullscreeModeOn, }) {
+export function useCode({ content, codeFullscreeModeOn, isCodeEditMode }) {
     var _a;
     const [code, setCode] = useState('');
-    const prevTab = usePreviousValue(activeTab);
     const prevContentLength = usePreviousValue((_a = content.blocks) === null || _a === void 0 ? void 0 : _a.length);
     const prevCodeFullscreeModeOn = usePreviousValue(codeFullscreeModeOn);
     useEffect(() => {
         var _a;
-        const switchedToCodeEditing = activeTab !== prevTab && activeTab === 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(yaml.dump(content, { lineWidth: -1 }));
         }
-    }, [
-        activeTab,
-        prevTab,
-        content,
-        prevContentLength,
-        codeFullscreeModeOn,
-        prevCodeFullscreeModeOn,
-    ]);
+    }, [isCodeEditMode, content, prevContentLength, codeFullscreeModeOn, prevCodeFullscreeModeOn]);
     return code;
 }

package/build/esm/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;
+};

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

@@ -0,0 +1,95 @@
+import { __rest } from "tslib";
+import React, { useEffect, useMemo } from 'react';
+import { generateDefaultSchema } from '../../../../schema';
+import EditBlock from '../../../components/EditBlock/EditBlock';
+import { ErrorBoundary } from '../../../components/ErrorBoundary/ErrorBoundary';
+import { NotFoundBlock } from '../../../components/NotFoundBlock/NotFoundBlock';
+import { useCodeValidator } from '../../../hooks/useCodeValidator';
+import { useMainState } from '../../../store/main';
+import { useSettingsState } from '../../../store/settings';
+import { EditModeItem, ViewModeItem } from '../../../types';
+import { addCustomDecorator, checkIsMobile, getBlockId } from '../../../utils';
+import { useCode } from './useCode';
+// Editor business logic
+export const useEditorState = (_a) => {
+    var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, theme: editorTheme } = _a, rest = __rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings", "theme"]);
+    const { content, activeBlockIndex, errorBoundaryState, onContentUpdate, onAdd, onSelect, injectEditBlockProps, } = useMainState(rest);
+    const { viewMode, editMode, onEditModeUpdate, theme: constructorTheme, onViewModeUpdate, onThemeUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, } = useSettingsState();
+    const isCodeEditMode = editMode === EditModeItem.Code;
+    const isViewEditMode = editMode === EditModeItem.View;
+    const isFormEditMode = editMode === EditModeItem.Form;
+    const isDesktopViewMode = viewMode === ViewModeItem.Desktop;
+    const isCodeOnlyMode = codeFullscreeModeOn && isCodeEditMode;
+    const transformedContent = useMemo(() => (transformContent ? transformContent(content, { viewMode }) : content), [content, transformContent, viewMode]);
+    const schema = useMemo(() => generateDefaultSchema(customSchema), [customSchema]);
+    const codeValidator = useCodeValidator(schema);
+    const outgoingProps = useMemo(() => {
+        const custom = isCodeEditMode || isViewEditMode
+            ? rest.custom
+            : addCustomDecorator([
+                (props) => React.createElement(NotFoundBlock, Object.assign({}, props)),
+                (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);
+        return {
+            content: transformedContent,
+            custom,
+            viewMode,
+        };
+    }, [
+        injectEditBlockProps,
+        errorBoundaryState,
+        viewMode,
+        transformedContent,
+        rest.custom,
+        isCodeEditMode,
+        isViewEditMode,
+    ]);
+    const context = useMemo(() => ({
+        constructorProps: {
+            content: transformedContent,
+            custom: rest.custom,
+        },
+        providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: checkIsMobile(viewMode), theme: constructorTheme }),
+        deviceEmulationSettings,
+        theme: editorTheme,
+    }), [
+        providerProps,
+        rest.custom,
+        viewMode,
+        transformedContent,
+        deviceEmulationSettings,
+        constructorTheme,
+        editorTheme,
+    ]);
+    useEffect(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(content);
+    }, [content, onChange]);
+    const code = useCode({ isCodeEditMode, content, codeFullscreeModeOn });
+    return {
+        context,
+        viewMode,
+        editMode,
+        constructorTheme,
+        onThemeUpdate,
+        onViewModeUpdate,
+        onEditModeUpdate,
+        isCodeEditMode,
+        isDesktopViewMode,
+        content,
+        schema,
+        onContentUpdate,
+        code,
+        codeValidator,
+        codeFullscreeModeOn,
+        onCodeFullscreeModeOnUpdate,
+        activeBlockIndex,
+        onSelect,
+        isCodeOnlyMode,
+        errorBoundaryState,
+        outgoingProps,
+        onAdd,
+        isFormEditMode,
+    };
+};

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

@@ -82,16 +82,6 @@ unpredictable css rules order in build */
 .pc-editor-form + .pc-editor-form {
   margin-top: 12px;
 }
-.pc-editor-form__tabs {
-  --g-color-base-brand: var(--pc-color-base-neon);
-  margin-bottom: 20px;
-}
 .pc-editor-form__block-form {
   margin-bottom: 16px;
-}
-.pc-editor-form_code-editor-active {
-  height: calc(100% - var(--pc-editor-code-header-height));
-}
-.pc-editor-form_code-editor-active .pc-editor-form__tabs {
-  margin-bottom: 0;
 }

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

@@ -1,19 +1,12 @@
 import React from 'react';
 import { JSONSchema4 } from 'json-schema';
 import { PageContent } from '../../../models';
-import { FormTab } from '../../types';
-import { CodeEditorMessageProps } from '../../utils/validation';
 import './Form.css';
 export interface FormProps {
     content: PageContent;
     schema: JSONSchema4;
     activeBlockIndex: number;
-    activeTab: FormTab;
-    codeFullscreeModeOn: boolean;
-    onActiveTabUpdate: (tab: FormTab) => void;
-    onCodeFullscreeModeOnUpdate: (codeFullscreeModeOn: boolean) => void;
-    codeValidator: (code: string) => CodeEditorMessageProps;
     onChange: (content: PageContent) => void;
     onSelect: (index: number) => void;
 }
-export declare const Form: React.MemoExoticComponent<({ content, onChange, activeBlockIndex, onSelect, schema, codeValidator, activeTab, onActiveTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, }: FormProps) => JSX.Element>;
+export declare const Form: React.MemoExoticComponent<({ content, onChange, activeBlockIndex, onSelect, schema }: FormProps) => JSX.Element>;

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

@@ -1,50 +1,24 @@
-import { __rest } from "tslib";
-import React, { Fragment, memo } from 'react';
-import { Tabs } from '@gravity-ui/uikit';
+import React, { memo } from 'react';
+import { Text } from '@gravity-ui/uikit';
 import { block, getBlockKey } from '../../../utils';
 import { BlockForm } from '../../components/BlockForm/BlockForm';
-import { CodeEditor } from '../../components/CodeEditor/CodeEditor';
-import { PagePropsForm } from '../../components/PagePropsForm/PagePropsForm';
 import useFormSpec from '../../hooks/useFormSpec';
-import { FormTab } from '../../types';
-import { useCode } from './hooks';
 import './Form.css';
 const b = block('editor-form');
-const tabsItems = Object.values(FormTab).map((tab) => ({
-    id: tab,
-    title: tab,
-}));
-export const Form = memo(({ content, onChange, activeBlockIndex, onSelect, schema, codeValidator, activeTab, onActiveTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, }) => {
-    const _a = content || {}, { blocks } = _a, page = __rest(_a, ["blocks"]);
-    const code = useCode({ activeTab, content, codeFullscreeModeOn });
+// TODO in https://github.com/gravity-ui/page-constructor/issues/884 this component will be extremely refactor
+export const Form = memo(({ content, onChange, activeBlockIndex, onSelect, schema }) => {
+    const { blocks } = content || {};
     const spec = useFormSpec(schema);
-    const { blocks: blocksSpec, page: pageSpec } = spec || {};
-    let form;
-    switch (activeTab) {
-        case FormTab.Page: {
-            form = (React.createElement(PagePropsForm, { spec: pageSpec, data: page, onChange: (data) => {
-                    return onChange(Object.assign(Object.assign({}, content), data));
-                } }));
-            break;
-        }
-        case FormTab.Blocks: {
-            form = (React.createElement(Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (React.createElement("div", { className: b('block-form'), key: getBlockKey(blockData, index) },
-                React.createElement(BlockForm, { spec: blocksSpec[blockData.type], data: blockData, active: activeBlockIndex === index, onChange: (data) => {
-                        onChange(Object.assign(Object.assign({}, content), { blocks: [
-                                ...blocks.slice(0, index),
-                                data,
-                                ...blocks.slice(index + 1),
-                            ] }));
-                    }, onSelect: () => onSelect(index) }))) : null)));
-            break;
-        }
-        case FormTab.Code: {
-            form = (React.createElement(CodeEditor, { code: code, onChange: onChange, validator: codeValidator, fullscreenModeOn: codeFullscreeModeOn, onFullscreenModeOnUpdate: onCodeFullscreeModeOnUpdate }));
-            break;
-        }
-    }
-    return (React.createElement("div", { className: b({ 'code-editor-active': activeTab === FormTab.Code }) },
-        React.createElement(Tabs, { activeTab: activeTab, className: b('tabs'), items: tabsItems, onSelectTab: onActiveTabUpdate }),
-        form));
+    const { blocks: blocksSpec } = spec || {};
+    return (React.createElement("div", { className: b() },
+        React.createElement(Text, { variant: "body-2" }, 'Blocks'),
+        blocks.map((blockData, index) => blocksSpec[blockData.type] ? (React.createElement("div", { className: b('block-form'), key: getBlockKey(blockData, index) },
+            React.createElement(BlockForm, { spec: blocksSpec[blockData.type], data: blockData, active: activeBlockIndex === index, onChange: (data) => {
+                    onChange(Object.assign(Object.assign({}, content), { blocks: [
+                            ...blocks.slice(0, index),
+                            data,
+                            ...blocks.slice(index + 1),
+                        ] }));
+                }, onSelect: () => onSelect(index) }))) : null)));
 });
 Form.displayName = 'Form';

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

@@ -12,7 +12,7 @@ export function useMainState({ content: intialContent, custom }) {
         activeBlockIndex: 0,
         errorBoundaryState: 0,
         content: addEditorProps(intialContent),
-        viewMode: ViewModeItem.Edititng,
+        viewMode: ViewModeItem.Desktop,
         theme: DEFAULT_THEME,
     });
     return useMemo(() => {

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

@@ -1,12 +1,12 @@
 import { Theme } from '../../../models';
-import { FormTab, ViewModeItem } from '../../types';
+import { EditModeItem, ViewModeItem } from '../../types';
 export declare function useSettingsState(): {
-    formTab: FormTab;
     viewMode: ViewModeItem;
+    editMode: EditModeItem;
     theme: Theme;
     codeFullscreeModeOn: boolean;
-    onFormTabUpdate: (newFormTab: FormTab) => void;
     onViewModeUpdate: (newViewMode: ViewModeItem) => void;
+    onEditModeUpdate: (newEditMode: EditModeItem) => void;
     onThemeUpdate: (newTheme: Theme) => void;
     onCodeFullscreeModeOnUpdate: (newCodeFullscreeModeOn: boolean) => void;
 };

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

@@ -1,17 +1,17 @@
 import { useMemo, useReducer } from 'react';
-import { UPDATE_CODE_FULLSCREEN_MODE_ON, UPDATE_FORM_TAB, UPDATE_THEME, UPDATE_VIEW_MODE, initialState, reducer, } from './reducer';
+import { UPDATE_CODE_FULLSCREEN_MODE_ON, UPDATE_EDIT_MODE, UPDATE_THEME, UPDATE_VIEW_MODE, initialState, reducer, } from './reducer';
 export function useSettingsState() {
-    const [{ formTab, viewMode, theme, codeFullscreeModeOn }, dispatch] = useReducer(reducer, initialState);
+    const [{ viewMode, editMode, theme, codeFullscreeModeOn }, dispatch] = useReducer(reducer, initialState);
     return useMemo(() => {
         return {
-            formTab,
             viewMode,
+            editMode,
             theme,
             codeFullscreeModeOn,
-            onFormTabUpdate: (newFormTab) => dispatch({ type: UPDATE_FORM_TAB, payload: newFormTab }),
             onViewModeUpdate: (newViewMode) => dispatch({ type: UPDATE_VIEW_MODE, payload: newViewMode }),
+            onEditModeUpdate: (newEditMode) => dispatch({ type: UPDATE_EDIT_MODE, payload: newEditMode }),
             onThemeUpdate: (newTheme) => dispatch({ type: UPDATE_THEME, payload: newTheme }),
             onCodeFullscreeModeOnUpdate: (newCodeFullscreeModeOn) => dispatch({ type: UPDATE_CODE_FULLSCREEN_MODE_ON, payload: newCodeFullscreeModeOn }),
         };
-    }, [formTab, viewMode, theme, codeFullscreeModeOn]);
+    }, [viewMode, theme, codeFullscreeModeOn, editMode]);
 }

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

@@ -1,19 +1,23 @@
 import { Theme } from '../../../models';
-import { FormTab, ViewModeItem } from '../../types';
-export declare const UPDATE_FORM_TAB = "UPDATE_FORM_TAB";
+import { EditModeItem, ViewModeItem } from '../../types';
 export declare const UPDATE_CODE_FULLSCREEN_MODE_ON = "UPDATE_CODE_FULLSCREEN_MODE_ON";
 export declare const UPDATE_VIEW_MODE = "UPDATE_VIEW_MODE";
+export declare const UPDATE_EDIT_MODE = "UPDATE_EDIT_MODE";
 export declare const UPDATE_THEME = "UPDATE_THEME";
 interface EditorSettingsState {
     theme: Theme;
     viewMode: ViewModeItem;
+    editMode: EditModeItem;
     codeFullscreeModeOn: boolean;
-    formTab: FormTab;
 }
 interface UpdateViewMode {
     type: typeof UPDATE_VIEW_MODE;
     payload: ViewModeItem;
 }
+interface UpdateEditMode {
+    type: typeof UPDATE_EDIT_MODE;
+    payload: EditModeItem;
+}
 interface UpdateTheme {
     type: typeof UPDATE_THEME;
     payload: Theme;
@@ -22,16 +26,12 @@ interface UpdateCodeFullscreenModeOn {
     type: typeof UPDATE_CODE_FULLSCREEN_MODE_ON;
     payload: boolean;
 }
-interface UpdateFormTab {
-    type: typeof UPDATE_FORM_TAB;
-    payload: FormTab;
-}
-export type EditorSettingsAction = UpdateViewMode | UpdateTheme | UpdateCodeFullscreenModeOn | UpdateFormTab;
+export type EditorSettingsAction = UpdateViewMode | UpdateEditMode | UpdateTheme | UpdateCodeFullscreenModeOn;
 export declare const reducer: (state: EditorSettingsState, action: EditorSettingsAction) => EditorSettingsState;
 export declare const initialState: {
     viewMode: ViewModeItem;
+    editMode: EditModeItem;
     theme: Theme;
     codeFullscreeModeOn: boolean;
-    formTab: FormTab;
 };
 export {};