From e6ac7ee66ec7e27eb12d9926eb21d3988457606c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20Van=C2=A0Durpe?= <iseulde@automattic.com>
Date: Mon, 18 Feb 2019 01:50:51 +0100
Subject: [PATCH] RichText: Fix browser formatting buttons (#13833)

* RichText: Fix browser formatting buttons

* Simplify

* componentDidMount instead of componentWillMount
---
 packages/editor/src/components/index.js       |  1 +
 .../editor/src/components/rich-text/index.js  | 16 ++++++++++
 .../src/components/rich-text/input-event.js   | 30 +++++++++++++++++++
 packages/format-library/src/bold/index.js     |  6 +++-
 packages/format-library/src/italic/index.js   |  6 +++-
 .../format-library/src/underline/index.js     |  6 +++-
 6 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 packages/editor/src/components/rich-text/input-event.js

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