diff --git a/package-lock.json b/package-lock.json index b9dce013edf7..a49742c96618 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4602,6 +4602,18 @@ "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==", + "dev": true + }, + "@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==", + "dev": true + }, "@lwc/eslint-plugin-lwc": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@lwc/eslint-plugin-lwc/-/eslint-plugin-lwc-0.11.0.tgz", @@ -4887,87 +4899,89 @@ } }, "@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.0", + "resolved": "https://registry.npmjs.org/@native-html/css-processor/-/css-processor-1.10.0.tgz", + "integrity": "sha512-ckJxKkXdku0bJOnCe8YLdD1ivCqW0naC5D0FAnC9OwH+BiMh1fAjipRSz5C0DDWvKQsb8N1zo2cCiAH7DTxJOw==", + "dev": true, "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==", + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/@native-html/transient-render-engine/-/transient-render-engine-9.2.0.tgz", + "integrity": "sha512-9pcEgGOtyRXBC/qhd2vZYcnwFesOENEbixbTDOyHX1VSoDzaE7EEM+lX/BzUtX8/qP0KoTyaxDvSmTZshertOQ==", + "dev": true, "requires": { - "@native-html/css-processor": "1.6.1", - "@types/ramda": "^0.27.32", - "htmlparser2": "^5.0.1", + "@native-html/css-processor": "1.10.0", + "@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==", + "dev": true, "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==", + "dev": true }, "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==", + "dev": true, "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==", + "dev": true, "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==", + "dev": true }, "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==", + "dev": true, "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" } }, "ramda": { "version": "0.27.1", "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.1.tgz", - "integrity": "sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw==" + "integrity": "sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw==", + "dev": true } } }, @@ -13147,9 +13161,10 @@ "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.42", + "resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.27.42.tgz", + "integrity": "sha512-O4b1HAiT4mD4/PaPtAg5LEPs5E05tKPnFbVsDTC/ChBd1Wl9jbmwHm1GcumXv4AuENwv8XD8ciTyn+hRXDs6qQ==", + "dev": true, "requires": { "ts-toolbelt": "^6.15.1" } @@ -13239,6 +13254,12 @@ "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==", "dev": true }, + "@types/urijs": { + "version": "1.19.15", + "resolved": "https://registry.npmjs.org/@types/urijs/-/urijs-1.19.15.tgz", + "integrity": "sha512-pEDVREIvkyRtzpWlO5nqsUgR/JpLv9+lAzvkERCwoH2jXxl+TmaTNshhL7gjQLhfqgFUzCM6ovmoB1JssTop1A==", + "dev": true + }, "@types/webpack": { "version": "4.41.22", "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.22.tgz", @@ -16021,7 +16042,8 @@ "camelize": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", - "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=", + "dev": true }, "caniuse-lite": { "version": "1.0.30001211", @@ -16085,6 +16107,12 @@ "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==", + "dev": true + }, "character-entities-legacy": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", @@ -17434,7 +17462,8 @@ "css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", - "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=", + "dev": true }, "css-in-js-utils": { "version": "2.0.1", @@ -17600,6 +17629,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "dev": true, "requires": { "camelize": "^1.0.0", "css-color-keywords": "^1.0.0", @@ -31882,7 +31912,8 @@ "postcss-value-parser": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz", - "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==" + "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==", + "dev": true }, "preact": { "version": "10.5.13", @@ -34009,19 +34040,27 @@ } }, "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.7", + "resolved": "https://registry.npmjs.org/react-native-render-html/-/react-native-render-html-6.0.0-beta.7.tgz", + "integrity": "sha512-CTTQO++x5Wp7V1CMiV7r1B3SoU5F8qkOVrsMt5iZhTMITRiZJK3ZgY5axXIUL5rNJONee0TqWWfBlCzBNuRZXQ==", + "dev": true, "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.0", + "@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": { "version": "0.27.1", "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.1.tgz", - "integrity": "sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw==" + "integrity": "sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw==", + "dev": true } } }, @@ -37048,6 +37087,17 @@ "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==", + "dev": true, + "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", @@ -38029,7 +38079,8 @@ "ts-toolbelt": { "version": "6.15.5", "resolved": "https://registry.npmjs.org/ts-toolbelt/-/ts-toolbelt-6.15.5.tgz", - "integrity": "sha512-FZIXf1ksVyLcfr7M317jbB67XFJhOO1YqdTcuGaq9q5jLUoTikukZ+98TPjKiP2jC5CgmYdWWYs0s2nLSU0/1A==" + "integrity": "sha512-FZIXf1ksVyLcfr7M317jbB67XFJhOO1YqdTcuGaq9q5jLUoTikukZ+98TPjKiP2jC5CgmYdWWYs0s2nLSU0/1A==", + "dev": true }, "tsc": { "version": "1.20150623.0", @@ -38463,6 +38514,12 @@ "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==", + "dev": true + }, "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 08a793391d62..1f2871fca995 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,6 @@ "react-native-picker-select": "8.0.4", "react-native-plaid-link-sdk": "^7.0.5", "react-native-reanimated": "^2.1.0", - "react-native-render-html": "^6.0.0-alpha.10", "react-native-safe-area-context": "^3.1.4", "react-native-screens": "^3.0.0", "react-native-svg": "^12.1.0", @@ -151,6 +150,7 @@ "portfinder": "^1.0.28", "pusher-js-mock": "^0.3.3", "react-hot-loader": "^4.12.21", + "react-native-render-html": "^6.0.0-beta.7", "react-native-svg-transformer": "^0.14.3", "react-test-renderer": "16.13.1", "semver": "^7.3.4", diff --git a/src/components/RenderHTML/BaseRenderHTML.js b/src/components/RenderHTML/BaseRenderHTML.js index 584dedf60d03..b8fd3defc799 100755 --- a/src/components/RenderHTML/BaseRenderHTML.js +++ b/src/components/RenderHTML/BaseRenderHTML.js @@ -54,10 +54,14 @@ const EXTRA_FONTS = [ * * @param {number} contentWidth - The content width provided to the HTML * component. + * @param {number} tagName - tagname of the Element whose maxWidth needs to be set * @returns {number} The minimum between contentWidth and MAX_IMG_DIMENSIONS */ -function computeImagesMaxWidth(contentWidth) { - return Math.min(MAX_IMG_DIMENSIONS, contentWidth); +function computeEmbeddedMaxWidth(contentWidth, tagName) { + if (tagName === 'img') { + return Math.min(MAX_IMG_DIMENSIONS, contentWidth); + } + return contentWidth; } function AnchorRenderer({tnode, key, style}) { @@ -218,13 +222,18 @@ const BaseRenderHTML = ({html, debug, textSelectable}) => { tagsStyles={webViewStyles.tagStyles} enableCSSInlineProcessing={false} contentWidth={containerWidth} - computeImagesMaxWidth={computeImagesMaxWidth} + computeEmbeddedMaxWidth={computeEmbeddedMaxWidth} systemFonts={EXTRA_FONTS} - imagesInitialDimensions={{ - width: MAX_IMG_DIMENSIONS, - height: MAX_IMG_DIMENSIONS, + dangerouslyDisableWhitespaceCollapsing + renderersProps={{ + img: { + initialDimensions: { + width: MAX_IMG_DIMENSIONS, + height: MAX_IMG_DIMENSIONS, + }, + }, }} - html={html} + source={{html}} debug={debug} /> );