From d4874492241b09c2fdcda6b67d44ad915d7822b6 Mon Sep 17 00:00:00 2001
From: RR3b3l0 <ruben.rato96@gmail.com>
Date: Wed, 27 Dec 2023 12:10:58 +0000
Subject: [PATCH 1/7] [ts-migration] Migrate HTMLEngineProvider component

---
 ...Provider.js => BaseHTMLEngineProvider.tsx} | 67 ++++++++++---------
 .../HTMLEngineProvider/htmlEnginePropTypes.js | 15 -----
 ...{htmlEngineUtils.js => htmlEngineUtils.ts} | 33 ++++-----
 src/components/HTMLEngineProvider/index.js    | 22 ------
 .../{index.native.js => index.native.tsx}     | 10 ++-
 src/components/HTMLEngineProvider/index.tsx   | 22 ++++++
 src/components/HTMLEngineProvider/types.ts    | 14 ++++
 7 files changed, 86 insertions(+), 97 deletions(-)
 rename src/components/HTMLEngineProvider/{BaseHTMLEngineProvider.js => BaseHTMLEngineProvider.tsx} (54%)
 delete mode 100644 src/components/HTMLEngineProvider/htmlEnginePropTypes.js
 rename src/components/HTMLEngineProvider/{htmlEngineUtils.js => htmlEngineUtils.ts} (57%)
 delete mode 100755 src/components/HTMLEngineProvider/index.js
 rename src/components/HTMLEngineProvider/{index.native.js => index.native.tsx} (56%)
 create mode 100755 src/components/HTMLEngineProvider/index.tsx
 create mode 100644 src/components/HTMLEngineProvider/types.ts

diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
similarity index 54%
rename from src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
rename to src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
index 0b5cbad29983..13d20608266d 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
@@ -1,27 +1,19 @@
-import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
-import {defaultHTMLElementModels, RenderHTMLConfigProvider, TRenderEngineProvider} from 'react-native-render-html';
-import _ from 'underscore';
+import {TextProps} from 'react-native';
+import {HTMLContentModel, HTMLElementModel, RenderHTMLConfigProvider, TRenderEngineProvider} from 'react-native-render-html';
 import useThemeStyles from '@hooks/useThemeStyles';
 import convertToLTR from '@libs/convertToLTR';
 import singleFontFamily from '@styles/utils/fontFamily/singleFontFamily';
 import * as HTMLEngineUtils from './htmlEngineUtils';
 import htmlRenderers from './HTMLRenderers';
+import {HTMLEngineProviderProps} from './types';
 
-const propTypes = {
+type BaseHTMLEngineProviderProps = HTMLEngineProviderProps & {
     /** Whether text elements should be selectable */
-    textSelectable: PropTypes.bool,
+    textSelectable?: boolean;
 
     /** Handle line breaks according to the HTML standard (default on web)  */
-    enableExperimentalBRCollapsing: PropTypes.bool,
-
-    children: PropTypes.node,
-};
-
-const defaultProps = {
-    textSelectable: false,
-    children: null,
-    enableExperimentalBRCollapsing: false,
+    enableExperimentalBRCollapsing?: boolean;
 };
 
 // We are using the explicit composite architecture for performance gains.
@@ -29,52 +21,62 @@ const defaultProps = {
 // context to RenderHTMLSource components. See https://git.io/JRcZb
 // Beware that each prop should be referentialy stable between renders to avoid
 // costly invalidations and commits.
-function BaseHTMLEngineProvider(props) {
+function BaseHTMLEngineProvider({textSelectable = false, children, enableExperimentalBRCollapsing = false}: BaseHTMLEngineProviderProps) {
     const styles = useThemeStyles();
 
     // Declare nonstandard tags and their content model here
+    /* eslint-disable @typescript-eslint/naming-convention */
     const customHTMLElementModels = useMemo(
         () => ({
-            edited: defaultHTMLElementModels.span.extend({
+            edited: HTMLElementModel.fromCustomModel({
                 tagName: 'edited',
+                contentModel: HTMLContentModel.textual,
             }),
-            'alert-text': defaultHTMLElementModels.div.extend({
+            'alert-text': HTMLElementModel.fromCustomModel({
                 tagName: 'alert-text',
                 mixedUAStyles: {...styles.formError, ...styles.mb0},
+                contentModel: HTMLContentModel.block,
             }),
-            'muted-text': defaultHTMLElementModels.div.extend({
+            'muted-text': HTMLElementModel.fromCustomModel({
                 tagName: 'muted-text',
                 mixedUAStyles: {...styles.colorMuted, ...styles.mb0},
+                contentModel: HTMLContentModel.block,
             }),
-            comment: defaultHTMLElementModels.div.extend({
+            comment: HTMLElementModel.fromCustomModel({
                 tagName: 'comment',
                 mixedUAStyles: {whiteSpace: 'pre'},
+                contentModel: HTMLContentModel.block,
             }),
-            'email-comment': defaultHTMLElementModels.div.extend({
+            'email-comment': HTMLElementModel.fromCustomModel({
                 tagName: 'email-comment',
                 mixedUAStyles: {whiteSpace: 'normal'},
+                contentModel: HTMLContentModel.block,
             }),
-            strong: defaultHTMLElementModels.span.extend({
+            strong: HTMLElementModel.fromCustomModel({
                 tagName: 'strong',
                 mixedUAStyles: {whiteSpace: 'pre'},
+                contentModel: HTMLContentModel.textual,
             }),
-            'mention-user': defaultHTMLElementModels.span.extend({tagName: 'mention-user'}),
-            'mention-here': defaultHTMLElementModels.span.extend({tagName: 'mention-here'}),
-            'next-step': defaultHTMLElementModels.span.extend({
-                tagName: 'next-step',
+            'mention-user': HTMLElementModel.fromCustomModel({tagName: 'mention-user', contentModel: HTMLContentModel.textual}),
+            'mention-here': HTMLElementModel.fromCustomModel({tagName: 'mention-here', contentModel: HTMLContentModel.textual}),
+            'next-steps': HTMLElementModel.fromCustomModel({
+                tagName: 'next-steps',
                 mixedUAStyles: {...styles.textLabelSupporting},
+                contentModel: HTMLContentModel.textual,
             }),
-            'next-step-email': defaultHTMLElementModels.span.extend({tagName: 'next-step-email'}),
-            video: defaultHTMLElementModels.div.extend({
+            'next-steps-email': HTMLElementModel.fromCustomModel({tagName: 'next-steps-email', contentModel: HTMLContentModel.textual}),
+            video: HTMLElementModel.fromCustomModel({
                 tagName: 'video',
                 mixedUAStyles: {whiteSpace: 'pre'},
+                contentModel: HTMLContentModel.block,
             }),
         }),
         [styles.colorMuted, styles.formError, styles.mb0, styles.textLabelSupporting],
     );
+    /* eslint-enable @typescript-eslint/naming-convention */
 
     // We need to memoize this prop to make it referentially stable.
-    const defaultTextProps = useMemo(() => ({selectable: props.textSelectable, allowFontScaling: false, textBreakStrategy: 'simple'}), [props.textSelectable]);
+    const defaultTextProps: TextProps = useMemo(() => ({selectable: textSelectable, allowFontScaling: false, textBreakStrategy: 'simple'}), [textSelectable]);
     const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};
     return (
         <TRenderEngineProvider
@@ -82,7 +84,7 @@ function BaseHTMLEngineProvider(props) {
             baseStyle={styles.webViewStyles.baseFontStyle}
             tagsStyles={styles.webViewStyles.tagStyles}
             enableCSSInlineProcessing={false}
-            systemFonts={_.values(singleFontFamily)}
+            systemFonts={Object.values(singleFontFamily)}
             domVisitors={{
                 // eslint-disable-next-line no-param-reassign
                 onText: (text) => (text.data = convertToLTR(text.data)),
@@ -91,18 +93,17 @@ function BaseHTMLEngineProvider(props) {
             <RenderHTMLConfigProvider
                 defaultTextProps={defaultTextProps}
                 defaultViewProps={defaultViewProps}
+                // @ts-expect-error TODO: Remove this once HTMLRenderers (https://github.com/Expensify/App/issues/25154) is migrated to TypeScript.
                 renderers={htmlRenderers}
                 computeEmbeddedMaxWidth={HTMLEngineUtils.computeEmbeddedMaxWidth}
-                enableExperimentalBRCollapsing={props.enableExperimentalBRCollapsing}
+                enableExperimentalBRCollapsing={enableExperimentalBRCollapsing}
             >
-                {props.children}
+                {children}
             </RenderHTMLConfigProvider>
         </TRenderEngineProvider>
     );
 }
 
 BaseHTMLEngineProvider.displayName = 'BaseHTMLEngineProvider';
-BaseHTMLEngineProvider.propTypes = propTypes;
-BaseHTMLEngineProvider.defaultProps = defaultProps;
 
 export default BaseHTMLEngineProvider;
diff --git a/src/components/HTMLEngineProvider/htmlEnginePropTypes.js b/src/components/HTMLEngineProvider/htmlEnginePropTypes.js
deleted file mode 100644
index 6c8537c8d228..000000000000
--- a/src/components/HTMLEngineProvider/htmlEnginePropTypes.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import PropTypes from 'prop-types';
-
-const propTypes = {
-    children: PropTypes.node,
-
-    /** Optional debug flag. Prints the TRT in the console when true. */
-    debug: PropTypes.bool,
-};
-
-const defaultProps = {
-    children: null,
-    debug: false,
-};
-
-export {propTypes, defaultProps};
diff --git a/src/components/HTMLEngineProvider/htmlEngineUtils.js b/src/components/HTMLEngineProvider/htmlEngineUtils.ts
similarity index 57%
rename from src/components/HTMLEngineProvider/htmlEngineUtils.js
rename to src/components/HTMLEngineProvider/htmlEngineUtils.ts
index 4495cb8ff136..4ed949fde6aa 100644
--- a/src/components/HTMLEngineProvider/htmlEngineUtils.js
+++ b/src/components/HTMLEngineProvider/htmlEngineUtils.ts
@@ -1,4 +1,5 @@
-import lodashGet from 'lodash/get';
+import {TNode} from 'react-native-render-html';
+import { Predicate } from './types';
 
 const MAX_IMG_DIMENSIONS = 512;
 
@@ -7,12 +8,12 @@ const MAX_IMG_DIMENSIONS = 512;
  * is used by the HTML component in the default renderer for img tags to scale
  * down images that would otherwise overflow horizontally.
  *
- * @param {string} tagName - The name of the tag for which max width should be constrained.
- * @param {number} contentWidth - The content width provided to the HTML
+ * @param tagName - The name of the tag for which max width should be constrained.
+ * @param contentWidth - The content width provided to the HTML
  * component.
- * @returns {number} The minimum between contentWidth and MAX_IMG_DIMENSIONS
+ * @returns The minimum between contentWidth and MAX_IMG_DIMENSIONS
  */
-function computeEmbeddedMaxWidth(tagName, contentWidth) {
+function computeEmbeddedMaxWidth(contentWidth: number, tagName: string): number {
     if (tagName === 'img') {
         return Math.min(MAX_IMG_DIMENSIONS, contentWidth);
     }
@@ -22,21 +23,15 @@ function computeEmbeddedMaxWidth(tagName, contentWidth) {
 /**
  * Check if tagName is equal to any of our custom tags wrapping chat comments.
  *
- * @param {string} tagName
- * @returns {Boolean}
  */
-function isCommentTag(tagName) {
+function isCommentTag(tagName?: string): boolean {
     return tagName === 'email-comment' || tagName === 'comment';
 }
 
 /**
  * Check if there is an ancestor node for which the predicate returns true.
- *
- * @param {TNode} tnode
- * @param {Function} predicate
- * @returns {Boolean}
  */
-function isChildOfNode(tnode, predicate) {
+function isChildOfNode(tnode: TNode, predicate: Predicate): boolean {
     let currentNode = tnode.parent;
     while (currentNode) {
         if (predicate(currentNode)) {
@@ -50,21 +45,17 @@ function isChildOfNode(tnode, predicate) {
 /**
  * Check if there is an ancestor node with name 'comment'.
  * Finding node with name 'comment' flags that we are rendering a comment.
- * @param {TNode} tnode
- * @returns {Boolean}
  */
-function isChildOfComment(tnode) {
-    return isChildOfNode(tnode, (node) => isCommentTag(lodashGet(node, 'domNode.name', '')));
+function isChildOfComment(tnode: TNode): boolean {
+    return isChildOfNode(tnode, (node) => isCommentTag(node.domNode?.name));
 }
 
 /**
  * Check if there is an ancestor node with the name 'h1'.
  * Finding a node with the name 'h1' flags that we are rendering inside an h1 element.
- * @param {TNode} tnode
- * @returns {Boolean}
  */
-function isChildOfH1(tnode) {
-    return isChildOfNode(tnode, (node) => lodashGet(node, 'domNode.name', '').toLowerCase() === 'h1');
+function isChildOfH1(tnode: TNode): boolean {
+    return isChildOfNode(tnode, (node) => node.domNode?.name.toLowerCase() === 'h1');
 }
 
 export {computeEmbeddedMaxWidth, isChildOfComment, isCommentTag, isChildOfH1};
diff --git a/src/components/HTMLEngineProvider/index.js b/src/components/HTMLEngineProvider/index.js
deleted file mode 100755
index 8a8e96269411..000000000000
--- a/src/components/HTMLEngineProvider/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import withWindowDimensions from '@components/withWindowDimensions';
-import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import BaseHTMLEngineProvider from './BaseHTMLEngineProvider';
-import {defaultProps, propTypes} from './htmlEnginePropTypes';
-
-function HTMLEngineProvider(props) {
-    return (
-        <BaseHTMLEngineProvider
-            debug={props.debug}
-            textSelectable={!DeviceCapabilities.canUseTouchScreen() || !props.isSmallScreenWidth}
-        >
-            {props.children}
-        </BaseHTMLEngineProvider>
-    );
-}
-
-HTMLEngineProvider.displayName = 'HTMLEngineProvider';
-HTMLEngineProvider.propTypes = propTypes;
-HTMLEngineProvider.defaultProps = defaultProps;
-
-export default withWindowDimensions(HTMLEngineProvider);
diff --git a/src/components/HTMLEngineProvider/index.native.js b/src/components/HTMLEngineProvider/index.native.tsx
similarity index 56%
rename from src/components/HTMLEngineProvider/index.native.js
rename to src/components/HTMLEngineProvider/index.native.tsx
index f760a5a36649..70a1363471db 100755
--- a/src/components/HTMLEngineProvider/index.native.js
+++ b/src/components/HTMLEngineProvider/index.native.tsx
@@ -1,20 +1,18 @@
 import React from 'react';
 import BaseHTMLEngineProvider from './BaseHTMLEngineProvider';
-import {defaultProps, propTypes} from './htmlEnginePropTypes';
+import {HTMLEngineProviderProps} from './types';
 
-function HTMLEngineProvider(props) {
+function HTMLEngineProvider({debug = false, children = null}: HTMLEngineProviderProps) {
     return (
         <BaseHTMLEngineProvider
-            debug={props.debug}
+            debug={debug}
             enableExperimentalBRCollapsing
         >
-            {props.children}
+            {children}
         </BaseHTMLEngineProvider>
     );
 }
 
 HTMLEngineProvider.displayName = 'HTMLEngineProvider';
-HTMLEngineProvider.propTypes = propTypes;
-HTMLEngineProvider.defaultProps = defaultProps;
 
 export default HTMLEngineProvider;
diff --git a/src/components/HTMLEngineProvider/index.tsx b/src/components/HTMLEngineProvider/index.tsx
new file mode 100755
index 000000000000..b16308cf6899
--- /dev/null
+++ b/src/components/HTMLEngineProvider/index.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import BaseHTMLEngineProvider from './BaseHTMLEngineProvider';
+import {HTMLEngineProviderProps} from './types';
+
+function HTMLEngineProvider({debug = false, children = null}: HTMLEngineProviderProps) {
+    const {isSmallScreenWidth} = useWindowDimensions();
+
+    return (
+        <BaseHTMLEngineProvider
+            debug={debug}
+            textSelectable={!DeviceCapabilities.canUseTouchScreen() || isSmallScreenWidth}
+        >
+            {children}
+        </BaseHTMLEngineProvider>
+    );
+}
+
+HTMLEngineProvider.displayName = 'HTMLEngineProvider';
+
+export default HTMLEngineProvider;
diff --git a/src/components/HTMLEngineProvider/types.ts b/src/components/HTMLEngineProvider/types.ts
new file mode 100644
index 000000000000..fe2cd19bf916
--- /dev/null
+++ b/src/components/HTMLEngineProvider/types.ts
@@ -0,0 +1,14 @@
+import {ReactNode} from 'react';
+import {TNode} from 'react-native-render-html';
+
+type HTMLEngineProviderProps = {
+    /** Children to wrap in HTMLEngineProvider. */
+    children?: ReactNode;
+
+    /** Optional debug flag. Prints the TRT in the console when true. */
+    debug?: boolean;
+};
+
+type Predicate = (node: TNode) => boolean;
+
+export type {HTMLEngineProviderProps, Predicate};

From 4ba8eb23fdd99455d4f668b60d90a2b31e4528c7 Mon Sep 17 00:00:00 2001
From: RR3b3l0 <ruben.rato96@gmail.com>
Date: Wed, 27 Dec 2023 16:02:31 +0000
Subject: [PATCH 2/7] [TS  migration] Code improvements

---
 .../HTMLEngineProvider/BaseHTMLEngineProvider.tsx           | 6 +++---
 src/components/HTMLEngineProvider/index.native.tsx          | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
index 13d20608266d..3ca00abb32ac 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
@@ -59,12 +59,12 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
             }),
             'mention-user': HTMLElementModel.fromCustomModel({tagName: 'mention-user', contentModel: HTMLContentModel.textual}),
             'mention-here': HTMLElementModel.fromCustomModel({tagName: 'mention-here', contentModel: HTMLContentModel.textual}),
-            'next-steps': HTMLElementModel.fromCustomModel({
-                tagName: 'next-steps',
+            'next-step': HTMLElementModel.fromCustomModel({
+                tagName: 'next-step',
                 mixedUAStyles: {...styles.textLabelSupporting},
                 contentModel: HTMLContentModel.textual,
             }),
-            'next-steps-email': HTMLElementModel.fromCustomModel({tagName: 'next-steps-email', contentModel: HTMLContentModel.textual}),
+            'next-step-email': HTMLElementModel.fromCustomModel({tagName: 'next-step-email', contentModel: HTMLContentModel.textual}),
             video: HTMLElementModel.fromCustomModel({
                 tagName: 'video',
                 mixedUAStyles: {whiteSpace: 'pre'},
diff --git a/src/components/HTMLEngineProvider/index.native.tsx b/src/components/HTMLEngineProvider/index.native.tsx
index 70a1363471db..c85228bd7cec 100755
--- a/src/components/HTMLEngineProvider/index.native.tsx
+++ b/src/components/HTMLEngineProvider/index.native.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import BaseHTMLEngineProvider from './BaseHTMLEngineProvider';
 import {HTMLEngineProviderProps} from './types';
 
-function HTMLEngineProvider({debug = false, children = null}: HTMLEngineProviderProps) {
+function HTMLEngineProvider({debug = false, children}: HTMLEngineProviderProps) {
     return (
         <BaseHTMLEngineProvider
             debug={debug}

From 71ee3aaa79dbabda555932f5724a12f9384a018a Mon Sep 17 00:00:00 2001
From: ruben-rebelo <ruben.rato96@gmail.com>
Date: Mon, 8 Jan 2024 11:45:53 +0000
Subject: [PATCH 3/7] [TS migration] Prettier changes

---
 src/components/HTMLEngineProvider/htmlEngineUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HTMLEngineProvider/htmlEngineUtils.ts b/src/components/HTMLEngineProvider/htmlEngineUtils.ts
index 4ed949fde6aa..9232bbe8e059 100644
--- a/src/components/HTMLEngineProvider/htmlEngineUtils.ts
+++ b/src/components/HTMLEngineProvider/htmlEngineUtils.ts
@@ -1,5 +1,5 @@
 import {TNode} from 'react-native-render-html';
-import { Predicate } from './types';
+import {Predicate} from './types';
 
 const MAX_IMG_DIMENSIONS = 512;
 

From 5b9473ff80fa63dfd260e2dcd2d2e9f0f3c6943a Mon Sep 17 00:00:00 2001
From: ruben-rebelo <ruben.rato96@gmail.com>
Date: Tue, 9 Jan 2024 10:19:03 +0000
Subject: [PATCH 4/7] [TS migration] Code improvements

---
 src/components/HTMLEngineProvider/htmlEngineUtils.ts | 12 ++++++------
 src/components/HTMLEngineProvider/index.native.tsx   |  5 ++---
 src/components/HTMLEngineProvider/index.tsx          |  7 +++----
 src/components/HTMLEngineProvider/types.ts           | 12 +++---------
 4 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/src/components/HTMLEngineProvider/htmlEngineUtils.ts b/src/components/HTMLEngineProvider/htmlEngineUtils.ts
index 9232bbe8e059..8ceb38d1c87c 100644
--- a/src/components/HTMLEngineProvider/htmlEngineUtils.ts
+++ b/src/components/HTMLEngineProvider/htmlEngineUtils.ts
@@ -1,5 +1,5 @@
-import {TNode} from 'react-native-render-html';
-import {Predicate} from './types';
+import type {TNode} from 'react-native-render-html';
+import type {Predicate} from './types';
 
 const MAX_IMG_DIMENSIONS = 512;
 
@@ -8,9 +8,9 @@ const MAX_IMG_DIMENSIONS = 512;
  * is used by the HTML component in the default renderer for img tags to scale
  * down images that would otherwise overflow horizontally.
  *
- * @param tagName - The name of the tag for which max width should be constrained.
  * @param contentWidth - The content width provided to the HTML
  * component.
+ * @param tagName - The name of the tag for which max width should be constrained.
  * @returns The minimum between contentWidth and MAX_IMG_DIMENSIONS
  */
 function computeEmbeddedMaxWidth(contentWidth: number, tagName: string): number {
@@ -24,7 +24,7 @@ function computeEmbeddedMaxWidth(contentWidth: number, tagName: string): number
  * Check if tagName is equal to any of our custom tags wrapping chat comments.
  *
  */
-function isCommentTag(tagName?: string): boolean {
+function isCommentTag(tagName: string): boolean {
     return tagName === 'email-comment' || tagName === 'comment';
 }
 
@@ -47,7 +47,7 @@ function isChildOfNode(tnode: TNode, predicate: Predicate): boolean {
  * Finding node with name 'comment' flags that we are rendering a comment.
  */
 function isChildOfComment(tnode: TNode): boolean {
-    return isChildOfNode(tnode, (node) => isCommentTag(node.domNode?.name));
+    return isChildOfNode(tnode, (node) => node.domNode?.name !== undefined && isCommentTag(node.domNode?.name)) ;
 }
 
 /**
@@ -55,7 +55,7 @@ function isChildOfComment(tnode: TNode): boolean {
  * Finding a node with the name 'h1' flags that we are rendering inside an h1 element.
  */
 function isChildOfH1(tnode: TNode): boolean {
-    return isChildOfNode(tnode, (node) => node.domNode?.name.toLowerCase() === 'h1');
+    return isChildOfNode(tnode, (node) => node.domNode?.name !== null && node.domNode?.name.toLowerCase() === 'h1');
 }
 
 export {computeEmbeddedMaxWidth, isChildOfComment, isCommentTag, isChildOfH1};
diff --git a/src/components/HTMLEngineProvider/index.native.tsx b/src/components/HTMLEngineProvider/index.native.tsx
index c85228bd7cec..f3decaf874fa 100755
--- a/src/components/HTMLEngineProvider/index.native.tsx
+++ b/src/components/HTMLEngineProvider/index.native.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import BaseHTMLEngineProvider from './BaseHTMLEngineProvider';
-import {HTMLEngineProviderProps} from './types';
+import type {HTMLEngineProviderProps} from './types';
 
-function HTMLEngineProvider({debug = false, children}: HTMLEngineProviderProps) {
+function HTMLEngineProvider({children}: HTMLEngineProviderProps) {
     return (
         <BaseHTMLEngineProvider
-            debug={debug}
             enableExperimentalBRCollapsing
         >
             {children}
diff --git a/src/components/HTMLEngineProvider/index.tsx b/src/components/HTMLEngineProvider/index.tsx
index b16308cf6899..0cd7449616ca 100755
--- a/src/components/HTMLEngineProvider/index.tsx
+++ b/src/components/HTMLEngineProvider/index.tsx
@@ -2,15 +2,14 @@ import React from 'react';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import BaseHTMLEngineProvider from './BaseHTMLEngineProvider';
-import {HTMLEngineProviderProps} from './types';
+import type {HTMLEngineProviderProps} from './types';
 
-function HTMLEngineProvider({debug = false, children = null}: HTMLEngineProviderProps) {
+function HTMLEngineProvider({children = null}: HTMLEngineProviderProps) {
     const {isSmallScreenWidth} = useWindowDimensions();
 
     return (
         <BaseHTMLEngineProvider
-            debug={debug}
-            textSelectable={!DeviceCapabilities.canUseTouchScreen() || isSmallScreenWidth}
+            textSelectable={!DeviceCapabilities.canUseTouchScreen() || !isSmallScreenWidth}
         >
             {children}
         </BaseHTMLEngineProvider>
diff --git a/src/components/HTMLEngineProvider/types.ts b/src/components/HTMLEngineProvider/types.ts
index fe2cd19bf916..2c9624d6b4d1 100644
--- a/src/components/HTMLEngineProvider/types.ts
+++ b/src/components/HTMLEngineProvider/types.ts
@@ -1,13 +1,7 @@
-import {ReactNode} from 'react';
-import {TNode} from 'react-native-render-html';
+import type {TNode} from 'react-native-render-html';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
-type HTMLEngineProviderProps = {
-    /** Children to wrap in HTMLEngineProvider. */
-    children?: ReactNode;
-
-    /** Optional debug flag. Prints the TRT in the console when true. */
-    debug?: boolean;
-};
+type HTMLEngineProviderProps = ChildrenProps
 
 type Predicate = (node: TNode) => boolean;
 

From c8813dc834e7e7e88bcfe9bbdfd3d246a8f916aa Mon Sep 17 00:00:00 2001
From: ruben-rebelo <ruben.rato96@gmail.com>
Date: Tue, 9 Jan 2024 10:23:10 +0000
Subject: [PATCH 5/7] [TS migration] Code style improvements

---
 src/components/HTMLEngineProvider/htmlEngineUtils.ts | 2 +-
 src/components/HTMLEngineProvider/index.native.tsx   | 8 +-------
 src/components/HTMLEngineProvider/index.tsx          | 8 +-------
 src/components/HTMLEngineProvider/types.ts           | 2 +-
 4 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/src/components/HTMLEngineProvider/htmlEngineUtils.ts b/src/components/HTMLEngineProvider/htmlEngineUtils.ts
index 8ceb38d1c87c..8d188017e91e 100644
--- a/src/components/HTMLEngineProvider/htmlEngineUtils.ts
+++ b/src/components/HTMLEngineProvider/htmlEngineUtils.ts
@@ -47,7 +47,7 @@ function isChildOfNode(tnode: TNode, predicate: Predicate): boolean {
  * Finding node with name 'comment' flags that we are rendering a comment.
  */
 function isChildOfComment(tnode: TNode): boolean {
-    return isChildOfNode(tnode, (node) => node.domNode?.name !== undefined && isCommentTag(node.domNode?.name)) ;
+    return isChildOfNode(tnode, (node) => node.domNode?.name !== undefined && isCommentTag(node.domNode?.name));
 }
 
 /**
diff --git a/src/components/HTMLEngineProvider/index.native.tsx b/src/components/HTMLEngineProvider/index.native.tsx
index f3decaf874fa..bff138ced481 100755
--- a/src/components/HTMLEngineProvider/index.native.tsx
+++ b/src/components/HTMLEngineProvider/index.native.tsx
@@ -3,13 +3,7 @@ import BaseHTMLEngineProvider from './BaseHTMLEngineProvider';
 import type {HTMLEngineProviderProps} from './types';
 
 function HTMLEngineProvider({children}: HTMLEngineProviderProps) {
-    return (
-        <BaseHTMLEngineProvider
-            enableExperimentalBRCollapsing
-        >
-            {children}
-        </BaseHTMLEngineProvider>
-    );
+    return <BaseHTMLEngineProvider enableExperimentalBRCollapsing>{children}</BaseHTMLEngineProvider>;
 }
 
 HTMLEngineProvider.displayName = 'HTMLEngineProvider';
diff --git a/src/components/HTMLEngineProvider/index.tsx b/src/components/HTMLEngineProvider/index.tsx
index 0cd7449616ca..c178c9feea96 100755
--- a/src/components/HTMLEngineProvider/index.tsx
+++ b/src/components/HTMLEngineProvider/index.tsx
@@ -7,13 +7,7 @@ import type {HTMLEngineProviderProps} from './types';
 function HTMLEngineProvider({children = null}: HTMLEngineProviderProps) {
     const {isSmallScreenWidth} = useWindowDimensions();
 
-    return (
-        <BaseHTMLEngineProvider
-            textSelectable={!DeviceCapabilities.canUseTouchScreen() || !isSmallScreenWidth}
-        >
-            {children}
-        </BaseHTMLEngineProvider>
-    );
+    return <BaseHTMLEngineProvider textSelectable={!DeviceCapabilities.canUseTouchScreen() || !isSmallScreenWidth}>{children}</BaseHTMLEngineProvider>;
 }
 
 HTMLEngineProvider.displayName = 'HTMLEngineProvider';
diff --git a/src/components/HTMLEngineProvider/types.ts b/src/components/HTMLEngineProvider/types.ts
index 2c9624d6b4d1..6b8ee50b46d0 100644
--- a/src/components/HTMLEngineProvider/types.ts
+++ b/src/components/HTMLEngineProvider/types.ts
@@ -1,7 +1,7 @@
 import type {TNode} from 'react-native-render-html';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
-type HTMLEngineProviderProps = ChildrenProps
+type HTMLEngineProviderProps = ChildrenProps;
 
 type Predicate = (node: TNode) => boolean;
 

From baa15771acbfb35fb319344f8401d37530265567 Mon Sep 17 00:00:00 2001
From: ruben-rebelo <ruben.rato96@gmail.com>
Date: Wed, 10 Jan 2024 09:38:35 +0000
Subject: [PATCH 6/7] [TS migration] Code improvements and variable cleanup

---
 .../HTMLEngineProvider/BaseHTMLEngineProvider.tsx         | 4 ++--
 src/components/HTMLEngineProvider/htmlEngineUtils.ts      | 7 ++++---
 src/components/HTMLEngineProvider/index.native.tsx        | 4 ++--
 src/components/HTMLEngineProvider/index.tsx               | 4 ++--
 src/components/HTMLEngineProvider/types.ts                | 8 --------
 5 files changed, 10 insertions(+), 17 deletions(-)
 delete mode 100644 src/components/HTMLEngineProvider/types.ts

diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
index a743783cf2f6..06b413a81dee 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
@@ -6,9 +6,9 @@ import convertToLTR from '@libs/convertToLTR';
 import FontUtils from '@styles/utils/FontUtils';
 import * as HTMLEngineUtils from './htmlEngineUtils';
 import htmlRenderers from './HTMLRenderers';
-import type {HTMLEngineProviderProps} from './types';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
-type BaseHTMLEngineProviderProps = HTMLEngineProviderProps & {
+type BaseHTMLEngineProviderProps = ChildrenProps & {
     /** Whether text elements should be selectable */
     textSelectable?: boolean;
 
diff --git a/src/components/HTMLEngineProvider/htmlEngineUtils.ts b/src/components/HTMLEngineProvider/htmlEngineUtils.ts
index 8d188017e91e..5f082424a565 100644
--- a/src/components/HTMLEngineProvider/htmlEngineUtils.ts
+++ b/src/components/HTMLEngineProvider/htmlEngineUtils.ts
@@ -1,5 +1,6 @@
 import type {TNode} from 'react-native-render-html';
-import type {Predicate} from './types';
+
+type Predicate = (node: TNode) => boolean;
 
 const MAX_IMG_DIMENSIONS = 512;
 
@@ -47,7 +48,7 @@ function isChildOfNode(tnode: TNode, predicate: Predicate): boolean {
  * Finding node with name 'comment' flags that we are rendering a comment.
  */
 function isChildOfComment(tnode: TNode): boolean {
-    return isChildOfNode(tnode, (node) => node.domNode?.name !== undefined && isCommentTag(node.domNode?.name));
+    return isChildOfNode(tnode, (node) => node.domNode?.name !== undefined && isCommentTag(node.domNode.name));
 }
 
 /**
@@ -55,7 +56,7 @@ function isChildOfComment(tnode: TNode): boolean {
  * Finding a node with the name 'h1' flags that we are rendering inside an h1 element.
  */
 function isChildOfH1(tnode: TNode): boolean {
-    return isChildOfNode(tnode, (node) => node.domNode?.name !== null && node.domNode?.name.toLowerCase() === 'h1');
+    return isChildOfNode(tnode, (node) => node.domNode?.name !== undefined && node.domNode.name.toLowerCase() === 'h1');
 }
 
 export {computeEmbeddedMaxWidth, isChildOfComment, isCommentTag, isChildOfH1};
diff --git a/src/components/HTMLEngineProvider/index.native.tsx b/src/components/HTMLEngineProvider/index.native.tsx
index bff138ced481..c77bcaf7c5e3 100755
--- a/src/components/HTMLEngineProvider/index.native.tsx
+++ b/src/components/HTMLEngineProvider/index.native.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import BaseHTMLEngineProvider from './BaseHTMLEngineProvider';
-import type {HTMLEngineProviderProps} from './types';
 
-function HTMLEngineProvider({children}: HTMLEngineProviderProps) {
+function HTMLEngineProvider({children}: ChildrenProps) {
     return <BaseHTMLEngineProvider enableExperimentalBRCollapsing>{children}</BaseHTMLEngineProvider>;
 }
 
diff --git a/src/components/HTMLEngineProvider/index.tsx b/src/components/HTMLEngineProvider/index.tsx
index c178c9feea96..9addb549d13a 100755
--- a/src/components/HTMLEngineProvider/index.tsx
+++ b/src/components/HTMLEngineProvider/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import BaseHTMLEngineProvider from './BaseHTMLEngineProvider';
-import type {HTMLEngineProviderProps} from './types';
 
-function HTMLEngineProvider({children = null}: HTMLEngineProviderProps) {
+function HTMLEngineProvider({children}: ChildrenProps) {
     const {isSmallScreenWidth} = useWindowDimensions();
 
     return <BaseHTMLEngineProvider textSelectable={!DeviceCapabilities.canUseTouchScreen() || !isSmallScreenWidth}>{children}</BaseHTMLEngineProvider>;
diff --git a/src/components/HTMLEngineProvider/types.ts b/src/components/HTMLEngineProvider/types.ts
deleted file mode 100644
index 6b8ee50b46d0..000000000000
--- a/src/components/HTMLEngineProvider/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type {TNode} from 'react-native-render-html';
-import type ChildrenProps from '@src/types/utils/ChildrenProps';
-
-type HTMLEngineProviderProps = ChildrenProps;
-
-type Predicate = (node: TNode) => boolean;
-
-export type {HTMLEngineProviderProps, Predicate};

From f75c0fa44052a81330049437b8ee24cad2375f58 Mon Sep 17 00:00:00 2001
From: ruben-rebelo <ruben.rato96@gmail.com>
Date: Wed, 10 Jan 2024 09:47:32 +0000
Subject: [PATCH 7/7] [TS migration] Fix lint issues

---
 src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
index 06b413a81dee..690f2fc6883a 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
@@ -4,9 +4,9 @@ import {HTMLContentModel, HTMLElementModel, RenderHTMLConfigProvider, TRenderEng
 import useThemeStyles from '@hooks/useThemeStyles';
 import convertToLTR from '@libs/convertToLTR';
 import FontUtils from '@styles/utils/FontUtils';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import * as HTMLEngineUtils from './htmlEngineUtils';
 import htmlRenderers from './HTMLRenderers';
-import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
 type BaseHTMLEngineProviderProps = ChildrenProps & {
     /** Whether text elements should be selectable */