Merge pull request #2527 from parasharrajat/parasharrajat/quotedText

fix inline code blocks

src/components/AnchorForCommentsOnly/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet} from 'react-native';
+import {StyleSheet, Text} from 'react-native';
 import anchorForCommentsOnlyPropTypes from './anchorForCommentsOnlyPropTypes';
 
 const defaultProps = {
@@ -18,16 +18,17 @@ const AnchorForCommentsOnly = ({
     style,
     ...props
 }) => (
-    <a
+    <Text
         style={StyleSheet.flatten(style)}
+        accessibilityRole="link"
         href={href}
         rel={rel}
         target={target}
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
     >
         {children}
-    </a>
+    </Text>
 );
 
 AnchorForCommentsOnly.propTypes = anchorForCommentsOnlyPropTypes;

src/components/InlineCodeBlock/WrappedText.js

@@ -0,0 +1,76 @@
+import _ from 'underscore';
+import React, {Fragment} from 'react';
+import {Text, View} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../../styles/styles';
+
+/**
+ * Breaks the text into matrix
+ * for eg: My Name  is Rajat
+ *  [
+ *    [My,' ',Name,' ',' ',is,' ',Rajat],
+ *  ]
+ *
+ * @param {String} text
+ * @returns {Array<String[]>}
+ */
+function getTextMatrix(text) {
+    return text.split('\n').map(row => _.without(row.split(/(\s)/), ''));
+}
+
+const propTypes = {
+    // Required text
+    children: PropTypes.string.isRequired,
+
+    // Style to be applied to Text
+    textStyles: PropTypes.arrayOf(PropTypes.object),
+
+    // Style for each word(Token) in the text,
+    // remember that token also includes whitespaces among words
+    wordStyles: PropTypes.arrayOf(PropTypes.object),
+};
+
+const defaultProps = {
+    textStyles: [],
+    wordStyles: [],
+};
+
+const WrappedText = (props) => {
+    const textMatrix = getTextMatrix(props.children);
+    return (
+        <>
+            {textMatrix.map((rowText, rowIndex) => (
+                <Fragment
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={`${rowText}-${rowIndex}`}
+                >
+                    {rowText.map((colText, colIndex) => (
+
+                        // Outer View is important to vertically center the Text
+                        <View
+                            // eslint-disable-next-line react/no-array-index-key
+                            key={`${colText}-${colIndex}`}
+                            style={styles.codeWordWrapper}
+                        >
+                            <View
+                                style={[
+                                    props.wordStyles,
+                                    colIndex === 0 && styles.codeFirstWordStyle,
+                                    colIndex === rowText.length - 1 && styles.codeLastWordStyle,
+                                ]}
+                            >
+                                <Text style={props.textStyles}>{colText}</Text>
+                            </View>
+                        </View>
+                    ))}
+                </Fragment>
+            ))}
+        </>
+    );
+};
+
+WrappedText.propTypes = propTypes;
+WrappedText.defaultProps = defaultProps;
+WrappedText.displayName = 'WrappedText';
+
+export default WrappedText;

src/components/InlineCodeBlock/index.ios.js → src/components/InlineCodeBlock/index.native.js

@@ -1,23 +1,24 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
-import {View} from 'react-native';
 import styles from '../../styles/styles';
+import WrappedText from './WrappedText';
 import inlineCodeBlockPropTypes from './inlineCodeBlockPropTypes';
 
 const InlineCodeBlock = ({
-    TDefaultRenderer,
     defaultRendererProps,
     boxModelStyle,
     textStyle,
 }) => (
-    <View
-        style={{
-            ...boxModelStyle,
-            ...styles.mbn1,
-        }}
+    <WrappedText
+        textStyles={[textStyle]}
+        wordStyles={[
+            boxModelStyle,
+            styles.codeWordStyle,
+        ]}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...defaultRendererProps}
     >
-        <TDefaultRenderer style={textStyle} {...defaultRendererProps} />
-    </View>
+        {defaultRendererProps.tnode.data}
+    </WrappedText>
 );
 
 InlineCodeBlock.propTypes = inlineCodeBlockPropTypes;

src/styles/codeStyles/index.android.js

@@ -0,0 +1,14 @@
+const codeWordWrapper = {
+    height: 10,
+};
+
+const codeWordStyle = {
+    top: -1,
+    marginVertical: -2,
+};
+
+const codeTextStyle = {
+    lineHeight: 18,
+};
+
+export default {codeWordWrapper, codeWordStyle, codeTextStyle};

src/styles/codeStyles/index.ios.js

@@ -0,0 +1,16 @@
+const codeWordWrapper = {
+    height: 18,
+    justifyContent: 'center',
+    marginTop: 2,
+};
+
+const codeWordStyle = {
+    height: 16,
+    top: 4,
+};
+
+const codeTextStyle = {
+    lineHeight: 15,
+};
+
+export default {codeWordWrapper, codeWordStyle, codeTextStyle};

src/styles/codeStyles/index.js

@@ -0,0 +1,5 @@
+// We do not need these on Web/Desktop as their implementation defer from Native devices so just noop them
+const codeWordWrapper = {};
+const codeWordStyle = {};
+const codeTextStyle = {};
+export default {codeWordWrapper, codeWordStyle, codeTextStyle};

src/styles/styles.js

@@ -15,6 +15,7 @@ import wordBreak from './utilities/wordBreak';
 import textInputAlignSelf from './utilities/textInputAlignSelf';
 import CONST from '../CONST';
 import positioning from './utilities/positioning';
+import codeStyles from './codeStyles';
 
 const styles = {
     // Add all of our utility and helper styles
@@ -1343,6 +1344,37 @@ const styles = {
         scrollbarWidth: 'none',
     },
 
+    codeWordWrapper: {
+        ...codeStyles.codeWordWrapper,
+    },
+
+    codeWordStyle: {
+        borderLeftWidth: 0,
+        borderRightWidth: 0,
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        justifyContent: 'center',
+        ...codeStyles.codeWordStyle,
+    },
+
+    codeFirstWordStyle: {
+        borderLeftWidth: 1,
+        borderTopLeftRadius: 4,
+        borderBottomLeftRadius: 4,
+        paddingLeft: 5,
+    },
+
+    codeLastWordStyle: {
+        borderRightWidth: 1,
+        borderTopRightRadius: 4,
+        borderBottomRightRadius: 4,
+        paddingRight: 5,
+    },
+
     fullScreenLoading: {
         backgroundColor: themeColors.componentBG,
         opacity: 0.8,
@@ -1363,8 +1395,6 @@ const styles = {
 const baseCodeTagStyles = {
     borderWidth: 1,
     borderRadius: 5,
-    marginTop: 4,
-    marginBottom: 4,
     borderColor: themeColors.border,
     backgroundColor: themeColors.textBackground,
 };
@@ -1419,11 +1449,11 @@ const webViewStyles = {
 
         code: {
             ...baseCodeTagStyles,
+            ...codeStyles.codeTextStyle,
             paddingLeft: 5,
             paddingRight: 5,
-            paddingBottom: 2,
-            alignSelf: 'flex-start',
             fontFamily: fontFamily.MONOSPACE,
+            fontSize: 13,
         },
 
         img: {
@@ -1436,6 +1466,7 @@ const webViewStyles = {
     baseFontStyle: {
         color: themeColors.text,
         fontSize: variables.fontSizeNormal,
+        lineHeight: variables.fontSizeNormalHeight,
         fontFamily: fontFamily.GTA,
     },
 };

src/styles/variables.js

@@ -16,6 +16,7 @@ export default {
     fontSizeLarge: 17,
     fontSizeh1: 19,
     iconSizeExtraSmall: 12,
+    fontSizeNormalHeight: 20,
     iconSizeSmall: 16,
     iconSizeNormal: 20,
     iconSizeLarge: 24,