feat(RichEditor): Form Extension to override ImageType et VideoType o…

…f RichEditorPlugin when used

README.md

@@ -86,6 +86,12 @@ Use `MonsieurBiz\SyliusMediaManagerPlugin\Form\Type\FaviconType`
 
 Use `MonsieurBiz\SyliusMediaManagerPlugin\Form\Type\AudioType`
 
+### RichEditorPlugin
+
+If you use our RichEditorPlugin the ImageType and VideoType are using the MediaManager.
+In case you had the RichEditorPlugin before the MediaManagerPlugin you need to copy the folder `%kernel.project_dir%/public%/media/rich-editor` to `%kernel.project_dir%/public%/media/media/rich-editor` 
+to keep the image from being displayed when they were uploaded through the richEditor and not the mediaManager.
+
 ## Contributing
 
 You can find a way to run the plugin without effort in the file [DEVELOPMENT.md](./DEVELOPMENT.md).

dist/templates/bundles/MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/image.html.twig

@@ -0,0 +1,22 @@
+{#
+    UI Element template
+    type: image
+    element fields :
+        image
+        alt
+        title
+        link
+        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 }}">
+            <img class="ui fluid image" src="{{ get_media_manager_file_path(element.image) }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
+        </a>
+    {% else %}
+        <img class="ui fluid image" src="{{ get_media_manager_file_path(element.image) }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
+    {% endif %}
+</p>
+{% endif %}

dist/templates/bundles/MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/image_collection.html.twig

@@ -0,0 +1,19 @@
+{#
+    UI Element template
+    type: image_collection
+    element fields :
+        images
+#}
+<div class="ui stackable two column grid">
+    {% for image in element.images %}
+        <div class="column">
+            {% if image.link is not empty %}
+                <a href="{{ image.link }}">
+                    <img class="ui fluid image" src="{{ get_media_manager_file_path(image.image) }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
+                </a>
+            {% else %}
+                <img class="ui fluid image" src="{{ get_media_manager_file_path(image.image) }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
+            {% endif %}
+        </div>
+    {% endfor %}
+</div>

dist/templates/bundles/MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/video.html.twig

@@ -0,0 +1,14 @@
+{#
+    UI Element template
+    type: video
+    element fields :
+        video
+        image
+        align
+#}
+{% set align = element.align is defined and element.align is not empty ? element.align : 'inherit' %}
+<div style="text-align: {{align}};">
+    <video width="100%" poster="{{ get_media_manager_file_path(element.image) }}" controls>
+        <source src="{{ get_media_manager_file_path(element.video) }}" type="video/{{ element.video|split('.')|last }}">
+    </video>
+</div>

dist/templates/bundles/MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/image.html.twig

@@ -0,0 +1,22 @@
+{#
+UI Element template
+type: image
+element fields :
+    image
+    alt
+    title
+    link
+    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 }}">
+                <img class="ui fluid image" src="{{ get_media_manager_file_path(element.image) }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
+            </a>
+        {% else %}
+            <img class="ui fluid image" src="{{ get_media_manager_file_path(element.image) }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
+        {% endif %}
+    </p>
+{% endif %}

dist/templates/bundles/MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/image_collection.html.twig

@@ -0,0 +1,19 @@
+{#
+    UI Element template
+    type: image_collection
+    element fields :
+        images
+#}
+<div class="ui stackable two column grid">
+    {% for image in element.images %}
+        <div class="column">
+            {% if image.link is not empty %}
+                <a href="{{ image.link }}">
+                    <img class="ui fluid image" src="{{ get_media_manager_file_path(image.image) }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
+                </a>
+            {% else %}
+                <img class="ui fluid image" src="{{ get_media_manager_file_path(image.image) }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
+            {% endif %}
+        </div>
+    {% endfor %}
+</div>

dist/templates/bundles/MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/video.html.twig

@@ -0,0 +1,14 @@
+{#
+    UI Element template
+    type: video
+    element fields :
+        video
+        image
+        align
+#}
+{% set align = element.align is defined and element.align is not empty ? element.align : 'inherit' %}
+<div style="text-align: {{align}};">
+    <video width="100%" poster="{{ get_media_manager_file_path(element.image) }}" controls>
+        <source src="{{ get_media_manager_file_path(element.video) }}" type="video/{{ element.video|split('.')|last }}">
+    </video>
+</div>

recipes/1.0/manifest.json

@@ -11,5 +11,13 @@
         "MONSIEURBIZ_SYLIUS_MEDIA_MANAGER_PUBLIC_FOLDER": "%kernel.project_dir%/public",
         "MONSIEURBIZ_SYLIUS_MEDIA_MANAGER_ROOT_FOLDER_FROM_PUBLIC": "media",
         "MONSIEURBIZ_SYLIUS_MEDIA_MANAGER_MAX_FILE_SIZE": "5M"
+    },
+    "copy-from-package": {
+        "src/Resources/views/MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/image.html.twig": "templates/MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/image.html.twig",
+        "src/Resources/views/MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/image_collection.html.twig": "templates/MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/image_collection.html.twig",
+        "src/Resources/views/MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/video.html.twig": "templates/MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/video.html.twig",
+        "src/Resources/views/MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/image.html.twig": "templates/MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/image.html.twig",
+        "src/Resources/views/MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/image_collection.html.twig": "templates/MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/image_collection.html.twig",
+        "src/Resources/views/MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/video.html.twig": "templates/MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/video.html.twig"
     }
 }

src/Form/Extension/RichEditor/ImageTypeExtension.php

@@ -0,0 +1,58 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz' Media Manager 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\SyliusMediaManagerPlugin\Form\Extension\RichEditor;
+
+use Closure;
+use MonsieurBiz\SyliusMediaManagerPlugin\Form\Type\ImageType as MediaManagerImageType;
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\ImageType as RichEditorImageType;
+use ReflectionFunction;
+use Symfony\Component\Form\AbstractTypeExtension;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Form\FormEvents;
+
+class ImageTypeExtension extends AbstractTypeExtension
+{
+    /**
+     * @SuppressWarnings(UnusedFormalParameter)
+     * @SuppressWarnings(CyclomaticComplexity)
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('image', MediaManagerImageType::class)
+        ;
+
+        foreach ($builder->getEventDispatcher()->getListeners(FormEvents::PRE_SUBMIT) as $listener) {
+            if ($listener instanceof Closure) {
+                $reflection = new ReflectionFunction($listener);
+                $closureScopeClass = $reflection->getClosureScopeClass();
+
+                if (null === $closureScopeClass) {
+                    continue;
+                }
+                /** @phpstan-ignore-next-line  */
+                if (RichEditorImageType::class === $closureScopeClass->getName()) {
+                    // Remove the event listener that is re-adding the field and emptying the options
+                    $builder->getEventDispatcher()->removeListener(FormEvents::PRE_SUBMIT, $listener);
+                }
+            }
+        }
+    }
+
+    public static function getExtendedTypes(): iterable
+    {
+        /** @phpstan-ignore-next-line  */
+        return [RichEditorImageType::class];
+    }
+}

src/Form/Extension/RichEditor/VideoTypeExtension.php

@@ -0,0 +1,60 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz' Media Manager 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\SyliusMediaManagerPlugin\Form\Extension\RichEditor;
+
+use Closure;
+use MonsieurBiz\SyliusMediaManagerPlugin\Form\Type\ImageType as MediaManagerImageType;
+use MonsieurBiz\SyliusMediaManagerPlugin\Form\Type\VideoType as MediaManagerVideoType;
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\VideoType as RichEditorVideoType;
+use ReflectionFunction;
+use Symfony\Component\Form\AbstractTypeExtension;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Form\FormEvents;
+
+class VideoTypeExtension extends AbstractTypeExtension
+{
+    /**
+     * @SuppressWarnings(UnusedFormalParameter)
+     * @SuppressWarnings(CyclomaticComplexity)
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('video', MediaManagerVideoType::class)
+            ->add('image', MediaManagerImageType::class)
+        ;
+
+        foreach ($builder->getEventDispatcher()->getListeners(FormEvents::PRE_SUBMIT) as $listener) {
+            if ($listener instanceof Closure) {
+                $reflection = new ReflectionFunction($listener);
+                $closureScopeClass = $reflection->getClosureScopeClass();
+
+                if (null === $closureScopeClass) {
+                    continue;
+                }
+                /** @phpstan-ignore-next-line  */
+                if (RichEditorVideoType::class === $closureScopeClass->getName()) {
+                    // Remove the event listener that is re-adding the field and emptying the options
+                    $builder->getEventDispatcher()->removeListener(FormEvents::PRE_SUBMIT, $listener);
+                }
+            }
+        }
+    }
+
+    public static function getExtendedTypes(): iterable
+    {
+        /** @phpstan-ignore-next-line  */
+        return [RichEditorVideoType::class];
+    }
+}

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

@@ -0,0 +1,22 @@
+{#
+    UI Element template
+    type: image
+    element fields :
+        image
+        alt
+        title
+        link
+        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 }}">
+            <img class="ui fluid image" src="{{ get_media_manager_file_path(element.image) }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
+        </a>
+    {% else %}
+        <img class="ui fluid image" src="{{ get_media_manager_file_path(element.image) }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
+    {% endif %}
+</p>
+{% endif %}

src/Resources/views/MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/image_collection.html.twig

@@ -0,0 +1,19 @@
+{#
+    UI Element template
+    type: image_collection
+    element fields :
+        images
+#}
+<div class="ui stackable two column grid">
+    {% for image in element.images %}
+        <div class="column">
+            {% if image.link is not empty %}
+                <a href="{{ image.link }}">
+                    <img class="ui fluid image" src="{{ get_media_manager_file_path(image.image) }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
+                </a>
+            {% else %}
+                <img class="ui fluid image" src="{{ get_media_manager_file_path(image.image) }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
+            {% endif %}
+        </div>
+    {% endfor %}
+</div>

src/Resources/views/MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/video.html.twig

@@ -0,0 +1,14 @@
+{#
+    UI Element template
+    type: video
+    element fields :
+        video
+        image
+        align
+#}
+{% set align = element.align is defined and element.align is not empty ? element.align : 'inherit' %}
+<div style="text-align: {{align}};">
+    <video width="100%" poster="{{ get_media_manager_file_path(element.image) }}" controls>
+        <source src="{{ get_media_manager_file_path(element.video) }}" type="video/{{ element.video|split('.')|last }}">
+    </video>
+</div>

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

@@ -0,0 +1,22 @@
+{#
+UI Element template
+type: image
+element fields :
+    image
+    alt
+    title
+    link
+    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 }}">
+                <img class="ui fluid image" src="{{ get_media_manager_file_path(element.image) }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
+            </a>
+        {% else %}
+            <img class="ui fluid image" src="{{ get_media_manager_file_path(element.image) }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
+        {% endif %}
+    </p>
+{% endif %}

src/Resources/views/MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/image_collection.html.twig

@@ -0,0 +1,19 @@
+{#
+    UI Element template
+    type: image_collection
+    element fields :
+        images
+#}
+<div class="ui stackable two column grid">
+    {% for image in element.images %}
+        <div class="column">
+            {% if image.link is not empty %}
+                <a href="{{ image.link }}">
+                    <img class="ui fluid image" src="{{ get_media_manager_file_path(image.image) }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
+                </a>
+            {% else %}
+                <img class="ui fluid image" src="{{ get_media_manager_file_path(image.image) }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
+            {% endif %}
+        </div>
+    {% endfor %}
+</div>

src/Resources/views/MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/video.html.twig

@@ -0,0 +1,14 @@
+{#
+    UI Element template
+    type: video
+    element fields :
+        video
+        image
+        align
+#}
+{% set align = element.align is defined and element.align is not empty ? element.align : 'inherit' %}
+<div style="text-align: {{align}};">
+    <video width="100%" poster="{{ get_media_manager_file_path(element.image) }}" controls>
+        <source src="{{ get_media_manager_file_path(element.video) }}" type="video/{{ element.video|split('.')|last }}">
+    </video>
+</div>