Frame Text element becomes Framed element with Rich Editor

monsieurbiz · Sep 6, 2024 · bcf8aff · bcf8aff
1 parent 074c2ad
commit bcf8aff
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 41 deletions.
diff --git a/...ype/UiElement/FramedTextUiElementType.php → ...rm/Type/UiElement/FramedUiElementType.php b/...ype/UiElement/FramedTextUiElementType.php → ...rm/Type/UiElement/FramedUiElementType.php
@@ -13,26 +13,25 @@
 
 use MonsieurBiz\SyliusRichEditorPlugin\Attribute\AsUiElement;
 use MonsieurBiz\SyliusRichEditorPlugin\Attribute\TemplatesUiElement;
-use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\WysiwygType;
-use MonsieurBiz\SyliusRichEditorPlugin\WysiwygEditor\EditorInterface;
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\RichEditorType;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
 use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\Validator\Constraints as Assert;
 
 #[AsUiElement(
-    code: 'monsieurbiz_ui_elements.framed_text_ui_element',
-    icon: 'font',
-    title: 'monsieurbiz_ui_elements.ui_element.framed_text_ui_element.title',
-    description: 'monsieurbiz_ui_elements.ui_element.framed_text_ui_element.description',
+    code: 'monsieurbiz_ui_elements.framed_ui_element',
+    icon: 'list alternate outline',
+    title: 'monsieurbiz_ui_elements.ui_element.framed_ui_element.title',
+    description: 'monsieurbiz_ui_elements.ui_element.framed_ui_element.description',
     templates: new TemplatesUiElement(
-        adminRender: '@MonsieurBizSyliusUiElementsPlugin/Admin/UiElement/framed_text_ui_element.html.twig',
-        frontRender: '@MonsieurBizSyliusUiElementsPlugin/Shop/UiElement/framed_text_ui_element.html.twig',
+        adminRender: '@MonsieurBizSyliusUiElementsPlugin/Admin/UiElement/framed_ui_element.html.twig',
+        frontRender: '@MonsieurBizSyliusUiElementsPlugin/Shop/UiElement/framed_ui_element.html.twig',
     ),
     tags: [],
     wireframe: 'framed-text',
 )]
-class FramedTextUiElementType extends AbstractType
+class FramedUiElementType extends AbstractType
 {
     public const BACKGROUND_LIGHT = 'light';
 
@@ -44,10 +43,9 @@ class FramedTextUiElementType extends AbstractType
     public function buildForm(FormBuilderInterface $builder, array $options): void
     {
         $builder
-            ->add('content', WysiwygType::class, [
+            ->add('content', RichEditorType::class, [
                 'label' => 'monsieurbiz_ui_elements.common.fields.content',
                 'required' => true,
-                'editor_toolbar_type' => EditorInterface::TOOLBAR_TYPE_MINIMAL,
                 'constraints' => [
                     new Assert\NotBlank(),
                 ],

diff --git a/src/Resources/translations/messages.en.yaml b/src/Resources/translations/messages.en.yaml
@@ -74,9 +74,9 @@ monsieurbiz_ui_elements:
         featured_text_ui_element:
             title: "Featured Text Element"
             description: "Highlighted text with left stroke and larger text"
-        framed_text_ui_element:
-            title: "Framed Text Element"
-            description: "Text displayed in a frame"
+        framed_ui_element:
+            title: "Framed Element"
+            description: "Rich editor displayed in a frame"
         thematics_ui_element:
             title: "Thematics Element"
             description: "Highlighting thematics with a description"

diff --git a/src/Resources/translations/messages.fr.yaml b/src/Resources/translations/messages.fr.yaml
@@ -74,9 +74,9 @@ monsieurbiz_ui_elements:
         featured_text_ui_element:
             title: "Lame texte mis en avant"
             description: "Un texte mis en avant avec trait à gauche et un texte plus grand"
-        framed_text_ui_element:
-            title: "Lame texte encadré"
-            description: "Un texte affiché dans un encadré"
+        framed_ui_element:
+            title: "Lame encadré"
+            description: "Un contenu riche affiché dans un encadré"
         thematics_ui_element:
             title: "Lame thématiques"
             description: "Mise en avant de thématiques avec une description"

diff --git a/src/Resources/views/Admin/UiElement/framed_text_ui_element.html.twig b/src/Resources/views/Admin/UiElement/framed_text_ui_element.html.twig
diff --git a/src/Resources/views/Admin/UiElement/framed_ui_element.html.twig b/src/Resources/views/Admin/UiElement/framed_ui_element.html.twig
@@ -0,0 +1,15 @@
+{#
+UI Element template
+type: framed_ui_element
+element fields:
+    - content
+    - background
+#}
+{% set isDark = element.background == constant('MonsieurBiz\\SyliusUiElementsPlugin\\Form\\Type\\UiElement\\FramedUiElementType::BACKGROUND_DARK') %}
+<div class="ui segment {% if isDark %} inverted{% endif %}" style="padding: 30px">
+    {% set content = monsieurbiz_richeditor_get_elements(element.content) %}
+    {% for element in content %}
+           {{ element | monsieurbiz_richeditor_render_element }}
+    {% endfor %}
+</div>
+<div class="ui divider hidden"></div>
diff --git a/src/Resources/views/Shop/UiElement/framed_text_ui_element.html.twig b/src/Resources/views/Shop/UiElement/framed_text_ui_element.html.twig
diff --git a/src/Resources/views/Shop/UiElement/framed_ui_element.html.twig b/src/Resources/views/Shop/UiElement/framed_ui_element.html.twig
@@ -0,0 +1,15 @@
+{#
+UI Element template
+type: framed_ui_element
+element fields:
+    - content
+    - background
+#}
+{% set isDark = element.background == constant('MonsieurBiz\\SyliusUiElementsPlugin\\Form\\Type\\UiElement\\FramedUiElementType::BACKGROUND_DARK') %}
+<div class="ui segment {% if isDark %} inverted{% endif %}" style="padding: 30px">
+    {% set content = monsieurbiz_richeditor_get_elements(element.content) %}
+    {% for element in content %}
+           {{ element | monsieurbiz_richeditor_render_element }}
+    {% endfor %}
+</div>
+<div class="ui divider hidden"></div>