diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js index b02da43dbfe57..40ce2cc74d559 100644 --- a/packages/editor/src/components/index.js +++ b/packages/editor/src/components/index.js @@ -23,6 +23,7 @@ export { RichTextShortcut, RichTextToolbarButton, RichTextInserterItem, + RichTextInputEvent, } 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 59ba6e6e4225c..570d5e40f0a7e 100644 --- a/packages/editor/src/components/rich-text/index.js +++ b/packages/editor/src/components/rich-text/index.js @@ -348,6 +348,21 @@ export class RichText extends Component { return; } + if ( event ) { + const { inputType } = event.nativeEvent; + + // The browser formatted something or tried to insert a list. + // Overwrite it. It will be handled later by the format library if + // needed. + if ( + inputType.indexOf( 'format' ) === 0 || + ( inputType.indexOf( 'insert' ) === 0 && inputType !== 'insertText' ) + ) { + this.applyRecord( this.getRecord() ); + return; + } + } + let { selectedFormat } = this.state; const { formats, text, start, end } = this.patterns.reduce( ( accumlator, transform ) => transform( accumlator ), @@ -1104,3 +1119,4 @@ export default RichTextContainer; export { RichTextShortcut } from './shortcut'; export { RichTextToolbarButton } from './toolbar-button'; export { RichTextInserterItem } from './inserter-list-item'; +export { RichTextInputEvent } 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 new file mode 100644 index 0000000000000..3f7e19d45b75d --- /dev/null +++ b/packages/editor/src/components/rich-text/input-event.js @@ -0,0 +1,30 @@ +/** + * WordPress dependencies + */ +import { Component } from '@wordpress/element'; + +export class RichTextInputEvent extends Component { + constructor() { + super( ...arguments ); + + this.onInput = this.onInput.bind( this ); + } + + onInput( event ) { + if ( event.inputType === this.props.inputType ) { + this.props.onInput(); + } + } + + componentDidMount() { + document.addEventListener( 'input', this.onInput, true ); + } + + componentWillUnmount() { + document.removeEventListener( 'input', this.onInput, true ); + } + + render() { + return null; + } +} diff --git a/packages/format-library/src/bold/index.js b/packages/format-library/src/bold/index.js index dd236edf66798..910c59a2085e2 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 } from '@wordpress/editor'; +import { RichTextToolbarButton, RichTextShortcut, RichTextInputEvent } from '@wordpress/editor'; const name = 'core/bold'; @@ -32,6 +32,10 @@ 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 3677c6e82acc9..30bf72acd5778 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 } from '@wordpress/editor'; +import { RichTextToolbarButton, RichTextShortcut, RichTextInputEvent } from '@wordpress/editor'; const name = 'core/italic'; @@ -32,6 +32,10 @@ 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 3aee9cf943877..bab50a0452eb4 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 } from '@wordpress/editor'; +import { RichTextShortcut, RichTextInputEvent } from '@wordpress/editor'; const name = 'core/underline'; @@ -34,6 +34,10 @@ export const underline = { character="u" onUse={ onToggle } /> + ); },