Page MenuHomePhabricator

Replace WikiEditor widgets with Codex components
Open, Needs TriagePublic

Assigned To
None
Authored By
stjn
Nov 8 2018, 2:18 PM
Referenced Files
F57773002: image.png
Mon, Dec 2, 8:21 PM
F57765143: image.png
Sat, Nov 30, 8:00 PM
F41667866: image.png
Sat, Nov 30, 8:00 PM
F41667864: image.png
Sat, Nov 30, 8:00 PM
F41667862: image.png
Sat, Nov 30, 8:00 PM
F41696172: image.png
Jan 17 2024, 9:32 PM
Tokens
"Love" token, awarded by Ladsgroup."Love" token, awarded by Nemoralis."Love" token, awarded by Rail."Love" token, awarded by Iniquity.

Description

This is not a priority for any team, but it would be good to replace current jQuery UI-based widgets in default wikitext editor (WikiEditor, WE) with OOUI-based reusable components from VisualEditor (VE) for two following reasons:

  1. Feature disparity. The interface for inserting a file is far more developed in VE in comparison with WE, search and replace interface is reportedly the same. WE users can benefit from having features like file search and autocomplete after converting to OOUI and reusing code from VE.
  2. UI standardisation. Currently WikiEditor uses both OOUI and jQuery UI: jQuery UI is being used in all widgets, OOUI is being used in the styling of buttons and in file upload interface. TemplateWizard beta feature also uses OOUI instead of jQuery UI. With jQuery UI being somewhat deprecated in usage, it would be good to remove inconsistencies.

List of components using jQuery UI:

  • Insert a link
  • Insert a file
  • Insert a reference
  • Insert a table
  • Search and replace
Insert linkInsert tableInsert fileSearch and replace
image.png (321×527 px, 17 KB)
image.png (341×604 px, 21 KB)
image.png (391×607 px, 15 KB)
image.png (395×517 px, 17 KB)

Not every interface, obviously, can be replicated from VE one to one.

These will be, in my opinion, pretty uncontroversial changes, as their deployment will increase usability of the editor. Maybe then something similar to T174119: Fix several design features of WikiEditor and CodeEditor to match the general style can be done, as those stylistic changes also seem to be uncontroversial after changing all icons to OOUI in T191031.

Related Objects

View Standalone Graph
This task is connected to more than 200 other tasks. Only direct parents and subtasks are shown here. Use View Standalone Graph to show more of the graph.

Event Timeline

In T289214, the text input widgets in the link-insertion dialog will be replaced with OOUI ones. The dialog itself will stay as jQuery UI though.

Separately, it is worth noting that the jQuery UI forms began to interfere with accessibility (font size) in the monobook.

image.png (609×615 px, 76 KB)

Iniquity renamed this task from Replace WikiEditor widgets with OOUI-based (VisualEditor) components to Replace WikiEditor widgets with Codex components.Sat, Nov 30, 7:56 PM

image.png (407×622 px, 15 KB)

And these widgets have very strange displays in the dark theme.

The biggest problem for migrating from jquery ui to codex is that there are no reusable components for page lookup and similar in vue. Codex takes care of a lot but if you need some mediawiki stuff for example, page lookup, you have to do it again and again. Having something for that would be really nice.

I would note that previously this task was ‘Replace with OOUI’, which does have those components. Though Codex definitely should aim to have feature parity with OOUI on that front.

The biggest problem for migrating from jquery ui to codex is that there are no reusable components for page lookup and similar in vue. Codex takes care of a lot but if you need some mediawiki stuff for example, page lookup, you have to do it again and again. Having something for that would be really nice.

Well neither does OOUI itself. But there are MediaWiki specific JS classes and RL modules that do this.
https://github.com/wikimedia/mediawiki/tree/f682e8881c9b141c55bebfc8559eac2ca17b990e/resources/src/mediawiki.widgets

Similar widgets should probably be created for Codex. Although possibly in a separate npm package.