Update caret position after inserting link

[pinarol]

To Fix: #679

Gutenberg PR: WordPress/gutenberg#14317

With this PR we are putting the caret at the end of the linked text when we insert a link. This needs to be tested both on Android & iOS.

Following screen captures are taken from this PRs branch:

iOS:

Android:

TO TEST
Testing prerequisites

For WPiOS

Checkout the PRs branch to any arbitrary folder and cd .. to it
run yarn install, yarn start
Open XCode WPiOS on the latest develop
Clean build folder on Xcode, and then run the app

For WPAndroid

open grade.properties at WordPress-Android folder
add wp.BUILD_GUTENBERG_FROM_SOURCE = true to grade.properties
checkout the PRs branch in the subrepo of WordPress-Android repo
cd to WordPress-Android/libs/gutenberg-mobile
run yarn install, yarn start
yarn wpandroid on a separate terminal in the same directory

Test steps:

Test 1 - Inserting link when no text is selected

• Tap somewhere in a paragraph/heading block
• Tap links button in the toolbar
• Add a link and close the links ui
• Verify that the caret is at the end of the inserted link

Test 2 - Editing an existing link

• Select an existing link in a paragraph/heading block
• Tap links button in the toolbar
• Update the visual text of the link and close the links ui
• Verify that the caret is at the end of the updated link

Test 3 - Select a text and add a link

• Select some text in a paragraph/heading block
• Tap links button in the toolbar
• Add a url for the link and close the links ui
• Verify that the selection remains same

[mzorz]

Verified on Andorid, works like a charm LGTM

[pinarol]

@SergioEstevao could you please check for the iOS side? Thanks!

[hypest]

Sorry for the late input on this but, I'm wondering if the behavior implemented here will match the web's side behavior and whether any fixes should be done on the web side too. What do you think @pinarol ?

[SergioEstevao]

This is working correctly on iOS. Good work!

[pinarol]

@hypest 👋 I checked the convo for the same issue on for the web side, I based my fix on that one #679 (comment) I hope I didn't miss any other thing

[pinarol]

just adding the related comment for the web side WordPress/gutenberg#7980 (comment)

[pinarol]

hey @hypest 👋I did some investigation about how to share the caret positioning logic after inserting a link between web and mobile.

• We have different submitLink functions for web and mobile and it looks like we can't use the same function for both. but we can call same sub-functions for parts that calculate the caret position, although this doesn't guarantee that platforms won't differ in the future but still better than nothing.

• So in terms of sub-functions we already use the same insert() function, that means we already share the caret logic in cases where we insert a link with no text selected beforehands or update the existing link. For this case all I had to do was just reflecting the already calculated caret position to aztec and the problem was fixed.

• The difference exists for the case where we select a text and transform it to a link. We use applyFormat method to achieve this and that method doesn't change the selection position so I am changing it afterwards on mobile side and web is not changing it yet. (what is more, we have apply-format.js, apply-format.native.js so they are different functions with different input params) Currently I couldn't come up with a nice solution to make both platforms use same logic for this case. we kinda need a new function like apply format and put caret at the end and call it from both web and mobile but it wouldn't serve the purpose if one day web just replaces that function call on their side. so I kinda ran out of ideas on this. I can really use some help or other ideas, thanks!

[hypest]

Thanks for the analysis @pinarol . Seems like we prbably need to break up some functions to smaller ones so that we can keep the cross-platform parts the same and only nativize the rest. Can you seek out the person working on it on the web side (if someone is already) or come up with a proposal (PR even) we can run by our web side friends?

[pinarol]

@hypest as we discussed today I've opened an issue to do the follow up later since there's still an ongoing convo on web side. #737

I reverted the line which makes mobile behavior differ from web, currently web and mobile behaves same. Also updated the 'Test 3 - Select a text and add a link' in the description

[pinarol]

hey @mzorz could you be able to check this again? I made a small change and updated Test 3, also updated the branch from develop.

[mzorz]

Tested! Verified all 3 test cases work correctly. I found one weird case by mistake:

1. start a draft, enter some text
2. place the cursor on a word
3. tap the link button
4. in the URL field, insert something with a space in it, for example yahoo com instead of yahoo.com, and dismiss the links ui
5. observe 2 different words are inserted where the cursor was, yahoo and com
6. place the cursor on yahoo and tap the links button -> observe the links ui shows empty
7. place the cursor on com and tap the links button -> observe the yahoo com (invalid) address appears there.

I think it would be wise to do some URL validation if we are not doing it? And if we are, then something's not working well there :)

I understand this is not specific to this PR which only cares about caret positioning so, I'm going to give this one the go, and open another issue for this.

EDIT: reported here #740

[mzorz]

LGTM!