From 39fc2f3f2b513f16e0fe85b434b352907dd49b66 Mon Sep 17 00:00:00 2001
From: Aaron <aarongerig@users.noreply.github.com>
Date: Mon, 6 Jan 2025 16:54:40 +0100
Subject: [PATCH] [Data Attributes Generator] Output as raw HTML (#237)

* fix: output data attributes as raw HTML
* remove raw filter
---
 src/Twig/Extension/DataAttributesExtension.php            | 5 +++--
 templates/toolbox/bootstrap4/video/type_asset.html.twig   | 2 +-
 templates/toolbox/bootstrap4/video/type_vimeo.html.twig   | 4 ++--
 templates/toolbox/bootstrap4/video/type_youtube.html.twig | 4 ++--
 templates/toolbox/uikit3/video/type_vimeo.html.twig       | 4 ++--
 templates/toolbox/uikit3/video/type_youtube.html.twig     | 4 ++--
 6 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/Twig/Extension/DataAttributesExtension.php b/src/Twig/Extension/DataAttributesExtension.php
index f6f4d0a6..23fd5bde 100644
--- a/src/Twig/Extension/DataAttributesExtension.php
+++ b/src/Twig/Extension/DataAttributesExtension.php
@@ -15,8 +15,9 @@ public function __construct(protected DataAttributeService $dataAttributeService
     public function getFunctions(): array
     {
         return [
-            new TwigFunction('toolbox_data_attributes_generator', [$this->dataAttributeService, 'generateDataAttributes']),
+            new TwigFunction('toolbox_data_attributes_generator', [$this->dataAttributeService, 'generateDataAttributes'], [
+                'is_safe' => ['html'],
+            ]),
         ];
     }
-
 }
diff --git a/templates/toolbox/bootstrap4/video/type_asset.html.twig b/templates/toolbox/bootstrap4/video/type_asset.html.twig
index 4b31a830..09ec2f76 100644
--- a/templates/toolbox/bootstrap4/video/type_asset.html.twig
+++ b/templates/toolbox/bootstrap4/video/type_asset.html.twig
@@ -1,4 +1,4 @@
-<div class="player" {{ toolbox_data_attributes_generator('video_parameter', {'video_parameter' : videoParameter}, true)|raw }} data-poster-path="{{ posterPath }}" data-play-in-lightbox="{{ playInLightbox }}" data-video-uri="{{ videoId }}">
+<div class="player" {{ toolbox_data_attributes_generator('video_parameter', {'video_parameter' : videoParameter}, true) }} data-poster-path="{{ posterPath }}" data-play-in-lightbox="{{ playInLightbox }}" data-video-uri="{{ videoId }}">
 {{ pimcore_vhs('video', {
     'attributes': {
         'class': 'video-js vjs-default-skin vjs-big-play-centered',
diff --git a/templates/toolbox/bootstrap4/video/type_vimeo.html.twig b/templates/toolbox/bootstrap4/video/type_vimeo.html.twig
index d63da520..89d9f0b2 100644
--- a/templates/toolbox/bootstrap4/video/type_vimeo.html.twig
+++ b/templates/toolbox/bootstrap4/video/type_vimeo.html.twig
@@ -1,4 +1,4 @@
-<div class="player" {{ toolbox_data_attributes_generator('video_parameter', {'video_parameter' : videoParameter}, true)|raw }} data-poster-path="{{ posterPath }}" data-play-in-lightbox="{{ playInLightbox }}" data-video-uri="{{ videoId }}"></div>
+<div class="player" {{ toolbox_data_attributes_generator('video_parameter', {'video_parameter' : videoParameter}, true) }} data-poster-path="{{ posterPath }}" data-play-in-lightbox="{{ playInLightbox }}" data-video-uri="{{ videoId }}"></div>
 {% if posterPath is not empty %}
     {% include toolbox_area_path(areaId, areaTemplateDirectory, '/partial/overlay') with {'posterPath' : posterPath, 'playInLightbox' : playInLightbox} %}
-{% endif %}
\ No newline at end of file
+{% endif %}
diff --git a/templates/toolbox/bootstrap4/video/type_youtube.html.twig b/templates/toolbox/bootstrap4/video/type_youtube.html.twig
index 3e8d1760..84b9bd84 100644
--- a/templates/toolbox/bootstrap4/video/type_youtube.html.twig
+++ b/templates/toolbox/bootstrap4/video/type_youtube.html.twig
@@ -1,5 +1,5 @@
-<div class="player" {{ toolbox_data_attributes_generator('video_parameter', {'video_parameter' : videoParameter}, true)|raw }} data-poster-path="{{ posterPath }}" data-play-in-lightbox="{{ playInLightbox }}" data-video-uri="{{ videoId }}"></div>
+<div class="player" {{ toolbox_data_attributes_generator('video_parameter', {'video_parameter' : videoParameter}, true) }} data-poster-path="{{ posterPath }}" data-play-in-lightbox="{{ playInLightbox }}" data-video-uri="{{ videoId }}"></div>
 
 {% if posterPath is not empty %}
     {% include toolbox_area_path(areaId, areaTemplateDirectory, '/partial/overlay') with {'posterPath' : posterPath, 'playInLightbox' : playInLightbox} %}
-{% endif %}
\ No newline at end of file
+{% endif %}
diff --git a/templates/toolbox/uikit3/video/type_vimeo.html.twig b/templates/toolbox/uikit3/video/type_vimeo.html.twig
index f885035f..013055ab 100644
--- a/templates/toolbox/uikit3/video/type_vimeo.html.twig
+++ b/templates/toolbox/uikit3/video/type_vimeo.html.twig
@@ -9,6 +9,6 @@
             {% if autoPlay %}playsinline allow="autoplay;"{% endif %}
             data-uk-video="autoplay: true"
             width="1920" height="1080" data-uk-responsive
-            {{ toolbox_data_attributes_generator('video_parameter', {'video_parameter' : videoParameter}, true)|raw }}>
+            {{ toolbox_data_attributes_generator('video_parameter', {'video_parameter' : videoParameter}, true) }}>
     </iframe>
-{% endif %}
\ No newline at end of file
+{% endif %}
diff --git a/templates/toolbox/uikit3/video/type_youtube.html.twig b/templates/toolbox/uikit3/video/type_youtube.html.twig
index 0a791824..59b8393b 100644
--- a/templates/toolbox/uikit3/video/type_youtube.html.twig
+++ b/templates/toolbox/uikit3/video/type_youtube.html.twig
@@ -9,6 +9,6 @@
             {% if autoPlay %}playsinline {% endif %}
             data-uk-video="autoplay: true"
             width="1920" height="1080" data-uk-responsive
-            {{ toolbox_data_attributes_generator('video_parameter', {'video_parameter' : videoParameter}, true)|raw }}>
+            {{ toolbox_data_attributes_generator('video_parameter', {'video_parameter' : videoParameter}, true) }}>
     </iframe>
-{% endif %}
\ No newline at end of file
+{% endif %}