RichText: fix backspace for IE

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

@@ -7,87 +7,12 @@ import { isEqual } from 'lodash';
  * WordPress dependencies
  */
 import { Component, createElement } from '@wordpress/element';
-import { BACKSPACE, DELETE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import { diffAriaProps } from './aria';
 
-/**
- * Browser dependencies
- */
-
-const { userAgent } = window.navigator;
-
-/**
- * Applies a fix that provides `input` events for contenteditable in Internet Explorer.
- *
- * @param {Element} editorNode The root editor node.
- *
- * @return {Function} A function to remove the fix (for cleanup).
- */
-function applyInternetExplorerInputFix( editorNode ) {
-	/**
-	 * Dispatches `input` events in response to `textinput` events.
-	 *
-	 * IE provides a `textinput` event that is similar to an `input` event,
-	 * and we use it to manually dispatch an `input` event.
-	 * `textinput` is dispatched for text entry but for not deletions.
-	 *
-	 * @param {Event} textInputEvent An Internet Explorer `textinput` event.
-	 */
-	function mapTextInputEvent( textInputEvent ) {
-		textInputEvent.stopImmediatePropagation();
-
-		const inputEvent = document.createEvent( 'Event' );
-		inputEvent.initEvent( 'input', true, false );
-		inputEvent.data = textInputEvent.data;
-		textInputEvent.target.dispatchEvent( inputEvent );
-	}
-
-	/**
-	 * Dispatches `input` events in response to Delete and Backspace keyup.
-	 *
-	 * It would be better dispatch an `input` event after each deleting
-	 * `keydown` because the DOM is updated after each, but it is challenging
-	 * to determine the right time to dispatch `input` since propagation of
-	 * `keydown` can be stopped at any point.
-	 *
-	 * It's easier to listen for `keyup` in the capture phase and dispatch
-	 * `input` before `keyup` propagates further. It's not perfect, but should
-	 * be good enough.
-	 *
-	 * @param {KeyboardEvent} keyUp
-	 * @param {Node}          keyUp.target  The event target.
-	 * @param {number}        keyUp.keyCode The key code.
-	 */
-	function mapDeletionKeyUpEvents( { target, keyCode } ) {
-		const isDeletion = BACKSPACE === keyCode || DELETE === keyCode;
-
-		if ( isDeletion && editorNode.contains( target ) ) {
-			const inputEvent = document.createEvent( 'Event' );
-			inputEvent.initEvent( 'input', true, false );
-			inputEvent.data = null;
-			target.dispatchEvent( inputEvent );
-		}
-	}
-
-	editorNode.addEventListener( 'textinput', mapTextInputEvent );
-	document.addEventListener( 'keyup', mapDeletionKeyUpEvents, true );
-	return function removeInternetExplorerInputFix() {
-		editorNode.removeEventListener( 'textinput', mapTextInputEvent );
-		document.removeEventListener( 'keyup', mapDeletionKeyUpEvents, true );
-	};
-}
-
-/**
- * Whether or not the user agent is Internet Explorer.
- *
- * @type {boolean}
- */
-const IS_IE = userAgent.indexOf( 'Trident' ) >= 0;
-
 export default class Editable extends Component {
 	constructor() {
 		super();
@@ -136,16 +61,6 @@ export default class Editable extends Component {
 	bindEditorNode( editorNode ) {
 		this.editorNode = editorNode;
 		this.props.setRef( editorNode );
-
-		if ( IS_IE ) {
-			if ( editorNode ) {
-				// Mounting:
-				this.removeInternetExplorerInputFix = applyInternetExplorerInputFix( editorNode );
-			} else {
-				// Unmounting:
-				this.removeInternetExplorerInputFix();
-			}
-		}
 	}
 
 	render() {

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

@@ -418,9 +418,16 @@ class RichText extends Component {
 			return;
 		}
 
-		const { start, end } = this.createRecord();
+		const { start, end, text } = this.createRecord();
 		const value = this.record;
 
+		// Fallback mechanism for IE11, which doesn't support the input event.
+		// Any input results in a selection change.
+		if ( text !== value.text ) {
+			this.onInput();
+			return;
+		}
+
 		if ( start === value.start && end === value.end ) {
 			return;
 		}