From 315b6a7b578adc6cb2df5c5024a17cac2b10a7cc Mon Sep 17 00:00:00 2001 From: Aswin S Date: Mon, 17 Apr 2023 12:25:08 +0530 Subject: [PATCH 01/13] fix: use block styling for parent HTML node --- src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js | 2 +- src/styles/utilities/display.js | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js index fbda8b4941dd..25784aad6122 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js @@ -50,7 +50,7 @@ const customHTMLElementModels = { }), }; -const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]}; +const defaultViewProps = {style: [styles.dBlock, styles.userSelectText]}; // We are using the explicit composite architecture for performance gains. // Configuration for RenderHTML is handled in a top-level component providing diff --git a/src/styles/utilities/display.js b/src/styles/utilities/display.js index a16a62694af8..9e7e4107a937 100644 --- a/src/styles/utilities/display.js +++ b/src/styles/utilities/display.js @@ -20,4 +20,7 @@ export default { dInline: { display: 'inline', }, + dBlock: { + display: 'block', + }, }; From 8aaa49fac9d73cd077fa7a974f90da11aecb3de4 Mon Sep 17 00:00:00 2001 From: Aswin S Date: Mon, 17 Apr 2023 12:26:33 +0530 Subject: [PATCH 02/13] fix: image styling with block parent --- src/components/ThumbnailImage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js index dedd320d1c91..9ad20873089f 100644 --- a/src/components/ThumbnailImage.js +++ b/src/components/ThumbnailImage.js @@ -87,7 +87,7 @@ class ThumbnailImage extends PureComponent { render() { return ( - + Date: Mon, 17 Apr 2023 15:07:32 +0530 Subject: [PATCH 03/13] fix: use block display only for web & desktop platforms --- .../HTMLEngineProvider/BaseHTMLEngineProvider.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js index 25784aad6122..76c3b6eccd24 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js @@ -10,6 +10,8 @@ import htmlRenderers from './HTMLRenderers'; import * as HTMLEngineUtils from './htmlEngineUtils'; import styles from '../../styles/styles'; import fontFamily from '../../styles/fontFamily'; +import getPlatform from '../../libs/getPlatform/index'; +import CONST from '../../CONST'; const propTypes = { /** Whether text elements should be selectable */ @@ -50,7 +52,13 @@ const customHTMLElementModels = { }), }; -const defaultViewProps = {style: [styles.dBlock, styles.userSelectText]}; +// For web platform defaultViewProps should use block display, otherwise immediate +// children will inherit display:block even when they have display:inline set in CSS. +const defaultViewProps = { + style: [CONST.PLATFORM.WEB, CONST.PLATFORM.DESKTOP].includes(getPlatform()) + ? [styles.dBlock, styles.userSelectText] + : [styles.dFlex, styles.userSelectText], +}; // We are using the explicit composite architecture for performance gains. // Configuration for RenderHTML is handled in a top-level component providing From d0650259b2e7fd82028bc44ed6d035f3d86ed3d8 Mon Sep 17 00:00:00 2001 From: Aswin S Date: Sun, 23 Apr 2023 16:19:52 +0530 Subject: [PATCH 04/13] fix: separate defaultViewProps into separate platform files --- .../HTMLEngineProvider/BaseHTMLEngineProvider.js | 11 +---------- .../defaultViewProps/defaultViewProps.native.js | 5 +++++ .../defaultViewProps/defaultViewProps.web.js | 6 ++++++ 3 files changed, 12 insertions(+), 10 deletions(-) create mode 100644 src/components/HTMLEngineProvider/defaultViewProps/defaultViewProps.native.js create mode 100644 src/components/HTMLEngineProvider/defaultViewProps/defaultViewProps.web.js diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js index 76c3b6eccd24..2b6b25ec14c2 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js @@ -10,8 +10,7 @@ import htmlRenderers from './HTMLRenderers'; import * as HTMLEngineUtils from './htmlEngineUtils'; import styles from '../../styles/styles'; import fontFamily from '../../styles/fontFamily'; -import getPlatform from '../../libs/getPlatform/index'; -import CONST from '../../CONST'; +import defaultViewProps from './defaultViewProps/defaultViewProps'; const propTypes = { /** Whether text elements should be selectable */ @@ -52,14 +51,6 @@ const customHTMLElementModels = { }), }; -// For web platform defaultViewProps should use block display, otherwise immediate -// children will inherit display:block even when they have display:inline set in CSS. -const defaultViewProps = { - style: [CONST.PLATFORM.WEB, CONST.PLATFORM.DESKTOP].includes(getPlatform()) - ? [styles.dBlock, styles.userSelectText] - : [styles.dFlex, styles.userSelectText], -}; - // We are using the explicit composite architecture for performance gains. // Configuration for RenderHTML is handled in a top-level component providing // context to RenderHTMLSource components. See https://git.io/JRcZb diff --git a/src/components/HTMLEngineProvider/defaultViewProps/defaultViewProps.native.js b/src/components/HTMLEngineProvider/defaultViewProps/defaultViewProps.native.js new file mode 100644 index 000000000000..0a9917ebcdf7 --- /dev/null +++ b/src/components/HTMLEngineProvider/defaultViewProps/defaultViewProps.native.js @@ -0,0 +1,5 @@ +import styles from '../../../styles/styles'; + +export default { + style: [styles.dFlex, styles.userSelectText], +}; diff --git a/src/components/HTMLEngineProvider/defaultViewProps/defaultViewProps.web.js b/src/components/HTMLEngineProvider/defaultViewProps/defaultViewProps.web.js new file mode 100644 index 000000000000..0c0bbc97b4c2 --- /dev/null +++ b/src/components/HTMLEngineProvider/defaultViewProps/defaultViewProps.web.js @@ -0,0 +1,6 @@ +import styles from '../../../styles/styles'; + +export default { + style: [styles.dBlock, styles.userSelectText], +}; + From 3c806301a979c6dd71ac4fc738f2822c30212547 Mon Sep 17 00:00:00 2001 From: Aswin S Date: Tue, 25 Apr 2023 12:18:49 +0530 Subject: [PATCH 05/13] fix: rename files --- src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js | 2 +- .../{defaultViewProps.native.js => index.native.js} | 0 .../defaultViewProps/{defaultViewProps.web.js => index.web.js} | 0 3 files changed, 1 insertion(+), 1 deletion(-) rename src/components/HTMLEngineProvider/defaultViewProps/{defaultViewProps.native.js => index.native.js} (100%) rename src/components/HTMLEngineProvider/defaultViewProps/{defaultViewProps.web.js => index.web.js} (100%) diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js index 2b6b25ec14c2..f195d4bc624d 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js @@ -10,7 +10,7 @@ import htmlRenderers from './HTMLRenderers'; import * as HTMLEngineUtils from './htmlEngineUtils'; import styles from '../../styles/styles'; import fontFamily from '../../styles/fontFamily'; -import defaultViewProps from './defaultViewProps/defaultViewProps'; +import defaultViewProps from './defaultViewProps'; const propTypes = { /** Whether text elements should be selectable */ diff --git a/src/components/HTMLEngineProvider/defaultViewProps/defaultViewProps.native.js b/src/components/HTMLEngineProvider/defaultViewProps/index.native.js similarity index 100% rename from src/components/HTMLEngineProvider/defaultViewProps/defaultViewProps.native.js rename to src/components/HTMLEngineProvider/defaultViewProps/index.native.js diff --git a/src/components/HTMLEngineProvider/defaultViewProps/defaultViewProps.web.js b/src/components/HTMLEngineProvider/defaultViewProps/index.web.js similarity index 100% rename from src/components/HTMLEngineProvider/defaultViewProps/defaultViewProps.web.js rename to src/components/HTMLEngineProvider/defaultViewProps/index.web.js From 1d804078e77637289ebaf4d6d7aabb2ca59cf753 Mon Sep 17 00:00:00 2001 From: Aswin S Date: Tue, 25 Apr 2023 13:53:17 +0530 Subject: [PATCH 06/13] add comment to explain why block display is needed --- .../HTMLEngineProvider/defaultViewProps/index.web.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/HTMLEngineProvider/defaultViewProps/index.web.js b/src/components/HTMLEngineProvider/defaultViewProps/index.web.js index 0c0bbc97b4c2..65b8174ceac5 100644 --- a/src/components/HTMLEngineProvider/defaultViewProps/index.web.js +++ b/src/components/HTMLEngineProvider/defaultViewProps/index.web.js @@ -1,6 +1,9 @@ import styles from '../../../styles/styles'; export default { + // For web platform default to block display. Using flex on root view will force all + // child elements to be block elements even when they have display inline added to them. + // This will affect elements like which are inline by default. style: [styles.dBlock, styles.userSelectText], }; From c561d8e7bc049e2ceb3f2d49095d4309be15f17a Mon Sep 17 00:00:00 2001 From: Aswin S Date: Tue, 25 Apr 2023 13:53:36 +0530 Subject: [PATCH 07/13] fix: styling of file attachment view --- src/styles/styles.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/styles.js b/src/styles/styles.js index 9c2eac87884a..335baf6d7e88 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1935,6 +1935,7 @@ const styles = { flexDirection: 'row', padding: 20, alignItems: 'center', + alignSelf: 'flex-start', }, notFoundSafeArea: { From 764262527ec679fde965a6053cf5b8100fd3828b Mon Sep 17 00:00:00 2001 From: Aswin S Date: Tue, 25 Apr 2023 14:55:14 +0530 Subject: [PATCH 08/13] fix: default alignment of pressables in comment renderer --- .../AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js | 3 ++- .../HTMLEngineProvider/HTMLRenderers/ImageRenderer.js | 2 +- src/components/ThumbnailImage.js | 2 +- src/styles/styles.js | 1 - 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js index 87835062a959..9021371ff7e4 100644 --- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js +++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js @@ -13,6 +13,7 @@ import * as Download from '../../libs/actions/Download'; import fileDownload from '../../libs/fileDownload'; import addEncryptedAuthTokenToURL from '../../libs/addEncryptedAuthTokenToURL'; import {ShowContextMenuContext, showContextMenuForReport} from '../ShowContextMenuContext'; +import styles from '../../styles/styles'; const propTypes = { /** Press in handler for the link */ @@ -53,7 +54,7 @@ const BaseAnchorForAttachmentsOnly = (props) => { checkIfContextMenuActive, }) => ( { if (isDownloading) { return; diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index 750f316030bf..db799785f7a3 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -66,7 +66,7 @@ const ImageRenderer = (props) => { > {({show}) => ( showContextMenuForReport(event, anchor, reportID, action, checkIfContextMenuActive)} > diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js index 9ad20873089f..dedd320d1c91 100644 --- a/src/components/ThumbnailImage.js +++ b/src/components/ThumbnailImage.js @@ -87,7 +87,7 @@ class ThumbnailImage extends PureComponent { render() { return ( - + Date: Tue, 25 Apr 2023 14:59:05 +0530 Subject: [PATCH 09/13] fix: move custom style into HTML renderers --- .../AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js | 3 +-- .../HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js index 9021371ff7e4..87835062a959 100644 --- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js +++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js @@ -13,7 +13,6 @@ import * as Download from '../../libs/actions/Download'; import fileDownload from '../../libs/fileDownload'; import addEncryptedAuthTokenToURL from '../../libs/addEncryptedAuthTokenToURL'; import {ShowContextMenuContext, showContextMenuForReport} from '../ShowContextMenuContext'; -import styles from '../../styles/styles'; const propTypes = { /** Press in handler for the link */ @@ -54,7 +53,7 @@ const BaseAnchorForAttachmentsOnly = (props) => { checkIfContextMenuActive, }) => ( { if (isDownloading) { return; diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js index 92c327bc6053..6d7711ed7190 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js @@ -79,6 +79,7 @@ const AnchorRenderer = (props) => { if (isAttachment) { return ( From 23ac14e3bf115d3fe85e54250c679b0ab65d3c11 Mon Sep 17 00:00:00 2001 From: Aswin S Date: Tue, 25 Apr 2023 15:04:06 +0530 Subject: [PATCH 10/13] fix: pass down style props from parent --- src/components/AnchorForAttachmentsOnly/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AnchorForAttachmentsOnly/index.native.js b/src/components/AnchorForAttachmentsOnly/index.native.js index 0a98ee0bb4ec..8b8c0d2cf1c0 100644 --- a/src/components/AnchorForAttachmentsOnly/index.native.js +++ b/src/components/AnchorForAttachmentsOnly/index.native.js @@ -4,7 +4,7 @@ import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly'; import styles from '../../styles/styles'; // eslint-disable-next-line react/jsx-props-no-spreading -const AnchorForAttachmentsOnly = props => ; +const AnchorForAttachmentsOnly = props => ; AnchorForAttachmentsOnly.propTypes = anchorForAttachmentsOnlyPropTypes.propTypes; AnchorForAttachmentsOnly.defaultProps = anchorForAttachmentsOnlyPropTypes.defaultProps; From 5a59f158a1f39967079c2284e27778510df369e2 Mon Sep 17 00:00:00 2001 From: Aswin S Date: Wed, 26 Apr 2023 13:15:40 +0530 Subject: [PATCH 11/13] fix: use StyleUtils to destructure array type --- src/components/AnchorForAttachmentsOnly/index.native.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/AnchorForAttachmentsOnly/index.native.js b/src/components/AnchorForAttachmentsOnly/index.native.js index 8b8c0d2cf1c0..965b99876180 100644 --- a/src/components/AnchorForAttachmentsOnly/index.native.js +++ b/src/components/AnchorForAttachmentsOnly/index.native.js @@ -1,10 +1,11 @@ import React from 'react'; -import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPropTypes'; -import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly'; +import * as StyleUtils from '../../styles/StyleUtils'; import styles from '../../styles/styles'; +import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly'; +import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPropTypes'; // eslint-disable-next-line react/jsx-props-no-spreading -const AnchorForAttachmentsOnly = props => ; +const AnchorForAttachmentsOnly = props => ; AnchorForAttachmentsOnly.propTypes = anchorForAttachmentsOnlyPropTypes.propTypes; AnchorForAttachmentsOnly.defaultProps = anchorForAttachmentsOnlyPropTypes.defaultProps; From 594297ef6f1c4adb76cc13d8c212672dde96f0b0 Mon Sep 17 00:00:00 2001 From: Aswin S Date: Wed, 26 Apr 2023 13:17:19 +0530 Subject: [PATCH 12/13] fix: export ordering --- src/components/AnchorForAttachmentsOnly/index.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AnchorForAttachmentsOnly/index.native.js b/src/components/AnchorForAttachmentsOnly/index.native.js index 965b99876180..4072a8deb077 100644 --- a/src/components/AnchorForAttachmentsOnly/index.native.js +++ b/src/components/AnchorForAttachmentsOnly/index.native.js @@ -1,8 +1,8 @@ import React from 'react'; -import * as StyleUtils from '../../styles/StyleUtils'; -import styles from '../../styles/styles'; import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly'; import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPropTypes'; +import * as StyleUtils from '../../styles/StyleUtils'; +import styles from '../../styles/styles'; // eslint-disable-next-line react/jsx-props-no-spreading const AnchorForAttachmentsOnly = props => ; From f9c99c5b4dd216c3f3c6bc6a1d6e0efff357b3ea Mon Sep 17 00:00:00 2001 From: Aswin S Date: Wed, 26 Apr 2023 13:18:16 +0530 Subject: [PATCH 13/13] reorder imports --- src/components/AnchorForAttachmentsOnly/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AnchorForAttachmentsOnly/index.native.js b/src/components/AnchorForAttachmentsOnly/index.native.js index 4072a8deb077..a07aef5f8952 100644 --- a/src/components/AnchorForAttachmentsOnly/index.native.js +++ b/src/components/AnchorForAttachmentsOnly/index.native.js @@ -1,6 +1,6 @@ import React from 'react'; -import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly'; import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPropTypes'; +import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly'; import * as StyleUtils from '../../styles/StyleUtils'; import styles from '../../styles/styles';