Gutenberg: Links: Can't add plain text after insert link at end of paragraph

[buzztone]

It appears to be impossible to add any plain text after an external link is added at the end of a paragraph.

Any text added at the end of a paragraph is added to the link - even if I hit return to create a new line.

[jasmussen]

I could get this to work thanks to the new link boundaries — i.e. press right arrow at the end of a link to escape it. Though this report should still be treated as a bug though, i.e. enter should probably break out of the link.

Additionally I noticed what appears to be a memory leak. If you write a link at the end of a paragraph, then use the link boundary feature to escape it to the right, then type some text, then backspace to delete the text, everything locks up.

[buzztone]

Pressing the right arrow at the end of a link to escape it is clearly not something I would have thought of doing in this case, especially without some guidance that this action is required.

I expected that pressing space would do that. This seems to me the action that most users would try.

Is it impractical to implement pressing space at the end of a link to escape it?

[aduth]

Is it impractical to implement pressing space at the end of a link to escape it?

What if I were to want to include additional words in my link?

[aduth]

In the default TinyMCE implementation, there's more emphasis in the form of a background color applied when "within" the link boundary. Try selecting a link on the homepage:

https://www.tinymce.com/

I'm surprised we're not doing something similar. Perhaps this could help?

[jasmussen]

I'm surprised we're not doing something similar. Perhaps this could help?

We are doing this, though:

But we can increase the contrast if you like?

Are you seeing this issue, though?

Additionally I noticed what appears to be a memory leak. If you write a link at the end of a paragraph, then use the link boundary feature to escape it to the right, then type some text, then backspace to delete the text, everything locks up.

[aduth]

Ah, I think I found a separate edge-case bug. If you apply a link but never enter a URL, the color is shown as though it's hyperlinked, but no background color is shown.

[buzztone]

What if I were to want to include additional words in my link?

In this case I would be looking to edit an existing link which I would do by clicking on the link.

This highlights the link and allows me to edit the link contents any way I want.

Not being be able to simply type after an existing link seems unnatural to me.

Say I have a line of text that I want to extend. So I click at the end of the line, add a space and continue typing. That seems like the natural use case to me. I can do that if the last item on the line is not a link.

If the last item on the line is a link it just doesn't work in this way. I have to press right arrow to escape the link.

[mtias]

@aduth @jasmussen is this still an issue?

[jasmussen]

I had an issue, yes. It's sort of borderline:

As you can see the link boundary spills over in the 2nd paragraph. When I tested earlier today, it wouldn't go away at all.

[mtias]

@EphoxJames @tg-ephox is this something you could take a look at?

[aduth]

Given the implementation of #2483, I expect this is still an issue for other inline nodes were boundaries are implemented (i.e. code with "`").

Also behaves quite strangely where:

• Merging two paragraph blocks where the first contains a code block will reset cursor to beginning of where the inline code node starts
• Pressing left to the first character in the editable will trigger focus to shift to the previous block / title (so I cannot add text before the inline code node)
• Pressing Cmd+A to select all where paragraph includes inline code node briefly selects text, but then it is quickly unselected again

I created a short screencast with voiceover demonstrating these:

https://cloudup.com/cS5G9c-s374

Since there's a handful of separate problems, it might be worthwhile splitting into multiple issues.

[jasmussen]

Possibly related:

What happens in that GIF is that if you use a formatting that has an inline boundary, like bold, italic or links at the end of a paragraph block, when you then press the right-arrow to escape the link boundary, you go to the next line.

This only happens if you are editing not the last block.

[aduth]

A couple issues I noted in https://github.com/WordPress/gutenberg/issues/1246#issuecomment-327966045 will be resolved in #5034.

Re @jasmussen's feedback at https://github.com/WordPress/gutenberg/issues/1246#issuecomment-363705515: At quick glance this appears to be related to isHorizontalEdge firing early when considering whether the right arrow press at the end of an Editable ending in an inline block should move into the next block. (cc @iseulde)

[ZebulanStanphill]

As of Gutenberg 2.6, pressing → allows you to exit a formatting boundary (e.g. links or italic text) without moving to the next block, and pressing Enter moves you to next block without carrying over the link. So should this issue be closed now? The original bug reported has been fixed now, and I think other issues like discoverability of the keyboard functionality for → or how to do this with a mouse belong in separate issues.

EDIT: Nevermind, I just found out that the → issue is still happening. It only happens in some situations, though. I am not sure what exactly causes the issue to happen or not, though. :confused:

[jasmussen]

It does seem like it is still an issue, correct:

[jasmussen]

Closing this in favor of #2993, as that seem to be more descriptive of the remaining issue. Thank you for opening this issue, @buzztone, I hope it's okay that I close this one as part of some triage!

[buzztone]

@jasmussen I'm happy for you to close this issue in favor of #2993 but would encourage you to do further user testing on adding and editing links.

We have been using Gutenberg since June 2017 on all the sites we maintain for our team's internal use. Our pages have lot of links both within paragraph and within lists. We find still many small issues like this when adding & editing links.

[jasmussen]

We have been using Gutenberg since June 2017 on all the sites we maintain for our team's internal use. Our pages have lot of links both within paragraph and within lists. We find still many small issues like this when adding & editing links.

Absolutely, it's an important issue to fix. @karmatosed is looking into link improvements a lot right now. The reason for closing is that this appears to be an issue that is chiefly related to the _boundary_ feature when near the edges of blocks, so it applies both to links, italic, bold and code as well.

Or are there other issues with links you are experiencing? I know a bunch are tracked already, just want to make sure I'm not closing something in error.

[ellatrix]

@jasmussen Did you mean #5095? This issue is ongoing and given that there are three tickets so far reporting this problem, I'll look for a fix right now.

[ellatrix]

Oh I see you linked it at the end there, sorry.

[jasmussen]

Yes that was the one I meant. It's been messy :D

Thank you for looking 💓