RichText: Fix browser formatting buttons (#13833)

* RichText: Fix browser formatting buttons

* Simplify

* componentDidMount instead of componentWillMount

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';

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';

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;
+	}
+}

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"
 				/>
+				<RichTextInputEvent
+					inputType="formatBold"
+					onInput={ onToggle }
+				/>
 			</Fragment>
 		);
 	},

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"
 				/>
+				<RichTextInputEvent
+					inputType="formatItalic"
+					onInput={ onToggle }
+				/>
 			</Fragment>
 		);
 	},

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 }
 				/>
+				<RichTextInputEvent
+					inputType="formatUnderline"
+					onInput={ onToggle }
+				/>
 			</Fragment>
 		);
 	},