Insert link: the link selection disappears when entering a link

[noisysocks]

Issue Overview

When inserting a link, your text selection disappears when the focus changes into the Paste URL or type text field. This makes it hard to tell exactly what text you are linking.

Screenshots / Video

Steps to Reproduce (for bugs)

1. Create a paragraph block
2. Select some text
3. Click on the Link button in the formatting toolbar

Expected Behavior

Your cursor should be in the Paste URL or type text field and there should be a blue selection rectangle around the text that you selected.

Current Behavior

Your cursor is in the Paste URL or type text field but the text you selected is no longer selected.

Possible Solution

The classic editor solves this by immediately inserting a link placeholder, as soon as you create a link:

Related Issues and/or PRs

This was flagged as an issue in #4572 and #5960 (comment). #4909 contained a failed attempt at fixing this.

[designsimply]

I tested using WordPress 4.9.7 and Gutenberg 3.3.0 and confirmed that, if I select text and click the link icon in the paragraph block, no formatting or highlighting appears to show me what link text is currently selected. Tested with WordPress 4.9.7 and Gutenberg 3.3.0. (screenshot)

[talldan]

This seems to have regressed in master - reopening the issue. Unsure why the e2e tests didn't catch it.

[noisysocks]

Is this to do with the recent RichText changes? @WordPress/gutenberg-core

[ellatrix]

Yes, the link UI was rewritten without the placeholder link... We can restore that I guess.

[ellatrix]

I can look into this, but I'm considering it low priority. Feel free remove my assignment if someone else would like to fix.

[gziolo]

@talldan or anyone else who has free cyles would you mind helping us with this one? I can tell you that @iseulde is super busy with work these days :)

[ellatrix]

Tbh I wouldn't add a link placeholder before it's inserted. That seems not so clean, we'd have to make sure the link is removed again etc. Would be nice if we could somehow keep the a selection or render a fake selection or something visible around the target.

[talldan]

Would be nice if we could somehow keep the a selection or render a fake selection or something visible around the target.

@iseulde By fake selection, I'm guessing you mean an element overlayed over the top of the text? I had a look into this idea, and I think it could be a winner. I used a similar approach to positioning the overlay as used in PositionedAtSelection to position the popover. Here's an example of how it looks (it seems to even work for multiple selected lines 🎉, though note the popover isn't particularly well positioned for multiline selections 😢 ):

Need to do some cross-browser testing and tidy up the code, but I'll try to have a PR submitted soon if all goes to plan.

[ellatrix]

@talldan Yes, that could be a fine approach. Something else we could try is having an internal format core/selection or something, that doesn't serialise but displays in the editor. So the link format type doesn't have to worry about cleaning it up later. Not sure which would be best though, just thoughts.

[talldan]

Clean up isn't an issue with this approach, as the selection renders in the <InlineLinkUI> component as a sibling of the popover (plus some additional logic to to not render once the link is applied).

[noisysocks]

Remember that different operating systems style text selection differently, and that users can change their text selection colour:

The fake selection would have to be styled in a platform agnostic way.

Personally, I think styling the placeholder selection or link as blue underlined text sends the strongest signal that a link is being inserted.

[youknowriad]

This is more a "nice to have" than a blocking issue.

[paaljoachim]

I am doing a status update.
Using Gutenberg plugin 9.8. Twenty Twenty One. WordPress 5.6.0.

The issue is still very much valid.

[ellatrix]

Iframing the content (#21102) will fix this.

[paaljoachim]

Great! As I see the Site Editor iframe PR has been merged then the work on iframing the Post Editor can also continue.

[jordesign]

Iframing task is complete and merged - and this issue is no longer present in my testing - so I'm going to close this issue.