Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Android] Fix Gboard enter detection in EnterPressedWatcher #30368

Closed
wants to merge 6 commits into from

Conversation

mkevins
Copy link
Contributor

@mkevins mkevins commented Mar 30, 2021

Fixes: wordpress-mobile/gutenberg-mobile#3316

Description

This PR addresses the Gboard issue by searching the CharSequence for a newline, instead of only checking the first character of the text in onTextChanged. If it finds a newline, its offset is then used for further processing. If the newline is the first character, the offset will be 0, so previous (non-gboard) behavior will be the same as before. This is a more general solution.

How has this been tested?

This should be tested both with and without gboard keyboard via this suite of writing flow tests.

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

Note: This is probably not enough, since this only addresses when the
caret is at the end of the word, but Gboard may exhibit the unusual
behavior also when the caret is in the middle or start of the word.
@mkevins mkevins added [Status] In Progress Tracking issues with work in progress [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) labels Mar 30, 2021
@github-actions
Copy link

github-actions bot commented Mar 30, 2021

Size Change: +5.26 kB (0%)

Total Size: 1.43 MB

Filename Size Change
build/annotations/index.js 3.79 kB +3 B (0%)
build/autop/index.js 2.82 kB +7 B (0%)
build/blob/index.js 665 B +1 B (0%)
build/block-directory/index.js 8.63 kB +1 B (0%)
build/block-editor/index.js 127 kB +6 B (0%)
build/block-editor/style-rtl.css 12.4 kB -17 B (0%)
build/block-editor/style.css 12.4 kB -16 B (0%)
build/block-library/blocks/button/style-rtl.css 503 B +14 B (+3%)
build/block-library/blocks/button/style.css 503 B +15 B (+3%)
build/block-library/blocks/cover/style-rtl.css 1.23 kB -11 B (-1%)
build/block-library/blocks/cover/style.css 1.23 kB -12 B (-1%)
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB -6 B (0%)
build/block-library/blocks/freeform/editor.css 2.44 kB -6 B (0%)
build/block-library/blocks/gallery/style-rtl.css 1.09 kB -14 B (-1%)
build/block-library/blocks/gallery/style.css 1.09 kB -15 B (-1%)
build/block-library/blocks/navigation/editor-rtl.css 1.24 kB +84 B (+7%) 🔍
build/block-library/blocks/navigation/editor.css 1.24 kB +83 B (+7%) 🔍
build/block-library/blocks/page-list/editor-rtl.css 239 B +69 B (+41%) 🚨
build/block-library/blocks/page-list/editor.css 240 B +70 B (+41%) 🚨
build/block-library/blocks/site-logo/editor-rtl.css 438 B +237 B (+118%) 🆘
build/block-library/blocks/site-logo/editor.css 438 B +237 B (+118%) 🆘
build/block-library/blocks/site-logo/style-rtl.css 150 B +35 B (+30%) 🚨
build/block-library/blocks/site-logo/style.css 150 B +35 B (+30%) 🚨
build/block-library/blocks/video/style-rtl.css 173 B -14 B (-7%)
build/block-library/blocks/video/style.css 173 B -14 B (-7%)
build/block-library/editor-rtl.css 9.76 kB +215 B (+2%)
build/block-library/editor.css 9.75 kB +215 B (+2%)
build/block-library/index.js 153 kB +965 B (+1%)
build/block-library/style-rtl.css 9.38 kB +14 B (0%)
build/block-library/style.css 9.38 kB +14 B (0%)
build/block-serialization-default-parser/index.js 1.87 kB -4 B (0%)
build/blocks/index.js 48.5 kB +95 B (0%)
build/components/index.js 286 kB +2.11 kB (+1%)
build/components/style-rtl.css 16.3 kB +68 B (0%)
build/components/style.css 16.3 kB +69 B (0%)
build/compose/index.js 11.2 kB -1 B (0%)
build/core-data/index.js 17.1 kB +132 B (+1%)
build/customize-widgets/index.js 7.09 kB -187 B (-3%)
build/customize-widgets/style-rtl.css 630 B -46 B (-7%)
build/customize-widgets/style.css 631 B -46 B (-7%)
build/data-controls/index.js 839 B +4 B (0%)
build/data/index.js 8.88 kB -8 B (0%)
build/date/index.js 31.9 kB +5 B (0%)
build/dom/index.js 5.17 kB -1 B (0%)
build/edit-navigation/index.js 17 kB -6 B (0%)
build/edit-navigation/style-rtl.css 2.86 kB -4 B (0%)
build/edit-navigation/style.css 2.86 kB -5 B (0%)
build/edit-post/index.js 307 kB +723 B (0%)
build/edit-post/style-rtl.css 6.94 kB +27 B (0%)
build/edit-post/style.css 6.93 kB +29 B (0%)
build/edit-site/index.js 28 kB -32 B (0%)
build/edit-site/style-rtl.css 4.61 kB -4 B (0%)
build/edit-site/style.css 4.6 kB -5 B (0%)
build/edit-widgets/index.js 15.7 kB -8 B (0%)
build/edit-widgets/style-rtl.css 2.97 kB -4 B (0%)
build/edit-widgets/style.css 2.98 kB -4 B (0%)
build/editor/index.js 42.4 kB +239 B (+1%)
build/editor/style-rtl.css 3.92 kB -36 B (-1%)
build/editor/style.css 3.92 kB -38 B (-1%)
build/element/index.js 4.62 kB -2 B (0%)
build/format-library/index.js 6.76 kB +3 B (0%)
build/hooks/index.js 2.28 kB +1 B (0%)
build/html-entities/index.js 623 B +1 B (0%)
build/i18n/index.js 4.01 kB -2 B (0%)
build/keyboard-shortcuts/index.js 2.53 kB -1 B (0%)
build/keycodes/index.js 1.96 kB +2 B (0%)
build/media-utils/index.js 5.38 kB -1 B (0%)
build/notices/index.js 1.86 kB +1 B (0%)
build/nux/index.js 3.42 kB -2 B (0%)
build/plugins/index.js 2.95 kB +2 B (0%)
build/priority-queue/index.js 790 B -1 B (0%)
build/react-i18n/index.js 1.46 kB -1 B (0%)
build/redux-routine/index.js 2.84 kB +1 B (0%)
build/reusable-blocks/index.js 3.79 kB +2 B (0%)
build/server-side-render/index.js 2.6 kB +2 B (0%)
build/shortcode/index.js 1.7 kB -2 B (0%)
build/token-list/index.js 1.27 kB -1 B (0%)
build/url/index.js 3.02 kB -1 B (0%)
build/viewport/index.js 1.86 kB -1 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/api-fetch/index.js 3.41 kB 0 B
build/block-directory/style-rtl.css 1 kB 0 B
build/block-directory/style.css 1.01 kB 0 B
build/block-library/blocks/archives/editor-rtl.css 61 B 0 B
build/block-library/blocks/archives/editor.css 60 B 0 B
build/block-library/blocks/audio/editor-rtl.css 58 B 0 B
build/block-library/blocks/audio/editor.css 58 B 0 B
build/block-library/blocks/audio/style-rtl.css 112 B 0 B
build/block-library/blocks/audio/style.css 112 B 0 B
build/block-library/blocks/block/editor-rtl.css 161 B 0 B
build/block-library/blocks/block/editor.css 161 B 0 B
build/block-library/blocks/button/editor-rtl.css 475 B 0 B
build/block-library/blocks/button/editor.css 474 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 315 B 0 B
build/block-library/blocks/buttons/editor.css 315 B 0 B
build/block-library/blocks/buttons/style-rtl.css 364 B 0 B
build/block-library/blocks/buttons/style.css 363 B 0 B
build/block-library/blocks/calendar/style-rtl.css 208 B 0 B
build/block-library/blocks/calendar/style.css 208 B 0 B
build/block-library/blocks/categories/editor-rtl.css 84 B 0 B
build/block-library/blocks/categories/editor.css 83 B 0 B
build/block-library/blocks/categories/style-rtl.css 79 B 0 B
build/block-library/blocks/categories/style.css 79 B 0 B
build/block-library/blocks/code/style-rtl.css 90 B 0 B
build/block-library/blocks/code/style.css 90 B 0 B
build/block-library/blocks/columns/editor-rtl.css 190 B 0 B
build/block-library/blocks/columns/editor.css 190 B 0 B
build/block-library/blocks/columns/style-rtl.css 436 B 0 B
build/block-library/blocks/columns/style.css 435 B 0 B
build/block-library/blocks/cover/editor-rtl.css 605 B 0 B
build/block-library/blocks/cover/editor.css 605 B 0 B
build/block-library/blocks/embed/editor-rtl.css 486 B 0 B
build/block-library/blocks/embed/editor.css 486 B 0 B
build/block-library/blocks/embed/style-rtl.css 401 B 0 B
build/block-library/blocks/embed/style.css 400 B 0 B
build/block-library/blocks/file/editor-rtl.css 175 B 0 B
build/block-library/blocks/file/editor.css 174 B 0 B
build/block-library/blocks/file/style-rtl.css 248 B 0 B
build/block-library/blocks/file/style.css 248 B 0 B
build/block-library/blocks/gallery/editor-rtl.css 704 B 0 B
build/block-library/blocks/gallery/editor.css 705 B 0 B
build/block-library/blocks/group/editor-rtl.css 160 B 0 B
build/block-library/blocks/group/editor.css 160 B 0 B
build/block-library/blocks/group/style-rtl.css 57 B 0 B
build/block-library/blocks/group/style.css 57 B 0 B
build/block-library/blocks/heading/editor-rtl.css 129 B 0 B
build/block-library/blocks/heading/editor.css 129 B 0 B
build/block-library/blocks/heading/style-rtl.css 76 B 0 B
build/block-library/blocks/heading/style.css 76 B 0 B
build/block-library/blocks/html/editor-rtl.css 281 B 0 B
build/block-library/blocks/html/editor.css 281 B 0 B
build/block-library/blocks/image/editor-rtl.css 717 B 0 B
build/block-library/blocks/image/editor.css 716 B 0 B
build/block-library/blocks/image/style-rtl.css 476 B 0 B
build/block-library/blocks/image/style.css 478 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 281 B 0 B
build/block-library/blocks/latest-comments/style.css 282 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B 0 B
build/block-library/blocks/latest-posts/editor.css 137 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 523 B 0 B
build/block-library/blocks/latest-posts/style.css 522 B 0 B
build/block-library/blocks/legacy-widget/editor-rtl.css 398 B 0 B
build/block-library/blocks/legacy-widget/editor.css 399 B 0 B
build/block-library/blocks/list/style-rtl.css 63 B 0 B
build/block-library/blocks/list/style.css 63 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 191 B 0 B
build/block-library/blocks/media-text/editor.css 191 B 0 B
build/block-library/blocks/media-text/style-rtl.css 535 B 0 B
build/block-library/blocks/media-text/style.css 532 B 0 B
build/block-library/blocks/more/editor-rtl.css 434 B 0 B
build/block-library/blocks/more/editor.css 434 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 597 B 0 B
build/block-library/blocks/navigation-link/editor.css 597 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 1.07 kB 0 B
build/block-library/blocks/navigation-link/style.css 1.07 kB 0 B
build/block-library/blocks/navigation/style-rtl.css 204 B 0 B
build/block-library/blocks/navigation/style.css 205 B 0 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B 0 B
build/block-library/blocks/nextpage/editor.css 395 B 0 B
build/block-library/blocks/page-list/style-rtl.css 167 B 0 B
build/block-library/blocks/page-list/style.css 167 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B 0 B
build/block-library/blocks/paragraph/editor.css 157 B 0 B
build/block-library/blocks/paragraph/style-rtl.css 247 B 0 B
build/block-library/blocks/paragraph/style.css 248 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 209 B 0 B
build/block-library/blocks/post-author/editor.css 209 B 0 B
build/block-library/blocks/post-author/style-rtl.css 183 B 0 B
build/block-library/blocks/post-author/style.css 184 B 0 B
build/block-library/blocks/post-comments-form/style-rtl.css 250 B 0 B
build/block-library/blocks/post-comments-form/style.css 250 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 139 B 0 B
build/block-library/blocks/post-content/editor.css 139 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B 0 B
build/block-library/blocks/post-excerpt/editor.css 73 B 0 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B 0 B
build/block-library/blocks/post-excerpt/style.css 69 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 338 B 0 B
build/block-library/blocks/post-featured-image/editor.css 338 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 100 B 0 B
build/block-library/blocks/post-featured-image/style.css 100 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 103 B 0 B
build/block-library/blocks/preformatted/style.css 103 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 183 B 0 B
build/block-library/blocks/pullquote/editor.css 183 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 318 B 0 B
build/block-library/blocks/pullquote/style.css 318 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 83 B 0 B
build/block-library/blocks/query-loop/editor.css 82 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 315 B 0 B
build/block-library/blocks/query-loop/style.css 317 B 0 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B 0 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B 0 B
build/block-library/blocks/query-pagination/editor-rtl.css 270 B 0 B
build/block-library/blocks/query-pagination/editor.css 262 B 0 B
build/block-library/blocks/query-pagination/style-rtl.css 168 B 0 B
build/block-library/blocks/query-pagination/style.css 168 B 0 B
build/block-library/blocks/query-title/editor-rtl.css 86 B 0 B
build/block-library/blocks/query-title/editor.css 86 B 0 B
build/block-library/blocks/query/editor-rtl.css 795 B 0 B
build/block-library/blocks/query/editor.css 794 B 0 B
build/block-library/blocks/quote/style-rtl.css 169 B 0 B
build/block-library/blocks/quote/style.css 169 B 0 B
build/block-library/blocks/rss/editor-rtl.css 201 B 0 B
build/block-library/blocks/rss/editor.css 202 B 0 B
build/block-library/blocks/rss/style-rtl.css 290 B 0 B
build/block-library/blocks/rss/style.css 290 B 0 B
build/block-library/blocks/search/editor-rtl.css 189 B 0 B
build/block-library/blocks/search/editor.css 189 B 0 B
build/block-library/blocks/search/style-rtl.css 359 B 0 B
build/block-library/blocks/search/style.css 362 B 0 B
build/block-library/blocks/separator/editor-rtl.css 99 B 0 B
build/block-library/blocks/separator/editor.css 99 B 0 B
build/block-library/blocks/separator/style-rtl.css 251 B 0 B
build/block-library/blocks/separator/style.css 251 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 512 B 0 B
build/block-library/blocks/shortcode/editor.css 512 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 164 B 0 B
build/block-library/blocks/social-link/editor.css 165 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 776 B 0 B
build/block-library/blocks/social-links/editor.css 776 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB 0 B
build/block-library/blocks/social-links/style.css 1.33 kB 0 B
build/block-library/blocks/spacer/editor-rtl.css 308 B 0 B
build/block-library/blocks/spacer/editor.css 308 B 0 B
build/block-library/blocks/spacer/style-rtl.css 48 B 0 B
build/block-library/blocks/spacer/style.css 48 B 0 B
build/block-library/blocks/table/editor-rtl.css 478 B 0 B
build/block-library/blocks/table/editor.css 478 B 0 B
build/block-library/blocks/table/style-rtl.css 402 B 0 B
build/block-library/blocks/table/style.css 402 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 118 B 0 B
build/block-library/blocks/tag-cloud/editor.css 118 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 94 B 0 B
build/block-library/blocks/tag-cloud/style.css 94 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 552 B 0 B
build/block-library/blocks/template-part/editor.css 551 B 0 B
build/block-library/blocks/term-description/editor-rtl.css 90 B 0 B
build/block-library/blocks/term-description/editor.css 90 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B 0 B
build/block-library/blocks/text-columns/editor.css 95 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 166 B 0 B
build/block-library/blocks/text-columns/style.css 166 B 0 B
build/block-library/blocks/verse/editor-rtl.css 50 B 0 B
build/block-library/blocks/verse/editor.css 50 B 0 B
build/block-library/blocks/verse/style-rtl.css 87 B 0 B
build/block-library/blocks/verse/style.css 87 B 0 B
build/block-library/blocks/video/editor-rtl.css 504 B 0 B
build/block-library/blocks/video/editor.css 503 B 0 B
build/block-library/common-rtl.css 1.31 kB 0 B
build/block-library/common.css 1.31 kB 0 B
build/block-library/reset-rtl.css 502 B 0 B
build/block-library/reset.css 503 B 0 B
build/block-library/theme-rtl.css 692 B 0 B
build/block-library/theme.css 693 B 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/deprecated/index.js 787 B 0 B
build/dom-ready/index.js 576 B 0 B
build/edit-post/classic-rtl.css 454 B 0 B
build/edit-post/classic.css 454 B 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/style-rtl.css 637 B 0 B
build/format-library/style.css 639 B 0 B
build/is-shallow-equal/index.js 699 B 0 B
build/list-reusable-blocks/index.js 3.19 kB 0 B
build/list-reusable-blocks/style-rtl.css 629 B 0 B
build/list-reusable-blocks/style.css 628 B 0 B
build/nux/style-rtl.css 731 B 0 B
build/nux/style.css 727 B 0 B
build/primitives/index.js 1.42 kB 0 B
build/reusable-blocks/style-rtl.css 225 B 0 B
build/reusable-blocks/style.css 225 B 0 B
build/rich-text/index.js 13.5 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@hypest
Copy link
Contributor

hypest commented Mar 30, 2021

Thanks for the draft fix @mkevins ! I got curious about the fix and looked at the code.

We've indeed have noticed in the past that GBoard's autosuggestion system performs these "weird" text chance events where a single char is is actually added after the whole word is first removed from the text buffer.

I'm not yet sure about trying to fix the issue by essentially mimicking the logic GBoard uses. I feel it's a bit complex and prone to breakages if GBoard updates it's logic.

I took a stab at it and tried a different idea: to just search for the Enter character instead of using the change event's positioning variables. Check out the gist here for a diff against the production code, where I basically rely on newTextCopy.lastIndexOf(Constants.NEWLINE) to find the char. Looks like it fixes the issue for me using the GBoard. This is a crude first attempt to see if it works. I'm thinking we should actually search for multiple occurances of the char (think: pasting many paragraphs of text) too, but that will require more adaptations to the code.

Anyway, just a proposal, let me know what you think! Thanks!

@mkevins
Copy link
Contributor Author

mkevins commented Mar 31, 2021

Thanks for taking a look at this one Stefanos! 😄

I'm not yet sure about trying to fix the issue by essentially mimicking the logic GBoard uses. I feel it's a bit complex and prone to breakages if GBoard updates it's logic.

To clarify, the earlier approach wasn't really "mimicking" gboard, but rather trying to "detect" it. I agree, though, that in some sense, it relies on specific behavior of Gboard that may change at some point in the future. Also, in some sense, that's how we got here 😆 .

I think to address the other cases that my approach hadn't yet handled, we'd inevitable need to do a search for the newline, so your solution is actually more general, and covers these cases, as well as the usual non-Gboard keyboards, at least in my understanding. I tested your patch, and included it in this PR (reverting the "segmented" approach).

I tested this with several scenarios, and it seems to solve the issue and I did not encounter any regressions either. I tried a few different things, such as having text selected when pressing enter (which does not work, but is not a regression either - think of that one as an easter egg in inserting a newline in lieu of shift-enter 😃 ).

Regarding paste, the good news is that we actually bypass paste when we have a paste handler on the Gutenberg side, so that is all handled in JS. Was there a particular scenario you had concerns with in paste where perhaps we don't have a gb handler?

@hypest
Copy link
Contributor

hypest commented Mar 31, 2021

Oh, good to see you like and incorporated the gist Matthew! And thanks for putting it through more testing. I can't hide my feeling that it could introduce other bugs so, your testing helps alleviate the fear :)

Regarding paste, the good news is that we actually bypass paste when we have a paste handler on the Gutenberg side, so that is all handled in JS.

🎉 awesome!

Was there a particular scenario you had concerns with in paste where perhaps we don't have a gb handler?

Not really. Just looking at the code and how it only searches for >1< Enter char, just makes me wonder what would happen if the text had more, and that's when the "what happens when pasting multiple paragraphs" came to mind, nothing more specific. It's good that the paste is handled elsewhere anyway so, we can leave it at that for the time being 👍

@geriux geriux mentioned this pull request Mar 31, 2021
13 tasks
@mkevins
Copy link
Contributor Author

mkevins commented Apr 6, 2021

Writing flow tests for [ENTER] behavior

These tests should be performed both with and without a Gboard keyboard. It may be worth paying close attention to the known issues with enter key behavior to make sure there aren't any new regressions, and if possible, whether some other issues are fixed by these changes.

With Gboard keyboard

❌ Multiline components - Test Cases

Testing Steps

Test the next steps on:

  • ❌ Quote block - On enter splits the block instead of adding newline without splitting
  • ❌ Verse block - On enter adds two
    tags instead of just one
  • ❌ Preformatted block - On enter adds two
    tags instead of just one
  • Code block (DEV only)
  • ❌ Pullquote block - On enter adds two

    tags instead of just one

TC001

Known Issues

  • On Android, tapping Enter to split a quote or pullquote citation both splits the block and adds a newline to the citation (#2498)
  • ✔️ On Android, pressing enter multiple times in the content of a Pullquote or Quote block causes unintended behavior (#27690) - This appears to have been fixed
  • On Android, there is sometimes a loss of lines when entering multiple lines. (#29861)
  • There is sometimes inconsistent HTML surrounding newlines in the Pullquote and Quote Block. (#1396)

New line on multiline components

  • Start typing and press enter to create a new line.
  • The new line should be created, without splitting the block.
  • On citations, pressing Enter at the end of a citation splits the block, but pressing enter in the middle of a citation creates a new line.
  • Check on HTML mode that the resulting HTML code is correct:
    • Quote: <p> tags per paragraph.
    • Quote citation: <br> ending lines.
    • Verse: <br> ending lines.
    • Preformatted: <br> ending lines.
    • Code: (Invisible \n) new line character.
    • Pullquote: <p> tags per non-wrapping "line"
    • Pullquote citation: <br> ending lines.

  • Rich Text Formatting - Test Cases
Testing Steps

Precondition

Have a rich-text based component with content (Paragraph, Heading, Quote, Media Caption, etc...)

TC003

Alignment Split

  • Write some lines on a paragraph block.
  • Set an alignment on the block.
  • Move the caret by the half of the text and press enter to split it.
  • Check that the new block has the same alignment.
  • Check that the text alignment corresponds to the setting.

❌ Splitting and merging - Test Cases

Testing Steps

Known Issues

Precondition

Start from an empty post.

Initial steps

  • Repeat the next steps on a Paragraph and Heading block
  • Write (or paste) a paragraph with a few lines
  • Set the caret by the half of the paragraph
  • Press Enter (Intro) to split the block into two.
TC001

Known Issues

Merge after writing

  • Follow the initial steps.
  • Write some more text where the caret is placed (beginning of new block).
  • Delete all new text using the delete button until the blocks are merged again.
  • Check that the blocks were merged.
❌ TC002

Known Issues

Merge after selection

  • Follow the initial steps.
  • Write some more text where the caret is placed (beginning of new block)
  • Select all the newly written text,
  • Press delete to remove all selected text.
  • ❌ Press delete once again to merge the blocks. - Unable to merge after selection was deleted
  • Check that the blocks were merged.
TC003

Known Issues

Merge after deleting text

  • Follow the initial steps.
  • Move the caret a few words.
  • Delete all those words until the blocks merge.
  • Check that the blocks were merged.
TC004

Known Issues

Merge after deleting all

  • Follow the initial steps.
  • Select and remove all content of the new block
  • Press delete to remove the empty block.
  • Check that the previous block was selected.
TC005

Merge multiple blocks

  • Follow the initial steps.
  • Press enter two times to create an empty block in between
  • Press back two times to merge everything again.
  • Check that the blocks were merged.
❌ TC006

Splitting/merge list block - cannot add new items to list, can only split into new lists with one item on entering

  • Write some items on a list block
  • Put the caret by the half of them (at the end of the item) and press Enter to create a new item.
  • Press Enter again to split the block into two, with an empty paragraph block in the middle. The paragraph block at the middle should be focused.
  • Write something on that newly created paragraph block.
  • Move the cursor to the beginning of the paragraph block
  • Press delete to merge the paragraph block with the upper list block.
  • Check that the new word should be a new list item.
  • Move the caret to the beginning of the second list block.
  • Press delete once to merge it back into the first list block.
  • Check that everything was merged and there’s just one list block.

With non-Gboard keyboard

  • Multiline components - Test Cases
Testing Steps

Test the next steps on:

  • Quote block
  • Verse block
  • Preformatted block
  • Code block (DEV only)
  • Pullquote block
TC001

Known Issues

  • On Android, tapping Enter to split a quote or pullquote citation both splits the block and adds a newline to the citation (#2498)
  • On Android, pressing enter multiple times in the content of a Pullquote or Quote block causes unintended behavior (#27690)
  • On Android, there is sometimes a loss of lines when entering multiple lines. (#29861)
  • There is sometimes inconsistent HTML surrounding newlines in the Pullquote and Quote Block. (#1396)

New line on multiline components

  • Start typing and press enter to create a new line.
  • The new line should be created, without splitting the block.
  • On citations, pressing Enter at the end of a citation splits the block, but pressing enter in the middle of a citation creates a new line.
  • Check on HTML mode that the resulting HTML code is correct:
    • Quote: <p> tags per paragraph.
    • Quote citation: <br> ending lines.
    • Verse: <br> ending lines.
    • Preformatted: <br> ending lines.
    • Code: (Invisible \n) new line character.
    • Pullquote: <p> tags per non-wrapping "line"
    • Pullquote citation: <br> ending lines.

  • Rich Text Formatting - Test Cases
Testing Steps

Precondition

Have a rich-text based component with content (Paragraph, Heading, Quote, Media Caption, etc...)

TC003

Alignment Split

  • Write some lines on a paragraph block.
  • Set an alignment on the block.
  • Move the caret by the half of the text and press enter to split it.
  • Check that the new block has the same alignment.
  • Check that the text alignment corresponds to the setting.

  • Splitting and merging - Test Cases
Testing Steps

Known Issues

Precondition

Start from an empty post.

Initial steps

  • Repeat the next steps on a Paragraph and Heading block
  • Write (or paste) a paragraph with a few lines
  • Set the caret by the half of the paragraph
  • Press Enter (Intro) to split the block into two.
TC001

Known Issues

Merge after writing

  • Follow the initial steps.
  • Write some more text where the caret is placed (beginning of new block).
  • Delete all new text using the delete button until the blocks are merged again.
  • Check that the blocks were merged.
TC002

Known Issues

Merge after selection

  • Follow the initial steps.
  • Write some more text where the caret is placed (beginning of new block)
  • Select all the newly written text,
  • Press delete to remove all selected text.
  • Press delete once again to merge the blocks.
  • Check that the blocks were merged.
TC003

Known Issues

Merge after deleting text

  • Follow the initial steps.
  • Move the caret a few words.
  • Delete all those words until the blocks merge.
  • Check that the blocks were merged.
TC004

Known Issues

Merge after deleting all

  • Follow the initial steps.
  • Select and remove all content of the new block
  • Press delete to remove the empty block.
  • Check that the previous block was selected.
TC005

Merge multiple blocks

  • Follow the initial steps.
  • Press enter two times to create an empty block in between
  • Press back two times to merge everything again.
  • Check that the blocks were merged.
TC006

Splitting/merge list block

  • Write some items on a list block
  • Put the caret by the half of them (at the end of the item) and press Enter to create a new item.
  • Press Enter again to split the block into two, with an empty paragraph block in the middle. The paragraph block at the middle should be focused.
  • Write something on that newly created paragraph block.
  • Move the cursor to the beginning of the paragraph block
  • Press delete to merge the paragraph block with the upper list block.
  • Check that the new word should be a new list item.
  • Move the caret to the beginning of the second list block.
  • Press delete once to merge it back into the first list block.
  • Check that everything was merged and there’s just one list block.

@mkevins
Copy link
Contributor Author

mkevins commented Apr 7, 2021

Unfortunately, it seems that the current change (2ea1654) set may introduce other regressions in writing flow tests, although it does seem to fix some known issues as well.

Fixes:

Regressions:

  • Multiline Components – TC001 - New line on multiline components
    • Quote block – On enter splits the block instead of adding newline without splitting
    • Verse block – On enter adds two
      tags instead of just one
    • Preformatted block – On enter adds two
      tags instead of just one
    • Pullquote block -On enter adds two

      tags instead of just one

  • Splitting and Merging - TC002 – Merge after Selection - Unable to merge after selection was deleted
  • Splitting and Merging -TC006 - Splitting and Merging List Block – cannot add new items to list, can only split into new lists with one item on entering

More details in the testing steps listed here.

@hypest
Copy link
Contributor

hypest commented Apr 8, 2021

Thanks for running more detailed tests @mkevins ! Will have a look at the regressions from my side too 👍

Sorry, read your comment above too fast Matthew. Are you trying to check the solution in this PR, or perhaps do more testing on the merged PR with the dropping selection event solution? 🤔

@mkevins
Copy link
Contributor Author

mkevins commented Apr 9, 2021

Thanks for running more detailed tests @mkevins ! Will have a look at the regressions from my side too

Awesome, thanks Stefanos!

Sorry, read your comment above too fast Matthew. Are you trying to check the solution in this PR, or perhaps do more testing on the merged PR with the dropping selection event solution?

I'm checking the current changeset (2ea1654) in this PR by running through the writing flow tests that involved [ENTER] keypresses. My intention is to check for any possible regressions we may face by altering the enter-detection mechanism. So far, I've encountered a few, mostly to do with lists and (pull)quote blocks.

@mkevins
Copy link
Contributor Author

mkevins commented Apr 9, 2021

Writing flow tests for [ENTER] behavior

Since the approach searching for newlines seems to introduce some regressions, I also tried the tests w/ the earlier approach, since it was written with the intent to minimize side effects by attempting to detect and isolate Gboard specific behavior. I performed these tests both with and without a Gboard keyboard with this changeset: 7363bb5.

It seems that most of the behavior is unchanged (i.e. I did not encounter any new regressions), and the specific case of pressing [ENTER] at the end of a suggested word seems to work correctly with these changes. I also noticed that a few of the known issues seem to be resolved on trunk, and noted that in those cases.

With Gboard keyboard

  • Multiline components - Test Cases
Testing Steps

Test the next steps on:

  • Quote block
  • Verse block
  • Preformatted block
  • Code block (DEV only)
  • Pullquote block
TC001

Known Issues

  • On Android, tapping Enter to split a quote or pullquote citation both splits the block and adds a newline to the citation (#2498)
  • ✔️ On Android, pressing enter multiple times in the content of a Pullquote or Quote block causes unintended behavior (#27690) - this seems to be fixed on trunk
  • ✔️ On Android, there is sometimes a loss of lines when entering multiple lines. (#29861) - this seems to be fixed on trunk
  • There is sometimes inconsistent HTML surrounding newlines in the Pullquote and Quote Block. (#1396)

New line on multiline components

  • Start typing and press enter to create a new line.
  • The new line should be created, without splitting the block.
  • On citations, pressing Enter at the end of a citation splits the block, but pressing enter in the middle of a citation creates a new line.
  • Check on HTML mode that the resulting HTML code is correct:
    • Quote: <p> tags per paragraph.
    • Quote citation: <br> ending lines.
    • Verse: <br> ending lines.
    • Preformatted: <br> ending lines.
    • Code: (Invisible \n) new line character.
    • Pullquote: <p> tags per non-wrapping "line"
    • Pullquote citation: <br> ending lines.

  • Rich Text Formatting - Test Cases
Testing Steps

Precondition

Have a rich-text based component with content (Paragraph, Heading, Quote, Media Caption, etc...)

TC003

Alignment Split

  • Write some lines on a paragraph block.
  • Set an alignment on the block.
  • Move the caret by the half of the text and press enter to split it.
  • Check that the new block has the same alignment.
  • Check that the text alignment corresponds to the setting.

  • Splitting and merging - Test Cases
Testing Steps

Known Issues

Precondition

Start from an empty post.

Initial steps

  • Repeat the next steps on a Paragraph and Heading block
  • Write (or paste) a paragraph with a few lines
  • Set the caret by the half of the paragraph
  • Press Enter (Intro) to split the block into two.
TC001

Known Issues

Merge after writing

  • Follow the initial steps.
  • Write some more text where the caret is placed (beginning of new block).
  • Delete all new text using the delete button until the blocks are merged again.
  • Check that the blocks were merged.
TC002

Known Issues

Merge after selection

  • Follow the initial steps.
  • Write some more text where the caret is placed (beginning of new block)
  • Select all the newly written text,
  • Press delete to remove all selected text.
  • Press delete once again to merge the blocks.
  • Check that the blocks were merged.
TC003

Known Issues

Merge after deleting text

  • Follow the initial steps.
  • Move the caret a few words.
  • Delete all those words until the blocks merge.
  • Check that the blocks were merged.
TC004

Known Issues

Merge after deleting all

  • Follow the initial steps.
  • Select and remove all content of the new block
  • Press delete to remove the empty block.
  • Check that the previous block was selected.
TC005

Merge multiple blocks

  • Follow the initial steps.
  • Press enter two times to create an empty block in between
  • Press back two times to merge everything again.
  • Check that the blocks were merged.
TC006

Splitting/merge list block

  • Write some items on a list block
  • Put the caret by the half of them (at the end of the item) and press Enter to create a new item.
  • Press Enter again to split the block into two, with an empty paragraph block in the middle. The paragraph block at the middle should be focused.
  • Write something on that newly created paragraph block.
  • Move the cursor to the beginning of the paragraph block
  • Press delete to merge the paragraph block with the upper list block.
  • Check that the new word should be a new list item.
  • Move the caret to the beginning of the second list block.
  • Press delete once to merge it back into the first list block.
  • Check that everything was merged and there’s just one list block.

With non-Gboard keyboard

  • Multiline components - Test Cases
Testing Steps

Test the next steps on:

  • Quote block
  • Verse block
  • Preformatted block
  • Code block (DEV only)
  • Pullquote block
TC001

Known Issues

  • On Android, tapping Enter to split a quote or pullquote citation both splits the block and adds a newline to the citation (#2498)

  • ✔️ On Android, pressing enter multiple times in the content of a Pullquote or Quote block causes unintended behavior (#27690) - this seems to be fixed on trunk

  • ✔️ On Android, there is sometimes a loss of lines when entering multiple lines. (#29861) - this seems to be fixed on trunk

  • There is sometimes inconsistent HTML surrounding newlines in the Pullquote and Quote Block. (#1396)
    New line on multiline components

  • Start typing and press enter to create a new line.

  • The new line should be created, without splitting the block.

  • On citations, pressing Enter at the end of a citation splits the block, but pressing enter in the middle of a citation creates a new line.

  • Check on HTML mode that the resulting HTML code is correct:

    • Quote: <p> tags per paragraph.
    • Quote citation: <br> ending lines.
    • Verse: <br> ending lines.
    • Preformatted: <br> ending lines.
    • Code: (Invisible \n) new line character.
    • Pullquote: <p> tags per non-wrapping "line"
    • Pullquote citation: <br> ending lines.

  • Rich Text Formatting - Test Cases
Testing Steps

Precondition

Have a rich-text based component with content (Paragraph, Heading, Quote, Media Caption, etc...)

TC003

Alignment Split

  • Write some lines on a paragraph block.
  • Set an alignment on the block.
  • Move the caret by the half of the text and press enter to split it.
  • Check that the new block has the same alignment.
  • Check that the text alignment corresponds to the setting.

  • Splitting and merging - Test Cases
Testing Steps

Known Issues

Precondition

Start from an empty post.

Initial steps

  • Repeat the next steps on a Paragraph and Heading block
  • Write (or paste) a paragraph with a few lines
  • Set the caret by the half of the paragraph
  • Press Enter (Intro) to split the block into two.
TC001

Known Issues

Merge after writing

  • Follow the initial steps.
  • Write some more text where the caret is placed (beginning of new block).
  • Delete all new text using the delete button until the blocks are merged again.
  • Check that the blocks were merged.
TC002

Known Issues

Merge after selection

  • Follow the initial steps.
  • Write some more text where the caret is placed (beginning of new block)
  • Select all the newly written text,
  • Press delete to remove all selected text.
  • Press delete once again to merge the blocks.
  • Check that the blocks were merged.
TC003

Known Issues

Merge after deleting text

  • Follow the initial steps.
  • Move the caret a few words.
  • Delete all those words until the blocks merge.
  • Check that the blocks were merged.
TC004

Known Issues

Merge after deleting all

  • Follow the initial steps.
  • Select and remove all content of the new block
  • Press delete to remove the empty block.
  • Check that the previous block was selected.
TC005

Merge multiple blocks

  • Follow the initial steps.
  • Press enter two times to create an empty block in between
  • Press back two times to merge everything again.
  • Check that the blocks were merged.
TC006

Splitting/merge list block

  • Write some items on a list block
  • Put the caret by the half of them (at the end of the item) and press Enter to create a new item.
  • Press Enter again to split the block into two, with an empty paragraph block in the middle. The paragraph block at the middle should be focused.
  • Write something on that newly created paragraph block.
  • Move the cursor to the beginning of the paragraph block
  • Press delete to merge the paragraph block with the upper list block.
  • Check that the new word should be a new list item.
  • Move the caret to the beginning of the second list block.
  • Press delete once to merge it back into the first list block.
  • Check that everything was merged and there’s just one list block.

@mkevins
Copy link
Contributor Author

mkevins commented Jul 5, 2021

Closing as these changes were brought in with: #32471

@mkevins mkevins closed this Jul 5, 2021
@mkevins mkevins deleted the rnmobile/try/fix-gboard-enter-detection branch August 16, 2021 06:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) [Status] In Progress Tracking issues with work in progress
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Enter detection fails in EnterPressedWatcher for Gboard keyboard
2 participants