Broken after upgrading from Froala 2.9 to 3.0.x in Angular

Question

I am wondering if anyone has run into similar issue after upgrading from Froala 2.9.x to 3.0.x where code no longer works. The biggest issue right now i have in my Angular / reactive Form deployment is that i no longer get a reference to my component instance. The code i used before which worked was this.

private setFroalaOptions(componentInstance) {
        this.froalaOptions = {
            key: environment.froala.license.version3,
            charCounter: true,
            charCounterCount: true,
            toolbarSticky: false,
            attribution: false,
            // zIndex: 2501,
            // zIndex: 10,
            height: 300,
            ...this.froalaUploadService.initUploadOptions(),
            ...this.froalaUploadService.initImageManagerOptions(),
            events : {
                'froalaEditor.focus' : function(e, editor) {
                    // componentInstance.editorInstance = editor;
                },
                'froalaEditor.blur' : function(e, editor) {
                    // save selection so we can restore just before inserting any element
                    editor.selection.save();
                },
                'froalaEditor.initialized' : function(e, editor) {
                    componentInstance.editorInstance = editor;
                },
                ...this.froalaUploadService.initImageManagerEvents(),
                ...this.froalaUploadService.initUploadEvents(),
            },
            toolbarButtons: ToolbarButtons,
        };
    }

then i was able to call the below code to insert values at the current cursor position of the editor

  addField($event: IServerDropdownOption) {
        if (this.editorInstance) {
            // restore selection so element is inserted in the cursor's last known position
            this.editorInstance.selection.restore();
            this.editorInstance.html.insert(`${$event.value}`);
        }
    }

now that i no longer have the this.editorInstance i does not work and i cant find any docs which outline any possible changes which might have broken this function.

Answer 1

Based on their docs, I believe the event function context (i.e. this) is the editor instance.

// FROM DOCS
new FroalaEditor('.selector', {
  events: {
    'focus': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    })
  }
});

Link to docs: https://www.froala.com/wysiwyg-editor/docs/events#focus

---

Which means you should be able to do something like:

'focus' : function() {
  // componentInstance.editorInstance = this;
},

---

Full example for your scenario:

private setFroalaOptions(componentInstance) {
        this.froalaOptions = {
            key: environment.froala.license.version3,
            charCounter: true,
            charCounterCount: true,
            toolbarSticky: false,
            attribution: false,
            // zIndex: 2501,
            // zIndex: 10,
            height: 300,
            ...this.froalaUploadService.initUploadOptions(),
            ...this.froalaUploadService.initImageManagerOptions(),
            events : {
                'focus' : function() {
                    // componentInstance.editorInstance = this;
                },
                'blur' : function() {
                    // save selection so we can restore just before inserting any element
                    this.selection.save();
                },
                'initialized' : function() {
                    componentInstance.editorInstance = this;
                },
                ...this.froalaUploadService.initImageManagerEvents(), // make sure to update these
                ...this.froalaUploadService.initUploadEvents(), // make sure to update these
            },
            toolbarButtons: ToolbarButtons,
        };
    }