Monaco Editor inside Vaadin

Flow
1

Hello everyone,
I am trying to display the monaco-editor (https://www.npmjs.com/package/monaco-editor) inside Vaadin, it shows the pure javascript editor, but no css. I am guessing its because of webpack - but there are working examples with webpack, so I don’t know.
If anyone has any tips or can look inside the small project file - it would be much appreciated.

my project (need help here) >> https://github.com/gerasy/monaco-editor-vaadin

UPDATE: I don’t want to copy the whole “node_modules/monaco-editor” folder into “/META-INF/resources/” any ideas?

2

Hi, is possible that the resources do not have the correct location.
In a similar project, I spent many hours thinking that the problem was webpack, but finally, the problem was the file location
https://vaadin.com/docs/v14/flow/importing-dependencies/tutorial-ways-of-importing.html#resource-cheat-sheet

The project I refer to is this [mx-graph]
(https://sourceforge.net/p/kuwaiba/code/HEAD/tree/components/mxgraph-vaadin14/) if you want to take a look

This example is useful [dhtmlx]
(https://sourceforge.net/p/kuwaiba/code/HEAD/tree/prototype/my-element-vaadin14/my-element-flow-root/my-element-flow/src/main/resources/META-INF/resources/frontend/dhtmlx-gantt.js)

3

Johny Ortega:
… the problem was the file location

Hey Johny, thanks for a quick reply. Yes It in fact missing resources… but the solution was to put everything inside the
resources/META-INF/resources/node_modules/monaco_editor/ folder, which I guess is an ugly solution but I don’t really get how I can import (publish) the whole folder without putting it there.

You can see the current version in the github link above. Thanks for help.

4

I am new to webpack and vaadin, maybe anyone has a tip where i should look into?
how can I enable webpack to pack my referenced node_modules webcomponent into the project?
It is really ugly to have to copy the whole node_modules/monaco-editor folder into the “/META-INF/resources/” Folder.

Thanks a lot!

5

did you eventually find another way to get the monaco editor working or did you end up with the workaround of copying the folder node_modules/monaco-editor to resources/META-INF/resources/node_modules/monaco-editor

Also, did you maybe find out the reason why the monaco-editor makes problems here? Since one doesn’t have to do that with every @NpmPackage dependency.

6

Hi,

It’s much easier to use cdn to load the monaco-editor like in this topic: https://vaadin.com/forum/thread/17979931/vaadin-14-component-based-on-node-module

The main problem with Monaco editor is the configuration with webpack, you can see the instructions in their documentation here: https://github.com/Microsoft/monaco-editor/blob/HEAD/docs/integrate-esm.md

You can check a demo project I tried few months ago.

If I remembered it correctly, I had to change the webpack.config.js and install some npm package manually (monaco-editor-plugin at least). The css is not working correctly if I’m using the css from webpack (still the css from using cdn).
18399285.zip (133 KB)