Rich text: replace global event handlers with local ones (#34492)

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

@@ -7,7 +7,13 @@ import { omit } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { RawHTML, useRef, useCallback, forwardRef } from '@wordpress/element';
+import {
+	RawHTML,
+	useRef,
+	useCallback,
+	forwardRef,
+	createContext,
+} from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { children as childrenSource } from '@wordpress/blocks';
 import { useInstanceId, useMergeRefs } from '@wordpress/compose';
@@ -36,9 +42,14 @@ import { useInputRules } from './use-input-rules';
 import { useEnter } from './use-enter';
 import { useFormatTypes } from './use-format-types';
 import { useRemoveBrowserShortcuts } from './use-remove-browser-shortcuts';
+import { useShortcuts } from './use-shortcuts';
+import { useInputEvents } from './use-input-events';
 import FormatEdit from './format-edit';
 import { getMultilineTag, getAllowedFormats } from './utils';
 
+export const keyboardShortcutContext = createContext();
+export const inputEventContext = createContext();
+
 /**
  * Removes props used for the native version of RichText so that they are not
  * passed to the DOM element and log warnings.
@@ -244,6 +255,9 @@ function RichTextWrapper(
 	useCaretInFormat( { value } );
 	useMarkPersistent( { html: adjustedValue, value } );
 
+	const keyboardShortcuts = useRef( new Set() );
+	const inputEvents = useRef( new Set() );
+
 	function onKeyDown( event ) {
 		const { keyCode } = event;
 
@@ -286,17 +300,19 @@ function RichTextWrapper(
 	const TagName = tagName;
 	const content = (
 		<>
-			{ isSelected &&
-				children &&
-				children( { value, onChange, onFocus } ) }
 			{ isSelected && (
-				<FormatEdit
-					value={ value }
-					onChange={ onChange }
-					onFocus={ onFocus }
-					formatTypes={ formatTypes }
-					forwardedRef={ anchorRef }
-				/>
+				<keyboardShortcutContext.Provider value={ keyboardShortcuts }>
+					<inputEventContext.Provider value={ inputEvents }>
+						{ children && children( { value, onChange, onFocus } ) }
+						<FormatEdit
+							value={ value }
+							onChange={ onChange }
+							onFocus={ onFocus }
+							formatTypes={ formatTypes }
+							forwardedRef={ anchorRef }
+						/>
+					</inputEventContext.Provider>
+				</keyboardShortcutContext.Provider>
 			) }
 			{ isSelected && hasFormats && (
 				<FormatToolbarContainer
@@ -323,6 +339,8 @@ function RichTextWrapper(
 						onReplace,
 					} ),
 					useRemoveBrowserShortcuts(),
+					useShortcuts( keyboardShortcuts ),
+					useInputEvents( inputEvents ),
 					useUndoAutomaticChange(),
 					usePasteHandler( {
 						isSelected,

packages/block-editor/src/components/rich-text/input-event.js

@@ -1,30 +1,31 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { useEffect, useContext, useRef } from '@wordpress/element';
 
-export class __unstableRichTextInputEvent extends Component {
-	constructor() {
-		super( ...arguments );
+/**
+ * Internal dependencies
+ */
+import { inputEventContext } from './';
 
-		this.onInput = this.onInput.bind( this );
-	}
+export function __unstableRichTextInputEvent( { inputType, onInput } ) {
+	const callbacks = useContext( inputEventContext );
+	const onInputRef = useRef();
+	onInputRef.current = onInput;
 
-	onInput( event ) {
-		if ( event.inputType === this.props.inputType ) {
-			this.props.onInput();
+	useEffect( () => {
+		function callback( event ) {
+			if ( event.inputType === inputType ) {
+				onInputRef.current();
+				event.preventDefault();
+			}
 		}
-	}
-
-	componentDidMount() {
-		document.addEventListener( 'input', this.onInput, true );
-	}
 
-	componentWillUnmount() {
-		document.removeEventListener( 'input', this.onInput, true );
-	}
+		callbacks.current.add( callback );
+		return () => {
+			callbacks.current.delete( callback );
+		};
+	}, [ inputType ] );
 
-	render() {
-		return null;
-	}
+	return null;
 }

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

@@ -1,17 +1,32 @@
 /**
  * WordPress dependencies
  */
-import { useKeyboardShortcut } from '@wordpress/compose';
-import { rawShortcut } from '@wordpress/keycodes';
+import { isKeyboardEvent } from '@wordpress/keycodes';
+import { useEffect, useContext, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { keyboardShortcutContext } from './';
 
 export function RichTextShortcut( { character, type, onUse } ) {
-	const callback = () => {
-		onUse();
-		return false;
-	};
-	useKeyboardShortcut( rawShortcut[ type ]( character ), callback, {
-		bindGlobal: true,
-	} );
+	const keyboardShortcuts = useContext( keyboardShortcutContext );
+	const onUseRef = useRef();
+	onUseRef.current = onUse;
+
+	useEffect( () => {
+		function callback( event ) {
+			if ( isKeyboardEvent[ type ]( event, character ) ) {
+				onUseRef.current();
+				event.preventDefault();
+			}
+		}
+
+		keyboardShortcuts.current.add( callback );
+		return () => {
+			keyboardShortcuts.current.delete( callback );
+		};
+	}, [ character, type ] );
 
 	return null;
 }

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

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+
+export function useInputEvents( inputEvents ) {
+	return useRefEffect( ( element ) => {
+		function onInput( event ) {
+			for ( const keyboardShortcut of inputEvents.current ) {
+				keyboardShortcut( event );
+			}
+		}
+
+		element.addEventListener( 'input', onInput );
+		return () => {
+			element.removeEventListener( 'input', onInput );
+		};
+	}, [] );
+}

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

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+
+export function useShortcuts( keyboardShortcuts ) {
+	return useRefEffect( ( element ) => {
+		function onKeyDown( event ) {
+			for ( const keyboardShortcut of keyboardShortcuts.current ) {
+				keyboardShortcut( event );
+			}
+		}
+
+		element.addEventListener( 'keydown', onKeyDown );
+		return () => {
+			element.removeEventListener( 'keydown', onKeyDown );
+		};
+	}, [] );
+}