Format library: fix unsetting highlight color (#37062)

packages/e2e-tests/specs/editor/various/format-library/__snapshots__/text-color.test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RichText should remove highlighting element 1`] = `
+"<!-- wp:paragraph -->
+<p><mark style=\\"background-color:rgba(0, 0, 0, 0)\\" class=\\"has-inline-color has-cyan-bluish-gray-color\\">1</mark></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`RichText should remove highlighting element 2`] = `
+"<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->"
+`;

packages/e2e-tests/specs/editor/various/format-library/text-color.test.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createNewPost,
+	getEditedPostContent,
+	clickBlockAppender,
+	pressKeyWithModifier,
+	clickBlockToolbarButton,
+} from '@wordpress/e2e-test-utils';
+
+describe( 'RichText', () => {
+	beforeEach( async () => {
+		await createNewPost();
+	} );
+
+	it( 'should remove highlighting element', async () => {
+		await clickBlockAppender();
+
+		// Add text and select to color.
+		await page.keyboard.type( '1' );
+		await pressKeyWithModifier( 'primary', 'a' );
+		await clickBlockToolbarButton( 'More' );
+
+		const button = await page.waitForXPath(
+			`//button[text()='Highlight']`
+		);
+		// Clicks may fail if the button is out of view. Assure it is before click.
+		await button.evaluate( ( element ) => element.scrollIntoView() );
+		await button.click();
+
+		// Use a color name with multiple words to ensure that it becomes
+		// active. Previously we had a broken regular expression.
+		const option = await page.waitForSelector(
+			'[aria-label="Color: Cyan bluish gray"]'
+		);
+
+		await option.click();
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await option.click();
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+} );

packages/format-library/src/text-color/index.js

@@ -17,6 +17,8 @@ import { removeFormat } from '@wordpress/rich-text';
  */
 import { default as InlineColorUI, getActiveColors } from './inline';
 
+export const transparentValue = 'rgba(0, 0, 0, 0)';
+
 const name = 'core/text-color';
 const title = __( 'Highlight' );
 
@@ -30,7 +32,7 @@ function getComputedStyleProperty( element, property ) {
 
 	if (
 		property === 'background-color' &&
-		value === 'rgba(0, 0, 0, 0)' &&
+		value === transparentValue &&
 		element.parentElement
 	) {
 		return getComputedStyleProperty( element.parentElement, property );
@@ -47,7 +49,7 @@ function fillComputedColors( element, { color, backgroundColor } ) {
 	return {
 		color: color || getComputedStyleProperty( element, 'color' ),
 		backgroundColor:
-			backgroundColor === 'rgba(0, 0, 0, 0)'
+			backgroundColor === transparentValue
 				? getComputedStyleProperty( element, 'background-color' )
 				: backgroundColor,
 	};
@@ -139,7 +141,7 @@ export const textColor = {
 		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( ':' );
+		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;

packages/format-library/src/text-color/inline.js

@@ -28,14 +28,14 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { textColor as settings } from './index';
+import { textColor as settings, transparentValue } from './index';
 
 function parseCSS( css = '' ) {
 	return css.split( ';' ).reduce( ( accumulator, rule ) => {
 		if ( rule ) {
 			const [ property, value ] = rule.split( ':' );
 			if ( property === 'color' ) accumulator.color = value;
-			if ( property === 'background-color' )
+			if ( property === 'background-color' && value !== transparentValue )
 				accumulator.backgroundColor = value;
 		}
 		return accumulator;
@@ -44,9 +44,11 @@ function parseCSS( css = '' ) {
 
 function parseClassName( className = '', colorSettings ) {
 	return className.split( ' ' ).reduce( ( accumulator, name ) => {
-		const match = name.match( /^has-([^-]+)-color$/ );
-		if ( match ) {
-			const [ , colorSlug ] = name.match( /^has-([^-]+)-color$/ );
+		// `colorSlug` could contain dashes, so simply match the start and end.
+		if ( name.startsWith( 'has-' ) && name.endsWith( '-color' ) ) {
+			const colorSlug = name
+				.replace( /^has-/, '' )
+				.replace( /-color$/, '' );
 			const colorObject = getColorObjectByAttributeValues(
 				colorSettings,
 				colorSlug
@@ -88,7 +90,7 @@ function setColors( value, name, colorSettings, colors ) {
 		styles.push( [ 'background-color', backgroundColor ].join( ':' ) );
 	} else {
 		// Override default browser color for mark element.
-		styles.push( [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ) );
+		styles.push( [ 'background-color', transparentValue ].join( ':' ) );
 	}
 
 	if ( color ) {