From fef2e146aafcb8d85f86802d5847f59dc346b7bb Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 22 Apr 2021 06:45:25 +0530 Subject: [PATCH 1/6] fix: IOS Inline code block --- src/styles/codeStyles/index.android.js | 23 +++++++++++++++++++++++ src/styles/codeStyles/index.ios.js | 25 +++++++++++++++++++++++++ src/styles/codeStyles/index.js | 4 ++++ src/styles/styles.js | 18 ++++-------------- 4 files changed, 56 insertions(+), 14 deletions(-) create mode 100644 src/styles/codeStyles/index.android.js create mode 100644 src/styles/codeStyles/index.ios.js create mode 100644 src/styles/codeStyles/index.js diff --git a/src/styles/codeStyles/index.android.js b/src/styles/codeStyles/index.android.js new file mode 100644 index 000000000000..e0c2a85e98fe --- /dev/null +++ b/src/styles/codeStyles/index.android.js @@ -0,0 +1,23 @@ +const codeWordWrapper = { + height: 10, +}; +const codeWordStyle = { + borderLeftWidth: 0, + borderRightWidth: 0, + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + flexBasis: 'auto', + paddingLeft: 0, + paddingRight: 0, + justifyContent: 'center', + marginVertical: -2, + top: -1, +}; + +const codeBlock = { + lineHeight: 18, +}; + +export default {codeWordWrapper, codeWordStyle, codeBlock}; diff --git a/src/styles/codeStyles/index.ios.js b/src/styles/codeStyles/index.ios.js new file mode 100644 index 000000000000..b8d7f044d46d --- /dev/null +++ b/src/styles/codeStyles/index.ios.js @@ -0,0 +1,25 @@ +const codeWordWrapper = { + height: 20, + justifyContent: 'center', + marginTop: 4, +}; +const codeWordStyle = { + borderLeftWidth: 0, + borderRightWidth: 0, + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + paddingLeft: 0, + paddingRight: 0, + justifyContent: 'center', + marginVertical: -2, + height: 20, + top: 4, +}; + +const codeBlock = { + lineHeight: 13, +}; + +export default {codeWordWrapper, codeWordStyle, codeBlock}; diff --git a/src/styles/codeStyles/index.js b/src/styles/codeStyles/index.js new file mode 100644 index 000000000000..d52f174ba4e8 --- /dev/null +++ b/src/styles/codeStyles/index.js @@ -0,0 +1,4 @@ +const codeWordWrapper = {}; +const codeWordStyle = {}; +const codeBlock = {}; +export default {codeWordWrapper, codeWordStyle, codeBlock}; diff --git a/src/styles/styles.js b/src/styles/styles.js index 516f6cd50692..2124d4e8df29 100644 --- a/src/styles/styles.js +++ b/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 @@ -1312,22 +1313,11 @@ const styles = { }, codeWordWrapper: { - height: 10, + ...codeStyles.codeWordWrapper, }, codeWordStyle: { - borderLeftWidth: 0, - borderRightWidth: 0, - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - borderTopRightRadius: 0, - borderBottomRightRadius: 0, - flexBasis: 'auto', - paddingLeft: 0, - paddingRight: 0, - justifyContent: 'center', - marginVertical: -2, - top: -1, + ...codeStyles.codeWordStyle, }, codeFirstWordStyle: { @@ -1418,10 +1408,10 @@ const webViewStyles = { code: { ...baseCodeTagStyles, + ...codeStyles.codeBlock, paddingLeft: 5, paddingRight: 5, fontFamily: fontFamily.MONOSPACE, - lineHeight: 18, fontSize: 13, }, From b5dabce8c5e01c92d1613a3afb00bb803c94f55c Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 23 Apr 2021 12:06:54 +0530 Subject: [PATCH 2/6] fix: inline code block in IOS and refactor code --- src/styles/codeStyles/index.android.js | 17 ++++------------- src/styles/codeStyles/index.ios.js | 23 +++++++---------------- src/styles/codeStyles/index.js | 5 +++-- src/styles/styles.js | 11 ++++++++++- 4 files changed, 24 insertions(+), 32 deletions(-) diff --git a/src/styles/codeStyles/index.android.js b/src/styles/codeStyles/index.android.js index e0c2a85e98fe..6af8f4a13366 100644 --- a/src/styles/codeStyles/index.android.js +++ b/src/styles/codeStyles/index.android.js @@ -1,23 +1,14 @@ const codeWordWrapper = { height: 10, }; + const codeWordStyle = { - borderLeftWidth: 0, - borderRightWidth: 0, - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - borderTopRightRadius: 0, - borderBottomRightRadius: 0, - flexBasis: 'auto', - paddingLeft: 0, - paddingRight: 0, - justifyContent: 'center', - marginVertical: -2, top: -1, + marginVertical: -2, }; -const codeBlock = { +const codeTextStyle = { lineHeight: 18, }; -export default {codeWordWrapper, codeWordStyle, codeBlock}; +export default {codeWordWrapper, codeWordStyle, codeTextStyle}; diff --git a/src/styles/codeStyles/index.ios.js b/src/styles/codeStyles/index.ios.js index b8d7f044d46d..822dbd1674f9 100644 --- a/src/styles/codeStyles/index.ios.js +++ b/src/styles/codeStyles/index.ios.js @@ -1,25 +1,16 @@ const codeWordWrapper = { - height: 20, + height: 18, justifyContent: 'center', - marginTop: 4, + marginTop: 2, }; + const codeWordStyle = { - borderLeftWidth: 0, - borderRightWidth: 0, - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - borderTopRightRadius: 0, - borderBottomRightRadius: 0, - paddingLeft: 0, - paddingRight: 0, - justifyContent: 'center', - marginVertical: -2, - height: 20, + height: 16, top: 4, }; -const codeBlock = { - lineHeight: 13, +const codeTextStyle = { + lineHeight: 15, }; -export default {codeWordWrapper, codeWordStyle, codeBlock}; +export default {codeWordWrapper, codeWordStyle, codeTextStyle}; diff --git a/src/styles/codeStyles/index.js b/src/styles/codeStyles/index.js index d52f174ba4e8..6ee3c36b940b 100644 --- a/src/styles/codeStyles/index.js +++ b/src/styles/codeStyles/index.js @@ -1,4 +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 codeBlock = {}; -export default {codeWordWrapper, codeWordStyle, codeBlock}; +const codeTextStyle = {}; +export default {codeWordWrapper, codeWordStyle, codeTextStyle}; diff --git a/src/styles/styles.js b/src/styles/styles.js index 2124d4e8df29..5aafe6f8d82f 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1317,6 +1317,15 @@ const styles = { }, codeWordStyle: { + borderLeftWidth: 0, + borderRightWidth: 0, + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + paddingLeft: 0, + paddingRight: 0, + justifyContent: 'center', ...codeStyles.codeWordStyle, }, @@ -1408,7 +1417,7 @@ const webViewStyles = { code: { ...baseCodeTagStyles, - ...codeStyles.codeBlock, + ...codeStyles.codeTextStyle, paddingLeft: 5, paddingRight: 5, fontFamily: fontFamily.MONOSPACE, From b8181e06be0670e21bd441709fb1ab72508dd6fa Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 23 Apr 2021 20:39:28 +0530 Subject: [PATCH 3/6] new: inline coe block implementation for native platforms --- src/components/AnchorForCommentsOnly/index.js | 7 +- src/components/InlineCodeBlock/WrappedText.js | 87 +++++++++++++++++++ .../InlineCodeBlock/index.android.js | 19 ---- .../{index.ios.js => index.native.js} | 19 ++-- src/styles/styles.js | 5 +- src/styles/variables.js | 1 + 6 files changed, 104 insertions(+), 34 deletions(-) create mode 100644 src/components/InlineCodeBlock/WrappedText.js delete mode 100644 src/components/InlineCodeBlock/index.android.js rename src/components/InlineCodeBlock/{index.ios.js => index.native.js} (50%) diff --git a/src/components/AnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/index.js index 6e70e859cf96..3edda2184b8c 100644 --- a/src/components/AnchorForCommentsOnly/index.js +++ b/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,8 +18,9 @@ const AnchorForCommentsOnly = ({ style, ...props }) => ( - {children} - + ); AnchorForCommentsOnly.propTypes = anchorForCommentsOnlyPropTypes; diff --git a/src/components/InlineCodeBlock/WrappedText.js b/src/components/InlineCodeBlock/WrappedText.js new file mode 100644 index 000000000000..930ebb4c99bc --- /dev/null +++ b/src/components/InlineCodeBlock/WrappedText.js @@ -0,0 +1,87 @@ +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} + */ +function getTextMatrix(text) { + return text.split('\n').map(row => row.split(/(\s)/)); +} + +const propTypes = { + // Required text + children: PropTypes.string.isRequired, + + // Style to be applied to Text + // eslint-disable-next-line react/forbid-prop-types + textStyle: PropTypes.object, + + // Style for each word(Token) in the text, + // remember that token also includes the following spaces before next word break + // eslint-disable-next-line react/forbid-prop-types + wordStyle: PropTypes.object, + + // Style for first word + // eslint-disable-next-line react/forbid-prop-types + firstWordStyle: PropTypes.object, + + // Style for last word + // eslint-disable-next-line react/forbid-prop-types + lastWordStyle: PropTypes.object, +}; + +const defaultProps = { + textStyle: {}, + wordStyle: {}, + firstWordStyle: {}, + lastWordStyle: {}, +}; + +const WrappedText = (props) => { + const textMatrix = getTextMatrix(props.children); + return ( + <> + {textMatrix.map((rowText, rowIndex) => ( + + {rowText.map((colText, colIndex) => ( + + // Outer View is important to vertically center the Text + + + {colText} + + + ))} + + ))} + + ); +}; + +WrappedText.propTypes = propTypes; +WrappedText.defaultProps = defaultProps; +WrappedText.displayName = 'WrappedText'; + +export default WrappedText; diff --git a/src/components/InlineCodeBlock/index.android.js b/src/components/InlineCodeBlock/index.android.js deleted file mode 100644 index d68ca0031b84..000000000000 --- a/src/components/InlineCodeBlock/index.android.js +++ /dev/null @@ -1,19 +0,0 @@ -/* eslint-disable react/jsx-props-no-spreading */ -import React from 'react'; -import {View} from 'react-native'; -import inlineCodeBlockPropTypes from './inlineCodeBlockPropTypes'; - -const InlineCodeBlock = ({ - TDefaultRenderer, - defaultRendererProps, - boxModelStyle, - textStyle, -}) => ( - - - -); - -InlineCodeBlock.propTypes = inlineCodeBlockPropTypes; -InlineCodeBlock.displayName = 'InlineCodeBlock'; -export default InlineCodeBlock; diff --git a/src/components/InlineCodeBlock/index.ios.js b/src/components/InlineCodeBlock/index.native.js similarity index 50% rename from src/components/InlineCodeBlock/index.ios.js rename to src/components/InlineCodeBlock/index.native.js index 163bf4a201d8..e21ad15362f5 100644 --- a/src/components/InlineCodeBlock/index.ios.js +++ b/src/components/InlineCodeBlock/index.native.js @@ -1,23 +1,26 @@ -/* 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, }) => ( - - - + {defaultRendererProps.tnode.data} + ); InlineCodeBlock.propTypes = inlineCodeBlockPropTypes; diff --git a/src/styles/styles.js b/src/styles/styles.js index 374d3cc38f30..b55190766f5c 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1364,8 +1364,6 @@ const styles = { const baseCodeTagStyles = { borderWidth: 1, borderRadius: 5, - marginTop: 4, - marginBottom: 4, borderColor: themeColors.border, backgroundColor: themeColors.textBackground, }; @@ -1423,8 +1421,6 @@ const webViewStyles = { ...codeStyles.codeTextStyle, paddingLeft: 5, paddingRight: 5, - paddingBottom: 2, - alignSelf: 'flex-start', fontFamily: fontFamily.MONOSPACE, fontSize: 13, }, @@ -1439,6 +1435,7 @@ const webViewStyles = { baseFontStyle: { color: themeColors.text, fontSize: variables.fontSizeNormal, + lineHeight: variables.fontSizeNormalHeight, fontFamily: fontFamily.GTA, }, }; diff --git a/src/styles/variables.js b/src/styles/variables.js index 9b70c5d5b072..abd61013b8db 100644 --- a/src/styles/variables.js +++ b/src/styles/variables.js @@ -15,6 +15,7 @@ export default { fontSizeLarge: 17, fontSizeh1: 19, iconSizeExtraSmall: 12, + fontSizeNormalHeight: 20, iconSizeSmall: 16, iconSizeNormal: 20, iconSizeLarge: 24, From a4b00116f2e8a4dc6769b13e5605c7f9a31a53b0 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 23 Apr 2021 23:10:07 +0530 Subject: [PATCH 4/6] Updated Comment Co-authored-by: Rory Abraham <47436092+roryabraham@users.noreply.github.com> --- src/components/InlineCodeBlock/WrappedText.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/InlineCodeBlock/WrappedText.js b/src/components/InlineCodeBlock/WrappedText.js index 930ebb4c99bc..2cc662e5283d 100644 --- a/src/components/InlineCodeBlock/WrappedText.js +++ b/src/components/InlineCodeBlock/WrappedText.js @@ -7,7 +7,7 @@ import styles from '../../styles/styles'; * Breaks the text into matrix * for eg: My Name is Rajat * [ - * [My,'',Name,'','',is,'',Rajat], + * [My,' ',Name,' ',' ',is,' ',Rajat], * ] * * @param {String} text From d103104227ff4e8fb73669d01c195dcf6f205ee0 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 23 Apr 2021 23:52:58 +0530 Subject: [PATCH 5/6] cleanup --- src/components/InlineCodeBlock/WrappedText.js | 35 +++++++------------ .../InlineCodeBlock/index.native.js | 4 +-- 2 files changed, 13 insertions(+), 26 deletions(-) diff --git a/src/components/InlineCodeBlock/WrappedText.js b/src/components/InlineCodeBlock/WrappedText.js index 930ebb4c99bc..75a8e0b5fff8 100644 --- a/src/components/InlineCodeBlock/WrappedText.js +++ b/src/components/InlineCodeBlock/WrappedText.js @@ -1,3 +1,4 @@ +import _ from 'underscore'; import React, {Fragment} from 'react'; import {Text, View} from 'react-native'; import PropTypes from 'prop-types'; @@ -14,7 +15,7 @@ import styles from '../../styles/styles'; * @returns {Array} */ function getTextMatrix(text) { - return text.split('\n').map(row => row.split(/(\s)/)); + return text.split('\n').map(row => _.without(row.split(/(\s)/), '')); } const propTypes = { @@ -22,28 +23,16 @@ const propTypes = { children: PropTypes.string.isRequired, // Style to be applied to Text - // eslint-disable-next-line react/forbid-prop-types - textStyle: PropTypes.object, + textStyles: PropTypes.arrayOf(PropTypes.object), // Style for each word(Token) in the text, - // remember that token also includes the following spaces before next word break - // eslint-disable-next-line react/forbid-prop-types - wordStyle: PropTypes.object, - - // Style for first word - // eslint-disable-next-line react/forbid-prop-types - firstWordStyle: PropTypes.object, - - // Style for last word - // eslint-disable-next-line react/forbid-prop-types - lastWordStyle: PropTypes.object, + // remember that token also includes whitespaces among words + wordStyles: PropTypes.arrayOf(PropTypes.object), }; const defaultProps = { - textStyle: {}, - wordStyle: {}, - firstWordStyle: {}, - lastWordStyle: {}, + textStyles: {}, + wordStyles: {}, }; const WrappedText = (props) => { @@ -59,18 +48,18 @@ const WrappedText = (props) => { // Outer View is important to vertically center the Text - {colText} + {colText} ))} diff --git a/src/components/InlineCodeBlock/index.native.js b/src/components/InlineCodeBlock/index.native.js index e21ad15362f5..c51ff4ddc52f 100644 --- a/src/components/InlineCodeBlock/index.native.js +++ b/src/components/InlineCodeBlock/index.native.js @@ -14,9 +14,7 @@ const InlineCodeBlock = ({ ...boxModelStyle, ...styles.codeWordStyle, }} - firstWordStyle={styles.codeFirstWordStyle} - lastWordStyle={styles.codeLastWordStyle} - // eslint-disable-next-line react/jsx-props-no-spreading + // eslint-disable-next-line react/jsx-props-no-spreading {...defaultRendererProps} > {defaultRendererProps.tnode.data} From b94e2ba1ae5480782c4dc4e1bee0452879b8554b Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sat, 24 Apr 2021 00:27:47 +0530 Subject: [PATCH 6/6] fix props for inline code block --- src/components/InlineCodeBlock/WrappedText.js | 4 ++-- src/components/InlineCodeBlock/index.native.js | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/InlineCodeBlock/WrappedText.js b/src/components/InlineCodeBlock/WrappedText.js index 31d4b828fb4c..e42a93c79ec8 100644 --- a/src/components/InlineCodeBlock/WrappedText.js +++ b/src/components/InlineCodeBlock/WrappedText.js @@ -31,8 +31,8 @@ const propTypes = { }; const defaultProps = { - textStyles: {}, - wordStyles: {}, + textStyles: [], + wordStyles: [], }; const WrappedText = (props) => { diff --git a/src/components/InlineCodeBlock/index.native.js b/src/components/InlineCodeBlock/index.native.js index c51ff4ddc52f..b8f71b680a4f 100644 --- a/src/components/InlineCodeBlock/index.native.js +++ b/src/components/InlineCodeBlock/index.native.js @@ -9,11 +9,11 @@ const InlineCodeBlock = ({ textStyle, }) => (