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 58e9acbde686a..6db85925c595e 100644
--- a/packages/editor/src/components/rich-text/index.js
+++ b/packages/editor/src/components/rich-text/index.js
@@ -350,6 +350,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 ),
@@ -1106,3 +1121,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 }
/>
+
);
},