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

package/build/cjs/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/cjs/editor/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViewModeItem = void 0;
+exports.FormTab = exports.ViewModeItem = void 0;
 var ViewModeItem;
 (function (ViewModeItem) {
     ViewModeItem["Edititng"] = "editing";
@@ -8,3 +8,9 @@ var ViewModeItem;
     ViewModeItem["Tablet"] = "tablet";
     ViewModeItem["Mobile"] = "mobile";
 })(ViewModeItem = exports.ViewModeItem || (exports.ViewModeItem = {}));
+var FormTab;
+(function (FormTab) {
+    FormTab["Blocks"] = "blocks";
+    FormTab["Page"] = "page";
+    FormTab["Code"] = "code";
+})(FormTab = exports.FormTab || (exports.FormTab = {}));

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

@@ -0,0 +1,6 @@
+export declare function parseCode(code: string): {
+    blocks: import("../../models").ConstructorBlock[];
+    menu?: import("../../models").Menu | undefined;
+    background?: import("../../models").ThemedMediaProps | undefined;
+    animated?: boolean | undefined;
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseCode = void 0;
+const tslib_1 = require("tslib");
+const js_yaml_1 = tslib_1.__importDefault(require("js-yaml"));
+function parseCode(code) {
+    var _a;
+    const pageContent = js_yaml_1.default.load(code);
+    return Object.assign(Object.assign({}, pageContent), { blocks: (_a = pageContent.blocks) === null || _a === void 0 ? void 0 : _a.filter(Boolean) });
+}
+exports.parseCode = parseCode;

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/cjs/models/constructor-items/common.d.ts

@@ -346,6 +346,7 @@ export interface AuthorProps extends QAProps {
     className?: string;
     authorContainerClassName?: string;
     type?: AuthorType;
+    theme?: ContentTheme;
 }
 export interface TitleProps {
     title?: TitleItemProps | string;

package/build/cjs/models/constructor-items/sub-blocks.d.ts

@@ -63,16 +63,27 @@ export interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsB
     createDOMElement?: boolean;
 }
 export interface QuoteProps extends Themable, CardBaseProps {
-    text: string;
+    text?: string;
+    yfmText?: string;
     image: ThemedImage;
     logo: ImageProps;
     color?: string;
+    /**
+     * @deprecated use property button instead
+     */
     url?: string;
+    /**
+     * @deprecated use property button instead
+     */
     urlTitle?: string;
     author?: AuthorItem;
+    /**
+     * @deprecated use property button instead
+     */
     buttonText?: string;
     theme?: TextTheme;
     quoteType?: QuoteType;
+    button?: ButtonProps;
 }
 export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
     url?: string;

package/build/cjs/schema/constants.d.ts

@@ -125,6 +125,10 @@ export declare const cardSchemas: {
                 type: string;
                 contentType: string;
             };
+            yfmText: {
+                type: string;
+                contentType: string;
+            };
             image: {
                 oneOf: (({
                     oneOf: ({

package/build/cjs/sub-blocks/Quote/Quote.css

@@ -76,6 +76,17 @@ unpredictable css rules order in build */
 .pc-quote__content_quote-type_english-double .pc-quote__text::after {
   content: "”";
 }
+.pc-quote__content .yfm {
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+}
+.pc-quote__content .yfm > * {
+  display: inline;
+}
+.pc-quote__content .yfm:after {
+  position: relative;
+  left: -5px;
+}
 .pc-quote__image {
   width: 100%;
   height: 100%;
@@ -87,24 +98,6 @@ unpredictable css rules order in build */
   align-items: flex-end;
   margin-top: 20px;
 }
-.pc-quote__author_theme_dark, .pc-quote_theme_dark {
-  color: var(--g-color-text-light-primary);
-}
-.pc-quote__author_theme_dark h1,
-.pc-quote__author_theme_dark h2,
-.pc-quote__author_theme_dark h3,
-.pc-quote__author_theme_dark h4,
-.pc-quote__author_theme_dark h5,
-.pc-quote__author_theme_dark h6,
-.pc-quote__author_theme_dark .yfm, .pc-quote_theme_dark h1,
-.pc-quote_theme_dark h2,
-.pc-quote_theme_dark h3,
-.pc-quote_theme_dark h4,
-.pc-quote_theme_dark h5,
-.pc-quote_theme_dark h6,
-.pc-quote_theme_dark .yfm {
-  color: var(--g-color-text-light-primary);
-}
 .pc-quote__author {
   max-width: calc(60% - 20px);
   margin-right: 20px;

package/build/cjs/sub-blocks/Quote/Quote.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const utils_1 = require("../../components/Media/Image/utils");
 const theme_1 = require("../../context/theme");
@@ -11,23 +10,25 @@ const models_1 = require("../../models");
 const utils_2 = require("../../utils");
 const b = (0, utils_2.block)('quote');
 const Quote = (props) => {
-    const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, urlTitle, buttonText, quoteType = models_1.QuoteType.Chevron, } = props;
+    const { theme: textTheme = 'light', color, image, border = 'shadow', text, yfmText, logo, author, url, urlTitle, buttonText, quoteType = models_1.QuoteType.Chevron, button, } = props;
     const theme = (0, theme_1.useTheme)();
     const imageThemed = (0, utils_2.getThemedValue)(image, theme);
     const imageData = (0, utils_1.getMediaImage)(imageThemed);
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.QuoteButton, url);
     const handleButtonClick = (0, react_1.useCallback)(() => handleAnalytics(), [handleAnalytics]);
     const renderFooter = Boolean(author || url) && (react_1.default.createElement("div", { className: b('author-wrapper') },
-        author && (react_1.default.createElement(components_1.Author, { className: b('author', { theme: textTheme }), author: author, type: models_1.AuthorType.Line })),
-        url && buttonText && (react_1.default.createElement(uikit_1.Button, { view: "outlined", size: "xl", href: url, className: b('link-button', { theme: textTheme }), onClick: handleButtonClick, title: urlTitle }, buttonText))));
+        author && (react_1.default.createElement(components_1.Author, { className: b('author', { theme: textTheme }), author: author, type: models_1.AuthorType.Line, theme: textTheme })),
+        url && buttonText && !button && (react_1.default.createElement(components_1.Button, { theme: "outlined", size: "xl", url: url, className: b('link-button', { theme: textTheme }), onClick: handleButtonClick, urlTitle: urlTitle, text: buttonText })),
+        button && react_1.default.createElement(components_1.Button, Object.assign({ size: "xl" }, button))));
     const logoProps = (0, utils_1.getMediaImage)(logo);
     return (react_1.default.createElement("div", { className: b({ theme: textTheme, border }), style: color ? { backgroundColor: color } : {} },
         react_1.default.createElement("div", { key: text, className: b('content-wrapper') },
             react_1.default.createElement("div", null,
                 react_1.default.createElement(components_1.Image, Object.assign({ className: b('logo') }, logoProps)),
                 react_1.default.createElement("div", { className: b('content', { 'quote-type': quoteType }) },
-                    react_1.default.createElement("span", { className: b('text') },
-                        react_1.default.createElement(components_1.HTML, null, text)))),
+                    text && (react_1.default.createElement("span", { className: b('text') },
+                        react_1.default.createElement(components_1.HTML, null, text))),
+                    yfmText && (react_1.default.createElement(components_1.YFMWrapper, { className: b('text'), content: yfmText, modifiers: { constructor: true } })))),
             renderFooter),
         react_1.default.createElement("div", { className: b('image-wrapper') },
             react_1.default.createElement(components_1.Image, Object.assign({}, imageData, { className: b('image') })))));

package/build/cjs/sub-blocks/Quote/schema.d.ts

@@ -7,6 +7,10 @@ export declare const Quote: {
                 type: string;
                 contentType: string;
             };
+            yfmText: {
+                type: string;
+                contentType: string;
+            };
             image: {
                 oneOf: (({
                     oneOf: ({

package/build/cjs/sub-blocks/Quote/schema.js

@@ -6,10 +6,13 @@ const common_1 = require("../../schema/validators/common");
 exports.Quote = {
     quote: {
         additionalProperties: false,
-        required: ['text', 'image', 'logo'],
+        required: ['image', 'logo'],
         properties: Object.assign(Object.assign({}, common_1.BaseProps), { text: {
                 type: 'string',
                 contentType: 'text',
+            }, yfmText: {
+                type: 'string',
+                contentType: 'text',
             }, image: (0, common_1.withTheme)(schema_1.ImageProps), logo: schema_1.ImageProps, color: {
                 type: 'string',
             }, url: {

package/build/cjs/text-transform/config.js

@@ -130,10 +130,16 @@ exports.config = {
             transformer: common_1.yfmTransformer,
         },
     ],
-    [models_1.SubBlockType.Quote]: {
-        fields: ['text'],
-        transformer: common_1.typografTransformer,
-    },
+    [models_1.SubBlockType.Quote]: [
+        {
+            fields: ['text'],
+            transformer: common_1.typografTransformer,
+        },
+        {
+            fields: ['yfmText'],
+            transformer: common_1.yfmTransformer,
+        },
+    ],
     [models_1.BlockType.ExtendedFeaturesBlock]: [
         ...exports.blockHeaderTransformer,
         {

package/build/esm/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/esm/components/Author/Author.js

@@ -6,7 +6,7 @@ import { Image } from '../index';
 import './Author.css';
 const b = block('author');
 const Author = (props) => {
-    const { author, className, authorContainerClassName, type = AuthorType.Column, qa } = props;
+    const { author, className, authorContainerClassName, type = AuthorType.Column, qa, theme, } = props;
     const { firstName, secondName, description, avatar } = author;
     const name = secondName ? `${firstName} ${secondName}` : firstName;
     const isAvatarJSX = React.isValidElement(avatar);
@@ -14,7 +14,7 @@ const Author = (props) => {
     if (!isAvatarJSX && avatar) {
         avatarProps = getMediaImage(avatar);
     }
-    return (React.createElement("div", { className: b({ type }, className), "data-qa": qa },
+    return (React.createElement("div", { className: b({ type, theme }, className), "data-qa": qa },
         avatar && (React.createElement("div", { className: b('avatar', authorContainerClassName) }, isAvatarJSX ? avatar : React.createElement(Image, Object.assign({}, avatarProps)))),
         React.createElement("div", { className: b('label') },
             React.createElement("div", { className: b('name') }, name),

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;