Bind Editable wrapper to class

packages/rich-text/src/component/index.js

@@ -107,6 +107,7 @@ class RichText extends Component {
 		this.valueToEditableHTML = this.valueToEditableHTML.bind( this );
 		this.onPointerDown = this.onPointerDown.bind( this );
 		this.formatToValue = this.formatToValue.bind( this );
+		this.Editable = this.Editable.bind( this );
 
 		this.onKeyDown = ( event ) => {
 			this.handleDelete( event );
@@ -874,24 +875,19 @@ class RichText extends Component {
 		return toHTMLString( { value, multilineTag } );
 	}
 
-	render() {
+	Editable( props ) {
 		const {
 			tagName: Tagname = 'div',
 			style,
 			className,
 			placeholder,
-			__unstableIsSelected: isSelected,
-			children,
-			allowedFormats,
-			withoutInteractiveFormatting,
 		} = this.props;
-
 		// Generating a key that includes `tagName` ensures that if the tag
 		// changes, we replace the relevant element. This is needed because we
 		// prevent Editable component updates.
 		const key = Tagname;
 
-		const EditableWrapper = ( props ) => (
+		return (
 			<Editable
 				{ ...props }
 				tagName={ Tagname }
@@ -920,6 +916,15 @@ class RichText extends Component {
 				onTouchEnd={ this.onSelectionChange }
 			/>
 		);
+	}
+
+	render() {
+		const {
+			__unstableIsSelected: isSelected,
+			children,
+			allowedFormats,
+			withoutInteractiveFormatting,
+		} = this.props;
 
 		return (
 			<>
@@ -933,9 +938,9 @@ class RichText extends Component {
 					isSelected,
 					value: this.record,
 					onChange: this.onChange,
-					Editable: EditableWrapper,
+					Editable: this.Editable,
 				} ) }
-				{ ! children && <EditableWrapper /> }
+				{ ! children && <this.Editable /> }
 			</>
 		);
 	}