@gravity-ui/page-constructor 3.17.2 → 3.18.0-alpha.0

package/build/cjs/blocks/Slider/Slider.css

@@ -370,7 +370,9 @@ unpredictable css rules order in build */
     padding-left: 0;
   }
   .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-slide {
-    padding-right: 0;
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+    /* stylelint-enable declaration-no-important */
   }
   .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-slide:last-child {
     padding-right: 0;

package/build/cjs/components/MetaInfo/MetaInfo.css

@@ -5,8 +5,6 @@ unpredictable css rules order in build */
   line-height: var(--yc-text-body-2-line-height);
   display: flex;
   align-items: center;
-  font-weight: 500;
-  color: var(--pc-media-card-meta-info-color);
 }
 .pc-meta-info__item:not(:first-child) {
   margin-left: 16px;

package/build/cjs/components/MetaInfo/MetaInfo.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
+const index_1 = require("../index");
 const b = (0, utils_1.block)('meta-info');
-const MetaInfo = ({ items, className }) => (react_1.default.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (react_1.default.createElement("span", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
+const MetaInfo = ({ items, className }) => (react_1.default.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (react_1.default.createElement(index_1.YFMWrapper, { content: metaInfoItem, key: metaInfoItem, className: b('item'), modifiers: { constructor: true, constructorMetaInfo: true } })))));
 exports.default = MetaInfo;

package/build/cjs/components/ReactPlayer/ReactPlayer.js

@@ -36,6 +36,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const [started, setStarted] = (0, react_1.useState)(autoPlay);
     const [paused, setPaused] = (0, react_1.useState)(false);
     const [ended, setEnded] = (0, react_1.useState)(false);
+    const [isMounted, setIsMounted] = react_1.default.useState(false);
+    (0, hooks_1.useMount)(() => setIsMounted(true));
     const videoSrc = (0, react_1.useMemo)(() => (0, utils_2.checkYoutubeVideos)(src), [src]);
     const eventsArray = (0, react_1.useMemo)(() => {
         if (analyticsEvents) {
@@ -194,9 +196,9 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 },
             }, elapsedTimePercent: elapsedTimePercent }));
     }, [controls, isPlaying, customBarControlsClassName, changeMute]);
-    return (react_1.default.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
+    return (react_1.default.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick }, isMounted ? (react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement(react_player_1.default, { className: b('player'), url: videoSrc, muted: muted, controls: controls === models_1.MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded }),
-        renderCustomBarControls(muted, playedPercent)));
+        renderCustomBarControls(muted, playedPercent))) : null));
 });
 function getHeight(width) {
     return (width / 16) * 9;

package/build/cjs/containers/PageConstructor/PageConstructor.css

@@ -64,6 +64,10 @@ unpredictable css rules order in build */
 .yfm_constructor.yfm_constructor_notice p {
   color: var(--yc-color-text-secondary);
 }
+.yfm_constructor.yfm_constructor_meta_info p {
+  color: var(--pc-media-card-meta-info-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
 .yfm_constructor.yfm_constructor ul,
 .yfm_constructor.yfm_constructor ol,
 .yfm_constructor.yfm_constructor li,

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

@@ -125,7 +125,7 @@ exports.config = {
         {
             fields: ['metaInfo'],
             parser: (0, common_1.createItemsParser)([]),
-            transformer: common_1.typografTransformer,
+            transformer: common_1.yfmTransformer,
         },
     ],
     [models_1.SubBlockType.Quote]: {

package/build/esm/blocks/Slider/Slider.css

@@ -370,7 +370,9 @@ unpredictable css rules order in build */
     padding-left: 0;
   }
   .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-slide {
-    padding-right: 0;
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+    /* stylelint-enable declaration-no-important */
   }
   .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-slide:last-child {
     padding-right: 0;

package/build/esm/components/MetaInfo/MetaInfo.css

@@ -5,8 +5,6 @@ unpredictable css rules order in build */
   line-height: var(--yc-text-body-2-line-height);
   display: flex;
   align-items: center;
-  font-weight: 500;
-  color: var(--pc-media-card-meta-info-color);
 }
 .pc-meta-info__item:not(:first-child) {
   margin-left: 16px;

package/build/esm/components/MetaInfo/MetaInfo.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { block } from '../../utils';
+import { YFMWrapper } from '../index';
 import './MetaInfo.css';
 const b = block('meta-info');
-const MetaInfo = ({ items, className }) => (React.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (React.createElement("span", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
+const MetaInfo = ({ items, className }) => (React.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (React.createElement(YFMWrapper, { content: metaInfoItem, key: metaInfoItem, className: b('item'), modifiers: { constructor: true, constructorMetaInfo: true } })))));
 export default MetaInfo;

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -1,11 +1,11 @@
-import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import React, { Fragment, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import _ from 'lodash';
 import ReactPlayer from 'react-player';
 import { MetrikaContext } from '../../context/metrikaContext';
 import { MobileContext } from '../../context/mobileContext';
 import { VideoContext } from '../../context/videoContext';
-import { useAnalytics } from '../../hooks';
+import { useAnalytics, useMount } from '../../hooks';
 import { PlayVideo } from '../../icons';
 import { DefaultEventNames, MediaVideoControlsType, PlayButtonThemes, PlayButtonType, PredefinedEventTypes, } from '../../models';
 import { block } from '../../utils';
@@ -33,6 +33,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const [started, setStarted] = useState(autoPlay);
     const [paused, setPaused] = useState(false);
     const [ended, setEnded] = useState(false);
+    const [isMounted, setIsMounted] = React.useState(false);
+    useMount(() => setIsMounted(true));
     const videoSrc = useMemo(() => checkYoutubeVideos(src), [src]);
     const eventsArray = useMemo(() => {
         if (analyticsEvents) {
@@ -191,9 +193,9 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 },
             }, elapsedTimePercent: elapsedTimePercent }));
     }, [controls, isPlaying, customBarControlsClassName, changeMute]);
-    return (React.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
+    return (React.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick }, isMounted ? (React.createElement(Fragment, null,
         React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded }),
-        renderCustomBarControls(muted, playedPercent)));
+        renderCustomBarControls(muted, playedPercent))) : null));
 });
 function getHeight(width) {
     return (width / 16) * 9;

package/build/esm/containers/PageConstructor/PageConstructor.css

@@ -64,6 +64,10 @@ unpredictable css rules order in build */
 .yfm_constructor.yfm_constructor_notice p {
   color: var(--yc-color-text-secondary);
 }
+.yfm_constructor.yfm_constructor_meta_info p {
+  color: var(--pc-media-card-meta-info-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
 .yfm_constructor.yfm_constructor ul,
 .yfm_constructor.yfm_constructor ol,
 .yfm_constructor.yfm_constructor li,

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

@@ -122,7 +122,7 @@ export const config = {
         {
             fields: ['metaInfo'],
             parser: createItemsParser([]),
-            transformer: typografTransformer,
+            transformer: yfmTransformer,
         },
     ],
     [SubBlockType.Quote]: {

package/package.json

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

package/server/text-transform/config.js

@@ -135,7 +135,7 @@ exports.config = {
         {
             fields: ['metaInfo'],
             parser: (0, common_1.createItemsParser)([]),
-            transformer: common_1.typografTransformer,
+            transformer: common_1.yfmTransformer,
         },
     ],
     [models_1.SubBlockType.Quote]: {

package/styles/styles.css

@@ -30,6 +30,10 @@ unpredictable css rules order in build */
 .yfm_constructor.yfm_constructor_notice p {
   color: var(--yc-color-text-secondary);
 }
+.yfm_constructor.yfm_constructor_meta_info p {
+  color: var(--pc-media-card-meta-info-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
 .yfm_constructor.yfm_constructor ul,
 .yfm_constructor.yfm_constructor ol,
 .yfm_constructor.yfm_constructor li,

package/styles/yfm.scss

@@ -34,6 +34,13 @@
             }
         }
 
+        &_meta_info {
+            p {
+                color: var(--pc-media-card-meta-info-color);
+                font-weight: var(--g-text-accent-font-weight);
+            }
+        }
+
         ul,
         ol,
         li,