Adding a Markdown editor to a modal window.

[theoreaves]

Hello.

I have a use case where I want to place a markdown editor (nhn/tui.editor). I can make this work on a standard Livewire screen, but when I attempt to use it on a modal window, I can't seem to make this work. I assume this has to do with the fact that the markdown window is setup during the page load, so I attemtped to add code to my modal window to do it there but I can't seem to get anything to work. However, I am not the best javascript programmer, so I'm guessing I'm missing something.

Here is what I have added to my app.js resource:

import Editor from '@toast-ui/editor';
import 'codemirror/lib/codemirror.css';
import '@toast-ui/editor/dist/toastui-editor.css';

console.log('time to setup the editor....');

try {
    if (document.querySelector('#editor')) {
        console.log('inside editor setup...');
        const editor = new Editor({
            el: document.querySelector('#editor'),
            height: '400px',
            initialEditType: 'wysiwyg',
            placeholder: 'Add a note',
        });
        console.log('setup markdown...');
        editor.setMarkdown(document.querySelector('#content').value);
        console.log('setup document...');
        document
            .querySelector('#editorForm')
            .addEventListener('submit', (e) => {
                e.preventDefault();
                document.querySelector('#content').value = editor.getMarkdown();
                e.target.submit();
            });
    } else {
        console.log('no editor div found');
    }
} catch (error) {
    console.log('no need for editor');
    console.log(error);
}

This works fine for a standard page, and even a standard livewire page, but not on a modal page. I tried to add this logic to a script tag at the bottom of my modal window blade but I get an error that you can't do an import from there. I've also tried putting the import parts back in app.js and just putting the code that attempts to make the markdown editor in the blade file, but that fails saying that "Editor" doesn't exist.

Any help on how to make this work would be greatly appreciated.

Thanks!

[howdu]

Use a Livewire hook as explained here: #188 (comment)