FroalaEditorDirective should use the host's FloaraEditor

[bence-balogh-intland]

Hi Guys,

We are using froala-editor package, together with angular-froala-wysiwyg. We recognized the following behaviors with the new version of these packages:

• It is not possible to define custom commands/icons/buttons/etc. via the FroalaEditor global object, as it is described here: https://froala.com/wysiwyg-editor/docs/concepts/custom/button/
• FroalaEditorDirective imports FroalaEditor from froala_editor.min.js instead of froala_editor.pkgd.min.js which causes lack of functionalities (e.g. in toolbar)

These issues have been traced back to the following root cause:

• FroalaEditorDirective imports directly FroalaEditor object/constructor from froala-editor like: https://github.com/froala/angular-froala-wysiwyg/blob/master/projects/library/src/editor/editor.directive.ts#L4

I have created a test repo for demonstration with both Angular and Non-Angular version of the editor: https://github.com/bence-balogh-intland/angular-froala-test/compare/master...add-froala With the following result:

Please consider the following differences between the 2 editors:

• Custom icon is not showing up in the toolbar in case of the Angular spec. editor (triangular shape on the Non-Angular editor)
• A couple of options are missing from the toolbar in case of the Angular spec. editor
• There is no character counter in the footer in case of the Angular spec. editor
• +1 the FroalaEditor.INSTANCES contains only one reference (for the Non-Angular editor), although clearly there are 2 editors
• +2 build warning on console

For curiosity I checked what happens if I remove the line of the following import from node_modules\...\angular-froala-wysiwyg.js: import FroalaEditor from 'froala-editor';

And as you can see, it solved all of the points above:

So my suggestion would be to remove the import of FroalaEditor from angular-froala-wysiwyg, and leave this resolution for the host applications, since froala-editor appends FroalaEditor to the window object on initialization. E.g. one possible way to do that: https://github.com/bence-balogh-intland/angular-froala-test/compare/master...add-froala#diff-2d2675bb4687601a5c7ccf707455132f90f3516a33716185687e5c41df59ac7dR36

Checked with: angular-froala-wysiwyg: 4.0.14 froala-editor: 4.0.14 Node: 14.18.0 Angular: 14.2.0

Thanks in advance!

[bence-balogh-intland]

I found a workaround, although it is more likely a temporary solution: https://github.com/bence-balogh-intland/angular-froala-test/compare/add-froala...fix-froala

1. Import froala-editor/js/plugins.pkgd.min.js into somewhere, e.g. app.module.ts - solves missing features
2. Explicitly define window.FroalaEditor on init - solves customization