diff --git a/packages/bot-web-ui/package.json b/packages/bot-web-ui/package.json index c59394543f95..fd894baec8f5 100644 --- a/packages/bot-web-ui/package.json +++ b/packages/bot-web-ui/package.json @@ -104,6 +104,7 @@ "react-router-dom": "^5.2.0", "react-toastify": "^9.1.3", "react-transition-group": "4.4.2", + "html-react-parser": "5.1.12", "yup": "^0.32.11" } } diff --git a/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/descriptions/strategy-description.tsx b/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/descriptions/strategy-description.tsx index 702cdf056c70..b27ca487eef0 100644 --- a/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/descriptions/strategy-description.tsx +++ b/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/descriptions/strategy-description.tsx @@ -3,6 +3,7 @@ import classNames from 'classnames'; import { Text } from '@deriv/components'; import { observer, useStore } from '@deriv/stores'; import { TStrategyDescription } from '../types'; +import parse from 'html-react-parser'; const StrategyDescription = observer(({ item, font_size }: TStrategyDescription) => { const { ui } = useStore(); @@ -13,11 +14,14 @@ const StrategyDescription = observer(({ item, font_size }: TStrategyDescription) const class_names = classNames(`qs__description__content ${class_name}`); return ( <> - {item?.content?.map((text: string) => ( -
- -
- ))} + {item?.content?.map((text: string) => { + const parsed_text = parse(text); + return ( +
+ {parsed_text} +
+ ); + })} ); } @@ -25,11 +29,14 @@ const StrategyDescription = observer(({ item, font_size }: TStrategyDescription) const class_names = classNames(`qs__description__content italic ${class_name}`); return ( <> - {item?.content?.map((text: string) => ( -
- -
- ))} + {item?.content?.map((text: string) => { + const parsed_text = parse(text); + return ( +
+ {parsed_text} +
+ ); + })} ); } diff --git a/packages/bot-web-ui/src/pages/tutorials/faq-content/index.tsx b/packages/bot-web-ui/src/pages/tutorials/faq-content/index.tsx index 83bc82959552..3447dcda6753 100644 --- a/packages/bot-web-ui/src/pages/tutorials/faq-content/index.tsx +++ b/packages/bot-web-ui/src/pages/tutorials/faq-content/index.tsx @@ -5,6 +5,7 @@ import { Localize } from '@deriv/translations'; import { DBOT_TABS } from 'Constants/bot-contents'; import { useDBotStore } from 'Stores/useDBotStore'; import { TDescription } from '../tutorials.types'; +import parse from 'html-react-parser'; type TFAQContent = { faq_list: TFAQList[]; @@ -19,7 +20,7 @@ type TFAQList = { const FAQ = ({ type, content = '', src, imageclass, is_mobile }: TDescription) => { if (type === 'image') return ; - + const parsed_content = parse(content); return ( + > + {parsed_content} + ); };