Revert "RichText: rewrite with hooks (#23132)"

This reverts commit f15b91c.
WordPress · Jun 16, 2020 · bf1d105 · bf1d105
1 parent cb10e2d
commit bf1d105
Show file tree

Hide file tree

Showing 5 changed files with 793 additions and 735 deletions.
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -575,8 +575,7 @@ function RichTextWrapper(
 				value,
 				onChange,
 				onFocus,
-				editableProps,
-				editableTagName: TagName,
+				Editable,
 			} ) => (
 				<>
 					{ children && children( { value, onChange, onFocus } ) }
@@ -595,19 +594,15 @@ function RichTextWrapper(
 						isSelected={ nestedIsSelected }
 					>
 						{ ( { listBoxId, activeId, onKeyDown } ) => (
-							<TagName
-								{ ...editableProps }
+							<Editable
 								aria-autocomplete={
 									listBoxId ? 'list' : undefined
 								}
 								aria-owns={ listBoxId }
 								aria-activedescendant={ activeId }
 								start={ startAttr }
 								reversed={ reversed }
-								onKeyDown={ ( event ) => {
-									onKeyDown( event );
-									editableProps.onKeyDown( event );
-								} }
+								onKeyDown={ onKeyDown }
 							/>
 						) }
 					</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: 'is'.length,
-			endOffset: 'is'.length,
+			startOffset: 0,
+			endOffset: 0,
 		} );
 
 		await pressKeyWithModifier( 'primary', 'z' ); // Undo 2nd paragraph text.
@@ -245,8 +245,8 @@ describe( 'undo', () => {
 		expect( await getSelection() ).toEqual( {
 			blockIndex: 1,
 			editableIndex: 0,
-			startOffset: 'This'.length,
-			endOffset: 'This'.length,
+			startOffset: 0,
+			endOffset: 0,
 		} );
 
 		await pressKeyWithModifier( 'primary', 'z' ); // Undo 1st paragraph text.

diff --git a/...-text/src/component/use-boundary-style.js → ...rich-text/src/component/boundary-style.js b/...-text/src/component/use-boundary-style.js → ...rich-text/src/component/boundary-style.js
@@ -7,7 +7,7 @@ import { useEffect } from '@wordpress/element';
  * Calculates and renders the format boundary style when the active formats
  * change.
  */
-export function useBoundaryStyle( { activeFormats, ref } ) {
+export function BoundaryStyle( { activeFormats, forwardedRef } ) {
 	useEffect( () => {
 		// There's no need to recalculate the boundary styles if no formats are
 		// active, because no boundary styles will be visible.
@@ -16,7 +16,7 @@ export function useBoundaryStyle( { activeFormats, ref } ) {
 		}
 
 		const boundarySelector = '*[data-rich-text-format-boundary]';
-		const element = ref.current.querySelector( boundarySelector );
+		const element = forwardedRef.current.querySelector( boundarySelector );
 
 		if ( ! element ) {
 			return;
@@ -45,4 +45,5 @@ export function useBoundaryStyle( { activeFormats, ref } ) {
 			globalStyle.innerHTML = style;
 		}
 	}, [ activeFormats ] );
+	return null;
 }