Page MenuHomePhabricator

Allow users to copy non-text / focusable nodes (images, templates, references etc.) on mobile
Closed, ResolvedPublic40 Estimated Story Points

Description

Currently it is not possible to copy anything that isn't text on mobile. We currently have a 'Delete' button as selecting non-text items hides the keyboard (and the backspace button) so we should also add a copy button.

Previous task description:

Come up with a way to move/remove/duplicate focusable nodes in mobile

For plain text, most mobiles support cut/copy/paste and backspace through native means, however in the absence of a physical keyboard or direct access to the clipboard (for security reasons) this doesn't work with focusable nodes however we don't show a native selection when focusable nodes are selected. We should provide adequate editing capabilities via a sensible touch interface.

There are two approaches one could take (or some combination of the two)

Provide cut/copy/paste tools

Pros

  • Users are already familiar with these tools, can achieve any moving/removing/duplication task through some combination of these
  • Writing to the system clipboard is possible

Cons

  • In order to paste anywhere, we would need to add a paste button to the toolbar (which is already crammed) or have via some less-discoverable technique.
    • All mobile devices have a native paste feature, we should assume that editors know about this.
  • May need to add 'delete' as a fourth option if people aren't comfortable using 'cut' for that purpose.
    • This was added back in T62110
  • Moving of block elements is less intuitive and does't show you valid 'drop' points
  • 'Copy' and 'cut' are misleading in that they doesn't write to the system clipboard as well.
Provide move/remove/duplicate tools

Pros

  • Also can perform any combination of move/remove/duplicate.
  • A move tool could be intuitive to use on a touch device and could show 'drop' points
  • Duplication is a one-click process
  • Clearer that the system clipboard is not involved

Cons

  • Users may be expecting cut/copy/paste terminology.
  • Doesn't write to the system clipboard
  • More complex to implement

Event Timeline

Esanders raised the priority of this task from to Needs Triage.
Esanders updated the task description. (Show Details)
Esanders added a project: VisualEditor.
Esanders subscribed.
Jdforrester-WMF renamed this task from Moving/removing/duplicating focusable nodes in mobile to Come up with a way to move/remove/duplicate focusable nodes in mobile.Aug 4 2015, 8:38 PM
Jdforrester-WMF triaged this task as Medium priority.
Jdforrester-WMF set Security to None.
Jdforrester-WMF edited a custom field.
Jdforrester-WMF moved this task from To Triage to Epics on the VisualEditor board.
Deskana lowered the priority of this task from Medium to Low.Aug 31 2018, 10:46 AM
Esanders added a subscriber: Deskana.

It may actually be the case that with the browsers than we want to support, we can actually write to the clipboard in response to a user event using document.execCommand.

It looks like support was added in iOS 11 for execCommand, although it does require a native selection to be present, and therefor the virtual keyboard to be visible. Testing the following sequence:

  1. Create selection
  2. Call execCommand
  3. Remove selection

The keyboard quickly shows and then hides, but this may be better than not providing copy support at all.

Android seems to work fine, although I haven't tested old versions.

Can you screenshot an example of this or explain it in less technical terms so that I can understand the pain point here? cc/ @Esanders @Deskana

An example would be if you wanted to move a reference. On desktop you would either drag and drop with a mouse or cut and paste with a keyboard shortcut.

On mobile there is no mouse or keyboard shortcuts, and the copy/paste/select context menu only shows when you select plain text, so moving a reference is currently impossible.

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

[VisualEditor/VisualEditor@master] Show copy button when selecting focusable nodes on mobile

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

Test wiki created on Patch demo by ESanders (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/7d487d7e38/w/

I think I over-complicated the thinking around this in the past. We already add a 'delete' button to mobile contexts (T62110), so we should add a 'copy' button in the same place (cut = copy + delete, so doesn't need its own button).

image.png (832×486 px, 122 KB)

Notification:

image.png (204×481 px, 21 KB)

Change 757931 merged by jenkins-bot:

[VisualEditor/VisualEditor@master] Show copy button when selecting focusable nodes on mobile

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

Change 757932 had a related patch set uploaded (by Bartosz Dziewoński; author: Esanders):

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (492815b58)

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

Change 757932 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (492815b58)

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

+1 nice @Esanders
I think this simplifies the interaction.

Note (for another day): we should look into the display timing of success messages.

Esanders renamed this task from Come up with a way to move/remove/duplicate focusable nodes in mobile to Allow users to copy non-text / focusable nodes (images, templates etc.) on mobile.Feb 23 2022, 1:16 PM
Esanders updated the task description. (Show Details)
matmarex renamed this task from Allow users to copy non-text / focusable nodes (images, templates etc.) on mobile to Allow users to copy non-text / focusable nodes (images, templates, references etc.) on mobile.Feb 23 2022, 3:06 PM
matmarex added a project: Editing QA.
matmarex moved this task from FY 18-19 Q3/Q4 to Triaged on the VisualEditor board.

Copy works as expected. As well as cut using "copy + delete". See https://photos.app.goo.gl/d8TLB5rBQCTGfFgv7.

Test wiki on Patch demo by ESanders (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/7d487d7e38/w/

ppelberg claimed this task.