Changing URL in link after changing text outside the popover resets it

[MatzeKitt]

Description

If you change the text of a link in the editor itself and afterwards changing the URL of said link in the popover, the URL change won’t save.

Step-by-step reproduction instructions

1. Add a paragraph and add content.
2. Add a link to the paragraph, e.g. with text "test" and URL "#test".
3. Save the page and reload.
4. Click behind the link.
5. Move the cursor with the arrow keys until you placed it inside the link.
6. Remove the last "t" with something different.
7. Edit the URL from "#test" to "test2".
8. Press enter.

The URL is still "#test" afterwards.

Screenshots, screen recording, code snippet

Bildschirmaufnahme.2023-07-15.um.16.09.59.mov

Environment info

• WordPress 6.2.2, no Gutenberg plugin
• macOS 13.4.1 (c)
• Safari 16.5.2

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[firoz2456]

I can replicate this bug.
WordPress 6.3-beta4

I have attached a video(including voice) that shows how to replicate the bug. However, the bug seems to be difficult to reproduce.

Changing.URL.in.link.after.changing.text.outside.the.popover.resets.it.mov

[Mamaduka]

@getdave, this might be related to the value synchronization issue we discussed last month - #51387.

[getdave]

This bug does not happen in other usages of LinkControl such as the Navigation block.

Looking into the inline usage of Link Control within RichText is the best bet.

I tried replicating the bug and I noticed that switching to code view shows that the href of the link in the HTML markup remains as the old link. So something is causing it not to be updated.

Looking at this now.

[getdave]

This line appears to be wiping out the new link value's url change. I still don't know why...

gutenberg/packages/format-library/src/link/inline.js

Line 140 in 51774ef

newValue = applyFormat( value, linkFormat );

The flow goes into this condition which is not true meaning no processing seems to happen. That could be a bug...

gutenberg/packages/rich-text/src/apply-format.js

Line 45 in 51774ef

if ( startFormat ) {

This only seems to happen when using the keyboard and making a selecting around the last char. Using a mouse and clicking in the "middle" of the text does not cause the bug to manifest.

The formats start at position 11 and end at 14. The startIndex and endIndex end up as 15. This means the "seeking" code doesn't find the format to be replaced. I think we have our bug...but how to fix... 🤔

[getdave]

I've raised a placeholder PR in #53533 which has an e2e test which replicates the bug.

Steps:

• New Post
• Add text in paragraph block.
• Select the last word in the text and create a link with a URL.
• Save / Submit the link.
• Move cursor to rightmost edge of the text.
• Use left arrow key to move into the "boundary" of the link
• The link UI should display.
• Edit the link
• Change the URL to something else.
• Save the link.
• Click the link again.
• See it has not updated.

@getdave, this might be related to the value synchronization issue we discussed last month - #51387.

I checked that removing the value syncing does not fix this Issue.

[bernattorras]

+1 Just ran into this issue when working with a T51 partner. I'm also able to replicate it locally. Feel free to ping me if I can help with anything!

[0aveRyan]

This is particularly rough in the common workflow of duplicating content with linked text and then intending to update both the text and link 😅

1. Change text in hyperlink
2. Change the URL and save in the LinkControl
3. The hyperlink change is blown away
4. Deselect hyperlink and reselect, change URL and saves.

gutenberg-53533-example.mp4