diff --git a/packages/rich-text/src/component/editable.js b/packages/rich-text/src/component/editable.js index c4c7cb453acd84..e108af6d4bfc63 100644 --- a/packages/rich-text/src/component/editable.js +++ b/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() { diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js index 880549ab617ea6..62d6dac3f02ce6 100644 --- a/packages/rich-text/src/component/index.js +++ b/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; }