From e981927b05d20aa0bc010782846e4efbee455b1a Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Wed, 14 Jul 2021 10:55:23 -0300 Subject: [PATCH 1/2] refactor: upgrade to react-native-render-html@6.0.0-beta.8 fix #3951 --- package-lock.json | 146 ++++++++++++-------- package.json | 2 +- src/components/RenderHTML/BaseRenderHTML.js | 45 +++--- 3 files changed, 119 insertions(+), 74 deletions(-) diff --git a/package-lock.json b/package-lock.json index ded5a3e3aa85..37e734c63d61 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6666,6 +6666,16 @@ "regenerator-runtime": "^0.13.3" } }, + "@jsamr/counter-style": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@jsamr/counter-style/-/counter-style-2.0.1.tgz", + "integrity": "sha512-ox/fGXtTRWk+si55lcfuM2oIaIxK/vPbugaeR9O++9tI/5Vx31SVkUbtvXIIN27U+thRlR0hz5b/+Geq7zg5NA==" + }, + "@jsamr/react-native-li": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@jsamr/react-native-li/-/react-native-li-2.2.1.tgz", + "integrity": "sha512-24lfABRzLai11PQSWMdOtwfHAr/2pnWM2adO7npE6aNFJ31u3NCp0+zlYKuo4wdOy32QI5t57KvRDKJjlWvefQ==" + }, "@lwc/eslint-plugin-lwc": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@lwc/eslint-plugin-lwc/-/eslint-plugin-lwc-0.11.0.tgz", @@ -6951,80 +6961,73 @@ } }, "@native-html/css-processor": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/@native-html/css-processor/-/css-processor-1.6.1.tgz", - "integrity": "sha512-3l4SmYU5CIwL7f8GSssypWfFd7W/FcqVrOomhDRbaWYsxKh2T0zNcIjJbkr8ZbpXJk3qKrV1EMoTJ8vt6H8M9Q==", + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@native-html/css-processor/-/css-processor-1.10.1.tgz", + "integrity": "sha512-Z5dNwMrhvEDRNgz0wNGFyC3Huvpe8HK3AjGfNYLU0/FZeNbzIKOvGxJqAjricegxbkxwnV/VMHPUG6zZwSUT5w==", "requires": { "css-to-react-native": "^3.0.0" } }, "@native-html/transient-render-engine": { - "version": "3.6.1", - "resolved": "https://registry.npmjs.org/@native-html/transient-render-engine/-/transient-render-engine-3.6.1.tgz", - "integrity": "sha512-SkII7uJt399xn9W7ciPzEWZBnRYGKb2zlo3VLMkIEL9V8O1yQPxEfHERI4D7w8zU7W8H9+7S8IYpPEhBzIlzFQ==", - "requires": { - "@native-html/css-processor": "1.6.1", - "@types/ramda": "^0.27.32", - "htmlparser2": "^5.0.1", + "version": "9.2.1", + "resolved": "https://registry.npmjs.org/@native-html/transient-render-engine/-/transient-render-engine-9.2.1.tgz", + "integrity": "sha512-Lmvh2x0G5drN/mvR5r8M5+jZgTd2DeIWMOtJ8uTpU/ngVorEE3PzF47gYfcs4rEIqE95t1631gpwTrvHXgePAw==", + "requires": { + "@native-html/css-processor": "1.10.1", + "@types/ramda": "^0.27.40", + "csstype": "^3.0.8", + "domelementtype": "^2.2.0", + "domhandler": "^4.2.0", + "htmlparser2": "^6.1.0", "ramda": "^0.27.1" }, "dependencies": { "dom-serializer": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.1.0.tgz", - "integrity": "sha512-ox7bvGXt2n+uLWtCRLybYx60IrOlWL/aCebWJk1T0d4m3y2tzf4U3ij9wBMUb6YJZpz06HCCYuyCDveE2xXmzQ==", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", + "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==", "requires": { "domelementtype": "^2.0.1", - "domhandler": "^3.0.0", + "domhandler": "^4.2.0", "entities": "^2.0.0" } }, "domelementtype": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.1.0.tgz", - "integrity": "sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==" + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz", + "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==" }, "domhandler": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.3.0.tgz", - "integrity": "sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz", + "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==", "requires": { - "domelementtype": "^2.0.1" + "domelementtype": "^2.2.0" } }, "domutils": { - "version": "2.4.3", - "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.3.tgz", - "integrity": "sha512-MDMfEjgtzHvRX7i21XQfkk/vfZbLOe0VJk8dDETkTTo3BTeH3NXz3Xvs94UQ+GzTw/GjRYKsfVKIIOheYX63fw==", + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz", + "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==", "requires": { "dom-serializer": "^1.0.1", - "domelementtype": "^2.0.1", - "domhandler": "^4.0.0" - }, - "dependencies": { - "domhandler": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.0.0.tgz", - "integrity": "sha512-KPTbnGQ1JeEMQyO1iYXoagsI6so/C96HZiFyByU3T6iAzpXn8EGEvct6unm1ZGoed8ByO2oirxgwxBmqKF9haA==", - "requires": { - "domelementtype": "^2.1.0" - } - } + "domelementtype": "^2.2.0", + "domhandler": "^4.2.0" } }, "entities": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz", - "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==" + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==" }, "htmlparser2": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-5.0.1.tgz", - "integrity": "sha512-vKZZra6CSe9qsJzh0BjBGXo8dvzNsq/oGvsjfRdOrrryfeD9UOBEEQdeoqCRmKZchF5h2zOBMQ6YuQ0uRUmdbQ==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz", + "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==", "requires": { "domelementtype": "^2.0.1", - "domhandler": "^3.3.0", - "domutils": "^2.4.2", + "domhandler": "^4.0.0", + "domutils": "^2.5.2", "entities": "^2.0.0" } }, @@ -15216,9 +15219,9 @@ "dev": true }, "@types/ramda": { - "version": "0.27.32", - "resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.27.32.tgz", - "integrity": "sha512-vdwZcWC+hlTxB//LZQLS1+VEdArImGI4yVKUpeqB8b9mBXgDFXCuQoOt8spQbi8fTyNLOdqRv6liSm2ckxWLog==", + "version": "0.27.44", + "resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.27.44.tgz", + "integrity": "sha512-SlEHKcLG36PlU+rLJwp8p4dpC9Hp/LiH6n0REX2m4iEB15PWe1qKQzgNSZrYKhTHDFvkeEM/F2gcYwfighsEuQ==", "requires": { "ts-toolbelt": "^6.15.1" } @@ -15308,6 +15311,11 @@ "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==", "dev": true }, + "@types/urijs": { + "version": "1.19.16", + "resolved": "https://registry.npmjs.org/@types/urijs/-/urijs-1.19.16.tgz", + "integrity": "sha512-WgxqcUSEYijGnNWHSln/uqay+AywS3mEhLC+d2PwLsru2fLeMblvxP67Y/SCfB2Pxe+dX/zbIoNNzXY+VKOtNA==" + }, "@types/webpack": { "version": "4.41.22", "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.22.tgz", @@ -18194,11 +18202,15 @@ "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==", "dev": true }, + "character-entities-html4": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.4.tgz", + "integrity": "sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g==" + }, "character-entities-legacy": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", - "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==", - "dev": true + "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==" }, "character-reference-invalid": { "version": "1.1.4", @@ -19809,8 +19821,7 @@ "csstype": { "version": "3.0.8", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", - "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==", - "dev": true + "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" }, "custom-event-polyfill": { "version": "1.0.7", @@ -36192,13 +36203,19 @@ } }, "react-native-render-html": { - "version": "6.0.0-alpha.10", - "resolved": "https://registry.npmjs.org/react-native-render-html/-/react-native-render-html-6.0.0-alpha.10.tgz", - "integrity": "sha512-qXc8Osb8QuEFztfGqWTXltxRi8Pg84brqZSLYRpmC3ERfCXDCE8KQpGq6SEx8zTKk5uaurkMo/QBa07sRcQB2g==", + "version": "6.0.0-beta.8", + "resolved": "https://registry.npmjs.org/react-native-render-html/-/react-native-render-html-6.0.0-beta.8.tgz", + "integrity": "sha512-DnUPa/uYSC7lyLQMCVXidBjgj1N1k/TG4tc55pGbwiVYTz17eCMCk7gmw61ruXqvMgNIgEddYrKkwyFtYtYAzw==", "requires": { - "@native-html/transient-render-engine": "^3.6.1", - "@types/ramda": "^0.27.32", - "ramda": "^0.27.1" + "@jsamr/counter-style": "^2.0.1", + "@jsamr/react-native-li": "^2.2.1", + "@native-html/transient-render-engine": "^9.2.1", + "@types/ramda": "^0.27.40", + "@types/urijs": "^1.19.15", + "prop-types": "^15.5.7", + "ramda": "^0.27.1", + "stringify-entities": "^3.1.0", + "urijs": "^1.19.6" }, "dependencies": { "ramda": { @@ -39340,6 +39357,16 @@ "safe-buffer": "~5.1.0" } }, + "stringify-entities": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.1.0.tgz", + "integrity": "sha512-3FP+jGMmMV/ffZs86MoghGqAoqXAdxLrJP4GUdrDN1aIScYih5tuIO3eF4To5AJZ79KDZ8Fpdy7QJnK8SsL1Vg==", + "requires": { + "character-entities-html4": "^1.0.0", + "character-entities-legacy": "^1.0.0", + "xtend": "^4.0.0" + } + }, "strip-ansi": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", @@ -40839,6 +40866,11 @@ "punycode": "^2.1.0" } }, + "urijs": { + "version": "1.19.6", + "resolved": "https://registry.npmjs.org/urijs/-/urijs-1.19.6.tgz", + "integrity": "sha512-eSXsXZ2jLvGWeLYlQA3Gh36BcjF+0amo92+wHPyN1mdR8Nxf75fuEuYTd9c0a+m/vhCjRK0ESlE9YNLW+E1VEw==" + }, "urix": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz", diff --git a/package.json b/package.json index 6477db2fb5c9..8327034464a2 100644 --- a/package.json +++ b/package.json @@ -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 index 584dedf60d03..dcf7fbe53958 100755 --- 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,13 +197,14 @@ 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, @@ -207,24 +212,32 @@ const renderers = { 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 ( ); From 494c5b65b359f1bcfb272bd59de7a1a63552a39d Mon Sep 17 00:00:00 2001 From: OSBotify Date: Fri, 23 Jul 2021 21:52:29 +0000 Subject: [PATCH 2/2] Update version to 1.0.79-6 --- android/app/build.gradle | 4 ++-- ios/ExpensifyCash/Info.plist | 2 +- ios/ExpensifyCashTests/Info.plist | 2 +- package-lock.json | 2 +- package.json | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/android/app/build.gradle b/android/app/build.gradle index ec5262b0c752..741dff636176 100644 --- 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 index 387a17b1fa4e..90351581cc56 100644 --- a/ios/ExpensifyCash/Info.plist +++ b/ios/ExpensifyCash/Info.plist @@ -30,7 +30,7 @@ CFBundleVersion - 1.0.79.5 + 1.0.79.6 ITSAppUsesNonExemptEncryption LSApplicationQueriesSchemes diff --git a/ios/ExpensifyCashTests/Info.plist b/ios/ExpensifyCashTests/Info.plist index 3881c694ec1c..7c80db538e45 100644 --- a/ios/ExpensifyCashTests/Info.plist +++ b/ios/ExpensifyCashTests/Info.plist @@ -19,6 +19,6 @@ CFBundleSignature ???? CFBundleVersion - 1.0.79.5 + 1.0.79.6 diff --git a/package-lock.json b/package-lock.json index 6975348b0956..115cf1c55ce8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "expensify.cash", - "version": "1.0.79-5", + "version": "1.0.79-6", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 0a3d1e97f42a..e730ca6deca2 100644 --- 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.",