search

GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
Other
22.63k stars 4.09k forks source link

[Bug] Cannot read property '_cash(some random numbers)' of undefined on newsletter demo. #1589

Closed SeongwoonHong closed 5 years ago

SeongwoonHong commented 5 years ago

I'm having some issue when I load some templates and modify. and it looks like grapesjs newsletter demo is also having this issue. I have couple of templates and if i copy and paste into newsletter demo and try to modify it from there, it gives me this error message 'Cannot read property '_cash(some random numbers)' of undefined.'

In order to reproduce this error, please follow the steps above.

  1. go to newsletter demo page
  2. copy the html and css code that I've attached below and paste it using import template button on top.
  3. try to modify the contents
  4. Error is on console now and the built-in rich text editor doesn't work

*html and css (I used newsletter demo to create this template before)

<div class="c5187 c10425 c11631 c12771 c13911 c15432 c16693 c17833 c7695 c9753 c11628 c15128 c17303 c19266 c20351 c22245 c2665 c7743">
  <span id="ij0cfd" class="c2121"><span id="iqbvdp" class="c2129"></span></span>
</div>
<table width="700" height="150" class="c7027 c10461 c11667 c12807 c13947 c15468 c16729 c17869 c7739 c9789 c11655 c15155 c17330 c19293 c20378 c22272 c2708 c7789">
  <tbody id="ideaol" class="c2182">
    <tr id="ist1v5" class="c2190">
      <td id="i7qa4q" valign="top" class="c11679 c15179 c20402">
        <table width="100%" height="80" id="imwflb" class="c4761 c2206">
          <tbody id="isc0lf" class="c2215">
            <tr id="il42si" class="c2223">
              <td id="izl6jn" width="30%" valign="top" class="c2231">
              </td>
              <td id="inrsdi" width="70%" valign="top" class="c2260">
                <div id="i05wh9" class="c2268">
                  <span id="iva93s" class="c2276"><span id="if0jvl" class="c2284"><span id="iaxop7" class="c2292"><strong id="ia84v9" class="c2300">Titre</strong><br id="i0tyq2" class="c2309"/></span></span></span>
                  <br id="ik512w" class="c2357"/>
                  <br id="ilqx68" class="c2393"/>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <img src="https://preview.ibb.co/hm6dbV/banner1.jpg" width="681" height="315" id="ic72ql" class="c3935"/>
        <div id="iswiij" class="c3990">
          <p id="i946vc">
            <b id="ixn3rc">Travaux printaniers - Le temps doux s’installe tranquillement sur le Québec. Quel bonheur!
            </b>
            <br id="iu334c"/>
            <br id="iusawx"/>
            <span id="ibhejz"><span id="imtnhl">Le moment est donc venu pour les propriétaires d’entreprendre quelques travaux d’entretien pour que leur maison soit resplendissante. Voici quelques trucs printaniers de la part de l’équipe de Multi-Prêts.</span></span>
            <span id="ij0hw9"><span id="ik183q"></span></span>
          </p>
        </div>
        <table width="100%" height="150" id="iqpg3p" class="c4524">
          <tbody id="ig3mw3">
            <tr id="io7i04">
              <td id="i1qt65" width="50%" valign="top" bgcolor="#ffffff" class="c2528">
                <img src="https://preview.ibb.co/bwctdL/banner2.jpg" width="335" height="172" id="iz7mg6" class="c4030"/>
                <div id="impb96" class="c4706">
                  <span id="i1r8hr"><span id="inbl0f"><span id="is2595">À L’EXTÉRIEUR</span></span></span>
                </div>
              </td>
              <td id="ikfmhs" width="50%" valign="top" bgcolor="#ffffff" class="c2537">
                <img src="https://preview.ibb.co/hCYrXf/banner3.jpg" width="331" height="173" id="iqbq41" class="c3604"/>
                <div id="iwlkz4" class="c5150">
                  <span id="i85r5l"><span id="i7llvk"><span id="i1asi9">À L’INTÉRIEUR</span></span></span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <table width="100%" height="150" id="ieqg7l" class="c4524">
          <tbody id="ii3mtv">
            <tr id="iayw1f">
              <td width="50%" valign="top" bgcolor="#ffffff" id="iztig2" class="c2528">
                <div id="i7el2h" class="c4402">
                  <p id="iy44dd">
                    <span id="iwncna"><span id="in64v8">1. Débarrassez-vous des arbustes pourris.</span></span>
                  </p>
                  <p id="iq0zmi">
                    <span id="iw728j"><span id="i7qxxp">2. Enlevez les branches endommagées des arbres et des arbustes.</span></span>
                  </p>
                  <p id="ilzawb">
                    <span id="i6uq3p"><span id="ifxaz6">3. Attendez que la surface du sol soit bien asséchée avant de déchaumer et d’épandre du compost. Aux endroits où la pelouse est morte, semez rapidement pour éviter que s’installent les herbes indésirables.</span></span>
                  </p>
                  <p id="irqpc1">
                    <span id="iw8ikf"><span id="i75089">4. Aiguisez vos ciseaux et gonflez le pneu de la brouette.</span></span>
                  </p>
                </div>
              </td>
              <td width="50%" valign="top" bgcolor="#ffffff" id="iq7egt" class="c2537">
                <div id="i5u5xq" class="c8488">
                  <p id="im4xev">
                    <span id="iz87ct"><span id="icep3g">1. Dès que le temps le permet, ouvrez les fenêtres, sortez les pinceaux et commencez à peinturer à l'intérieur.</span></span>
                  </p>
                  <p id="iyj6aj">
                    <span id="i5zw3n"><span id="ie6oum">2. Balayez derrière et sous la sécheuse, puis nettoyez la trappe et l'évent.</span></span>
                  </p>
                  <p id="ip5owg">
                    <span id="id57j6"><span id="iqvzw5">3. Faites de la place pour stocker l'équipement et les vêtements d'hiver en profitant des espaces dans les greniers, les vides sanitaires, les placards et le garage.</span></span>
                  </p>
                  <p id="idpy0f">
                    <span id="iekskx"><span id="i42sdm">4. Nettoyez votre cafetière avec du vinaigre ou une solution de décalaminage vendu dans les quincailleries.</span></span>
                  </p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<table class="table c10981 c12216 c13356 c14496 c16017 c17278 c18418 c8305 c10374 c12240 c15630 c17857 c19847 c20923 c22781 c3197 c8506">
  <tbody id="il66cj" class="c2625">
    <tr id="imi5va" class="c2633">
    </tr>
  </tbody>
</table>
<style>* {
  box-sizing: border-box;
  }
  body {
    margin: 0;
  }
  #wrapper{
    max-width:700px;
    margin-top:0px;
    margin-right:auto;
    margin-bottom:0px;
    margin-left:auto;
    padding-top:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-left:10px;
  }
  p{
    margin-block-start:0px;
    margin-block-end:0px;
  }
  .email-signature-top > div{
    font-weight:bold;
    opacity:9;
  }
  .email-signature-center .image{
    width:100px;
    height:100px;
    display:inline-block;
    vertical-align:top;
  }
  .email-signature-center .profile{
    display:inline-block;
    margin-left:15px;
  }
  .email-signature-center .image img{
    width:100%;
    height:100%;
    border-top-left-radius:50%;
    border-top-right-radius:50%;
    border-bottom-right-radius:50%;
    border-bottom-left-radius:50%;
  }
  .profile .name{
    font-weight:bold;
    color:rgb(255, 255, 255);
  }
  .profile .title{
    color:rgb(255, 255, 255);
    margin-bottom:10px;
  }
  .social-media .icon{
    margin-right:25px;
    width:25px;
    height:25px;
  }
  .email-signature-top p, .email-signature-center p{
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-left:0px;
    font-size:unset;
  }
  *{
    box-sizing:border-box;
  }
  body{
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-left:0px;
  }
  #ij0cfd{
    box-sizing:border-box;
    color:rgb(153, 153, 153);
  }
  #iqbvdp{
    box-sizing:border-box;
    font-size:12px;
  }
  #ideaol{
    box-sizing:border-box;
  }
  #ist1v5{
    box-sizing:border-box;
  }
  #i7qa4q{
    box-sizing:border-box;
    font-size:18px;
    font-weight:300;
    vertical-align:top;
    color:rgb(74, 74, 74);
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-left:0px;
    padding-top:0px;
    padding-right:15px;
    padding-bottom:0px;
    padding-left:15px;
  }
  #imwflb{
    box-sizing:border-box;
    height:80px;
    margin-top:0px;
    margin-right:auto;
    margin-bottom:5px;
    margin-left:auto;
    padding-top:0px;
    padding-right:0px;
    padding-bottom:0px;
    padding-left:0px;
    width:100%;
  }
  #isc0lf{
    box-sizing:border-box;
  }
  #il42si{
    box-sizing:border-box;
    color:rgb(0, 113, 102);
  }
  #izl6jn{
    box-sizing:border-box;
    font-size:12px;
    font-weight:300;
    vertical-align:top;
    color:rgb(111, 119, 125);
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-left:0px;
    padding-top:0px;
    padding-right:0px;
    padding-bottom:0px;
    padding-left:0px;
    width:30%;
  }
  #irpt46{
    box-sizing:border-box;
    color:black;
    width:194px;
    height:78px;
  }
  #inrsdi{
    box-sizing:border-box;
    font-size:12px;
    font-weight:300;
    vertical-align:top;
    color:rgb(111, 119, 125);
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-left:0px;
    padding-top:0px;
    padding-right:0px;
    padding-bottom:0px;
    padding-left:0px;
    width:70%;
  }
  #i05wh9{
    box-sizing:border-box;
    color:rgb(0, 113, 102);
    padding-top:7px;
    padding-right:10px;
    padding-bottom:10px;
    padding-left:10px;
  }
  #iva93s{
    box-sizing:border-box;
    font-size:20px;
  }
  #if0jvl{
    box-sizing:border-box;
    color:rgb(44, 62, 80);
  }
  #iaxop7{
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
  }
  #ia84v9{
    box-sizing:border-box;
    color:rgb(0, 113, 102);
  }
  #i0tyq2{
    box-sizing:border-box;
  }
  #ik512w{
    box-sizing:border-box;
  }
  #ik6imf{
    box-sizing:border-box;
    font-size:14px;
  }
  #ibgeqo{
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
    color:rgb(0, 113, 102);
  }
  #ilqx68{
    box-sizing:border-box;
  }
  #ic72ql{
    box-sizing:border-box;
    color:black;
    width:681px;
    height:315px;
  }
  #iswiij{
    box-sizing:border-box;
    padding-top:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-left:30px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:25px;
    background-color:rgb(255, 255, 255);
    border-top-width:0px;
    border-right-width:0px;
    border-bottom-width:0px;
    border-left-width:0px;
    border-top-style:solid;
    border-right-style:solid;
    border-bottom-style:solid;
    border-left-style:solid;
    border-top-color:rgb(255, 255, 255);
    border-right-color:rgb(255, 255, 255);
    border-bottom-color:rgb(255, 255, 255);
    border-left-color:rgb(255, 255, 255);
    border-image-source:initial;
    border-image-slice:initial;
    border-image-width:initial;
    border-image-outset:initial;
    border-image-repeat:initial;
    border-top-left-radius:0px;
    border-top-right-radius:0px;
    border-bottom-right-radius:0px;
    border-bottom-left-radius:0px;
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-left:0px;
    text-align:center;
    color:rgb(0, 169, 24);
  }
  #i946vc{
    box-sizing:border-box;
  }
  #ixn3rc{
    box-sizing:border-box;
  }
  #iu334c{
    box-sizing:border-box;
  }
  #iusawx{
    box-sizing:border-box;
  }
  #ibhejz{
    box-sizing:border-box;
    color:rgb(127, 140, 141);
  }
  #imtnhl{
    box-sizing:border-box;
    font-size:18px;
  }
  #ij0hw9{
    box-sizing:border-box;
    color:rgb(127, 140, 141);
  }
  #ik183q{
    box-sizing:border-box;
    font-size:18px;
  }
  #iqpg3p{
    box-sizing:border-box;
    height:150px;
    margin-top:0px;
    margin-right:auto;
    margin-bottom:10px;
    margin-left:auto;
    padding-top:5px;
    padding-right:5px;
    padding-bottom:5px;
    padding-left:5px;
    width:100%;
  }
  #ig3mw3{
    box-sizing:border-box;
  }
  #io7i04{
    box-sizing:border-box;
  }
  #i1qt65{
    box-sizing:border-box;
    font-size:12px;
    font-weight:300;
    vertical-align:top;
    color:rgb(111, 119, 125);
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-left:0px;
    padding-top:0px;
    padding-right:0px;
    padding-bottom:0px;
    padding-left:0px;
    width:50%;
    background-color:rgb(255, 255, 255);
  }
  #iz7mg6{
    box-sizing:border-box;
    color:black;
    width:335px;
    height:172px;
  }
  #impb96{
    box-sizing:border-box;
    padding-top:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-left:10px;
    background-color:rgb(132, 188, 52);
    border-collapse:separate;
    border-top-left-radius:2px;
    border-top-right-radius:0px;
    border-bottom-right-radius:0px;
    border-bottom-left-radius:0px;
    text-align:center;
  }
  #i1r8hr{
    box-sizing:border-box;
    color:rgb(255, 255, 255);
  }
  #inbl0f{
    box-sizing:border-box;
    font-size:20px;
  }
  #is2595{
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
  }
  #ikfmhs{
    box-sizing:border-box;
    font-size:12px;
    font-weight:300;
    vertical-align:top;
    color:rgb(111, 119, 125);
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-left:0px;
    padding-top:0px;
    padding-right:0px;
    padding-bottom:0px;
    padding-left:0px;
    width:50%;
    background-color:rgb(255, 255, 255);
  }
  #iqbq41{
    box-sizing:border-box;
    color:black;
    width:331px;
    height:173px;
  }
  #iwlkz4{
    box-sizing:border-box;
    padding-top:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-left:10px;
    background-color:rgb(52, 85, 117);
    text-align:center;
  }
  #i85r5l{
    box-sizing:border-box;
    color:rgb(255, 255, 255);
  }
  #i7llvk{
    box-sizing:border-box;
    font-size:20px;
  }
  #i1asi9{
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
  }
  #ieqg7l{
    box-sizing:border-box;
    height:150px;
    margin-top:0px;
    margin-right:auto;
    margin-bottom:10px;
    margin-left:auto;
    padding-top:5px;
    padding-right:5px;
    padding-bottom:5px;
    padding-left:5px;
    width:100%;
  }
  #ii3mtv{
    box-sizing:border-box;
  }
  #iayw1f{
    box-sizing:border-box;
  }
  #iztig2{
    box-sizing:border-box;
    font-size:12px;
    font-weight:300;
    vertical-align:top;
    color:rgb(111, 119, 125);
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-left:0px;
    padding-top:0px;
    padding-right:0px;
    padding-bottom:0px;
    padding-left:0px;
    width:50%;
    background-color:rgb(255, 255, 255);
  }
  #i7el2h{
    box-sizing:border-box;
    padding-top:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-left:10px;
    background-color:rgb(255, 255, 255);
  }
  #iy44dd{
    box-sizing:border-box;
  }
  #iwncna{
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
  }
  #in64v8{
    box-sizing:border-box;
    font-size:14px;
  }
  #iq0zmi{
    box-sizing:border-box;
  }
  #iw728j{
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
  }
  #i7qxxp{
    box-sizing:border-box;
    font-size:14px;
  }
  #ilzawb{
    box-sizing:border-box;
  }
  #i6uq3p{
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
  }
  #ifxaz6{
    box-sizing:border-box;
    font-size:14px;
  }
  #irqpc1{
    box-sizing:border-box;
  }
  #iw8ikf{
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
  }
  #i75089{
    box-sizing:border-box;
    font-size:14px;
  }
  #iq7egt{
    box-sizing:border-box;
    font-size:12px;
    font-weight:300;
    vertical-align:top;
    color:rgb(111, 119, 125);
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-left:0px;
    padding-top:0px;
    padding-right:0px;
    padding-bottom:0px;
    padding-left:0px;
    width:50%;
    background-color:rgb(255, 255, 255);
  }
  #i5u5xq{
    box-sizing:border-box;
    padding-top:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-left:10px;
  }
  #im4xev{
    box-sizing:border-box;
  }
  #iz87ct{
    box-sizing:border-box;
    font-size:14px;
  }
  #icep3g{
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
  }
  #iyj6aj{
    box-sizing:border-box;
  }
  #i5zw3n{
    box-sizing:border-box;
    font-size:14px;
  }
  #ie6oum{
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
  }
  #ip5owg{
    box-sizing:border-box;
  }
  #id57j6{
    box-sizing:border-box;
    font-size:14px;
  }
  #iqvzw5{
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
  }
  #idpy0f{
    box-sizing:border-box;
  }
  #iekskx{
    box-sizing:border-box;
    font-size:14px;
  }
  #i42sdm{
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
  }
  #il66cj{
    box-sizing:border-box;
  }
  #imi5va{
    box-sizing:border-box;
  }
  .email-signaure-top img{
    width:100%;
    height:100%;
    border-top-left-radius:50%;
    border-top-right-radius:50%;
    border-bottom-right-radius:50%;
    border-bottom-left-radius:50%;
  }
  .email-signaure-top .name{
    font-weight:bold;
  }
  .email-signaure-top .email{
    margin-top:10px;
  }
  .c7743{
    box-sizing:border-box;
    padding-top:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-left:10px;
    text-decoration-line:underline;
    text-decoration-style:initial;
    text-decoration-color:initial;
    text-align:right;
  }
  .c7789{
    box-sizing:border-box;
    height:150px;
    margin-top:0px;
    margin-right:auto;
    margin-bottom:10px;
    margin-left:auto;
    padding-top:0px;
    padding-right:0px;
    padding-bottom:0px;
    padding-left:0px;
    width:700px;
    color:rgb(255, 255, 255);
  }
  .c8506{
    box-sizing:border-box;
  }
</style>
artf commented 5 years ago

The export of the demo is not intended to be importable... In your case, #wrapper{ style rule breaks stuff, the RTE it doesn't work due to the optimized export code

lock[bot] commented 4 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.