@gravity-ui/page-constructor 4.42.0 → 4.42.2

package/build/cjs/editor/containers/Form/hooks.d.ts

@@ -0,0 +1,8 @@
+import { FormProps } from './Form';
+/**
+ * Transorms PageConstructor content in JSON to YAML on code editor mode switching
+ *
+ * @param {Object} props - props parent from form
+ * @returns {string} - updated code
+ */
+export declare function useCode({ activeTab, content, codeFullscreeModeOn, }: Pick<FormProps, 'activeTab' | 'content' | 'codeFullscreeModeOn'>): string;

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCode = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const js_yaml_1 = tslib_1.__importDefault(require("js-yaml"));
+const usePreviousValue_1 = tslib_1.__importDefault(require("../../hooks/usePreviousValue"));
+const types_1 = require("../../types");
+/**
+ * Transorms PageConstructor content in JSON to YAML on code editor mode switching
+ *
+ * @param {Object} props - props parent from form
+ * @returns {string} - updated code
+ */
+function useCode({ activeTab, content, codeFullscreeModeOn, }) {
+    var _a;
+    const [code, setCode] = (0, react_1.useState)('');
+    const prevTab = (0, usePreviousValue_1.default)(activeTab);
+    const prevContentLength = (0, usePreviousValue_1.default)((_a = content.blocks) === null || _a === void 0 ? void 0 : _a.length);
+    const prevCodeFullscreeModeOn = (0, usePreviousValue_1.default)(codeFullscreeModeOn);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const switchedToCodeEditing = activeTab !== prevTab && activeTab === types_1.FormTab.Code;
+        const blocksCountChanged = prevContentLength !== ((_a = content.blocks) === null || _a === void 0 ? void 0 : _a.length);
+        const codeModeSwitched = codeFullscreeModeOn !== prevCodeFullscreeModeOn;
+        if (blocksCountChanged || switchedToCodeEditing || codeModeSwitched) {
+            setCode(js_yaml_1.default.dump(content, { lineWidth: -1 }));
+        }
+    }, [
+        activeTab,
+        prevTab,
+        content,
+        prevContentLength,
+        codeFullscreeModeOn,
+        prevCodeFullscreeModeOn,
+    ]);
+    return code;
+}
+exports.useCode = useCode;

package/build/cjs/editor/context.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import { PageConstructorProps, PageConstructorProviderProps } from '../containers/PageConstructor';
+import { Theme } from '../models/common';
 import { EditorProps } from './types';
 export interface EditorContextType {
     constructorProps?: PageConstructorProps;
     providerProps?: PageConstructorProviderProps;
     deviceEmulationSettings?: EditorProps['deviceEmulationSettings'];
+    theme?: Theme;
 }
 export declare const EditorContext: React.Context<Partial<EditorContextType>>;

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

@@ -1,5 +1,6 @@
 import { PageConstructorProps, PageConstructorProviderProps } from '../../containers/PageConstructor';
 import { BlockDecorationProps, PageContent } from '../../models';
+import { Theme } from '../../models/common';
 import { SchemaCustomConfig } from '../../schema';
 import { EditBlockActions } from '../components/EditBlock/EditBlock';
 export type EditorBlockId = number | string;
@@ -17,6 +18,7 @@ export interface EditorProps extends Required<Pick<PageConstructorProps, 'conten
     transformContent?: ContentTransformer;
     customSchema?: SchemaCustomConfig;
     deviceEmulationSettings?: DeviceEmulationSettings;
+    theme?: Theme;
 }
 export interface EditBlockEditorProps {
     isActive?: boolean;

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/schema/validators/common.d.ts

@@ -11,7 +11,7 @@ export declare const playIconThemes: string[];
 export declare const videoControlsTypes: MediaVideoControlsType[];
 export declare const fileLinkTypes: string[];
 export declare const dividerEnum: {
-    enum: (string | number)[];
+    enum: string[];
 };
 export declare const sizeNumber: {
     type: string;
@@ -835,6 +835,18 @@ export declare const BlockBaseProps: {
     context: {
         type: string;
     };
+    indent: {
+        type: string;
+        additionalProperties: boolean;
+        properties: {
+            top: {
+                enum: string[];
+            };
+            bottom: {
+                enum: string[];
+            };
+        };
+    };
     type: {};
     when: {
         type: string;

package/build/cjs/schema/validators/common.js

@@ -16,7 +16,7 @@ exports.playIconTypes = ['default', 'text'];
 exports.playIconThemes = ['blue', 'grey'];
 exports.videoControlsTypes = [models_1.MediaVideoControlsType.Default, models_1.MediaVideoControlsType.Custom];
 exports.fileLinkTypes = ['vertical', 'horizontal'];
-exports.dividerEnum = { enum: [0, 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'] };
+exports.dividerEnum = { enum: ['0', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'] };
 exports.sizeNumber = { type: 'number', maximum: 12, minimum: 1 };
 exports.contentThemes = ['default', 'dark', 'light'];
 exports.quoteTypes = Object.values(models_1.QuoteType);
@@ -457,6 +457,13 @@ exports.BlockBaseProps = Object.assign(Object.assign({}, exports.BaseProps), { a
         type: 'boolean',
     }, context: {
         type: 'string',
+    }, indent: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            top: exports.dividerEnum,
+            bottom: exports.dividerEnum,
+        },
     } });
 exports.TitleProps = {
     type: 'object',

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

@@ -6,7 +6,7 @@ export declare const Divider: {
                 type: string;
             };
             size: {
-                enum: (string | number)[];
+                enum: string[];
             };
             type: {};
             when: {

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/blocks/CardLayout/schema.d.ts

@@ -78,6 +78,18 @@ export declare const CardLayoutProps: {
         context: {
             type: string;
         };
+        indent: {
+            type: string;
+            additionalProperties: boolean;
+            properties: {
+                top: {
+                    enum: string[];
+                };
+                bottom: {
+                    enum: string[];
+                };
+            };
+        };
         type: {};
         when: {
             type: string;
@@ -165,6 +177,18 @@ export declare const CardLayoutBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

package/build/esm/blocks/Companies/schema.d.ts

@@ -7,6 +7,10 @@ export declare const CompaniesBlock: {
                 type: string;
                 contentType: string;
             };
+            description: {
+                type: string;
+                contentType: string;
+            };
             images: {
                 oneOf: (({
                     type: string;

package/build/esm/blocks/Companies/schema.js

@@ -6,6 +6,9 @@ export const CompaniesBlock = {
         properties: Object.assign(Object.assign(Object.assign({}, BaseProps), AnimatableProps), { title: {
                 type: 'string',
                 contentType: 'text',
+            }, description: {
+                type: 'string',
+                contentType: 'text',
             }, images: withTheme({
                 type: 'object',
                 required: ['desktop', 'tablet', 'mobile'],

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

@@ -242,6 +242,18 @@ export declare const ContentLayoutBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

package/build/esm/blocks/ExtendedFeatures/schema.d.ts

@@ -243,6 +243,18 @@ export declare const ExtendedFeaturesBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

package/build/esm/blocks/FilterBlock/schema.d.ts

@@ -134,6 +134,18 @@ export declare const FilterProps: {
         context: {
             type: string;
         };
+        indent: {
+            type: string;
+            additionalProperties: boolean;
+            properties: {
+                top: {
+                    enum: string[];
+                };
+                bottom: {
+                    enum: string[];
+                };
+            };
+        };
         type: {};
         when: {
             type: string;
@@ -250,6 +262,18 @@ export declare const FilterBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

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

@@ -193,6 +193,18 @@ export declare const FormBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

package/build/esm/blocks/Header/schema.d.ts

@@ -1318,6 +1318,18 @@ export declare const HeaderBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

package/build/esm/blocks/HeaderSlider/schema.d.ts

@@ -587,6 +587,18 @@ export declare const HeaderSliderBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

package/build/esm/blocks/Icons/schema.d.ts

@@ -6,11 +6,20 @@ export declare const IconsProps: {
             type: string;
             contentType: string;
         };
+        description: {
+            type: string;
+            contentType: string;
+        };
         size: {
             type: string;
             enum: string[];
             default: string;
         };
+        colSizes: {
+            type: string;
+            additionalProperties: boolean;
+            properties: {};
+        };
         items: {
             type: string;
             items: {
@@ -142,6 +151,18 @@ export declare const IconsProps: {
         context: {
             type: string;
         };
+        indent: {
+            type: string;
+            additionalProperties: boolean;
+            properties: {
+                top: {
+                    enum: string[];
+                };
+                bottom: {
+                    enum: string[];
+                };
+            };
+        };
         type: {};
         when: {
             type: string;
@@ -157,11 +178,20 @@ export declare const IconsBlock: {
                 type: string;
                 contentType: string;
             };
+            description: {
+                type: string;
+                contentType: string;
+            };
             size: {
                 type: string;
                 enum: string[];
                 default: string;
             };
+            colSizes: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {};
+            };
             items: {
                 type: string;
                 items: {
@@ -293,6 +323,18 @@ export declare const IconsBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

package/build/esm/blocks/Icons/schema.js

@@ -1,4 +1,4 @@
-import { AnimatableProps, BlockBaseProps } from '../../schema/validators/common';
+import { AnimatableProps, BlockBaseProps, containerSizesObject, } from '../../schema/validators/common';
 import { AnalyticsEventSchema } from '../../schema/validators/event';
 export const IconsProps = {
     additionalProperties: false,
@@ -6,11 +6,14 @@ export const IconsProps = {
     properties: Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), { title: {
             type: 'string',
             contentType: 'text',
+        }, description: {
+            type: 'string',
+            contentType: 'text',
         }, size: {
             type: 'string',
             enum: ['s', 'm', 'l'],
             default: 's',
-        }, items: {
+        }, colSizes: containerSizesObject, items: {
             type: 'array',
             items: {
                 type: 'object',

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

@@ -473,6 +473,18 @@ export declare const MapBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;