Loading external JSModule library (FroalaEditor)

Flow
1

Hi, I want to be able to load up froala editor in a Vaadin Component. Currently, I’ve managed to do this by using CDN files with @JavaScript and @StyleSheet annotations:

import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JavaScript;
import com.vaadin.flow.component.dependency.StyleSheet;
import com.vaadin.flow.component.html.Div;


@Tag("test-froala-editor")
// @NpmPackage(value = "froala-editor", version = "4.0.19")
// @JavaScript("froala-editor/js/froala_editor.pkgd.min.js")
// @CssImport("froala-editor/css/froala_editor.pkgd.min.css")
@StyleSheet("https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css")
@JavaScript("https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js")
public class FroalaEditor extends Div {

    public FroalaEditor(String htmlId) {
        setId(htmlId);
        getElement().executeJs("""
                                var editor = new FroalaEditor($0);
                """, "#" + htmlId);
    }
}

Is it possible to somehow do this by using node modules? The commented annotations seem to work (do not get compilation errors that files could not be found), but there is a JS error uncaught ReferenceError: FroalaEditor is not defined

I read an article that seems to suggest that the function (object?) FroalaEditor should be assigned to the window object: https://mvysny.github.io/Vaadin-difference-jsmodule-javascript/
But since I just want to use the external code and not modify the froala-editor library, I did not want to go that route and try that.

2

You can do it this way: vaadin-tooltip-js/src/main/java/org/vaadin/jeanchristophe/jquery/TrumbowygResourceView.java at master · jcgueriaud1/vaadin-tooltip-js · GitHub

3

Thanks, will give this a try