Mark non-breaking spaces with a red dot and add a button to replace them

packages/block-editor/src/components/rich-text/content.scss

@@ -1,3 +1,4 @@
+@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
 .rich-text {
@@ -55,8 +56,8 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 	background-color: transparent;
 }
 
+// A background, not a pseudo-element: generated content adds a caret stop in
+// Firefox.
 .is-selected .non-breaking-space {
-	outline: 1px solid currentColor;
-	outline-offset: -1px;
-	opacity: 0.8;
+	background: radial-gradient(circle, $alert-red 2px, transparent 2.5px) center / 100% 100% no-repeat;
 }

packages/block-editor/src/components/rich-text/format-toolbar/index.jsx

@@ -11,12 +11,14 @@ const POPOVER_PROPS = {
 const FormatToolbar = () => {
 	return (
 		<>
-			{ [ 'bold', 'italic', 'link', 'unknown' ].map( ( format ) => (
-				<Slot
-					name={ `RichText.ToolbarControls.${ format }` }
-					key={ format }
-				/>
-			) ) }
+			{ [ 'bold', 'italic', 'link', 'unknown', 'non-breaking-space' ].map(
+				( format ) => (
+					<Slot
+						name={ `RichText.ToolbarControls.${ format }` }
+						key={ format }
+					/>
+				)
+			) }
 			<Slot name="RichText.ToolbarControls">
 				{ ( fills ) => {
 					if ( ! fills.length ) {

packages/format-library/src/non-breaking-space/index.tsx

@@ -1,13 +1,35 @@
 import { __ } from '@wordpress/i18n';
 import { applyFormat, insert, useAnchor } from '@wordpress/rich-text';
 import type { RichTextValue } from '@wordpress/rich-text';
-// @ts-expect-error Block Editor not fully typed yet.
-import { RichTextShortcut } from '@wordpress/block-editor';
-import { Popover } from '@wordpress/components';
+import {
+	RichTextShortcut,
+	RichTextToolbarButton,
+	// @ts-expect-error Block Editor not fully typed yet.
+} from '@wordpress/block-editor';
+import { Popover, SVG, Path } from '@wordpress/components';
 import type { FormatEditProps } from '../types';
 
 const name = 'core/non-breaking-space';
 const title = __( 'Non breaking space' );
+const NBSP = '\u00a0';
+
+const icon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M4.5 9.5H6V14h12V9.5h1.5v6h-15z" />
+	</SVG>
+);
+
+// The selected text, or the characters on both sides of the caret.
+function getNonBreakingSpaceRange( { text, start, end }: RichTextValue ) {
+	if ( start === undefined || end === undefined ) {
+		return null;
+	}
+
+	const from = start === end ? Math.max( start - 1, 0 ) : start;
+	const to = start === end ? end + 1 : end;
+
+	return text.slice( from, to ).includes( NBSP ) ? [ from, to ] : null;
+}
 
 function PopoverAnchor( {
 	contentRef,
@@ -32,9 +54,28 @@ export const nonBreakingSpace = {
 	title,
 	tagName: 'span',
 	className: 'non-breaking-space',
-	edit( { value, onChange, contentRef }: FormatEditProps ) {
+	edit( { value, onChange, onFocus, contentRef }: FormatEditProps ) {
 		function addNonBreakingSpace() {
-			onChange( insert( value, '\u00a0' ) );
+			onChange( insert( value, NBSP ) );
+		}
+
+		const range = getNonBreakingSpaceRange( value );
+
+		function replaceNonBreakingSpaces() {
+			if ( ! range ) {
+				return;
+			}
+
+			const [ from, to ] = range;
+			const { text } = value;
+			onChange( {
+				...value,
+				text:
+					text.slice( 0, from ) +
+					text.slice( from, to ).replaceAll( NBSP, ' ' ) +
+					text.slice( to ),
+			} );
+			onFocus();
 		}
 
 		const selectedValue =
@@ -49,7 +90,16 @@ export const nonBreakingSpace = {
 					character=" "
 					onUse={ addNonBreakingSpace }
 				/>
-				{ selectedValue === '\u00a0' && (
+				{ range && (
+					<RichTextToolbarButton
+						name="non-breaking-space"
+						icon={ icon }
+						title={ __( 'Replace non-breaking spaces' ) }
+						onClick={ replaceNonBreakingSpaces }
+						isActive
+					/>
+				) }
+				{ selectedValue === NBSP && (
 					<PopoverAnchor contentRef={ contentRef } />
 				) }
 			</>
@@ -60,7 +110,6 @@ export const nonBreakingSpace = {
 		text: string
 	) => RichTextValue[ 'formats' ] {
 		return ( formats, text ) => {
-			const NBSP = '\u00a0';
 			// Not a complete `RichTextValue`: the callback only receives
 			// `formats` and `text`. The assertion is safe because `applyFormat`
 			// is passed explicit indices (so it never falls back to `start`/

test/e2e/specs/editor/various/rich-text.spec.js

@@ -1023,4 +1023,44 @@ test.describe( 'RichText (@firefox, @webkit)', () => {
 			{ name: 'core/paragraph', attributes: { content: 'Outside' } },
 		] );
 	} );
+
+	test( 'should replace selected non-breaking spaces from the toolbar', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		const button = page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Replace non-breaking spaces' } );
+
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'one' );
+		await pageUtils.pressKeys( 'primaryShift+Space' );
+		await editor.showBlockToolbar();
+		await expect( button ).toBeVisible();
+
+		await page.keyboard.type( 'two' );
+		await pageUtils.pressKeys( 'primaryShift+Space' );
+		await page.keyboard.type( 'three' );
+		await editor.showBlockToolbar();
+		await expect( button ).toHaveCount( 0 );
+
+		await pageUtils.pressKeys( 'shift+ArrowLeft', { times: 6 } );
+		await button.click();
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'one\u00a0two three' },
+			},
+		] );
+		await expect( button ).toHaveCount( 0 );
+
+		await page.keyboard.type( '!' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'one\u00a0two!' },
+			},
+		] );
+	} );
 } );