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

Issue with copy function for mj-column component #272

Closed GoodPHP closed 1 year ago

GoodPHP commented 2 years ago

Describe the bug Hi, I have found the bug with mj-column when I tried to copy. It's worked very strange.

Video: https://drive.google.com/file/d/1c3llemU53TJKEifZvQWCZV6uiFcOkpq1/view?usp=sharing

To Reproduce Steps to reproduce the behavior:

  1. Create a file with this MJML code:
    <mjml><mj-section css-class="plr-9p" padding="0% 14% 5% 14%" background-color="#e7eee8" border="none rgb(0, 0, 0)">
        <mj-column border="none rgb(0, 0, 0)">
        <mj-text padding="28px 0 16px" font-family="Raleway, sans-serif" font-size="24px" color="#357344" line-height="29px" letter-spacing="1.3px" font-weight="700" border="none rgb(0, 0, 0)">
          TIPS AND TRICKS IN CASE OF EMERGENCY
        </mj-text>
        <mj-text padding="0 0 28px" font-family="Lato, sans-serif;" font-size="16px" line-height="19px" color="#8e8e8e">
         In this live webinar, you will learn to assess your pet's health and better evaluate changes. With the help of the vital signs respiration and circulation can be very well recognized whether it is a harmless complaint or an emergency. Emergency situations are shown and what to do in case of emergency.
        </mj-text>
        <mj-button css-class="btn" padding="0" align="left" background-color="#357344" color="#fff" font-size="16px" line-height="20px" letter-spacing=".5px" border-radius="0" inner-padding="9px 31px" href="http://link">
          BOOK WEBINAR HERE
        </mj-button>
        </mj-column>
      </mj-section>
      <!-- section --></mjml>
  2. Render it to HTML
  3. Then try to copy the Column component
  4. See error

MJML environment (please complete the following information):

gustavohleal commented 2 years ago

The same error happens with the nav-link component. Also when moving the column content from one to another and adding new nav-links to the navbar. Seens to be something with the rendering of child nodes and the calculation of the new child widths.

artf commented 1 year ago

This should be fixed in the latest release.