WIP: update for sylius 2.0

.github/workflows/recipe.yaml

@@ -14,8 +14,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        php: ['8.1', '8.2', '8.3']
-        sylius: ["~1.12.0", "~1.13.0", "1.14.0"]
+        php: ['8.2', '8.3']
+        sylius: ["~2.0.0"]
 
     steps:
       - name: Setup PHP

.github/workflows/security.yaml

@@ -13,7 +13,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        php: ['8.1', '8.2', '8.3']
+        php: ['8.2', '8.3']
 
     steps:
       - uses: actions/checkout@v3

.github/workflows/tests.yaml

@@ -14,7 +14,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        php: ['8.1', '8.2', '8.3']
+        php: ['8.2', '8.3']
+        node: ['20']
 
     env:
       SYMFONY_ARGS: --no-tls
@@ -25,7 +26,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: ${{ matrix.node }}
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
         with:

Makefile

@@ -1,7 +1,7 @@
 .DEFAULT_GOAL := help
 SHELL=/bin/bash
 APP_DIR=tests/Application
-SYLIUS_VERSION=1.14.0
+SYLIUS_VERSION=2.0.0
 SYMFONY=cd ${APP_DIR} && symfony
 COMPOSER=symfony composer
 CONSOLE=${SYMFONY} console

assets/css/app.scss

@@ -60,9 +60,9 @@ html.is-disabled body {
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: 999;
+    z-index: 1020;
     display: none;
-    padding: 0.714rem 0 0.714rem 5%;
+    padding: 0 0 0 15rem;
     -webkit-user-select: none;
     -ms-user-select: none;
     user-select: none;
@@ -190,10 +190,6 @@ html.is-disabled body {
     cursor: pointer;
 }
 
-.uie-card .content {
-    padding-top: 1.5rem !important;
-}
-
 .is-active .uie-heading {
     transform: rotate(90deg) translateY(-0.6rem) scale(0.7);
     transform-origin: left top 0;
@@ -245,6 +241,27 @@ html.is-disabled body {
     }
 }
 
+// @TODO To confirm
+
+.ui.horizontal.divider::before {
+    background-position: right 1em top 50%;
+}
+
+.ui.horizontal.divider::after {
+    background-position: left 1em top 50%;
+}
+.ui.horizontal.divider::after, .ui.horizontal.divider::before {
+    content: "";
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC);
+    background-repeat: no-repeat;
+    display: table-cell;
+    position: relative;
+    top: 50%;
+    width: 50%;
+}
+
+// End to confirm
+
 @media (max-width: 700px) {
     .sm\:uie-flex-column {
         flex-direction: column !important;

composer.json

@@ -5,8 +5,8 @@
     "description": "A Rich Editor plugin for Sylius.",
     "license": "MIT",
     "require": {
-        "php": "^8.1",
-        "sylius/sylius": ">=1.12 <2.0",
+        "php": "^8.2",
+        "sylius/sylius": "~2.0.0",
         "twig/markdown-extra": "^2.16|^3.12",
         "twig/extra-bundle": "^2.16|^3.12",
         "league/commonmark": "^2.5"
@@ -39,7 +39,7 @@
     },
     "extra": {
         "branch-alias": {
-            "dev-master": "2.9-dev"
+            "dev-master": "3.0-dev"
         },
         "symfony": {
             "docker": false,

dist/config/packages/monsieurbiz_sylius_rich_editor_plugin_custom.yaml

@@ -4,7 +4,7 @@ monsieurbiz_sylius_richeditor:
             tags: [ html ]
         monsieurbiz.youtube:
             tags: [ youtube ]
-#        Example without PHP Attributes or for PHP version < 8.1
+#        Example without PHP Attributes
 #        app.google_maps:
 #            title: 'app.ui_element.google_maps.title'
 #            description: 'app.ui_element.google_maps.description'

src/Controller/FormController.php

@@ -87,6 +87,7 @@ public function viewAction(Request $request, SwitchAdminLocaleInterface $switchA
             'form_html' => $this->renderView($uiElement->getAdminFormTemplate(), [
                 'form' => $form->createView(),
                 'uiElement' => $uiElement,
+                'locale' => $locale, // @TODO To confirm
                 'data' => $data,
                 'isEdition' => (int) $isEdition,
             ]),

src/Form/Type/LiveCollectionRichEditorType.php

@@ -0,0 +1,121 @@
+<?php
+
+namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\ButtonType;
+use Symfony\Component\Form\Extension\Core\Type\CollectionType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+/**
+ * Cannot extends LiveCollectionType, because it is final.
+ * This class is the same as LiveCollectionType, but with form type as a parameter.
+ */
+class LiveCollectionRichEditorType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        if ($options['allow_add']) {
+            $prototype = $builder->create('add', $options['button_add_type'], $options['button_add_options']);
+            $builder->setAttribute('button_add_prototype', $prototype->getForm());
+        }
+
+        if ($options['allow_delete']) {
+            $prototype = $builder->create('delete', $options['button_delete_type'], $options['button_delete_options']);
+            $builder->setAttribute('button_delete_prototype', $prototype->getForm());
+        }
+    }
+
+    public function buildView(FormView $view, FormInterface $form, array $options): void
+    {
+        if ($form->getConfig()->hasAttribute('button_add_prototype')) {
+            $prototype = $form->getConfig()->getAttribute('button_add_prototype');
+            $view->vars['button_add'] = $prototype->setParent($form)->createView($view);
+
+            $attr = $view->vars['button_add']->vars['attr'];
+            $attr['data-action'] ??= 'live#action';
+            $attr['data-live-action-param'] ??= 'addCollectionItem';
+            $attr['data-live-name-param'] ??= $view->vars['full_name'];
+            // Add form type
+            $attr['data-live-form-param'] ??= $options['form_type'];
+            $view->vars['button_add']->vars['attr'] = $attr;
+
+            array_splice($view->vars['button_add']->vars['block_prefixes'], 1, 0, 'live_collection_button_add');
+        }
+    }
+
+    public function finishView(FormView $view, FormInterface $form, array $options): void
+    {
+        $prefixOffset = -2;
+        // check if the entry type also defines a block prefix
+        /** @var FormInterface $entry */
+        foreach ($form as $entry) {
+            if ($entry->getConfig()->getOption('block_prefix')) {
+                --$prefixOffset;
+            }
+
+            break;
+        }
+
+        foreach ($view as $entryView) {
+            array_splice($entryView->vars['block_prefixes'], $prefixOffset, 0, 'live_collection_entry');
+        }
+
+        if ($form->getConfig()->hasAttribute('button_delete_prototype')) {
+            $prototype = $form->getConfig()->getAttribute('button_delete_prototype');
+
+            $prototypes = [];
+            foreach ($form as $k => $entry) {
+                $prototypes[$k] = clone $prototype;
+                $prototypes[$k]->setParent($entry);
+            }
+
+            foreach ($view as $k => $entryView) {
+                $entryView->vars['button_delete'] = $prototypes[$k]->createView($entryView);
+
+                $attr = $entryView->vars['button_delete']->vars['attr'];
+                $attr['data-action'] ??= 'live#action';
+                $attr['data-live-action-param'] ??= 'removeCollectionItem';
+                $attr['data-live-name-param'] ??= $view->vars['full_name'];
+                $attr['data-live-index-param'] ??= $k;
+                // Add form type
+                $attr['data-live-form-param'] ??= $options['form_type'];
+                $entryView->vars['button_delete']->vars['attr'] = $attr;
+
+                array_splice($entryView->vars['button_delete']->vars['block_prefixes'], 1, 0, 'live_collection_button_delete');
+            }
+        }
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'prototype' => false,
+            'entry_options' => [
+                'label' => false,
+            ],
+            'button_add_type' => ButtonType::class,
+            'button_add_options' => [],
+            'button_delete_type' => ButtonType::class,
+            'button_delete_options' => [],
+            'allow_add' => true,
+            'allow_delete' => true,
+            'by_reference' => false,
+            // Add form type
+            'form_type' => null
+        ]);
+    }
+
+    public function getBlockPrefix(): string
+    {
+        return 'live_collection';
+    }
+
+    public function getParent(): string
+    {
+        return CollectionType::class;
+    }
+}

src/Form/Type/RichEditorType.php

@@ -44,4 +44,9 @@ public function configureOptions(OptionsResolver $resolver): void
             'locale' => null,
         ]);
     }
+
+    public function getBlockPrefix(): string
+    {
+        return 'rich_editor';
+    }
 }

src/Form/Type/UiElement/ImageCollectionType.php

@@ -13,8 +13,8 @@
 
 namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement;
 
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\LiveCollectionRichEditorType;
 use Symfony\Component\Form\AbstractType;
-use Symfony\Component\Form\Extension\Core\Type\CollectionType;
 use Symfony\Component\Form\FormBuilderInterface;
 
 class ImageCollectionType extends AbstractType
@@ -24,14 +24,15 @@ class ImageCollectionType extends AbstractType
      */
     public function buildForm(FormBuilderInterface $builder, array $options): void
     {
-        $builder->add('images', CollectionType::class, [
+        $builder->add('images', LiveCollectionRichEditorType::class, [
             'entry_type' => ImageType::class,
             'prototype_name' => '__image__',
             'button_add_label' => 'monsieurbiz_richeditor_plugin.form.add_image',
             'allow_add' => true,
             'allow_delete' => true,
             'by_reference' => false,
             'delete_empty' => true,
+            'form_type' => self::class,
             'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.image_collection.field.images',
             'attr' => [
                 'class' => 'ui segment secondary collection--flex',

src/Form/Type/UiElement/ImageType.php

@@ -48,7 +48,9 @@ public function addFields(FormBuilderInterface $builder, array $options): void
                 'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.image.field.image',
                 'data_class' => null,
                 'required' => true,
-                'attr' => ['data-image' => 'true'], // To be able to manage display in form
+                'attr' => [
+                    'data-image' => 'true', // To be able to manage display in form
+                ],
             ])
             ->add('alt', FormTextType::class, [
                 'required' => false,

src/Resources/config/config.yaml

@@ -1,6 +1,6 @@
 imports:
     - { resource: "services.yaml" }
-    - { resource: "sylius/ui.yaml" }
+    - { resource: "sylius/twig_hooks.yaml" }
     - { resource: "richeditor.yaml" }
     - { resource: 'images.yaml' }
 

src/Resources/config/richeditor.yaml

@@ -6,7 +6,7 @@ monsieurbiz_sylius_richeditor:
             alias: html
             title: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.html.title'
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.html.description'
-            icon: html5
+            icon: tabler:eye
             wireframe: html
             tags: [ default ]
             classes:

src/Resources/config/sylius/twig_hooks.yaml

@@ -0,0 +1,11 @@
+sylius_twig_hooks:
+    hooks:
+        sylius_admin.base#javascripts:
+            rich_editor_javascripts:
+                template: '@MonsieurBizSyliusRichEditorPlugin/Admin/app.html.twig'
+                priority: -100
+
+        sylius_shop.base#javascripts:
+            rich_editor_javascripts:
+                template: '@MonsieurBizSyliusRichEditorPlugin/Shop/app.html.twig'
+                priority: -100