Same for backticks

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

@@ -119,6 +119,7 @@ export class RichText extends Component {
 			onReplace,
 			onCreateUndoLevel: this.onCreateUndoLevel,
 			valueToFormat: this.valueToFormat,
+			onChange: this.onChange,
 		} );
 		this.enterPatterns = getBlockTransforms( 'from' )
 			.filter( ( { type } ) => type === 'enter' );

packages/editor/src/components/rich-text/patterns.js

@@ -10,7 +10,7 @@ import {
 	slice,
 } from '@wordpress/rich-text';
 
-export function getPatterns( { onReplace, valueToFormat, onCreateUndoLevel } ) {
+export function getPatterns( { onReplace, valueToFormat, onCreateUndoLevel, onChange } ) {
 	const prefixTransforms = getBlockTransforms( 'from' )
 		.filter( ( { type } ) => type === 'prefix' );
 
@@ -46,25 +46,35 @@ export function getPatterns( { onReplace, valueToFormat, onCreateUndoLevel } ) {
 			return record;
 		},
 		( record ) => {
+			const BACKTICK = '`';
+			const start = getSelectionStart( record );
 			const text = getTextContent( record );
+			const characterBefore = text.slice( start - 1, start );
 
 			// Quick check the text for the necessary character.
-			if ( text.indexOf( '`' ) === -1 ) {
+			if ( characterBefore !== BACKTICK ) {
+				return record;
+			}
+
+			const textBefore = text.slice( 0, start - 1 );
+			const indexBefore = textBefore.lastIndexOf( BACKTICK );
+
+			if ( indexBefore === -1 ) {
 				return record;
 			}
 
-			const match = text.match( /`([^`]+)`/ );
+			const startIndex = indexBefore;
+			const endIndex = start - 2;
 
-			if ( ! match ) {
+			if ( startIndex === endIndex ) {
 				return record;
 			}
 
-			const start = match.index;
-			const end = start + match[ 1 ].length;
+			onChange( record );
 
-			record = remove( record, start, start + 1 );
-			record = remove( record, end, end + 1 );
-			record = applyFormat( record, { type: 'code' }, start, end );
+			record = remove( record, startIndex, startIndex + 1 );
+			record = remove( record, endIndex, endIndex + 1 );
+			record = applyFormat( record, { type: 'code' }, startIndex, endIndex );
 
 			return record;
 		},

test/e2e/specs/__snapshots__/rich-text.test.js.snap

@@ -23,3 +23,15 @@ exports[`RichText should handle change in tag name gracefully 1`] = `
 <h3></h3>
 <!-- /wp:heading -->"
 `;
+
+exports[`RichText should transform backtick to code 1`] = `
+"<!-- wp:paragraph -->
+<p>A <code>backtick</code></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`RichText should transform backtick to code 2`] = `
+"<!-- wp:paragraph -->
+<p>A \`backtick\`</p>
+<!-- /wp:paragraph -->"
+`;

test/e2e/specs/blocks/__snapshots__/list.test.js.snap

@@ -75,9 +75,9 @@ exports[`List can be created by using an asterisk at the start of a paragraph bl
 `;
 
 exports[`List can undo asterisk transform 1`] = `
-"<!-- wp:list {\\"ordered\\":true} -->
-<ol><li>November</li></ol>
-<!-- /wp:list -->"
+"<!-- wp:paragraph -->
+<p>1.</p>
+<!-- /wp:paragraph -->"
 `;
 
 exports[`List should create paragraph on split at end and merge back with content 1`] = `

test/e2e/specs/blocks/list.test.js

@@ -51,7 +51,6 @@ describe( 'List', () => {
 		await clickBlockAppender();
 		await page.keyboard.type( '1. ' );
 		await pressWithModifier( META_KEY, 'z' );
-		await page.keyboard.type( 'November' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );

test/e2e/specs/rich-text.test.js

@@ -58,4 +58,15 @@ describe( 'RichText', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should transform backtick to code', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( 'A `backtick`' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await pressWithModifier( META_KEY, 'z' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );