Merge pull request #55398 from bernhardoj/fix/39623-inline-code-font

Fix inline code doesn't accept bold and/or italic
Expensify · Feb 4, 2025 · 08358b5 · 08358b5
2 parents b1b7b8a + b5b3a82
commit 08358b5
Show file tree

Hide file tree

Showing 20 changed files with 66 additions and 8 deletions.
diff --git a/android/app/src/main/res/font/expensify_mono.xml b/android/app/src/main/res/font/expensify_mono.xml
@@ -1,5 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <font-family xmlns:app="http://schemas.android.com/apk/res-auto">
   <font app:fontStyle="normal" app:fontWeight="400" app:font="@font/expensifymono_regular"/>
+  <font app:fontStyle="italic" app:fontWeight="400" app:font="@font/expensifymono_italic"/>
   <font app:fontStyle="normal" app:fontWeight="700" app:font="@font/expensifymono_bold"/>
+  <font app:fontStyle="italic" app:fontWeight="700" app:font="@font/expensifymono_bolditalic"/>
 </font-family>
diff --git a/android/app/src/main/res/font/expensifymono_bolditalic.otf b/android/app/src/main/res/font/expensifymono_bolditalic.otf
diff --git a/android/app/src/main/res/font/expensifymono_italic.otf b/android/app/src/main/res/font/expensifymono_italic.otf
diff --git a/android/link-assets-manifest.json b/android/link-assets-manifest.json
@@ -5,6 +5,14 @@
       "path": "assets/fonts/native/ExpensifyMono-Bold.otf",
       "sha1": "d70e12540200613e9e6ac9068bed57e4bf477bfe"
     },
+    {
+      "path": "assets/fonts/native/ExpensifyMono-BoldItalic.otf",
+      "sha1": "ef9f92ba902942e232301c64bb55e79165435bcc"
+    },
+    {
+      "path": "assets/fonts/native/ExpensifyMono-Italic.otf",
+      "sha1": "874301891972b3a2a6a8ece69b978e74ac9d10a2"
+    },
     {
       "path": "assets/fonts/native/ExpensifyMono-Regular.otf",
       "sha1": "9bbd3795afea1b1136c5b6a8ecd7d470fd5ea1b2"

diff --git a/assets/css/fonts.css b/assets/css/fonts.css
@@ -40,6 +40,20 @@
     src: url('/fonts/ExpensifyMono-Bold.woff2') format('woff2'),  url('/fonts/ExpensifyMono-Bold.woff') format('woff');
 }
 
+@font-face {
+    font-family: Expensify Mono;
+    font-weight: 400;
+    font-style: italic;
+    src: url('/fonts/ExpensifyMono-Italic.woff2') format('woff2'),  url('/fonts/ExpensifyMono-Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: Expensify Mono;
+    font-weight: 700;
+    font-style: italic;
+    src: url('/fonts/ExpensifyMono-BoldItalic.woff2') format('woff2'),  url('/fonts/ExpensifyMono-BoldItalic.woff') format('woff');
+}
+
 @font-face {
     font-family: Expensify New Kansas;
     font-weight: 500;

diff --git a/assets/fonts/native/ExpensifyMono-BoldItalic.otf b/assets/fonts/native/ExpensifyMono-BoldItalic.otf
diff --git a/assets/fonts/native/ExpensifyMono-Italic.otf b/assets/fonts/native/ExpensifyMono-Italic.otf
diff --git a/assets/fonts/web/ExpensifyMono-BoldItalic.woff b/assets/fonts/web/ExpensifyMono-BoldItalic.woff
diff --git a/assets/fonts/web/ExpensifyMono-BoldItalic.woff2 b/assets/fonts/web/ExpensifyMono-BoldItalic.woff2
diff --git a/assets/fonts/web/ExpensifyMono-Italic.woff b/assets/fonts/web/ExpensifyMono-Italic.woff
diff --git a/assets/fonts/web/ExpensifyMono-Italic.woff2 b/assets/fonts/web/ExpensifyMono-Italic.woff2
diff --git a/ios/NewExpensify.xcodeproj/project.pbxproj b/ios/NewExpensify.xcodeproj/project.pbxproj
@@ -20,6 +20,7 @@
 		0DFC45952C884E0A00B56C91 /* RCTShortcutManagerModule.m in Sources */ = {isa = PBXBuildFile; fileRef = 0DFC45932C884E0A00B56C91 /* RCTShortcutManagerModule.m */; };
 		0F5E5350263B73FD004CA14F /* EnvironmentChecker.m in Sources */ = {isa = PBXBuildFile; fileRef = 0F5E534F263B73FD004CA14F /* EnvironmentChecker.m */; };
 		0F5E5351263B73FD004CA14F /* EnvironmentChecker.m in Sources */ = {isa = PBXBuildFile; fileRef = 0F5E534F263B73FD004CA14F /* EnvironmentChecker.m */; };
+		0F749C2B3B8F4562B816DEAB /* ExpensifyMono-Italic.otf in Resources */ = {isa = PBXBuildFile; fileRef = ED64768FC6254E4D8FCD12BC /* ExpensifyMono-Italic.otf */; };
 		1246A3EF20E54E7A9494C8B9 /* ExpensifyNeue-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = F4F8A052A22040339996324B /* ExpensifyNeue-Regular.otf */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		18D050E0262400AF000D658B /* BridgingFile.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18D050DF262400AF000D658B /* BridgingFile.swift */; };
@@ -28,6 +29,7 @@
 		30581EA8AAFD4FCE88C5D191 /* ExpensifyNeue-Italic.otf in Resources */ = {isa = PBXBuildFile; fileRef = BF6A4C5167244B9FB8E4D4E3 /* ExpensifyNeue-Italic.otf */; };
 		374FB8D728A133FE000D84EF /* OriginImageRequestHandler.mm in Sources */ = {isa = PBXBuildFile; fileRef = 374FB8D628A133FE000D84EF /* OriginImageRequestHandler.mm */; };
 		383643682B6D4AE2005BB9AE /* DeviceCheck.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 383643672B6D4AE2005BB9AE /* DeviceCheck.framework */; };
+		524F95D57E75496EBD14B0AA /* ExpensifyMono-BoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = A96F65C6624044318D21DAB1 /* ExpensifyMono-BoldItalic.otf */; };
 		7041848526A8E47D00E09F4D /* RCTStartupTimer.m in Sources */ = {isa = PBXBuildFile; fileRef = 7041848426A8E47D00E09F4D /* RCTStartupTimer.m */; };
 		7041848626A8E47D00E09F4D /* RCTStartupTimer.m in Sources */ = {isa = PBXBuildFile; fileRef = 7041848426A8E47D00E09F4D /* RCTStartupTimer.m */; };
 		70CF6E82262E297300711ADC /* BootSplash.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 70CF6E81262E297300711ADC /* BootSplash.storyboard */; };
@@ -142,6 +144,7 @@
 		8B28D84EF339436DBD42A203 /* ExpensifyNeue-BoldItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyNeue-BoldItalic.otf"; path = "../assets/fonts/native/ExpensifyNeue-BoldItalic.otf"; sourceTree = "<group>"; };
 		8EFE0319D586C1078DB926FD /* Pods-NewExpensify.releaseadhoc.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-NewExpensify.releaseadhoc.xcconfig"; path = "Target Support Files/Pods-NewExpensify/Pods-NewExpensify.releaseadhoc.xcconfig"; sourceTree = "<group>"; };
 		9196A72C11B91A52A43D6E8A /* libPods-NotificationServiceExtension.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-NotificationServiceExtension.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		A96F65C6624044318D21DAB1 /* ExpensifyMono-BoldItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyMono-BoldItalic.otf"; path = "../assets/fonts/native/ExpensifyMono-BoldItalic.otf"; sourceTree = "<group>"; };
 		AC131FBA2CF634F20010CE80 /* BackgroundTasks.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = BackgroundTasks.framework; path = System/Library/Frameworks/BackgroundTasks.framework; sourceTree = SDKROOT; };
 		BBE493797E97F2995E627244 /* Pods-NotificationServiceExtension.debugadhoc.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-NotificationServiceExtension.debugadhoc.xcconfig"; path = "Target Support Files/Pods-NotificationServiceExtension/Pods-NotificationServiceExtension.debugadhoc.xcconfig"; sourceTree = "<group>"; };
 		BCD444BEDDB0AF1745B39049 /* ExpoModulesProvider.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; name = ExpoModulesProvider.swift; path = "Pods/Target Support Files/Pods-NewExpensify-NewExpensifyTests/ExpoModulesProvider.swift"; sourceTree = "<group>"; };
@@ -159,6 +162,7 @@
 		E9DF872C2525201700607FDC /* AirshipConfig.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = AirshipConfig.plist; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
+		ED64768FC6254E4D8FCD12BC /* ExpensifyMono-Italic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyMono-Italic.otf"; path = "../assets/fonts/native/ExpensifyMono-Italic.otf"; sourceTree = "<group>"; };
 		EF33B19FC6A7FE676839430D /* libPods-NewExpensify-NewExpensifyTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-NewExpensify-NewExpensifyTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		EFA5CA89CC675CA3370CF89E /* Pods-NewExpensify.debugproduction.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-NewExpensify.debugproduction.xcconfig"; path = "Target Support Files/Pods-NewExpensify/Pods-NewExpensify.debugproduction.xcconfig"; sourceTree = "<group>"; };
 		F0C450E92705020500FD2970 /* colors.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; name = colors.json; path = ../colors.json; sourceTree = "<group>"; };
@@ -345,6 +349,8 @@
 				44BF435285B94E5B95F90994 /* ExpensifyNewKansas-Medium.otf */,
 				D2AFB39EC1D44BF9B91D3227 /* ExpensifyNewKansas-MediumItalic.otf */,
 				DCF33E34FFEC48128CDD41D4 /* ExpensifyMono-Bold.otf */,
+				A96F65C6624044318D21DAB1 /* ExpensifyMono-BoldItalic.otf */,
+				ED64768FC6254E4D8FCD12BC /* ExpensifyMono-Italic.otf */,
 				E704648954784DDFBAADF568 /* ExpensifyMono-Regular.otf */,
 				52796131E6554494B2DDB056 /* ExpensifyNeue-Bold.otf */,
 				8B28D84EF339436DBD42A203 /* ExpensifyNeue-BoldItalic.otf */,
@@ -532,6 +538,8 @@
 				30581EA8AAFD4FCE88C5D191 /* ExpensifyNeue-Italic.otf in Resources */,
 				1246A3EF20E54E7A9494C8B9 /* ExpensifyNeue-Regular.otf in Resources */,
 				D27CE6B77196EF3EF450EEAC /* PrivacyInfo.xcprivacy in Resources */,
+				524F95D57E75496EBD14B0AA /* ExpensifyMono-BoldItalic.otf in Resources */,
+				0F749C2B3B8F4562B816DEAB /* ExpensifyMono-Italic.otf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
@@ -92,6 +92,8 @@
 		<string>ExpensifyNewKansas-Medium.otf</string>
 		<string>ExpensifyNewKansas-MediumItalic.otf</string>
 		<string>ExpensifyMono-Bold.otf</string>
+		<string>ExpensifyMono-BoldItalic.otf</string>
+		<string>ExpensifyMono-Italic.otf</string>
 		<string>ExpensifyMono-Regular.otf</string>
 		<string>ExpensifyNeue-Bold.otf</string>
 		<string>ExpensifyNeue-BoldItalic.otf</string>

diff --git a/ios/link-assets-manifest.json b/ios/link-assets-manifest.json
@@ -5,6 +5,14 @@
       "path": "assets/fonts/native/ExpensifyMono-Bold.otf",
       "sha1": "d70e12540200613e9e6ac9068bed57e4bf477bfe"
     },
+    {
+      "path": "assets/fonts/native/ExpensifyMono-BoldItalic.otf",
+      "sha1": "ef9f92ba902942e232301c64bb55e79165435bcc"
+    },
+    {
+      "path": "assets/fonts/native/ExpensifyMono-Italic.otf",
+      "sha1": "874301891972b3a2a6a8ece69b978e74ac9d10a2"
+    },
     {
       "path": "assets/fonts/native/ExpensifyMono-Regular.otf",
       "sha1": "9bbd3795afea1b1136c5b6a8ecd7d470fd5ea1b2"

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.tsx
@@ -28,12 +28,6 @@ function CodeRenderer({TDefaultRenderer, key, style, ...defaultRendererProps}: C
     const textStyleOverride = {
         fontSize,
         fontFamily: font,
-
-        // We need to override this properties bellow that was defined in `textStyle`
-        // Because by default the `react-native-render-html` add a style in the elements,
-        // for example the <strong> tag has a fontWeight: "bold" and in the android it break the font
-        fontWeight: undefined,
-        fontStyle: undefined,
     };
 
     return (

diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts
@@ -53,7 +53,7 @@ function useMarkdownStyle(message: string | null = null, excludeStyles: Array<ke
                 paddingRight: 1,
             },
             code: {
-                ...FontUtils.fontFamily.platform.MONOSPACE,
+                fontFamily: FontUtils.fontFamily.platform.MONOSPACE.fontFamily,
                 fontSize: 13, // TODO: should be 15 if inside h1, see StyleUtils.getCodeFontSize
                 color: theme.text,
                 backgroundColor: 'transparent',

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -209,7 +209,7 @@ const webViewStyles = (theme: ThemeColors) =>
                 ...(codeStyles.codeTextStyle as MixedStyleDeclaration),
                 paddingLeft: 5,
                 paddingRight: 5,
-                ...FontUtils.fontFamily.platform.MONOSPACE,
+                fontFamily: FontUtils.fontFamily.platform.MONOSPACE.fontFamily,
                 // Font size is determined by getCodeFontSize function in `StyleUtils.js`
             },
 

diff --git a/src/styles/utils/FontUtils/fontFamily/multiFontFamily/index.ts b/src/styles/utils/FontUtils/fontFamily/multiFontFamily/index.ts
@@ -24,6 +24,16 @@ const fontFamily: FontFamilyStyles = {
         fontStyle: 'normal',
         fontWeight: fontWeight.bold,
     },
+    MONOSPACE_ITALIC: {
+        fontFamily: 'Expensify Mono, Segoe UI Emoji, Noto Color Emoji',
+        fontStyle: 'italic',
+        fontWeight: fontWeight.normal,
+    },
+    MONOSPACE_BOLD_ITALIC: {
+        fontFamily: 'Expensify Mono, Segoe UI Emoji, Noto Color Emoji',
+        fontStyle: 'italic',
+        fontWeight: fontWeight.bold,
+    },
 
     EXP_NEUE: {
         fontFamily: 'Expensify Neue, Segoe UI Emoji, Noto Color Emoji',

diff --git a/src/styles/utils/FontUtils/fontFamily/singleFontFamily/index.ts b/src/styles/utils/FontUtils/fontFamily/singleFontFamily/index.ts
@@ -20,6 +20,16 @@ const fontFamily: FontFamilyStyles = {
         fontStyle: 'normal',
         fontWeight: fontWeight.bold,
     },
+    MONOSPACE_ITALIC: {
+        fontFamily: 'Expensify Mono',
+        fontStyle: 'italic',
+        fontWeight: fontWeight.normal,
+    },
+    MONOSPACE_BOLD_ITALIC: {
+        fontFamily: 'Expensify Mono',
+        fontStyle: 'italic',
+        fontWeight: fontWeight.bold,
+    },
 
     EXP_NEUE: {
         fontFamily: 'Expensify Neue',

diff --git a/src/styles/utils/FontUtils/fontFamily/types.ts b/src/styles/utils/FontUtils/fontFamily/types.ts
@@ -4,6 +4,8 @@ type FontFamilyKey =
     | 'SYSTEM'
     | 'MONOSPACE'
     | 'MONOSPACE_BOLD'
+    | 'MONOSPACE_ITALIC'
+    | 'MONOSPACE_BOLD_ITALIC'
     | 'EXP_NEUE'
     | 'EXP_NEUE_BOLD'
     | 'EXP_NEUE_ITALIC'