I have a problem regarding the WYSIWYG editor in `Zed > Content > Block > Edit Placeholder`

U03D9KKPK2T

I have a problem regarding the WYSIWYG editor in Zed > Content > Block > Edit Placeholder Pages.
It changes my twig loops on save or if I change back to normal view after editing the code in code view.

Is there a place in the code where I can look into its reformatting behaviour or disable it altogether?
I'll put a code example in the thread.

U03D9KKPK2T

Just to demonstrate what's happening:

{% for shipmentGroup in mail.shipmentGroups %}
  <p>lot of</p><span>valid html</span>
  {% for item in shipmentGroup.items %}
    <more> valid </html>
  {% endif %}
{% endif %}

That is transformed into this:

{% for shipmentGroup in mail.shipmentGroups %}
  {% for item in shipmentGroup.items %}
  {% endif %}
  <p>lot of</p><span>valid html</span>
  <more> valid </html>
{% endif %}

I checked the html for validity using html linting tools after removing twig tags.

U03D9KKPK2T

This is the complete file if anyone's wondering.

<table class="sprykerBoxedTextBlock"  width="100%" cellspacing="0" cellpadding="0" border="0">
    <!--[if gte mso 9]>
    <table align="center" border="0" cellspacing="0" cellpadding="0" width="100%">   <![endif]-->
    <tbody class="sprykerBoxedTextBlockOuter">
    <tr>
        <td class="sprykerBoxedTextBlockInner" valign="top" >
            <!--[if gte mso 9]> <td align="center" valign="top" "> <![endif]-->
            <table  class="sprykerBoxedTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left">
                <tbody>
                <tr>
                    <td >
                        <table class="sprykerTextContentContainer"  width="100%" cellspacing="0" border="0">
                            <tbody>
                            <tr>
                                <td class="sprykerTextContent"  valign="top">
                                    <h1 ></h1>
                                    <h1 >
                                        <br />
                                        <span >
                              <strong>{{ 'mail.trans.order_confirmation.title' | trans }}</strong>
                          </span>
                                    </h1>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--[if gte mso 9]>         </td>         <![endif]-->
            <!--[if gte mso 9]>         </tr>         </table>         <![endif]-->
        </td>
    </tr>
    <tr>
        <td class="sprykerBoxedTextBlockInner" valign="top" >
            <!--[if gte mso 9]> <td align="center" valign="top" "> <![endif]-->
            <table  class="sprykerBoxedTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left">
                <tbody>
                <tr>
                    <td >
                        <table class="sprykerTextContentContainer"  width="100%" cellspacing="0" border="0">
                            <tbody>
                            <tr>
                                <td class="sprykerTextContent"  valign="top">
                                    <p >
                                        {{ 'mail.trans.common.hello_for_first_name' | trans }} {{ mail.order.customer.firstName }},
                                    </p>
                                    <p >
                                        {{ 'mail.trans.order_confirmation.subtitle' | trans }}
                                    </p>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--[if gte mso 9]>         </td>         <![endif]-->
            <!--[if gte mso 9]>         </tr>         </table>         <![endif]-->
        </td>
    </tr>
    </tbody>
</table>
<table class="sprykerTextBlock"  width="100%" cellspacing="0" cellpadding="0" border="0">
    <tbody class="sprykerTextBlockOuter">
    <tr>
        <td class="sprykerTextBlockInner"  valign="top">
            <!--[if mso]>
            <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" >
                <tr>         <![endif]-->
            <!--[if mso]>
            <td valign="top" width="600" >         <![endif]-->
            {% for shipmentGroup in mail.shipmentGroups %}
            <table  class="sprykerTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left">
                <tbody>
                <tr>
                    <td class="sprykerTextContent"  valign="top">
                        <div ><span ></span></div>
                    </td>
                </tr>
                <tr>
                    <td >
                        <table class="sprykerTextContentContainer"  width="100%" cellspacing="0" border="0">
                            <tbody>
                            <tr>
                                <td class="sprykerTextContent"  valign="top">
                                    <p>{{ 'mail.trans.order.order_reference' | trans }}: {{ mail.order.orderReference }}</p>
                                    <p>{{ 'mail.trans.order.order_date' | trans }}: {{ mail.order.createdAt | date }}</p>
                                    <p>
                                        {{ 'mail.trans.order.billing_address' | trans }}: {{ mail.order.billingAddress.address1 }} {{ mail.order.billingAddress.address2 }} {{
                                        mail.order.billingAddress.address3 }} {{ mail.order.billingAddress.zipCode }} {{ mail.order.billingAddress.city }} {{ mail.order.billingAddress.region }}
                                    </p>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td >
                        <table class="sprykerTextContentContainer"  width="100%" cellspacing="0" border="0">
                            <tbody>
                            <tr>
                                <td class="sprykerTextContent"  valign="top">
                                    <p>{{ 'mail.trans.order.subtotal' | trans }}</p>
                                    <p>{{ 'mail.trans.order.shipment_costs_total' | trans }}</p>
                                    {% for shipmentGroup in mail.shipmentGroups %}
                                    <p >{{ shipment_method(shipmentGroup.shipment.method) }}</p>
                                    {% endfor %}
                                    <p>{{ 'mail.trans.order.discounts_total' | trans }}</p>
                                    {% for discount in mail.order.calculatedDiscounts %}
                                    <p >{{ discount.displayName }}</p>
                                    {% endfor %}
                                    <p>{{ 'mail.trans.order.taxes' | trans }}</p>
                                    <p ><strong>{{ 'mail.trans.order.grand_total' | trans }}</strong></p>
                                </td>
                                <td class="sprykerTextContent"  valign="top">
                                    <p ><strong>{{ mail.order.totals.subtotal | default(0) | money }}</strong></p>
                                    <p ><strong>{{ mail.order.totals.expenseTotal | default(0) | money }}</strong></p>
                                    {% for shipment in mail.order.expenses %}
                                    <p ><strong>{{ shipment.sumPriceToPayAggregation | default(0) | money }}</strong></p>
                                    {% endfor %}
                                    <p>‎‏‏‎ ‎</p>
                                    <!-- Invisible character to get the proper space -->
                                    {% for discount in mail.order.calculatedDiscounts %}
                                    <p ><strong>- {{ discount.sumAmount | default(0) | money }}</strong></p>
                                    {% endfor %}
                                    <p ><strong>{{ mail.order.totals.taxTotal.amount | default(0) | money }}</strong></p>
                                    <p ><strong>{{ mail.order.totals.grandTotal | default(0) | money }}</strong></p>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="sprykerTextContent"  valign="top">
                        <div >
                  <span >
                      {{ 'mail.trans.order.shipment_for_number.part1' | trans }} {{ loop.index }} {{ 'mail.trans.order.shipment_for_number.part2' | trans }} {{ mail.shipmentGroups.count() }}
                  </span>
                        </div>
                        <p >
                            {{ 'mail.trans.order.delivery_address' | trans }}: {{ shipmentGroup.shipment.shippingAddress.firstName }} {{ shipmentGroup.shipment.shippingAddress.lastName }},
                            {{ shipmentGroup.shipment.shippingAddress.address1 }} {{ shipmentGroup.shipment.shippingAddress.address2 }} {{ shipmentGroup.shipment.shippingAddress.address3 }}
                            {{ shipmentGroup.shipment.shippingAddress.zipCode }} {{ shipmentGroup.shipment.shippingAddress.city }} {{ shipmentGroup.shipment.shippingAddress.region }}
                        </p>
                        <p >{{ 'mail.trans.order.delivery_method' | trans }}: {{ shipment_method(shipmentGroup.shipment.method) }}</p>
                    </td>
                </tr>
                {% for item in shipmentGroup.items %}
                <tr>
                    <td >
                        <table class="sprykerTextContentContainer"  width="100%" cellspacing="0" border="0">
                            <tbody>
                            <tr>
                                <td class="sprykerTextContent"  valign="top">
                                    <p><strong>{{ item.name }} - {{ 'customer.order.item_sku' | trans }}: {{ item.sku }}</strong></p>
                                    <p >{{ 'mail.trans.order.quantity' | trans }}: {{ item.quantity }}</p>
                                </td>
                                <td class="sprykerTextContent"  valign="top">
                                    <p ><strong>{{ item.sumPrice | default(0) | money }}</strong></p>
                                </td>
                            </tr>
                            <tr>
                                <td class="sprykerTextContent" colspan="2"  valign="top">
                                    {% for option in item.productOptions %}
                                    <p >+ {{ option.groupName }}: {{ option.sumPrice | default(0) | money }}</p>
                                    {% endfor %}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
            {% endfor %}
            <!--[if mso]>         </td>         <![endif]-->
            <!--[if mso]>         </tr>         </table>
            <![endif]-->
        </td>
    </tr>
    </tbody>
</table>
<!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->
<!-- // END TEMPLATE -->

U03D9KKPK2T

For future reference:
The WYSIWYG editor uses proper JS methods to let the browser render the html before saving (.append() and .innerHTML )
So the browser fails at interpreting twig for loops and such and thus, rearranges the html.

All in all: Zed CMS Blocks are not really made for usage with twig.