From 58dfbd9ca9fe0355d2fd948337fc182d83fdf21b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20Van=C2=A0Durpe?= Date: Wed, 20 Feb 2019 03:35:56 +0100 Subject: [PATCH] RichText: only ignore input types that insert HTML (#13914) * RichText: only ignore input types that insert HTML * Mark RichTextInputEvent as unstable * Use Set --- packages/editor/src/components/index.js | 2 +- .../editor/src/components/rich-text/index.js | 21 ++++++++++++++++--- .../src/components/rich-text/input-event.js | 2 +- packages/format-library/src/bold/index.js | 4 ++-- packages/format-library/src/italic/index.js | 4 ++-- .../format-library/src/underline/index.js | 4 ++-- 6 files changed, 26 insertions(+), 11 deletions(-) diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js index 40ce2cc74d5599..94cadfc7ddc243 100644 --- 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 index 8029dfa0a640d4..1d6c353448d9ef 100644 --- 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 index 3f7e19d45b75d1..e77a57cb898e76 100644 --- 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 index 910c59a2085e26..15c64261fbfded 100644 --- 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" /> - diff --git a/packages/format-library/src/italic/index.js b/packages/format-library/src/italic/index.js index 30bf72acd5778c..1acadaf6f48267 100644 --- 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" /> - diff --git a/packages/format-library/src/underline/index.js b/packages/format-library/src/underline/index.js index bab50a0452eb45..0777e83e1f7178 100644 --- 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 } /> -