Add the ability to nest a rich editor inside another UIElement

[julien1619]

Hi everyone!

This PR aims to add the ability to use the rich editor inside another UIElement, it allows the user to create a row/column component.

To add this feature, two main changes were done:

• Try to init the editor after each formInit event, and avoid creating an already created editor
• Scope the dialogs to avoid any overlap

closes #172

[maximehuran]

Hi @julien1619 !

It's a cool feature we want to have so thank you :) Do you think you can add a sample UI Element in the test application using this feature ?

[julien1619]

Yes, I will add a Row component today ;)

[julien1619]

It's done and tested :)

[maximehuran]

Very nice work 🚀 I have a suggestion about the element.

Maybe it could be nice to have a "2 columns" element instead. WDYTOT ?

That I cannot push on your branch, you can check this commit :

https://github.com/monsieurbiz/SyliusRichEditorPlugin/pull/203/commits/f455d51886f42a1b70b8da8a051e95fc778583c1

Example in admin preview

Example in front

Form example

https://github.com/monsieurbiz/SyliusRichEditorPlugin/assets/11380627/bd21b22d-9dd1-4c6c-88b0-36991664eafc

[julien1619]

I tend to prefer the multi-columns one because our use case is to put multiple components (between 2 and 5) in columns on desktop. So my component doesn't limit the number of column, but it doesn't allow to put multiple elements inside one column.

One solution to have both way would be to have two components :

• a row/multi-column component: same as the one I proposed.
• a column component: a simple RichText, just rendering the components as-is.

What do you think? I would understand if you prefer to keep it simple, but I think it could work well.

[maximehuran]

Yes it could be great. Can you check this commit ? It's done, I updated README and also add some borders in admin to understand the layout separations.

https://github.com/monsieurbiz/SyliusRichEditorPlugin/pull/203/commits/1120edaf6da138459d55682b4fff00f91a84fdb1

I still have an issue in Admin. If I use the column element in row element, the Shop template is used for the Column element.

Example :

https://github.com/monsieurbiz/SyliusRichEditorPlugin/assets/11380627/af68f9f5-f949-4290-9bb7-df64ad7492db

[julien1619]

It seems perfect to me!

[maximehuran]

I still have an issue in Admin. If I use the column element in row element, the Shop template is used for the Column element.

I will try to check this tomorrow, if you have a clue I get it 😉

[julien1619]

I've found why. In fact the twig filter always render the shop element, not the admin one. When you try to render the row element, the column will be rendered with the front element. Here it is:

$template = $uiElement->getFrontRenderTemplate();

Maybe you can create the same filters than the existing ones but for the admin part and use it inside the column and row?

public function getFilters(): array
    {
        return [
            new TwigFilter('monsieurbiz_richeditor_render_field', [$this, 'renderField'], ['is_safe' => ['html'], 'needs_context' => true]),
            new TwigFilter('monsieurbiz_richeditor_render_elements', [$this, 'renderElements'], ['is_safe' => ['html'], 'needs_context' => true]),
            new TwigFilter('monsieurbiz_richeditor_render_element', [$this, 'renderElement'], ['is_safe' => ['html'], 'needs_context' => true]),
+           new TwigFilter('monsieurbiz_richeditor_render_admin_field', [$this, 'renderAdminField'], ['is_safe' => ['html'], 'needs_context' => true]),
+           new TwigFilter('monsieurbiz_richeditor_render_admin_elements', [$this, 'renderAdminElements'], ['is_safe' => ['html'], 'needs_context' => true]),
+           new TwigFilter('monsieurbiz_richeditor_render_admin_element', [$this, 'renderAdminElement'], ['is_safe' => ['html'], 'needs_context' => true]),
        ];
    }

[maximehuran]

It will be done automatically using the firewall context : https://github.com/monsieurbiz/SyliusRichEditorPlugin/pull/203/commits/4a0da1d99e958acaeef00e86c851532640a763dc

[maximehuran]

Test failed, we have 2 options :

• Fix PHP CS error and we will merge this PR and I will rebase mine after
• Close this PR and merge the other one https://github.com/monsieurbiz/SyliusRichEditorPlugin/pull/203

[julien1619]

I think we can close this one and merge the other one.

[maximehuran]

Thank you @julien1619 🚀