Add new block to block manager: predefined content and editor content is different

I try to use template engine with grapesjs. Add new block by this:

bm.add('promotion-lines', {
    label: 'Promotion Lines',
    category: c.labelCategory,
    attributes: {class: 'fa fa-list-ol'},
    content: `<ul>
  <table style="box-sizing: border-box; height: 150px; margin: 0 auto 0 auto; padding: 0 0 0 0; width: 100%;">
    <tbody style="box-sizing: border-box;"><tr style="box-sizing: border-box;">
     {% for order_line in order.order_lines %}
     <td style="box-sizing: border-box; padding: 0; margin: 0; vertical-align: top;" valign="top"/>
      {% endfor %}
    </tr>
    </tbody>
  </table>
</ul>`,
  });

Drag new block to editor then the content of editor is different from above: (the {% for order_line in order.order_lines %} is moved up)

<ul style="box-sizing: border-box;">
  {% for order_line in order.order_lines %}
  <table id="imf58" style="box-sizing: border-box; height: 150px; margin: 0 auto 0 auto; padding: 0 0 0 0; width: 100%;" width="100%" height="150">
    <tbody id="isbik" style="box-sizing: border-box;">
      <tr id="ikbcn" style="box-sizing: border-box;">
        <td valign="top" id="ipg0l" style="box-sizing: border-box; padding: 0; margin: 0; vertical-align: top;">
          {% endfor %}
        </td>
      </tr>
    </tbody>
  </table>
</ul>

How can i prevent this? Thanks.