POC: DON'T MERGE THIS. Allow tab keypress formatting in rich text fie…

…lds in editor.

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

@@ -37,6 +37,7 @@ import { useBeforeInputRules } from './use-before-input-rules';
 import { useInputRules } from './use-input-rules';
 import { useDelete } from './use-delete';
 import { useEnter } from './use-enter';
+import { useTab } from './use-tab';
 import { useFormatTypes } from './use-format-types';
 import { useRemoveBrowserShortcuts } from './use-remove-browser-shortcuts';
 import { useShortcuts } from './use-shortcuts';
@@ -399,6 +400,10 @@ function RichTextWrapper(
 						disableLineBreaks,
 						onSplitAtEnd,
 					} ),
+					useTab( {
+						value,
+						onChange,
+					} ),
 					useFirefoxCompat(),
 					anchorRef,
 				] ) }

packages/block-editor/src/components/rich-text/use-tab.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { insert } from '@wordpress/rich-text';
+import { useRefEffect } from '@wordpress/compose';
+import { TAB } from '@wordpress/keycodes';
+
+export function useTab( props ) {
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	return useRefEffect( ( element ) => {
+		function onKeyDown( event ) {
+			const { keyCode } = event;
+
+			if ( event.defaultPrevented ) {
+				return;
+			}
+
+			const { value, onChange } = propsRef.current;
+            const _value = { ...value };
+
+			if ( keyCode === TAB  ) {
+                event.preventDefault();
+
+				const { start, end } = value;
+
+				onChange( insert( _value, '\t', start, end ) );
+			}
+		}
+
+		element.addEventListener( 'keydown', onKeyDown );
+		return () => {
+			element.removeEventListener( 'keydown', onKeyDown );
+		};
+	}, [] );
+
+}

packages/rich-text/src/create.js

@@ -298,7 +298,7 @@ function filterRange( node, range, filter ) {
  * @param {string} string
  */
 function collapseWhiteSpace( string ) {
-	return string.replace( /[\n\r\t]+/g, ' ' );
+	return string.replace( /[\n\r]+/g, ' ' );
 }
 
 /**