@gravity-ui/page-constructor 4.40.6 → 4.41.1-alpha.0

package/build/cjs/components/Author/Author.css

@@ -5,7 +5,6 @@ unpredictable css rules order in build */
   line-height: var(--g-text-body-3-line-height);
   display: flex;
   flex-direction: column;
-  color: var(--g-color-text-secondary);
 }
 .pc-author__avatar {
   width: 80px;
@@ -25,11 +24,11 @@ unpredictable css rules order in build */
 .pc-author__name {
   font-size: var(--g-text-body-3-font-size);
   line-height: var(--g-text-body-3-line-height);
-  color: var(--g-color-text-primary);
 }
 .pc-author__description {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
+  color: var(--g-color-text-secondary);
   padding-top: 4px;
 }
 .pc-author__label:not(:first-child) {
@@ -53,4 +52,7 @@ unpredictable css rules order in build */
 }
 .pc-author_type_line .pc-author__label:not(:first-child) {
   margin-left: 16px;
+}
+.pc-author_theme_dark .pc-author__description {
+  color: var(--g-color-text-light-secondary);
 }

package/build/cjs/components/Author/Author.js

@@ -8,7 +8,7 @@ const utils_2 = require("../Media/Image/utils");
 const index_1 = require("../index");
 const b = (0, utils_1.block)('author');
 const Author = (props) => {
-    const { author, className, authorContainerClassName, type = models_1.AuthorType.Column, qa } = props;
+    const { author, className, authorContainerClassName, type = models_1.AuthorType.Column, qa, theme, } = props;
     const { firstName, secondName, description, avatar } = author;
     const name = secondName ? `${firstName} ${secondName}` : firstName;
     const isAvatarJSX = react_1.default.isValidElement(avatar);
@@ -16,7 +16,7 @@ const Author = (props) => {
     if (!isAvatarJSX && avatar) {
         avatarProps = (0, utils_2.getMediaImage)(avatar);
     }
-    return (react_1.default.createElement("div", { className: b({ type }, className), "data-qa": qa },
+    return (react_1.default.createElement("div", { className: b({ type, theme }, className), "data-qa": qa },
         avatar && (react_1.default.createElement("div", { className: b('avatar', authorContainerClassName) }, isAvatarJSX ? avatar : react_1.default.createElement(index_1.Image, Object.assign({}, avatarProps)))),
         react_1.default.createElement("div", { className: b('label') },
             react_1.default.createElement("div", { className: b('name') }, name),

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

@@ -0,0 +1,56 @@
+.pc-code-editor {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.pc-code-editor_fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: 1000;
+  background: var(--g-color-base-background);
+}
+.pc-code-editor_fullscreen .pc-code-editor__header {
+  margin-top: var(--pc-editor-header-height);
+}
+.pc-code-editor__code {
+  width: 100%;
+  height: 100%;
+}
+.pc-code-editor__header, .pc-code-editor__footer {
+  padding: 0 20px;
+  background: var(--g-color-base-background);
+}
+.pc-code-editor__header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: var(--pc-editor-code-header-height);
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.pc-code-editor__footer {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  min-height: var(--pc-editor-code-header-height);
+  border-top: 1px solid var(--g-color-line-generic);
+}
+.pc-code-editor__message-container {
+  max-height: 140px;
+  padding: 12px;
+  overflow-y: auto;
+  font-family: Menlo, Monaco, "Courier New", monospace;
+  white-space: pre-wrap;
+}
+.pc-code-editor__message_status_success {
+  color: var(--g-color-text-positive);
+}
+.pc-code-editor__message_status_warning {
+  color: var(--g-color-text-warning-heavy);
+}
+.pc-code-editor__message_status_error {
+  color: var(--g-color-text-danger);
+}

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

@@ -0,0 +1,12 @@
+import { PageContent } from '../../../models';
+import { CodeEditorMessageProps } from '../../utils/validation';
+interface CodeEditorProps {
+    content: PageContent;
+    fullscreenModeOn: boolean;
+    validator: (code: string) => CodeEditorMessageProps;
+    onFullscreenModeOnUpdate: (fullscreenModeOn: boolean) => void;
+    onChange: (content: PageContent) => void;
+    message?: CodeEditorMessageProps;
+}
+export declare const CodeEditor: ({ content, onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, }: CodeEditorProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeEditor = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const js_yaml_1 = tslib_1.__importDefault(require("js-yaml"));
+const react_monaco_editor_1 = tslib_1.__importDefault(require("react-monaco-editor"));
+const utils_1 = require("../../../utils");
+const code_1 = require("../../utils/code");
+const constants_1 = require("./constants");
+const b = (0, utils_1.block)('code-editor');
+const CodeEditor = ({ content, onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, }) => {
+    const value = (0, react_1.useMemo)(() => js_yaml_1.default.dump(content), [content]);
+    const [message, setMessage] = (0, react_1.useState)(() => validator(value));
+    const onChangeWithValidation = (0, react_1.useCallback)((code) => {
+        const validationResult = validator(code);
+        setMessage(validationResult);
+        onChange((0, code_1.parseCode)(code));
+    }, [onChange, validator]);
+    return (react_1.default.createElement("div", { className: b({ fullscreen: fullscreenModeOn }) },
+        react_1.default.createElement("div", { className: b('header') },
+            react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", onClick: () => onFullscreenModeOnUpdate(!fullscreenModeOn) },
+                react_1.default.createElement(uikit_1.Icon, { data: fullscreenModeOn ? icons_1.ChevronsCollapseUpRight : icons_1.ChevronsExpandUpRight, size: 16 }))),
+        react_1.default.createElement("div", { className: b('code') },
+            react_1.default.createElement(react_monaco_editor_1.default, { key: String(fullscreenModeOn), value: value, language: "yaml", options: constants_1.options, onChange: onChangeWithValidation, theme: "vs" })),
+        react_1.default.createElement("div", { className: b('footer') }, message && (react_1.default.createElement("div", { className: b('message-container') },
+            react_1.default.createElement("div", { className: b('message', { status: message.status }) }, message.text))))));
+};
+exports.CodeEditor = CodeEditor;

package/build/cjs/editor/components/CodeEditor/constants.d.ts

@@ -0,0 +1,2 @@
+import { monaco } from 'react-monaco-editor';
+export declare const options: monaco.editor.IStandaloneEditorConstructionOptions;

package/build/cjs/editor/components/CodeEditor/constants.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.options = void 0;
+exports.options = {
+    wordWrap: 'on',
+    renderLineHighlight: 'none',
+    selectOnLineNumbers: true,
+    renderWhitespace: 'all',
+    automaticLayout: true,
+    minimap: {
+        enabled: false,
+    },
+    overviewRulerLanes: 0,
+    hideCursorInOverviewRuler: true,
+    scrollbar: {
+        vertical: 'hidden',
+    },
+    overviewRulerBorder: false,
+    readOnly: false,
+};

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

@@ -2,11 +2,12 @@
 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-left-column-width: calc(400px + var(--pc-editor-divider-width));
 }
 
 .pc-editor-layout__left, .pc-editor-layout__right {

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

@@ -4,23 +4,27 @@ exports.Editor = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const PageConstructor_1 = require("../../../containers/PageConstructor");
+const schema_1 = require("../../../schema");
 const AddBlock_1 = tslib_1.__importDefault(require("../../components/AddBlock/AddBlock"));
 const EditBlock_1 = tslib_1.__importDefault(require("../../components/EditBlock/EditBlock"));
 const ErrorBoundary_1 = require("../../components/ErrorBoundary/ErrorBoundary");
 const Layout_1 = tslib_1.__importDefault(require("../../components/Layout/Layout"));
 const NotFoundBlock_1 = require("../../components/NotFoundBlock/NotFoundBlock");
 const context_1 = require("../../context");
-const useFormSpec_1 = tslib_1.__importDefault(require("../../hooks/useFormSpec"));
-const store_1 = require("../../store");
+const useCodeValidator_1 = require("../../hooks/useCodeValidator");
+const main_1 = require("../../store/main");
+const settings_1 = require("../../store/settings");
 const types_1 = require("../../types");
 const utils_1 = require("../../utils");
 const Form_1 = require("../Form/Form");
 const Editor = (_a) => {
     var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings } = _a, rest = tslib_1.__rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings"]);
-    const { content, activeBlockIndex, errorBoundaryState, viewMode, theme, onContentUpdate, onViewModeUpdate, onAdd, onSelect, injectEditBlockProps, onThemeUpdate, } = (0, store_1.useEditorState)(rest);
-    const formSpecs = (0, useFormSpec_1.default)(customSchema);
+    const { content, activeBlockIndex, errorBoundaryState, onContentUpdate, onAdd, onSelect, injectEditBlockProps, } = (0, main_1.useMainState)(rest);
+    const { viewMode, theme, onViewModeUpdate, onThemeUpdate, formTab, onFormTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, } = (0, settings_1.useSettingsState)();
     const isEditingMode = 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)([
@@ -57,7 +61,7 @@ const Editor = (_a) => {
     return (react_1.default.createElement(context_1.EditorContext.Provider, { value: context },
         react_1.default.createElement(Layout_1.default, { mode: viewMode, onModeChange: onViewModeUpdate, theme: theme, 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, onSelect: onSelect, spec: formSpecs }))),
+                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(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: theme }),

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

@@ -89,6 +89,9 @@ unpredictable css rules order in build */
 .pc-editor-form__block-form {
   margin-bottom: 16px;
 }
-.pc-editor-form_yaml-editor-enabled {
-  height: 100%;
+.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/cjs/editor/containers/Form/Form.d.ts

@@ -1,11 +1,18 @@
 import React from 'react';
+import { JSONSchema4 } from 'json-schema';
 import { PageContent } from '../../../models';
-import { FormSpecs } from '../../dynamic-forms-custom/parser/types';
+import { FormTab } from '../../types';
+import { CodeEditorMessageProps } from '../../utils/validation';
 export interface FormProps {
     content: PageContent;
+    schema: JSONSchema4;
     activeBlockIndex: number;
-    spec: FormSpecs;
+    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, spec }: FormProps) => JSX.Element>;
+export declare const Form: React.MemoExoticComponent<({ content, onChange, activeBlockIndex, onSelect, schema, codeValidator, activeTab, onActiveTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, }: FormProps) => JSX.Element>;

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

@@ -6,32 +6,28 @@ const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
 const BlockForm_1 = require("../../components/BlockForm/BlockForm");
+const CodeEditor_1 = require("../../components/CodeEditor/CodeEditor");
 const PagePropsForm_1 = require("../../components/PagePropsForm/PagePropsForm");
-const YamlEditor_1 = require("../../components/YamlEditor/YamlEditor");
-var FormTab;
-(function (FormTab) {
-    FormTab["Blocks"] = "blocks";
-    FormTab["Page"] = "page";
-    FormTab["Yaml"] = "yaml";
-})(FormTab || (FormTab = {}));
+const useFormSpec_1 = tslib_1.__importDefault(require("../../hooks/useFormSpec"));
+const types_1 = require("../../types");
 const b = (0, utils_1.block)('editor-form');
-const tabsItems = Object.values(FormTab).map((tab) => ({
+const tabsItems = Object.values(types_1.FormTab).map((tab) => ({
     id: tab,
     title: tab,
 }));
-exports.Form = (0, react_1.memo)(({ content, onChange, activeBlockIndex, onSelect, spec }) => {
-    const [activeTab, setActiveTab] = react_1.default.useState(FormTab.Blocks);
+exports.Form = (0, react_1.memo)(({ content, onChange, activeBlockIndex, onSelect, schema, codeValidator, activeTab, onActiveTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, }) => {
     const _a = content || {}, { blocks } = _a, page = tslib_1.__rest(_a, ["blocks"]);
+    const spec = (0, useFormSpec_1.default)(schema);
     const { blocks: blocksSpec, page: pageSpec } = spec || {};
     let form;
     switch (activeTab) {
-        case FormTab.Page: {
+        case types_1.FormTab.Page: {
             form = (react_1.default.createElement(PagePropsForm_1.PagePropsForm, { spec: pageSpec, data: page, onChange: (data) => {
                     return onChange(Object.assign(Object.assign({}, content), data));
                 } }));
             break;
         }
-        case FormTab.Blocks: {
+        case types_1.FormTab.Blocks: {
             form = (react_1.default.createElement(react_1.Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (react_1.default.createElement("div", { className: b('block-form'), key: (0, utils_1.getBlockKey)(blockData, index) },
                 react_1.default.createElement(BlockForm_1.BlockForm, { spec: blocksSpec[blockData.type], data: blockData, active: activeBlockIndex === index, onChange: (data) => {
                         onChange(Object.assign(Object.assign({}, content), { blocks: [
@@ -42,13 +38,13 @@ exports.Form = (0, react_1.memo)(({ content, onChange, activeBlockIndex, onSelec
                     }, onSelect: () => onSelect(index) }))) : null)));
             break;
         }
-        case FormTab.Yaml: {
-            form = react_1.default.createElement(YamlEditor_1.YamlEditor, { content: content });
+        case types_1.FormTab.Code: {
+            form = (react_1.default.createElement(CodeEditor_1.CodeEditor, { content: content, onChange: onChange, validator: codeValidator, fullscreenModeOn: codeFullscreeModeOn, onFullscreenModeOnUpdate: onCodeFullscreeModeOnUpdate }));
             break;
         }
     }
-    return (react_1.default.createElement("div", { className: b({ 'yaml-editor-enabled': activeTab === FormTab.Yaml }) },
-        react_1.default.createElement(uikit_1.Tabs, { activeTab: activeTab, className: b('tabs'), items: tabsItems, onSelectTab: setActiveTab }),
+    return (react_1.default.createElement("div", { className: b({ 'code-editor-active': activeTab === types_1.FormTab.Code }) },
+        react_1.default.createElement(uikit_1.Tabs, { activeTab: activeTab, className: b('tabs'), items: tabsItems, onSelectTab: onActiveTabUpdate }),
         form));
 });
 exports.Form.displayName = 'Form';

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

@@ -0,0 +1,4 @@
+import { JSONSchema4 } from 'json-schema';
+import { CodeEditorMessageProps } from '../utils/validation';
+export type CodeValidator = (code: string) => CodeEditorMessageProps;
+export declare function useCodeValidator(schema: JSONSchema4): CodeValidator;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCodeValidator = void 0;
+const react_1 = require("react");
+const validation_1 = require("../utils/validation");
+function useCodeValidator(schema) {
+    const validator = (0, react_1.useMemo)(() => (0, validation_1.createValidator)(schema), [schema]);
+    return (0, react_1.useCallback)((code) => (0, validation_1.validate)(code, validator), [validator]);
+}
+exports.useCodeValidator = useCodeValidator;

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

@@ -1,2 +1,2 @@
-import { SchemaCustomConfig } from '../../schema';
-export default function useFormSpec(customSchema?: SchemaCustomConfig): import("../dynamic-forms-custom/parser/types").FormSpecs;
+import { JSONSchema4 } from 'json-schema';
+export default function useFormSpec(schema: JSONSchema4): import("../dynamic-forms-custom/parser/types").FormSpecs;

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

@@ -2,12 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = require("react");
-const schema_1 = require("../../schema");
 const parser_1 = tslib_1.__importDefault(require("../dynamic-forms-custom/parser"));
-function useFormSpec(customSchema) {
-    return (0, react_1.useMemo)(() => {
-        const schema = (0, schema_1.generateDefaultSchema)(customSchema);
-        return parser_1.default.parse(schema);
-    }, [customSchema]);
+function useFormSpec(schema) {
+    return (0, react_1.useMemo)(() => parser_1.default.parse(schema), [schema]);
 }
 exports.default = useFormSpec;

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

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

package/build/cjs/editor/store/{index.js → main/index.js}

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEditorState = void 0;
+exports.useMainState = void 0;
 const tslib_1 = require("tslib");
 const react_1 = require("react");
-const constants_1 = require("../../components/constants");
-const models_1 = require("../../models");
-const utils_1 = require("../../utils");
-const EditBlock_1 = require("../components/EditBlock/EditBlock");
-const types_1 = require("../types");
+const constants_1 = require("../../../components/constants");
+const models_1 = require("../../../models");
+const utils_1 = require("../../../utils");
+const EditBlock_1 = require("../../components/EditBlock/EditBlock");
+const types_1 = require("../../types");
 const reducer_1 = require("./reducer");
 const utils_2 = require("./utils");
-function useEditorState({ content: intialContent, custom }) {
-    const [{ activeBlockIndex, content, errorBoundaryState, viewMode, theme }, dispatch] = (0, react_1.useReducer)(reducer_1.reducer, {
+function useMainState({ content: intialContent, custom }) {
+    const [{ activeBlockIndex, content, errorBoundaryState }, dispatch] = (0, react_1.useReducer)(reducer_1.reducer, {
         activeBlockIndex: 0,
         errorBoundaryState: 0,
         content: (0, utils_2.addEditorProps)(intialContent),
@@ -38,8 +38,6 @@ function useEditorState({ content: intialContent, custom }) {
         };
         const onSelect = (index) => dispatch({ type: reducer_1.SELECT_BLOCK, payload: index });
         const onContentUpdate = (newContent) => dispatch({ type: reducer_1.UPDATE_CONTENT, payload: newContent });
-        const onViewModeUpdate = (newViewMode) => dispatch({ type: reducer_1.UPDATE_VIEW_MODE, payload: newViewMode });
-        const onThemeUpdate = (newTheme) => dispatch({ type: reducer_1.UPDATE_THEME, payload: newTheme });
         const injectEditBlockProps = (_a) => {
             var { type, index: relativeIndex = 0, children } = _a, rest = tslib_1.__rest(_a, ["type", "index", "children"]);
             const orderedBlocksStartIndex = contentHasHeader ? 1 : 0;
@@ -73,15 +71,11 @@ function useEditorState({ content: intialContent, custom }) {
             activeBlockIndex,
             content,
             errorBoundaryState,
-            viewMode,
-            theme,
             injectEditBlockProps,
             onAdd,
             onSelect,
             onContentUpdate,
-            onViewModeUpdate,
-            onThemeUpdate,
         };
-    }, [content, activeBlockIndex, errorBoundaryState, custom, viewMode, theme]);
+    }, [content, activeBlockIndex, errorBoundaryState, custom]);
 }
-exports.useEditorState = useEditorState;
+exports.useMainState = useMainState;

package/build/cjs/editor/store/{reducer.d.ts → main/reducer.d.ts}

@@ -1,7 +1,7 @@
-import { ConstructorBlock, PageContent, Theme } from '../../models';
-import { ViewModeItem } from '../types';
+import { ConstructorBlock, PageContent, Theme } from '../../../models';
+import { ViewModeItem } from '../../types';
 export type EditorBlockId = number | string;
-interface EditorState {
+interface MainState {
     content: PageContent;
     activeBlockIndex: number;
     errorBoundaryState: number;
@@ -23,8 +23,6 @@ export declare const ADD_BLOCK = "ADD_BLOCK";
 export declare const SET_REGION = "SET_REGION";
 export declare const ORDER_BLOCK = "ORDER_BLOCK";
 export declare const UPDATE_CONTENT = "UPDATE_CONTENT";
-export declare const UPDATE_VIEW_MODE = "UPDATE_VIEW_MODE";
-export declare const UPDATE_THEME = "UPDATE_THEME";
 interface SelectBlock {
     type: typeof SELECT_BLOCK;
     payload: number;
@@ -49,14 +47,6 @@ interface UpdateContent {
     type: typeof UPDATE_CONTENT;
     payload: PageContent;
 }
-interface UpdateViewMode {
-    type: typeof UPDATE_VIEW_MODE;
-    payload: ViewModeItem;
-}
-interface UpdateTheme {
-    type: typeof UPDATE_THEME;
-    payload: Theme;
-}
-export type EditorAction = SelectBlock | DeleteBlock | CopyBlock | AddBlock | OrderBlock | UpdateContent | UpdateViewMode | UpdateTheme;
-export declare const reducer: (state: EditorState, action: EditorAction) => EditorState;
+export type EditorAction = SelectBlock | DeleteBlock | CopyBlock | AddBlock | OrderBlock | UpdateContent;
+export declare const reducer: (state: MainState, action: EditorAction) => MainState;
 export {};

package/build/cjs/editor/store/{reducer.js → main/reducer.js}

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

package/build/cjs/editor/store/{utils.d.ts → main/utils.d.ts}

@@ -1,4 +1,4 @@
-import { ConstructorBlock, PageContent } from '../../models';
+import { ConstructorBlock, PageContent } from '../../../models';
 import { EditorBlockId } from './reducer';
 export declare const changeBlocksOrder: (array: ConstructorBlock[], oldIndex: number, newIndex: number) => ConstructorBlock[];
 export declare const duplicateBlock: (array: ConstructorBlock[], index: number) => ConstructorBlock[];
@@ -7,7 +7,7 @@ export declare const addBlock: (array: ConstructorBlock[], block: ConstructorBlo
 export declare const addEditorProps: (content: PageContent) => {
     animated: boolean;
     blocks: ConstructorBlock[];
-    menu?: import("../../models").Menu | undefined;
-    background?: import("../../models").ThemedMediaProps | undefined;
+    menu?: import("../../../models").Menu | undefined;
+    background?: import("../../../models").ThemedMediaProps | undefined;
 };
 export declare const getErrorBoundaryState: (prevState: number) => number;

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

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

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSettingsState = void 0;
+const react_1 = require("react");
+const reducer_1 = require("./reducer");
+function useSettingsState() {
+    const [{ formTab, viewMode, theme, codeFullscreeModeOn }, dispatch] = (0, react_1.useReducer)(reducer_1.reducer, reducer_1.initialState);
+    return (0, react_1.useMemo)(() => {
+        return {
+            formTab,
+            viewMode,
+            theme,
+            codeFullscreeModeOn,
+            onFormTabUpdate: (newFormTab) => dispatch({ type: reducer_1.UPDATE_FORM_TAB, payload: newFormTab }),
+            onViewModeUpdate: (newViewMode) => dispatch({ type: reducer_1.UPDATE_VIEW_MODE, payload: newViewMode }),
+            onThemeUpdate: (newTheme) => dispatch({ type: reducer_1.UPDATE_THEME, payload: newTheme }),
+            onCodeFullscreeModeOnUpdate: (newCodeFullscreeModeOn) => dispatch({ type: reducer_1.UPDATE_CODE_FULLSCREEN_MODE_ON, payload: newCodeFullscreeModeOn }),
+        };
+    }, [formTab, viewMode, theme, codeFullscreeModeOn]);
+}
+exports.useSettingsState = useSettingsState;

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

@@ -0,0 +1,37 @@
+import { Theme } from '../../../models';
+import { FormTab, ViewModeItem } from '../../types';
+export declare const UPDATE_FORM_TAB = "UPDATE_FORM_TAB";
+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_THEME = "UPDATE_THEME";
+interface EditorSettingsState {
+    theme: Theme;
+    viewMode: ViewModeItem;
+    codeFullscreeModeOn: boolean;
+    formTab: FormTab;
+}
+interface UpdateViewMode {
+    type: typeof UPDATE_VIEW_MODE;
+    payload: ViewModeItem;
+}
+interface UpdateTheme {
+    type: typeof UPDATE_THEME;
+    payload: Theme;
+}
+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 declare const reducer: (state: EditorSettingsState, action: EditorSettingsAction) => EditorSettingsState;
+export declare const initialState: {
+    viewMode: ViewModeItem;
+    theme: Theme;
+    codeFullscreeModeOn: boolean;
+    formTab: FormTab;
+};
+export {};

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initialState = exports.reducer = exports.UPDATE_THEME = exports.UPDATE_VIEW_MODE = exports.UPDATE_CODE_FULLSCREEN_MODE_ON = exports.UPDATE_FORM_TAB = void 0;
+const constants_1 = require("../../../components/constants");
+const types_1 = require("../../types");
+// actions
+exports.UPDATE_FORM_TAB = 'UPDATE_FORM_TAB';
+exports.UPDATE_CODE_FULLSCREEN_MODE_ON = 'UPDATE_CODE_FULLSCREEN_MODE_ON';
+exports.UPDATE_VIEW_MODE = 'UPDATE_VIEW_MODE';
+exports.UPDATE_THEME = 'UPDATE_THEME';
+// reducer
+const reducer = (state, action) => {
+    switch (action.type) {
+        case exports.UPDATE_VIEW_MODE:
+            return Object.assign(Object.assign({}, state), { viewMode: action.payload });
+        case exports.UPDATE_THEME:
+            return Object.assign(Object.assign({}, state), { theme: action.payload });
+        case exports.UPDATE_CODE_FULLSCREEN_MODE_ON:
+            return Object.assign(Object.assign({}, state), { codeFullscreeModeOn: action.payload });
+        case exports.UPDATE_FORM_TAB:
+            return Object.assign(Object.assign({}, state), { formTab: action.payload });
+        default:
+            return state;
+    }
+};
+exports.reducer = reducer;
+exports.initialState = {
+    viewMode: types_1.ViewModeItem.Edititng,
+    theme: constants_1.DEFAULT_THEME,
+    codeFullscreeModeOn: false,
+    formTab: types_1.FormTab.Blocks,
+};

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

@@ -1,8 +1,9 @@
 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-left-column-width: calc(400px + var(--pc-editor-divider-width));
 }