feat(anchor): add anchor ui element

src/Form/Type/UiElement/AnchorType.php

@@ -0,0 +1,39 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz' Rich Editor plugin for Sylius.
+ *
+ * (c) Monsieur Biz <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE.txt
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Validator\Constraints as Assert;
+
+final class AnchorType extends AbstractType
+{
+    /**
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('name', TextType::class, [
+                'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.anchor.field.name',
+                'required' => true,
+                'constraints' => [
+                    new Assert\NotBlank(),
+                    new Assert\Length(['min' => 1, 'max' => 255]),
+                ],
+            ])
+        ;
+    }
+}

src/Resources/config/richeditor.yaml

@@ -131,6 +131,17 @@ monsieurbiz_sylius_richeditor:
             templates:
                 admin_render: '@MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/separator.html.twig'
                 front_render: '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/separator.html.twig'
+        monsieurbiz.anchor:
+            alias: anchor
+            title: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.anchor.title'
+            description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.anchor.description'
+            icon: 'anchor'
+            classes:
+                form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\AnchorType
+            templates:
+                admin_render: '@MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/anchor.html.twig'
+                front_render: '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/anchor.html.twig'
+            tags: [default, anchor]
         monsieurbiz.youtube:
             alias: youtube
             title: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.youtube.title'

src/Resources/translations/messages.en.yml

@@ -88,6 +88,11 @@ monsieurbiz_richeditor_plugin:
            medium: 'Medium'
            thick: 'Thick'
            very_thick: 'Very thick'
+    anchor:
+        title: Anchor
+        description: Add an anchor to be accessible by link with `#`
+        field:
+            name: Anchor's name (Without `#`)
     monsieurbiz.button:
       title: 'Button Element'
       short_description: 'A button with a text and a link.'

src/Resources/translations/messages.fr.yml

@@ -88,6 +88,11 @@ monsieurbiz_richeditor_plugin:
            medium: 'Moyenne'
            thick: 'Épaisse'
            very_thick: 'Très épaisse'
+    monsieurbiz.anchor:
+      title: Ancre
+      description: Ajoute une ancre accessible avec un lien `#`
+      field:
+        name: Nom de l'ancre (Sans le `#`)
     monsieurbiz.button:
       title: 'Lame Bouton'
       short_description: 'Un bouton avec un texte et un lien.'

src/Resources/views/Admin/UiElement/anchor.html.twig

@@ -0,0 +1,11 @@
+{#
+    UI Element template
+    type: anchor
+    element fields :
+        name
+#}
+{% if element.name is defined and element.name is not empty %}
+<div id="{{ element.name | escape('html_attr') }}">
+    #{{ element.name }}
+</div>
+{% endif %}

src/Resources/views/Shop/UiElement/anchor.html.twig

@@ -0,0 +1,9 @@
+{#
+    UI Element template
+    type: anchor
+    element fields :
+        name
+#}
+{% if element.name is defined and element.name is not empty %}
+<div id="{{ element.name|escape('html_attr') }}" aria-hidden="true"></div>
+{% endif %}