Link UI: Changing link text can modify the wrong text

[mreishus]

Description

When editing the text of an existing link, sometimes the wrong text can be edited because a simple search and replace disregarding the active selection is done.

I believe the origin of this was #33849.

Step-by-step reproduction instructions

• Create new paragraph block
• Type a b c a
• Select the second occurrence of a, at the end of the text, press the link button to create a link, type in a url like example.com and press enter. You should now have text a b c a with the second a linked.
• Highlight the second a by selecting with the mouse.
• In the link popup, click the pencil icon to edit the link.
• You should see 'text' and 'url' fields. In the text field, change a to z and press enter.
• Expected to see: a b c z, because I was editing the link on the second a.
• Actually see: z b c a, because it does find and replace on the text of the link.
  Should be easier to understand in the screen recording.

Screenshots, screen recording, code snippet

Contrived example (word boundary)

Peek.2022-06-16.12-48-link-bug.mp4

Contrived example (within word)

Peek.2022-06-16.12-51-link-bug-2.mp4

For a less contrived example, imagine editing a word that was used twice or more in a long paragraph.

Environment info

982cfc7 from 2022-06-16 on trunk branch in wp-env.
Also seen on production wp.com on 2022-06-16.
I tried on earlier versions, going back to 2022-01-01 and still saw the behavior back then.

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

Mechanisms

The behavior is caused by this line:

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

Line 158 in 982cfc7

newValue = replace( value, richTextText, newValue );

In the case of a b c a with the second a selected, and changing the text to z, the replace call sees value with .text of a b c a, and runs a replace on it, looking for a, and changes the first one it finds; even if it's not what I have selected.

The call to it does have the selection information:

One idea I had was to make something like replaceInSelection, which does the same as replace, but only considers text within the start-end range. However, I know so little about gutenberg that I don't know if this is a good approach.

[getdave]

Ok I verified this thank you @mreishus for reporting.

I think the fix is essentially

• grab the active format (that's the link you're replacing)
• find the index boundaries of the format
• split out the format as a value
• do the search/replace update on that value
• replace the original format with the new (replaced) one.

Unfortunately the tools in rich text don't seem that accommodating for this.

Note that the start and end values may not represent the active format. This is just the current selection. So even if you have an active format (e.g. core/link) then the start and end values don't necessarily equate the the start and end indices of the format.

I added a getFormatBoundary() to solve this issue before so luckily getting the indices of the format is a solved problem.