Initialize each ckeditor field in collection

[bastien70]

Hello here !

According https://github.com/symfony/ux/issues/606 I can now use CKEditor with Symfony UX Live Components with forms :)

But now I notice a new problem.

When we use collections, if in the collection there is a CKEditor type field, then unfortunately, when we add an item, the CKEditor field will not be initialized.

By example, in my ContractStep4Type, I've :

$builder->add('items', CollectionType::class, [
                'entry_type' => ContractMissionItemType::class,
                'entry_options' => [
                    'label' => false,
                ],
                'allow_add' => true,
                'allow_delete' => true,
                'by_reference' => false,
                'label' => false,
            ]);

And the ContractMissionItemType :

$builder
            ->add('description', CKEditorType::class, [
                'label' => false,
                'attr' => [
                    'class' => 'ckeditor',
                ],
            ]);

In my component, I've :

#[AsLiveComponent('contract_step4', template: 'components/contract/step4.html.twig', csrf: false)]
class StepFourComponent extends AbstractContractStepComponent
{
    use DefaultActionTrait;
    use ComponentWithFormTrait;

    #[LiveAction]
    public function removeItem(#[LiveArg] int $index): void
    {
        if (isset($this->formValues['mission']['items'][$index])) {
            unset($this->formValues['mission']['items'][$index]);
        }
    }

    #[LiveAction]
    public function addItem(): void
    {
        $this->formValues['mission']['items'][] = [];
    }

    public function instantiateForm(): FormInterface
    {
        return $this->createForm(ContractStep4Type::class, $this->contract);
    }

And in live :

https://user-images.githubusercontent.com/53140475/210351831-a419c299-3a65-479d-bd97-5b2c976faf10.mp4

I suppose there would be something to add in the logic of UX-Live-component?

[1ed]

Hi, the javascript that initializes ckeditor probably not run when the new field is added to the dom. when you use a live component, it only creates a diff and merges the dom, but does not run js related to the new state. You should probably refactor the CKEditorType to use a stimulus controller instead of regular javascript, which will notice changes in the dom and run automatically when a new data-controller attribute appears. Or another option would be to use hooks provided by the live component and initialize the fields manually, but I would not recommend this.

[bastien70]

Hello ! Thank you, we will try that, we'll back to tell if we success ;)

[carsonbot]

Thank you for this issue. There has not been a lot of activity here for a while. Has this been resolved?

[carsonbot]

Friendly ping? Should this still be open? I will close if I don't hear anything.

[carsonbot]

Hey,

I didn't hear anything so I'm going to close it. Feel free to comment if this is still relevant, I can always reopen!