From 3a49c4c5e4e748b03e776dc2d773f59a959ac95b Mon Sep 17 00:00:00 2001 From: iseulde Date: Tue, 12 Feb 2019 13:09:57 +0100 Subject: [PATCH 1/3] RichText: Fix browser formatting buttons --- packages/editor/src/components/index.js | 1 + .../editor/src/components/rich-text/index.js | 16 +++++++++++ .../src/components/rich-text/input-event.js | 28 +++++++++++++++++++ packages/format-library/src/bold/index.js | 9 +++++- packages/format-library/src/italic/index.js | 9 +++++- .../format-library/src/underline/index.js | 9 +++++- 6 files changed, 69 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 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..e7d3272b794a7 --- /dev/null +++ b/packages/editor/src/components/rich-text/input-event.js @@ -0,0 +1,28 @@ +/** + * WordPress dependencies + */ +import { Component } from '@wordpress/element'; + +export class RichTextInputEvent extends Component { + constructor() { + super( ...arguments ); + + this.onInput = this.onInput.bind( this ); + } + + onInput( event ) { + this.props.onInput( event ); + } + + componentWillMount() { + 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..44d0e69949f83 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,13 @@ export const bold = { shortcutType="primary" shortcutCharacter="b" /> + { + if ( inputType === 'formatBold' ) { + onToggle(); + } + } } + /> ); }, diff --git a/packages/format-library/src/italic/index.js b/packages/format-library/src/italic/index.js index 3677c6e82acc9..83221cfc67e7e 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,13 @@ export const italic = { shortcutType="primary" shortcutCharacter="i" /> + { + if ( inputType === 'formatItalic' ) { + onToggle(); + } + } } + /> ); }, diff --git a/packages/format-library/src/underline/index.js b/packages/format-library/src/underline/index.js index 3aee9cf943877..080d41bec7e22 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,13 @@ export const underline = { character="u" onUse={ onToggle } /> + { + if ( inputType === 'formatUnderline' ) { + onToggle(); + } + } } + /> ); }, From 69f828d8f1e9134a0dd242a80ef12a31274bc7ea Mon Sep 17 00:00:00 2001 From: iseulde Date: Tue, 12 Feb 2019 13:32:24 +0100 Subject: [PATCH 2/3] Simplify --- packages/editor/src/components/rich-text/input-event.js | 4 +++- packages/format-library/src/bold/index.js | 7 ++----- packages/format-library/src/italic/index.js | 7 ++----- packages/format-library/src/underline/index.js | 7 ++----- 4 files changed, 9 insertions(+), 16 deletions(-) diff --git a/packages/editor/src/components/rich-text/input-event.js b/packages/editor/src/components/rich-text/input-event.js index e7d3272b794a7..04975227e438b 100644 --- a/packages/editor/src/components/rich-text/input-event.js +++ b/packages/editor/src/components/rich-text/input-event.js @@ -11,7 +11,9 @@ export class RichTextInputEvent extends Component { } onInput( event ) { - this.props.onInput( event ); + if ( event.inputType === this.props.inputType ) { + this.props.onInput(); + } } componentWillMount() { diff --git a/packages/format-library/src/bold/index.js b/packages/format-library/src/bold/index.js index 44d0e69949f83..910c59a2085e2 100644 --- a/packages/format-library/src/bold/index.js +++ b/packages/format-library/src/bold/index.js @@ -33,11 +33,8 @@ export const bold = { shortcutCharacter="b" /> { - if ( inputType === 'formatBold' ) { - onToggle(); - } - } } + inputType="formatBold" + onInput={ onToggle } /> ); diff --git a/packages/format-library/src/italic/index.js b/packages/format-library/src/italic/index.js index 83221cfc67e7e..30bf72acd5778 100644 --- a/packages/format-library/src/italic/index.js +++ b/packages/format-library/src/italic/index.js @@ -33,11 +33,8 @@ export const italic = { shortcutCharacter="i" /> { - if ( inputType === 'formatItalic' ) { - onToggle(); - } - } } + inputType="formatItalic" + onInput={ onToggle } /> ); diff --git a/packages/format-library/src/underline/index.js b/packages/format-library/src/underline/index.js index 080d41bec7e22..bab50a0452eb4 100644 --- a/packages/format-library/src/underline/index.js +++ b/packages/format-library/src/underline/index.js @@ -35,11 +35,8 @@ export const underline = { onUse={ onToggle } /> { - if ( inputType === 'formatUnderline' ) { - onToggle(); - } - } } + inputType="formatUnderline" + onInput={ onToggle } /> ); From cef8046f250bb34cf598dee7f6467fa8d435e9e0 Mon Sep 17 00:00:00 2001 From: iseulde Date: Fri, 15 Feb 2019 11:12:00 +0100 Subject: [PATCH 3/3] componentDidMount instead of componentWillMount --- packages/editor/src/components/rich-text/input-event.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/rich-text/input-event.js b/packages/editor/src/components/rich-text/input-event.js index 04975227e438b..3f7e19d45b75d 100644 --- a/packages/editor/src/components/rich-text/input-event.js +++ b/packages/editor/src/components/rich-text/input-event.js @@ -16,7 +16,7 @@ export class RichTextInputEvent extends Component { } } - componentWillMount() { + componentDidMount() { document.addEventListener( 'input', this.onInput, true ); }