Notification plugin Cannot read property 'getClientRect' of null

[Stan]

Steps to reproduce

1. I have overlay popup window with bigger size of CK with Empty Toolbar. Other config is: removePlugins: "autosave,embed,embedbase,notificationaggregator,notification,toolbar,elementspath,backup,uploader,charcount,stat"
2. After confirm button I copy content of this CK to page by this code:

if (CKEDITOR.instances['ck'] && CKEDITOR.instances[elemName]) {
        var data = CKEDITOR.instances.e1.getData();

        var config = CKEDITOR.instances[elemName].config;
        config.allowedContent = {
            // Allow all content.
            $1: {
                elements: CKEDITOR.dtd,
                attributes: true,
                styles: true,
                classes: true
            }
        };
        CKEDITOR.instances[elemName].destroy(true);
        CKEDITOR.replace(elemName, config);

        CKEDITOR.instances[elemName].setData( data);

        var editorText = document.getElementById(elemName);
        editorText.value = data;
    }

3. Content is copied, but after few seconds I have error in console:

notification/plugin.js:617 Uncaught TypeError: Cannot read property 'getClientRect' of null

Expected result

No errors.

Actual result

notification/plugin.js:617 Uncaught TypeError: Cannot read property 'getClientRect' of null

Other details (browser, OS, CKEditor version, installed plugins)

CK 4.5.8, Chrome 50.0, Win 8.1, autosave plugin

[Jakub Ś]

In order to accept a bug we need clear reproduction steps in as simplified environment as possible (best default).

• Currently you have bunch of third-party plugins, non-standard CKEditor plugins and if I understand correctly, you are not using the toolbar. This is very non-standard.

• Error gets thrown in notification plugin and is probably connected to missing toolbar:

   top = editor.ui.space( 'top' ),
   topRect = top.getClientRect(), //here
  

  This plugin requires toolbar plugin but from what I can see in your bits of code, you are removing both plugins so I unsure why this code gets executed at all.

Currently this is very unclear, please simplify your test case as much as possible and send us working sample - HTML page which can be put into default CKEditor samples folder and will show this issue (extra CKEditor plugins are of course allowed)

[Stan]

1. Its very simple. Use plugin autosave, behind CK editor make button which show popup overlay with full features + confirm button. After click of confirm button script take content from CK on popoup and put it into replaced CK with all source configs. AS you can see my code. 2. You can make another test with disabled toolbar. var notification2 = editor.showNotification( 'Error occurred', 'warning' ); This will show different message. 3. I tried to enable plugins: notificationaggregator,notification,toolbar And error is same.

[Jakub Ś]

1. Autosave is a third-party plugin and not plugin created by CKSource. Is it possible to reproduce this issue without it?
2. To make it clear - Instead of guessing what author had in mind, I need the same exact file which is causing problems for him. File should be as simple as possible i.e. I should be able to run it with standalone CKEditor without third-party plugins or core-code customizations .It should be also possible to reproduce this issue in standalone CKEditor and not only integrated into your application. Are you able to provide such file?

[Stan]

autosave plugin using notification plugin which is core plugin. And error is on notification plugin not on autosave.

[Jakub Ś]

Nevertheless, I need the working sample. Could you please provide reduced and working file which is causing problem for you?

[Stan]

I uploaded just now. Steps to reproduce:

1. open index.html
2. click href "Edit more in Editoru" under CK
3. insert some text and confirm by OK
4. wait few second for JS error in console.

[Jakub Ś]

The problem is with your implementation and how autosave and notification work.

Error gets thrown in notification plugin with these lines

top = editor.ui.space( 'top' ),
topRect = top.getClientRect(),

It gets thrown because, autosave uses notification and notification needs toolbar to display correctly.

The problem is that you remove the entire editor and notification can't find the toolbar anymore. After commenting below line in your function, no error is thrown.

function zavriOkno(id)
{
  //  removeElement(document.getElementById(id));
}

Conclusion is - notification plugin doesn't assume that someone will remove the editor before displaying the notification so please change your implementation so that it fits the requirement.

[Stan]

Ohh sorry, maybe i found what is the problem. I destroyed old CK object but forget destroy CK object in modal dialog.