[Wikitech-l] Running JS for parser function preview in Visual Editor

2020-04-04 Thread Jeroen De Dauw 
Hey,

I am maintainer of the Maps extension for MediaWiki.
https://github.com/JeroenDeDauw/Maps#maps

Recently I worked on improving integration with Visual Editor. Maps used to
not show up as a grey box [0] since their initialization JavaScript was not
being run. I got things working but am not happy with the solution and hope
there is a better approach.

After some searching I found that if I ran the initialization code in a
handler to the ve.activationComplete hook, the maps would get initialized
as desired [1]. That is not a complete solution though, since you can edit
the maps with Visual Editor [2]. This causes an API request that parses the
new wikitext to HTML, which then replaces the old HTML of the initialized
map. So initialization needs to happen again.

An hour or two searching through the docs and Visual Editor code did not
yield any usable hook/event. (This was quite surprising to me. Has no one
ever done something similar to what I am doing here?) So I settled on just
running initialization once every second with setInterval(). I found the
ve.deactivationComplete hook which I then used to stop the code running
every second on saving and existing the visual editor. Turns out that when
opening the visual editor after that does not result in a new
ve.activationComplete event, hence I had to remove termination of the
repeating initialization.

Surely there is a better way to run my code once per second (ad infinitum)
starting with Visual Editor activation? The perfect event for my usecase
would be "visual editor rendered a parser function". A broader event (ie
"something got rendered") would still be better than nothing.

You can see my current code here [3], including a few commented out bits
which I left in so you can see some of what did not work.

[0]
https://user-images.githubusercontent.com/146040/78461765-18d15780-76cc-11ea-82cd-eb69d0179fd7.png
[1]
https://user-images.githubusercontent.com/146040/78461769-21299280-76cc-11ea-9461-a2c343062482.png
[2]
https://user-images.githubusercontent.com/146040/78461779-369ebc80-76cc-11ea-9495-4a91a24a.png
[3]
https://github.com/JeroenDeDauw/Maps/blob/7.17.1/resources/leaflet/LeafletLoader.js#L24-L45

Cheers

--
Jeroen De Dauw | www.EntropyWins.wtf 
Professional wiki hosting and services: www.Professional.Wiki

Entrepreneur | Software Crafter | Open Source | Wikimedia | Speaker
~=[,,_,,]:3
___
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l

Re: [Wikitech-l] Running JS for parser function preview in Visual Editor

2020-04-05 Thread Máté Szabó 
Hi Jeroen,

I think you need to register a custom DM (DataModel)[1] and CE 
(ContentEditable)[2] node implementation for this extension tag inside 
VisualEditor to control their rendering and how the user can interact with 
them. Unfortunately, I am not sure if there is documentation (apart from the 
generated JSDoc) for these APIs, so I tend to refer to usage patterns in 
existing extensions when working with them. The Graph extension is an example 
of an extension that leverages these APIs to customise the behaviour of an 
extension tag that relies on JS libraries inside the VE.[3]

Hope this helps!

—
[1] https://doc.wikimedia.org/VisualEditor/master/#!/api/ve.dm.MWExtensionNode
[2] https://doc.wikimedia.org/VisualEditor/master/#!/api/ve.ce.MWExtensionNode
[3] 
https://github.com/wikimedia/mediawiki-extensions-Graph/tree/master/modules/ve-graph

Cheers,
Máté Szabó 
SOFTWARE ENGINEER

Fandom Poland sp. z o.o. z siedzibą w Poznaniu, ul. Abp. A. Baraniaka 6
Sąd Rejonowy Poznań – Nowe Miasto i Wilda w Poznaniu, VIII Wydział Gospodarczy 
Krajowego Rejestru Sądowego, KRS 254365
NIP: 5252358778
Kapitał zakładowy: 50.000,00 złotych

> On 4 Apr 2020, at 23:46, Jeroen De Dauw  wrote:
> 
> Hey,
> 
> I am maintainer of the Maps extension for MediaWiki.
> https://github.com/JeroenDeDauw/Maps#maps
> 
> Recently I worked on improving integration with Visual Editor. Maps used to
> not show up as a grey box [0] since their initialization JavaScript was not
> being run. I got things working but am not happy with the solution and hope
> there is a better approach.
> 
> After some searching I found that if I ran the initialization code in a
> handler to the ve.activationComplete hook, the maps would get initialized
> as desired [1]. That is not a complete solution though, since you can edit
> the maps with Visual Editor [2]. This causes an API request that parses the
> new wikitext to HTML, which then replaces the old HTML of the initialized
> map. So initialization needs to happen again.
> 
> An hour or two searching through the docs and Visual Editor code did not
> yield any usable hook/event. (This was quite surprising to me. Has no one
> ever done something similar to what I am doing here?) So I settled on just
> running initialization once every second with setInterval(). I found the
> ve.deactivationComplete hook which I then used to stop the code running
> every second on saving and existing the visual editor. Turns out that when
> opening the visual editor after that does not result in a new
> ve.activationComplete event, hence I had to remove termination of the
> repeating initialization.
> 
> Surely there is a better way to run my code once per second (ad infinitum)
> starting with Visual Editor activation? The perfect event for my usecase
> would be "visual editor rendered a parser function". A broader event (ie
> "something got rendered") would still be better than nothing.
> 
> You can see my current code here [3], including a few commented out bits
> which I left in so you can see some of what did not work.
> 
> [0]
> https://user-images.githubusercontent.com/146040/78461765-18d15780-76cc-11ea-82cd-eb69d0179fd7.png
> [1]
> https://user-images.githubusercontent.com/146040/78461769-21299280-76cc-11ea-9461-a2c343062482.png
> [2]
> https://user-images.githubusercontent.com/146040/78461779-369ebc80-76cc-11ea-9495-4a91a24a.png
> [3]
> https://github.com/JeroenDeDauw/Maps/blob/7.17.1/resources/leaflet/LeafletLoader.js#L24-L45
> 
> Cheers
> 
> --
> Jeroen De Dauw | www.EntropyWins.wtf 
> Professional wiki hosting and services: www.Professional.Wiki
> 
> Entrepreneur | Software Crafter | Open Source | Wikimedia | Speaker
> ~=[,,_,,]:3
> ___
> 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

Re: [Wikitech-l] Running JS for parser function preview in Visual Editor

2020-04-05 Thread Jeroen De Dauw 
Hey Szabó,

Thanks for the pointers - much appreciated.

My impression is that the approach you are talking about is great for
creating a high level of integration with Visual Editor. I've looked at
Kartographer which is doing something similar. However at this point I just
want the map JS to be executed appropriately. Writing 2000+ lines of JS for
this is not reasonable. Probably I don't need quite that much, but it is
hard to tell. It certainly seems like I'd end up with way more code and
coupling to VE than I have now, making my current hack preferable. Or is
registering minimal DM/CE stuff really short and decoupled?

Cheers

--
Jeroen De Dauw | www.EntropyWins.wtf 
Professional wiki hosting and services: www.Professional.Wiki

Entrepreneur | Software Crafter | Open Source | Wikimedia | Speaker
~=[,,_,,]:3
___
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l