@gravity-ui/page-constructor 4.40.6 → 4.41.0

package/build/cjs/editor/utils/validation.d.ts

@@ -0,0 +1,13 @@
+import { ValidateFunction } from 'ajv';
+import { JSONSchema4 } from 'json-schema';
+export interface CodeEditorMessageProps {
+    text: string;
+    status: CodeEditorMessageStatus;
+}
+export declare enum CodeEditorMessageStatus {
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error"
+}
+export declare function createValidator(schema: JSONSchema4): ValidateFunction<unknown>;
+export declare function validate(content: string, validator: ValidateFunction): CodeEditorMessageProps;

package/build/cjs/editor/utils/validation.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validate = exports.createValidator = exports.CodeEditorMessageStatus = void 0;
+const tslib_1 = require("tslib");
+const ajv_1 = tslib_1.__importDefault(require("ajv"));
+const ajv_keywords_1 = tslib_1.__importDefault(require("ajv-keywords"));
+const js_yaml_1 = tslib_1.__importDefault(require("js-yaml"));
+const js_yaml_source_map_1 = tslib_1.__importDefault(require("js-yaml-source-map"));
+const isArray_1 = tslib_1.__importDefault(require("lodash/isArray"));
+const SUCCESS_MESSAGE = 'Valid';
+var CodeEditorMessageStatus;
+(function (CodeEditorMessageStatus) {
+    CodeEditorMessageStatus["SUCCESS"] = "success";
+    CodeEditorMessageStatus["WARNING"] = "warning";
+    CodeEditorMessageStatus["ERROR"] = "error";
+})(CodeEditorMessageStatus = exports.CodeEditorMessageStatus || (exports.CodeEditorMessageStatus = {}));
+function createValidator(schema) {
+    const ajv = new ajv_1.default({ $data: true, allErrors: true, schemas: [schema], strict: false });
+    // TODO: select is deprecated, replace with discriminator:
+    // https://github.com/ajv-validator/ajv-keywords#selectselectcasesselectdefault
+    (0, ajv_keywords_1.default)(ajv, 'select');
+    return ajv.compile(schema);
+}
+exports.createValidator = createValidator;
+function validate(content, validator) {
+    let result;
+    if (!content) {
+        return { status: CodeEditorMessageStatus.SUCCESS, text: SUCCESS_MESSAGE };
+    }
+    try {
+        const jsYamlMap = new js_yaml_source_map_1.default();
+        const data = js_yaml_1.default.load(content, { listener: jsYamlMap.listen() });
+        validator(data);
+        if (validator.errors) {
+            const messages = validator.errors.map(({ instancePath, schemaPath, message, params }) => {
+                const pointer = jsYamlMap.lookup(instancePath.split('/').filter(Boolean));
+                const stringParams = Object.entries(params).map(([key, value]) => {
+                    if ((0, isArray_1.default)(value)) {
+                        return `${key}: ${value.join(' | ')}`;
+                    }
+                    return `${key}: ${value}`;
+                });
+                const ref = pointer ? `${pointer.line}: ` : '';
+                return `${ref}${instancePath || schemaPath}: ${message}\n${stringParams.join('\n')}`;
+            });
+            result = { status: CodeEditorMessageStatus.WARNING, text: messages.join('\n\n') };
+        }
+        else {
+            result = { status: CodeEditorMessageStatus.SUCCESS, text: SUCCESS_MESSAGE };
+        }
+    }
+    catch ({ message }) {
+        result = { status: CodeEditorMessageStatus.ERROR, text: message };
+    }
+    return result;
+}
+exports.validate = validate;

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

@@ -0,0 +1,13 @@
+import { PageContent } from '../../../models';
+import { CodeEditorMessageProps } from '../../utils/validation';
+import './CodeEditor.css';
+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/esm/editor/components/CodeEditor/CodeEditor.js

@@ -0,0 +1,27 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { ChevronsCollapseUpRight, ChevronsExpandUpRight } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import yaml from 'js-yaml';
+import MonacoEditor from 'react-monaco-editor';
+import { block } from '../../../utils';
+import { parseCode } from '../../utils/code';
+import { options } from './constants';
+import './CodeEditor.css';
+const b = block('code-editor');
+export const CodeEditor = ({ content, onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, }) => {
+    const value = useMemo(() => yaml.dump(content), [content]);
+    const [message, setMessage] = useState(() => validator(value));
+    const onChangeWithValidation = useCallback((code) => {
+        const validationResult = validator(code);
+        setMessage(validationResult);
+        onChange(parseCode(code));
+    }, [onChange, validator]);
+    return (React.createElement("div", { className: b({ fullscreen: fullscreenModeOn }) },
+        React.createElement("div", { className: b('header') },
+            React.createElement(Button, { view: "flat-secondary", onClick: () => onFullscreenModeOnUpdate(!fullscreenModeOn) },
+                React.createElement(Icon, { data: fullscreenModeOn ? ChevronsCollapseUpRight : ChevronsExpandUpRight, size: 16 }))),
+        React.createElement("div", { className: b('code') },
+            React.createElement(MonacoEditor, { key: String(fullscreenModeOn), value: value, language: "yaml", options: options, onChange: onChangeWithValidation, theme: "vs" })),
+        React.createElement("div", { className: b('footer') }, message && (React.createElement("div", { className: b('message-container') },
+            React.createElement("div", { className: b('message', { status: message.status }) }, message.text))))));
+};

package/build/esm/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/esm/editor/components/CodeEditor/constants.js

@@ -0,0 +1,17 @@
+export const 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/esm/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/esm/editor/containers/Editor/Editor.js

@@ -1,23 +1,27 @@
 import { __rest } from "tslib";
 import React, { useEffect, useMemo } from 'react';
 import { PageConstructor, PageConstructorProvider } from '../../../containers/PageConstructor';
+import { generateDefaultSchema } from '../../../schema';
 import AddBlock from '../../components/AddBlock/AddBlock';
 import EditBlock from '../../components/EditBlock/EditBlock';
 import { ErrorBoundary } from '../../components/ErrorBoundary/ErrorBoundary';
 import Layout from '../../components/Layout/Layout';
 import { NotFoundBlock } from '../../components/NotFoundBlock/NotFoundBlock';
 import { EditorContext } from '../../context';
-import useFormSpec from '../../hooks/useFormSpec';
-import { useEditorState } from '../../store';
+import { useCodeValidator } from '../../hooks/useCodeValidator';
+import { useMainState } from '../../store/main';
+import { useSettingsState } from '../../store/settings';
 import { ViewModeItem } from '../../types';
 import { addCustomDecorator, checkIsMobile, getBlockId } from '../../utils';
 import { Form } from '../Form/Form';
 export const Editor = (_a) => {
     var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings } = _a, rest = __rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings"]);
-    const { content, activeBlockIndex, errorBoundaryState, viewMode, theme, onContentUpdate, onViewModeUpdate, onAdd, onSelect, injectEditBlockProps, onThemeUpdate, } = useEditorState(rest);
-    const formSpecs = useFormSpec(customSchema);
+    const { content, activeBlockIndex, errorBoundaryState, onContentUpdate, onAdd, onSelect, injectEditBlockProps, } = useMainState(rest);
+    const { viewMode, theme, onViewModeUpdate, onThemeUpdate, formTab, onFormTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, } = useSettingsState();
     const isEditingMode = 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([
@@ -54,7 +58,7 @@ export const Editor = (_a) => {
     return (React.createElement(EditorContext.Provider, { value: context },
         React.createElement(Layout, { mode: viewMode, onModeChange: onViewModeUpdate, theme: theme, onThemeChange: onThemeUpdate },
             isEditingMode && (React.createElement(Layout.Left, null,
-                React.createElement(Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, onSelect: onSelect, spec: formSpecs }))),
+                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(Layout.Right, null,
                 React.createElement(ErrorBoundary, { key: errorBoundaryState },
                     React.createElement(PageConstructorProvider, Object.assign({}, providerProps, { theme: theme }),

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

@@ -1,12 +1,19 @@
 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';
 import './Form.css';
 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/esm/editor/containers/Form/Form.js

@@ -3,23 +3,19 @@ import React, { Fragment, memo } from 'react';
 import { Tabs } 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 { YamlEditor } from '../../components/YamlEditor/YamlEditor';
+import useFormSpec from '../../hooks/useFormSpec';
+import { FormTab } from '../../types';
 import './Form.css';
-var FormTab;
-(function (FormTab) {
-    FormTab["Blocks"] = "blocks";
-    FormTab["Page"] = "page";
-    FormTab["Yaml"] = "yaml";
-})(FormTab || (FormTab = {}));
 const b = block('editor-form');
 const tabsItems = Object.values(FormTab).map((tab) => ({
     id: tab,
     title: tab,
 }));
-export const Form = memo(({ content, onChange, activeBlockIndex, onSelect, spec }) => {
-    const [activeTab, setActiveTab] = React.useState(FormTab.Blocks);
+export const Form = memo(({ content, onChange, activeBlockIndex, onSelect, schema, codeValidator, activeTab, onActiveTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, }) => {
     const _a = content || {}, { blocks } = _a, page = __rest(_a, ["blocks"]);
+    const spec = useFormSpec(schema);
     const { blocks: blocksSpec, page: pageSpec } = spec || {};
     let form;
     switch (activeTab) {
@@ -40,13 +36,13 @@ export const Form = memo(({ content, onChange, activeBlockIndex, onSelect, spec
                     }, onSelect: () => onSelect(index) }))) : null)));
             break;
         }
-        case FormTab.Yaml: {
-            form = React.createElement(YamlEditor, { content: content });
+        case FormTab.Code: {
+            form = (React.createElement(CodeEditor, { content: content, onChange: onChange, validator: codeValidator, fullscreenModeOn: codeFullscreeModeOn, onFullscreenModeOnUpdate: onCodeFullscreeModeOnUpdate }));
             break;
         }
     }
-    return (React.createElement("div", { className: b({ 'yaml-editor-enabled': activeTab === FormTab.Yaml }) },
-        React.createElement(Tabs, { activeTab: activeTab, className: b('tabs'), items: tabsItems, onSelectTab: setActiveTab }),
+    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));
 });
 Form.displayName = 'Form';

package/build/esm/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/esm/editor/hooks/useCodeValidator.js

@@ -0,0 +1,6 @@
+import { useCallback, useMemo } from 'react';
+import { createValidator, validate } from '../utils/validation';
+export function useCodeValidator(schema) {
+    const validator = useMemo(() => createValidator(schema), [schema]);
+    return useCallback((code) => validate(code, validator), [validator]);
+}

package/build/esm/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/esm/editor/hooks/useFormSpec.js

@@ -1,9 +1,5 @@
 import { useMemo } from 'react';
-import { generateDefaultSchema } from '../../schema';
 import formSpecParser from '../dynamic-forms-custom/parser';
-export default function useFormSpec(customSchema) {
-    return useMemo(() => {
-        const schema = generateDefaultSchema(customSchema);
-        return formSpecParser.parse(schema);
-    }, [customSchema]);
+export default function useFormSpec(schema) {
+    return useMemo(() => formSpecParser.parse(schema), [schema]);
 }

package/build/esm/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/esm/editor/store/{index.js → main/index.js}

@@ -1,14 +1,14 @@
 import { __rest } from "tslib";
 import { useMemo, useReducer } from 'react';
-import { DEFAULT_THEME } from '../../components/constants';
-import { HeaderBlockTypes } from '../../models';
-import { getCustomTypes, getHeaderBlock } from '../../utils';
-import { EditBlockControls } from '../components/EditBlock/EditBlock';
-import { ViewModeItem } from '../types';
-import { ADD_BLOCK, COPY_BLOCK, DELETE_BLOCK, ORDER_BLOCK, SELECT_BLOCK, UPDATE_CONTENT, UPDATE_THEME, UPDATE_VIEW_MODE, reducer, } from './reducer';
+import { DEFAULT_THEME } from '../../../components/constants';
+import { HeaderBlockTypes } from '../../../models';
+import { getCustomTypes, getHeaderBlock } from '../../../utils';
+import { EditBlockControls } from '../../components/EditBlock/EditBlock';
+import { ViewModeItem } from '../../types';
+import { ADD_BLOCK, COPY_BLOCK, DELETE_BLOCK, ORDER_BLOCK, SELECT_BLOCK, UPDATE_CONTENT, reducer, } from './reducer';
 import { addEditorProps } from './utils';
-export function useEditorState({ content: intialContent, custom }) {
-    const [{ activeBlockIndex, content, errorBoundaryState, viewMode, theme }, dispatch] = useReducer(reducer, {
+export function useMainState({ content: intialContent, custom }) {
+    const [{ activeBlockIndex, content, errorBoundaryState }, dispatch] = useReducer(reducer, {
         activeBlockIndex: 0,
         errorBoundaryState: 0,
         content: addEditorProps(intialContent),
@@ -35,8 +35,6 @@ export function useEditorState({ content: intialContent, custom }) {
         };
         const onSelect = (index) => dispatch({ type: SELECT_BLOCK, payload: index });
         const onContentUpdate = (newContent) => dispatch({ type: UPDATE_CONTENT, payload: newContent });
-        const onViewModeUpdate = (newViewMode) => dispatch({ type: UPDATE_VIEW_MODE, payload: newViewMode });
-        const onThemeUpdate = (newTheme) => dispatch({ type: UPDATE_THEME, payload: newTheme });
         const injectEditBlockProps = (_a) => {
             var { type, index: relativeIndex = 0, children } = _a, rest = __rest(_a, ["type", "index", "children"]);
             const orderedBlocksStartIndex = contentHasHeader ? 1 : 0;
@@ -70,14 +68,10 @@ export 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]);
 }

package/build/esm/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/esm/editor/store/{reducer.js → main/reducer.js}

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

package/build/esm/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/esm/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/esm/editor/store/settings/index.js

@@ -0,0 +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';
+export function useSettingsState() {
+    const [{ formTab, viewMode, theme, codeFullscreeModeOn }, dispatch] = useReducer(reducer, initialState);
+    return useMemo(() => {
+        return {
+            formTab,
+            viewMode,
+            theme,
+            codeFullscreeModeOn,
+            onFormTabUpdate: (newFormTab) => dispatch({ type: UPDATE_FORM_TAB, payload: newFormTab }),
+            onViewModeUpdate: (newViewMode) => dispatch({ type: UPDATE_VIEW_MODE, payload: newViewMode }),
+            onThemeUpdate: (newTheme) => dispatch({ type: UPDATE_THEME, payload: newTheme }),
+            onCodeFullscreeModeOnUpdate: (newCodeFullscreeModeOn) => dispatch({ type: UPDATE_CODE_FULLSCREEN_MODE_ON, payload: newCodeFullscreeModeOn }),
+        };
+    }, [formTab, viewMode, theme, codeFullscreeModeOn]);
+}

package/build/esm/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/esm/editor/store/settings/reducer.js

@@ -0,0 +1,28 @@
+import { DEFAULT_THEME } from '../../../components/constants';
+import { FormTab, ViewModeItem } from '../../types';
+// actions
+export const UPDATE_FORM_TAB = 'UPDATE_FORM_TAB';
+export const UPDATE_CODE_FULLSCREEN_MODE_ON = 'UPDATE_CODE_FULLSCREEN_MODE_ON';
+export const UPDATE_VIEW_MODE = 'UPDATE_VIEW_MODE';
+export const UPDATE_THEME = 'UPDATE_THEME';
+// reducer
+export const reducer = (state, action) => {
+    switch (action.type) {
+        case UPDATE_VIEW_MODE:
+            return Object.assign(Object.assign({}, state), { viewMode: action.payload });
+        case UPDATE_THEME:
+            return Object.assign(Object.assign({}, state), { theme: action.payload });
+        case UPDATE_CODE_FULLSCREEN_MODE_ON:
+            return Object.assign(Object.assign({}, state), { codeFullscreeModeOn: action.payload });
+        case UPDATE_FORM_TAB:
+            return Object.assign(Object.assign({}, state), { formTab: action.payload });
+        default:
+            return state;
+    }
+};
+export const initialState = {
+    viewMode: ViewModeItem.Edititng,
+    theme: DEFAULT_THEME,
+    codeFullscreeModeOn: false,
+    formTab: FormTab.Blocks,
+};

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

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

@@ -32,4 +32,9 @@ export declare enum ViewModeItem {
     Tablet = "tablet",
     Mobile = "mobile"
 }
+export declare enum FormTab {
+    Blocks = "blocks",
+    Page = "page",
+    Code = "code"
+}
 export {};

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

@@ -5,3 +5,9 @@ export var ViewModeItem;
     ViewModeItem["Tablet"] = "tablet";
     ViewModeItem["Mobile"] = "mobile";
 })(ViewModeItem || (ViewModeItem = {}));
+export var FormTab;
+(function (FormTab) {
+    FormTab["Blocks"] = "blocks";
+    FormTab["Page"] = "page";
+    FormTab["Code"] = "code";
+})(FormTab || (FormTab = {}));