Page MenuHomePhabricator

Add new 'secondary' section to far end of toolbar
Closed, ResolvedPublic1 Estimated Story Points


Currently, to add a new toolbar button something like the following is done:

mw.hook( 'wikiEditor.toolbarReady' ).add( function ( $textarea ) {
	$textarea.wikiEditor( 'addToToolbar', {
		'section': 'main',
		'group': 'insert',
		'tools': {
			'newtool': {
				/* โ€ฆ */
	} );
} );

It is possible to add a new section in an expandable tab, or a new group to an existing section (including the top level main section), but it's not possible to have a new top-level section.

toolbar-sections.png (98ร—1 px, 16 KB)

This is a proposal to add a new secondary section, that is the same as the main section but located at the right-hand (or left-hand for RTL) end of the toolbar.

Currently, the Wikisource, ProofreadPage, and VisualEditor extensions add widgets to this end of the toolbar, and they do it by injecting into the DOM manually and styling the position themselves.

By default, this section would be empty (but the up-coming real-time preview will be building an optional Preview button into WikiEditor, which will appear in this location).

Event Timeline

Restricted Application added a subscriber: Aklapper. ยท View Herald TranscriptNov 25 2021, 6:08 AM
Samwilson renamed this task from Add new section to far end of toolbar to Add new 'auxiliary' section to far end of toolbar.Nov 25 2021, 9:09 AM
Samwilson updated the task description. (Show Details)

Change 742836 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/WikiEditor@master] Add new 'secondary' toolbar section

Samwilson renamed this task from Add new 'auxiliary' section to far end of toolbar to Add new 'secondary' section to far end of toolbar.Dec 1 2021, 3:22 AM
Samwilson updated the task description. (Show Details)
Samwilson set the point value for this task to 1.

Change 742836 merged by jenkins-bot:

[mediawiki/extensions/WikiEditor@master] Add new 'secondary' toolbar section

I've updated the docs at

There's nothing much to QA here, because nothing is added to the new section yet. It is being used in the preview button patch, and it can be tested with a user script something like the following:

	mw.hook( 'wikiEditor.toolbarReady' ).add( function ( $textarea ) {
		$textarea.wikiEditor( 'addToToolbar', {
			section: 'secondary',
			group: 'default',
			tools: {
				testtool: {
					type: 'button',
					label: 'Lorem',
					oouiIcon: 'info'
		} );
	} );
dom_walden added a subscriber: dom_walden.

I used Sam's script to add two different types of widget to the WikiEditor toolbar (using user scripts), one button and one dropdown.

secondary_group.png (295ร—991 px, 46 KB)

They appear fine in RTL and LTR.

I compared the dropdown to the same widget added to the existing "main" group. It behaved and looked the same (including alignment of dropdown in LTR and RTL).

This feature will be used in Real-Time Preview so the devs will learn soon enough how well it works.

Therefore, I just wanted to know whether it caused any undesirable side-effects. I used a number of the menu options the WikiEditor provides to see if they were interfered with by the new widget. They were not.

Test environments:

Test browser: Firefox 78

NRodriguez added a subscriber: NRodriguez.

*Chef's kiss *