@gravity-ui/page-constructor 5.28.7-alpha.0 → 5.28.7-alpha.3

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: (0, microdata_1.sanitizeMicrodata)(title),
+        description: description ? (0, microdata_1.sanitizeMicrodata)(description) : undefined,
+    });
     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

@@ -30,8 +30,8 @@ const PromoFeaturesBlock = (props) => {
             const themeMod = cardTheme || blockModifier || '';
             const themedMedia = (0, utils_1.getThemedValue)(media, globalTheme);
             const allProps = (0, microdata_1.mergeVideoMicrodata)(themedMedia, {
-                name: cardTitle,
-                description: text,
+                name: (0, microdata_1.sanitizeMicrodata)(cardTitle),
+                description: (0, microdata_1.sanitizeMicrodata)(text),
             });
             return (react_1.default.createElement("div", { key: index, className: b('card', {
                     'no-media': !media,

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

@@ -64,7 +64,7 @@ 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,
@@ -73,7 +73,9 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
             react_1.default.createElement("div", { ref: ref },
                 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,
+                    description: activeTabData.caption
+                        ? (0, microdata_1.sanitizeMicrodata)(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 }) })))),

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/sub-blocks/LayoutItem/LayoutItem.js

@@ -19,19 +19,20 @@ const LayoutItem = (_a) => {
     const contentProps = Object.assign(Object.assign({ controlPosition: areControlsInFooter ? 'bottom' : 'default' }, content), { links: normalizedLinks, size: 's', colSizes: { all: 12, md: 12 } });
     const titleId = (0, uikit_1.useUniqId)();
     const renderMedia = () => {
+        var _a;
         if (!media) {
             return null;
         }
         const themedMedia = (0, utils_1.getThemedValue)(media, theme);
+        const mediaWithMicrodata = (0, microdata_1.mergeVideoMicrodata)(themedMedia, {
+            name: typeof content.title === 'string'
+                ? (0, microdata_1.sanitizeMicrodata)(content.title)
+                : (0, microdata_1.sanitizeMicrodata)(((_a = content.title) === null || _a === void 0 ? void 0 : _a.text) || ''),
+            description: content.text ? (0, microdata_1.sanitizeMicrodata)(content.text) : undefined,
+        });
         return fullscreen && (0, utils_2.hasFullscreen)(themedMedia) ? (react_1.default.createElement(components_1.FullscreenMedia, { showFullscreenIcon: (0, utils_2.showFullscreenIcon)(themedMedia) }, (_a = {}) => {
-            var _b;
             var { className: mediaClassName, fullscreen: _fullscreen } = _a, fullscreenMediaProps = tslib_1.__rest(_a, ["className", "fullscreen"]);
-            return (react_1.default.createElement(components_1.Media, Object.assign({}, (0, microdata_1.mergeVideoMicrodata)(themedMedia, {
-                name: typeof content.title === 'string'
-                    ? content.title
-                    : (_b = content.title) === null || _b === void 0 ? void 0 : _b.text,
-                description: content.text,
-            }), 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

@@ -1,2 +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

@@ -1,5 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeVideoMicrodata = void 0;
+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, sanitizeMicrodata } 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: sanitizeMicrodata(title),
+        description: description ? sanitizeMicrodata(description) : undefined,
+    });
     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,7 +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 { mergeVideoMicrodata, sanitizeMicrodata } from '../../utils/microdata';
 import './PromoFeaturesBlock.css';
 const b = block('PromoFeaturesBlock');
 const breakpointColumns = {
@@ -28,8 +28,8 @@ const PromoFeaturesBlock = (props) => {
             const themeMod = cardTheme || blockModifier || '';
             const themedMedia = getThemedValue(media, globalTheme);
             const allProps = mergeVideoMicrodata(themedMedia, {
-                name: cardTitle,
-                description: text,
+                name: sanitizeMicrodata(cardTitle),
+                description: sanitizeMicrodata(text),
             });
             return (React.createElement("div", { key: index, className: b('card', {
                     'no-media': !media,

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

@@ -11,7 +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 { mergeVideoMicrodata, sanitizeMicrodata } from '../../utils/microdata';
 import TabsTextContent from './TabsTextContent/TabsTextContent';
 import './Tabs.css';
 const b = block('tabs-block');
@@ -61,7 +61,7 @@ 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,
@@ -70,7 +70,9 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
             React.createElement("div", { ref: ref },
                 React.createElement(Media, Object.assign({}, mergeVideoMicrodata(getThemedValue(activeTabData.media, theme), {
                     name: activeTabData.tabName,
-                    description: activeTabData.caption,
+                    description: activeTabData.caption
+                        ? sanitizeMicrodata(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 }) })))),

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/sub-blocks/LayoutItem/LayoutItem.js

@@ -4,7 +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 { mergeVideoMicrodata, sanitizeMicrodata } from '../../utils/microdata';
 import Content from '../Content/Content';
 import { getLayoutItemLinks, hasFullscreen, showFullscreenIcon } from './utils';
 import './LayoutItem.css';
@@ -18,19 +18,20 @@ const LayoutItem = (_a) => {
     const contentProps = Object.assign(Object.assign({ controlPosition: areControlsInFooter ? 'bottom' : 'default' }, content), { links: normalizedLinks, size: 's', colSizes: { all: 12, md: 12 } });
     const titleId = useUniqId();
     const renderMedia = () => {
+        var _a;
         if (!media) {
             return null;
         }
         const themedMedia = getThemedValue(media, theme);
+        const mediaWithMicrodata = mergeVideoMicrodata(themedMedia, {
+            name: typeof content.title === 'string'
+                ? sanitizeMicrodata(content.title)
+                : sanitizeMicrodata(((_a = content.title) === null || _a === void 0 ? void 0 : _a.text) || ''),
+            description: content.text ? sanitizeMicrodata(content.text) : undefined,
+        });
         return fullscreen && hasFullscreen(themedMedia) ? (React.createElement(FullscreenMedia, { showFullscreenIcon: showFullscreenIcon(themedMedia) }, (_a = {}) => {
-            var _b;
             var { className: mediaClassName, fullscreen: _fullscreen } = _a, fullscreenMediaProps = __rest(_a, ["className", "fullscreen"]);
-            return (React.createElement(Media, Object.assign({}, mergeVideoMicrodata(themedMedia, {
-                name: typeof content.title === 'string'
-                    ? content.title
-                    : (_b = content.title) === null || _b === void 0 ? void 0 : _b.text,
-                description: content.text,
-            }), 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

@@ -1,2 +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

@@ -1 +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.28.7-alpha.0",
+  "version": "5.28.7-alpha.3",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {