Implement unlink UX

[oleq]

A followup of #4712.

---

There are 2 possible approaches to unlinking. They could even exist along each other, it's not a big deal:

Through link panel

Pros

• It does not clutter the panel but gives the user a chance to change their minds.
• Some people might look for unlink in the same UI where they linked in the first place.
• It does not clutter the toolbar.

Cons

• Requires 2 clicks to unlink (open link panel, click the button).

Unlink button in the toolbar

Pros

• A single click to unlink.
• v4–compatible, people could expect something similar.

Cons

• Clutters the toolbar. However, this could be resolved by creating a drop–button in the toolbar.
  • Drop–button makes unlink 2 clicks away again :)

[scofalik]

I think that unlink feature is rarely used, I guess mostly after someone pasted some contents and then want to remove links. I think that if someone wants to remove a link they want to remove also the text of the link. Since this is very simple UX/UI we can't really go wrong in any case.

I'd go with two toolbar buttons AND unlink button in linking tooltip:

• people are used to separate unlink button, I always look for it if I need this functionallity,
• it's faster in a scenario that is in my opinion more common that is removing links from pasted content (I still don't belive that people write some text, link some words and then decide to remove those links after all),
• it does not clutter toolbar that much but is easy to remove if someone wants to -- we still have this functionallity in linking tooltip.

[oleq]

@scofalik You just confirmed that my ideas are right :)

As for detailed unlink mechanism, I'm for adapting the default mechanism from v4:

• Unlink selected text only, even if there's more to unlink.
• Retain the selection after unlink.

[scofalik]

Yes I did, I just didn't want to go with "+1" :P

[RyszardB]

my proposal.. change the button link to unlink

[scofalik]

Then you can't change the link href.

Well you could by double clicking the button, if selection would appear on whole unlinked text.

[oleq]

Yes, buttons can change dynamically in the toolbar to reflect changes in the content. However only if

• The button which is to be replaced is irrelevant in the current context. Which is not true in case of the link button, because it's still useful to edit existing link, if selection is anchored to one.
• There's still an easy way to access the feature, if necessary. Like keyboard shortcut or some other place (i.e. menu) which offers access to the feature.
• The number of items in the toolbar before and after the change match. Otherwise, if toolbar wraps to the new line, but without a single item it fits, removing that item will cause geometry change, re–paint and visual displacement of edited content/toolbar depending on the selection, which changes all the time.

Anyway, editing link by placing a selection inside of it with mouse will become another issue I'm preparing at this moment.

[RyszardB]

hmm.. only one button.. check this out:

[oleq]

@RyszardB Not sure if I got it right. You idea is basically to get rid of unlink button in the toolbar and that's it?

[Reinmar]

With just one button it will be really confusing that you need to click the link button and then the unlink button in the tooltip to unlink. Very bad discoverability and as you can see here https://twitter.com/reinmarpl/status/766384770284740608 it's VERY dangerous :D.

So, IMO we must have some unlink button visible when you have selection in a link. It can be a toolbar button or a button floating over a link. I believe that the second option wasn't yet mentioned. We could have a small balloon over link (and later over images, tables, etc.) with the most useful options. In case of a link it will be edit link and unlink buttons.

[oleq]

@Reinmar I created a separate issue for it so let's discuss it there and find out what is possible and what is not.

[oleq]

Anyway, whatever solution we finally agree upon, I expect this issue to produce at least a basic (v4–like) unlink button in the toolbar in this iteration. This is the minimum goal for iteration3.

[oleq]

Closed by ckeditor/ckeditor5-link#19.