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

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

package/build/esm/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/esm/editor/utils/code.js

@@ -0,0 +1,6 @@
+import yaml from 'js-yaml';
+export function parseCode(code) {
+    var _a;
+    const pageContent = yaml.load(code);
+    return Object.assign(Object.assign({}, pageContent), { blocks: (_a = pageContent.blocks) === null || _a === void 0 ? void 0 : _a.filter(Boolean) });
+}

package/build/esm/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/esm/editor/utils/validation.js

@@ -0,0 +1,51 @@
+import Ajv from 'ajv';
+import ajvKeywords from 'ajv-keywords';
+import yaml from 'js-yaml';
+import SourceMap from 'js-yaml-source-map';
+import isArray from 'lodash/isArray';
+const SUCCESS_MESSAGE = 'Valid';
+export var CodeEditorMessageStatus;
+(function (CodeEditorMessageStatus) {
+    CodeEditorMessageStatus["SUCCESS"] = "success";
+    CodeEditorMessageStatus["WARNING"] = "warning";
+    CodeEditorMessageStatus["ERROR"] = "error";
+})(CodeEditorMessageStatus || (CodeEditorMessageStatus = {}));
+export function createValidator(schema) {
+    const ajv = new Ajv({ $data: true, allErrors: true, schemas: [schema], strict: false });
+    // TODO: select is deprecated, replace with discriminator:
+    // https://github.com/ajv-validator/ajv-keywords#selectselectcasesselectdefault
+    ajvKeywords(ajv, 'select');
+    return ajv.compile(schema);
+}
+export function validate(content, validator) {
+    let result;
+    if (!content) {
+        return { status: CodeEditorMessageStatus.SUCCESS, text: SUCCESS_MESSAGE };
+    }
+    try {
+        const jsYamlMap = new SourceMap();
+        const data = yaml.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 (isArray(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;
+}

package/build/esm/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/esm/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/esm/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/esm/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/esm/sub-blocks/Quote/Quote.js

@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
-import { Button } from '@gravity-ui/uikit';
-import { Author, HTML, Image } from '../../components';
+import { Author, Button, HTML, Image, YFMWrapper } from '../../components';
 import { getMediaImage } from '../../components/Media/Image/utils';
 import { useTheme } from '../../context/theme';
 import { useAnalytics } from '../../hooks';
@@ -9,23 +8,25 @@ import { block, getThemedValue } from '../../utils';
 import './Quote.css';
 const b = block('quote');
 const Quote = (props) => {
-    const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, urlTitle, buttonText, quoteType = QuoteType.Chevron, } = props;
+    const { theme: textTheme = 'light', color, image, border = 'shadow', text, yfmText, logo, author, url, urlTitle, buttonText, quoteType = QuoteType.Chevron, button, } = props;
     const theme = useTheme();
     const imageThemed = getThemedValue(image, theme);
     const imageData = getMediaImage(imageThemed);
     const handleAnalytics = useAnalytics(DefaultEventNames.QuoteButton, url);
     const handleButtonClick = useCallback(() => handleAnalytics(), [handleAnalytics]);
     const renderFooter = Boolean(author || url) && (React.createElement("div", { className: b('author-wrapper') },
-        author && (React.createElement(Author, { className: b('author', { theme: textTheme }), author: author, type: AuthorType.Line })),
-        url && buttonText && (React.createElement(Button, { view: "outlined", size: "xl", href: url, className: b('link-button', { theme: textTheme }), onClick: handleButtonClick, title: urlTitle }, buttonText))));
+        author && (React.createElement(Author, { className: b('author', { theme: textTheme }), author: author, type: AuthorType.Line, theme: textTheme })),
+        url && buttonText && !button && (React.createElement(Button, { theme: "outlined", size: "xl", url: url, className: b('link-button', { theme: textTheme }), onClick: handleButtonClick, urlTitle: urlTitle, text: buttonText })),
+        button && React.createElement(Button, Object.assign({ size: "xl" }, button))));
     const logoProps = getMediaImage(logo);
     return (React.createElement("div", { className: b({ theme: textTheme, border }), style: color ? { backgroundColor: color } : {} },
         React.createElement("div", { key: text, className: b('content-wrapper') },
             React.createElement("div", null,
                 React.createElement(Image, Object.assign({ className: b('logo') }, logoProps)),
                 React.createElement("div", { className: b('content', { 'quote-type': quoteType }) },
-                    React.createElement("span", { className: b('text') },
-                        React.createElement(HTML, null, text)))),
+                    text && (React.createElement("span", { className: b('text') },
+                        React.createElement(HTML, null, text))),
+                    yfmText && (React.createElement(YFMWrapper, { className: b('text'), content: yfmText, modifiers: { constructor: true } })))),
             renderFooter),
         React.createElement("div", { className: b('image-wrapper') },
             React.createElement(Image, Object.assign({}, imageData, { className: b('image') })))));

package/build/esm/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/esm/sub-blocks/Quote/schema.js

@@ -3,10 +3,13 @@ import { BaseProps, ThemeProps, authorItem, quoteTypes, withTheme, } from '../..
 export const Quote = {
     quote: {
         additionalProperties: false,
-        required: ['text', 'image', 'logo'],
+        required: ['image', 'logo'],
         properties: Object.assign(Object.assign({}, BaseProps), { text: {
                 type: 'string',
                 contentType: 'text',
+            }, yfmText: {
+                type: 'string',
+                contentType: 'text',
             }, image: withTheme(ImageProps), logo: ImageProps, color: {
                 type: 'string',
             }, url: {

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

@@ -127,10 +127,16 @@ export const config = {
             transformer: yfmTransformer,
         },
     ],
-    [SubBlockType.Quote]: {
-        fields: ['text'],
-        transformer: typografTransformer,
-    },
+    [SubBlockType.Quote]: [
+        {
+            fields: ['text'],
+            transformer: typografTransformer,
+        },
+        {
+            fields: ['yfmText'],
+            transformer: yfmTransformer,
+        },
+    ],
     [BlockType.ExtendedFeaturesBlock]: [
         ...blockHeaderTransformer,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.40.6",
+  "version": "4.41.1-alpha.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -86,8 +86,10 @@
     "@gravity-ui/i18n": "^1.0.0",
     "@react-spring/web": "^9.7.3",
     "ajv": "^8.12.0",
+    "ajv-keywords": "^5.1.0",
     "final-form": "^4.20.9",
     "github-buttons": "2.23.0",
+    "js-yaml-source-map": "^0.2.2",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.38.0",
     "react-final-form": "^6.5.9",
@@ -164,6 +166,7 @@
     "js-yaml": "^4.1.0",
     "lint-staged": "^11.2.6",
     "markdown-loader": "^6.0.0",
+    "monaco-editor-webpack-plugin": "^7.1.0",
     "move-file-cli": "^3.0.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.16",

package/server/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/server/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/server/text-transform/config.js

@@ -140,10 +140,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/styles/styles.css

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@import '@gravity-ui/uikit/styles/fonts.css';
 @import '~@gravity-ui/uikit/styles/styles.css';
 @import '~@doc-tools/transform/dist/css/yfm.css';
 /* use this for style redefinitions to awoid problems with

package/styles/styles.scss

@@ -1,3 +1,4 @@
+@import '@gravity-ui/uikit/styles/fonts.css';
 @import '~@gravity-ui/uikit/styles/styles.css';
 @import './mixins.scss';
 @import './variables.scss';