Adding a gadget to VisualEditor

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Adding a gadget to VisualEditor

Alain PERRY
Hello list,

I was sent here from the #mediawiki IRC channel, I hope this is indeed the correct list to write to and ask you to please forgive me if it is not.

First, a bit about myself: I'm no real developer, just a tech-savvy guy trying to build a wiki to document my employer's company inner workings. This last bit means documenting any piece of information we handle and our business processes in doing so.

After testing a few wiki engines, I came to the conclusion that mediawiki with the cargo extension was what I was looking for. I also built a small extension to allow inclusion and edition of BPMN diagrams with the https://bpmn.io library. All in all, this is pretty basic.

Then I came to the realization that if I wanted any lambda-user to be willing to contribute to the wiki content, I needed the Visual Editor. Deploying it was easy enough, and everything seems to be working fine at the moment.

I however feel I should make it possible to include a BPMN diagram from the VE toolbar. Ideally, this will take the form of a "popup" that will include the bpmn.io modeler to edit the diagram. However, in order to achieve this goal, I have a whole damn lot to learn and to experiment with about VE.

So I thought I should start with something a little humbler: a button that would just include some basic XML in the page (a special page already allows editing that part of the page, so this would already be convenient, though far from perfect). Using the gadgets example from the documentation on the mediawiki wiki, I'm able to insert content into the page. But that content is escaped if it includes XML and I have no idea from the API doc how to include something less basic than mere text (or than a given template, since the example actually shows how to do that).

What I'm actually getting at is this: would someone with good knowledge of the API and some good old patience be willing to "tutor" me by giving pointers where I need them ?

My first technical question would be this: I understand that my gadget can register a ve.ui.Command, that will in turn call a method on an ve.ui.Action object. I guess I should stick to the ContentAction one. But I'm not sure what the "content" parameter should contain if given an array. Is there, somewhere, some documentation I can read on this?

Thanks a bunch for any help.

Regards,

--
Alain Perry

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Adding a gadget to VisualEditor

Yaron Koren-2
Hi Alain,

First of all, thanks for choosing the Cargo extension! As the main author
of that extension, I'm happy you're trying it out.

So, by an amazing coincidence, over the last month or so I've been working
on creating a new extension that allows for saving and displaying BPMN
diagrams within the wiki. The extension isn't released yet, and it doesn't
even have an official name yet - right now it's called "Diagrams",
because it's meant to support other diagram languages besides BPMN,
although right now it only supports BPMN.

However, you can already see it in action on this wiki:

http://discoursedb.org/wiki/BPMN:Test_diagram

The contents of that wiki page are simply one BPMN file - it's an approach
similar to what the Scribunto extension does with Lua modules. To edit the
diagram, you can edit the text directly, or click on the "Edit diagram" tab
to edit it graphically, using bpmn.io:

http://discoursedb.org/w/index.php?title=BPMN:Test_diagram&action=diagramedit

There's even a Cargo tie-in - some of the essential information from all
the diagrams is stored in a Cargo table, where it can be queried:

http://discoursedb.org/wiki/Special:CargoTables/_bpmnData

It's a somewhat different approach from what you are trying to do, but
hopefully similar enough that it would be useful for you.

I'm curious to know what you think - if you want to talk about it further,
please write me back, privately or on this mailing list.

-Yaron

On Tue, Sep 16, 2019 at 6:38 AM Alain PERRY <[hidden email]> wrote:

> Hello list,
>
> I was sent here from the #mediawiki IRC channel, I hope this is indeed the
> correct list to write to and ask you to please forgive me if it is not.
>
> First, a bit about myself: I'm no real developer, just a tech-savvy guy
> trying to build a wiki to document my employer's company inner workings.
> This last bit means documenting any piece of information we handle and our
> business processes in doing so.
>
> After testing a few wiki engines, I came to the conclusion that mediawiki
> with the cargo extension was what I was looking for. I also built a small
> extension to allow inclusion and edition of BPMN diagrams with the
> https://bpmn.io library. All in all, this is pretty basic.
>
> Then I came to the realization that if I wanted any lambda-user to be
> willing to contribute to the wiki content, I needed the Visual Editor.
> Deploying it was easy enough, and everything seems to be working fine at
> the moment.
>
> I however feel I should make it possible to include a BPMN diagram from
> the VE toolbar. Ideally, this will take the form of a "popup" that will
> include the bpmn.io modeler to edit the diagram. However, in order to
> achieve this goal, I have a whole damn lot to learn and to experiment with
> about VE.
>
> So I thought I should start with something a little humbler: a button that
> would just include some basic XML in the page (a special page already
> allows editing that part of the page, so this would already be convenient,
> though far from perfect). Using the gadgets example from the documentation
> on the mediawiki wiki, I'm able to insert content into the page. But that
> content is escaped if it includes XML and I have no idea from the API doc
> how to include something less basic than mere text (or than a given
> template, since the example actually shows how to do that).
>
> What I'm actually getting at is this: would someone with good knowledge of
> the API and some good old patience be willing to "tutor" me by giving
> pointers where I need them ?
>
> My first technical question would be this: I understand that my gadget can
> register a ve.ui.Command, that will in turn call a method on an
> ve.ui.Action object. I guess I should stick to the ContentAction one. But
> I'm not sure what the "content" parameter should contain if given an array.
> Is there, somewhere, some documentation I can read on this?
>
> Thanks a bunch for any help.
>
> Regards,
>
> --
> Alain Perry
>


--
WikiWorks · MediaWiki Consulting · http://wikiworks.com
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Adding a gadget to VisualEditor

Marielle Volz-2
In reply to this post by Alain PERRY
You might want to check out the VE parts of the graph extension. It sounds
like a good analogue for what you want to do, where there's a pop-up to
edit the JSON (as well as a visual component) that is interpreted as a Vega
graph, which is an external library (https://vega.github.io/vega/). Code
for the VE parts here:
https://github.com/wikimedia/mediawiki-extensions-Graph/tree/master/modules/ve-graph
.

The documentation for VE is largely auto-generated, i.e. for ContentAction:
https://doc.wikimedia.org/VisualEditor/master/#!/api/ve.ui.ContentAction
 (which
https://www.mediawiki.org/wiki/VisualEditor/Gadgets/Add_a_tool#Create_and_register_command
links
to if you haven't seen that page yet)

There's also #wikimedia-editing on irc although it tends to be a bit dead
as well, but still probably better than #mediawiki :).

Cheers,
Marielle



On Tue, Sep 17, 2019 at 2:38 PM Alain PERRY <[hidden email]> wrote:

> Hello list,
>
> I was sent here from the #mediawiki IRC channel, I hope this is indeed the
> correct list to write to and ask you to please forgive me if it is not.
>
> First, a bit about myself: I'm no real developer, just a tech-savvy guy
> trying to build a wiki to document my employer's company inner workings.
> This last bit means documenting any piece of information we handle and our
> business processes in doing so.
>
> After testing a few wiki engines, I came to the conclusion that mediawiki
> with the cargo extension was what I was looking for. I also built a small
> extension to allow inclusion and edition of BPMN diagrams with the
> https://bpmn.io library. All in all, this is pretty basic.
>
> Then I came to the realization that if I wanted any lambda-user to be
> willing to contribute to the wiki content, I needed the Visual Editor.
> Deploying it was easy enough, and everything seems to be working fine at
> the moment.
>
> I however feel I should make it possible to include a BPMN diagram from
> the VE toolbar. Ideally, this will take the form of a "popup" that will
> include the bpmn.io modeler to edit the diagram. However, in order to
> achieve this goal, I have a whole damn lot to learn and to experiment with
> about VE.
>
> So I thought I should start with something a little humbler: a button that
> would just include some basic XML in the page (a special page already
> allows editing that part of the page, so this would already be convenient,
> though far from perfect). Using the gadgets example from the documentation
> on the mediawiki wiki, I'm able to insert content into the page. But that
> content is escaped if it includes XML and I have no idea from the API doc
> how to include something less basic than mere text (or than a given
> template, since the example actually shows how to do that).
>
> What I'm actually getting at is this: would someone with good knowledge of
> the API and some good old patience be willing to "tutor" me by giving
> pointers where I need them ?
>
> My first technical question would be this: I understand that my gadget can
> register a ve.ui.Command, that will in turn call a method on an
> ve.ui.Action object. I guess I should stick to the ContentAction one. But
> I'm not sure what the "content" parameter should contain if given an array.
> Is there, somewhere, some documentation I can read on this?
>
> Thanks a bunch for any help.
>
> Regards,
>
> --
> Alain Perry
>
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Adding a gadget to VisualEditor

Mukunda Modell
I have often thought of extending visual editor and found minimal
documentation to get me started. Thanks for the pointers Marielle, and
thanks Alain for starting the thread.
Please let us know if you have any success, maybe this could be the
beginning of some useful documentation around extending VE.

On Thu, Sep 19, 2019 at 7:24 AM Marielle Volz <[hidden email]> wrote:

> You might want to check out the VE parts of the graph extension. It sounds
> like a good analogue for what you want to do, where there's a pop-up to
> edit the JSON (as well as a visual component) that is interpreted as a Vega
> graph, which is an external library (https://vega.github.io/vega/). Code
> for the VE parts here:
>
> https://github.com/wikimedia/mediawiki-extensions-Graph/tree/master/modules/ve-graph
> .
>
> The documentation for VE is largely auto-generated, i.e. for ContentAction:
> https://doc.wikimedia.org/VisualEditor/master/#!/api/ve.ui.ContentAction
>  (which
>
> https://www.mediawiki.org/wiki/VisualEditor/Gadgets/Add_a_tool#Create_and_register_command
> links
> to if you haven't seen that page yet)
>
> There's also #wikimedia-editing on irc although it tends to be a bit dead
> as well, but still probably better than #mediawiki :).
>
> Cheers,
> Marielle
>
>
>
> On Tue, Sep 17, 2019 at 2:38 PM Alain PERRY <[hidden email]>
> wrote:
>
> > Hello list,
> >
> > I was sent here from the #mediawiki IRC channel, I hope this is indeed
> the
> > correct list to write to and ask you to please forgive me if it is not.
> >
> > First, a bit about myself: I'm no real developer, just a tech-savvy guy
> > trying to build a wiki to document my employer's company inner workings.
> > This last bit means documenting any piece of information we handle and
> our
> > business processes in doing so.
> >
> > After testing a few wiki engines, I came to the conclusion that mediawiki
> > with the cargo extension was what I was looking for. I also built a small
> > extension to allow inclusion and edition of BPMN diagrams with the
> > https://bpmn.io library. All in all, this is pretty basic.
> >
> > Then I came to the realization that if I wanted any lambda-user to be
> > willing to contribute to the wiki content, I needed the Visual Editor.
> > Deploying it was easy enough, and everything seems to be working fine at
> > the moment.
> >
> > I however feel I should make it possible to include a BPMN diagram from
> > the VE toolbar. Ideally, this will take the form of a "popup" that will
> > include the bpmn.io modeler to edit the diagram. However, in order to
> > achieve this goal, I have a whole damn lot to learn and to experiment
> with
> > about VE.
> >
> > So I thought I should start with something a little humbler: a button
> that
> > would just include some basic XML in the page (a special page already
> > allows editing that part of the page, so this would already be
> convenient,
> > though far from perfect). Using the gadgets example from the
> documentation
> > on the mediawiki wiki, I'm able to insert content into the page. But that
> > content is escaped if it includes XML and I have no idea from the API doc
> > how to include something less basic than mere text (or than a given
> > template, since the example actually shows how to do that).
> >
> > What I'm actually getting at is this: would someone with good knowledge
> of
> > the API and some good old patience be willing to "tutor" me by giving
> > pointers where I need them ?
> >
> > My first technical question would be this: I understand that my gadget
> can
> > register a ve.ui.Command, that will in turn call a method on an
> > ve.ui.Action object. I guess I should stick to the ContentAction one. But
> > I'm not sure what the "content" parameter should contain if given an
> array.
> > Is there, somewhere, some documentation I can read on this?
> >
> > Thanks a bunch for any help.
> >
> > Regards,
> >
> > --
> > Alain Perry
> >
> > _______________________________________________
> > Wikitech-l mailing list
> > [hidden email]
> > https://lists.wikimedia.org/mailman/listinfo/wikitech-l
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Adding a gadget to VisualEditor

Greg Rundlett (freephile)
Yaron Koren is working on a BPMN extension to MediaWiki, and just presented
his work <https://www.youtube.com/watch?v=3PlYzjQylto> at SMWCon Fall 2019

Greg Rundlett
https://eQuality-Tech.com
https://freephile.org


On Thu, Sep 26, 2019 at 11:08 PM Mukunda Modell <[hidden email]>
wrote:

> I have often thought of extending visual editor and found minimal
> documentation to get me started. Thanks for the pointers Marielle, and
> thanks Alain for starting the thread.
> Please let us know if you have any success, maybe this could be the
> beginning of some useful documentation around extending VE.
>
> On Thu, Sep 19, 2019 at 7:24 AM Marielle Volz <[hidden email]> wrote:
>
> > You might want to check out the VE parts of the graph extension. It
> sounds
> > like a good analogue for what you want to do, where there's a pop-up to
> > edit the JSON (as well as a visual component) that is interpreted as a
> Vega
> > graph, which is an external library (https://vega.github.io/vega/). Code
> > for the VE parts here:
> >
> >
> https://github.com/wikimedia/mediawiki-extensions-Graph/tree/master/modules/ve-graph
> > .
> >
> > The documentation for VE is largely auto-generated, i.e. for
> ContentAction:
> > https://doc.wikimedia.org/VisualEditor/master/#!/api/ve.ui.ContentAction
> >  (which
> >
> >
> https://www.mediawiki.org/wiki/VisualEditor/Gadgets/Add_a_tool#Create_and_register_command
> > links
> > to if you haven't seen that page yet)
> >
> > There's also #wikimedia-editing on irc although it tends to be a bit dead
> > as well, but still probably better than #mediawiki :).
> >
> > Cheers,
> > Marielle
> >
> >
> >
> > On Tue, Sep 17, 2019 at 2:38 PM Alain PERRY <[hidden email]>
> > wrote:
> >
> > > Hello list,
> > >
> > > I was sent here from the #mediawiki IRC channel, I hope this is indeed
> > the
> > > correct list to write to and ask you to please forgive me if it is not.
> > >
> > > First, a bit about myself: I'm no real developer, just a tech-savvy guy
> > > trying to build a wiki to document my employer's company inner
> workings.
> > > This last bit means documenting any piece of information we handle and
> > our
> > > business processes in doing so.
> > >
> > > After testing a few wiki engines, I came to the conclusion that
> mediawiki
> > > with the cargo extension was what I was looking for. I also built a
> small
> > > extension to allow inclusion and edition of BPMN diagrams with the
> > > https://bpmn.io library. All in all, this is pretty basic.
> > >
> > > Then I came to the realization that if I wanted any lambda-user to be
> > > willing to contribute to the wiki content, I needed the Visual Editor.
> > > Deploying it was easy enough, and everything seems to be working fine
> at
> > > the moment.
> > >
> > > I however feel I should make it possible to include a BPMN diagram from
> > > the VE toolbar. Ideally, this will take the form of a "popup" that will
> > > include the bpmn.io modeler to edit the diagram. However, in order to
> > > achieve this goal, I have a whole damn lot to learn and to experiment
> > with
> > > about VE.
> > >
> > > So I thought I should start with something a little humbler: a button
> > that
> > > would just include some basic XML in the page (a special page already
> > > allows editing that part of the page, so this would already be
> > convenient,
> > > though far from perfect). Using the gadgets example from the
> > documentation
> > > on the mediawiki wiki, I'm able to insert content into the page. But
> that
> > > content is escaped if it includes XML and I have no idea from the API
> doc
> > > how to include something less basic than mere text (or than a given
> > > template, since the example actually shows how to do that).
> > >
> > > What I'm actually getting at is this: would someone with good knowledge
> > of
> > > the API and some good old patience be willing to "tutor" me by giving
> > > pointers where I need them ?
> > >
> > > My first technical question would be this: I understand that my gadget
> > can
> > > register a ve.ui.Command, that will in turn call a method on an
> > > ve.ui.Action object. I guess I should stick to the ContentAction one.
> But
> > > I'm not sure what the "content" parameter should contain if given an
> > array.
> > > Is there, somewhere, some documentation I can read on this?
> > >
> > > Thanks a bunch for any help.
> > >
> > > Regards,
> > >
> > > --
> > > Alain Perry
> > >
> > > _______________________________________________
> > > Wikitech-l mailing list
> > > [hidden email]
> > > https://lists.wikimedia.org/mailman/listinfo/wikitech-l
> > _______________________________________________
> > Wikitech-l mailing list
> > [hidden email]
> > https://lists.wikimedia.org/mailman/listinfo/wikitech-l
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l