Merge pull request #29158 from bernhardoj/fix/27626-md-custom-font

Fix code block font is not a monospace

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

@@ -5,8 +5,8 @@ import PropTypes from 'prop-types';
 import htmlRenderers from './HTMLRenderers';
 import * as HTMLEngineUtils from './htmlEngineUtils';
 import styles from '../../styles/styles';
-import fontFamily from '../../styles/fontFamily';
 import convertToLTR from '../../libs/convertToLTR';
+import singleFontFamily from '../../styles/fontFamily/singleFontFamily';
 
 const propTypes = {
     /** Whether text elements should be selectable */
@@ -60,18 +60,13 @@ function BaseHTMLEngineProvider(props) {
     // We need to memoize this prop to make it referentially stable.
     const defaultTextProps = useMemo(() => ({selectable: props.textSelectable, allowFontScaling: false, textBreakStrategy: 'simple'}), [props.textSelectable]);
 
-    // We need to pass multiple system-specific fonts for emojis but
-    // we can't apply multiple fonts at once so we need to pass fallback fonts.
-    const fallbackFonts = {'ExpensifyNeue-Regular': fontFamily.EXP_NEUE};
-
     return (
         <TRenderEngineProvider
             customHTMLElementModels={customHTMLElementModels}
             baseStyle={styles.webViewStyles.baseFontStyle}
             tagsStyles={styles.webViewStyles.tagStyles}
             enableCSSInlineProcessing={false}
-            systemFonts={_.values(fontFamily)}
-            fallbackFonts={fallbackFonts}
+            systemFonts={_.values(singleFontFamily)}
             domVisitors={{
                 // eslint-disable-next-line no-param-reassign
                 onText: (text) => (text.data = convertToLTR(text.data)),

src/styles/fontFamily/bold/index.android.js

@@ -1,3 +1,4 @@
-const bold = 'ExpensifyNeue-Bold';
+const singleBold = 'ExpensifyNeue-Bold';
+const multiBold = 'ExpensifyNeue-Bold';
 
-export default bold;
+export {singleBold, multiBold};

src/styles/fontFamily/bold/index.ios.js

@@ -1,3 +1,4 @@
-const bold = 'ExpensifyNeue-Regular';
+const singleBold = 'ExpensifyNeue-Regular';
+const multiBold = 'ExpensifyNeue-Regular';
 
-export default bold;
+export {singleBold, multiBold};

src/styles/fontFamily/bold/index.js

@@ -1,3 +1,4 @@
-const bold = 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji';
+const singleBold = 'ExpensifyNeue-Regular';
+const multiBold = 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji';
 
-export default bold;
+export {singleBold, multiBold};

src/styles/fontFamily/index.native.ts

@@ -1,17 +1,3 @@
-import bold from './bold';
-import FontFamilyStyles from './types';
+import singleFontFamily from './singleFontFamily';
 
-const fontFamily: FontFamilyStyles = {
-    EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic',
-    EXP_NEUE_BOLD: bold,
-    EXP_NEUE: 'ExpensifyNeue-Regular',
-    EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium',
-    EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic',
-    SYSTEM: 'System',
-    MONOSPACE: 'ExpensifyMono-Regular',
-    MONOSPACE_ITALIC: 'ExpensifyMono-Regular',
-    MONOSPACE_BOLD: 'ExpensifyMono-Bold',
-    MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold',
-};
-
-export default fontFamily;
+export default singleFontFamily;

src/styles/fontFamily/index.ts

@@ -1,19 +1,3 @@
-import bold from './bold';
-import FontFamilyStyles from './types';
+import multiFontFamily from './multiFontFamily';
 
-// In windows and ubuntu, we need some extra system fonts for emojis to work properly
-// otherwise few of them will appear as black and white
-const fontFamily: FontFamilyStyles = {
-    EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic, Segoe UI Emoji, Noto Color Emoji',
-    EXP_NEUE_BOLD: bold,
-    EXP_NEUE: 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji',
-    EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium, Segoe UI Emoji, Noto Color Emoji',
-    EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic, Segoe UI Emoji, Noto Color Emoji',
-    SYSTEM: 'System',
-    MONOSPACE: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji',
-    MONOSPACE_ITALIC: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji',
-    MONOSPACE_BOLD: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji',
-    MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji',
-};
-
-export default fontFamily;
+export default multiFontFamily;

src/styles/fontFamily/multiFontFamily.ts

@@ -0,0 +1,19 @@
+import {multiBold} from './bold';
+import FontFamilyStyles from './types';
+
+// In windows and ubuntu, we need some extra system fonts for emojis to work properly
+// otherwise few of them will appear as black and white
+const fontFamily: FontFamilyStyles = {
+    EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic, Segoe UI Emoji, Noto Color Emoji',
+    EXP_NEUE_BOLD: multiBold,
+    EXP_NEUE: 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji',
+    EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium, Segoe UI Emoji, Noto Color Emoji',
+    EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic, Segoe UI Emoji, Noto Color Emoji',
+    SYSTEM: 'System',
+    MONOSPACE: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji',
+    MONOSPACE_ITALIC: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji',
+    MONOSPACE_BOLD: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji',
+    MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji',
+};
+
+export default fontFamily;

src/styles/fontFamily/singleFontFamily.ts

@@ -0,0 +1,17 @@
+import {singleBold} from './bold';
+import FontFamilyStyles from './types';
+
+const fontFamily: FontFamilyStyles = {
+    EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic',
+    EXP_NEUE_BOLD: singleBold,
+    EXP_NEUE: 'ExpensifyNeue-Regular',
+    EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium',
+    EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic',
+    SYSTEM: 'System',
+    MONOSPACE: 'ExpensifyMono-Regular',
+    MONOSPACE_ITALIC: 'ExpensifyMono-Regular',
+    MONOSPACE_BOLD: 'ExpensifyMono-Bold',
+    MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold',
+};
+
+export default fontFamily;