Talk:VisualEditor/Gadgets

Better
Can you please make this document better? This is the one resource available to build VE plugins but i can't understand this article. You didn't specify exactly how to use scripts?
 * I rewrote some of the guide so it would be easier to understand. Please follow VisualEditor gadgets. If you have more specific questions or suggestion I would like to hear. Eran (talk) 19:49, 22 March 2014 (UTC)

Breaking change for VisualEditor gadgets/scripts
From https://lists.wikimedia.org/pipermail/wikitech-ambassadors/2015-September/001256.html. HTH, --Elitre (WMF) (talk) 12:53, 9 September 2015 (UTC) 

All, A month or so ago the main access point for VisualEditor was renamed from:

ext.visualEditor.*viewPageTarget*.init ext.visualEditor.*viewPageTarget*.noscript

… to:

ext.visualEditor.*desktopArticleTarget*.init ext.visualEditor.*desktopArticleTarget*.noscript

… ​ as part of our work for merging the mobile and desktop interfaces. We temporarily retained the old names as fall-backs for cached HTML purposes and to give a moment for VisualEditor gadgets and scripts to be fixed before the breaking change to their access API was moved.

This will now be merged into master today, after the cut, and so go out to production from Tuesday 15 September as part of MediaWiki 1.26wmf23. For the few gadgets and scripts that hook into VisualEditor, please switch over now so your users aren't disrupted.

J.​ -- James D. Forrester Lead Product Manager, Editing 

Working with the underlying wikitext
I'm not sure whether someone here will be able to help me, but I just hope so. For some of my usecases it is much easier to work with the underlying wikitext rather than with the VE data, and this actually works pretty well so far.

To get the wikitext of the current document I use which works as expected.

To replace the current document with some wikitext I use which almost works as expected. It changes the document to something that has a wikitext equivalent to the one I added with the function, but spaces etc. are changed.

E.g. calling will add the template at the start as expected, but will add spaces around the equal signs.

As this doesn't happen when I switch between VE and source code editor, it must be possible to add wikitext, that will be kept in the exact form that was provided. Can someone help me to fix my code to do so? And, are there chances to include these functions as helper methods for gadgets in VE, so I don't have worry about updating the duplicated code? --Schnark (talk) 10:00, 27 February 2016 (UTC)


 * A very hacky variant, which works in most, but not in all cases:


 * Anyone with any better ideas? --Schnark (talk) 09:11, 9 March 2016 (UTC)


 * Well, now with NWE I can use


 * But still the question: Anyone with a less hacky idea? (I.e. no message about “converting to visual mode”, possibility to undo the change.) –Schnark (talk) 09:50, 7 January 2017 (UTC)

Examples
This guide is hard to follow because it does not have little working examples. I could not succeed adding a new dummy toolbar button to visual editor toolbar this way. I ask you to expand the guide.

Also, I would like to manipulate templates in my user script. For example, find all templates in a section and increment the value on each, then save the wikitext back. It is not clear to me how to do that from the guide.

It is also in English only. I propose to add translations.

--Gryllida 23:59, 29 November 2016 (UTC)
 * Perhaps User:Schnark may be able to help here? :) --Elitre (WMF) (talk) 09:55, 30 November 2016 (UTC)
 * Gryllida, thank you for the comments. As for translations - you are welcome to mark relevant sections for translation with translate tag. As for dummy buttons - VisualEditor/Gadgets give some real world examples. Specifically VeExtendedBar.js in hewiki is a very simple gadget for adding a button, and pressing on it adds template. Eran (talk) 15:09, 30 November 2016 (UTC)
 * Well, inserting templates is pretty easy, but this is about changing them. Once I understand how to do so, this will be covered in the example VisualEditor/Gadgets/Creating a custom command (the example is about changing link annotation, but changing templates should be similar), but unfortunately I currently don't understand it yet. --Schnark (talk) 08:47, 1 December 2016 (UTC)

Adding a toolbar item to a particular group
How can I add an extra toolbar item (Tool) that I create in run time to a particular group?

If I don't specify anything, as I try in this revision, then it goes into the Insert menu, which is not quite what I want.

The toolbar groups order is specified in the configuration, which is an array. I guess I need to modify it dynamically, but how? I couldn't find it on this page or in doc.wikimedia.org.

Thanks! (Tagging [Eran],, )) --Amir E. Aharoni (talk) 07:35, 28 December 2016 (UTC)
 * You can specify a group, like below. I don't think the group names are documented anywhere, you have to find them out from VE's source code, I guess. :/ For example:

DirectionFlipTool.static.group = 'textStyle';
 * Matma Rex (talk) 11:27, 28 December 2016 (UTC)
 * Matma Rex thanks, and can I make a whole new section? For example, to make it into a whole separate button after the Special Characters button (Ω)? --Amir E. Aharoni (talk) 12:27, 29 December 2016 (UTC)
 * Amir E. Aharoni, have a look at https://phabricator.wikimedia.org/diffusion/ECIT/browse/master/modules/ve-cite/ve.ui.MWReference.init.js, which adds the group for inserting references. Probably a simple  will work, too, in your case. –Schnark (talk) 08:47, 2 January 2017 (UTC)

Shortcut aka Accelerator
When I add a tool to a toolbar (see the section above), how can I associate an accelerator with it?

After digging in the VE source code, I managed to do this for my gadget:

This actually adds the shortcut to the menu item, but actually pressing the keys doesn't seem to do anything. I also tried with other keys, and it didn't help.

Any idea? --Amir E. Aharoni (talk) 17:26, 30 December 2016 (UTC)
 * The  wants the name of a , not of a  . So you have to split out the code that is currently inside the   method into a  . Have a look at VisualEditor/Gadgets/Creating a custom command. –Schnark (talk) 08:53, 2 January 2017 (UTC)

Only in source (NWE) or visual mode
Is there a way to make a toolbar item appear only source mode (NWE) or only in visual mode? --Amir E. Aharoni (talk) 17:51, 30 December 2016 (UTC)
 * When you created the, you can use the   method to tell when it is not executable. This will disable the tool. Again, see VisualEditor/Gadgets/Creating a custom command. –Schnark (talk) 08:57, 2 January 2017 (UTC)

Is there an API to add notices?
I want to adapt ruwiki's "Biographies of living persons" notice, borrowed from enwiki (see "Magic editintros" in en:MediaWiki:Common.js), to visual editor. Is there an API to add notices? If there are no notices for a page, exclamation mark icon isn't even shown. . Jack who built the house (talk) 17:32, 26 April 2018 (UTC)
 * I hoped I would be able to just add "editintro=template" to URL before VE loads, but unfortunately this works only when editing page is loaded directly by typing "&veaction=edit" to the address bar and pressing Enter. So the question stands. Jack who built the house (talk) 19:01, 26 April 2018 (UTC)
 * I figured out that, while custom notices can be added via  of , this property isn't present when there are no notices. To be exact, it is removed upon loading by this code   in ve.init.mw.DesktopArticleTarget.prototype.surfaceReady.  told me, "The visual editor toolbar (and new wikitext editor too) is only created once when the editor is loaded". Is there a way to workaround it? It's very hard to crawl through VE code, trying to identify dependencies here and there... Jack who built the house (talk) 23:34, 26 April 2018 (UTC)
 * So, unable to find an elegant solution, I came up with this. I had a hard time sneaking into VE source and trying to adapt raw VE/OOjs mechanisms to what I want. Hope I didn't do any mistakes that will break VE operation in some non-obvious details. Jack who built the house (talk) 20:13, 4 May 2018 (UTC)