diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js index 98d94e091b0227..9704a33d48b966 100644 --- a/packages/format-library/src/text-color/index.native.js +++ b/packages/format-library/src/text-color/index.native.js @@ -180,12 +180,15 @@ export const textColor = { */ __unstableFilterAttributeValue( key, value ) { if ( key !== 'style' ) return value; + // We need to remove the extra spaces within the styles on mobile + const newValue = value.replace( / /g, '' ); // We should not add a background-color if it's already set - if ( value && value.includes( 'background-color' ) ) return value; + if ( newValue && newValue.includes( 'background-color' ) ) + return newValue; const addedCSS = [ 'background-color', transparentValue ].join( ':' ); // Prepend `addedCSS` to avoid a double `;;` as any the existing CSS // rules will already include a `;`. - return value ? [ addedCSS, value ].join( ';' ) : addedCSS; + return newValue ? [ addedCSS, newValue ].join( ';' ) : addedCSS; }, edit: TextColorEdit, }; diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js index b81f13ffd9207f..7e075ff21c0da2 100644 --- a/packages/format-library/src/text-color/inline.native.js +++ b/packages/format-library/src/text-color/inline.native.js @@ -1,3 +1,9 @@ +/** + * External dependencies + */ + +import { reject } from 'lodash'; + /** * WordPress dependencies */ @@ -82,15 +88,31 @@ function setColors( value, name, colorSettings, colors ) { if ( classNames.length ) attributes.class = classNames.join( ' ' ); const format = { type: name, attributes }; + const hasNoSelection = value.start === value.end; + const isAtTheEnd = value.end === value.text.length; + const previousCharacter = value.text.charAt( value.end - 1 ); - // For cases when there is no text selected, formatting is forced - // for the first empty character + // Force formatting due to limitations in the native implementation if ( - value?.start === value?.end && - ( value?.text.length === 0 || - value.text?.charAt( value.end - 1 ) === ' ' ) + hasNoSelection && + ( value.text.length === 0 || + ( previousCharacter === ' ' && isAtTheEnd ) ) ) { - return applyFormat( value, format, value?.start - 1, value?.end + 1 ); + // For cases where there's no text selected, there's a space before + // the current caret position and it's at the end of the text. + return applyFormat( value, format, value.start - 1, value.end + 1 ); + } else if ( hasNoSelection && isAtTheEnd ) { + // If there's no selection and is at the end of the text + // manually add the format within the current caret position. + const newFormat = applyFormat( value, format ); + const { activeFormats } = newFormat; + newFormat.formats[ value.start ] = [ + ...reject( activeFormats, { type: format.type } ), + format, + ]; + return newFormat; + } else if ( hasNoSelection ) { + return removeFormat( value, format ); } return applyFormat( value, format ); diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index abcb4fdf3d9ddf..d92fd169db2660 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -10,13 +10,13 @@ For each user feature we should also add a importance categorization label to i --> ## Unreleased -- [**] Fix content justification attribute in Buttons block [#37887] +- [**] Fix content justification attribute in Buttons block [#37887] - [*] Hide help button from Unsupported Block Editor. [#37221] - [*] Add contrast checker to text-based blocks [#34902] - - [*] [Image block] Fix missing translations [#37956] - [*] Fix cut-off setting labels by properly wrapping the text [#37993] +- [*] Highlight text: fix applying formatting for non-selected text [#37915] ## 1.69.0