Writing a wrapper Component for https://summernote.org/

Flow
1

I’m trying to write a wrapper Component for Summernote (https://summernote.org/) - an HTML editor component.
I’ve written standalone Lit-based WebComponents for Vaadin already, including a corresponding Java Component. But Summernote requires jQuery and Bootstrap and I’m not really sure how to hook them up. Or if it can even work. E.g. to initialize the Summernote component it wants me to call

$(document).ready(function() {
  $('#summernote').summernote();
});

I assume that it would go into Lit’s firstUpdated() function, but I suspect that a re-render of the Lit component would remove everything that summernote(); added.
But I don’t event get this far. I’ve set up the basic Java type and corresponding .ts file and added several @NpmPackage annotations for Summernote, Bootstrap and jQuery. But at runtime it doesn’t find $. Or the summernote() function (if I replace $('#summernote') with this.shadowRoot.getElementById('summernote')).
Does anyone have experience with this or does anyone know other OSS projects that do something like that (use jQuery and/or Bootstrap)?

2

did you look into this yet: Integrate JQuery into Vaadin Flow | Vaadin

3

This will include it globally instead of contained within the WebComponent, right? I was hoping to turn this into a reusable component.

4

I don’t think it’s that much different for web components?

5

You can integrate jquery globally or not. It depends on the way you’re implementing things (see the blog post)

6

I recommend to use the global way, since it’s basically how jquery is designed

7

And locally it can be buggy depending on the jquery plugin/addon you’re using

8

I suppose it depends on how Summernote uses jQuery. But I do seem to have jQuery available in my WebComponent now without it being available outside.

9

Yeah, exactly. It’s still missing the summernote() function it seems to expect on the div. No idea yet how that’s supposed to get there.

10

You can replace $(‘#summernote’) by $(div) and div is your div inside your shadow dom

11

(lit is probably useless in that case, since everything will be managed by the jquery component)

12

Oh, because summernote() isn’t a function somehow attached to the div, but provided by that jQuery-object that wraps the div!

@query(‘#summernote’)
div: HTMLDivElement;

And later:

$(this.div).summernote();

seems to work or at least do something now :) Not sure if it will ultimately work properly like this way, but I can still fallback to do things globally for this application, I suppose. And find a different library that doesn’t use jQuery to create a reusable component.

13

Anyway, thank you for your valuable input so far.

14

You can find one add-on in the Directory that uses jQuery, and it is this PivotTable for Flow implementation GitHub - vaadin-component-factory/pivot-table-flow

15

The jQuery is a bit a trouble maker as it is starts to be legacy and does not behave that well alongside other modern stuff. One option to use it is like in this add-on, where I am importing it as static resource instead of having it in frontend bundle. The negative side effect of this is that you will have trouble if you have more than one jQuery based add-on due possible version conflicts etc.

16

Even with a frontend bundle, would it even be possible to use several versions of jQuery in the application?

17

And if multiple add-ons use @NpmPackage to download the same package, but a different version, all add-ons will use the resolved version and not necessarily their own version, right?

18

Even with a frontend bundle, would it even be possible to use several versions of jQuery in the application?
No, it shouldn’t be, as npm will install only the newest of the dependent versions. But there will be likely be a problem with vite not able to process old libraries to bundle.

19

all add-ons will use the resolved version and not necessarily their own version, right?
Yes, that is how it normally works.

20

But npm should be able to download and install only one version or you can force it (like we did for the vaadin components), the rest (if the library is working with this version) is magic :magic_wand: