RichText: only ignore input types that insert HTML (#13914)

* RichText: only ignore input types that insert HTML * Mark RichTextInputEvent as unstable * Use Set
WordPress · Mar 6, 2019 · 58dfbd9 · 58dfbd9
1 parent 94ed2cc
commit 58dfbd9
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 11 deletions.
diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js
@@ -23,7 +23,7 @@ export {
 	RichTextShortcut,
 	RichTextToolbarButton,
 	RichTextInserterItem,
-	RichTextInputEvent,
+	UnstableRichTextInputEvent,
 } from './rich-text';
 export { default as ServerSideRender } from './server-side-render';
 export { default as MediaPlaceholder } from './media-placeholder';

diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js
@@ -69,6 +69,21 @@ import { RemoveBrowserShortcuts } from './remove-browser-shortcuts';
 
 const { getSelection } = window;
 
+/**
+ * All inserting input types that would insert HTML into the DOM.
+ *
+ * @see  https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes
+ *
+ * @type {Set}
+ */
+const INSERTION_INPUT_TYPES_TO_IGNORE = new Set( [
+	'insertParagraph',
+	'insertOrderedList',
+	'insertUnorderedList',
+	'insertHorizontalRule',
+	'insertLink',
+] );
+
 export class RichText extends Component {
 	constructor( { value, onReplace, multiline } ) {
 		super( ...arguments );
@@ -354,12 +369,12 @@ export class RichText extends Component {
 		if ( event ) {
 			const { inputType } = event.nativeEvent;
 
-			// The browser formatted something or tried to insert a list.
+			// The browser formatted something or tried to insert HTML.
 			// Overwrite it. It will be handled later by the format library if
 			// needed.
 			if (
 				inputType.indexOf( 'format' ) === 0 ||
-				( inputType.indexOf( 'insert' ) === 0 && inputType !== 'insertText' )
+				INSERTION_INPUT_TYPES_TO_IGNORE.has( inputType )
 			) {
 				this.applyRecord( this.getRecord() );
 				return;
@@ -1150,4 +1165,4 @@ export default RichTextContainer;
 export { RichTextShortcut } from './shortcut';
 export { RichTextToolbarButton } from './toolbar-button';
 export { RichTextInserterItem } from './inserter-list-item';
-export { RichTextInputEvent } from './input-event';
+export { UnstableRichTextInputEvent } from './input-event';
diff --git a/packages/editor/src/components/rich-text/input-event.js b/packages/editor/src/components/rich-text/input-event.js
@@ -3,7 +3,7 @@
  */
 import { Component } from '@wordpress/element';
 
-export class RichTextInputEvent extends Component {
+export class UnstableRichTextInputEvent extends Component {
 	constructor() {
 		super( ...arguments );
 

diff --git a/packages/format-library/src/bold/index.js b/packages/format-library/src/bold/index.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import { toggleFormat } from '@wordpress/rich-text';
-import { RichTextToolbarButton, RichTextShortcut, RichTextInputEvent } from '@wordpress/editor';
+import { RichTextToolbarButton, RichTextShortcut, UnstableRichTextInputEvent } from '@wordpress/editor';
 
 const name = 'core/bold';
 
@@ -32,7 +32,7 @@ export const bold = {
 					shortcutType="primary"
 					shortcutCharacter="b"
 				/>
-				<RichTextInputEvent
+				<UnstableRichTextInputEvent
 					inputType="formatBold"
 					onInput={ onToggle }
 				/>

diff --git a/packages/format-library/src/italic/index.js b/packages/format-library/src/italic/index.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import { toggleFormat } from '@wordpress/rich-text';
-import { RichTextToolbarButton, RichTextShortcut, RichTextInputEvent } from '@wordpress/editor';
+import { RichTextToolbarButton, RichTextShortcut, UnstableRichTextInputEvent } from '@wordpress/editor';
 
 const name = 'core/italic';
 
@@ -32,7 +32,7 @@ export const italic = {
 					shortcutType="primary"
 					shortcutCharacter="i"
 				/>
-				<RichTextInputEvent
+				<UnstableRichTextInputEvent
 					inputType="formatItalic"
 					onInput={ onToggle }
 				/>

diff --git a/packages/format-library/src/underline/index.js b/packages/format-library/src/underline/index.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import { toggleFormat } from '@wordpress/rich-text';
-import { RichTextShortcut, RichTextInputEvent } from '@wordpress/editor';
+import { RichTextShortcut, UnstableRichTextInputEvent } from '@wordpress/editor';
 
 const name = 'core/underline';
 
@@ -34,7 +34,7 @@ export const underline = {
 					character="u"
 					onUse={ onToggle }
 				/>
-				<RichTextInputEvent
+				<UnstableRichTextInputEvent
 					inputType="formatUnderline"
 					onInput={ onToggle }
 				/>