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.