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

RNMobile: Remove willTrimSpacesCheck for Android #22006

Closed

Conversation

mchowning
Copy link
Contributor

@mchowning mchowning commented Apr 30, 2020

Description

This removes the willTrimSpaces check that Android has been using in RichText so that we are not discarding the selection information as often on Android. I believe we can now remove this on account of @marecar3 's update so that AztecAndroid is no longer discarding whitespace like it was before. (AztecAndroid PR, Gutenberg-Mobile PR).

The immediate issue that brought this up is @iamthomasbishop 's request that when inserting @-mentions into a post, we include a space after the mention. Doing this on Android triggers the willTrimSpaces check and moves the cursor from the end of the mention to the beginning of the mention, which is a significant disruption to the writing flow (more info in this comment).

This check was added to avoid a number of crashes on Android, so we should be very cautious about removing it and thoroughly test for regressions. 🙏 I searched for crashes we saw in the past and included them in the testing scenarios below.

Testing Scenarios

Confirm that all of these flows are able to be completed crash-free

Multiline Paragraph Blocks From Web

From wordpress-mobile/gutenberg-mobile#1507

  1. Create a post on Gutenberg web with a para block that ends with one or more empty line(s) (Shift+Enter)
  2. Open this new post in GB mobile
  3. Tap on the Plus symbol to add a new block below the para
  4. Put the focus into this new block and taps on Backspace to merge this new block with the one above.
  5. Confirm no crash or red screen, and the two blocks are merged with the caret at the end of the block

Handling spaces with Lists

From wordpress-mobile/gutenberg-mobile#885

Two spaces + Letter

  1. Begin editing new list
  2. Add two spaces, then any letter to the first list item
  3. Tap enter with cursor at the end of the first list item to add a second list item
  4. The list should create a new list item
  5. Pressing either undo or backspace should remove the new line
  6. Confirm no red screen

Three spaces

  1. Begin editing new list
  2. Add three spaces to the first list item
  3. Tap enter with cursor at the end of the first list item to add a second list item
  4. The list should create a new list item and the spaces in the item above it will be trimmed
  5. Press backspace should remove the new list item
  6. Press enter to create a new list item again
  7. Press undo to remove the new list item
  8. Confirm no red screen

Letter + Three Spaces

  1. Begin editing new list
  2. Add any letter, then add three spaces (second space creates a period) to the first list item
  3. Tap enter with cursor at the end of the first list item to add a second list item
  4. The list should create a new list item and the spaces in the item above it will be trimmed
  5. Press backspace should remove the new list item
  6. Press enter to create a new list item again
  7. Press undo to remove the new list item
  8. Confirm no red screen

Undo test that causes the selection to exceed the record length

This scenario is why I cannot remove the record length check here.

  1. Begin editing a new list
  2. Add content to the first list item
  3. Tap enter with cursor at the end of the first list item to add a second list item
  4. Tap backspace should remove the new list item
  5. Tap Enter enter to add a second list item again
  6. Tap undo
  7. Confirm no red screen (logs will show the "Oops, selection will land outside the text, skipping setting it..." message)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • 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.

@mchowning mchowning added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Apr 30, 2020
@mchowning mchowning self-assigned this Apr 30, 2020
@github-actions
Copy link

github-actions bot commented Apr 30, 2020

Size Change: 0 B

Total Size: 825 kB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 4.08 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.6 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 761 B 0 B
build/block-editor/index.js 107 kB 0 B
build/block-editor/style-rtl.css 10.2 kB 0 B
build/block-editor/style.css 10.2 kB 0 B
build/block-library/editor-rtl.css 7.11 kB 0 B
build/block-library/editor.css 7.11 kB 0 B
build/block-library/index.js 115 kB 0 B
build/block-library/style-rtl.css 7.22 kB 0 B
build/block-library/style.css 7.23 kB 0 B
build/block-library/theme-rtl.css 683 B 0 B
build/block-library/theme.css 685 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/index.js 179 kB 0 B
build/components/style-rtl.css 16.9 kB 0 B
build/components/style.css 16.9 kB 0 B
build/compose/index.js 6.66 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.44 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.1 kB 0 B
build/edit-navigation/index.js 4.05 kB 0 B
build/edit-navigation/style-rtl.css 485 B 0 B
build/edit-navigation/style.css 485 B 0 B
build/edit-post/index.js 28.1 kB 0 B
build/edit-post/style-rtl.css 12.2 kB 0 B
build/edit-post/style.css 12.2 kB 0 B
build/edit-site/index.js 11.4 kB 0 B
build/edit-site/style-rtl.css 5.18 kB 0 B
build/edit-site/style.css 5.18 kB 0 B
build/edit-widgets/index.js 7.76 kB 0 B
build/edit-widgets/style-rtl.css 4.67 kB 0 B
build/edit-widgets/style.css 4.66 kB 0 B
build/editor/editor-styles-rtl.css 428 B 0 B
build/editor/editor-styles.css 431 B 0 B
build/editor/index.js 44.3 kB 0 B
build/editor/style-rtl.css 5.07 kB 0 B
build/editor/style.css 5.08 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.63 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 5.29 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14.8 kB 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.02 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

const blockHtmlElements =
'(div|br|blockquote|ul|ol|li|p|pre|h1|h2|h3|h4|h5|h6|iframe|hr)';
const leadingOrTrailingSpaces = new RegExp(
`(\\s+)<\/?${ blockHtmlElements }>|<\/?${ blockHtmlElements }>(\\s+)`,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👋 @mchowning, looks like the whitespace preserving code on the Aztec side is preserving simple spaces only, while the regex here is checking for all whitespace chars. I'm under the impression that the Aztec side behavior won't actually preserve all whitespace chars, so, can you check as well?

I tried having a tab char (ASCII 0x09) leading and trialing the test but couldn't break the editor (the whitespace was preserved) although I'm not sure I did actually manage to insert the TAB, it might actually had become a regular space char.

Copy link
Contributor Author

@mchowning mchowning May 5, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for taking a look @hypest!

looks like the whitespace preserving code on the Aztec side is preserving simple spaces only, while the regex here is checking for all whitespace chars.

Are you aware of any specific reason the regex is checking for all whitespace instead of just spaces. I wasn't able to find a reason that was needed (both the comment on the regex and the original change with adding this regex seemed to only involve issues with space characters specifically.

I'm under the impression that the Aztec side behavior won't actually preserve all whitespace chars, so, can you check as well?

I tried having a tab char (ASCII 0x09) leading and trialing the test but couldn't break the editor (the whitespace was preserved) although I'm not sure I did actually manage to insert the TAB, it might actually had become a regular space char.

I noticed the same thing, a lot of non-standard characters I tried (tab, line feed, carriage return, non-breaking space) were converted into spaces (well, eventually: line feed would briefly be a newline and non-breaking space would briefly be &nbsp;, but those would then get turned into spaces). In everything I tried, I couldn't find anything that broke on Gutenberg.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you aware of any specific reason the regex is checking for all whitespace instead of just spaces.

If I recall correctly, the whitespace in general gets removed by Aztec because HTML itself is ignoring them, and Aztec tries to follow that logic. In this case, I think I tried to generalize and having in mind that the AztecParser.tidy() method and perhaps other components too will try to remove some whitespace.

@mchowning
Copy link
Contributor Author

Closing this because these changes were handled in wordpress-mobile/gutenberg-mobile#2279

@mchowning mchowning closed this May 25, 2020
@mchowning mchowning deleted the rnmobile/remove_will_trim_check_for_android branch May 25, 2020 18:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants