Mobile - Highlight text - Force format for some edge cases (#37915)

* Mobile - Highlight text - Force format for some edge cases when there's no text selection

* Mobile - Update changelog

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,
 };

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 );

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