Merge pull request #17496 from aswin-s/aswin_s/issue-16526

fix: inline display for comment links

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';
 
 // eslint-disable-next-line react/jsx-props-no-spreading
-const AnchorForAttachmentsOnly = props => <BaseAnchorForAttachmentsOnly {...props} style={styles.mw100} />;
+const AnchorForAttachmentsOnly = props => <BaseAnchorForAttachmentsOnly {...props} style={[...StyleUtils.parseStyleAsArray(props.style), styles.mw100]} />;
 
 AnchorForAttachmentsOnly.propTypes = anchorForAttachmentsOnlyPropTypes.propTypes;
 AnchorForAttachmentsOnly.defaultProps = anchorForAttachmentsOnlyPropTypes.defaultProps;

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

@@ -10,6 +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';
 
 const propTypes = {
     /** Whether text elements should be selectable */
@@ -50,8 +51,6 @@ const customHTMLElementModels = {
     }),
 };
 
-const defaultViewProps = {style: [styles.alignItemsStart, 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

src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js

@@ -80,6 +80,7 @@ const AnchorRenderer = (props) => {
     if (isAttachment) {
         return (
             <AnchorForAttachmentsOnly
+                style={styles.alignItemsStart}
                 source={tryResolveUrlFromApiRoot(attrHref)}
                 displayName={displayName}
             />

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js

@@ -66,7 +66,7 @@ const ImageRenderer = (props) => {
                 >
                     {({show}) => (
                         <PressableWithoutFocus
-                            style={styles.noOutline}
+                            styles={[styles.noOutline, styles.alignItemsStart]}
                             onPress={show}
                             onLongPress={event => showContextMenuForReport(event, anchor, reportID, action, checkIfContextMenuActive)}
                         >

src/components/HTMLEngineProvider/defaultViewProps/index.native.js

@@ -0,0 +1,5 @@
+import styles from '../../../styles/styles';
+
+export default {
+    style: [styles.dFlex, styles.userSelectText],
+};

src/components/HTMLEngineProvider/defaultViewProps/index.web.js

@@ -0,0 +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 <a> which are inline by default.
+    style: [styles.dBlock, styles.userSelectText],
+};
+

src/styles/utilities/display.js

@@ -20,4 +20,7 @@ export default {
     dInline: {
         display: 'inline',
     },
+    dBlock: {
+        display: 'block',
+    },
 };