Merge pull request #1708 from bolt/fix/dont-let-vue-parse-twig-in-con…

…tent

Don't let Vue parse Twig tags when editing content

src/Controller/Backend/ContentEditController.php

@@ -144,6 +144,7 @@ public function save(?Content $content = null): Response
         $event = new ContentEvent($content);
         $this->dispatcher->dispatch($event, ContentEvent::PRE_SAVE);
 
+        /* Note: Doctrine also calls preUpdate() -> Event/Listener/FieldFillListener.php */
         $this->em->persist($content);
         $this->em->flush();
 

src/Event/Listener/FieldFillListener.php

@@ -58,9 +58,11 @@ private function clean($value): array
 
         foreach ($value as $key => $v) {
             if ($v instanceof Markup) {
+                $v = $this->trimZeroWidthWhitespace((string) $v);
                 // todo: Figure out how to preserve original encoding
-                $v = new Markup($this->sanitiser->clean((string) $v), 'UTF-8');
+                $v = new Markup($this->sanitiser->clean($v), 'UTF-8');
             } elseif (is_string($v)) {
+                $v = $this->trimZeroWidthWhitespace($v);
                 $v = $this->sanitiser->clean($v);
             }
 
@@ -70,6 +72,14 @@ private function clean($value): array
         return $result;
     }
 
+    /**
+     * Remove the 'zero width space' from `{{` and `}}`, added in the editor.
+     */
+    public function trimZeroWidthWhitespace(string $string): string
+    {
+        return preg_replace('/([{}])[\x{200B}-\x{200D}\x{FEFF}]([{}])/u', '$1$2', $string);
+    }
+
     public function postLoad(LifecycleEventArgs $args): void
     {
         $entity = $args->getEntity();

templates/_partials/fields/_base.html.twig

@@ -73,6 +73,11 @@
     {% if value is iterable and field|type != "select" and field|type != "collection" %}
         {% set value = value|first %}
     {% endif %}
+
+    {# We're adding zero width spaces in `{{` and `}}`, to ensure Vue doesn't get its grubby paws on it. #}
+    {% if value is string %}
+        {% set value = value|replace({'{{': '{​{', '}}': '}​}'}) %}
+    {% endif %}
 {% endif %}
 
 {# Set the class #}