RichText: fix buggy enter/delete behaviour #11287

ellatrix · 2018-10-31T08:13:27Z

Description

In master, keep enter pressed in a paragraph, and observe blocks with too many BR elements, or nested paragraph elements, or BR elements around existing text. This is caused by attaching the keydown handler too late (during TinyMCE setup), resulting in default browser behaviour executing. The solution is to attach handler on the content editable element with React as soon as the element is created.

Also removes waitForRichTextInitialization entirely from all tests, because the contentEditable area is immediately available for input.

How has this been tested?

When keeping enter pressed in a paragraph, it should create a bunch a clean, empty paragraphs.

Screenshots

Types of changes

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.

talldan

I've added a few review comments, but it'd be nice to have someone else more familiar with these files also have a look.

Can confirm it solved #11348, so would be good to get this merged fairly soon.

talldan · 2018-11-01T07:55:31Z

packages/editor/src/components/rich-text/index.js

-					// registered by TinyMCE) from also handling this event.
-					event.stopImmediatePropagation();
-				}
+			if ( this.onDeleteKeyDown( event ) ) {


I found it a bit misleading that there's a function called 'onDeleteKeyDown' that handles backspace and delete, but then there's also logic below this that handles backspace and delete. The control flow could be tidied up a bit to avoid having a function with side-effects within an if statement.

Yes. I mostly left this as is to minimise the diff. Perhaps better to just move it as well.

I think I might leave it as-is, because it's already a diff-mess moving other things around and not the easiest to review. We can consolidate these pieces separately.

talldan · 2018-11-01T07:57:06Z

packages/editor/src/components/rich-text/index.js

 	 *
-	 * @param {number} keyCode The key code that has been pressed on the keyboard.
+	 * @param {number} $1.keyCode The key code that has been pressed on the


$1.keyCode could just be event.keyCode

Why? event is not named anywhere. $1 indicates the first argument.

talldan · 2018-11-01T08:17:28Z

packages/editor/src/components/rich-text/tinymce.js

@@ -223,6 +247,59 @@ export default class TinyMCE extends Component {
 		}
 	}

+	onKeyDown( event ) {


Could be nice to name this onEditorKeyDown to further differentiate it from the onKeyDown prop.

youknowriad · 2018-11-01T08:42:57Z

test/e2e/support/utils.js

- * @return {Promise} Promise resolving once RichText is initialized, or is
- *                   determined to not be a container of the active element.
- */
-export async function waitForRichTextInitialization() {


youknowriad

LGTM 👍 Works for me. I admit the code changes are a bit obscure but more because this area of the code is not the easiest to follow.

I notice what we can consider a bug or at least a difference in behavior between current formats and previous ones, when you put the caret in the middle of a word and click "bold", it used to make the whole word "bold", not it does nothing.

ellatrix · 2018-11-01T09:05:51Z

I notice what we can consider a bug or at least a difference in behavior between current formats and previous ones, when you put the caret in the middle of a word and click "bold", it used to make the whole word "bold", not it does nothing.

Yes, it's been like this since the rich text value merge. We can polish this, it's been brought up to me by others. See e.g. #11065 (comment). I don't consider this a bug, but just a difference in behaviour with the new value, it's a bit obscure to me when exactly it should behave how. This can be easily added though, we can detect if the caret is in a word, then make everything around it bold until we hit a non word character. Also note that e.g. Google Docs behaves the same as current master: nothing happens if nothing is selected. Let's discuss separately.

I admit the code changes are a bit obscure but more because this area of the code is not the easiest to follow.

If there's anything obscure left, please let me know, maybe I can clarify the changes I tried to keep the diff to a minimum, but it does require some logic (that undoes TinyMCE behaviour) to be moved from RichText to TinyMCE.

youknowriad · 2018-11-01T09:16:08Z

@iseulde I actually think the code is a bit clearer this way, so yes, let's ship. It's more global to RichText where's it's not always obvious how all these methods work together. (For instance, what does createRecord and applyRecord do, they probably need some JSDocs). Also sometimes event handlers do very different things at the same time depending on the event, this is made harder because of how we separate code in React in general. I expect it will be better later (probably with hooks and making TinyMCE less important), so nothing really to worry about now.

ellatrix · 2018-11-01T09:18:32Z

Yeah, I agree we should generally improve the readability of the RichText component in general. We could attempt this in a separate PR without making any other changes. Thanks for the review!

…rnmobile/port-quote-block-step-1 * 'master' of https://github.com/WordPress/gutenberg: (22 commits) Add removed periods to block descriptions. (#11367) Remove findDOMNode usage from the inserter (#11363) Remove deprecated componentWillReceiveProps from TinyMCE component (#11368) Create file blocks when dropping multiple files at once (#11297) Try avoiding the deprecated findDOMNode API from DropZone Provider (#11168) Fix: make meta+A behaviour of selecting all blocks work on safari and firefox. (#8180) Remove _wpGutenbergCodeEditorSettings and wp.codeEditor assets (#11342) Remove the Cloudflare warning (#11350) Image Block: Use source_url for media file link (#11254) Enhance styling of nextpage block using the Hr element (#11354) Embed block refactor and tidy (#10958) Nonce Middleware: Wrap the nonce middleware function into it's own function that isn't regenerated on every API request. (#11347) Fix RTL block alignments (#11293) RichText: fix buggy enter/delete behaviour (#11287) Remove code coverage setup (#11198) Parser: Runs all parser implementations against the same tests (#11320) Stop trying to autosave when title and classic block content both are empty. (#10404) Fix "Mac OS" typo + use fancy quotes consistently (#11310) Update documentation link paths (#11324) Editor: Reshape blocks state under own key (#11315) ... # Conflicts: # gutenberg-mobile

* Fix buggy enter/delete behaviour in RichText * Fix setting selection on merge when value stays the same * Re-add horizontal navigation comment

Fix buggy enter/delete behaviour in RichText

3f784f6

ellatrix mentioned this pull request Oct 31, 2018

Fix buggy behaviour on fast enter to split blocks #10328

Closed

4 tasks

ellatrix added [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Status] In Progress Tracking issues with work in progress labels Oct 31, 2018

ellatrix modified the milestones: 4.3, WordPress 5.0 Oct 31, 2018

Fix setting selection on merge when value stays the same

36837e3

ellatrix requested review from youknowriad and a team October 31, 2018 08:54

ellatrix removed the [Status] In Progress Tracking issues with work in progress label Oct 31, 2018

ellatrix modified the milestones: WordPress 5.0, 4.3 Oct 31, 2018

ellatrix added the [Type] Bug An existing feature does not function as intended label Oct 31, 2018

This was referenced Oct 31, 2018

macOS Firefox: "Unresponsive" keyboard when going back from next block using keyboard #9905

Closed

Double Backspace in Empty First Paragraph Triggers Back in Firefox #6961

Closed

Re-add horizontal navigation comment

8202cca

ellatrix requested a review from aduth October 31, 2018 12:21

ellatrix modified the milestones: 4.3, 4.2 Oct 31, 2018

This was referenced Nov 1, 2018

Delay TinyMCE initialisation to focus #10723

Merged

Table Block: table contents are not getting saved #11348

Closed

talldan reviewed Nov 1, 2018

View reviewed changes

youknowriad reviewed Nov 1, 2018

View reviewed changes

youknowriad approved these changes Nov 1, 2018

View reviewed changes

ellatrix merged commit a38c816 into master Nov 1, 2018

ellatrix deleted the try/rich-text-keyboard-events branch November 1, 2018 09:21

youknowriad mentioned this pull request Nov 1, 2018

Sometimes caret does not move to new paragraph on enter #10484

Closed

ellatrix mentioned this pull request Nov 1, 2018

RichText: Revise onSplit prop #11005

Closed

4 tasks

youknowriad pushed a commit that referenced this pull request Nov 6, 2018

RichText: fix buggy enter/delete behaviour (#11287)

7d834d6

* Fix buggy enter/delete behaviour in RichText * Fix setting selection on merge when value stays the same * Re-add horizontal navigation comment

ellatrix mentioned this pull request Nov 8, 2018

Restore native backspace behaviour #11627

Merged

4 tasks

designsimply mentioned this pull request Nov 8, 2018

Extensive articles with over 1700 words and various blocks make Gutenberg very slow. #10418

Closed

mmtr mentioned this pull request Nov 12, 2018

Gutenberg: duplicated content when content is bolded and backspace Automattic/wp-calypso#28432

Closed

ellatrix mentioned this pull request Nov 16, 2018

RichText: remove iOS scroll adjusting #11971

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RichText: fix buggy enter/delete behaviour #11287

RichText: fix buggy enter/delete behaviour #11287

ellatrix commented Oct 31, 2018 •

edited

Loading

talldan left a comment

talldan Nov 1, 2018 •

edited

Loading

ellatrix Nov 1, 2018

ellatrix Nov 1, 2018

talldan Nov 1, 2018

ellatrix Nov 1, 2018

talldan Nov 1, 2018

youknowriad Nov 1, 2018

youknowriad left a comment

ellatrix commented Nov 1, 2018 •

edited

Loading

youknowriad commented Nov 1, 2018

ellatrix commented Nov 1, 2018

RichText: fix buggy enter/delete behaviour #11287

RichText: fix buggy enter/delete behaviour #11287

Conversation

ellatrix commented Oct 31, 2018 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

talldan left a comment

Choose a reason for hiding this comment

talldan Nov 1, 2018 • edited Loading

Choose a reason for hiding this comment

ellatrix Nov 1, 2018

Choose a reason for hiding this comment

ellatrix Nov 1, 2018

Choose a reason for hiding this comment

talldan Nov 1, 2018

Choose a reason for hiding this comment

ellatrix Nov 1, 2018

Choose a reason for hiding this comment

talldan Nov 1, 2018

Choose a reason for hiding this comment

youknowriad Nov 1, 2018

Choose a reason for hiding this comment

youknowriad left a comment

Choose a reason for hiding this comment

ellatrix commented Nov 1, 2018 • edited Loading

youknowriad commented Nov 1, 2018

ellatrix commented Nov 1, 2018

ellatrix commented Oct 31, 2018 •

edited

Loading

talldan Nov 1, 2018 •

edited

Loading

ellatrix commented Nov 1, 2018 •

edited

Loading