Wysiwyg-editor: "this" is undefined in "initialized" event callback

[fynnfeldpausch]

Expected behavior.

Within the _"initialized"_ event callback, this refers to the editor instance.

Actual behavior.

Within the _"initialized"_ event callback, this is undefined.

Steps to reproduce the problem.

Use the angular wrapper for Froala and register an "_initialized_" event in the options. Try to access this. Here is a StackBlitz showing the behavior: https://stackblitz.com/edit/angular-8wn2zk. Notice that the console.log shows an undefined statement. Changing the version of "angular-froala-wysiwyg" back to "3.0.0-rc.2" resolves the problem. The same behavior can bee seen for other callback definitions.

Editor version.

v3.0.0 (This bug did not exists in v3.0.0-rc.2)

OS.

macOS 10.14.5

Browser.

Google Chrome Version 74.0.3729.169 (64-Bit)

[imuller]

Same here in Firefox

[fynnfeldpausch]

Any updates on this issue? This is basically a blocker for v3.0.0 since callbacks are not working anymore.

[pleunv]

Can confirm that the initialized event is not passing the editor instance anymore, which it used to do in v2. Access to this instance is pretty much required if you're using a wrapper (like react-froala-wysiwyg) and want to set up custom plugins (tributejs in my case). Any chance this could be added back in? Or is there an alternative way to get hold of the instance?

[pleunv]

There is a workaround for this. While the editor context is not being passed to the handler, it is calling each handler with its context set to the editor instance, as you can see here.

This means that you can do the following:

const config = {
  events: {
    initialized: function onEditorInitialized() {
      const editor = this;
      tribute.attach(editor.el);
      // ...
    }
  }
}

return <FroalaEditor config={config} />;

The problem here is that if you define your handler as an arrow function as opposed to using a function(), you will rebind its lexical scope to your component and lose access to the editor instance. I have to say that this is pretty confusing and not straightforward without looking at the source.

[casualuser]

this was fixed and published as "angular-froala-wysiwyg": "3.0.3-2" for immediate updates
and will be included in normal versions starting from upcoming 3.0.4

[pleunv]

Will this also be available for the react component?

[casualuser]

fixed in 3.0.4

fix made in main code so all integrations updated up to 3.0.4 should work well

[pleunv]

How exactly was this fixed? The docs are still not mentioning any arguments being passed to initialized().

edit: Upon inspection this is in fact the case, and I can't access the editor instance at all anymore. The fix seems to have made it worse than before?

[pleunv]

Followup: Still can't use arrow functions but a function still works, albeit without arguments so you still need to use this. The editor instance that's available on this also appears to be incomplete, as it is missing certain properties like events, which means that integrations like tributejs are now broken. Using config.events.keydown instead of instance.events.on('keydown', ...) doesn't work in this case as you need to be able to cancel the event, which you cannot do by using the event config, as far as I can tell.

So in short, latest version seems to have made things a bit worse, and tributejs integration seems impossible.

The editor instance that's initially available in the initialized handler is the following:

Which is lacking most of the instance properties.

[pleunv]

As a workaround you could temporarily delay binding of events as the instance object seems to get populated immediately after calling the initialized handler, something like this:

const _ctx = this;

config.events.initialized = function onInitialized() {
  const editor = this;

  if (enableMentions) {
    _ctx.loadTributeConfig();
    _ctx.tribute.attach(editor.el);

    setTimeout(() => {
      editor.events.on(
        'keydown',
        keyDownEvent => {
          return keyDownEvent.which === 13 && _ctx.tribute.isActive ? false : keyDownEvent;
        },
        true
      );
    }, 50);
  }
};