[BOT]maryia/BOT-2108/refactor: Remove dangerouslySetInnerHTML (deriv-…

…com#16514) * refactor: Remove dangerouslySetInnerHTML * chore: Empty-Commit * chore: Empty-Commit
niloofar-deriv · Aug 20, 2024 · 5f6c23b · 5f6c23b
1 parent ce39c61
commit 5f6c23b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git 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/...ges/bot-web-ui/src/pages/bot-builder/quick-strategy/descriptions/strategy-description.tsx b/...ges/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,23 +14,29 @@ const StrategyDescription = observer(({ item, font_size }: TStrategyDescription)
             const class_names = classNames(`qs__description__content ${class_name}`);
             return (
                 <>
-                    {item?.content?.map((text: string) => (
-                        <div className={class_names} key={text}>
-                            <Text size={font_size} dangerouslySetInnerHTML={{ __html: text }} />
-                        </div>
-                    ))}
+                    {item?.content?.map((text: string) => {
+                        const parsed_text = parse(text);
+                        return (
+                            <div className={class_names} key={text}>
+                                <Text size={font_size}>{parsed_text}</Text>
+                            </div>
+                        );
+                    })}
                 </>
             );
         }
         case 'text_italic': {
             const class_names = classNames(`qs__description__content italic ${class_name}`);
             return (
                 <>
-                    {item?.content?.map((text: string) => (
-                        <div className={class_names} key={text}>
-                            <Text size={font_size} dangerouslySetInnerHTML={{ __html: text }} />
-                        </div>
-                    ))}
+                    {item?.content?.map((text: string) => {
+                        const parsed_text = parse(text);
+                        return (
+                            <div className={class_names} key={text}>
+                                <Text size={font_size}>{parsed_text}</Text>
+                            </div>
+                        );
+                    })}
                 </>
             );
         }

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
@@ -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 <img src={src} className={imageclass} />;
-
+    const parsed_content = parse(content);
     return (
         <Text
             as='p'
@@ -28,8 +29,9 @@ const FAQ = ({ type, content = '', src, imageclass, is_mobile }: TDescription) =
             className='faq__description'
             weight='normal'
             key={content}
-            dangerouslySetInnerHTML={{ __html: content }}
-        />
+        >
+            {parsed_content}
+        </Text>
     );
 };