Reinitiate GrapesJS with MJML plugin in the modal view without the reloading of the page

I try to initiate GrapesJS editor with MJML plugin in my Symfony project. And try to initiate form with GrapesJS editor in the modal view.

Editor displayed correctly when I load the form first time. But editor don't displayed when I load the modal view second time till the page reload.

There is a part of twig template:


{% block mjml_editor_widget %}
    <div>
        <div class="hidden">
            {{ form_widget(form) }}
        </div>
        <div id="mjml-editor-{{ form.vars.id }}">
            {{ (form.vars.data ?: '<mjml><mj-body></mj-body></mjml>')|raw }}
        </div>
    </div>
    <script type="text/javascript">
        // $(function () {
            CKEDITOR.dtd.$editable.a = 1;//DELETE

            let lp = './img/';
            let plp = '//placehold.it/350x250/';
            let images = [
                plp + '78c5d6/fff/image1.jpg',
                plp + '459ba8/fff/image2.jpg',
                plp + '79c267/fff/image3.jpg',
                plp + 'c5d647/fff/image4.jpg',
                plp + 'f28c33/fff/image5.jpg',
                plp + 'e868a2/fff/image6.jpg',
                plp + 'cc4360/fff/image7.jpg',
                lp + 'work-desk.jpg',
                lp + 'phone-app.png',
                lp + 'bg-gr-v.png',
            ];

            // Set up GrapesJS editor with the MJML plugin
            var editor = grapesjs.init({
                container: '#mjml-editor-{{ form.vars.id }}',
                clearOnRender: true,
                avoidInlineStyle: false,
                storageManager: {
                    autosave: false,
                    autoload: false,
                },
                assetManager: {
                    assets: images,
                    upload: 0,
                    uploadText: 'Uploading is not available in this demo',
                },
                fromElement: true,

                plugins: ['grapesjs-mjml', 'gjs-plugin-ckeditor'],
                pluginsOpts: {
                    'gjs-plugin-ckeditor': {
                        position: 'center',
                        options: {
                            startupFocus: true,
                            extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
                            allowedContent: true, // Disable auto-formatting, class removing, etc.
                            enterMode: CKEDITOR.ENTER_BR,
                            extraPlugins: 'sharedspace,justify,colorbutton,panelbutton,font',
                            toolbar: [
                                {name: 'styles', items: ['Font', 'FontSize']},
                                ['Bold', 'Italic', 'Underline', 'Strike'],
                                {name: 'paragraph', items: ['NumberedList', 'BulletedList']},
                                {name: 'links', items: ['Link', 'Unlink']},
                                {name: 'colors', items: ['TextColor', 'BGColor']},
                            ],
                        }
                    }
                },
            });

            let $field = $('#{{ form.vars.id }}')

            let putContentToTheField = function () {
                console.log('putContentToTheField'); //{# DELETE #}
                $field.val(editor.getHtml());
            }

            {# TODO reduce list of used events #}
            editor.on('update', putContentToTheField);

        console.log('count [field]:', $field.length);//DELETE
        console.log('count [form]:', $field.closest('form').length);//DELETE
        console.log('count [modal]:', $field.closest('.modal-body').length);//DELETE
        console.log('count [close button]:', $field.closest('.modal-dialog').find('button[data-dismiss="modal"]').length);//DELETE

        $field.closest('form').on('submit', function () {
            console.log('submit');
            editor.destroy();
        });
        $field.closest('.modal-dialog').find('button[data-dismiss="modal"]').on('click', function () {
            console.log('close modal');
            editor.destroy();
            // delete editor;
        });
        // });
    </script>
{% endblock %}

The code taken from the demo.

I tried to destroy during the modal view closing, but this did not helped. Setting of the timeout of the initiation of editor did not helped too.

GrapesJS / mjml

Reinitiate GrapesJS with MJML plugin in the modal view without the reloading of the page #255