Rich text: add character shortcuts for wrapping selection

packages/block-editor/src/components/rich-text/index.js

@@ -38,6 +38,7 @@ import { store as blockEditorStore } from '../../store';
 import { useUndoAutomaticChange } from './use-undo-automatic-change';
 import { useMarkPersistent } from './use-mark-persistent';
 import { usePasteHandler } from './use-paste-handler';
+import { useBeforeInputRules } from './use-before-input-rules';
 import { useInputRules } from './use-input-rules';
 import { useEnter } from './use-enter';
 import { useFormatTypes } from './use-format-types';
@@ -359,6 +360,7 @@ function RichTextWrapper(
 					autocompleteProps.ref,
 					props.ref,
 					richTextRef,
+					useBeforeInputRules( { value, onChange } ),
 					useInputRules( {
 						value,
 						onChange,

packages/block-editor/src/components/rich-text/use-before-input-rules.js

@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
+import { insert, isCollapsed } from '@wordpress/rich-text';
+import { useDispatch } from '@wordpress/data';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * When typing over a selection, the selection will we wrapped by a matching
+ * character pair. The second character is optional, it defaults to the first
+ * character.
+ *
+ * @type {string[]} Array of character pairs.
+ */
+const wrapSelectionSettings = [ '`', '"', "'", '“”', '‘’' ];
+
+export function useBeforeInputRules( props ) {
+	const {
+		__unstableMarkLastChangeAsPersistent,
+		__unstableMarkAutomaticChange,
+	} = useDispatch( blockEditorStore );
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	return useRefEffect( ( element ) => {
+		function onInput( event ) {
+			const { inputType, data } = event;
+			const { value, onChange } = propsRef.current;
+
+			// Only run the rules when inserting text.
+			if ( inputType !== 'insertText' ) {
+				return;
+			}
+
+			if ( isCollapsed( value ) ) {
+				return;
+			}
+
+			const pair = applyFilters(
+				'blockEditor.wrapSelectionSettings',
+				wrapSelectionSettings
+			).find(
+				( [ startChar, endChar ] ) =>
+					startChar === data || endChar === data
+			);
+
+			if ( ! pair ) {
+				return;
+			}
+
+			const [ startChar, endChar = startChar ] = pair;
+			const start = value.start;
+			const end = value.end + startChar.length;
+
+			let newValue = insert( value, startChar, start, start );
+			newValue = insert( newValue, endChar, end, end );
+
+			__unstableMarkLastChangeAsPersistent();
+			onChange( newValue );
+			__unstableMarkAutomaticChange();
+
+			const init = {};
+
+			for ( const key in event ) {
+				init[ key ] = event[ key ];
+			}
+
+			init.data = endChar;
+
+			const { ownerDocument } = element;
+			const { defaultView } = ownerDocument;
+			const newEvent = new defaultView.InputEvent( 'input', init );
+
+			// Dispatch an input event with the new data. This will trigger the
+			// input rules.
+			event.target.dispatchEvent( newEvent );
+			event.preventDefault();
+		}
+
+		element.addEventListener( 'beforeinput', onInput );
+		return () => {
+			element.removeEventListener( 'beforeinput', onInput );
+		};
+	}, [] );
+}

packages/e2e-tests/specs/editor/various/__snapshots__/rich-text.test.js.snap

@@ -178,6 +178,18 @@ exports[`RichText should transform backtick to code 2`] = `
 <!-- /wp:paragraph -->"
 `;
 
+exports[`RichText should transform when typing backtick over selection 1`] = `
+"<!-- wp:paragraph -->
+<p>A <code>selection</code> test.</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`RichText should transform when typing backtick over selection 2`] = `
+"<!-- wp:paragraph -->
+<p>A \`selection\` test.</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`RichText should undo backtick transform with backspace 1`] = `
 "<!-- wp:paragraph -->
 <p>\`a\`</p>

packages/e2e-tests/specs/editor/various/rich-text.test.js

@@ -148,6 +148,23 @@ describe( 'RichText', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
+	it( 'should transform when typing backtick over selection', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( 'A selection test.' );
+		await page.keyboard.press( 'Home' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowRight' );
+		await pressKeyWithModifier( 'shiftAlt', 'ArrowRight' );
+		await page.keyboard.type( '`' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		// Should undo the transform.
+		await pressKeyWithModifier( 'primary', 'z' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
 	it( 'should only mutate text data on input', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( '1' );