search

GrapesJS / mjml

Newsletter Builder with MJML components in GrapesJS
http://grapesjs.com/demo-mjml.html
BSD 3-Clause "New" or "Revised" License
624 stars 222 forks source link

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

Closed adiux closed 1 year ago

adiux commented 2 years ago

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:

image

What is the current behavior? two borders are shown:

image

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 commented 2 years ago

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

ronaldohoch commented 2 years ago

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

DRoet commented 2 years ago

probably related to the changes in https://github.com/artf/grapesjs-mjml/pull/270 which was released in v0.5.7

adiux commented 2 years ago

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 commented 2 years ago

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

gustavohleal commented 2 years ago

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.