This plugin adds a rich editor on the fields you want. Now you can manage your content very easily!

composer require monsieurbiz/sylius-rich-editor-plugin

Change your config/bundles.php file to add the line for the plugin :

<?php

return [
    //..
    MonsieurBiz\SyliusRichEditorPlugin\MonsieurBizSyliusRichEditorPlugin::class => ['all' => true],
];

Then create the config file in config/packages/monsieurbiz_sylius_rich_editor.yaml :

imports:
    - { resource: "@MonsieurBizSyliusRichEditorPlugin/Resources/config/config.yaml" }

Finally import the routes in config/routes/monsieurbiz_sylius_rich_editor.yaml :

monsieurbiz_richeditor_admin:
    resource: "@MonsieurBizSyliusRichEditorPlugin/Resources/config/routing/admin.yaml"
    prefix: /%sylius_admin.path_name%

And install the assets

bin/console asset:install

To make a field use the rich editor, you must use the RichEditorType type for it.
We have an example of implementation in the test application.

If your field has some data already, like some previous text before installing this plugin, then we will convert it for you as an HTML Element which contains… HTML.

This way you will be able to use our plugin right away without risking any data lost!

To display the content of the rich editor field you must call the twig filter:

{{ content | monsieurbiz_richeditor_render_element }}

You can see an example in the test application

If you want to filter the elements which are available for your field, you can use the tags option when you build your form.
As example:

$builder->add('description', RichEditorType::class, [
    'required' => false,
    'label' => 'sylius.form.product.description',
    'tags' => ['product'],
]);

In that example, only the Ui Elements with the tag product will be available.
Don't worry, you can add this filter afterwards, we won't remove the already present Ui Elements of your field. But we won't allow to add more if they don't have one of the allowed tags!

monsieurbiz_sylius_richeditor:
    ui_elements:
        app.my_element:
            # … 
            tags: ['product']

The plugin already contains some simple elements.

In this example, we will add a Google Maps element.

Define your UiElement in your configuration folder, let's say in config/packages/monsieurbiz_sylius_richeditor_plugin.yaml as example.

monsieurbiz_sylius_richeditor:
    ui_elements:
        app.google_maps:
            title: 'app.ui_element.google_maps.title'
            description: 'app.ui_element.google_maps.description'
            icon: map pin
            classes:
                form: App\Form\Type\UiElement\GoogleMapsType
                #ui_element: App\UiElement\MyUiElement
            templates:
                admin_render: '/Admin/UiElement/google_maps.html.twig'
                front_render: '/Shop/UiElement/google_maps.html.twig'
            tags: []

You can use your own Ui Element object if needed. Be sure to implement the \MonsieurBiz\SyliusRichEditorPlugin\UiElement\UiElementInterface interface.
A trait is there for you 🤗 as well. This is very useful when you need to do some custom work in your templates, it's like having a helper around. The Ui Element is then available via the ui_element variable in your templates.

<?php

declare(strict_types=1);

namespace App\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;

class GoogleMapsType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('link', TextType::class, [
                'label' => 'app.ui_element.google_maps.link',
                'required' => true,
                'constraints' => [
                    new Assert\NotBlank(),
                ],
            ])
        ;
    }
}

Here is an example of possible translation for the GMap element :

app:
    ui_element:
        google_maps:
            title: 'Google Maps Element'
            short_description: 'Include a Google Maps'
            description: 'An element with a Google Maps link'
            link: 'Link'

You have to create a template for the front and also for the admin's preview.

Here is an example of a simple template for this our which can be used in front and admin:

<iframe id="gmap_canvas" src="{{ element.link }}" scrolling="no" marginheight="0" marginwidth="0" width="600" height="500" frameborder="0"></iframe>

In admin :

In front :

You can open an issue or a Pull Request if you want! 😘
Thank you!