@gravity-ui/page-constructor 5.12.0 → 5.14.0

package/build/cjs/blocks/ContentLayout/schema.d.ts

@@ -173,6 +173,10 @@ export declare const ContentLayoutBlock: {
                             };
                         };
                     };
+                    controlPosition: {
+                        type: string;
+                        enum: string[];
+                    };
                 };
             };
             fileContent: {

package/build/cjs/blocks/Form/schema.d.ts

@@ -164,6 +164,10 @@ export declare const FormBlock: {
                             };
                         };
                     };
+                    controlPosition: {
+                        type: string;
+                        enum: string[];
+                    };
                 }>;
             };
             direction: {

package/build/cjs/blocks/Info/schema.d.ts

@@ -135,6 +135,10 @@ export declare const InfoBlock: {
                             };
                         };
                     };
+                    controlPosition: {
+                        type: string;
+                        enum: string[];
+                    };
                 }>;
             };
             rightContent: {
@@ -222,6 +226,10 @@ export declare const InfoBlock: {
                             };
                         };
                     };
+                    controlPosition: {
+                        type: string;
+                        enum: string[];
+                    };
                 }>;
             };
             type: {};

package/build/cjs/blocks/Map/schema.d.ts

@@ -368,6 +368,10 @@ export declare const MapBlock: {
                     };
                 };
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
             animated: {
                 type: string;
             };

package/build/cjs/blocks/Media/schema.d.ts

@@ -538,6 +538,10 @@ export declare const MediaBlockBaseProps: {
             };
         };
     };
+    controlPosition: {
+        type: string;
+        enum: string[];
+    };
     animated: {
         type: string;
     };
@@ -1139,6 +1143,10 @@ export declare const MediaBlock: {
                     };
                 };
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
             animated: {
                 type: string;
             };

package/build/cjs/blocks/Questions/schema.d.ts

@@ -88,6 +88,10 @@ export declare const QuestionsBlock: {
                     };
                 };
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
             anchor: {
                 type: string;
                 additionalProperties: boolean;

package/build/cjs/blocks/Tabs/schema.d.ts

@@ -522,6 +522,10 @@ export declare const tabsItem: {
                 };
             };
         } | undefined;
+        controlPosition?: {
+            type: string;
+            enum: string[];
+        } | undefined;
     };
 };
 export declare const TabsBlock: {

package/build/cjs/components/IconWrapper/IconWrapper.css

@@ -22,6 +22,8 @@ unpredictable css rules order in build */
   width: 22px;
   margin: 1px 12px 1px 0px;
 }
-.pc-icon-wrapper_content_left.pc-icon-wrapper_content_left {
-  flex: 1 0 0;
+.pc-icon-wrapper__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
 }

package/build/cjs/components/IconWrapper/IconWrapper.d.ts

@@ -1,4 +1,4 @@
 import { PropsWithChildren } from 'react';
-import { IconWrapperProps } from '../../models';
-declare const IconWrapper: (props: PropsWithChildren<IconWrapperProps>) => JSX.Element;
+import type { ClassNameProps, IconWrapperProps } from '../../models';
+declare const IconWrapper: (props: PropsWithChildren<IconWrapperProps> & ClassNameProps) => JSX.Element;
 export default IconWrapper;

package/build/cjs/components/IconWrapper/IconWrapper.js

@@ -7,14 +7,14 @@ const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
 const utils_2 = require("../Media/Image/utils");
 const b = (0, utils_1.block)('icon-wrapper');
 const IconWrapper = (props) => {
-    const { icon, children } = props;
+    const { icon, children, className } = props;
     if (!icon) {
         return react_1.default.createElement(react_1.Fragment, null, children);
     }
     const iconProps = (0, utils_2.getMediaImage)(icon.value);
     const iconPosition = icon === null || icon === void 0 ? void 0 : icon.position;
-    return (react_1.default.createElement("div", { className: b({ ['icon-position']: iconPosition }) },
+    return (react_1.default.createElement("div", { className: b({ ['icon-position']: iconPosition }, className) },
         iconProps && (react_1.default.createElement(Image_1.default, Object.assign({}, iconProps, { containerClassName: b('icon-container'), className: b('icon', { ['icon-position']: iconPosition }) }))),
-        react_1.default.createElement("div", { className: b({ ['content']: iconPosition }) }, children)));
+        react_1.default.createElement("div", { className: b('content') }, children)));
 };
 exports.default = IconWrapper;

package/build/cjs/constructor-items.d.ts

@@ -24,7 +24,7 @@ export declare const subBlockMap: {
     "price-detailed": (props: import("./models").PriceDetailedProps) => JSX.Element;
     "media-card": ({ border, analyticsEvents, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
     "banner-card": (props: import("./models").BannerCardProps) => JSX.Element;
-    "layout-item": ({ content: { links, buttons, ...content }, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition, }: import("./models").LayoutItemProps) => JSX.Element;
+    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition, }: import("./models").LayoutItemProps) => JSX.Element;
     "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
     "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;
     content: (props: import("./sub-blocks/Content/Content").ContentProps) => JSX.Element;

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 {};