Help to debbug the grapejs

[ronaldohoch]

Hello Artf, I have some problem discribed here in this issue: GrapesJS/mjml#281 and here: #4247

So, we tryed to debug the grapesjs, but unfortunately, we can't go over this because the debugger itself of javascript is not running inside any exported function.
Example:
Inside main file src/index.js:87 https://github.com/artf/grapesjs/blob/dev/src/index.js#L87

We add a debugger; and it is not running on the initialization of the editor.
console.log(1) it's also not working inside those functions.
Outside of export default{ they work like a charm.

I can't find a way to enable debugger in webpack devServer, so i'm stuck on it.

Can you teach us how to do it?

[artf]

I'd not expect anything strange from the devServer point of view. When it's running all the source files are updated at any change. If you're trying to load the development JS file in another project, be sure to include the proper js file rendered by the dev server and not the static one dist/grapes.min.js

[artf]

Be sure to use the JS from the devServer (http://localhost:8080/grapes.min.js), not the physical one (http://localhost:8080/dist/grapes.min.js)

[ronaldohoch]

Bullseye!!

Thank you @artf.

One last thing, for a bug happening in the mjml plugin when we move a component, where would you recommend we start looking for it?

[artf]

I'm not sure, but as I see no issues with the core I guess it might be something related to the render of mjml components. When you move a component, the one is removed from the previous collection and added to the next one (which might also be the same collection). The UI logic for removing and adding components is handled in src/dom_components/view/ComponentsView.js so I'd probably start from there.

[ronaldohoch]

Thank you a lot!

[gustavohleal]

@artf thanks for the helping. I tracked the bug starting from where you mentioned. The problem seems to be that when the cloned/added component is being added into the collection of the parent, his parentEl is pointing to a component that does not exist. Like it's creating a new parent just for him but not rendering it. Then when it test if the component has a lasIndex or if the parentEl has children he append to this fake parentEl and the component disappears from the canvas. I created an issue in the grapesjs-mjml repository with a video. Could you please take a look at?
GrapesJS/mjml#286