Add ability to control the target for a button

src/Form/Type/LinkTypeType.php

@@ -0,0 +1,37 @@
+<?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;
+
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class LinkTypeType extends ChoiceType
+{
+    public const TYPE_INTERNAL = 'internal';
+
+    public const TYPE_EXTERNAL = 'external';
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        parent::configureOptions($resolver);
+        $resolver->setDefaults([
+            'label' => 'monsieurbiz_richeditor_plugin.common.link_type',
+            'choices' => [
+                'monsieurbiz_richeditor_plugin.common.internal_link' => self::TYPE_INTERNAL,
+                'monsieurbiz_richeditor_plugin.common.external_link' => self::TYPE_EXTERNAL,
+            ],
+            'multiple' => false,
+        ]);
+    }
+}

src/Form/Type/UiElement/ButtonLinkType.php

@@ -14,8 +14,10 @@
 namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement;
 
 use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\AlignmentType;
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\LinkTypeType;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\TextType as FormTextType;
+use Symfony\Component\Form\Extension\Core\Type\UrlType;
 use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\Validator\Constraints as Assert;
 
@@ -31,26 +33,30 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
             $constraintsLabel = [
                 new Assert\NotBlank([]),
             ];
+            $constraintsLinkType = [
+                new Assert\NotBlank([]),
+            ];
             $constraintsLink = [
                 new Assert\AtLeastOneOf([
                     'includeInternalMessages' => false,
                     'message' => 'monsieurbiz_richeditor_plugin.not_valid_url',
                     'constraints' => [
                         new Assert\Url(['protocols' => ['http', 'https'], 'relativeProtocol' => true]),
-                        new Assert\Regex(['pattern' => '`^(#|/[^/])`']),
+                        new Assert\Regex(['pattern' => '`^(#|/.*)$`']),
                     ],
                 ]),
                 new Assert\NotBlank([]),
             ];
         } else {
             $constraintsLabel = [];
+            $constraintsLinkType = [];
             $constraintsLink = [
                 new Assert\AtLeastOneOf([
                     'includeInternalMessages' => false,
                     'message' => 'monsieurbiz_richeditor_plugin.not_valid_url',
                     'constraints' => [
                         new Assert\Url(['protocols' => ['http', 'https'], 'relativeProtocol' => true]),
-                        new Assert\Regex(['pattern' => '`^(#|/[^/])`']),
+                        new Assert\Regex(['pattern' => '`^(#|/.*)$`']),
                     ],
                 ]),
             ];
@@ -62,11 +68,15 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                 'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.button.field.label',
                 'constraints' => $constraintsLabel,
             ])
-            ->add('link', FormTextType::class, [
+            ->add('link', UrlType::class, [
                 'required' => $required,
                 'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.button.field.link',
                 'constraints' => $constraintsLink,
             ])
+            ->add('link_type', LinkTypeType::class, [
+                'required' => $required,
+                'constraints' => $constraintsLinkType,
+            ])
             ->add('align', AlignmentType::class)
         ;
     }

src/Form/Type/UiElement/ImageType.php

@@ -16,10 +16,12 @@
 use MonsieurBiz\SyliusMediaManagerPlugin\Form\Type\ImageType as MediaManagerImageType;
 use MonsieurBiz\SyliusRichEditorPlugin\Form\Constraints\RichEditorConstraints;
 use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\AlignmentType;
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\LinkTypeType;
 use MonsieurBiz\SyliusRichEditorPlugin\MonsieurBizSyliusRichEditorPlugin;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\FileType;
 use Symfony\Component\Form\Extension\Core\Type\TextType as FormTextType;
+use Symfony\Component\Form\Extension\Core\Type\UrlType;
 use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\Form\FormEvent;
 use Symfony\Component\Form\FormEvents;
@@ -56,7 +58,7 @@ public function addFields(FormBuilderInterface $builder, array $options): void
                 'required' => false,
                 'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.image.field.title',
             ])
-            ->add('link', FormTextType::class, [
+            ->add('link', UrlType::class, [
                 'required' => false,
                 'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.image.field.link',
                 'constraints' => [
@@ -65,11 +67,14 @@ public function addFields(FormBuilderInterface $builder, array $options): void
                         'message' => 'monsieurbiz_richeditor_plugin.not_valid_url',
                         'constraints' => [
                             new Assert\Url(['protocols' => ['http', 'https'], 'relativeProtocol' => true]),
-                            new Assert\Regex(['pattern' => '`^(#|/[^/])`']),
+                            new Assert\Regex(['pattern' => '`^(#|/.*)$`']),
                         ],
                     ]),
                 ],
             ])
+            ->add('link_type', LinkTypeType::class, [
+                'required' => false,
+            ])
             ->add('align', AlignmentType::class)
         ;
     }

src/Resources/translations/messages.en.yml

@@ -142,3 +142,7 @@ monsieurbiz_richeditor_plugin:
     unallowed_uielement: 'Element not allowed here'
   ui:
     disabled: 'Disabled'
+  common:
+    link_type: 'Link type'
+    internal_link: 'Internal link'
+    external_link: 'External link'

src/Resources/translations/messages.es.yml

@@ -139,3 +139,8 @@ monsieurbiz_richeditor_plugin:
     unallowed_uielement: 'Elemento no permitido aquí'
   ui:
     disabled: 'Desactivado'
+  common:
+    link_type: 'Tipo de enlace'
+    internal_link: 'Enlace interno'
+    external_link: 'Enlace externo'
+

src/Resources/translations/messages.fr.yml

@@ -142,3 +142,7 @@ monsieurbiz_richeditor_plugin:
     unallowed_uielement: 'Élément non autorisé ici'
   ui:
     disabled: 'Désactivé'
+  common:
+    link_type: 'Type de lien'
+    internal_link: 'Lien interne'
+    external_link: 'Lien externe'

src/Resources/translations/messages.hr.yml

@@ -130,3 +130,7 @@ monsieurbiz_richeditor_plugin:
     cannot_find_type: 'Vrsta dijela elemenata nije podržana.'
     cannot_upload_image: 'Postoji tehnički problem. Molimo kontaktirajte svog administratora.'
     ajax_error: 'Technikai probléma van. Kérjük, lépjen kapcsolatba rendszergazdájával.'
+  common:
+    link_type: 'Tip linka'
+    internal_link: 'Unutarnji link'
+    external_link: 'Vanjski link'

src/Resources/translations/messages.nl.yml

@@ -104,3 +104,7 @@ monsieurbiz_richeditor_plugin:
     cannot_find_type: 'Kan type niet vinden voor sommige UI-elementen'
     cannot_upload_image: 'Kan de afbeelding niet uploaden. Het bestand is mogelijk te groot of heeft een onjuist formaat.'
     ajax_error: 'Er is een technisch probleem. Neem contact op met uw beheerder.'
+  common:
+    link_type: 'Type link'
+    internal_link: 'Interne link'
+    external_link: 'Externe link'

src/Resources/translations/messages.pl.yaml

@@ -142,3 +142,7 @@ monsieurbiz_richeditor_plugin:
         unallowed_uielement: 'Element niedozwolony tutaj'
     ui:
         disabled: 'Wyłączone'
+    common:
+        link_type: 'Typ linku'
+        internal_link: 'Link wewnętrzny'
+        external_link: 'Link zewnętrzny'

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

@@ -4,9 +4,14 @@
     element fields :
         label
         link
+        link_type
         align
 #}
 {% set align = element.align is defined and element.align is not empty ? element.align : 'center' %}
+{% set linkIsBlank = element.link_type is defined and element.link_type == constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LinkTypeType::TYPE_EXTERNAL') %}
+
 <p style="text-align: {{align}};">
-    <a href="{{ element.link }}" class="ui primary button massive">{{ element.label }}</a>
+    <a href="{{ element.link }}"{% if linkIsBlank %} target="_blank" rel="noopener noreferrer"{% endif %} class="ui primary button massive">
+        {{ element.label }}
+    </a>
 </p>

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

@@ -6,13 +6,15 @@
         alt
         title
         link
+        link_type
         align
 #}
 {% if element.image is defined %}
 {% set align = element.align is defined and element.align is not empty ? element.align : 'inherit' %}
 <p style="text-align: {{align}};">
     {% if element.link is not empty %}
-        <a href="{{ element.link }}">
+        {% set linkIsBlank = element.link_type is defined and element.link_type == constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LinkTypeType::TYPE_EXTERNAL') %}
+        <a href="{{ element.link }}"{% if linkIsBlank %} target="_blank" rel="noopener noreferrer"{% endif %}>
             <img class="ui fluid image" src="{{ monsieurbiz_richeditor_get_media_without_upload_dir(element.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
         </a>
     {% else %}

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

@@ -4,9 +4,11 @@
     element fields :
         label
         link
+        link_type
         align
 #}
 {% set align = element.align is defined and element.align is not empty ? element.align : 'center' %}
+{% set linkIsBlank = element.link_type is defined and element.link_type == constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LinkTypeType::TYPE_EXTERNAL') %}
 <p style="text-align: {{align}};">
-    <a href="{{ element.link }}" class="ui primary button massive">{{ element.label }}</a>
+    <a href="{{ element.link }}"{% if linkIsBlank %} target="_blank" rel="noopener noreferrer"{% endif %} class="ui primary button massive">{{ element.label }}</a>
 </p>

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

@@ -6,13 +6,15 @@
         alt
         title
         link
+        link_type
         align
 #}
 {% if element.image is defined %}
 {% set align = element.align is defined and element.align is not empty ? element.align : 'inherit' %}
 <p style="text-align: {{align}};">
     {% if element.link is not empty %}
-        <a href="{{ element.link }}">
+        {% set linkIsBlank = element.link_type is defined and element.link_type == constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LinkTypeType::TYPE_EXTERNAL') %}
+        <a href="{{ element.link }}"{% if linkIsBlank %} target="_blank" rel="noopener noreferrer"{% endif %}>
             <img class="ui fluid image" src="{{ monsieurbiz_richeditor_get_media_without_upload_dir(element.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
         </a>
     {% else %}