Page MenuHomePhabricator

VisualEditor: Improve link inspector to address usability issues
Closed, ResolvedPublic

Description

There's currently two user experience issues that I think need to be addressed soon.

  1. Creating (or, more precisely, inserting) a new link.

When creating a new link, there is no intuitive way to assign it a label until you decide to close the link inspector at which point the link target text appears as the link label.

  1. Editing the label of an existing link.

When editing the label one has to manually ensure all of the link text is selected and replaced. In doing so it is almost impossible not to accidentally delete the link.

Given "foo <a>bar</a> baz", selecting "bar" manually and typing will replace it with a text node. So essentially the only way to change is to do it in two arbitrary halves.

Additionally, even if selecting and replacing would work, selecting an entire external link (e.g. right after insertion and the url becoming the label) can be quite difficult since URLs tend to contain one or more word-boundaries (that is word-boundaries from the perspective from double-click make-word-selected features that browsers provide).

2b. Anti-pattern: Ambiguous focus, unable to overwrite text

When clicking on the link the "right" way, it opens the inspector at which point the entire link label is nicely selected (even if the link spans multiple space-separated words or things like urls that contain word-boundary characters), but it seems hard to retain this selection as any action outside the inspector collapses the selection (maybe impossible, at least I couldn't).

This also makes it hard to fully delete a link. The unlink feature (or clear-formatting) leaves the text. So one would have to carefully make a selection that spans the entire link label and remove that.


Note, there's currently a few open bugs for technical problems (not UX problems) that might require a (whether or not temporary) solution to the above UX issues as they currently happen due to certain actions not being expected by the code. In fixing those, we most likely have to come up with some way to handle this.

For example: (bug 56976) Pawn appears when clicking into the label after creating a link

When creating a new link and clicking (conceptually "back") in the document
where the cursor was from the link inspector, a pawn appears. This happens because right now links have no label until you close the inspector. So when creating a new link, the cursor position remains empty the entire time. When eventually manually closing the inspector (or clicking anywhere other than the current paragraph) the empty (internal pawn) placeholder label is replaced with the text of the link target.

The immediate fix would be to do the expansion earlier (or even live while the user is working on the link target), however that still leaves a smell of UX issue #2 afterwards.

Summary of issues:

  • It is impossible to select a link label (selecting it also selects the open/close tag, which means typing over it removes the link). To change a label, one has to enter the new label inside the old (e.g. in the middle of it), and strip away the outer halves of the old label.
  • It is hard to provide a label for a new link as one has to close the inspector first.
  • It is hard to delete a link (as an object that is, unlinking text is easy) as one can't focus it. And the auto-selection when opening the inspector always disappears when returning to the document from the inspector.

Possible solutions:

  • Implement a new user interface concept in the content editable surface that would allow a cursor (and selection) to fully cover an annotation whilst not covering the open/close of the annotation. This would enable one to select (and replace) the label of a link.
  • Add the link label as an additional field to the link inspector.
  • (or; maybe) turn the link into a focusable node and have it no longer be an annotation. This naturally comes with complications, but may be for the best.

Version: unspecified
Severity: normal

Details

Reference
bz57716