tylingsoft / markdown-plus

Markdown editor with extra features.
http://mdp.tylingsoft.com/
2.12k stars 395 forks source link

Custom JS not working for mermaid #73

Closed michaelritsema closed 7 years ago

michaelritsema commented 7 years ago

I'm passing in some custom JS to the mermaid sequenceDiagram config. It is not working. I think perhaps the JS gets included before the mermaid object gets created? If that is the case it would be nice to be able to upload JS runs after everything else. Or perhaps there is an loaded event I can hook into?

example JS:

mermaid.sequenceConfig = { diagramMarginX:50, diagramMarginY:10, boxTextMargin:5, noteMargin:10, messageMargin:35, mirrorActors:true };

tylerlong commented 7 years ago

Hi @michaelritsema there does exist such a hook: https://github.com/tylingsoft/markdown-core/blob/master/markdown-core-browser.js#L46

This hook method is called every time the preview is re-rendered.

tylerlong commented 7 years ago

Hi @michaelritsema I just realized that there might be a simpler solution:

$(function(){
    mermaid.sequenceConfig = {
        diagramMarginX:50,
        diagramMarginY:10,
        boxTextMargin:5,
        noteMargin:10,
        messageMargin:35,
        mirrorActors:true
    };
});
michaelritsema commented 7 years ago

@tylerlong neither approach seems to be working. Perhaps the mermaid object is already created at this time and doesn't get recreated on each preview?

My test file is at: https://michaelritsema.github.io/ziften.js

tylerlong commented 7 years ago

Your code is not to create a new mermaid object. It is instead to change the configuration of mermaid. I have no idea why it doesn't work at the moment. I don't think it's specific to markdown-plus. It's probably a JS issue. Can you make your code working out of markdown-plus?

Here is how I change the config of gatt diagram: https://github.com/tylingsoft/markdown-core/blob/master/markdown-core-browser.js#L15

tylerlong commented 7 years ago

I confirm that this issue has nothing to do with Markdown Plus.

Open http://mdp.tylingsoft.com/ with chrome, open the JS console, paste and excute the following code:

mermaid.ganttConfig = {
    axisFormatter: [
        ['%d-%m-%Y', function(d) {
        return d.getDay() == 1;
        }]
    ]
};

And you can see that the axis format for gantt diagram changes to '%d-%m-%Y'.

This proves that Markdown Plus does support changing the config of mermaid.

But why doesn't mermaid.sequenceConfig = ... work? I don't know. An issue should be created for the mermaid project.