Mobile - Highlight word - Fixes for iOS and color indicator

WordPress · Nov 2, 2021 · 7a1b2cb · 7a1b2cb
1 parent ab75228
commit 7a1b2cb
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 2 deletions.
diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js
@@ -44,7 +44,7 @@ function TextColorEdit( {
 		const color = getActiveColors( value, name, colors )?.color;
 
 		return { color: color?.replace( ' ', '' ) };
-	} );
+	}, [ value, colors ] );
 
 	const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl;
 	if ( ! hasColorsToChoose && ! isActive ) {
@@ -95,5 +95,23 @@ export const textColor = {
 		style: 'style',
 		class: 'class',
 	},
+	/*
+	 * Since this format relies on the <mark> tag, it's important to
+	 * prevent the default yellow background color applied by most
+	 * browsers. The solution is to detect when this format is used with a
+	 * text color but no background color, and in such cases to override
+	 * the default styling with a transparent background.
+	 *
+	 * @see https://github.com/WordPress/gutenberg/pull/35516
+	 */
+	__unstableFilterAttributeValue( key, value ) {
+		if ( key !== 'style' ) return value;
+		// We should not add a background-color if it's already set
+		if ( value && value.includes( 'background-color' ) ) return value;
+		const addedCSS = [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' );
+		// Prepend `addedCSS` to avoid a double `;;` as any the existing CSS
+		// rules will already include a `;`.
+		return value ? [ addedCSS, value ].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
@@ -30,6 +30,13 @@ function setColors( value, name, colorSettings, colors ) {
 	const classNames = [];
 	const attributes = {};
 
+	if ( backgroundColor ) {
+		styles.push( [ 'background-color', backgroundColor ].join( ':' ) );
+	} else {
+		// Override default browser color for mark element.
+		styles.push( [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ) );
+	}
+
 	if ( color ) {
 		const colorObject = getColorObjectByColorValue( colorSettings, color );
 		if ( colorObject ) {

diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js
@@ -606,7 +606,13 @@ export class RichText extends Component {
 		const isManual =
 			this.lastAztecEventType !== 'input' &&
 			this.props.value === this.value;
-		if ( hasChanged && isManual ) {
+		const isFormatChange =
+			this.lastAztecEventType === 'format change' &&
+			this.props.value !== this.value;
+		if (
+			( hasChanged && isManual ) ||
+			( this.isIOS && hasChanged && isFormatChange )
+		) {
 			const value = this.createRecord();
 			const activeFormats = getActiveFormats( value );
 			this.setState( { activeFormats } );

diff --git a/packages/rich-text/src/get-format-colors.native.js b/packages/rich-text/src/get-format-colors.native.js
@@ -15,6 +15,10 @@ export function getFormatColors( value, formats, colors ) {
 			format.forEach( ( currentFormat ) => {
 				if ( currentFormat?.type === FORMAT_TYPE ) {
 					const className = currentFormat?.attributes?.class;
+					currentFormat.attributes.style = currentFormat.attributes.style.replace(
+						' ',
+						''
+					);
 
 					className?.split( ' ' ).forEach( ( currentClass ) => {
 						const match = currentClass.match( REGEX_TO_MATCH );