Page MenuHomePhabricator

"Insert paragraph" slug receives input focus
Closed, ResolvedPublic

Description

VE inserts block slugs around content to allow users to "Insert paragraph". In case of block template inside Content Translation, there are multiple points where cursor turns into I-beam shaped one, which indicates that you can insert new paragraph and start typing.

However, after clicking to put the text insertion point, slug actually gets the focus and user can type inside of "Insert paragraph" placeholder.

ve-add-paragraph-input-focus.gif (627×1 px, 692 KB)

Event Timeline

Using keyboard arrows can also lead to slug getting focus and accepting user input.

Can you reproduce this in VE too or only in CX? We fixed similar issues in VE recently (T201599).

In my testing in VE, trying to put the text cursor inside the slugs correctly relocates it inside the <div class="ve-ce-surface-paste" …> node.

Something goes funny with the section nodes in CX.

Can you reproduce this in VE too or only in CX?

I am not able to reproduce in VE (without CX). Tried the same methods used while reporting this task and VE seems to not suffer from this bug.

Given that Content translation separates block elements in different sections, would it be an option to hide/remove the "insert paragraph" slugs completely from Content Translation? They may be confused with the "add translation" placeholders, and often appear in sequences one after the other causing unnecessary distraction.

That will solve this issue too.

The issue is also reproducible in VE with HTML like <div><div></div></div>.

Change 473533 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[VisualEditor/VisualEditor@master] ve.ce.Surface: Consider that slugs can be in nested nodes

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

Given that Content translation separates block elements in different sections, would it be an option to hide/remove the "insert paragraph" slugs completely from Content Translation? They may be confused with the "add translation" placeholders, and often appear in sequences one after the other causing unnecessary distraction.

I am not sure if this would be a good idea. Disabling slugs would mean that there would be no way to type text in a section that contains nothing except for a block element (e.g. a template, an image, or a references list). But if you wanted to experiment with this, you could disable slugs inside CX sections by overriding ve.dm.CXSectionNode.prototype.setupBlockSlugs = function () {}.

Given that Content translation separates block elements in different sections, would it be an option to hide/remove the "insert paragraph" slugs completely from Content Translation? They may be confused with the "add translation" placeholders, and often appear in sequences one after the other causing unnecessary distraction.

I am not sure if this would be a good idea. Disabling slugs would mean that there would be no way to type text in a section that contains nothing except for a block element (e.g. a template, an image, or a references list). But if you wanted to experiment with this, you could disable slugs inside CX sections by overriding ve.dm.CXSectionNode.prototype.setupBlockSlugs = function () {}.

Thanks for the details @matmarex. In the Content Translation case, that limitation may be less relevant: the expected decision for the user about a block element in the source article is wether to transfer it to the translation or not, and users can always add more text to the next text-based paragraph in case that more content is needed after the block element. In any case, we may want to study with more detail the possible consequences, but knowing is technically feasible is very useful already.

Part of the issue is that the infobox has no height because it is float:right, that is why the before and after slugs both appear at the top (see T107745).

If you know a section consists of just one block level template, you could fix this with CSS using something like section > block-level-template { clear: both; }.

Change 473533 merged by jenkins-bot:
[VisualEditor/VisualEditor@master] ve.ce.Surface: Consider that slugs can be in nested nodes

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

Change 482006 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (018fdcb67)

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

Change 482006 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (018fdcb67)

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