After two blocks are merged, show cursor on the end of the text field #14820

marecar3 · 2019-04-04T12:23:05Z

Fixes : wordpress-mobile/gutenberg-mobile#699

Support for gutenberg-mobile PR : wordpress-mobile/gutenberg-mobile#756

…k-moves-cursor-to-last-location-in-previous-block

etoledom

Hey @marecar3 - Nice job moving the caret logic to JS 🎉

As I understand, we are basically moving the caret at the end if the block has been selected but RichText hasn't been set to focus yet. This happens when the block using RichText has been selected programmatically instead of by the user tapping on RichText.

This works well since when the user tap on RichText directly, onFocus is triggered first, setting isTouched to true and keeping the caret where the user tapped. But when the system set the focus, componentWillReceiveProps is called first, and then onFocus, moving the caret at the end.

This also work with BottomSheet since when it is dismissed, onFocus is also triggered first.

Please let me know if I'm wrong :)

I tried to find other instances where we set focus programmatically where this might be a problem, and I found a small corner case:

When we delete a block, the previous block is automatically selected in a similar way than when merging blocks, so in this case the caret is also moved to the end. I don't think this a big issue and it might be even expected? I'm not sure 🤔

I wonder if this logic might also be a problem in future features.

I did found a small bug in the logic:
When we merge into a block that hasn't been selected yet, the caret is still at the beginning. I added a code comment where I think is the problem.

I miss some comments to clarify what's happening. Maybe to encapsulate the logic inside componentWillReceiveProps into a helper function moveCaretToTheEndIfNeeded() (or similar explanatory name) would help.

etoledom · 2019-04-05T08:03:08Z

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

+		// This logic will handle the selection when two blocks are merged or when block is split
+		// into two blocks
+		if ( nextTextContent === this.savedContent || nextTextContent.startsWith( this.savedContent ) ) {
+			this.forceSelectionUpdate( this.savedContent.length, this.savedContent.length );


When the block haven't been selected yet, this.savedContent is empty. So this won't move move the caret at the end.
Maybe we can set the real savedContent value on constructor() instead of an empty string?

good catch here @etoledom , managed to reproduce by starting a draft adding 2 paragraphs then exiting the editor and opening again, then deleting text from the second paragraph

Hey @etoledom, the good catch here. I have fixed the problem but in another way as when I did like you suggest It showed another issue.

…k-moves-cursor-to-last-location-in-previous-block

Fixed bug with positioning caret on the start of text when merging two blocks if first has never been selected in the past

marecar3 · 2019-04-05T22:40:27Z

Hey, @etoledom thanks for the good review! You have found some good bugs here :)

When we delete a block, the previous block is automatically selected in a similar way than when merging blocks, so in this case, the caret is also moved to the end. I don't think this a big issue and it might be even expected? I'm not sure 🤔

I have seen similar behavior on Gutenberg web, so I guess it's ok to have it same?

I did find a small bug in the logic:
When we merge into a block that hasn't been selected yet, the caret is still at the beginning. I added a code comment where I think is the problem.

I think I have fixed that bug now, so you can give it a try.

mkevins · 2019-04-08T11:41:09Z

On Android emulator, I'm encountering an issue where I can't merge blocks with backspace.

To reproduce:

Place caret in the middle of a paragraph block.
Press [Enter] to split the block (the caret will be at the start of the new block).
Press [Backspace] to merge the blocks.

Expected result:

Two paragraph blocks are merged back together.

Actual result:

Nothing seems to happen.

Here is a screenshot:

etoledom

Thank you @marecar3 for the updates!

I have seen similar behavior on Gutenberg web, so I guess it's ok to have it same?

I agree ✅

I think I have fixed that bug now, so you can give it a try.

Fixed 🎉

Looks good on iOS!
Let's keep this solution. Hopefully in the future we can have a dispatch action (or similar) to adjust selection from other than just within RichText.

…k-moves-cursor-to-last-location-in-previous-block

marecar3 · 2019-04-09T16:12:17Z

On Android emulator, I'm encountering an issue where I can't merge blocks with backspace.

To reproduce:

Place caret in the middle of a paragraph block.

Press [Enter] to split the block (the caret will be at the start of the new block).

Press [Backspace] to merge the blocks.

Expected result:

Two paragraph blocks are merged back together.

Actual result:

Nothing seems to happen.

Here is a screenshot:

Hey @mkevins nice one!!! :)
Thanks for finding this bug as it was very important and also it didn't work on Android device.
I have fixed it now, so please can you do one more iteration of testing so that we are sure that everything is working? Thanks!

mkevins · 2019-04-10T11:34:05Z

I just tested it out and the Android emulator, and it looks like your latest patch fixed the issue I was encountering! 🎉

Screenshot:

In the process of testing, I encountered a different issue, but it's not related to this PR. I have opened an issue to track it: wordpress-mobile/gutenberg-mobile#851 .

Thanks @marecar3 !

marecar3 · 2019-04-10T14:25:50Z

Thanks @mkevins and @etoledom !!!

mkevins

Hey @marecar3 👋 . I just have a few comments I was hoping you could help me with to better understand the changes.

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

marecar3 · 2019-04-12T14:06:06Z

Hey @mkevins, I have left the answers. Let me know if they are clear or if you have some other questions.

mkevins · 2019-04-12T14:46:08Z

Thanks @marecar3 for clarifying those points. Your explanation is very helpful!

…WordPress#14820) After two blocks are merged, show cursor on the end of the text field

hypest · 2019-04-24T10:02:17Z

I'm a bit confused by the new savedContent class variable. We already have lastContent and the distinction between the two is not clear. Can we pick another name for the new variable in an attempt to differentiate its use?

marecar3 · 2019-04-24T18:49:17Z

Hey @hypest, your suggestion is on the place, we can do it.
Should I open PR with those changes or we can use some active PR for that?
Thanks.

hypest · 2019-04-24T20:02:58Z

Hey @marecar3, a dedicated PR would be better to track, review and merge 👍

marecar3 added 4 commits April 3, 2019 23:48

Control caret position from JS side

00dbe79

Increase condition reusability

a02a0f9

Small refactor

667f9cf

Merge branch 'master' into rnmobile/699_Deleting-all-contents-of-bloc…

a03d22f

…k-moves-cursor-to-last-location-in-previous-block

marecar3 requested review from Tug, pinarol, mzorz and etoledom April 4, 2019 12:23

marecar3 changed the title ~~Rnmobile/699 deleting all contents of block moves cursor to last location in previous block~~ After two blocks are merged, show cursor on the end of the text field Apr 4, 2019

marecar3 added 3 commits April 4, 2019 10:41

Avoid forcing selection if content is empty

2ebb333

Fixed and operator

7e20c2e

Fixed lint errors

378b92e

marecar3 mentioned this pull request Apr 4, 2019

After two blocks are merged, show cursor on the end of the text field wordpress-mobile/gutenberg-mobile#756

Merged

marecar3 added 2 commits April 4, 2019 12:07

Added proper comment

5ec9a4b

Removed argument type declaration

5f94443

etoledom reviewed Apr 5, 2019

View reviewed changes

marecar3 added 2 commits April 5, 2019 17:07

Merge branch 'master' into rnmobile/699_Deleting-all-contents-of-bloc…

5648d22

…k-moves-cursor-to-last-location-in-previous-block

Encapsulate logic into self explanation method

4875cd7

Fixed bug with positioning caret on the start of text when merging two blocks if first has never been selected in the past

etoledom self-requested a review April 8, 2019 12:26

etoledom approved these changes Apr 9, 2019

View reviewed changes

Merge branch 'master' into rnmobile/699_Deleting-all-contents-of-bloc…

00e844b

…k-moves-cursor-to-last-location-in-previous-block

marecar3 requested a review from mkevins April 10, 2019 14:25

marecar3 merged commit 0bc9067 into master Apr 10, 2019

marecar3 deleted the rnmobile/699_Deleting-all-contents-of-block-moves-cursor-to-last-location-in-previous-block branch April 10, 2019 14:26

youknowriad added this to the 5.5 (Gutenberg) milestone Apr 12, 2019

mkevins reviewed Apr 12, 2019

View reviewed changes

packages/block-editor/src/components/rich-text/index.native.js Show resolved Hide resolved

packages/block-editor/src/components/rich-text/index.native.js Show resolved Hide resolved

mkevins mentioned this pull request Apr 12, 2019

[Mobile] Fix caret position after inline paste - Update. #14957

Merged

5 tasks

mchowning pushed a commit to mchowning/gutenberg that referenced this pull request Apr 15, 2019

After two blocks are merged, show cursor on the end of the text field (…

7eef593

…WordPress#14820) After two blocks are merged, show cursor on the end of the text field

This was referenced Apr 15, 2019

Bump version number to 5.5.0-rc.1 #14981

Merged

Bump/5.5 #15011

Closed

Release/5.5 #15012

Closed

Bump plugin version to 5.5 #15013

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

After two blocks are merged, show cursor on the end of the text field #14820

After two blocks are merged, show cursor on the end of the text field #14820

marecar3 commented Apr 4, 2019

etoledom left a comment

etoledom Apr 5, 2019

mzorz Apr 5, 2019

marecar3 Apr 5, 2019

marecar3 commented Apr 5, 2019

mkevins commented Apr 8, 2019

etoledom left a comment

marecar3 commented Apr 9, 2019

mkevins commented Apr 10, 2019 •

edited

Loading

marecar3 commented Apr 10, 2019

mkevins left a comment

marecar3 commented Apr 12, 2019

mkevins commented Apr 12, 2019

hypest commented Apr 24, 2019

marecar3 commented Apr 24, 2019

hypest commented Apr 24, 2019

After two blocks are merged, show cursor on the end of the text field #14820

After two blocks are merged, show cursor on the end of the text field #14820

Conversation

marecar3 commented Apr 4, 2019

etoledom left a comment

Choose a reason for hiding this comment

etoledom Apr 5, 2019

Choose a reason for hiding this comment

mzorz Apr 5, 2019

Choose a reason for hiding this comment

marecar3 Apr 5, 2019

Choose a reason for hiding this comment

marecar3 commented Apr 5, 2019

mkevins commented Apr 8, 2019

etoledom left a comment

Choose a reason for hiding this comment

marecar3 commented Apr 9, 2019

mkevins commented Apr 10, 2019 • edited Loading

marecar3 commented Apr 10, 2019

mkevins left a comment

Choose a reason for hiding this comment

marecar3 commented Apr 12, 2019

mkevins commented Apr 12, 2019

hypest commented Apr 24, 2019

marecar3 commented Apr 24, 2019

hypest commented Apr 24, 2019

mkevins commented Apr 10, 2019 •

edited

Loading