RichText: rewrite with hooks (#23132)

* RichText: rewrite with hooks * Immediately render content * Adjust undo e2e test * Avoid underscore prefix for duplicate identifiers
WordPress · Jun 14, 2020 · f15b91c · f15b91c
1 parent 5b38d71
commit f15b91c
Show file tree

Hide file tree

Showing 5 changed files with 734 additions and 792 deletions.
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -575,7 +575,8 @@ function RichTextWrapper(
 				value,
 				onChange,
 				onFocus,
-				Editable,
+				editableProps,
+				editableTagName: TagName,
 			} ) => (
 				<>
 					{ children && children( { value, onChange, onFocus } ) }
@@ -594,15 +595,19 @@ function RichTextWrapper(
 						isSelected={ nestedIsSelected }
 					>
 						{ ( { listBoxId, activeId, onKeyDown } ) => (
-							<Editable
+							<TagName
+								{ ...editableProps }
 								aria-autocomplete={
 									listBoxId ? 'list' : undefined
 								}
 								aria-owns={ listBoxId }
 								aria-activedescendant={ activeId }
 								start={ startAttr }
 								reversed={ reversed }
-								onKeyDown={ onKeyDown }
+								onKeyDown={ ( event ) => {
+									onKeyDown( event );
+									editableProps.onKeyDown( event );
+								} }
 							/>
 						) }
 					</Autocomplete>

diff --git a/packages/e2e-tests/specs/editor/various/undo.test.js b/packages/e2e-tests/specs/editor/various/undo.test.js
@@ -225,8 +225,8 @@ describe( 'undo', () => {
 		expect( await getSelection() ).toEqual( {
 			blockIndex: 2,
 			editableIndex: 0,
-			startOffset: 0,
-			endOffset: 0,
+			startOffset: 'is'.length,
+			endOffset: 'is'.length,
 		} );
 
 		await pressKeyWithModifier( 'primary', 'z' ); // Undo 2nd paragraph text.
@@ -245,8 +245,8 @@ describe( 'undo', () => {
 		expect( await getSelection() ).toEqual( {
 			blockIndex: 1,
 			editableIndex: 0,
-			startOffset: 0,
-			endOffset: 0,
+			startOffset: 'This'.length,
+			endOffset: 'This'.length,
 		} );
 
 		await pressKeyWithModifier( 'primary', 'z' ); // Undo 1st paragraph text.