nhn / tui.editor

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
http://ui.toast.com/tui-editor
MIT License
17.09k stars 1.74k forks source link

TypeError during blur event in WYSIWYG mode #1008

Open OpenSysJoe opened 4 years ago

OpenSysJoe commented 4 years ago

Describe the bug

An error occurs inside toastui-editor.js when the editor loses focus (blur event). This only happens in WYSIWYG mode (initialEditType: 'wysiwyg'). With initialEditType: 'markdown' there's no error during handling of the blur event.

This error is logged in the browser console:

TypeError: "dom.getParentUntil(...) is undefined"
    fixIMERange https://uicdn.toast.com/editor/latest/toastui-editor-all.js:26833
    _initSquireEvent https://uicdn.toast.com/editor/latest/toastui-editor-all.js:26074
    fireEvent https://uicdn.toast.com/editor/latest/toastui-editor-all.js:12467
    handleEvent https://uicdn.toast.com/editor/latest/toastui-editor-all.js:12467

As a result, the registered event handler for the blur event is not called. The editor itself still works perfectly after the error occurred.

To Reproduce

I created this minimal HTML+JS to reproduce the error:

<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
    <link rel="stylesheet" href="toastui-editor.css" />
</head>
<body>
    <div id="xxeditor"></div>
    <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.js"></script>
    <script>
        const editor = new toastui.Editor({
            el: document.querySelector('#xxeditor'),
            height: '500px', 
            initialEditType: 'wysiwyg',
            initialValue: '# This is MarkDown\n\nHello World!',
            events: {
                blur: function() {
                    console.log('blur!');
                }
            }
        });

        // BTW: same thing happens when registering the event handler with addHook()
        // editor.addHook("blur", function(e) {
        //  console.log("blur!");
        // });
    </script>
</body>
</html>

After loading the page do this to reproduce:

Expected behavior

There should be no error and the registered event handler for the blur event should be called.

Desktop (please complete the following information):

Additional context

Thanks a lot for all of your hard work on this project. This is really an amazing editor :1st_place_medal:.

seonim-ryu commented 4 years ago

@OpenSysJoe Thanks for explaining the issue in detail. And I confirmed that the issue was reproduced in Firefox. Interestingly, it works fine in Chrome in my case.. 🤔

chrome-blur-test

firefox-blur-test

Anyway, I'll let this be fixed in the next release version. Thanks for reporting the issue!