Code Block: add keyboard shortcut to indent lines inside code block

packages/block-library/src/code/edit.js

@@ -2,22 +2,49 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	RichTextShortcut,
+} from '@wordpress/block-editor';
+import { __unstableIndentCode } from '@wordpress/rich-text';
 
-export default function CodeEdit( { attributes, setAttributes, onRemove } ) {
+export default function CodeEdit( {
+	attributes,
+	setAttributes,
+	onRemove,
+	onReplace,
+} ) {
 	const blockProps = useBlockProps();
+
+	const controls = ( { value, onChange } ) => {
+		return (
+			<>
+				<RichTextShortcut
+					type="primary"
+					character="]"
+					onUse={ () => {
+						onChange( __unstableIndentCode( value ) );
+					} }
+				/>
+			</>
+		);
+	};
 	return (
 		<pre { ...blockProps }>
 			<RichText
 				tagName="code"
 				value={ attributes.content }
 				onChange={ ( content ) => setAttributes( { content } ) }
+				onReplace={ onReplace }
 				onRemove={ onRemove }
 				placeholder={ __( 'Write code…' ) }
 				aria-label={ __( 'Code' ) }
 				preserveWhiteSpace
 				__unstablePastePlainText
-			/>
+			>
+				{ controls }
+			</RichText>
 		</pre>
 	);
 }

packages/rich-text/src/can-indent-code.js

@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import { getLineIndex } from './get-line-index';
+
+/** @typedef {import('./create').RichTextValue} RichTextValue */
+
+/**
+ * Checks if the selected list item can be indented.
+ *
+ * @param {RichTextValue} value Value to check.
+ *
+ * @return {boolean} Whether or not the selected list item can be indented.
+ */
+export function canIndentCode( value ) {
+	const lineIndex = getLineIndex( value );
+
+	// There is only one line, so the line cannot be indented.
+	if ( lineIndex === undefined ) {
+		return false;
+	}
+
+	const { replacements } = value;
+	const previousLineIndex = getLineIndex( value, lineIndex );
+	const formatsAtLineIndex = replacements[ lineIndex ] || [];
+	const formatsAtPreviousLineIndex = replacements[ previousLineIndex ] || [];
+
+	// If the indentation of the current line is greater than previous line,
+	// then the line cannot be furter indented.
+	return formatsAtLineIndex.length <= formatsAtPreviousLineIndex.length;
+}

packages/rich-text/src/get-line-index.js

@@ -18,10 +18,14 @@ import { LINE_SEPARATOR } from './special-characters';
  * @return {number|void} The line index. Undefined if not found.
  */
 export function getLineIndex( { start, text }, startIndex = start ) {
+	const NEW_LINE_CHARACTER = '\n';
 	let index = startIndex;
 
 	while ( index-- ) {
-		if ( text[ index ] === LINE_SEPARATOR ) {
+		if (
+			text[ index ] === LINE_SEPARATOR ||
+			text[ index ] === NEW_LINE_CHARACTER
+		) {
 			return index;
 		}
 	}

packages/rich-text/src/indent-code.js

@@ -0,0 +1,42 @@
+/**
+ * Internal dependencies
+ */
+
+import { canIndentCode } from './can-indent-code';
+import { insert } from './insert';
+
+/** @typedef {import('./create').RichTextValue} RichTextValue */
+
+/**
+ * Indents any selected list items if possible.
+ *
+ * @param {RichTextValue} value Value to change.
+ *
+ * @return {RichTextValue} The changed value.
+ */
+export function indentCode( value ) {
+	if ( ! canIndentCode( value ) ) {
+		return value;
+	}
+
+	const { start, end, text } = value;
+
+	const selectedText = text.slice( start, end );
+	// The first line should be indented, even if it starts with `\n`
+	// The last line should only be indented if includes any character after `\n`
+	const lineBreakCount = /\n/g.exec( selectedText )?.length;
+
+	if ( lineBreakCount > 0 ) {
+		// Select full first line to replace everything at once
+		const firstLineStart = text.lastIndexOf( '\n', start - 1 ) + 1;
+
+		const newSelection = text.slice( firstLineStart, end - 1 );
+		const indentedText = newSelection.replace(
+			/^|\n/g, // Match all line starts
+			'$&\t'
+		);
+
+		return insert( value, indentedText, firstLineStart, end - 1 );
+	}
+	return insert( value, '\t' );
+}

packages/rich-text/src/index.js

@@ -31,6 +31,7 @@ export { indentListItems as __unstableIndentListItems } from './indent-list-item
 export { outdentListItems as __unstableOutdentListItems } from './outdent-list-items';
 export { changeListType as __unstableChangeListType } from './change-list-type';
 export { createElement as __unstableCreateElement } from './create-element';
+export { indentCode as __unstableIndentCode } from './indent-code';
 
 export { useAnchorRef } from './component/use-anchor-ref';