kartik-v / yii2-markdown

Advanced Markdown editing and conversion utilities for Yii Framework 2.0
http://demos.krajee.com/markdown
Other
89 stars 41 forks source link

MarkdownEditor unreliable with Firefox #67

Closed davidnewcomb closed 6 years ago

davidnewcomb commented 6 years ago

I have created a form on my site that uses the MarkdownEditor widget. Under Chrome the page always loads properly and all the buttons work as expected.

screen shot 2018-06-08 at 02 21 55

When I view the same page in Firefox, it seems to work once then breaks. When it is broken it looks like:

screen shot 2018-06-08 at 02 23 01

The height is not honoured. The Preview button doesn't work, there is no call out to the preview endpoint when the button is clicked and no messages in the console log. The full screen button doesn't work either (also nothing in console log). The other buttons in the tool group (e.g. bold, italic) work as expected.

I include my configuration for completeness, but I don't think the problem is here. It feels like a javascript loading issue.

common/config/main.php

'modules' => [
    'markdown' => [
        'class' => 'kartik\markdown\Module',
        // the controller action route used for markdown editor preview
        'previewAction' => '/markdown/parse/preview',
        // the list of custom conversion patterns for post processing
        'customConversion' => [
            // default
            // '<table>' => '<table class="table table-bordered table-striped">'
            '<table>' => '<table class="table table-bordered">'
        ],
        'smartyPants' => true
    ]
]

myview.php

    <?php
    echo $form->field($model, 'description')->widget(MarkdownEditor::classname(), [
        'height' => 300,
        'encodeLabels' => false,
        'showExport' => false,
    ]);
    ?>
davidnewcomb commented 6 years ago

I noticed that when it loads in Chrome the editor starts small then expands to the required height and presumerably does the post-load work which switches on the preview/full-screen buttons. It looks like this part is not working or failing under Firefox.

davidnewcomb commented 6 years ago

Found it!

In MarkdownEditor.php you have:

$js = 'jQuery(window).on("load", function(){initEditor(' . Json::encode($params) . ')});';
$view->registerJs($js);

You have tried to hook into the javascript registration subsystem and the jquery subsystem at the same time, and it has created a race condition. The registration part is not run in the same bit as the bit which does all the onload stuff. The page loads once but the initEditor part is never called again, so it never registers the button hooks.

If you change it to:

        $js = 'initEditor(' . Json::encode($params) . ');';
        $view->registerJs($js, View::POS_LOAD, "kv-init-editor");

then the initEditor() will be run will all the other stuff that gets run at page load time.

I pushed my changes live before I found this bug, so a speedy new version would be really helpful :)

Due to the unpredictable nature of this kind of bug you might find that it fixes the online demo too (#66 ).