@gravity-ui/page-constructor 5.29.1 → 5.30.0-alpha.0

package/README.md

@@ -165,6 +165,12 @@ To use mixins and constructor style variables when creating custom blocks, add i
 @import '~@gravity-ui/page-constructor/styles/styles.scss';
 ```
 
+To use default font, add import in your file:
+
+```css
+@import '@gravity-ui/uikit/styles/fonts.css';
+```
+
 ### Loadable blocks
 
 It's sometimes necessary that a block renders itself based on data to be loaded. In this case, loadable blocks are used.

package/build/cjs/blocks/Media/Media.js

@@ -8,9 +8,10 @@ const MediaBase_1 = tslib_1.__importDefault(require("../../components/MediaBase/
 const theme_1 = require("../../context/theme");
 const utils_1 = require("../../utils");
 const borderSelector_1 = require("../../utils/borderSelector");
+const microdata_1 = require("../../utils/microdata");
 const b = (0, utils_1.block)('media-block');
 const MediaBlock = (props) => {
-    const { media, border, disableShadow } = props;
+    const { media, border, disableShadow, title, description } = props;
     const borderSelected = (0, borderSelector_1.getMediaBorder)({
         border,
         disableShadow,
@@ -18,9 +19,13 @@ const MediaBlock = (props) => {
     const [play, setPlay] = (0, react_1.useState)(false);
     const theme = (0, theme_1.useTheme)();
     const mediaThemed = (0, utils_1.getThemedValue)(media, theme);
+    const mediaWithMicrodata = (0, microdata_1.mergeVideoMicrodata)(mediaThemed, {
+        name: title,
+        description,
+    });
     return (react_1.default.createElement(MediaBase_1.default, Object.assign({}, props, { onScroll: () => setPlay(true) }),
         react_1.default.createElement(MediaBase_1.default.Card, null,
-            react_1.default.createElement(Media_1.default, Object.assign({ imageClassName: b('image') }, mediaThemed, { playVideo: play, className: b({ border: borderSelected }) })))));
+            react_1.default.createElement(Media_1.default, Object.assign({ imageClassName: b('image') }, mediaWithMicrodata, { playVideo: play, className: b({ border: borderSelected }) })))));
 };
 exports.MediaBlock = MediaBlock;
 exports.default = exports.MediaBlock;

package/build/cjs/blocks/PromoFeaturesBlock/PromoFeaturesBlock.js

@@ -11,6 +11,7 @@ const YFMWrapper_1 = tslib_1.__importDefault(require("../../components/YFMWrappe
 const constants_1 = require("../../constants");
 const theme_1 = require("../../context/theme");
 const utils_1 = require("../../utils");
+const microdata_1 = require("../../utils/microdata");
 const b = (0, utils_1.block)('PromoFeaturesBlock');
 const breakpointColumns = {
     [constants_1.BREAKPOINTS.lg]: 3,
@@ -28,6 +29,10 @@ const PromoFeaturesBlock = (props) => {
             const blockModifier = backgroundTheme === 'default' ? 'default' : 'light';
             const themeMod = cardTheme || blockModifier || '';
             const themedMedia = (0, utils_1.getThemedValue)(media, globalTheme);
+            const allProps = (0, microdata_1.mergeVideoMicrodata)(themedMedia, {
+                name: cardTitle,
+                description: text,
+            });
             return (react_1.default.createElement("div", { key: index, className: b('card', {
                     'no-media': !media,
                     [themeMod]: Boolean(themeMod),
@@ -36,7 +41,7 @@ const PromoFeaturesBlock = (props) => {
                     react_1.default.createElement("h3", { className: b('card-title') }, cardTitle),
                     react_1.default.createElement("div", { className: b('card-text') },
                         react_1.default.createElement(YFMWrapper_1.default, { content: text, modifiers: { constructor: true } }))),
-                media && react_1.default.createElement(Media_1.default, Object.assign({ className: b('card-media') }, themedMedia))));
+                media && react_1.default.createElement(Media_1.default, Object.assign({ className: b('card-media') }, allProps))));
         }))));
 };
 exports.default = PromoFeaturesBlock;

package/build/cjs/blocks/Tabs/Tabs.js

@@ -15,6 +15,7 @@ const YFMWrapper_1 = tslib_1.__importDefault(require("../../components/YFMWrappe
 const theme_1 = require("../../context/theme");
 const grid_1 = require("../../grid");
 const utils_2 = require("../../utils");
+const microdata_1 = require("../../utils/microdata");
 const TabsTextContent_1 = tslib_1.__importDefault(require("./TabsTextContent/TabsTextContent"));
 const b = (0, utils_2.block)('tabs-block');
 const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', contentSize = 's', }) => {
@@ -63,14 +64,19 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
     const showMedia = Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps);
     const showText = Boolean(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.text);
     const border = (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.border) || 'shadow';
-    const textContent = activeTabData && showText && (react_1.default.createElement(TabsTextContent_1.default, { showMedia: showMedia, data: activeTabData, imageProps: imageProps ? imageProps : undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
+    const textContent = showText && (react_1.default.createElement(TabsTextContent_1.default, { showMedia: showMedia, data: activeTabData, imageProps: imageProps ? imageProps : undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
     const mediaContent = showMedia && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 }, orders: {
             all: grid_1.GridColumnOrderClasses.Last,
             md: grid_1.GridColumnOrderClasses.First,
         }, className: b('col', { centered: centered }) },
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement("div", { style: { minHeight: mediaVideoHeight || minImageHeight } },
             react_1.default.createElement("div", { ref: ref },
-                react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_2.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
+                react_1.default.createElement(Media_1.default, Object.assign({}, (0, microdata_1.mergeVideoMicrodata)((0, utils_2.getThemedValue)(activeTabData.media, theme), {
+                    name: activeTabData.tabName,
+                    description: activeTabData.caption
+                        ? activeTabData.caption
+                        : undefined,
+                }), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
         imageProps && (react_1.default.createElement(react_1.Fragment, null,
             react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image', { border }) })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (react_1.default.createElement("p", { className: b('caption'), id: captionId },

package/build/cjs/blocks/Tabs/TabsTextContent/TabsTextContent.d.ts

@@ -2,9 +2,9 @@ import { ImageDeviceProps, ImageObjectProps, TabsBlockItem, TabsBlockProps } fro
 interface TextContentProps extends Pick<TabsBlockProps, 'centered' | 'contentSize'> {
     showMedia: boolean;
     isReverse: boolean;
-    data: TabsBlockItem;
+    data?: TabsBlockItem;
     centered?: boolean;
     imageProps?: ImageObjectProps | ImageDeviceProps;
 }
-export declare const TabsTextContent: ({ centered, contentSize, showMedia, data: { media, title, text, additionalInfo, link, links, buttons, list }, imageProps, isReverse, }: TextContentProps) => JSX.Element;
+export declare const TabsTextContent: ({ centered, contentSize, showMedia, data, imageProps, isReverse, }: TextContentProps) => JSX.Element | null;
 export default TabsTextContent;

package/build/cjs/blocks/Tabs/TabsTextContent/TabsTextContent.js

@@ -7,11 +7,17 @@ const grid_1 = require("../../../grid");
 const sub_blocks_1 = require("../../../sub-blocks");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('tabs-block-text-content');
-const TabsTextContent = ({ centered, contentSize = 's', showMedia, data: { media, title, text, additionalInfo, link, links, buttons, list }, imageProps, isReverse, }) => (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b({ centered: centered }) },
-    react_1.default.createElement("div", { className: b('wrapper', {
-            reverse: isReverse,
-            'no-image': !(media || imageProps),
-        }) },
-        react_1.default.createElement(sub_blocks_1.Content, { title: title, text: text, additionalInfo: additionalInfo, size: contentSize, list: list, links: [...(link ? [link] : []), ...(links || [])], buttons: buttons, colSizes: { all: 12 } }))));
+const TabsTextContent = ({ centered, contentSize = 's', showMedia, data, imageProps, isReverse, }) => {
+    if (!data) {
+        return null;
+    }
+    const { media, title, text, additionalInfo, link, links, buttons, list } = data;
+    return (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b({ centered: centered }) },
+        react_1.default.createElement("div", { className: b('wrapper', {
+                reverse: isReverse,
+                'no-image': !(media || imageProps),
+            }) },
+            react_1.default.createElement(sub_blocks_1.Content, { title: title, text: text, additionalInfo: additionalInfo, size: contentSize, list: list, links: [...(link ? [link] : []), ...(links || [])], buttons: buttons, colSizes: { all: 12 } }))));
+};
 exports.TabsTextContent = TabsTextContent;
 exports.default = exports.TabsTextContent;

package/build/cjs/components/Media/Media.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Media = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const innerContext_1 = require("../../context/innerContext");
 const utils_1 = require("../../utils");
+const microdata_1 = require("../../utils/microdata");
 const VideoBlock_1 = tslib_1.__importDefault(require("../VideoBlock/VideoBlock"));
 const DataLens_1 = tslib_1.__importDefault(require("./DataLens/DataLens"));
 const FullscreenVideo_1 = tslib_1.__importDefault(require("./FullscreenVideo/FullscreenVideo"));
@@ -12,8 +14,9 @@ const Image_1 = tslib_1.__importDefault(require("./Image/Image"));
 const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const b = (0, utils_1.block)('Media');
 const Media = (props) => {
-    const { image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, } = props;
+    const { image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, videoMicrodata, } = props;
     const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
+    const { microdata } = (0, react_1.useContext)(innerContext_1.InnerContext);
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'video');
     const content = (0, react_1.useMemo)(() => {
         let result = [];
@@ -80,7 +83,15 @@ const Media = (props) => {
         autoplay,
         margins,
     ]);
-    return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));
+    const videoMicrodataScript = (0, react_1.useMemo)(() => {
+        var _a;
+        const { name, description } = videoMicrodata || {};
+        const json = JSON.stringify(Object.assign(Object.assign({ '@context': 'http://schema.org/', '@type': 'VideoObject', uploadDate: microdata === null || microdata === void 0 ? void 0 : microdata.contentUpdatedDate, contentUrl: ((_a = video === null || video === void 0 ? void 0 : video.src) === null || _a === void 0 ? void 0 : _a[0]) || videoIframe || youtube, thumbnailUrl: previewImg }, (videoMicrodata || {})), { name: name ? (0, microdata_1.sanitizeMicrodata)(name) : name, description: description ? (0, microdata_1.sanitizeMicrodata)(description) : description }));
+        return video || youtube || videoIframe ? (react_1.default.createElement("script", { type: "application/ld+json" }, json)) : null;
+    }, [microdata === null || microdata === void 0 ? void 0 : microdata.contentUpdatedDate, previewImg, video, videoIframe, videoMicrodata, youtube]);
+    return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa },
+        videoMicrodataScript,
+        content));
 };
 exports.Media = Media;
 exports.default = exports.Media;

package/build/cjs/components/Title/TitleItem.d.ts

@@ -1,5 +1,5 @@
 import { QAProps, TextSize, TitleItemProps } from '../../models';
-export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 24 | 13 | 22 | 26 | 38 | 20;
+export declare function getArrowSize(size: TextSize, isMobile: boolean): 20 | 24 | 16 | 13 | 22 | 26 | 38;
 export interface TitleItemFullProps extends TitleItemProps, QAProps {
     className?: string;
     onClick?: () => void;

package/build/cjs/containers/PageConstructor/PageConstructor.d.ts

@@ -10,6 +10,9 @@ export interface PageConstructorProps {
     custom?: CustomConfig;
     renderMenu?: () => React.ReactNode;
     navigation?: NavigationData;
+    microdata?: {
+        contentUpdatedDate?: string;
+    };
 }
 export declare const Constructor: (props: PageConstructorProps) => JSX.Element;
 export declare const PageConstructor: (props: PageConstructorProps) => JSX.Element;

package/build/cjs/containers/PageConstructor/PageConstructor.js

@@ -20,7 +20,7 @@ const ConstructorItem_1 = require("./components/ConstructorItem");
 const ConstructorRow_1 = require("./components/ConstructorRow");
 const b = (0, utils_1.block)('page-constructor');
 const Constructor = (props) => {
-    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
+    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, microdata, } = props;
     const { context } = (0, react_1.useMemo)(() => ({
         context: {
             blockTypes: [...models_1.BlockTypes, ...(0, utils_1.getCustomTypes)(['blocks', 'headers'], custom)],
@@ -37,8 +37,9 @@ const Constructor = (props) => {
             customization: {
                 decorators: custom === null || custom === void 0 ? void 0 : custom.decorators,
             },
+            microdata,
         },
-    }), [custom, shouldRenderBlock]);
+    }), [custom, shouldRenderBlock, microdata]);
     const theme = (0, theme_1.useTheme)();
     const header = (0, utils_1.getHeaderBlock)(blocks, context.headerBlockTypes);
     const restBlocks = (0, utils_1.getOrderedBlocks)(blocks, context.headerBlockTypes);

package/build/cjs/context/innerContext/InnerContext.d.ts

@@ -11,5 +11,8 @@ export interface InnerContextType {
     loadables?: LoadableConfig;
     shouldRenderBlock?: ShouldRenderBlock;
     customization?: Pick<CustomConfig, 'decorators'>;
+    microdata?: {
+        contentUpdatedDate?: string;
+    };
 }
 export declare const InnerContext: React.Context<InnerContextType>;

package/build/cjs/context/innerContext/InnerContext.js

@@ -10,4 +10,5 @@ exports.InnerContext = react_1.default.createContext({
     navigationBlockTypes: [],
     itemMap: {},
     navItemMap: {},
+    microdata: {},
 });

package/build/cjs/grid/Col/Col.d.ts

@@ -5,4 +5,4 @@ export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivE
     style?: CSSProperties;
     children?: React.ReactNode;
 }
-export declare const Col: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "reset" | "visible" | "offsets" | "orders" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Col: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "offsets" | "orders" | "visible" | "alignSelf" | "justifyContent" | "reset"> & React.RefAttributes<HTMLDivElement>>;

package/build/cjs/models/constructor-items/common.d.ts

@@ -207,6 +207,14 @@ export interface MediaComponentIframeProps {
 }
 export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentVideoIframeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentIframeProps>, Partial<MediaComponentVideoProps> {
     color?: string;
+    videoMicrodata?: {
+        name?: string;
+        description?: string;
+        duration?: string;
+        uploadDate?: string;
+        contentUrl?: string;
+        thumbnailUrl?: string;
+    };
 }
 export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {
     fullWidthMedia?: boolean;

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

@@ -6,6 +6,7 @@ const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const theme_1 = require("../../context/theme");
 const utils_1 = require("../../utils");
+const microdata_1 = require("../../utils/microdata");
 const Content_1 = tslib_1.__importDefault(require("../Content/Content"));
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('layout-item');
@@ -22,9 +23,14 @@ const LayoutItem = (_a) => {
             return null;
         }
         const themedMedia = (0, utils_1.getThemedValue)(media, theme);
+        const { title } = content;
+        const mediaWithMicrodata = (0, microdata_1.mergeVideoMicrodata)(themedMedia, {
+            name: typeof title === 'string' ? title : title === null || title === void 0 ? void 0 : title.text,
+            description: content.text,
+        });
         return fullscreen && (0, utils_2.hasFullscreen)(themedMedia) ? (react_1.default.createElement(components_1.FullscreenMedia, { showFullscreenIcon: (0, utils_2.showFullscreenIcon)(themedMedia) }, (_a = {}) => {
             var { className: mediaClassName, fullscreen: _fullscreen } = _a, fullscreenMediaProps = tslib_1.__rest(_a, ["className", "fullscreen"]);
-            return (react_1.default.createElement(components_1.Media, Object.assign({}, themedMedia, fullscreenMediaProps, { className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
+            return (react_1.default.createElement(components_1.Media, Object.assign({}, mediaWithMicrodata, fullscreenMediaProps, { className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
         })) : (react_1.default.createElement(components_1.Media, Object.assign({}, themedMedia, { className: b('media', { border }), analyticsEvents: analyticsEvents })));
     };
     return (react_1.default.createElement("div", { className: b(null, className) },

package/build/cjs/utils/microdata.d.ts

@@ -0,0 +1,3 @@
+import { MediaProps } from '../models';
+export declare const mergeVideoMicrodata: (values?: MediaProps, newValues?: MediaProps['videoMicrodata']) => MediaProps;
+export declare function sanitizeMicrodata(html: string): string;

package/build/cjs/utils/microdata.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sanitizeMicrodata = exports.mergeVideoMicrodata = void 0;
+const tslib_1 = require("tslib");
+const sanitize_html_1 = tslib_1.__importDefault(require("sanitize-html"));
+const mergeVideoMicrodata = (values = {}, newValues = {}) => (Object.assign(Object.assign({}, values), { videoMicrodata: Object.assign(Object.assign({}, newValues), (values.videoMicrodata || {})) }));
+exports.mergeVideoMicrodata = mergeVideoMicrodata;
+function sanitizeMicrodata(html) {
+    return html && (0, sanitize_html_1.default)(html, { allowedTags: [], allowedAttributes: {} });
+}
+exports.sanitizeMicrodata = sanitizeMicrodata;

package/build/esm/blocks/Media/Media.js

@@ -4,10 +4,11 @@ import MediaBase from '../../components/MediaBase/MediaBase';
 import { useTheme } from '../../context/theme';
 import { block, getThemedValue } from '../../utils';
 import { getMediaBorder } from '../../utils/borderSelector';
+import { mergeVideoMicrodata } from '../../utils/microdata';
 import './Media.css';
 const b = block('media-block');
 export const MediaBlock = (props) => {
-    const { media, border, disableShadow } = props;
+    const { media, border, disableShadow, title, description } = props;
     const borderSelected = getMediaBorder({
         border,
         disableShadow,
@@ -15,8 +16,12 @@ export const MediaBlock = (props) => {
     const [play, setPlay] = useState(false);
     const theme = useTheme();
     const mediaThemed = getThemedValue(media, theme);
+    const mediaWithMicrodata = mergeVideoMicrodata(mediaThemed, {
+        name: title,
+        description,
+    });
     return (React.createElement(MediaBase, Object.assign({}, props, { onScroll: () => setPlay(true) }),
         React.createElement(MediaBase.Card, null,
-            React.createElement(Media, Object.assign({ imageClassName: b('image') }, mediaThemed, { playVideo: play, className: b({ border: borderSelected }) })))));
+            React.createElement(Media, Object.assign({ imageClassName: b('image') }, mediaWithMicrodata, { playVideo: play, className: b({ border: borderSelected }) })))));
 };
 export default MediaBlock;

package/build/esm/blocks/PromoFeaturesBlock/PromoFeaturesBlock.js

@@ -8,6 +8,7 @@ import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
 import { BREAKPOINTS } from '../../constants';
 import { useTheme } from '../../context/theme';
 import { block, getThemedValue } from '../../utils';
+import { mergeVideoMicrodata } from '../../utils/microdata';
 import './PromoFeaturesBlock.css';
 const b = block('PromoFeaturesBlock');
 const breakpointColumns = {
@@ -26,6 +27,10 @@ const PromoFeaturesBlock = (props) => {
             const blockModifier = backgroundTheme === 'default' ? 'default' : 'light';
             const themeMod = cardTheme || blockModifier || '';
             const themedMedia = getThemedValue(media, globalTheme);
+            const allProps = mergeVideoMicrodata(themedMedia, {
+                name: cardTitle,
+                description: text,
+            });
             return (React.createElement("div", { key: index, className: b('card', {
                     'no-media': !media,
                     [themeMod]: Boolean(themeMod),
@@ -34,7 +39,7 @@ const PromoFeaturesBlock = (props) => {
                     React.createElement("h3", { className: b('card-title') }, cardTitle),
                     React.createElement("div", { className: b('card-text') },
                         React.createElement(YFMWrapper, { content: text, modifiers: { constructor: true } }))),
-                media && React.createElement(Media, Object.assign({ className: b('card-media') }, themedMedia))));
+                media && React.createElement(Media, Object.assign({ className: b('card-media') }, allProps))));
         }))));
 };
 export default PromoFeaturesBlock;

package/build/esm/blocks/Tabs/Tabs.js

@@ -11,6 +11,7 @@ import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
 import { useTheme } from '../../context/theme';
 import { Col, GridColumnOrderClasses, Row } from '../../grid';
 import { block, getThemedValue } from '../../utils';
+import { mergeVideoMicrodata } from '../../utils/microdata';
 import TabsTextContent from './TabsTextContent/TabsTextContent';
 import './Tabs.css';
 const b = block('tabs-block');
@@ -60,14 +61,19 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
     const showMedia = Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps);
     const showText = Boolean(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.text);
     const border = (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.border) || 'shadow';
-    const textContent = activeTabData && showText && (React.createElement(TabsTextContent, { showMedia: showMedia, data: activeTabData, imageProps: imageProps ? imageProps : undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
+    const textContent = showText && (React.createElement(TabsTextContent, { showMedia: showMedia, data: activeTabData, imageProps: imageProps ? imageProps : undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
     const mediaContent = showMedia && (React.createElement(Col, { sizes: { all: 12, md: 8 }, orders: {
             all: GridColumnOrderClasses.Last,
             md: GridColumnOrderClasses.First,
         }, className: b('col', { centered: centered }) },
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement("div", { style: { minHeight: mediaVideoHeight || minImageHeight } },
             React.createElement("div", { ref: ref },
-                React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
+                React.createElement(Media, Object.assign({}, mergeVideoMicrodata(getThemedValue(activeTabData.media, theme), {
+                    name: activeTabData.tabName,
+                    description: activeTabData.caption
+                        ? activeTabData.caption
+                        : undefined,
+                }), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
         imageProps && (React.createElement(Fragment, null,
             React.createElement(FullscreenImage, Object.assign({}, imageProps, { imageClassName: b('image', { border }) })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (React.createElement("p", { className: b('caption'), id: captionId },

package/build/esm/blocks/Tabs/TabsTextContent/TabsTextContent.d.ts

@@ -3,9 +3,9 @@ import './TabsTextContent.css';
 interface TextContentProps extends Pick<TabsBlockProps, 'centered' | 'contentSize'> {
     showMedia: boolean;
     isReverse: boolean;
-    data: TabsBlockItem;
+    data?: TabsBlockItem;
     centered?: boolean;
     imageProps?: ImageObjectProps | ImageDeviceProps;
 }
-export declare const TabsTextContent: ({ centered, contentSize, showMedia, data: { media, title, text, additionalInfo, link, links, buttons, list }, imageProps, isReverse, }: TextContentProps) => JSX.Element;
+export declare const TabsTextContent: ({ centered, contentSize, showMedia, data, imageProps, isReverse, }: TextContentProps) => JSX.Element | null;
 export default TabsTextContent;

package/build/esm/blocks/Tabs/TabsTextContent/TabsTextContent.js

@@ -4,10 +4,16 @@ import { Content } from '../../../sub-blocks';
 import { block } from '../../../utils';
 import './TabsTextContent.css';
 const b = block('tabs-block-text-content');
-export const TabsTextContent = ({ centered, contentSize = 's', showMedia, data: { media, title, text, additionalInfo, link, links, buttons, list }, imageProps, isReverse, }) => (React.createElement(Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b({ centered: centered }) },
-    React.createElement("div", { className: b('wrapper', {
-            reverse: isReverse,
-            'no-image': !(media || imageProps),
-        }) },
-        React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, size: contentSize, list: list, links: [...(link ? [link] : []), ...(links || [])], buttons: buttons, colSizes: { all: 12 } }))));
+export const TabsTextContent = ({ centered, contentSize = 's', showMedia, data, imageProps, isReverse, }) => {
+    if (!data) {
+        return null;
+    }
+    const { media, title, text, additionalInfo, link, links, buttons, list } = data;
+    return (React.createElement(Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b({ centered: centered }) },
+        React.createElement("div", { className: b('wrapper', {
+                reverse: isReverse,
+                'no-image': !(media || imageProps),
+            }) },
+            React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, size: contentSize, list: list, links: [...(link ? [link] : []), ...(links || [])], buttons: buttons, colSizes: { all: 12 } }))));
+};
 export default TabsTextContent;

package/build/esm/components/Media/Media.js

@@ -1,5 +1,7 @@
-import React, { useMemo, useState } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
+import { InnerContext } from '../../context/innerContext';
 import { block, getQaAttrubutes } from '../../utils';
+import { sanitizeMicrodata } from '../../utils/microdata';
 import IframeVideoBlock from '../VideoBlock/VideoBlock';
 import DataLens from './DataLens/DataLens';
 import FullscreenVideo from './FullscreenVideo/FullscreenVideo';
@@ -9,8 +11,9 @@ import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
 export const Media = (props) => {
-    const { image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, } = props;
+    const { image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, videoMicrodata, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
+    const { microdata } = useContext(InnerContext);
     const qaAttributes = getQaAttrubutes(qa, 'video');
     const content = useMemo(() => {
         let result = [];
@@ -77,6 +80,14 @@ export const Media = (props) => {
         autoplay,
         margins,
     ]);
-    return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));
+    const videoMicrodataScript = useMemo(() => {
+        var _a;
+        const { name, description } = videoMicrodata || {};
+        const json = JSON.stringify(Object.assign(Object.assign({ '@context': 'http://schema.org/', '@type': 'VideoObject', uploadDate: microdata === null || microdata === void 0 ? void 0 : microdata.contentUpdatedDate, contentUrl: ((_a = video === null || video === void 0 ? void 0 : video.src) === null || _a === void 0 ? void 0 : _a[0]) || videoIframe || youtube, thumbnailUrl: previewImg }, (videoMicrodata || {})), { name: name ? sanitizeMicrodata(name) : name, description: description ? sanitizeMicrodata(description) : description }));
+        return video || youtube || videoIframe ? (React.createElement("script", { type: "application/ld+json" }, json)) : null;
+    }, [microdata === null || microdata === void 0 ? void 0 : microdata.contentUpdatedDate, previewImg, video, videoIframe, videoMicrodata, youtube]);
+    return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa },
+        videoMicrodataScript,
+        content));
 };
 export default Media;

package/build/esm/components/Title/TitleItem.d.ts

@@ -1,6 +1,6 @@
 import { QAProps, TextSize, TitleItemProps } from '../../models';
 import './TitleItem.css';
-export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 24 | 13 | 22 | 26 | 38 | 20;
+export declare function getArrowSize(size: TextSize, isMobile: boolean): 20 | 24 | 16 | 13 | 22 | 26 | 38;
 export interface TitleItemFullProps extends TitleItemProps, QAProps {
     className?: string;
     onClick?: () => void;

package/build/esm/containers/PageConstructor/PageConstructor.d.ts

@@ -11,6 +11,9 @@ export interface PageConstructorProps {
     custom?: CustomConfig;
     renderMenu?: () => React.ReactNode;
     navigation?: NavigationData;
+    microdata?: {
+        contentUpdatedDate?: string;
+    };
 }
 export declare const Constructor: (props: PageConstructorProps) => JSX.Element;
 export declare const PageConstructor: (props: PageConstructorProps) => JSX.Element;

package/build/esm/containers/PageConstructor/PageConstructor.js

@@ -18,7 +18,7 @@ import { ConstructorRow } from './components/ConstructorRow';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
 export const Constructor = (props) => {
-    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
+    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, microdata, } = props;
     const { context } = useMemo(() => ({
         context: {
             blockTypes: [...BlockTypes, ...getCustomTypes(['blocks', 'headers'], custom)],
@@ -35,8 +35,9 @@ export const Constructor = (props) => {
             customization: {
                 decorators: custom === null || custom === void 0 ? void 0 : custom.decorators,
             },
+            microdata,
         },
-    }), [custom, shouldRenderBlock]);
+    }), [custom, shouldRenderBlock, microdata]);
     const theme = useTheme();
     const header = getHeaderBlock(blocks, context.headerBlockTypes);
     const restBlocks = getOrderedBlocks(blocks, context.headerBlockTypes);

package/build/esm/context/innerContext/InnerContext.d.ts

@@ -11,5 +11,8 @@ export interface InnerContextType {
     loadables?: LoadableConfig;
     shouldRenderBlock?: ShouldRenderBlock;
     customization?: Pick<CustomConfig, 'decorators'>;
+    microdata?: {
+        contentUpdatedDate?: string;
+    };
 }
 export declare const InnerContext: React.Context<InnerContextType>;

package/build/esm/context/innerContext/InnerContext.js

@@ -6,4 +6,5 @@ export const InnerContext = React.createContext({
     navigationBlockTypes: [],
     itemMap: {},
     navItemMap: {},
+    microdata: {},
 });

package/build/esm/grid/Col/Col.d.ts

@@ -5,4 +5,4 @@ export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivE
     style?: CSSProperties;
     children?: React.ReactNode;
 }
-export declare const Col: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "reset" | "visible" | "offsets" | "orders" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Col: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "offsets" | "orders" | "visible" | "alignSelf" | "justifyContent" | "reset"> & React.RefAttributes<HTMLDivElement>>;

package/build/esm/models/constructor-items/common.d.ts

@@ -207,6 +207,14 @@ export interface MediaComponentIframeProps {
 }
 export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentVideoIframeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentIframeProps>, Partial<MediaComponentVideoProps> {
     color?: string;
+    videoMicrodata?: {
+        name?: string;
+        description?: string;
+        duration?: string;
+        uploadDate?: string;
+        contentUrl?: string;
+        thumbnailUrl?: string;
+    };
 }
 export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {
     fullWidthMedia?: boolean;

package/build/esm/sub-blocks/LayoutItem/LayoutItem.js

@@ -4,6 +4,7 @@ import { useUniqId } from '@gravity-ui/uikit';
 import { FullscreenMedia, IconWrapper, Media, MetaInfo } from '../../components';
 import { useTheme } from '../../context/theme';
 import { block, getThemedValue } from '../../utils';
+import { mergeVideoMicrodata } from '../../utils/microdata';
 import Content from '../Content/Content';
 import { getLayoutItemLinks, hasFullscreen, showFullscreenIcon } from './utils';
 import './LayoutItem.css';
@@ -21,9 +22,14 @@ const LayoutItem = (_a) => {
             return null;
         }
         const themedMedia = getThemedValue(media, theme);
+        const { title } = content;
+        const mediaWithMicrodata = mergeVideoMicrodata(themedMedia, {
+            name: typeof title === 'string' ? title : title === null || title === void 0 ? void 0 : title.text,
+            description: content.text,
+        });
         return fullscreen && hasFullscreen(themedMedia) ? (React.createElement(FullscreenMedia, { showFullscreenIcon: showFullscreenIcon(themedMedia) }, (_a = {}) => {
             var { className: mediaClassName, fullscreen: _fullscreen } = _a, fullscreenMediaProps = __rest(_a, ["className", "fullscreen"]);
-            return (React.createElement(Media, Object.assign({}, themedMedia, fullscreenMediaProps, { className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
+            return (React.createElement(Media, Object.assign({}, mediaWithMicrodata, fullscreenMediaProps, { className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
         })) : (React.createElement(Media, Object.assign({}, themedMedia, { className: b('media', { border }), analyticsEvents: analyticsEvents })));
     };
     return (React.createElement("div", { className: b(null, className) },

package/build/esm/utils/microdata.d.ts

@@ -0,0 +1,3 @@
+import { MediaProps } from '../models';
+export declare const mergeVideoMicrodata: (values?: MediaProps, newValues?: MediaProps['videoMicrodata']) => MediaProps;
+export declare function sanitizeMicrodata(html: string): string;

package/build/esm/utils/microdata.js

@@ -0,0 +1,5 @@
+import sanitize from 'sanitize-html';
+export const mergeVideoMicrodata = (values = {}, newValues = {}) => (Object.assign(Object.assign({}, values), { videoMicrodata: Object.assign(Object.assign({}, newValues), (values.videoMicrodata || {})) }));
+export function sanitizeMicrodata(html) {
+    return html && sanitize(html, { allowedTags: [], allowedAttributes: {} });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "5.29.1",
+  "version": "5.30.0-alpha.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/constructor-items/common.d.ts

@@ -207,6 +207,14 @@ export interface MediaComponentIframeProps {
 }
 export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentVideoIframeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentIframeProps>, Partial<MediaComponentVideoProps> {
     color?: string;
+    videoMicrodata?: {
+        name?: string;
+        description?: string;
+        duration?: string;
+        uploadDate?: string;
+        contentUrl?: string;
+        thumbnailUrl?: string;
+    };
 }
 export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {
     fullWidthMedia?: boolean;