Integration with the Visual Editor

[bitsofmymind]

The Mermaid codes seems to break when used within the Visual Editor. However, usage of the Mermaid syntax sort of implies some proficiency with declarative syntaxes and most users will probably be familiar with Wikicode. That being said, being able to add, move, copy and edit diagrams from within the Visual Editor has its advantages.

Here is what we have done on our wiki to get it all to work:

• Mermaid Template
• Lua Module to generate the Mermaid code from a wrapper template syntax
• JS Gadget to handle the refreshing of diagrams when they are edited

Using a template to wrap the Mermaid parser functions was required because from what I gather, the Visual Editor treats parser functions like templates which conflicts with the Mermaid syntax. For proper integration of the raw #mermaid parser function, a specific Visual Editor tool that lets a user edit it as basic text would be needed.

I figured I'd share our implementation here in case someone wants to reuse some of the code and bring native Visual Editor support to this extension.

[kghbln]

Thank you for sharing your preliminary solution. Indeed, having VE support for this extension will be nice to have.