BUG: A border on the mj-column is shown twice in the editor

[adiux]

What browser are you using?

Chrome 102.0.5005.61

Reproducible demo link

https://codepen.io/adiux/pen/BaYrEXR?editors=1111

Describe the bug

How to reproduce the bug?

1. Add grapesjs-mjml to the project with any version newer than 0.5.6
2. Add a border to a section. E.g.: <mj-column border="4px solid #F45E43">
3. Open MJML template with grapesjs

What is the expected behavior?
only one border is shown:

What is the current behavior?
two borders are shown:

If is necessary to execute some code in order to reproduce the bug, paste it here below:

// Working
import grapesjsMjml from "https://cdn.skypack.dev/grapesjs-mjml@0.5.6";

// Not working
import grapesjsMjml from "https://cdn.skypack.dev/grapesjs-mjml@0.5.7";
import grapesjsMjml from "https://cdn.skypack.dev/grapesjs-mjml@0.6.0";

Note: The rendered HTML is fine. It is only an issue with the view in the editor.

[DRoet]

PRs are welcome to fix this, I currently don't have time to look into this myself

[ronaldohoch]

@DRoet does you have any idea to where to start looking for this issue?

[DRoet]

probably related to the changes in #270 which was released in v0.5.7

[adiux]

Thanks for looking into this. For me it was not working with v0.6.0:

import grapesjsMjml from "https://cdn.skypack.dev/grapesjs-mjml@0.6.0";

[gustavohleal]

I thought i have found a solution, but it cause bugs to other attributes.

[gustavohleal]

Even before #270 the border was added to the table inside the div. With the solution of adding the styles to the div the border is being added to both of them. This is whats causing this bug. I'm not finding where this is passed to the inner element. But when you change the padding of the column the element is rendered again and the problem is fixed. Something in the builtin property of border is causing this. Border-radius is also passed to the table and not rendered.