RichText: Fix browser formatting buttons #13833
Conversation
ellatrix
requested review from
aduth,
gziolo,
jorgefilipecosta,
noisysocks,
talldan and
youknowriad
as code owners
ellatrix
added
[Type] Bug
There was a problem hiding this comment.
I tested this in Safari 12 and confirmed that all of the Touch Bar formatting buttons either work or don't break anything.
Agree that it would be nice to get the Insert List buttons working in a follow-up PR.
The approach makes sense to me, but take my ✅ with a grain of salt as I'm not a RichText expert! 🙂
| */ | ||
| import { Component } from '@wordpress/element'; | ||
|
|
||
| export class RichTextInputEvent extends Component { |
There was a problem hiding this comment.
A unit test for this component could be good.
There was a problem hiding this comment.
Something like this pseudocode:
const onInput = jest.fn();
mount( <RichTextInputEvent inputType="ella-is-cool" onInput={ onInput } /> );
const event = new Event( 'input' );
event.inputType = 'ella-is-cool';
document.dispatchEvent( event );
expect( onInput ).toHaveBeenCalled();I find these sorts of tests don't hurt and sometimes catch silly regressions e.g. typos.
|
|
||
| onInput( event ) { | ||
| if ( event.inputType === this.props.inputType ) { | ||
| this.props.onInput(); |
There was a problem hiding this comment.
Is there a need to preventDefault as well, to ensure it's fully controlled?
There was a problem hiding this comment.
There's not really anything to prevent. The input event happens after the fact.
There was a problem hiding this comment.
There's not really anything to prevent. The
inputevent happens after the fact.
And to that point, an input event is in-fact not cancelable.
* RichText: Fix browser formatting buttons * Simplify * componentDidMount instead of componentWillMount
* RichText: Fix browser formatting buttons * Simplify * componentDidMount instead of componentWillMount
Description
This PR fixes any formatting buttons that are provided by the browser, e.g. formatting buttons in Safari and iOS Safari.
What's the problem at the moment?
<b>tags.RichText, such as the align and list buttons. They could be linked at a block level though. I've prevented them from doing anything, but ideally they should work at the block level (maybe a future PR). I've found no way to remove the buttons.ctrl+uon a Mac, a shortcut that wasn't overridden by us.The most reliable solution I've found is checking the input event for
inputType, and then resetting the DOM. After this a format in the format library may useRichTextInputEventto do something based on that information.How has this been tested?
Screenshots
Types of changes
Checklist: