Merge pull request #30876 from yakupafsin/30203-change-font-size-for-…

…code-block-on-bold

change font size for code block in H1

src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js

@@ -70,7 +70,7 @@ function AnchorRenderer(props) {
         Link.openExternalLink(attrHref);
     };
 
-    if (!HTMLEngineUtils.isInsideComment(props.tnode)) {
+    if (!HTMLEngineUtils.isChildOfComment(props.tnode)) {
         // This is not a comment from a chat, the AnchorForCommentsOnly uses a Pressable to create a context menu on right click.
         // We don't have this behaviour in other links in NewDot
         // TODO: We should use TextLink, but I'm leaving it as Text for now because TextLink breaks the alignment in Android.

src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {splitBoxModelStyle} from 'react-native-render-html';
 import _ from 'underscore';
+import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
 import InlineCodeBlock from '@components/InlineCodeBlock';
 import * as StyleUtils from '@styles/StyleUtils';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
@@ -16,7 +17,13 @@ function CodeRenderer(props) {
         fontWeight: textStyle.fontWeight,
     });
 
+    // Determine the font size for the code based on whether it's inside an H1 element.
+    const isInsideH1 = HTMLEngineUtils.isChildOfH1(props.tnode);
+
+    const fontSize = StyleUtils.getCodeFontSize(isInsideH1);
+
     const textStyleOverride = {
+        fontSize,
         fontFamily: font,
 
         // We need to override this properties bellow that was defined in `textStyle`

src/components/HTMLEngineProvider/htmlEngineUtils.js

@@ -28,20 +28,41 @@ function isCommentTag(tagName) {
 }
 
 /**
- * Check if there is an ancestor node with name 'comment'.
- * Finding node with name 'comment' flags that we are rendering a comment.
+ * Check if there is an ancestor node for which the predicate returns true.
+ *
  * @param {TNode} tnode
+ * @param {Function} predicate
  * @returns {Boolean}
  */
-function isInsideComment(tnode) {
-    let currentNode = tnode;
-    while (currentNode.parent) {
-        if (isCommentTag(currentNode.domNode.name)) {
+function isChildOfNode(tnode, predicate) {
+    let currentNode = tnode.parent;
+    while (currentNode) {
+        if (predicate(currentNode)) {
             return true;
         }
         currentNode = currentNode.parent;
     }
     return false;
 }
 
-export {computeEmbeddedMaxWidth, isInsideComment, isCommentTag};
+/**
+ * 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(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) => node.domNode.name.toLowerCase() === 'h1');
+}
+
+export {computeEmbeddedMaxWidth, isChildOfComment, isCommentTag, isChildOfH1};

src/styles/StyleUtils.ts

@@ -607,6 +607,12 @@ function getFontFamilyMonospace({fontStyle, fontWeight}: TextStyle): string {
 
     return italicBold || bold || italic || fontFamily.MONOSPACE;
 }
+/**
+ * Returns the font size for the HTML code tag renderer.
+ */
+function getCodeFontSize(isInsideH1: boolean) {
+    return isInsideH1 ? 15 : 13;
+}
 
 /**
  * Gives the width for Emoji picker Widget
@@ -1377,6 +1383,7 @@ export {
     getEmptyAvatarStyle,
     getErrorPageContainerStyle,
     getFontFamilyMonospace,
+    getCodeFontSize,
     getFontSizeStyle,
     getGoogleListViewStyle,
     getHeightOfMagicCodeInput,

src/styles/styles.ts

@@ -182,7 +182,7 @@ const webViewStyles = (theme: ThemeColors) =>
                 paddingLeft: 5,
                 paddingRight: 5,
                 fontFamily: fontFamily.MONOSPACE,
-                fontSize: 13,
+                // Font size is determined by getCodeFontSize function in `StyleUtils.js`
             },
 
             img: {