Mobile - Fix issue when backspacing in an empty Paragraph block #56496
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…xtinput is not, for cases when merging blocks.
…pp where deleting the only button available does not remove the block
…block with an empty Paragraph block
…acing in an empty Paragraph block merges succesfully with the previous block and keeps the focus on the TextInput
geriux
added
[Type] Bug
|
Size Change: 0 B Total Size: 1.7 MB ℹ️ View Unchanged
|
…ition when merging and adds some comments to explain what is doing
fluiddot
approved these changes
Nov 27, 2023
There was a problem hiding this comment.
LGM 🎊 ! Amazing job @geriux 🏅 !
I tested the different scenarios referenced in the PR's description and they worked as expected.
I noticed that this old issue seems resolved by this fix 🎊 , although there's a divergence in the behavior when merging a Paragraph block with content into a Quote block. However, this divergence looks unrelated to this PR as I can reproduce it in the production version.
ios-merge-paragraph-pullquote.MP4
|
@geriux I forgot to mention in my review that it would be great to add an entry to the |
SiobhyB
approved these changes
Nov 27, 2023
There was a problem hiding this comment.
To supplement Carlos' review, I wanted to confirm that I tested this change on both platforms. I verified that the fix works for me and I wasn't able to spot any unexpected/new RichText regressions when I tried to break things. With that, and with all the automated tests passing, approving. :) Thank you for the fix, @geriux! 🙌
geriux
removed
[Status] In Progress
…nput is in focused instead of checking for the fomatting toolbar button
geriux
added a commit
that referenced
this pull request
Nov 29, 2023
* Bring changes from #55134 to the mobile code * Mobile - RichText - Force focus when the block is selected but the textinput is not, for cases when merging blocks. * Update Buttons integration test due to a change in the logic of the app where deleting the only button available does not remove the block * Mobile - Heading block - Adds integration test for merging a Heading block with an empty Paragraph block * Mobile - Paragraph block - Adds integration test to check that backspacing in an empty Paragraph block merges succesfully with the previous block and keeps the focus on the TextInput * Mobile - RichText - Set selection values to be the last character position when merging and adds some comments to explain what is doing * Mobile - Paragraph block test - Use focusTextInput to check the TextInput is in focused instead of checking for the fomatting toolbar button * Rename shouldFocusTextInputAfterUpdate to shouldFocusTextInputAfterMerge * Update CHANGELOG
4 tasks
geriux
added a commit
that referenced
this pull request
Nov 30, 2023
* Release script: Update react-native-editor version to 1.109.0 * Release script: Update CHANGELOG for version 1.109.0 * Release script: Update podfile * Update `react-native-editor` changelog * Update `react-native-editor` changelog * Mobile - Fix issue when backspacing in an empty Paragraph block (#56496) * Bring changes from #55134 to the mobile code * Mobile - RichText - Force focus when the block is selected but the textinput is not, for cases when merging blocks. * Update Buttons integration test due to a change in the logic of the app where deleting the only button available does not remove the block * Mobile - Heading block - Adds integration test for merging a Heading block with an empty Paragraph block * Mobile - Paragraph block - Adds integration test to check that backspacing in an empty Paragraph block merges succesfully with the previous block and keeps the focus on the TextInput * Mobile - RichText - Set selection values to be the last character position when merging and adds some comments to explain what is doing * Mobile - Paragraph block test - Use focusTextInput to check the TextInput is in focused instead of checking for the fomatting toolbar button * Rename shouldFocusTextInputAfterUpdate to shouldFocusTextInputAfterMerge * Update CHANGELOG * Release script: Update react-native-editor version to 1.109.1 * Release script: Update CHANGELOG for version 1.109.1 * Release script: Update podfile --------- Co-authored-by: Carlos Garcia <fluiddot@gmail.com>
fluiddot
added a commit
that referenced
this pull request
Dec 5, 2023
* Release script: Update react-native-editor version to 1.109.0 * Release script: Update CHANGELOG for version 1.109.0 * Release script: Update podfile * Update `react-native-editor` changelog * Update `react-native-editor` changelog * Mobile - Fix issue when backspacing in an empty Paragraph block (#56496) * Bring changes from #55134 to the mobile code * Mobile - RichText - Force focus when the block is selected but the textinput is not, for cases when merging blocks. * Update Buttons integration test due to a change in the logic of the app where deleting the only button available does not remove the block * Mobile - Heading block - Adds integration test for merging a Heading block with an empty Paragraph block * Mobile - Paragraph block - Adds integration test to check that backspacing in an empty Paragraph block merges succesfully with the previous block and keeps the focus on the TextInput * Mobile - RichText - Set selection values to be the last character position when merging and adds some comments to explain what is doing * Mobile - Paragraph block test - Use focusTextInput to check the TextInput is in focused instead of checking for the fomatting toolbar button * Rename shouldFocusTextInputAfterUpdate to shouldFocusTextInputAfterMerge * Update CHANGELOG * Release script: Update react-native-editor version to 1.109.1 * Release script: Update CHANGELOG for version 1.109.1 * Release script: Update podfile * [RNMobile] Fixes a crash on pasting MS Word list markup (#56653) * Add polyfill for Element.prototype.remove * Enable unit tests of `raw-handling` API filter `ms-list-converter` * Update `react-native-editor` changelog * [RNMobile] Fix issue related to receiving undefined ref in text color format (#56686) * Fix issue related to receiving undefined ref in text color format In rare cases, `TextColorEdit` might receive the `RichText` ref as undefined. This ref is used to get the background color of the text and use it in the toolbar button. * Update `react-native-editor` changelog * Add test to cover undefined `contentRef` case * Correct typo in `changelog` * [RNMobile] Fix HTML to blocks conversion when no transformations are available (#56723) * Add native workaround for HTML block in `htmlToBlocks` * Add raw handling tests This file is a clone of the same `blocks-raw-handling.js` file located in `gutenberg/test/integration`. The reason for the separation is that several of the test cases fail in the native version. For now, we are going to skip them, but we'd need to work on them in the future. Once all issues in tests are addressed, we'll remove this file in favor of the original one. * Update blocks raw handling test snapshot with original values * Disable more pasteHandler test cases due to not matching test snapshot * Comment obsolete snapshots of blocks raw handling tests The reason for commenting them instead of removing is that, in the future, we'll restore them once we address the failing test cases. * RichText (native): remove HTML check in getFormatColors (#56684) * Mobile - Global Styles - Fix issue with custom color variables not being parsed (#56752) * [RNMobile] Address `NullPointerException` crash in `AztecHeadingSpan` (#56757) Address rare cases where a null value is passed to a heading block, causing a crash. * Release script: Update react-native-editor version to 1.109.2 * Release script: Update CHANGELOG for version 1.109.2 * Release script: Update podfile --------- Co-authored-by: Gerardo Pacheco <gerardo.pacheco@automattic.com> Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com> Co-authored-by: Siobhan Bamber <siobhan@automattic.com>
derekblank
pushed a commit
that referenced
this pull request
Dec 7, 2023
* Bring changes from #55134 to the mobile code * Mobile - RichText - Force focus when the block is selected but the textinput is not, for cases when merging blocks. * Update Buttons integration test due to a change in the logic of the app where deleting the only button available does not remove the block * Mobile - Heading block - Adds integration test for merging a Heading block with an empty Paragraph block * Mobile - Paragraph block - Adds integration test to check that backspacing in an empty Paragraph block merges succesfully with the previous block and keeps the focus on the TextInput * Mobile - RichText - Set selection values to be the last character position when merging and adds some comments to explain what is doing * Mobile - Paragraph block test - Use focusTextInput to check the TextInput is in focused instead of checking for the fomatting toolbar button * Rename shouldFocusTextInputAfterUpdate to shouldFocusTextInputAfterMerge * Update CHANGELOG
derekblank
pushed a commit
that referenced
this pull request
Dec 7, 2023
* Release script: Update react-native-editor version to 1.109.0 * Release script: Update CHANGELOG for version 1.109.0 * Release script: Update podfile * Update `react-native-editor` changelog * Update `react-native-editor` changelog * Mobile - Fix issue when backspacing in an empty Paragraph block (#56496) * Bring changes from #55134 to the mobile code * Mobile - RichText - Force focus when the block is selected but the textinput is not, for cases when merging blocks. * Update Buttons integration test due to a change in the logic of the app where deleting the only button available does not remove the block * Mobile - Heading block - Adds integration test for merging a Heading block with an empty Paragraph block * Mobile - Paragraph block - Adds integration test to check that backspacing in an empty Paragraph block merges succesfully with the previous block and keeps the focus on the TextInput * Mobile - RichText - Set selection values to be the last character position when merging and adds some comments to explain what is doing * Mobile - Paragraph block test - Use focusTextInput to check the TextInput is in focused instead of checking for the fomatting toolbar button * Rename shouldFocusTextInputAfterUpdate to shouldFocusTextInputAfterMerge * Update CHANGELOG * Release script: Update react-native-editor version to 1.109.1 * Release script: Update CHANGELOG for version 1.109.1 * Release script: Update podfile --------- Co-authored-by: Carlos Garcia <fluiddot@gmail.com>
SiobhyB
added a commit
that referenced
this pull request
Dec 14, 2023
* Release script: Update react-native-editor version to 1.109.0 * Release script: Update CHANGELOG for version 1.109.0 * Release script: Update podfile * Update `react-native-editor` changelog * Update `react-native-editor` changelog * Mobile - Fix issue when backspacing in an empty Paragraph block (#56496) * Bring changes from #55134 to the mobile code * Mobile - RichText - Force focus when the block is selected but the textinput is not, for cases when merging blocks. * Update Buttons integration test due to a change in the logic of the app where deleting the only button available does not remove the block * Mobile - Heading block - Adds integration test for merging a Heading block with an empty Paragraph block * Mobile - Paragraph block - Adds integration test to check that backspacing in an empty Paragraph block merges succesfully with the previous block and keeps the focus on the TextInput * Mobile - RichText - Set selection values to be the last character position when merging and adds some comments to explain what is doing * Mobile - Paragraph block test - Use focusTextInput to check the TextInput is in focused instead of checking for the fomatting toolbar button * Rename shouldFocusTextInputAfterUpdate to shouldFocusTextInputAfterMerge * Update CHANGELOG * Release script: Update react-native-editor version to 1.109.1 * Release script: Update CHANGELOG for version 1.109.1 * Release script: Update podfile * [RNMobile] Fixes a crash on pasting MS Word list markup (#56653) * Add polyfill for Element.prototype.remove * Enable unit tests of `raw-handling` API filter `ms-list-converter` * Update `react-native-editor` changelog * [RNMobile] Fix issue related to receiving undefined ref in text color format (#56686) * Fix issue related to receiving undefined ref in text color format In rare cases, `TextColorEdit` might receive the `RichText` ref as undefined. This ref is used to get the background color of the text and use it in the toolbar button. * Update `react-native-editor` changelog * Add test to cover undefined `contentRef` case * Correct typo in `changelog` * [RNMobile] Fix HTML to blocks conversion when no transformations are available (#56723) * Add native workaround for HTML block in `htmlToBlocks` * Add raw handling tests This file is a clone of the same `blocks-raw-handling.js` file located in `gutenberg/test/integration`. The reason for the separation is that several of the test cases fail in the native version. For now, we are going to skip them, but we'd need to work on them in the future. Once all issues in tests are addressed, we'll remove this file in favor of the original one. * Update blocks raw handling test snapshot with original values * Disable more pasteHandler test cases due to not matching test snapshot * Comment obsolete snapshots of blocks raw handling tests The reason for commenting them instead of removing is that, in the future, we'll restore them once we address the failing test cases. * RichText (native): remove HTML check in getFormatColors (#56684) * Mobile - Global Styles - Fix issue with custom color variables not being parsed (#56752) * [RNMobile] Address `NullPointerException` crash in `AztecHeadingSpan` (#56757) Address rare cases where a null value is passed to a heading block, causing a crash. * Release script: Update react-native-editor version to 1.109.2 * Release script: Update CHANGELOG for version 1.109.2 * Release script: Update podfile * Release script: Update react-native-editor version to 1.109.3 * Release script: Update CHANGELOG for version 1.109.3 * Release script: Update podfile * Mobile - Fix having the default font sizes when there are theme font sizes available * Update CHANGELOG entry --------- Co-authored-by: Carlos Garcia <fluiddot@gmail.com> Co-authored-by: Gerardo Pacheco <gerardo.pacheco@automattic.com> Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com>
artemiomorales
pushed a commit
that referenced
this pull request
Jan 4, 2024
* Release script: Update react-native-editor version to 1.109.0 * Release script: Update CHANGELOG for version 1.109.0 * Release script: Update podfile * Update `react-native-editor` changelog * Update `react-native-editor` changelog * Mobile - Fix issue when backspacing in an empty Paragraph block (#56496) * Bring changes from #55134 to the mobile code * Mobile - RichText - Force focus when the block is selected but the textinput is not, for cases when merging blocks. * Update Buttons integration test due to a change in the logic of the app where deleting the only button available does not remove the block * Mobile - Heading block - Adds integration test for merging a Heading block with an empty Paragraph block * Mobile - Paragraph block - Adds integration test to check that backspacing in an empty Paragraph block merges succesfully with the previous block and keeps the focus on the TextInput * Mobile - RichText - Set selection values to be the last character position when merging and adds some comments to explain what is doing * Mobile - Paragraph block test - Use focusTextInput to check the TextInput is in focused instead of checking for the fomatting toolbar button * Rename shouldFocusTextInputAfterUpdate to shouldFocusTextInputAfterMerge * Update CHANGELOG * Release script: Update react-native-editor version to 1.109.1 * Release script: Update CHANGELOG for version 1.109.1 * Release script: Update podfile * [RNMobile] Fixes a crash on pasting MS Word list markup (#56653) * Add polyfill for Element.prototype.remove * Enable unit tests of `raw-handling` API filter `ms-list-converter` * Update `react-native-editor` changelog * [RNMobile] Fix issue related to receiving undefined ref in text color format (#56686) * Fix issue related to receiving undefined ref in text color format In rare cases, `TextColorEdit` might receive the `RichText` ref as undefined. This ref is used to get the background color of the text and use it in the toolbar button. * Update `react-native-editor` changelog * Add test to cover undefined `contentRef` case * Correct typo in `changelog` * [RNMobile] Fix HTML to blocks conversion when no transformations are available (#56723) * Add native workaround for HTML block in `htmlToBlocks` * Add raw handling tests This file is a clone of the same `blocks-raw-handling.js` file located in `gutenberg/test/integration`. The reason for the separation is that several of the test cases fail in the native version. For now, we are going to skip them, but we'd need to work on them in the future. Once all issues in tests are addressed, we'll remove this file in favor of the original one. * Update blocks raw handling test snapshot with original values * Disable more pasteHandler test cases due to not matching test snapshot * Comment obsolete snapshots of blocks raw handling tests The reason for commenting them instead of removing is that, in the future, we'll restore them once we address the failing test cases. * RichText (native): remove HTML check in getFormatColors (#56684) * Mobile - Global Styles - Fix issue with custom color variables not being parsed (#56752) * [RNMobile] Address `NullPointerException` crash in `AztecHeadingSpan` (#56757) Address rare cases where a null value is passed to a heading block, causing a crash. * Release script: Update react-native-editor version to 1.109.2 * Release script: Update CHANGELOG for version 1.109.2 * Release script: Update podfile * Release script: Update react-native-editor version to 1.109.3 * Release script: Update CHANGELOG for version 1.109.3 * Release script: Update podfile * Mobile - Fix having the default font sizes when there are theme font sizes available * Update CHANGELOG entry --------- Co-authored-by: Carlos Garcia <fluiddot@gmail.com> Co-authored-by: Gerardo Pacheco <gerardo.pacheco@automattic.com> Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #56512
Related PRs:
What?
This PR addresses a regression introduced in #55134.
Trying to merge an empty Paragraph block with another RichText-based block, the block would be removed, the keyboard would be hidden and no block would be focused.
If there are two empty Paragraph blocks and you create a new one and try to merge it, the last two would be removed and the keyboard hidden.
Why?
It breaks the functionality of merging an empty Paragraph block with other RichText-based content.
How?
First, it introduces some of the changes of #55134 for mobile, it also adds a few new changes to make it work.
For the RichText component in the block editor, a new check is added to focus in the TextInput if the block gets selected from an action after merging with another RichText.
Updates the
add-block.jsintegration test helper to make sure it looks for the block's name within the Inserter Modal and not the whole block list.Paragraph tests, it adds a new test that checks that after merging an empty Paragraph block with another one the TextInput is focused successfully, by checking the
Boldformatting option is visible.A new test was also added for the Heading block that will check the fixed functionality added in #55134 that addressed #16436. Backspacing at the beginning of a Heading block with an empty Paragraph block above, should keep the Heading block and shouldn't convert it into a Paragraph block.
Buttons block, it removes a test where deleting the text in the only available Button in the Buttons block would delete the block completely, to keep parity with the web editor and the latest changes.
Testing Instructions
Follow the following test cases using these builds:
Merge an empty Paragraph block
Merge a Heading block with an empty Paragraph block
Writing flow
Checklist
Rich Text Format
Splitting and merging
Check different blocks
Check for focus loops
Testing Instructions for Keyboard
N/A
Screenshots or screencast
Before.mp4
After.mov