From 3e2e8defb5fa7b232ef13d58069dc03b4f3d0fad Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Wed, 18 Aug 2021 17:56:46 +0200 Subject: [PATCH 01/11] Mobile - Global styles - Add support to render font sizes --- .../src/components/block-list/block.native.js | 4 +- .../global-styles-context/index.native.js | 17 +++- .../global-styles-context/utils.native.js | 80 ++++++++++++++++++- .../rich-text/src/component/index.native.js | 49 ++++++++++-- 4 files changed, 137 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 3f700ec22a2920..76641294088cc7 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -51,6 +51,7 @@ function BlockForType( { baseGlobalStyles, } ) { const defaultColors = useSetting( 'color.palette' ) || emptyArray; + const typography = useSetting( 'typography' ) || emptyArray; const globalStyle = useGlobalStyles(); const mergedStyle = useMemo( () => { return getMergedGlobalStyles( @@ -59,7 +60,8 @@ function BlockForType( { wrapperProps.style, attributes, defaultColors, - name + name, + typography ); }, [ defaultColors, diff --git a/packages/components/src/mobile/global-styles-context/index.native.js b/packages/components/src/mobile/global-styles-context/index.native.js index e33e86d636aafe..5b7e350b620425 100644 --- a/packages/components/src/mobile/global-styles-context/index.native.js +++ b/packages/components/src/mobile/global-styles-context/index.native.js @@ -15,6 +15,7 @@ import { BLOCK_STYLE_ATTRIBUTES, getBlockPaddings, getBlockColors, + getBlockTypography, } from './utils'; const GlobalStylesContext = createContext( { style: {} } ); @@ -27,7 +28,8 @@ export const getMergedGlobalStyles = ( wrapperPropsStyle, blockAttributes, defaultColors, - blockName + blockName, + typography ) => { const baseGlobalColors = { baseColors: baseGlobalStyles || {}, @@ -60,8 +62,19 @@ export const getMergedGlobalStyles = ( blockStyleAttributes, blockColors ); + const blockTypography = getBlockTypography( + blockStyleAttributes, + typography, + blockName, + baseGlobalStyles + ); - return { ...mergedStyle, ...blockPaddings, ...blockColors }; + return { + ...mergedStyle, + ...blockPaddings, + ...blockColors, + ...blockTypography, + }; }; export const useGlobalStyles = () => { diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js index 97aee36a6f36b1..c17bd0b956376f 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -1,13 +1,14 @@ /** * External dependencies */ -import { find, startsWith, get } from 'lodash'; +import { find, startsWith, get, camelCase, has } from 'lodash'; export const BLOCK_STYLE_ATTRIBUTES = [ 'textColor', 'backgroundColor', 'style', 'color', + 'fontSize', ]; // Mapping style properties name to native @@ -121,6 +122,66 @@ export function getBlockColors( return blockStyles; } +export function getBlockTypography( + blockStyleAttributes, + typography, + blockName, + baseGlobalStyles +) { + const typographyStyles = {}; + const customBlockStyles = blockStyleAttributes?.style?.typography || {}; + const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ]; + const fontSizes = { + ...typography?.fontSizes?.theme, + ...typography?.fontSizes?.user, + }; + + // Global styles + if ( blockGlobalStyles?.typography ) { + const fontSize = blockGlobalStyles?.typography?.fontSize; + const lineHeight = blockGlobalStyles?.typography?.lineHeight; + + if ( fontSize ) { + if ( parseInt( fontSize, 10 ) ) { + typographyStyles.fontSize = fontSize; + } else { + const mappedFontSize = find( fontSizes, { + slug: fontSize, + } ); + + if ( mappedFontSize ) { + typographyStyles.fontSize = mappedFontSize?.size; + } + } + } + + if ( lineHeight ) { + typographyStyles.lineHeight = lineHeight; + } + } + + if ( blockStyleAttributes?.fontSize ) { + const mappedFontSize = find( fontSizes, { + slug: blockStyleAttributes?.fontSize, + } ); + + if ( mappedFontSize ) { + typographyStyles.fontSize = mappedFontSize?.size; + } + } + + // Custom styles + if ( customBlockStyles?.fontSize ) { + typographyStyles.fontSize = customBlockStyles?.fontSize; + } + + if ( customBlockStyles?.lineHeight ) { + typographyStyles.lineHeight = customBlockStyles?.lineHeight; + } + + return typographyStyles; +} + export function parseStylesVariables( styles, mappedValues, customValues ) { let stylesBase = styles; const variables = [ 'preset', 'custom' ]; @@ -152,7 +213,15 @@ export function parseStylesVariables( styles, mappedValues, customValues ) { const customValuesData = customValues ?? JSON.parse( stylesBase ); stylesBase = stylesBase.replace( regex, ( _$1, $2 ) => { const path = $2.split( '--' ); - return get( customValuesData, path ); + if ( has( customValuesData, path ) ) { + return get( customValuesData, path ); + } + + // Check for camelcase properties + return get( customValuesData, [ + ...path.slice( 0, path.length - 1 ), + camelCase( path[ path.length - 1 ] ), + ] ); } ); } } ); @@ -161,14 +230,19 @@ export function parseStylesVariables( styles, mappedValues, customValues ) { } export function getMappedValues( features, palette ) { + const typography = features?.typography; const colors = { ...palette?.theme, ...palette?.user }; + const fontSizes = { + ...typography?.fontSizes?.theme, + ...typography?.fontSizes?.user, + }; const mappedValues = { color: { values: colors, slug: 'color', }, 'font-size': { - values: features?.typography?.fontSizes?.theme, + values: fontSizes, slug: 'size', }, }; diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 194fadd82cf0d0..643de8b16679c7 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -56,6 +56,8 @@ const gutenbergFormatNamesToAztec = { }; const EMPTY_PARAGRAPH_TAGS = '

'; +const DEFAULT_FONT_SIZE = 16; +const DEFAULT_LINE_HEIGHT = 1.5; export class RichText extends Component { constructor( { @@ -853,6 +855,39 @@ export class RichText extends Component { }; } + getFontSize() { + const { baseGlobalStyles } = this.props; + + if ( this.props.fontSize ) { + return parseFloat( this.props.fontSize ); + } + + if ( this.props.style?.fontSize ) { + return parseFloat( this.props.style.fontSize ); + } + + if ( baseGlobalStyles?.typography?.fontSize ) { + return parseFloat( baseGlobalStyles?.typography?.fontSize ); + } + + return DEFAULT_FONT_SIZE; + } + + getLineHeight( fontSize ) { + const { baseGlobalStyles } = this.props; + let lineHeight = DEFAULT_LINE_HEIGHT; + + if ( baseGlobalStyles?.typography?.lineHeight ) { + lineHeight = parseFloat( baseGlobalStyles?.typography?.lineHeight ); + } + + if ( this.props.style?.lineHeight ) { + lineHeight = parseFloat( this.props.style.lineHeight ); + } + + return parseInt( fontSize + fontSize * lineHeight, 10 ); + } + render() { const { tagName, @@ -879,6 +914,8 @@ export class RichText extends Component { ); const { color: defaultPlaceholderTextColor } = placeholderStyle; + const fontSize = this.getFontSize(); + const lineHeight = this.getLineHeight( fontSize ); const { color: defaultColor, @@ -974,6 +1011,7 @@ export class RichText extends Component { ? { width } : { maxWidth } ), minHeight: this.state.height, + lineHeight, } } text={ { text: html, @@ -1017,11 +1055,7 @@ export class RichText extends Component { } maxImagesWidth={ 200 } fontFamily={ this.props.fontFamily || defaultFontFamily } - fontSize={ - this.props.fontSize || - ( style && - this.convertFontSizeFromString( style.fontSize ) ) - } + fontSize={ fontSize } fontWeight={ this.props.fontWeight } fontStyle={ this.props.fontStyle } disableEditingMenu={ disableEditingMenu } @@ -1079,8 +1113,9 @@ export default compose( [ 'attributes', 'childrenStyles', ] ); - const baseGlobalStyles = getSettings() - ?.__experimentalGlobalStylesBaseStyles; + + const settings = getSettings(); + const baseGlobalStyles = settings?.__experimentalGlobalStylesBaseStyles; return { areMentionsSupported: From 6139c4ce9382437bd11d0d52a1b87b09a20dd2a5 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Mon, 23 Aug 2021 18:06:27 +0200 Subject: [PATCH 02/11] Mobile - Rich text - Trigger font size update in the native side of aztec --- packages/rich-text/src/component/index.native.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 643de8b16679c7..11cc5273f05032 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -766,6 +766,11 @@ export class RichText extends Component { this.needsSelectionUpdate = true; this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side } + + if ( nextProps?.style?.fontSize !== this.props?.style?.fontSize ) { + this.needsSelectionUpdate = true; + this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side + } } return true; From 669a8b47de6c045854c2c50f56fa8aa07ab5063a Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Mon, 23 Aug 2021 18:07:07 +0200 Subject: [PATCH 03/11] Mobile - Temp - Comment out line height removal --- packages/react-native-aztec/src/AztecView.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/react-native-aztec/src/AztecView.js b/packages/react-native-aztec/src/AztecView.js index f08bb172dd15fb..331271181683ab 100644 --- a/packages/react-native-aztec/src/AztecView.js +++ b/packages/react-native-aztec/src/AztecView.js @@ -215,16 +215,16 @@ class AztecView extends Component { // https://github.com/WordPress/gutenberg/issues/23611 const { style } = this.props; - if ( style.hasOwnProperty( 'lineHeight' ) ) { - delete style.lineHeight; - window.console.warn( - "Removing lineHeight style as it's not supported by native AztecView" - ); - // IMPORTANT: Current Gutenberg implementation is supporting line-height without unit e.g. 'line-height':1.5 - // and library which we are using to convert css to react-native requires unit to be included with dimension - // https://github.com/kristerkari/css-to-react-native-transform/blob/945866e84a505fdfb1a43b03ebe4bd32784a7f22/src/index.spec.js#L1234 - // which means that we would need to patch the library if we want to support line-height from native AztecView in the future. - } + // if ( style.hasOwnProperty( 'lineHeight' ) ) { + // delete style.lineHeight; + // window.console.warn( + // "Removing lineHeight style as it's not supported by native AztecView" + // ); + // // IMPORTANT: Current Gutenberg implementation is supporting line-height without unit e.g. 'line-height':1.5 + // // and library which we are using to convert css to react-native requires unit to be included with dimension + // // https://github.com/kristerkari/css-to-react-native-transform/blob/945866e84a505fdfb1a43b03ebe4bd32784a7f22/src/index.spec.js#L1234 + // // which means that we would need to patch the library if we want to support line-height from native AztecView in the future. + // } return ( From 47c172737058a8c1ac94c72ca58d077240d640fb Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Fri, 27 Aug 2021 15:54:35 -0700 Subject: [PATCH 04/11] Fix Android lineHeight control changes. --- .../mobile/ReactNativeAztec/ReactAztecManager.java | 6 ++++++ packages/rich-text/src/component/index.native.js | 11 +++++++++-- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java b/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java index b1652093b89807..4327cedd2a56c1 100644 --- a/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java +++ b/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java @@ -288,6 +288,12 @@ public void setFontSize(ReactAztecText view, float fontSize) { (int) Math.ceil(PixelUtil.toPixelFromSP(fontSize))); } + @ReactProp(name = ViewProps.LINE_HEIGHT) + public void setLineHeight(ReactAztecText view, float lineHeight) { + float textSize = view.getTextSize(); + view.setLineSpacing((lineHeight - textSize), (float) (lineHeight / textSize)); + } + @ReactProp(name = ViewProps.FONT_FAMILY) public void setFontFamily(ReactAztecText view, String fontFamily) { int style = Typeface.NORMAL; diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 11cc5273f05032..58f97c781a0e67 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -57,7 +57,7 @@ const gutenbergFormatNamesToAztec = { const EMPTY_PARAGRAPH_TAGS = '

'; const DEFAULT_FONT_SIZE = 16; -const DEFAULT_LINE_HEIGHT = 1.5; +const DEFAULT_LINE_HEIGHT = 1.6; export class RichText extends Component { constructor( { @@ -771,6 +771,13 @@ export class RichText extends Component { this.needsSelectionUpdate = true; this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side } + + if ( + nextProps?.style?.lineHeight !== this.props?.style?.lineHeight + ) { + this.needsSelectionUpdate = true; + this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side + } } return true; @@ -1016,7 +1023,6 @@ export class RichText extends Component { ? { width } : { maxWidth } ), minHeight: this.state.height, - lineHeight, } } text={ { text: html, @@ -1061,6 +1067,7 @@ export class RichText extends Component { maxImagesWidth={ 200 } fontFamily={ this.props.fontFamily || defaultFontFamily } fontSize={ fontSize } + lineHeight={ lineHeight } fontWeight={ this.props.fontWeight } fontStyle={ this.props.fontStyle } disableEditingMenu={ disableEditingMenu } From 3cbe8430c9ca0620bb03c750bd6e50bcacfcd1f9 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Tue, 31 Aug 2021 19:25:31 +0200 Subject: [PATCH 05/11] Mobile - Global styles - Get font sizes values --- .../block-editor/src/components/block-list/block.native.js | 4 ++-- .../src/mobile/global-styles-context/index.native.js | 4 ++-- .../src/mobile/global-styles-context/utils.native.js | 6 +----- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 8ba4609cab42ec..699145b6ffc528 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -51,7 +51,7 @@ function BlockForType( { baseGlobalStyles, } ) { const defaultColors = useSetting( 'color.palette' ) || emptyArray; - const typography = useSetting( 'typography' ) || emptyArray; + const fontSizes = useSetting( 'typography.fontSizes' ) || emptyArray; const globalStyle = useGlobalStyles(); const mergedStyle = useMemo( () => { return getMergedGlobalStyles( @@ -61,7 +61,7 @@ function BlockForType( { attributes, defaultColors, name, - typography + fontSizes ); }, [ defaultColors, diff --git a/packages/components/src/mobile/global-styles-context/index.native.js b/packages/components/src/mobile/global-styles-context/index.native.js index 5b7e350b620425..a0fd4ff32691d1 100644 --- a/packages/components/src/mobile/global-styles-context/index.native.js +++ b/packages/components/src/mobile/global-styles-context/index.native.js @@ -29,7 +29,7 @@ export const getMergedGlobalStyles = ( blockAttributes, defaultColors, blockName, - typography + fontSizes ) => { const baseGlobalColors = { baseColors: baseGlobalStyles || {}, @@ -64,7 +64,7 @@ export const getMergedGlobalStyles = ( ); const blockTypography = getBlockTypography( blockStyleAttributes, - typography, + fontSizes, blockName, baseGlobalStyles ); diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js index c17bd0b956376f..ed65c255c8f264 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -124,17 +124,13 @@ export function getBlockColors( export function getBlockTypography( blockStyleAttributes, - typography, + fontSizes, blockName, baseGlobalStyles ) { const typographyStyles = {}; const customBlockStyles = blockStyleAttributes?.style?.typography || {}; const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ]; - const fontSizes = { - ...typography?.fontSizes?.theme, - ...typography?.fontSizes?.user, - }; // Global styles if ( blockGlobalStyles?.typography ) { From a24d11d0575a144e6c8be13c1b730b2f05a3a582 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Tue, 31 Aug 2021 19:25:59 +0200 Subject: [PATCH 06/11] Mobile - AztecView - Support line height --- .../ios/RNTAztecView/RCTAztecView.swift | 26 +++++++++++++++++++ .../ios/RNTAztecView/RCTAztecViewManager.m | 1 + .../rich-text/src/component/index.native.js | 1 + 3 files changed, 28 insertions(+) diff --git a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift index c87316600177ee..b0124287df740d 100644 --- a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift +++ b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift @@ -109,6 +109,10 @@ class RCTAztecView: Aztec.TextView { /// Font weight for all contents. Once this is set, it will always override the font weight for all of its /// contents, regardless of what HTML is provided to Aztec. private var fontWeight: String? = nil + + /// Line height for all contents. Once this is set, it will always override the font size for all of its + /// contents, regardless of what HTML is provided to Aztec. + private var lineHeight: CGFloat? = nil // MARK: - Formats @@ -597,6 +601,15 @@ class RCTAztecView: Aztec.TextView { fontWeight = weight refreshFont() } + + @objc func setLineHeight(_ newLineHeight: CGFloat) { + print(newLineHeight) + guard lineHeight != newLineHeight else { + return + } + lineHeight = newLineHeight + refreshLineHeight() + } // MARK: - Font Refreshing @@ -653,6 +666,19 @@ class RCTAztecView: Aztec.TextView { let currentFont = font(from: typingAttributes) placeholderLabel.font = currentFont } + + /// This method refreshes the line height. + private func refreshLineHeight() { + if ((lineHeight) != nil) { + defaultParagraphStyle.regularLineSpacing = lineHeight! + + let attributeString = NSMutableAttributedString(string: self.text) + let style = NSMutableParagraphStyle() + + style.lineSpacing = lineHeight! + textStorage.addAttribute(NSAttributedString.Key.paragraphStyle, value: style, range: NSMakeRange(0, textStorage.length)) + } + } // MARK: - Formatting interface diff --git a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.m b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.m index db468a71be0b8f..5f88fd15e83e1c 100644 --- a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.m +++ b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.m @@ -27,6 +27,7 @@ @interface RCT_EXTERN_MODULE(RCTAztecViewManager, NSObject) RCT_EXPORT_VIEW_PROPERTY(fontFamily, NSString) RCT_EXPORT_VIEW_PROPERTY(fontSize, CGFloat) RCT_EXPORT_VIEW_PROPERTY(fontWeight, NSString) +RCT_EXPORT_VIEW_PROPERTY(lineHeight, CGFloat) RCT_EXPORT_VIEW_PROPERTY(disableEditingMenu, BOOL) RCT_REMAP_VIEW_PROPERTY(textAlign, textAlignment, NSTextAlignment) diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 58f97c781a0e67..93a1b20dd802cc 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -897,6 +897,7 @@ export class RichText extends Component { lineHeight = parseFloat( this.props.style.lineHeight ); } + // TO-DO to be updated for both iOS and Android return parseInt( fontSize + fontSize * lineHeight, 10 ); } From 843ff686a9c00e299e85ca14c306d866d5e14051 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Wed, 1 Sep 2021 09:56:26 +0200 Subject: [PATCH 07/11] Mobile - Update AztecView comment for line height values --- packages/react-native-aztec/src/AztecView.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/react-native-aztec/src/AztecView.js b/packages/react-native-aztec/src/AztecView.js index 331271181683ab..9c5e09c1313669 100644 --- a/packages/react-native-aztec/src/AztecView.js +++ b/packages/react-native-aztec/src/AztecView.js @@ -215,16 +215,14 @@ class AztecView extends Component { // https://github.com/WordPress/gutenberg/issues/23611 const { style } = this.props; - // if ( style.hasOwnProperty( 'lineHeight' ) ) { - // delete style.lineHeight; - // window.console.warn( - // "Removing lineHeight style as it's not supported by native AztecView" - // ); - // // IMPORTANT: Current Gutenberg implementation is supporting line-height without unit e.g. 'line-height':1.5 - // // and library which we are using to convert css to react-native requires unit to be included with dimension - // // https://github.com/kristerkari/css-to-react-native-transform/blob/945866e84a505fdfb1a43b03ebe4bd32784a7f22/src/index.spec.js#L1234 - // // which means that we would need to patch the library if we want to support line-height from native AztecView in the future. - // } + if ( style.hasOwnProperty( 'lineHeight' ) ) { + delete style.lineHeight; + window.console.warn( + "Removing lineHeight style as it's not supported by native AztecView" + ); + // Prevents passing line-heigth within styles to avoid a crash due to values without units + // We now support this but passing line-height as a prop instead + } return ( From 0af2be9adaed4a4b41cff546e8b89f6e7e01f8bb Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Mon, 6 Sep 2021 16:34:50 +0200 Subject: [PATCH 08/11] Mobile - Line height support - iOS tweaks and makes it available only behind DEV --- .../ReactNativeAztec/ReactAztecManager.java | 2 +- .../ios/RNTAztecView/RCTAztecView.swift | 15 ++++++----- .../rich-text/src/component/index.native.js | 26 +++++++------------ 3 files changed, 19 insertions(+), 24 deletions(-) diff --git a/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java b/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java index 4327cedd2a56c1..62f640f0c9f841 100644 --- a/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java +++ b/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java @@ -291,7 +291,7 @@ public void setFontSize(ReactAztecText view, float fontSize) { @ReactProp(name = ViewProps.LINE_HEIGHT) public void setLineHeight(ReactAztecText view, float lineHeight) { float textSize = view.getTextSize(); - view.setLineSpacing((lineHeight - textSize), (float) (lineHeight / textSize)); + view.setLineSpacing(textSize * lineHeight, (float) (lineHeight / textSize)); } @ReactProp(name = ViewProps.FONT_FAMILY) diff --git a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift index b0124287df740d..cdd28ea38d39eb 100644 --- a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift +++ b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift @@ -41,7 +41,7 @@ class RCTAztecView: Aztec.TextView { get { return super.textAlignment } - } + } private var previousContentSize: CGSize = .zero @@ -592,6 +592,7 @@ class RCTAztecView: Aztec.TextView { } fontSize = size refreshFont() + refreshLineHeight() } @objc func setFontWeight(_ weight: String) { @@ -603,7 +604,6 @@ class RCTAztecView: Aztec.TextView { } @objc func setLineHeight(_ newLineHeight: CGFloat) { - print(newLineHeight) guard lineHeight != newLineHeight else { return } @@ -663,19 +663,20 @@ class RCTAztecView: Aztec.TextView { /// This method should not be called directly. Call `refreshFont()` instead. /// private func refreshTypingAttributesAndPlaceholderFont() { - let currentFont = font(from: typingAttributes) + let currentFont = font(from: typingAttributes) placeholderLabel.font = currentFont } /// This method refreshes the line height. private func refreshLineHeight() { - if ((lineHeight) != nil) { - defaultParagraphStyle.regularLineSpacing = lineHeight! - + if let lineHeight = lineHeight { let attributeString = NSMutableAttributedString(string: self.text) let style = NSMutableParagraphStyle() + let currentFontSize = fontSize ?? defaultFont.pointSize + let lineSpacing = ((currentFontSize * lineHeight) / UIScreen.main.scale) - (currentFontSize / lineHeight) / 2 - style.lineSpacing = lineHeight! + style.lineSpacing = lineSpacing + defaultParagraphStyle.regularLineSpacing = lineSpacing textStorage.addAttribute(NSAttributedString.Key.paragraphStyle, value: style, range: NSMakeRange(0, textStorage.length)) } } diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 93a1b20dd802cc..a39fa0b01647c1 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -4,7 +4,7 @@ * External dependencies */ import { View, Platform } from 'react-native'; -import { get, pickBy, debounce, isString } from 'lodash'; +import { get, pickBy, debounce } from 'lodash'; import memize from 'memize'; /** @@ -57,7 +57,7 @@ const gutenbergFormatNamesToAztec = { const EMPTY_PARAGRAPH_TAGS = '

'; const DEFAULT_FONT_SIZE = 16; -const DEFAULT_LINE_HEIGHT = 1.6; +const DEFAULT_LINE_HEIGHT = 1.5; export class RichText extends Component { constructor( { @@ -113,9 +113,6 @@ export class RichText extends Component { ).bind( this ); this.suggestionOptions = this.suggestionOptions.bind( this ); this.insertString = this.insertString.bind( this ); - this.convertFontSizeFromString = this.convertFontSizeFromString.bind( - this - ); this.manipulateEventCounterToForceNativeToRefresh = this.manipulateEventCounterToForceNativeToRefresh.bind( this ); @@ -279,13 +276,6 @@ export class RichText extends Component { .replace( closingTagRegexp, '' ); } - // Fix for crash https://github.com/wordpress-mobile/gutenberg-mobile/issues/2991 - convertFontSizeFromString( fontSize ) { - return fontSize && isString( fontSize ) && fontSize.endsWith( 'px' ) - ? parseFloat( fontSize.substring( 0, fontSize.length - 2 ) ) - : fontSize; - } - /* * Handles any case where the content of the AztecRN instance has changed */ @@ -885,10 +875,15 @@ export class RichText extends Component { return DEFAULT_FONT_SIZE; } - getLineHeight( fontSize ) { + getLineHeight() { const { baseGlobalStyles } = this.props; let lineHeight = DEFAULT_LINE_HEIGHT; + // eslint-disable-next-line no-undef + if ( ! __DEV__ ) { + return; + } + if ( baseGlobalStyles?.typography?.lineHeight ) { lineHeight = parseFloat( baseGlobalStyles?.typography?.lineHeight ); } @@ -897,8 +892,7 @@ export class RichText extends Component { lineHeight = parseFloat( this.props.style.lineHeight ); } - // TO-DO to be updated for both iOS and Android - return parseInt( fontSize + fontSize * lineHeight, 10 ); + return lineHeight; } render() { @@ -928,7 +922,7 @@ export class RichText extends Component { const { color: defaultPlaceholderTextColor } = placeholderStyle; const fontSize = this.getFontSize(); - const lineHeight = this.getLineHeight( fontSize ); + const lineHeight = this.getLineHeight(); const { color: defaultColor, From f3a5d81cfe1375c3f6c95b31abcbf79d41258718 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Mon, 6 Sep 2021 16:57:29 +0200 Subject: [PATCH 09/11] Mobile - Update snapshots --- .../audio/test/__snapshots__/edit.native.js.snap | 2 ++ .../file/test/__snapshots__/edit.native.js.snap | 8 ++++++++ .../search/test/__snapshots__/edit.native.js.snap | 14 ++++++++++++++ 3 files changed, 24 insertions(+) diff --git a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap index da02296f2dc472..7e5e9007ea1593 100644 --- a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap +++ b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap @@ -102,6 +102,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = ` fontFamily="serif" fontSize={14} isMultiline={false} + lineHeight={1.5} maxImagesWidth={200} onBackspace={[Function]} onBlur={[Function]} @@ -271,6 +272,7 @@ exports[`Audio block renders audio file without crashing 1`] = ` fontFamily="serif" fontSize={14} isMultiline={false} + lineHeight={1.5} maxImagesWidth={200} onBackspace={[Function]} onBlur={[Function]} diff --git a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap index 36a2e8b87915d4..c5962a1e49fe50 100644 --- a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap +++ b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap @@ -61,7 +61,9 @@ exports[`File block renders file error state without crashing 1`] = ` disableEditingMenu={false} focusable={true} fontFamily="serif" + fontSize={16} isMultiline={false} + lineHeight={1.5} maxImagesWidth={200} onBackspace={[Function]} onBlur={[Function]} @@ -150,7 +152,9 @@ exports[`File block renders file error state without crashing 1`] = ` disableEditingMenu={false} focusable={true} fontFamily="serif" + fontSize={16} isMultiline={false} + lineHeight={1.5} maxImagesWidth={200} minWidth={40} onBackspace={[Function]} @@ -259,7 +263,9 @@ exports[`File block renders file without crashing 1`] = ` disableEditingMenu={false} focusable={true} fontFamily="serif" + fontSize={16} isMultiline={false} + lineHeight={1.5} maxImagesWidth={200} onBackspace={[Function]} onBlur={[Function]} @@ -330,7 +336,9 @@ exports[`File block renders file without crashing 1`] = ` disableEditingMenu={false} focusable={true} fontFamily="serif" + fontSize={16} isMultiline={false} + lineHeight={1.5} maxImagesWidth={200} minWidth={40} onBackspace={[Function]} diff --git a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap index 25ce13f150a1df..2ecb871b203be5 100644 --- a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap +++ b/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap @@ -23,7 +23,9 @@ exports[`Search Block renders block with button inside option 1`] = ` disableEditingMenu={false} focusable={true} fontFamily="serif" + fontSize={16} isMultiline={false} + lineHeight={1.5} maxImagesWidth={200} onBackspace={[Function]} onBlur={[Function]} @@ -126,7 +128,9 @@ exports[`Search Block renders block with button inside option 1`] = ` disableEditingMenu={false} focusable={true} fontFamily="serif" + fontSize={16} isMultiline={false} + lineHeight={1.5} maxImagesWidth={200} minWidth={75} onBackspace={[Function]} @@ -196,7 +200,9 @@ exports[`Search Block renders block with icon button option matches snapshot 1`] disableEditingMenu={false} focusable={true} fontFamily="serif" + fontSize={16} isMultiline={false} + lineHeight={1.5} maxImagesWidth={200} onBackspace={[Function]} onBlur={[Function]} @@ -356,7 +362,9 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = ` disableEditingMenu={false} focusable={true} fontFamily="serif" + fontSize={16} isMultiline={false} + lineHeight={1.5} maxImagesWidth={200} minWidth={75} onBackspace={[Function]} @@ -426,7 +434,9 @@ exports[`Search Block renders with default configuration matches snapshot 1`] = disableEditingMenu={false} focusable={true} fontFamily="serif" + fontSize={16} isMultiline={false} + lineHeight={1.5} maxImagesWidth={200} onBackspace={[Function]} onBlur={[Function]} @@ -529,7 +539,9 @@ exports[`Search Block renders with default configuration matches snapshot 1`] = disableEditingMenu={false} focusable={true} fontFamily="serif" + fontSize={16} isMultiline={false} + lineHeight={1.5} maxImagesWidth={200} minWidth={75} onBackspace={[Function]} @@ -599,7 +611,9 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = ` disableEditingMenu={false} focusable={true} fontFamily="serif" + fontSize={16} isMultiline={false} + lineHeight={1.5} maxImagesWidth={200} onBackspace={[Function]} onBlur={[Function]} From cf6a6fca0f2b6e1123165a1c655ae11f344a40ea Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Tue, 7 Sep 2021 15:34:25 +0200 Subject: [PATCH 10/11] Mobile - Remove default line height --- .../src/audio/test/__snapshots__/edit.native.js.snap | 2 -- .../src/file/test/__snapshots__/edit.native.js.snap | 4 ---- .../src/search/test/__snapshots__/edit.native.js.snap | 7 ------- packages/rich-text/src/component/index.native.js | 3 +-- 4 files changed, 1 insertion(+), 15 deletions(-) diff --git a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap index 7e5e9007ea1593..da02296f2dc472 100644 --- a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap +++ b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap @@ -102,7 +102,6 @@ exports[`Audio block renders audio block error state without crashing 1`] = ` fontFamily="serif" fontSize={14} isMultiline={false} - lineHeight={1.5} maxImagesWidth={200} onBackspace={[Function]} onBlur={[Function]} @@ -272,7 +271,6 @@ exports[`Audio block renders audio file without crashing 1`] = ` fontFamily="serif" fontSize={14} isMultiline={false} - lineHeight={1.5} maxImagesWidth={200} onBackspace={[Function]} onBlur={[Function]} diff --git a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap index c5962a1e49fe50..440d991192d164 100644 --- a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap +++ b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap @@ -63,7 +63,6 @@ exports[`File block renders file error state without crashing 1`] = ` fontFamily="serif" fontSize={16} isMultiline={false} - lineHeight={1.5} maxImagesWidth={200} onBackspace={[Function]} onBlur={[Function]} @@ -154,7 +153,6 @@ exports[`File block renders file error state without crashing 1`] = ` fontFamily="serif" fontSize={16} isMultiline={false} - lineHeight={1.5} maxImagesWidth={200} minWidth={40} onBackspace={[Function]} @@ -265,7 +263,6 @@ exports[`File block renders file without crashing 1`] = ` fontFamily="serif" fontSize={16} isMultiline={false} - lineHeight={1.5} maxImagesWidth={200} onBackspace={[Function]} onBlur={[Function]} @@ -338,7 +335,6 @@ exports[`File block renders file without crashing 1`] = ` fontFamily="serif" fontSize={16} isMultiline={false} - lineHeight={1.5} maxImagesWidth={200} minWidth={40} onBackspace={[Function]} diff --git a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap index 2ecb871b203be5..6030decd6fcf51 100644 --- a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap +++ b/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap @@ -25,7 +25,6 @@ exports[`Search Block renders block with button inside option 1`] = ` fontFamily="serif" fontSize={16} isMultiline={false} - lineHeight={1.5} maxImagesWidth={200} onBackspace={[Function]} onBlur={[Function]} @@ -130,7 +129,6 @@ exports[`Search Block renders block with button inside option 1`] = ` fontFamily="serif" fontSize={16} isMultiline={false} - lineHeight={1.5} maxImagesWidth={200} minWidth={75} onBackspace={[Function]} @@ -202,7 +200,6 @@ exports[`Search Block renders block with icon button option matches snapshot 1`] fontFamily="serif" fontSize={16} isMultiline={false} - lineHeight={1.5} maxImagesWidth={200} onBackspace={[Function]} onBlur={[Function]} @@ -364,7 +361,6 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = ` fontFamily="serif" fontSize={16} isMultiline={false} - lineHeight={1.5} maxImagesWidth={200} minWidth={75} onBackspace={[Function]} @@ -436,7 +432,6 @@ exports[`Search Block renders with default configuration matches snapshot 1`] = fontFamily="serif" fontSize={16} isMultiline={false} - lineHeight={1.5} maxImagesWidth={200} onBackspace={[Function]} onBlur={[Function]} @@ -541,7 +536,6 @@ exports[`Search Block renders with default configuration matches snapshot 1`] = fontFamily="serif" fontSize={16} isMultiline={false} - lineHeight={1.5} maxImagesWidth={200} minWidth={75} onBackspace={[Function]} @@ -613,7 +607,6 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = ` fontFamily="serif" fontSize={16} isMultiline={false} - lineHeight={1.5} maxImagesWidth={200} onBackspace={[Function]} onBlur={[Function]} diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index a39fa0b01647c1..ac4bb010fda66b 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -57,7 +57,6 @@ const gutenbergFormatNamesToAztec = { const EMPTY_PARAGRAPH_TAGS = '

'; const DEFAULT_FONT_SIZE = 16; -const DEFAULT_LINE_HEIGHT = 1.5; export class RichText extends Component { constructor( { @@ -877,7 +876,7 @@ export class RichText extends Component { getLineHeight() { const { baseGlobalStyles } = this.props; - let lineHeight = DEFAULT_LINE_HEIGHT; + let lineHeight; // eslint-disable-next-line no-undef if ( ! __DEV__ ) { From 628474a0f18da998a264d9a7403acb8bd652e19d Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Tue, 7 Sep 2021 15:58:01 +0200 Subject: [PATCH 11/11] Mobile - Rich text - Unify force native update for font size and line height updates --- packages/rich-text/src/component/index.native.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index ac4bb010fda66b..ec798d3c915469 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -756,12 +756,8 @@ export class RichText extends Component { this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side } - if ( nextProps?.style?.fontSize !== this.props?.style?.fontSize ) { - this.needsSelectionUpdate = true; - this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side - } - if ( + nextProps?.style?.fontSize !== this.props?.style?.fontSize || nextProps?.style?.lineHeight !== this.props?.style?.lineHeight ) { this.needsSelectionUpdate = true;