Merge pull request #4202 from Expensify/update-staging-from-main

Expensify · Jul 23, 2021 · cdb143b · cdb143b
2 parents 910111f + 827f281
commit cdb143b
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 80 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -150,8 +150,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001007905
-        versionName "1.0.79-5"
+        versionCode 1001007906
+        versionName "1.0.79-6"
     }
     splits {
         abi {

diff --git a/ios/ExpensifyCash/Info.plist b/ios/ExpensifyCash/Info.plist
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.0.79.5</string>
+	<string>1.0.79.6</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

diff --git a/ios/ExpensifyCashTests/Info.plist b/ios/ExpensifyCashTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.0.79.5</string>
+	<string>1.0.79.6</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.79-5",
+  "version": "1.0.79-6",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "Expensify.cash is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",
@@ -88,7 +88,7 @@
     "react-native-picker-select": "8.0.4",
     "react-native-plaid-link-sdk": "^7.0.5",
     "react-native-reanimated": "^2.3.0-alpha.1",
-    "react-native-render-html": "^6.0.0-alpha.10",
+    "react-native-render-html": "6.0.0-beta.8",
     "react-native-safe-area-context": "^3.1.4",
     "react-native-screens": "^3.0.0",
     "react-native-svg": "^12.1.0",

diff --git a/src/components/RenderHTML/BaseRenderHTML.js b/src/components/RenderHTML/BaseRenderHTML.js
@@ -48,16 +48,20 @@ const EXTRA_FONTS = [
 ];
 
 /**
- * Compute images maximum width from the available screen width. This function
+ * Compute embedded maximum width from the available screen width. This function
  * 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
  * component.
  * @returns {number} The minimum between contentWidth and MAX_IMG_DIMENSIONS
  */
-function computeImagesMaxWidth(contentWidth) {
-    return Math.min(MAX_IMG_DIMENSIONS, contentWidth);
+function computeEmbeddedMaxWidth(tagName, contentWidth) {
+    if (tagName === 'img') {
+        return Math.min(MAX_IMG_DIMENSIONS, contentWidth);
+    }
+    return contentWidth;
 }
 
 function AnchorRenderer({tnode, key, style}) {
@@ -193,38 +197,47 @@ function ImgRenderer({tnode}) {
     );
 }
 
-// Define default element models for these renderers.
-AnchorRenderer.model = defaultHTMLElementModels.a;
-CodeRenderer.model = defaultHTMLElementModels.code;
-ImgRenderer.model = defaultHTMLElementModels.img;
-EditedRenderer.model = defaultHTMLElementModels.span;
+// Declare nonstandard tags and their content model here
+const customHTMLElementModels = {
+    edited: defaultHTMLElementModels.span.extend({
+        tagName: 'edited',
+    }),
+};
 
-// Define the custom render methods
+// Define the custom renderer components
 const renderers = {
     a: AnchorRenderer,
     code: CodeRenderer,
     img: ImgRenderer,
     edited: EditedRenderer,
 };
 
+const renderersProps = {
+    img: {
+        initialDimensions: {
+            width: MAX_IMG_DIMENSIONS,
+            height: MAX_IMG_DIMENSIONS,
+        },
+    },
+};
+
 const BaseRenderHTML = ({html, debug, textSelectable}) => {
     const {width} = useWindowDimensions();
     const containerWidth = width * 0.8;
     return (
         <HTML
-            textSelectable={textSelectable}
+            defaultTextProps={{selectable: textSelectable}}
+            customHTMLElementModels={customHTMLElementModels}
             renderers={renderers}
+            renderersProps={renderersProps}
             baseStyle={webViewStyles.baseFontStyle}
             tagsStyles={webViewStyles.tagStyles}
             enableCSSInlineProcessing={false}
+            dangerouslyDisableWhitespaceCollapsing={false}
             contentWidth={containerWidth}
-            computeImagesMaxWidth={computeImagesMaxWidth}
+            computeEmbeddedMaxWidth={computeEmbeddedMaxWidth}
             systemFonts={EXTRA_FONTS}
-            imagesInitialDimensions={{
-                width: MAX_IMG_DIMENSIONS,
-                height: MAX_IMG_DIMENSIONS,
-            }}
-            html={html}
+            source={{html}}
             debug={debug}
         />
     );