Page MenuHomePhabricator

Can't place cursor to the right of a link at the end of paragraph (beyond the cartouche/nail) by clicking.
Closed, ResolvedPublic

Description

Clicking at the end of a paragraph that ends in a link will always place the cursor inside the link. You can still move the cursor to the right of the link using arrow keys, although on mobile arrow keys will probably not be available.

  1. In Chrome, write a paragraph in VE that ends in a link
  2. Click to the right of the link

Expected

  1. The cursor is placed outside of the link, such that typing does not continue the link

Observed

  1. The cursor is always placed inside of the link, and typing continues the link

Original report
Good evening. I found some bug appearing on cswiki, enwiki, hrwiki and possibly every wiki. In VisualEditor, if I add a link without adding punctation (like dots and commas) and click on the link to the right side to write, you can't write without editing that link. I have recorded a video showing the problem (don't worry, it's safe) - https://www.kapwing.com/videos/6020392678c4c9007a7414ec

Event Timeline

@Aklapper I also need to say this problem makes editing in VisualEditor much more difficult.

@Moson81: Hi, okay, but why do you mention me explicitly here? :)

As far as I know this is intentional behavior as you may want to have a different link text than the title of the link itself.
You can write behind it - see https://www.mediawiki.org/wiki/Help:VisualEditor/User_guide#Editing_links for docs how you can leave the link "field".

@Moson81 Are you able to type outside of the link if you move the cursor outside of it using arrow keys?

I could not reproduce this issue. What browser are you using?

The issue with references shown near the end of the video is probably separate, and already reported as T272207.

@matmarex If I click behind the link, it continues editing the link. This hasn't been happening before yesterday, if I clicked behind the link, it stopped being edited and I could write outside of it. So the problem started yesterday (7 February 2021) and it still lasts. Only if I use arrow keys, I'm able to write outside the link. I'm using Google Chrome.

Hmmm I'm not seeing this as a regression — I get the same behaviour going right back to 2016. Investigating further.

Esanders renamed this task from In VisualEditor, if you click on the end of a link that is on the end, you can't write behind it, you can only edit the link to Can't place cursor to the right of a link at the end of paragraph (beyond the cartouche/nail) by clicking..Oct 18 2021, 1:14 PM
Esanders updated the task description. (Show Details)

In Chrome, the cursor always goes inside the link. In Firefox it only goes inside the link if the position before you click is inside the link, otherwise it goes outside the link.

We have a dummy image after the link (which we call a nail) which should create an extra cursor position outside of the link, but it looks like the browser are being clever when it is at the end of a paragraph and collapsing it.

The calculation the browser does appears to be based on layout. Setting the width of the nail to 1px (instead of 0) fixes the issue, but that changes the spacing around links. Trying to counter this with margin-left:-1px re-introduces the bug.

...setting the width to 0.1px seems to be enough to trick the layout engine into thinking it has width, although this only works in Chrome. In FF the cursor will still stay in the link if it started there. This is reasonable behaviour, but I would prefer it to be more consistent.

Change 731731 had a related patch set uploaded (by Esanders; author: Esanders):

[VisualEditor/VisualEditor@master] Give nails a width to 0.1px to allow cursor placement at end of paragraph

https://gerrit.wikimedia.org/r/731731

The above patch doesn't fix the issue on mobile as there is separate logic that focuses the link the first time the DM offset is near it.

Change 731739 had a related patch set uploaded (by Esanders; author: Esanders):

[VisualEditor/VisualEditor@master] Never infer a mobile link annotation click from the DM

https://gerrit.wikimedia.org/r/731739

The 2nd patch and the follow-up improve the experience on mobile.

Change 731731 merged by jenkins-bot:

[VisualEditor/VisualEditor@master] Give nails a width to 0.1px to allow cursor placement at end of paragraph

https://gerrit.wikimedia.org/r/731731

I think the second patch means you may have to tap again sometimes to get into the link, but that's better than not being able to drop the cursor outside the link at all.

Change 731739 merged by jenkins-bot:

[VisualEditor/VisualEditor@master] Never infer a mobile link annotation click from the DM

https://gerrit.wikimedia.org/r/731739

Change 732056 had a related patch set uploaded (by Jforrester; author: Jforrester):

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (386526a35)

https://gerrit.wikimedia.org/r/732056

I think the second patch means you may have to tap again sometimes to get into the link, but that's better than not being able to drop the cursor outside the link at all.

Do you mean for a total of three taps? It is intended that 2 taps are required to start editing the link text.

If there are cases where there taps are required I agree that's better than how it was before as people will just assume they mis-tapped.

Change 732056 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (386526a35)

https://gerrit.wikimedia.org/r/732056

I looked at this and I observed that trying to place the cursor between a link and a reference. (1:16-1:32 of the attached video) doesn't work.

To recreate this:

  • Add a reference to a link and try to place the cursor between the link and the reference
  • Add a reference to a text and try to place the cursor between the word and the reference

!Notice the difference

https://photos.app.goo.gl/gfXhazqV9x183Z189

This comment was removed by Esanders.

I looked at this and I observed that trying to place the cursor between a link and a reference. (1:16-1:32 of the attached video) doesn't work.

All offsets should be reachable on desktop using cursors. There is a larger set of bugs around cursor placement on mobile which I will file and include your examples.

This task should remain about this specific case of a link at the end of a paragraph.

I looked at this and I observed that trying to place the cursor between a link and a reference. (1:16-1:32 of the attached video) doesn't work.

All offsets should be reachable on desktop using cursors. There is a larger set of bugs around cursor placement on mobile which I will file and include your examples.

This task should remain about this specific case of a link at the end of a paragraph.

Thanks Ed.
With the creation of T294494, this can be marked as verified.