Since latest release, we now have this in console :

It is related to wrong JS input with twig

Hello there,

I want to know if my solution is the best regarding to your plugin. I've added a second image file type in the ImageType form.
But after that, it throw an error 500 on the form validation if one of the two input image file type is empty/not set.

It come from the RichEditorExtension.php, twig filter function getCurrentFilePath because it's needed to return a string or a null but it's returning an object (UploadedFile)

So my solution is to add a is_object check and return null if true because the file/image isn't uploaded yet and we canno't get the right path :

Is it a good solution for you @jacquesbh ?
I can make a PR if that's good for you :)

Thanks

see the videos attached.

this happens after I activate this plugin.

Hello,

could you please help with this replacement, I need CKEditor because of general file upload and storage support (mostly PDFs)?

The easy part was extending TextType form type and replacing WysiwygType (Pell) with FOSCKEditorBundle's CKEditorType.

But unfortunately CKEditor doesn't load at all. I debugged it a bit and found that UI element forms are loaded using innerHTML which doesn't execute script tags. CKEditor, on the other hand, consists of a textarea and 3 script tags: some inline JS code, external JS file loading, and some inline JS code again which relies on external JS file from second script tag.

My first attempt was to dynamically re-insert script tags using appendChild but didn't managed to ensure execution order - third script tag (inline code) is executed before the external JS file is loaded.

This could be fixed but I stopped at that point because this solution seems dirty and I wonder if there is any better approach...

When using an autocomplete field in a UI element form, it doesn't work automatically. You have to add JavaScript that initialises the autocomplete field. I suggest we auto-initialise autocomplete fields after opening a dialog.

Hello,

I'm wondering how can we easly detect changes on rich editor fields because I want to implement this : https://plugins.jquery.com/are-you-sure/

After adding/removing any part of a rich editor field, I need to reload the hidden input field in order to make the "Are you sure" working well.

Can we handle that with the current version of the JS ? If yes, any help will be appreciated

Thanks in advance!

I just tried to install the latest version of this plugin in a Sylius 1.13 environment and realized that Composer does not allow this. Are there any bigger blockers to making the plugin compatible with 1.13?

I have an issue in Admin when i want to create a block the "monsieurbiz.video", i can load on form but when i want to send my video with the button "submit", Javascript launch an error and the page stop here.

e

A UIElement that wraps around other UIElements, with an id and class names for example.

Would be super useful for custom layouts.

When I have a text on multiple paragraphs like here :

If I remove an EOL, it will generate a span with an unwanted style :

It can break some display on front depending on your styles

Sylius allows by default the ability to use Gaufrette as a storage abstraction layer allowing users to host their files in S3 or any other kind of file storage.

It seems this plugin does not allow that, having this class (https://github.com/monsieurbiz/SyliusRichEditorPlugin/blob/master/src/Uploader/FileUploader.php) as a concrete implementation, rather than an interface that can be easily swapped with something else.

Is there any interest in addressing this issue by MonsieurBiz? or would you be willing to accept a PR that addresses this?

either way, a project I am working on plans to implement this, the question is if we can have it in the main repo or if we have to fork it and maintain our own fork.

When editing a UI element and the content of the dialog becomes bigger than its container, it overflows and there's no way to scroll.

Steps to reproduce

1. Add an empty Image Collection element to a rich editor field
2. Edit the newly added element and a couple of new images

The WysiwygType is not initialised when we use a CollectionType.

Possible solution:
Fire an event and init the wysiwyg elements.

I drag and drop a separator from widget to content block and then and I immediately click on save without editing the separator, and then I have this error when I go to my homepage.

Maybe check if element is not empty in separator.html.twig ?

Hello guys,

There's a new thing in Youtube called "Shorts" which is not same as Video.
But the embed is working in the same way.

Currently, the constraint validator doesn't allow us to give a shorts URL.

https://www.youtube.com/shorts/TESTEST
will become
https://www.youtube.com/embed/TESTEST

We could add this in the documentation to help people using the simple wysiwyg (pell) as a standalone field, not only in UI Elements.

<script type="text/javascript">
    (function () {
        document.addEventListener('DOMContentLoaded', () => {
            let wysiwyg = new MonsieurBizRichEditorWysiwyg({
                actions: [
                    'bold',
                    'italic',
                    'underline',
                    'ulist',
                    'olist',
                    'heading1',
                    'heading2',
                    {
                        name: 'heading3',
                        icon: '<b>H<sub>3</sub></b>',
                        title: 'Heading 3',
                        result: () => wysiwyg.exec('formatBlock', '<h3>')
                    },
                    'link'
                ]
            });
            let forms = document.querySelectorAll('form.form');
            forms.forEach(function (form) {
                wysiwyg.load(form);
            });
        });
    })();
</script>

Hello, I use the Rich Editor plugin for specific sections on my website. However, I'm facing an issue where images are only uploaded to the public folder instead of my AWS S3 bucket. I've ensured that my AWS configuration is correct because I can successfully upload images on pages that do not utilize the Rich Editor plugin.

Here's a snippet from my monsieurbiz_sylius_rich_editor_plugin.yaml:

knp_gaufrette:
    adapters:
        sylius_image:
            aws_s3:
                service_id: acme.aws_s3.client
                bucket_name: "%aws_s3_bucket%"
                detect_content_type: true
                options:
                    create: true
                    directory: "media/image"
                    acl: "private"
        monsieurbiz_rich_editor_fixture_file:
            aws_s3:
                service_id: 'acme.aws_s3.client'
                bucket_name: '%aws_s3_bucket%'
                detect_content_type: true
                options:
                    create: true
                    directory: '/media/image'
                    acl: 'private'
    filesystems:
         sylius_image:
            adapter: sylius_image
        monsieurbiz_rich_editor_fixture_file:
            adapter: 'monsieurbiz_rich_editor_fixture_file'
        
monsieurbiz_sylius_richeditor:
    upload_directory: '/media/image'
    image_upload_directory: '/media/image'
    ui_elements:
        sections.hero:
            alias: hero
            title: 'Hero'
            description: 'Hero'
            icon: html5
            tags: [default]
            classes:
                form: App\Form\UiElement\HeroType
            templates:
                admin_render: 'bundles/SyliusAdminBundle/UiElement/hero.html.twig'
                front_render: '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/html.html.twig'

Here' my config\services.yaml:

    env(AWS_ACCESS_KEY_ID): ""
    env(AWS_SECRET_ACCESS_KEY): ""
    env(AWS_BUCKET_NAME): ""
    env(AWS_REGION): ""
    aws_s3_key: "%env(AWS_ACCESS_KEY_ID)%"
    aws_s3_secret: "%env(AWS_SECRET_ACCESS_KEY)%"
    aws_s3_bucket: "%env(AWS_BUCKET_NAME)%"
    aws_s3_region: "%env(AWS_REGION)%"
    aws_s3_version: "2006-03-01"

services:
    # Default configuration for services in *this* file
    monolog.logger.paypal: '@logger'
    acme.aws_s3.client:
        class: Aws\S3\S3Client
        factory: [ Aws\S3\S3Client, 'factory' ]
        arguments:
            -
                version: "%aws_s3_version%"
                region: "%aws_s3_region%"
                credentials: { key: "%aws_s3_key%", secret: "%aws_s3_secret%" }
    acme.imagine.cache.resolver.aws_s3_resolver:
        class: Liip\ImagineBundle\Imagine\Cache\Resolver\AwsS3Resolver
        arguments:
            - "@acme.aws_s3.client"
            - "%aws_s3_bucket%"
            - "private"
            - { Scheme: https }
        tags:
            - { name: "liip_imagine.cache.resolver", resolver: "aws_s3" }

It seems that I have configured my YAML file to upload images to my AWS S3 bucket, but it's not working as expected. Any guidance or assistance on resolving this issue would be greatly appreciated.

Thank you!

When you login without selected "rester connecté" you get disconnected from the back office (without warning you) if you stay too long.

So when I tried to add modification I had this error :

It could be a good thing to have a warning telling you, so that you will not loose your changes.

but is it compatible with sylius 1.8 ? I've extended the app\form\extension\ProductTranslationTypeExtension but the description field becomes a normal text input instead of a textarea with richtext... thanks

When clicking the edit button of a text element, nothing happens. In background, the call to /monsieurbiz_sylius_rich_editor/modal/edit gives a 404:

No route found for "POST /admin/monsieurbiz_sylius_rich_editor/modal/edit" (from "https://[host]/admin/homepages/1/edit")

After some debugging, I discovered that the problem is fixed by removing the condition: "request.isXmlHttpRequest()" line from admin.yaml. Is there any reason to leave it there? Doesn't seem essential to me. The fact that you're relying on a certain header being set by the client also doesn't make it 100% reliable.

Hello guys,

I'm wondering how can we remove any tag (for example, the <br> tag) from the WYSIWYG text element ?
I didn't found an easy way to do this.

Why I'm asking that ?

• I'm getting after saving some <p><br></p> sometimes
• And a <br> at the beginning and end of each content

My version of RichEditor is v2 RC 14

Thanks in advance

JS Error is edit:747 Uncaught ReferenceError: exec is not defined

Error origin in src/Resources/views/Admin/app.html.twig:109

We had this use case where we'd like to reuse some UI elements but wrap them in some container.
I tried to do a simple RicheditorType on a UIelement field but doesn't seems to work.

What do you think ?

Hello, the import fail with recipe with :

Unable to find file "@MonsieurBizSyliusRichEditorPlugin/Resources/config/routing.yaml".

It should be fixed to routing/admin.yaml

It could be great to have at least two levels of sub-directories.

If the image identifier is 5fbaafd37cc2b, we could put it under {rich editor dir}/5f/ba/.

This way we avoid having too many files in the same directory. Which could lead to reaching the maximum of files in a directory on unix systems.

PHPMD is added in #168
But errors are not corrected yet and used || true in Makefile to ignore it.

I always end up with such saved code when pasting text in the pell Wysiwyg editor.

<p><span style="color: rgb(0, 0, 0); font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;">Sed interdum turpis a arcu cursus ultricies. Ut nec augue interdum, tempor tortor id, rhoncus ipsum. Donec viverra, nibh a elementum scelerisque, nisi erat ullamcorper lorem, vel molestie magna purus vel dolor. Praesent vel risus congue, gravida mi eu, consequat ligula. Donec dolor metus, tempor in finibus sed, mattis et felis. Sed convallis erat vitae sapien venenatis sodales. Etiam eu facilisis est. Aenean nec ex vestibulum, convallis lectus vitae, porttitor turpis.</span></p>

I think this should be cleaned up automatically without any user configuration needed as it seems to be the philosophy of this plugin to prevent UI breaking due to bad "client" content management. And it would be a security improvement.

Could be done through JS sanitizing on change events, on paste events (downvote from me) with a lib like https://github.com/apostrophecms/sanitize-html, and/or server-side.

It may be good to override the behavior and allow a specific list of tags/attributes in userland also.

jaredreich/pell#53

Like a class name on each image in the image_collection, etc…

Or should that be implemented in userland?

this change introduce an exception for all rich editor elements d1cf85b#diff-7576ca365f8d9608e42f547cb096b39bcb72c95cbc93756770c78225423e0824R154

sylius 1.10, php 7.4

I'm unable to edit the content (never get focused) of TextElement in Safari

Safari version: 14.1.1

Hi;
When I try to composer update this plugin, during the cache clear I have the following error :

The service "MonsieurBiz\SyliusRichEditorPlugin\Uploader\FixtureFileUploader" has a dependency on a non-existent service "gaufrette.monsieurbiz_rich_editor_fixture_file_filesystem".

I have this problem on any version post 2.0.2.
I'm pretty sure this come from the commit dba0d5a witch added a bind on filesystem to use the one for the fixture.
There is probably a config to add or something like that but there is noting in the upgrade.md that mention it :/

Thanks for your time;
Cheers

Hi there ! Thanks for all this works :)

I have some questions:

• It's seems that this plugin provide features like https://github.com/BitBagCommerce/SyliusCmsPlugin, it's cool to have another plugin to have a different implementation, is it in the plan to provide dynamic routes for the frontend to expose the pages builts with this rich editor ? Or a controller that we can call from template like {{ render(path('monsieur_fait_du_bizbiz_render_page', {'code' : 'homepage''})) }}
• Do you have an idea when the 2.0 will be out ? :)

Hello 😄 , I have a question
Why did you drop Sylius 1.11 compatibility since the SyliusRichEditorPlugin v2.0.9 release ?

I use SyliusRichEditorPlugin v2.0.8 on a headless Sylius 1.11 project. The Admin side works. I didn't test the Shop side (because I'm headless)

Hello

I don't think there's need a pull request for this "bug".

Can you specify return type in the Extension file in depedency directory ?

as this : public function getAlias(): string

Thanks

(idem for your CMS plugin ^^)

Hello,

I get a 414 error from nginx when i try to edit a large text lame.

I guess the full content of the lame in a GET parameter is problem.

As I create or update an element and my edit involves uploading a few images, clicking save will seem to "do nothing".

It's actually waiting for the POST request to succeed before closing the element edit modal.

The "save" button should indicate that the save is actually pending.

I suggest disabling the button and add a indeterminate loader animation.

Hi,
Sorry I'm new with Sylius/php.
I did install your plugin but I don't know how to put it in my product description.
Please classify.

Use the Rich Editor
Update your form type

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](https://github.com/monsieurbiz/SyliusRichEditorPlugin/blob/master/tests/Application/src/Form/Extension/ProductTypeExtension.php).

On the Selection panel, having a "Close" or "Cancel" button on top right could be great.
And we should remove the auto close when we click outside, it's like a productivity killer: I am editing something and by mistake I click no the left black space… damn I have to rewrite everything, it's not good!

I need a field with only the h3 and paragraph levels

I'd like to add a configuration in my form builder to customize the Wysiwyg toolbar.

Example with two quotes in a field:

I noticed that the products & taxon products UI elements are missing from v2 of the plugin. Are there any plans to bring them back? If not, this should probably be documented in the upgrade guide.

This is just an idea to save some time while editing content.

Use case

I created my french content with a stack of lots of different elements and I want to translate it all to english.

I'd like to not re-create the structure by hand.

Solution

1. Click "copy elements to clipboard" in the french content section of the form
   Json get copied to my clipboard

2. Click "import elements from clipboard" in the english form section
   Json is pasted and elements are created

Options

• Ability to paste only the structure (empty elements)
• Ability to paste only structure AND images (just not text)