In some case, the twig code get misplaced

Problem/Motivation

In some case, the twig code get misplaced on ckeditor reload.
Our usecase was some twig in a table.
All the {% %} tags were moved before the table, breaking our display.

I found the exact same issue in this stackoverflow question:
https://stackoverflow.com/questions/20977910/editing-twig-templates-in-c...

Proposed resolution

Use the protectedSource attribute as suggested in https://stackoverflow.com/a/23695804

One possible workaround for me, was to add the Twig blocks to config.protectedSource:
CKEDITOR.config.protectedSource.push(/\{%\s.+\s%\}/g);
They will be ignored in the WYSIWYG editor, but will still be visible in the source code view.

Additionally you can install the plugin Show protected and there's still a visible hint.

I would like to emphasize that this solution can seem to break things as the twig code will not be visible anymore directly in ckeditor.
User must use the source button to edit there block.

Remaining tasks

Validate concept and test.

User interface changes

Protect twig tags from ckeditor.
Has the side effect of hiding them.