@gravity-ui/page-constructor 4.12.0 → 4.13.0

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

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { block } from '../../utils';
+import { block, getQaAttrubutes } from '../../utils';
 import YoutubeBlock from '../VideoBlock/VideoBlock';
 import DataLens from './DataLens/DataLens';
 import FullscreenVideo from './FullscreenVideo/FullscreenVideo';
@@ -8,12 +8,13 @@ import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
 export const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
+    const qaAttributes = getQaAttrubutes(qa, 'video');
     const content = useMemo(() => {
         let result = [];
         if (image) {
-            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen }));
+            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image }));
         }
         if (video) {
             const videoProps = {
@@ -31,10 +32,10 @@ export const Media = (props) => {
                 setHasVideoFallback,
             };
             if (fullscreen) {
-                result.push(React.createElement(FullscreenVideo, Object.assign({}, videoProps)));
+                result.push(React.createElement(FullscreenVideo, Object.assign({}, videoProps, { qa: qaAttributes.video })));
             }
             else {
-                result.push(React.createElement(Video, Object.assign({}, videoProps)));
+                result.push(React.createElement(Video, Object.assign({}, videoProps, { qa: qaAttributes.video })));
             }
         }
         if (youtube) {
@@ -54,6 +55,9 @@ export const Media = (props) => {
         imageClassName,
         isBackground,
         hasVideoFallback,
+        fullscreen,
+        qaAttributes.image,
+        qaAttributes.video,
         videoClassName,
         metrika,
         analyticsEvents,
@@ -62,8 +66,7 @@ export const Media = (props) => {
         playButton,
         customBarControlsClassName,
         youtubeClassName,
-        fullscreen,
     ]);
-    return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color } }, content));
+    return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));
 };
 export default Media;

package/build/esm/components/Media/Video/Video.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MediaComponentVideoProps, PlayButtonProps } from '../../../models';
+import { MediaComponentVideoProps, PlayButtonProps, QAProps } from '../../../models';
 import './Video.css';
 export interface VideoAdditionProps {
     playButton?: PlayButtonProps;
@@ -11,6 +11,6 @@ interface InnerVideoProps {
     setHasVideoFallback: React.Dispatch<boolean>;
     hasVideoFallback: boolean;
 }
-export type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
+export type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps & QAProps;
 declare const Video: (props: VideoAllProps) => JSX.Element | null;
 export default Video;

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

@@ -1,12 +1,13 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { MediaVideoType } from '../../../models';
-import { block } from '../../../utils';
+import { block, getQaAttrubutes } from '../../../utils';
 import ReactPlayerBlock from '../../ReactPlayer/ReactPlayer';
 import { getVideoTypesWithPriority } from './utils';
 import './Video.css';
 const b = block('media-component-video');
 const Video = (props) => {
-    const { video, height, metrika, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, } = props;
+    const { video, height, metrika, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, qa, } = props;
+    const qaAttributes = getQaAttrubutes(qa, 'source');
     const ref = useRef(null);
     useEffect(() => {
         if (ref && ref.current) {
@@ -42,12 +43,20 @@ const Video = (props) => {
         analyticsEvents,
     ]);
     const defaultVideoBlock = useMemo(() => {
-        return video.src.length && !hasVideoFallback ? (React.createElement("div", { className: b('wrap', videoClassName), style: { height } },
+        return video.src.length && !hasVideoFallback ? (React.createElement("div", { className: b('wrap', videoClassName), style: { height }, "data-qa": qaAttributes.default },
             React.createElement("video", { disablePictureInPicture: true, playsInline: true, 
                 // @ts-ignore
                 // eslint-disable-next-line react/no-unknown-property
-                pip: "false", className: b('item'), ref: ref, preload: "metadata", muted: true, "aria-label": video.ariaLabel }, getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type })))))) : null;
-    }, [video, videoClassName, hasVideoFallback, height]);
+                pip: "false", className: b('item'), ref: ref, preload: "metadata", muted: true, "aria-label": video.ariaLabel }, getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type, "data-qa": qaAttributes.source })))))) : null;
+    }, [
+        video.src,
+        video.ariaLabel,
+        hasVideoFallback,
+        videoClassName,
+        height,
+        qaAttributes.default,
+        qaAttributes.source,
+    ]);
     switch (video.type) {
         case MediaVideoType.Player:
             return reactPlayerBlock;

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

@@ -186,7 +186,7 @@ export interface MediaComponentDataLensProps {
 export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentVideoProps> {
     color?: string;
 }
-export interface BackgroundMediaProps extends MediaProps, Animatable {
+export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {
     fullWidthMedia?: boolean;
     className?: string;
     mediaClassName?: string;

package/build/esm/text-transform/common.d.ts

@@ -1,13 +1,18 @@
+import { MarkdownItPluginCb } from '@doc-tools/transform/lib/plugins/typings';
 import { Lang } from '../utils/configure';
 export type ComplexItem = {
     [key: string]: string;
 };
 export type Item = string | null | ComplexItem;
 export type Transformer = (text: string) => string;
-export type TransformerRaw = (lang: Lang, content: string) => string;
+export type TransformerRaw = (lang: Lang, content: string, options: {
+    plugins: MarkdownItPluginCb[];
+}) => string;
 export type Parser<T = any> = (transformer: Transformer, block: T) => T;
 export declare const createItemsParser: (fields: string[]) => (transformer: Transformer, items: Item[]) => (string | {
     [x: string]: string;
 } | null)[];
-export declare function yfmTransformer(lang: Lang, content: string): string;
+export declare function yfmTransformer(lang: Lang, content: string, options?: {
+    plugins?: MarkdownItPluginCb[];
+}): string;
 export declare function typografTransformer(lang: Lang, content: string): string;

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

@@ -1,3 +1,4 @@
+import defaultPlugins from '@doc-tools/transform/lib/plugins';
 import { fullTransform, typografToHTML } from './utils';
 export const createItemsParser = (fields) => (transformer, items) => items.map((item) => {
     if (!item) {
@@ -16,8 +17,12 @@ export const createItemsParser = (fields) => (transformer, items) => items.map((
         }, {}));
     }
 });
-export function yfmTransformer(lang, content) {
-    const { html } = fullTransform(content, { lang });
+export function yfmTransformer(lang, content, options = {}) {
+    const { plugins = [] } = options;
+    const { html } = fullTransform(content, {
+        lang,
+        plugins: [...defaultPlugins, ...plugins],
+    });
     return html;
 }
 export function typografTransformer(lang, content) {

package/build/esm/text-transform/transformers.d.ts

@@ -1,3 +1,4 @@
+import { MarkdownItPluginCb } from '@doc-tools/transform/lib/plugins/typings';
 import { ConstructorBlock } from '../models/constructor';
 import { Lang } from '../utils/configure';
 export type ContentVariables = Record<string, string>;
@@ -9,6 +10,7 @@ export type ContentTransformerProps = {
         lang: Lang;
         customConfig?: {};
         vars?: ContentVariables;
+        plugins?: MarkdownItPluginCb[];
     };
 };
 export declare const contentTransformer: ({ content, options }: ContentTransformerProps) => {

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

@@ -1,14 +1,13 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
 import _ from 'lodash';
 import { config } from './config';
 import { filterContent } from './filter';
-function transformBlocks(blocks, lang, customConfig = {}) {
+function transformBlocks(blocks, lang, customConfig = {}, options = {}) {
     const fullConfig = Object.assign(Object.assign({}, config), customConfig);
+    const { plugins = [] } = options;
     const clonedBlocks = _.cloneDeep(blocks);
-    return clonedBlocks.map((block) => transformBlock(lang, fullConfig, block));
+    return clonedBlocks.map((block) => transformBlock(lang, fullConfig, block, plugins));
 }
-function transformBlock(lang, blocksConfig, block) {
+function transformBlock(lang, blocksConfig, block, plugins) {
     const blockConfig = blocksConfig[block.type];
     if (block) {
         if ('randomOrder' in block && block.randomOrder && 'children' in block && block.children) {
@@ -19,7 +18,9 @@ function transformBlock(lang, blocksConfig, block) {
         const configs = Array.isArray(blockConfig) ? blockConfig : [blockConfig];
         configs.forEach((transformConfig) => {
             const { fields, transformer: transformerRaw, parser } = transformConfig;
-            const transformer = transformerRaw.bind(null, lang);
+            const transformer = (content) => 
+            // eslint-disable-next-line no-useless-call
+            transformerRaw.call(null, lang, content, { plugins });
             if (fields) {
                 fields.forEach((field) => {
                     if (block[field]) {
@@ -43,9 +44,11 @@ function transformBlock(lang, blocksConfig, block) {
     return block;
 }
 export const contentTransformer = ({ content, options }) => {
-    const { lang, customConfig = {}, vars } = options;
+    const { lang, customConfig = {}, vars, plugins = [] } = options;
     const { blocks = [] } = (vars ? filterContent(content, vars) : content);
-    const transformedBlocks = transformBlocks(blocks, lang, customConfig);
+    const transformedBlocks = transformBlocks(blocks, lang, customConfig, {
+        plugins,
+    });
     return {
         blocks: transformedBlocks,
     };

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

@@ -7,4 +7,4 @@ export declare const getCustomTypes: (types: (keyof CustomConfig)[], customBlock
 export declare const getOrderedBlocks: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock[];
 export declare const getHeaderBlock: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock | undefined;
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;
-export declare const getQaAttrubutes: (qa?: string, customKeys?: Array<string>) => Record<string, string>;
+export declare const getQaAttrubutes: (qa?: string, ...customKeys: (string | Array<string>)[]) => Record<string, string>;

package/build/esm/utils/blocks.js

@@ -1,4 +1,4 @@
-import { camelCase } from 'lodash';
+import { camelCase, flatten } from 'lodash';
 import { PCShareSocialNetwork } from '../models';
 const BLOCK_ELEMENTS = [
     'div',
@@ -37,7 +37,7 @@ const BLOCK_ELEMENTS = [
     'td',
 ];
 const BLOCK_ELEMENTS_REGEX = `<(${BLOCK_ELEMENTS.join('|')})[^>]*>`;
-const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button'];
+const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button', 'animate'];
 export function getHeaderTag(size) {
     switch (size) {
         case 'l':
@@ -111,13 +111,14 @@ export const getShareLink = (url, type, title, text) => {
             return undefined;
     }
 };
-export const getQaAttrubutes = (qa, customKeys = []) => {
+export const getQaAttrubutes = (qa, ...customKeys) => {
     const attributes = {};
     if (qa) {
-        const keys = QA_ATTRIBUTES_KEYS.concat(customKeys);
+        const keys = QA_ATTRIBUTES_KEYS.concat(flatten(customKeys));
         keys.forEach((key) => {
             attributes[camelCase(key)] = `${qa}-${key}`;
         });
+        attributes.default = qa;
     }
     return attributes;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.12.0",
+  "version": "4.13.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

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

@@ -186,7 +186,7 @@ export interface MediaComponentDataLensProps {
 export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentVideoProps> {
     color?: string;
 }
-export interface BackgroundMediaProps extends MediaProps, Animatable {
+export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {
     fullWidthMedia?: boolean;
     className?: string;
     mediaClassName?: string;

package/server/text-transform/common.d.ts

@@ -1,13 +1,18 @@
+import { MarkdownItPluginCb } from '@doc-tools/transform/lib/plugins/typings';
 import { Lang } from '../utils/configure';
 export type ComplexItem = {
     [key: string]: string;
 };
 export type Item = string | null | ComplexItem;
 export type Transformer = (text: string) => string;
-export type TransformerRaw = (lang: Lang, content: string) => string;
+export type TransformerRaw = (lang: Lang, content: string, options: {
+    plugins: MarkdownItPluginCb[];
+}) => string;
 export type Parser<T = any> = (transformer: Transformer, block: T) => T;
 export declare const createItemsParser: (fields: string[]) => (transformer: Transformer, items: Item[]) => (string | {
     [x: string]: string;
 } | null)[];
-export declare function yfmTransformer(lang: Lang, content: string): string;
+export declare function yfmTransformer(lang: Lang, content: string, options?: {
+    plugins?: MarkdownItPluginCb[];
+}): string;
 export declare function typografTransformer(lang: Lang, content: string): string;

package/server/text-transform/common.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.typografTransformer = exports.yfmTransformer = exports.createItemsParser = void 0;
+const plugins_1 = __importDefault(require("@doc-tools/transform/lib/plugins"));
 const utils_1 = require("./utils");
 const createItemsParser = (fields) => (transformer, items) => items.map((item) => {
     if (!item) {
@@ -20,8 +24,12 @@ const createItemsParser = (fields) => (transformer, items) => items.map((item) =
     }
 });
 exports.createItemsParser = createItemsParser;
-function yfmTransformer(lang, content) {
-    const { html } = (0, utils_1.fullTransform)(content, { lang });
+function yfmTransformer(lang, content, options = {}) {
+    const { plugins = [] } = options;
+    const { html } = (0, utils_1.fullTransform)(content, {
+        lang,
+        plugins: [...plugins_1.default, ...plugins],
+    });
     return html;
 }
 exports.yfmTransformer = yfmTransformer;

package/server/text-transform/transformers.d.ts

@@ -1,3 +1,4 @@
+import { MarkdownItPluginCb } from '@doc-tools/transform/lib/plugins/typings';
 import { ConstructorBlock } from '../models/constructor';
 import { Lang } from '../utils/configure';
 export type ContentVariables = Record<string, string>;
@@ -9,6 +10,7 @@ export type ContentTransformerProps = {
         lang: Lang;
         customConfig?: {};
         vars?: ContentVariables;
+        plugins?: MarkdownItPluginCb[];
     };
 };
 export declare const contentTransformer: ({ content, options }: ContentTransformerProps) => {

package/server/text-transform/transformers.js

@@ -4,17 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.contentTransformer = void 0;
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
 const lodash_1 = __importDefault(require("lodash"));
 const config_1 = require("./config");
 const filter_1 = require("./filter");
-function transformBlocks(blocks, lang, customConfig = {}) {
+function transformBlocks(blocks, lang, customConfig = {}, options = {}) {
     const fullConfig = Object.assign(Object.assign({}, config_1.config), customConfig);
+    const { plugins = [] } = options;
     const clonedBlocks = lodash_1.default.cloneDeep(blocks);
-    return clonedBlocks.map((block) => transformBlock(lang, fullConfig, block));
+    return clonedBlocks.map((block) => transformBlock(lang, fullConfig, block, plugins));
 }
-function transformBlock(lang, blocksConfig, block) {
+function transformBlock(lang, blocksConfig, block, plugins) {
     const blockConfig = blocksConfig[block.type];
     if (block) {
         if ('randomOrder' in block && block.randomOrder && 'children' in block && block.children) {
@@ -25,7 +24,9 @@ function transformBlock(lang, blocksConfig, block) {
         const configs = Array.isArray(blockConfig) ? blockConfig : [blockConfig];
         configs.forEach((transformConfig) => {
             const { fields, transformer: transformerRaw, parser } = transformConfig;
-            const transformer = transformerRaw.bind(null, lang);
+            const transformer = (content) => 
+            // eslint-disable-next-line no-useless-call
+            transformerRaw.call(null, lang, content, { plugins });
             if (fields) {
                 fields.forEach((field) => {
                     if (block[field]) {
@@ -49,9 +50,11 @@ function transformBlock(lang, blocksConfig, block) {
     return block;
 }
 const contentTransformer = ({ content, options }) => {
-    const { lang, customConfig = {}, vars } = options;
+    const { lang, customConfig = {}, vars, plugins = [] } = options;
     const { blocks = [] } = (vars ? (0, filter_1.filterContent)(content, vars) : content);
-    const transformedBlocks = transformBlocks(blocks, lang, customConfig);
+    const transformedBlocks = transformBlocks(blocks, lang, customConfig, {
+        plugins,
+    });
     return {
         blocks: transformedBlocks,
     };

package/server/utils/blocks.d.ts

@@ -7,4 +7,4 @@ export declare const getCustomTypes: (types: (keyof CustomConfig)[], customBlock
 export declare const getOrderedBlocks: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock[];
 export declare const getHeaderBlock: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock | undefined;
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;
-export declare const getQaAttrubutes: (qa?: string, customKeys?: Array<string>) => Record<string, string>;
+export declare const getQaAttrubutes: (qa?: string, ...customKeys: (string | Array<string>)[]) => Record<string, string>;

package/server/utils/blocks.js

@@ -40,7 +40,7 @@ const BLOCK_ELEMENTS = [
     'td',
 ];
 const BLOCK_ELEMENTS_REGEX = `<(${BLOCK_ELEMENTS.join('|')})[^>]*>`;
-const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button'];
+const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button', 'animate'];
 function getHeaderTag(size) {
     switch (size) {
         case 'l':
@@ -122,13 +122,14 @@ const getShareLink = (url, type, title, text) => {
     }
 };
 exports.getShareLink = getShareLink;
-const getQaAttrubutes = (qa, customKeys = []) => {
+const getQaAttrubutes = (qa, ...customKeys) => {
     const attributes = {};
     if (qa) {
-        const keys = QA_ATTRIBUTES_KEYS.concat(customKeys);
+        const keys = QA_ATTRIBUTES_KEYS.concat((0, lodash_1.flatten)(customKeys));
         keys.forEach((key) => {
             attributes[(0, lodash_1.camelCase)(key)] = `${qa}-${key}`;
         });
+        attributes.default = qa;
     }
     return attributes;
 };