From 70179c7b3686a51c1497fb2d67f5200e605465ea Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 9 Apr 2021 02:23:47 +0530 Subject: [PATCH 1/8] fix: inline code blocks for native platforms --- .../InlineCodeBlock/index.android.js | 19 ---- .../{index.ios.js => index.native.js} | 19 ++-- src/components/InlineCodeBlock/wrappedText.js | 94 +++++++++++++++++++ src/styles/styles.js | 27 ++++++ 4 files changed, 132 insertions(+), 27 deletions(-) delete mode 100644 src/components/InlineCodeBlock/index.android.js rename src/components/InlineCodeBlock/{index.ios.js => index.native.js} (50%) create mode 100644 src/components/InlineCodeBlock/wrappedText.js 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..0178ecf18289 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/components/InlineCodeBlock/wrappedText.js b/src/components/InlineCodeBlock/wrappedText.js new file mode 100644 index 000000000000..fa731976175a --- /dev/null +++ b/src/components/InlineCodeBlock/wrappedText.js @@ -0,0 +1,94 @@ +import React, {Fragment} from 'react'; +import {Text, View} from 'react-native'; +import PropTypes from 'prop-types'; + +/** + * Return the space if we have not reached end of line + * + * @param {Number} textLen + * @param {Number} currentIndex + * @returns {String} + */ +function getWordSpace(textLen, currentIndex) { + return currentIndex !== textLen - 1 ? ' ' : ''; +} + +/** + * Breaks the text into matrix + * for eg: My Name \n is Rajat + * [ + * [My, Name], + * [is, Rajat] + * ] + * + * @param {String} text + * @returns {Array} + */ +function getTextMatrix(text) { + return text.split('\n').map(row => row.split(' ')); +} +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 = function (props) { + const textMatrix = getTextMatrix(props.children); + return ( + <> + {textMatrix.map((rowText, rowIndex) => ( + + {rowText.map((colText, colIndex) => ( + (colText !== '' || (rowText.length === 1 && colText === '')) + && ( + + + + {colText + getWordSpace(rowText.length, colIndex)} + + + ) + ))} + + ))} + + ); +}; +WrappedText.propTypes = propTypes; +WrappedText.defaultProps = defaultProps; +WrappedText.displayName = 'WrappedText'; + +export default WrappedText; diff --git a/src/styles/styles.js b/src/styles/styles.js index 6e7fd6395c03..64f73e1dd877 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1258,6 +1258,33 @@ const styles = { noScrollbars: { scrollbarWidth: 'none', }, + codeWordStyle: { + borderLeftWidth: 0, + borderRightWidth: 0, + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + flexBasis: 'auto', + paddingLeft: 0, + paddingRight: 0, + marginTop: 1, + marginBottom: 1, + }, + + codeFirstWordStyle: { + borderLeftWidth: 1, + borderTopLeftRadius: 4, + borderBottomLeftRadius: 4, + paddingLeft: 5, + }, + + codeLastWordStyle: { + borderRightWidth: 1, + borderTopRightRadius: 4, + borderBottomRightRadius: 4, + paddingRight: 5, + }, }; const baseCodeTagStyles = { From 71f68e632511d7c607b66824a3779fb89ac44d87 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 9 Apr 2021 03:23:20 +0530 Subject: [PATCH 2/8] fix vertical alignment of text --- src/components/InlineCodeBlock/wrappedText.js | 20 +++++++++++-------- src/styles/styles.js | 4 ++-- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/InlineCodeBlock/wrappedText.js b/src/components/InlineCodeBlock/wrappedText.js index fa731976175a..6323fcf34e01 100644 --- a/src/components/InlineCodeBlock/wrappedText.js +++ b/src/components/InlineCodeBlock/wrappedText.js @@ -67,18 +67,22 @@ const WrappedText = function (props) { (colText !== '' || (rowText.length === 1 && colText === '')) && ( + // Outer View is important to vertically center the Text - - {colText + getWordSpace(rowText.length, colIndex)} - + + + {colText + getWordSpace(rowText.length, colIndex)} + + ) ))} diff --git a/src/styles/styles.js b/src/styles/styles.js index 64f73e1dd877..f3884fef552d 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1268,8 +1268,8 @@ const styles = { flexBasis: 'auto', paddingLeft: 0, paddingRight: 0, - marginTop: 1, - marginBottom: 1, + marginTop: 5, + marginBottom: -5, }, codeFirstWordStyle: { From 92cebd785106d59098605ffce7fb4990fabda36e Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 9 Apr 2021 05:17:19 +0530 Subject: [PATCH 3/8] styles inline code --- src/styles/styles.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index f3884fef552d..6ba72d3a4053 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1290,12 +1290,13 @@ const styles = { const baseCodeTagStyles = { borderWidth: 1, borderRadius: 5, - marginTop: 4, - marginBottom: 4, borderColor: themeColors.border, backgroundColor: themeColors.textBackground, + fontSize: 13, + lineHeight: 18, }; + const webViewStyles = { // As of react-native-render-html v6, don't declare distinct styles for // custom renderers, the API for custom renderers has changed. Declare the From ed7a139c18b140bfe0ae1dbab87631c728c4cb44 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 9 Apr 2021 05:19:27 +0530 Subject: [PATCH 4/8] gap in rows --- src/styles/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 6ba72d3a4053..b3832e8292ff 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1268,7 +1268,7 @@ const styles = { flexBasis: 'auto', paddingLeft: 0, paddingRight: 0, - marginTop: 5, + marginTop: 6, marginBottom: -5, }, From 7d883957ec328137e413e49aa252d33ff068be96 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 9 Apr 2021 23:32:26 +0530 Subject: [PATCH 5/8] fix: styles --- src/styles/styles.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 5d5238deaf48..0ced4424705d 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1269,8 +1269,8 @@ const styles = { flexBasis: 'auto', paddingLeft: 0, paddingRight: 0, - marginTop: 6, - marginBottom: -5, + marginTop: 2, + bottom: -5, }, codeFirstWordStyle: { @@ -1302,7 +1302,6 @@ const baseCodeTagStyles = { borderColor: themeColors.border, backgroundColor: themeColors.textBackground, fontSize: 13, - lineHeight: 18, }; From f7647932172164a49cbc291c220b84b8dccab596 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 21 Apr 2021 02:09:00 +0530 Subject: [PATCH 6/8] fix: block styles --- src/components/InlineCodeBlock/wrappedText.js | 51 +++++++------------ src/styles/styles.js | 10 +++- 2 files changed, 26 insertions(+), 35 deletions(-) diff --git a/src/components/InlineCodeBlock/wrappedText.js b/src/components/InlineCodeBlock/wrappedText.js index 6323fcf34e01..85937bfa4818 100644 --- a/src/components/InlineCodeBlock/wrappedText.js +++ b/src/components/InlineCodeBlock/wrappedText.js @@ -1,31 +1,20 @@ import React, {Fragment} from 'react'; import {Text, View} from 'react-native'; import PropTypes from 'prop-types'; - -/** - * Return the space if we have not reached end of line - * - * @param {Number} textLen - * @param {Number} currentIndex - * @returns {String} - */ -function getWordSpace(textLen, currentIndex) { - return currentIndex !== textLen - 1 ? ' ' : ''; -} +import styles from '../../styles/styles'; /** * Breaks the text into matrix - * for eg: My Name \n is Rajat + * for eg: My Name is Rajat * [ - * [My, Name], - * [is, Rajat] + * [My,'',Name,'','',is,'',Rajat], * ] * * @param {String} text * @returns {Array} */ function getTextMatrix(text) { - return text.split('\n').map(row => row.split(' ')); + return text.split('\n').map(row => row.split(/(\s)/)); } const propTypes = { // Required text @@ -54,7 +43,7 @@ const defaultProps = { firstWordStyle: {}, lastWordStyle: {}, }; -const WrappedText = function (props) { +const WrappedText = (props) => { const textMatrix = getTextMatrix(props.children); return ( <> @@ -64,27 +53,23 @@ const WrappedText = function (props) { key={`${rowText}-${rowIndex}`} > {rowText.map((colText, colIndex) => ( - (colText !== '' || (rowText.length === 1 && colText === '')) - && ( - // Outer View is important to vertically center the Text - + - - - {colText + getWordSpace(rowText.length, colIndex)} - - + {colText} - ) + ))} ))} diff --git a/src/styles/styles.js b/src/styles/styles.js index 0ced4424705d..537380960911 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1259,6 +1259,10 @@ const styles = { scrollbarWidth: 'none', }, + codeWordWrapper: { + height: 10, + }, + codeWordStyle: { borderLeftWidth: 0, borderRightWidth: 0, @@ -1269,8 +1273,9 @@ const styles = { flexBasis: 'auto', paddingLeft: 0, paddingRight: 0, - marginTop: 2, - bottom: -5, + justifyContent: 'center', + marginVertical: -2, + top: -1, }, codeFirstWordStyle: { @@ -1373,6 +1378,7 @@ const webViewStyles = { color: themeColors.text, fontSize: variables.fontSizeNormal, fontFamily: fontFamily.GTA, + lineHeight: 20, }, }; From f5290a1d09f81ea2d7a1109d7d601087731724d1 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 21 Apr 2021 02:56:11 +0530 Subject: [PATCH 7/8] fix: cross platform styling --- src/components/AnchorForCommentsOnly/index.js | 7 ++++--- src/styles/styles.js | 7 +++---- src/styles/variables.js | 1 + 3 files changed, 8 insertions(+), 7 deletions(-) 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/styles/styles.js b/src/styles/styles.js index 537380960911..f2ac3ad0c7f0 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1306,7 +1306,6 @@ const baseCodeTagStyles = { borderRadius: 5, borderColor: themeColors.border, backgroundColor: themeColors.textBackground, - fontSize: 13, }; @@ -1362,9 +1361,9 @@ const webViewStyles = { ...baseCodeTagStyles, paddingLeft: 5, paddingRight: 5, - paddingBottom: 2, - alignSelf: 'flex-start', fontFamily: fontFamily.MONOSPACE, + lineHeight: 18, + fontSize: 13, }, img: { @@ -1377,8 +1376,8 @@ const webViewStyles = { baseFontStyle: { color: themeColors.text, fontSize: variables.fontSizeNormal, + lineHeight: variables.fontSizeNormalHeight, fontFamily: fontFamily.GTA, - lineHeight: 20, }, }; diff --git a/src/styles/variables.js b/src/styles/variables.js index 9b70c5d5b072..4ca7fef91365 100644 --- a/src/styles/variables.js +++ b/src/styles/variables.js @@ -12,6 +12,7 @@ export default { fontSizeExtraSmall: 9, fontSizeLabel: 13, fontSizeNormal: 15, + fontSizeNormalHeight: 20, fontSizeLarge: 17, fontSizeh1: 19, iconSizeExtraSmall: 12, From 80f3219e6856b3c5483f9e57954ca9cf9166dbfd Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 21 Apr 2021 04:38:18 +0530 Subject: [PATCH 8/8] chg: linting --- src/components/InlineCodeBlock/wrappedText.js | 4 ++++ src/styles/styles.js | 1 - 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/InlineCodeBlock/wrappedText.js b/src/components/InlineCodeBlock/wrappedText.js index 85937bfa4818..930ebb4c99bc 100644 --- a/src/components/InlineCodeBlock/wrappedText.js +++ b/src/components/InlineCodeBlock/wrappedText.js @@ -16,6 +16,7 @@ import styles from '../../styles/styles'; function getTextMatrix(text) { return text.split('\n').map(row => row.split(/(\s)/)); } + const propTypes = { // Required text children: PropTypes.string.isRequired, @@ -37,12 +38,14 @@ const propTypes = { // 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 ( @@ -76,6 +79,7 @@ const WrappedText = (props) => { ); }; + WrappedText.propTypes = propTypes; WrappedText.defaultProps = defaultProps; WrappedText.displayName = 'WrappedText'; diff --git a/src/styles/styles.js b/src/styles/styles.js index f2ac3ad0c7f0..3a4d93f8fb31 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1308,7 +1308,6 @@ const baseCodeTagStyles = { backgroundColor: themeColors.textBackground, }; - const webViewStyles = { // As of react-native-render-html v6, don't declare distinct styles for // custom renderers, the API for custom renderers has changed. Declare the