pb-sxp-ui 1.0.98 → 1.0.100

package/es/materials/sxp/template/CommodityDiro/index.js

@@ -5,8 +5,9 @@ import EventProvider from '../components/EventProvider';
 import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
 import Img from '../components/Img';
+import { setFontForText } from '../../../../core/utils/tool';
 const CommodityDiro = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
     const { sxpParameter } = useSxpDataSource();
     const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
@@ -21,7 +22,11 @@ const CommodityDiro = (_a) => {
                 width: '100%',
                 overflow: 'hidden'
             }) },
-            React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name'),
-            React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now'))));
+            React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
+                    __html: setFontForText((_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+                } }),
+            React.createElement("div", { className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_k = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _k === void 0 ? void 0 : _k.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                    __html: setFontForText((_m = (_l = product === null || product === void 0 ? void 0 : product.bindCta) === null || _l === void 0 ? void 0 : _l.enTitle) !== null && _m !== void 0 ? _m : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                } }))));
 };
 export default memo(CommodityDiro);

package/es/materials/sxp/template/CommodityDiroNew/index.js

@@ -5,6 +5,7 @@ import EventProvider from '../components/EventProvider';
 import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
 import Img from '../components/Img';
+import { setFontForText } from '../../../../core/utils/tool';
 const CommodityDiroNew = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
@@ -21,7 +22,11 @@ const CommodityDiroNew = (_a) => {
                 width: '100%',
                 overflow: 'hidden'
             }) },
-            React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name'),
-            React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop now'))));
+            React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
+                    __html: setFontForText((_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+                } }),
+            React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                    __html: setFontForText((_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                } }))));
 };
 export default memo(CommodityDiroNew);

package/es/materials/sxp/template/Link/index.js

@@ -6,6 +6,7 @@ import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
 import Img from '../components/Img';
+import { setFontForText } from '../../../../core/utils/tool';
 const Link = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index"]);
@@ -28,6 +29,8 @@ const Link = (_a) => {
                 width: '100%',
                 overflow: 'hidden'
             }) },
-            React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle }, (_h = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _h !== void 0 ? _h : 'Product Name'))));
+            React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle, dangerouslySetInnerHTML: {
+                    __html: setFontForText((_h = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _h !== void 0 ? _h : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                } }))));
 };
 export default memo(Link);

package/es/materials/sxp/template/MultiCommodity/index.js

@@ -8,6 +8,7 @@ import Scroll from '../components/Scroll';
 import styles from './index.module.less';
 import { useEditor, useSxpDataSource } from '../../../../core/hooks';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
+import { setFontForText } from '../../../../core/utils/tool';
 const MultiCommodity = (_a) => {
     var _b, _c;
     var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY"]);
@@ -44,8 +45,12 @@ const MultiCommodity = (_a) => {
                     width: '100%',
                     overflow: 'hidden'
                 }) },
-                React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
-                React.createElement("div", { className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_f = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _f === void 0 ? void 0 : _f.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now'))))));
+                React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
+                        __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+                    } }),
+                React.createElement("div", { className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_f = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _f === void 0 ? void 0 : _f.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                        __html: setFontForText((_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                    } }))))));
     })));
 };
 export default memo(MultiCommodity);

package/es/materials/sxp/template/MultiCommodityDiro/index.js

@@ -8,6 +8,7 @@ import Img from '../components/Img';
 import styles from './index.module.less';
 import { useEditor, useSxpDataSource } from '../../../../core/hooks';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
+import { setFontForText } from '../../../../core/utils/tool';
 const MultiCommodityDiro = (_a) => {
     var _b, _c;
     var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY"]);
@@ -32,7 +33,7 @@ const MultiCommodityDiro = (_a) => {
         }
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: item === null || item === void 0 ? void 0 : item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
             React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
             React.createElement("div", { className: css({
@@ -43,8 +44,12 @@ const MultiCommodityDiro = (_a) => {
                     width: '100%',
                     overflow: 'hidden'
                 }) },
-                React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
-                React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))))));
+                React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
+                        __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+                    } }),
+                React.createElement("div", { className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_f = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _f === void 0 ? void 0 : _f.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                        __html: setFontForText((_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                    } }))))));
     })));
 };
 export default memo(MultiCommodityDiro);

package/es/materials/sxp/template/MultiCommodityDiroNew/index.js

@@ -8,6 +8,7 @@ import Img from '../components/Img';
 import styles from './index.module.less';
 import { useEditor, useSxpDataSource } from '../../../../core/hooks';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
+import { setFontForText } from '../../../../core/utils/tool';
 const MultiCommodityDiroNew = (_a) => {
     var _b, _c;
     var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY"]);
@@ -44,8 +45,12 @@ const MultiCommodityDiroNew = (_a) => {
                     overflow: 'hidden',
                     lineHeight: '20px'
                 }) },
-                React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
-                React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop now'))))));
+                React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
+                        __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+                    } }),
+                React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                        __html: setFontForText((_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                    } }))))));
     })));
 };
 export default memo(MultiCommodityDiroNew);

package/es/materials/sxp/template/components/Img.js

@@ -20,6 +20,6 @@ const Img = ({ src, rec, item, index, style, translateY, imgStyle }) => {
     }, [src]);
     return (React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, imgStyle)) },
         React.createElement("div", { ref: ref, hidden: !src, className: css({ width: '100%', height: '100%' }) },
-            React.createElement(FormatImage, { className: css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: imgSrc }))));
+            React.createElement(FormatImage, { className: css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: src }))));
 };
 export default memo(Img);

package/es/materials/sxp/template/components/settingRender.d.ts

@@ -96,27 +96,23 @@ declare const _default: ({
     child: ({
         type: string;
         label: string;
-        child: ({
+        child: {
             type: string;
             name: string[];
-            options?: undefined;
-            initialValue?: undefined;
-            addonAfter?: undefined;
-        } | {
+            bottomText: string;
+        }[];
+        name?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
             type: string;
-            options: {
-                label: string;
-                value: string;
-            }[];
             name: string[];
-            initialValue: string;
             addonAfter?: undefined;
         } | {
             type: string;
             addonAfter: string;
             name: string[];
-            options?: undefined;
-            initialValue?: undefined;
         })[];
         name?: undefined;
     } | {
@@ -150,27 +146,23 @@ declare const _default: ({
     } | {
         type: string;
         label: string;
-        child: ({
+        child: {
             type: string;
             name: string[];
-            options?: undefined;
-            initialValue?: undefined;
-            addonAfter?: undefined;
-        } | {
+            bottomText: string;
+        }[];
+        name?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
             type: string;
-            options: {
-                label: string;
-                value: string;
-            }[];
             name: string[];
-            initialValue: string;
             addonAfter?: undefined;
         } | {
             type: string;
             addonAfter: string;
             name: string[];
-            options?: undefined;
-            initialValue?: undefined;
         })[];
         name?: undefined;
     })[];

package/es/materials/sxp/template/components/settingRender.js

@@ -1,5 +1,3 @@
-var _a, _b;
-import { fontOptions } from '../../defaultSetting';
 export default [
     {
         title: '主题样式',
@@ -117,14 +115,24 @@ export default [
                 label: '字体',
                 child: [
                     {
-                        type: 'Color',
-                        name: ['props', 'ctaTempStyles', 'title', 'color']
+                        type: 'Select',
+                        name: ['props', 'ctaTempStyles', 'title', 'fontFamily-cn'],
+                        bottomText: '中文字体'
                     },
                     {
                         type: 'Select',
-                        options: fontOptions,
-                        name: ['props', 'ctaTempStyles', 'title', 'fontFamily'],
-                        initialValue: (_a = fontOptions === null || fontOptions === void 0 ? void 0 : fontOptions[0]) === null || _a === void 0 ? void 0 : _a.value
+                        name: ['props', 'ctaTempStyles', 'title', 'fontFamily-en'],
+                        bottomText: '英文/其他字体'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['props', 'ctaTempStyles', 'title', 'color']
                     },
                     {
                         type: 'Number',
@@ -196,14 +204,24 @@ export default [
                 label: '字体',
                 child: [
                     {
-                        type: 'Color',
-                        name: ['props', 'ctaTempStyles', 'ctaTitle', 'color']
+                        type: 'Select',
+                        name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontFamily-cn'],
+                        bottomText: '中文字体'
                     },
                     {
                         type: 'Select',
-                        options: fontOptions,
-                        name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontFamily'],
-                        initialValue: (_b = fontOptions === null || fontOptions === void 0 ? void 0 : fontOptions[0]) === null || _b === void 0 ? void 0 : _b.value
+                        name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontFamily-en'],
+                        bottomText: '英文/其他字体'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['props', 'ctaTempStyles', 'ctaTitle', 'color']
                     },
                     {
                         type: 'Number',

package/lib/core/components/SxpPageRender/ExpandableText.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const tool_1 = require("../../../core/utils/tool");
 const react_1 = tslib_1.__importStar(require("react"));
 const limitTextLastWholeWord = (originalText = '', limit) => {
     const chineseRegex = /[\u4e00-\u9fa5]+/;
@@ -48,8 +49,8 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
                 display: '-webkit-box',
                 WebkitBoxOrient: 'vertical',
                 wordBreak: 'break-word'
-            }, dangerouslySetInnerHTML: { __html: text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>') } }),
-        react_1.default.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>') } }),
+            }, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
+        react_1.default.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
         text && isPost && isShow && (react_1.default.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick }, isShowMore ? unfoldText || 'show less' : foldText || 'show more'))));
 };
 exports.default = (0, react_1.memo)(ExpandableText);

package/lib/core/components/SxpPageRender/Hashtag/index.js

@@ -5,6 +5,7 @@ const react_1 = tslib_1.__importStar(require("react"));
 const react_2 = require("swiper/react");
 const hooks_1 = require("../../../../core/hooks");
 const Scroll_1 = tslib_1.__importDefault(require("../../../../materials/sxp/template/components/Scroll"));
+const tool_1 = require("../../../../core/utils/tool");
 const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
     const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
     const { setWaterFallData, setOpenHashtag, setCacheActiveIndex, waterFallData, setIsFromHashtag } = (0, hooks_1.useSxpDataSource)();
@@ -38,6 +39,7 @@ const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
         return (react_1.default.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer', color: '#fff' }, onClick: () => setIsShowMore(!isShowMore) }, isShowMore ? 'show less' : 'show more'));
     }, [isShowMore, tags]);
     return (react_1.default.createElement("div", { className: 'clc-sxp-bottom-hashtag' },
-        react_1.default.createElement(Scroll_1.default, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (react_1.default.createElement(react_2.SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item) }, `#${item}`))))));
+        react_1.default.createElement(Scroll_1.default, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (react_1.default.createElement(react_2.SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item) },
+            react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(`#${item}`, hashTagStyle) } })))))));
 };
 exports.default = (0, react_1.memo)(Hashtag);

package/lib/core/components/SxpPageRender/Navbar.js

@@ -3,11 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const hooks_1 = require("../../../core/hooks");
+const tool_1 = require("../../../core/utils/tool");
 const Navbar = ({ icon, styles, textStyle, onClose }) => {
     var _a;
     const { waterFallData, setOpenHashtag } = (0, hooks_1.useSxpDataSource)();
     return (react_1.default.createElement("div", { className: 'clc-sxp-nav', style: styles },
         react_1.default.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: 'back button', onClick: onClose }),
-        react_1.default.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle }, `#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`)));
+        react_1.default.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle, dangerouslySetInnerHTML: {
+                __html: (0, tool_1.setFontForText)(`#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`, textStyle)
+            } })));
 };
 exports.default = (0, react_1.memo)(Navbar);

package/lib/core/components/SxpPageRender/VideoWidget/index.d.ts

@@ -10,6 +10,7 @@ interface IVideoWidgetProps {
     activeIndex?: number;
     videoPostConfig?: postConfigType;
     videoRef?: any;
+    videoPlayIcon?: string;
 }
 declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
 export default _default;

package/lib/core/components/SxpPageRender/VideoWidget/index.js

@@ -8,7 +8,7 @@ const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
 const hooks_1 = require("../../../../core/hooks");
 const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
 const loading_gif_1 = tslib_1.__importDefault(require("./loading.gif"));
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef }) => {
+const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef, videoPlayIcon }) => {
     const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
     const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = (0, hooks_1.useSxpDataSource)();
     const videoStartTime = (0, react_1.useRef)(0);
@@ -332,7 +332,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             } },
             react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
                 react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
-                react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: PAUSE_ICON }))),
+                react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON }))),
         renderPoster,
         renderLoading)) : (react_1.default.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
             position: 'relative',
@@ -343,6 +343,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
         renderPoster,
         renderLoading,
-        react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'pause' })))));
+        react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
 };
 exports.default = (0, react_1.memo)(VideoWidget);

package/lib/core/components/SxpPageRender/WaterFall/List.js

@@ -7,6 +7,7 @@ const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
 const preview_json_1 = tslib_1.__importDefault(require("./preview.json"));
 const hooks_1 = require("../../../../core/hooks");
 const css_1 = require("@emotion/css");
+const tool_1 = require("../../../../core/utils/tool");
 const WaterfallFlowItem = (props) => {
     const { rec, index, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = (0, hooks_1.useSxpDataSource)();
@@ -112,11 +113,15 @@ const WaterfallFlowItem = (props) => {
                 react_1.default.createElement("canvas", { ref: canvasRef }))),
             react_1.default.createElement(FormatImage_1.default, { loading: 'lazy', className: 'list-content-listItem-picture-img', ref: imgDom })),
         react_1.default.createElement("div", { className: 'list-content-listItem-info' },
-            react_1.default.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}`, style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.title }, title && title),
-            react_1.default.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
+            react_1.default.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}`, style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.title, dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)(title, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title)
+                } }),
+            react_1.default.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText, dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)(priceText, textStyles === null || textStyles === void 0 ? void 0 : textStyles.price)
+                } }))));
 };
 function WaterfallList(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     var { reportTagsView, showBanner } = _a, props = tslib_1.__rest(_a, ["reportTagsView", "showBanner"]);
     const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = (0, hooks_1.useSxpDataSource)();
     const [list, setList] = (0, react_1.useState)();
@@ -178,17 +183,23 @@ function WaterfallList(_a) {
                         objectFit: 'cover',
                         marginBottom: '20px'
                     }), src: (_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.picture }))),
-            react_1.default.createElement("div", { className: 'list-info', style: (_d = props === null || props === void 0 ? void 0 : props.textStyles) === null || _d === void 0 ? void 0 : _d.hashTagDesc }, (_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.info),
-            react_1.default.createElement("div", { hidden: !((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.link), className: 'list-collection', onClick: handleClickLink, style: Object.assign(Object.assign({}, (_g = props === null || props === void 0 ? void 0 : props.textStyles) === null || _g === void 0 ? void 0 : _g.hashTagLink), { marginBottom: props === null || props === void 0 ? void 0 : props.space }) }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection'),
+            react_1.default.createElement("div", { className: 'list-info', style: (_d = props === null || props === void 0 ? void 0 : props.textStyles) === null || _d === void 0 ? void 0 : _d.hashTagDesc, dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.info, (_f = props === null || props === void 0 ? void 0 : props.textStyles) === null || _f === void 0 ? void 0 : _f.hashTagDesc)
+                } }),
+            react_1.default.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), className: 'list-collection', onClick: handleClickLink, style: Object.assign(Object.assign({}, (_h = props === null || props === void 0 ? void 0 : props.textStyles) === null || _h === void 0 ? void 0 : _h.hashTagLink), { marginBottom: props === null || props === void 0 ? void 0 : props.space }), dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)(((_j = data === null || data === void 0 ? void 0 : data.tag) === null || _j === void 0 ? void 0 : _j.linkTitle) || 'Shop the collection', (_k = props === null || props === void 0 ? void 0 : props.textStyles) === null || _k === void 0 ? void 0 : _k.hashTagLink)
+                } }),
             react_1.default.createElement("div", { className: 'list-content' }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
                 return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
             })),
             react_1.default.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
-            react_1.default.createElement("div", { hidden: !((_j = data === null || data === void 0 ? void 0 : data.tag) === null || _j === void 0 ? void 0 : _j.link), style: {
-                    height: ((_k = data === null || data === void 0 ? void 0 : data.tag) === null || _k === void 0 ? void 0 : _k.link) ? ((_l = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _l === void 0 ? void 0 : _l.height) || ((_m = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _m === void 0 ? void 0 : _m.height) || '100px' : 0
+            react_1.default.createElement("div", { hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: {
+                    height: ((_m = data === null || data === void 0 ? void 0 : data.tag) === null || _m === void 0 ? void 0 : _m.link) ? ((_o = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _o === void 0 ? void 0 : _o.height) || ((_p = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _p === void 0 ? void 0 : _p.height) || '100px' : 0
                 } })),
-        react_1.default.createElement("div", { className: 'list-bottom', hidden: !((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
-        react_1.default.createElement("div", { hidden: !((_p = data === null || data === void 0 ? void 0 : data.tag) === null || _p === void 0 ? void 0 : _p.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
-            react_1.default.createElement("button", { "aria-label": ((_q = data === null || data === void 0 ? void 0 : data.tag) === null || _q === void 0 ? void 0 : _q.linkTitle) || 'Shop the collection', className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_r = data === null || data === void 0 ? void 0 : data.tag) === null || _r === void 0 ? void 0 : _r.linkTitle) || 'Shop the collection'))))));
+        react_1.default.createElement("div", { className: 'list-bottom', hidden: !((_q = data === null || data === void 0 ? void 0 : data.tag) === null || _q === void 0 ? void 0 : _q.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
+        react_1.default.createElement("div", { hidden: !((_r = data === null || data === void 0 ? void 0 : data.tag) === null || _r === void 0 ? void 0 : _r.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
+            react_1.default.createElement("button", { "aria-label": ((_s = data === null || data === void 0 ? void 0 : data.tag) === null || _s === void 0 ? void 0 : _s.linkTitle) || 'Shop the collection', className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink, dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)(((_t = data === null || data === void 0 ? void 0 : data.tag) === null || _t === void 0 ? void 0 : _t.linkTitle) || 'Shop the collection', props === null || props === void 0 ? void 0 : props.buttonStyle)
+                } }))))));
 }
 exports.default = WaterfallList;

package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js

@@ -7,6 +7,7 @@ require("./WaterfallList.less");
 const preview_json_1 = tslib_1.__importDefault(require("./preview.json"));
 const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
 const css_1 = require("@emotion/css");
+const tool_1 = require("../../../../core/utils/tool");
 const WaterfallFlowItem = (props) => {
     const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = (0, hooks_1.useSxpDataSource)();
@@ -104,11 +105,15 @@ const WaterfallFlowItem = (props) => {
         react_1.default.createElement("div", { className: 'waterFallList-content-listItem-picture', ref: pictRef },
             react_1.default.createElement(FormatImage_1.default, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', onLoad: imgLoad, ref: imgDom })),
         react_1.default.createElement("div", { className: 'waterFallList-content-listItem-info' },
-            react_1.default.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}`, style: Object.assign({}, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title) }, title && title),
-            react_1.default.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
+            react_1.default.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}`, style: Object.assign({}, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title), dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)(title, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title)
+                } }),
+            react_1.default.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price, dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)(priceText, textStyles === null || textStyles === void 0 ? void 0 : textStyles.price)
+                } }))));
 };
 function WaterfallList(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
     var { reportTagsView, showBanner } = _a, props = tslib_1.__rest(_a, ["reportTagsView", "showBanner"]);
     const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = (0, hooks_1.useSxpDataSource)();
     const scrollParent = (0, react_1.useRef)(null);
@@ -286,24 +291,30 @@ function WaterfallList(_a) {
                         objectFit: 'cover',
                         marginBottom: '20px'
                     }), src: (_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.picture }))),
-            react_1.default.createElement("div", { className: 'waterFallList-info', style: (_d = props === null || props === void 0 ? void 0 : props.textStyles) === null || _d === void 0 ? void 0 : _d.hashTagDesc }, (_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.info),
-            react_1.default.createElement("div", { hidden: !((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.link), className: 'waterFallList-collection', style: Object.assign({}, (_g = props === null || props === void 0 ? void 0 : props.textStyles) === null || _g === void 0 ? void 0 : _g.hashTagLink), onClick: handleClickLink }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection'),
+            react_1.default.createElement("div", { className: 'waterFallList-info', style: (_d = props === null || props === void 0 ? void 0 : props.textStyles) === null || _d === void 0 ? void 0 : _d.hashTagDesc, dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.info, (_f = props === null || props === void 0 ? void 0 : props.textStyles) === null || _f === void 0 ? void 0 : _f.hashTagDesc)
+                } }),
+            react_1.default.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), className: 'waterFallList-collection', style: Object.assign({}, (_h = props === null || props === void 0 ? void 0 : props.textStyles) === null || _h === void 0 ? void 0 : _h.hashTagLink), onClick: handleClickLink, dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)(((_j = data === null || data === void 0 ? void 0 : data.tag) === null || _j === void 0 ? void 0 : _j.linkTitle) || 'Shop the collection', (_k = props === null || props === void 0 ? void 0 : props.textStyles) === null || _k === void 0 ? void 0 : _k.hashTagLink)
+                } }),
             react_1.default.createElement("div", { className: 'waterFallList-content' }, list === null || list === void 0 ? void 0 :
                 list.map((item, ind) => {
                     var _a;
                     return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + ((_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.clientHeight), style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
                 }),
-                react_1.default.createElement("div", { hidden: !((_j = data === null || data === void 0 ? void 0 : data.tag) === null || _j === void 0 ? void 0 : _j.link), style: {
+                react_1.default.createElement("div", { hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: {
                         position: 'absolute',
                         width: '100%',
-                        transform: `translate(0px,${(_p = ((_l = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_k = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _k === void 0 ? void 0 : _k.length) - 1]) === null || _l === void 0 ? void 0 : _l.top) +
-                            ((_o = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_m = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _m === void 0 ? void 0 : _m.length) - 1]) === null || _o === void 0 ? void 0 : _o.height)) !== null && _p !== void 0 ? _p : 0}px)`,
-                        height: ((_q = data === null || data === void 0 ? void 0 : data.tag) === null || _q === void 0 ? void 0 : _q.link)
-                            ? ((_r = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _r === void 0 ? void 0 : _r.offsetHeight) || ((_s = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _s === void 0 ? void 0 : _s.height) || '100px'
+                        transform: `translate(0px,${(_r = ((_o = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_m = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _m === void 0 ? void 0 : _m.length) - 1]) === null || _o === void 0 ? void 0 : _o.top) +
+                            ((_q = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_p = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _p === void 0 ? void 0 : _p.length) - 1]) === null || _q === void 0 ? void 0 : _q.height)) !== null && _r !== void 0 ? _r : 0}px)`,
+                        height: ((_s = data === null || data === void 0 ? void 0 : data.tag) === null || _s === void 0 ? void 0 : _s.link)
+                            ? ((_t = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _t === void 0 ? void 0 : _t.offsetHeight) || ((_u = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _u === void 0 ? void 0 : _u.height) || '100px'
                             : 0
                     } }))),
-        react_1.default.createElement("div", { className: 'waterFallList-bottom', hidden: !((_t = data === null || data === void 0 ? void 0 : data.tag) === null || _t === void 0 ? void 0 : _t.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
-        react_1.default.createElement("div", { ref: buttonRef, hidden: !((_u = data === null || data === void 0 ? void 0 : data.tag) === null || _u === void 0 ? void 0 : _u.link), className: 'waterFallList-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
-            react_1.default.createElement("button", { "aria-label": ((_v = data === null || data === void 0 ? void 0 : data.tag) === null || _v === void 0 ? void 0 : _v.linkTitle) || 'Shop the collection', className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_w = data === null || data === void 0 ? void 0 : data.tag) === null || _w === void 0 ? void 0 : _w.linkTitle) || 'Shop the collection'))))));
+        react_1.default.createElement("div", { className: 'waterFallList-bottom', hidden: !((_v = data === null || data === void 0 ? void 0 : data.tag) === null || _v === void 0 ? void 0 : _v.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
+        react_1.default.createElement("div", { ref: buttonRef, hidden: !((_w = data === null || data === void 0 ? void 0 : data.tag) === null || _w === void 0 ? void 0 : _w.link), className: 'waterFallList-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
+            react_1.default.createElement("button", { "aria-label": ((_x = data === null || data === void 0 ? void 0 : data.tag) === null || _x === void 0 ? void 0 : _x.linkTitle) || 'Shop the collection', className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink, dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)(((_y = data === null || data === void 0 ? void 0 : data.tag) === null || _y === void 0 ? void 0 : _y.linkTitle) || 'Shop the collection', props === null || props === void 0 ? void 0 : props.buttonStyle)
+                } }))))));
 }
 exports.default = WaterfallList;

package/lib/core/components/SxpPageRender/index.d.ts

@@ -35,6 +35,7 @@ export interface ISxpPageRenderProps {
         likeIconXPosit?: string;
         swipeTipOffset?: number;
         consent?: any[];
+        videoPlayIcon?: string;
     };
     descStyle?: CSSProperties;
     tipText?: {

package/lib/core/components/SxpPageRender/index.js

@@ -188,7 +188,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const renderContent = (0, react_1.useCallback)((rec, index) => {
         var _a, _b, _c, _d;
         if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-            return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef.current }));
+            return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef.current, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
         }
         if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
             return (react_1.default.createElement(PictureGroup_1.default, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
@@ -210,6 +210,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         isMuted,
         activeIndex,
         globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost,
+        globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon,
         viewTime,
         tipText,
         resolver,

package/lib/core/context/EditorDataProvider.d.ts

@@ -20,6 +20,7 @@ interface IEditorDataContext {
     setOpenHashtag?: React.Dispatch<React.SetStateAction<boolean>>;
     openConsent?: boolean;
     setOpenConsent?: React.Dispatch<React.SetStateAction<boolean>>;
+    sxpFontLinks?: any[];
 }
 interface IEditorProviderProps {
     data?: any;

package/lib/core/context/EditorDataProvider.js

@@ -28,7 +28,8 @@ const EditorDataProvider = ({ children, data }) => {
             openHashtag,
             setOpenHashtag,
             openConsent,
-            setOpenConsent
+            setOpenConsent,
+            sxpFontLinks: data === null || data === void 0 ? void 0 : data.sxpFontLinks
         } }, children));
 };
 function useEditorDataProvider() {