Hi everybody!
I want to write an extension for the VisualEditor (great work by the way) and I need a little help. I've browsed through various documentation [1-4](and more) and already learned that using RL module 'ext.visualEditor.desktopArticleTarget.init' and 'mw.lib.ve.addPlugin' method is the way to go. Unfortunately my attempts to hook into the user interface by binding on events provided by the components (like 'save' from 've.ui.MWSaveDialog' or 've.init.mw.Target') have not been successful yet. Maybe you could give me a little push into the right direction.
Are there any HowTos or Tutorials for VisualEditor that cover topics like
1. Adding buttons to the toolbar
2. Accessing the data model (e.g. retrieve all set categories from the Parsoid DOM)
3. Extending/replacing a single tool (e.g. the GalleryInspector)
4. Binding on components events (e.g. the 'save' event, to analyze content and maybe abort saving)
Points 1 and 2 get more or less explained by the docs I've found. But 3 and 4 are very unclear to me. Some hints would be appreciated!
[1] https://www.mediawiki.org/wiki/VisualEditor_gadgets#Gadget_-_Registering_VE_... [2] https://en.wikipedia.org/wiki/User:%D7%A2%D7%A8%D7%9F/veReplace.js [3] https://doc.wikimedia.org/VisualEditor/master [4] https://www.mediawiki.org/wiki/OOjs_UI/Toolbars
Greetings, Robert Vogel
Hi,
maybe the following link will help you to solve number 1. Neither I know if this is documented somewhere, nor if this is the best solution and/or will work in future versions of VisualEditor.
For your second point (I'm not sure, if I understand that correctly) you could take a look at some extensions, that doing it already, like Syntaxhighlight[1], LanguageTool[2] or other examples[3].
[1] https://github.com/wikimedia/mediawiki-extensions-SyntaxHighlight_GeSHi/tree... [2] https://github.com/wikimedia/mediawiki-extensions-LanguageTool/tree/master/m... [3] https://github.com/search?q=%40wikimedia+VisualEditorPluginModules&type=...
Best, Florian
Freundliche Grüße Florian Schmidt
-----Original-Nachricht----- Betreff: [Wikitech-l] Tutorials / HowTos for VisualEditor Datum: Wed, 26 Aug 2015 08:31:13 +0200 Von: Robert Vogel vogel@hallowelt.com An: "wikitech-l@lists.wikimedia.org" wikitech-l@lists.wikimedia.org
Hi everybody!
I want to write an extension for the VisualEditor (great work by the way) and I need a little help. I've browsed through various documentation [1-4](and more) and already learned that using RL module 'ext.visualEditor.desktopArticleTarget.init' and 'mw.lib.ve.addPlugin' method is the way to go. Unfortunately my attempts to hook into the user interface by binding on events provided by the components (like 'save' from 've.ui.MWSaveDialog' or 've.init.mw.Target') have not been successful yet. Maybe you could give me a little push into the right direction.
Are there any HowTos or Tutorials for VisualEditor that cover topics like
1. Adding buttons to the toolbar
2. Accessing the data model (e.g. retrieve all set categories from the Parsoid DOM)
3. Extending/replacing a single tool (e.g. the GalleryInspector)
4. Binding on components events (e.g. the 'save' event, to analyze content and maybe abort saving)
Points 1 and 2 get more or less explained by the docs I've found. But 3 and 4 are very unclear to me. Some hints would be appreciated!
[1] https://www.mediawiki.org/wiki/VisualEditor_gadgets#Gadget_-_Registering_VE_... [2] https://en.wikipedia.org/wiki/User:%D7%A2%D7%A8%D7%9F/veReplace.js [3] https://doc.wikimedia.org/VisualEditor/master [4] https://www.mediawiki.org/wiki/OOjs_UI/Toolbars
Greetings, Robert Vogel _______________________________________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
On 25 August 2015 at 23:30, Robert Vogel vogel@hallowelt.com wrote:
Hi everybody!
I want to write an extension for the VisualEditor (great work by the way) and I need a little help.
First off, the easiest way to get help is to ask in IRC ( #mediawiki-visualeditor irc://irc.freenode.net/mediawiki-visualeditor) or file a Phabricator task asking for something specific ( https://phabricator.wikimedia.org/maniphest/task/create/?projects=VisualEdit... ).
One thing to remember is that though VisualEditor is *complex*, it's nowhere near *complete* – there's a lot of functionality still to build (essentially, anything we've not had a need to build yet), so the answer to "what method can I use to do X?" is often "there isn't one, but we can build it".
That said…
I've browsed through various documentation [1-4](and more) and already learned that using RL module 'ext.visualEditor.desktopArticleTarget.init' and 'mw.lib.ve.addPlugin' method is the way to go. Unfortunately my attempts to hook into the user interface by binding on events provided by the components (like 'save' from 've.ui.MWSaveDialog' or 've.init.mw.Target') have not been successful yet. Maybe you could give me a little push into the right direction.
As a general rule, don't try to bind to VisualEditor's internal events. They're intended for internal consumption and aren't an API, and change without notice.
Are there any HowTos or Tutorials for VisualEditor that cover topics like
Adding buttons to the toolbar
We don't have an API for this yet, partially because the current system is terrible and building an API just to make a breaking change to it feels unkind. There are a number of ways you can grab onto the private.
Accessing the data model (e.g. retrieve all set categories fromthe Parsoid DOM)
Are you trying to replace the category nodes with a new one with extra features? If so, you'd want to sub-class the core one, or register a node with more specificity in the registry than other things (and/or de-register the existing one). Neither of those are very stable, though. If something else, file a ticket and we can discuss options.
3. Extending/replacing a single tool (e.g. the GalleryInspector)
Probably you want to sub-class the existing tool and register that with the same name to over-write.
4. Binding on components events (e.g. the 'save' event, to analyze
content and maybe abort saving)
Save abort hooks are done in MediaWiki. We haven't built (and don't intend to ever build) a hooks system into VisualEditor. If you file a ticket explaining what you're looking to do I'd be happy to give more advice.
Yours,
Hi!
James, Florian, thank you for your responses! This will be very useful for me.
I didn't have the time to look through all of Florian's links, so maybe it's somewhere in there, but, James, can you give me a hint how to register a tool with visual editor? What is the recommended time/callback to call the 've.ui.toolFactory.register' method? mw.loader.using(<some-RL-module>)?
Regarding the 'save' event question: I want to check if a category is set and if it is not, show a message window to the user _before_ he/she can save. I've already implemented a serverside check and the API returns an error if no category is set. But this API error message cannot be styled/customized and it gets displayed _after_ the user clicked "save". But of course I will open a Phabricator task if that is the better place for such a discussion.
Thanks again, Robert Vogel
-----Ursprüngliche Nachricht----- Von: wikitech-l-bounces@lists.wikimedia.org [mailto:wikitech-l-bounces@lists.wikimedia.org] Im Auftrag von James Forrester Gesendet: Mittwoch, 26. August 2015 21:53 An: Wikimedia developers wikitech-l@lists.wikimedia.org Betreff: Re: [Wikitech-l] Tutorials / HowTos for VisualEditor
On 25 August 2015 at 23:30, Robert Vogel vogel@hallowelt.com wrote:
Hi everybody!
I want to write an extension for the VisualEditor (great work by the way) and I need a little help.
First off, the easiest way to get help is to ask in IRC ( #mediawiki-visualeditor irc://irc.freenode.net/mediawiki-visualeditor) or file a Phabricator task asking for something specific ( https://phabricator.wikimedia.org/maniphest/task/create/?projects=VisualEdit... ).
One thing to remember is that though VisualEditor is *complex*, it's nowhere near *complete* – there's a lot of functionality still to build (essentially, anything we've not had a need to build yet), so the answer to "what method can I use to do X?" is often "there isn't one, but we can build it".
That said…
I've browsed through various documentation [1-4](and more) and already learned that using RL module 'ext.visualEditor.desktopArticleTarget.init' and 'mw.lib.ve.addPlugin' method is the way to go. Unfortunately my attempts to hook into the user interface by binding on events provided by the components (like 'save' from 've.ui.MWSaveDialog' or 've.init.mw.Target') have not been successful yet. Maybe you could give me a little push into the right direction.
As a general rule, don't try to bind to VisualEditor's internal events. They're intended for internal consumption and aren't an API, and change without notice.
Are there any HowTos or Tutorials for VisualEditor that cover topics like
Adding buttons to the toolbar
We don't have an API for this yet, partially because the current system is terrible and building an API just to make a breaking change to it feels unkind. There are a number of ways you can grab onto the private.
Accessing the data model (e.g. retrieve all set categories fromthe Parsoid DOM)
Are you trying to replace the category nodes with a new one with extra features? If so, you'd want to sub-class the core one, or register a node with more specificity in the registry than other things (and/or de-register the existing one). Neither of those are very stable, though. If something else, file a ticket and we can discuss options.
3. Extending/replacing a single tool (e.g. the GalleryInspector)
Probably you want to sub-class the existing tool and register that with the same name to over-write.
4. Binding on components events (e.g. the 'save' event, to analyze
content and maybe abort saving)
Save abort hooks are done in MediaWiki. We haven't built (and don't intend to ever build) a hooks system into VisualEditor. If you file a ticket explaining what you're looking to do I'd be happy to give more advice.
Yours, -- James D. Forrester Lead Product Manager, Editing Wikimedia Foundation, Inc.
jforrester@wikimedia.org | @jdforrester _______________________________________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
I'm also interested in this kind of information. Right now I'm specifically interested in what I can use as an equivalent to a hook for when a user saves a page revision using VE. I'm working on an extension that logs user actions (and does more with that information). I have figured out how to play off of hooks to determine a page view or a "traditional" page save, but I'm lost when it comes to VE.
Robert, if you move this discussion to Phabricator, could you share the link to this thread?
Thanks,
Daren
On Thu, Aug 27, 2015 at 7:59 AM, Robert Vogel vogel@hallowelt.com wrote:
Hi!
James, Florian, thank you for your responses! This will be very useful for me.
I didn't have the time to look through all of Florian's links, so maybe it's somewhere in there, but, James, can you give me a hint how to register a tool with visual editor? What is the recommended time/callback to call the 've.ui.toolFactory.register' method? mw.loader.using(<some-RL-module>)?
Regarding the 'save' event question: I want to check if a category is set and if it is not, show a message window to the user _before_ he/she can save. I've already implemented a serverside check and the API returns an error if no category is set. But this API error message cannot be styled/customized and it gets displayed _after_ the user clicked "save". But of course I will open a Phabricator task if that is the better place for such a discussion.
Thanks again, Robert Vogel
-----Ursprüngliche Nachricht----- Von: wikitech-l-bounces@lists.wikimedia.org [mailto: wikitech-l-bounces@lists.wikimedia.org] Im Auftrag von James Forrester Gesendet: Mittwoch, 26. August 2015 21:53 An: Wikimedia developers wikitech-l@lists.wikimedia.org Betreff: Re: [Wikitech-l] Tutorials / HowTos for VisualEditor
On 25 August 2015 at 23:30, Robert Vogel vogel@hallowelt.com wrote:
Hi everybody!
I want to write an extension for the VisualEditor (great work by the way) and I need a little help.
First off, the easiest way to get help is to ask in IRC ( #mediawiki-visualeditor irc://irc.freenode.net/mediawiki-visualeditor) or file a Phabricator task asking for something specific ( https://phabricator.wikimedia.org/maniphest/task/create/?projects=VisualEdit... ).
One thing to remember is that though VisualEditor is *complex*, it's nowhere near *complete* – there's a lot of functionality still to build (essentially, anything we've not had a need to build yet), so the answer to "what method can I use to do X?" is often "there isn't one, but we can build it".
That said…
I've browsed through various documentation [1-4](and more) and already learned that using RL module 'ext.visualEditor.desktopArticleTarget.init' and 'mw.lib.ve.addPlugin' method is the way to go. Unfortunately my attempts to hook into the user interface by binding on events provided by the components (like 'save' from 've.ui.MWSaveDialog' or 've.init.mw.Target') have not been successful yet. Maybe you could give me a little push into the right direction.
As a general rule, don't try to bind to VisualEditor's internal events. They're intended for internal consumption and aren't an API, and change without notice.
Are there any HowTos or Tutorials for VisualEditor that cover topics like
Adding buttons to the toolbarWe don't have an API for this yet, partially because the current system is terrible and building an API just to make a breaking change to it feels unkind. There are a number of ways you can grab onto the private.
Accessing the data model (e.g. retrieve all set categories fromthe Parsoid DOM)
Are you trying to replace the category nodes with a new one with extra features? If so, you'd want to sub-class the core one, or register a node with more specificity in the registry than other things (and/or de-register the existing one). Neither of those are very stable, though. If something else, file a ticket and we can discuss options.
Extending/replacing a single tool (e.g. the GalleryInspector)Probably you want to sub-class the existing tool and register that with the same name to over-write.
Binding on components events (e.g. the 'save' event, to analyzecontent and maybe abort saving)
Save abort hooks are done in MediaWiki. We haven't built (and don't intend to ever build) a hooks system into VisualEditor. If you file a ticket explaining what you're looking to do I'd be happy to give more advice.
Yours,
James D. Forrester Lead Product Manager, Editing Wikimedia Foundation, Inc.
jforrester@wikimedia.org | @jdforrester _______________________________________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l _______________________________________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
A VE save could be recognized with the postEdit hook[1] in JavaScript:
mw.hook( 'postEdit' ).add( // your function );
Remember, that this hook is also fired after a "normal" save (via the Wikitext editor)[2].
[1] https://github.com/wikimedia/mediawiki-extensions-VisualEditor/blob/44ad7574... [2] https://github.com/wikimedia/mediawiki/blob/b79196778ed7c4f49ae09bee9ba16f86...
Freundliche Grüße Florian Schmidt
-----Original-Nachricht----- Betreff: Re: [Wikitech-l] Tutorials / HowTos for VisualEditor Datum: Thu, 27 Aug 2015 15:30:27 +0200 Von: Daren Welsh darenwelsh@gmail.com An: Wikimedia developers wikitech-l@lists.wikimedia.org
I'm also interested in this kind of information. Right now I'm specifically interested in what I can use as an equivalent to a hook for when a user saves a page revision using VE. I'm working on an extension that logs user actions (and does more with that information). I have figured out how to play off of hooks to determine a page view or a "traditional" page save, but I'm lost when it comes to VE.
Robert, if you move this discussion to Phabricator, could you share the link to this thread?
Thanks,
Daren
On Thu, Aug 27, 2015 at 7:59 AM, Robert Vogel vogel@hallowelt.com wrote:
Hi!
James, Florian, thank you for your responses! This will be very useful for me.
I didn't have the time to look through all of Florian's links, so maybe it's somewhere in there, but, James, can you give me a hint how to register a tool with visual editor? What is the recommended time/callback to call the 've.ui.toolFactory.register' method? mw.loader.using(<some-RL-module>)?
Regarding the 'save' event question: I want to check if a category is set and if it is not, show a message window to the user _before_ he/she can save. I've already implemented a serverside check and the API returns an error if no category is set. But this API error message cannot be styled/customized and it gets displayed _after_ the user clicked "save". But of course I will open a Phabricator task if that is the better place for such a discussion.
Thanks again, Robert Vogel
-----Ursprüngliche Nachricht----- Von: wikitech-l-bounces@lists.wikimedia.org [mailto: wikitech-l-bounces@lists.wikimedia.org] Im Auftrag von James Forrester Gesendet: Mittwoch, 26. August 2015 21:53 An: Wikimedia developers wikitech-l@lists.wikimedia.org Betreff: Re: [Wikitech-l] Tutorials / HowTos for VisualEditor
On 25 August 2015 at 23:30, Robert Vogel vogel@hallowelt.com wrote:
Hi everybody!
I want to write an extension for the VisualEditor (great work by the way) and I need a little help.
First off, the easiest way to get help is to ask in IRC ( #mediawiki-visualeditor irc://irc.freenode.net/mediawiki-visualeditor) or file a Phabricator task asking for something specific ( https://phabricator.wikimedia.org/maniphest/task/create/?projects=VisualEdit... ).
One thing to remember is that though VisualEditor is *complex*, it's nowhere near *complete* – there's a lot of functionality still to build (essentially, anything we've not had a need to build yet), so the answer to "what method can I use to do X?" is often "there isn't one, but we can build it".
That said…
I've browsed through various documentation [1-4](and more) and already learned that using RL module 'ext.visualEditor.desktopArticleTarget.init' and 'mw.lib.ve.addPlugin' method is the way to go. Unfortunately my attempts to hook into the user interface by binding on events provided by the components (like 'save' from 've.ui.MWSaveDialog' or 've.init.mw.Target') have not been successful yet. Maybe you could give me a little push into the right direction.
As a general rule, don't try to bind to VisualEditor's internal events. They're intended for internal consumption and aren't an API, and change without notice.
Are there any HowTos or Tutorials for VisualEditor that cover topics like
Adding buttons to the toolbarWe don't have an API for this yet, partially because the current system is terrible and building an API just to make a breaking change to it feels unkind. There are a number of ways you can grab onto the private.
Accessing the data model (e.g. retrieve all set categories fromthe Parsoid DOM)
Are you trying to replace the category nodes with a new one with extra features? If so, you'd want to sub-class the core one, or register a node with more specificity in the registry than other things (and/or de-register the existing one). Neither of those are very stable, though. If something else, file a ticket and we can discuss options.
Extending/replacing a single tool (e.g. the GalleryInspector)Probably you want to sub-class the existing tool and register that with the same name to over-write.
Binding on components events (e.g. the 'save' event, to analyzecontent and maybe abort saving)
Save abort hooks are done in MediaWiki. We haven't built (and don't intend to ever build) a hooks system into VisualEditor. If you file a ticket explaining what you're looking to do I'd be happy to give more advice.
Yours,
James D. Forrester Lead Product Manager, Editing Wikimedia Foundation, Inc.
jforrester@wikimedia.org | @jdforrester _______________________________________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l _______________________________________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
On 27 August 2015 at 06:54, florian.schmidt.welzow@t-online.de < florian.schmidt.welzow@t-online.de> wrote:
A VE save could be recognized with the postEdit hook[1] in JavaScript:
mw.hook( 'postEdit' ).add( // your function );
Remember, that this hook is also fired after a "normal" save (via the Wikitext editor)[2].
[1] https://github.com/wikimedia/mediawiki-extensions-VisualEditor/blob/44ad7574... [2] https://github.com/wikimedia/mediawiki/blob/b79196778ed7c4f49ae09bee9ba16f86...
Yeah, but that's even later than the server-side mid-save PHP hook. :-)
-----Original-Nachricht----- Betreff: Re: [Wikitech-l] Tutorials / HowTos for VisualEditor Datum: Thu, 27 Aug 2015 15:30:27 +0200 Von: Daren Welsh darenwelsh@gmail.com An: Wikimedia developers wikitech-l@lists.wikimedia.org
I'm also interested in this kind of information. Right now I'm specifically interested in what I can use as an equivalent to a hook for when a user saves a page revision using VE. I'm working on an extension that logs user actions (and does more with that information). I have figured out how to play off of hooks to determine a page view or a "traditional" page save, but I'm lost when it comes to VE.
Probably simplest just do it server-side hooked onto the page save, with a special rule if the revision is tagged 'visualeditor'?
Yours,
Thank you all for your responses!
I've opened up a task on Phabricator [1] to discuss about a "pre-save" system or public hooks in general.
[1] https://phabricator.wikimedia.org/T110644
-- Robert Vogel
-----Ursprüngliche Nachricht----- Von: wikitech-l-bounces@lists.wikimedia.org [mailto:wikitech-l-bounces@lists.wikimedia.org] Im Auftrag von James Forrester Gesendet: Donnerstag, 27. August 2015 16:58 An: florian.schmidt.welzow@t-online.de; Wikimedia developers wikitech-l@lists.wikimedia.org Betreff: Re: [Wikitech-l] Tutorials / HowTos for VisualEditor
On 27 August 2015 at 06:54, florian.schmidt.welzow@t-online.de < florian.schmidt.welzow@t-online.de> wrote:
A VE save could be recognized with the postEdit hook[1] in JavaScript:
mw.hook( 'postEdit' ).add( // your function );
Remember, that this hook is also fired after a "normal" save (via the Wikitext editor)[2].
[1] https://github.com/wikimedia/mediawiki-extensions-VisualEditor/blob/44 ad7574639be7e096d43784eb3942388e779eff/modules/ve-mw/init/targets/ve.i nit.mw.DesktopArticleTarget.js#L713-L717 [2] https://github.com/wikimedia/mediawiki/blob/b79196778ed7c4f49ae09bee9b a16f861a6e3760/resources/src/mediawiki.action/mediawiki.action.view.po stEdit.js#L66-L75
Yeah, but that's even later than the server-side mid-save PHP hook. :-)
-----Original-Nachricht----- Betreff: Re: [Wikitech-l] Tutorials / HowTos for VisualEditor Datum: Thu, 27 Aug 2015 15:30:27 +0200 Von: Daren Welsh darenwelsh@gmail.com An: Wikimedia developers wikitech-l@lists.wikimedia.org
I'm also interested in this kind of information. Right now I'm specifically interested in what I can use as an equivalent to a hook for when a user saves a page revision using VE. I'm working on an extension that logs user actions (and does more with that information). I have figured out how to play off of hooks to determine a page view or a "traditional" page save, but I'm lost when it comes to VE.
Probably simplest just do it server-side hooked onto the page save, with a special rule if the revision is tagged 'visualeditor'?
Yours, -- James D. Forrester Lead Product Manager, Editing Wikimedia Foundation, Inc.
jforrester@wikimedia.org | @jdforrester _______________________________________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
On 27 August 2015 at 05:59, Robert Vogel vogel@hallowelt.com wrote:
Hi!
James, Florian, thank you for your responses! This will be very useful for me.
I didn't have the time to look through all of Florian's links, so maybe it's somewhere in there, but, James, can you give me a hint how to register a tool with visual editor? What is the recommended time/callback to call the 've.ui.toolFactory.register' method? mw.loader.using(<some-RL-module>)?
Yes, use ext.visualEditor.desktopArticleTarget.init for that.
If your code is 'real' and not just a gadget you can get loaded by registering as a "VisualEditorPluginModule" (see e.g. how the Math extension does this in extension.json: https://git.wikimedia.org/blob/mediawiki%2Fextensions%2FMath/b0dce0fe46dd053... and the wikihiero extension does this using the old PHP method: https://git.wikimedia.org/blob/mediawiki%2Fextensions%2Fwikihiero/e7cb93e529... ).
Regarding the 'save' event question: I want to check if a category is set and if it is not, show a message window to the user _before_ he/she can save. I've already implemented a serverside check and the API returns an error if no category is set. But this API error message cannot be styled/customized and it gets displayed _after_ the user clicked "save".
Interesting idea.
We've got vague plans for a system of pre-save suggestions/reminders/warnings/errors, but we've not started designing it yet, so there's nothing into which to register, sorry.
But of course I will open a Phabricator task if that is the better place for such a discussion.
Please do.
Yours,
wikitech-l@lists.wikimedia.org