[TS migration] Migrate HTMLEngineProvider component

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,15 +47,15 @@ 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));
 }
 
 /**
  * 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.
  */
 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};

src/components/HTMLEngineProvider/index.native.tsx

@@ -1,16 +1,9 @@
 import React from 'react';
 import BaseHTMLEngineProvider from './BaseHTMLEngineProvider';
-import {HTMLEngineProviderProps} from './types';
+import type {HTMLEngineProviderProps} from './types';
 
-function HTMLEngineProvider({debug = false, children}: HTMLEngineProviderProps) {
-    return (
-        <BaseHTMLEngineProvider
-            debug={debug}
-            enableExperimentalBRCollapsing
-        >
-            {children}
-        </BaseHTMLEngineProvider>
-    );
+function HTMLEngineProvider({children}: HTMLEngineProviderProps) {
+    return <BaseHTMLEngineProvider enableExperimentalBRCollapsing>{children}</BaseHTMLEngineProvider>;
 }
 
 HTMLEngineProvider.displayName = 'HTMLEngineProvider';

src/components/HTMLEngineProvider/index.tsx

@@ -2,19 +2,12 @@ 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}
-        >
-            {children}
-        </BaseHTMLEngineProvider>
-    );
+    return <BaseHTMLEngineProvider textSelectable={!DeviceCapabilities.canUseTouchScreen() || !isSmallScreenWidth}>{children}</BaseHTMLEngineProvider>;
 }
 
 HTMLEngineProvider.displayName = 'HTMLEngineProvider';

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;