CKEditor in CollectionType - values clear themselves when new record added

[TomaszFilipek]

Environment

Sonata packages

show

sonata-project/admin-bundle              4.21.1 4.21.1 The missing Symfony Admin Generator
sonata-project/block-bundle              4.19.0 4.19.0 Symfony SonataBlockBundle
sonata-project/cache                     2.2.0  2.2.0  Cache library
Package sonata-project/cache is abandoned, you should avoid using it. No replacement was suggested.
sonata-project/cache-bundle              3.4.0  3.4.0  This bundle provides caching services
Package sonata-project/cache-bundle is abandoned, you should avoid using it. No replacement was suggested.
sonata-project/doctrine-extensions       1.18.1 2.0.1  Doctrine2 behavioral extensions
sonata-project/doctrine-orm-admin-bundle 4.9.0  4.9.0  Integrate Doctrine ORM into the SonataAdminBundle
sonata-project/exporter                  3.0.0  3.0.0  Lightweight Exporter library
sonata-project/form-extensions           1.18.0 1.18.0 Symfony form extensions
sonata-project/formatter-bundle          5.0.1  5.0.1  Symfony SonataFormatterBundle
sonata-project/intl-bundle               2.14.1 3.0.2  Symfony SonataIntlBundle
sonata-project/media-bundle              4.5.1  4.5.1  Symfony SonataMediaBundle
sonata-project/translation-bundle        3.1.0  3.1.0  SonataTranslationBundle
sonata-project/twig-extensions           1.12.0 2.0.0  Sonata twig extensions

Symfony packages

show

symfony/amqp-messenger             v5.4.15 v5.4.15 Symfony AMQP extension Messenger Bridge
symfony/apache-pack                v1.0.1  v1.0.1  A pack for Apache support in Symfony
symfony/asset                      v5.4.13 v6.2.0  Manages URL generation and versioning of web assets such as CSS stylesheets, JavaScript files and image files
symfony/browser-kit                v5.4.11 v6.2.0  Simulates the behavior of a web browser, allowing you to make requests, click on links and submit forms programmatically
symfony/cache                      v5.4.15 v6.2.0  Provides extended PSR-6, PSR-16 (and tags) implementations
symfony/cache-contracts            v2.5.2  v3.2.0  Generic abstractions related to caching
symfony/config                     v5.4.11 v6.2.0  Helps you find, load, combine, autofill and validate configuration values of any kind
symfony/console                    v5.4.16 v6.2.1  Eases the creation of beautiful and testable command line interfaces
symfony/css-selector               v5.4.11 v6.2.0  Converts CSS selectors to XPath expressions
symfony/debug-bundle               v5.4.11 v6.2.1  Provides a tight integration of the Symfony VarDumper component and the ServerLogCommand from MonologBridge into the Symfony full-stack framework
symfony/dependency-injection       v5.4.16 v6.2.1  Allows you to standardize and centralize the way objects are constructed in your application
symfony/deprecation-contracts      v3.2.0  v3.2.0  A generic function and convention to trigger deprecation notices
symfony/doctrine-bridge            v5.4.16 v6.2.0  Provides integration for Doctrine with various Symfony components
symfony/doctrine-messenger         v5.4.16 v6.2.0  Symfony Doctrine Messenger Bridge
symfony/dom-crawler                v5.4.15 v6.2.0  Eases DOM navigation for HTML and XML documents
symfony/dotenv                     v5.4.5  v6.2.0  Registers environment variables from a .env file
symfony/error-handler              v5.4.15 v6.2.1  Provides tools to manage errors and ease debugging PHP code
symfony/event-dispatcher           v5.4.9  v6.2.0  Provides tools that allow your application components to communicate with each other by dispatching events and listening to them
symfony/event-dispatcher-contracts v3.2.0  v3.2.0  Generic abstractions related to dispatching event
symfony/expression-language        v5.4.14 v6.2.0  Provides an engine that can compile and evaluate expressions
symfony/filesystem                 v5.4.13 v6.2.0  Provides basic utilities for the filesystem
symfony/finder                     v5.4.11 v6.2.0  Finds files and directories via an intuitive fluent interface
symfony/flex                       v2.2.3  v2.2.3  Composer plugin for Symfony
symfony/form                       v5.4.16 v6.2.0  Allows to easily create, process and reuse HTML forms
symfony/framework-bundle           v5.4.16 v6.2.1  Provides a tight integration between Symfony components and the Symfony full-stack framework
symfony/http-client                v5.4.16 v6.2.0  Provides powerful methods to fetch HTTP resources synchronously or asynchronously
symfony/http-client-contracts      v2.5.2  v3.1.1  Generic abstractions related to HTTP clients
symfony/http-foundation            v5.4.16 v6.2.1  Defines an object-oriented layer for the HTTP specification
symfony/http-kernel                v5.4.16 v6.2.1  Provides a structured process for converting a Request into a Response
symfony/intl                       v5.4.15 v6.2.0  Provides a PHP replacement layer for the C intl extension that includes additional data from the ICU library
symfony/mailer                     v5.4.16 v6.2.1  Helps sending emails
symfony/maker-bundle               v1.48.0 v1.48.0 Symfony Maker helps you create empty commands, controllers, form classes, tests and more so you can forget about writing boilerplate code.
symfony/messenger                  v5.4.16 v6.2.0  Helps applications send and receive messages to/from other applications or via message queues
symfony/mime                       v5.4.16 v6.2.0  Allows manipulating MIME messages
symfony/monolog-bridge             v5.4.10 v6.2.0  Provides integration for Monolog with various Symfony components
symfony/monolog-bundle             v3.8.0  v3.8.0  Symfony MonologBundle
symfony/notifier                   v5.4.8  v6.2.0  Sends notifications via one or more channels (email, SMS, ...)
symfony/options-resolver           v5.4.11 v6.2.0  Provides an improved replacement for the array_replace PHP function
symfony/password-hasher            v5.4.11 v6.2.0  Provides password hashing utilities
symfony/phpunit-bridge             v6.2.0  v6.2.0  Provides utilities for PHPUnit, especially user deprecation notices management
symfony/polyfill-intl-grapheme     v1.27.0 v1.27.0 Symfony polyfill for intl's grapheme_* functions
symfony/polyfill-intl-icu          v1.27.0 v1.27.0 Symfony polyfill for intl's ICU-related data and classes
symfony/polyfill-intl-idn          v1.27.0 v1.27.0 Symfony polyfill for intl's idn_to_ascii and idn_to_utf8 functions
symfony/polyfill-intl-normalizer   v1.27.0 v1.27.0 Symfony polyfill for intl's Normalizer class and related functions
symfony/polyfill-mbstring          v1.27.0 v1.27.0 Symfony polyfill for the Mbstring extension
symfony/polyfill-php56             v1.20.0 v1.20.0 Symfony polyfill backporting some PHP 5.6+ features to lower PHP versions
symfony/polyfill-php73             v1.27.0 v1.27.0 Symfony polyfill backporting some PHP 7.3+ features to lower PHP versions
symfony/polyfill-php80             v1.27.0 v1.27.0 Symfony polyfill backporting some PHP 8.0+ features to lower PHP versions
symfony/polyfill-php81             v1.27.0 v1.27.0 Symfony polyfill backporting some PHP 8.1+ features to lower PHP versions
symfony/process                    v5.4.11 v6.2.0  Executes commands in sub-processes
symfony/property-access            v5.4.15 v6.2.0  Provides functions to read and write from/to an object or array using a simple string notation
symfony/property-info              v5.4.16 v6.2.0  Extracts information about PHP class' properties using metadata of popular sources
symfony/proxy-manager-bridge       v5.4.6  v6.2.0  Provides integration for ProxyManager with various Symfony components
symfony/redis-messenger            v5.4.15 v5.4.15 Symfony Redis extension Messenger Bridge
symfony/routing                    v5.4.15 v6.2.0  Maps an HTTP request to a set of configuration variables
symfony/runtime                    v5.4.11 v6.2.0  Enables decoupling PHP applications from global state
symfony/security-acl               v3.3.2  v3.3.2  Symfony Security Component - ACL (Access Control List)
symfony/security-bundle            v5.4.11 v6.2.0  Provides a tight integration of the Security component into the Symfony full-stack framework
symfony/security-core              v5.4.15 v6.2.0  Symfony Security Component - Core Library
symfony/security-csrf              v5.4.11 v6.2.0  Symfony Security Component - CSRF Library
symfony/security-guard             v5.4.13 v5.4.13 Symfony Security Component - Guard
symfony/security-http              v5.4.15 v6.2.0  Symfony Security Component - HTTP Integration
symfony/serializer                 v5.4.15 v6.2.1  Handles serializing and deserializing data structures, including object graphs, into array structures or other formats like XML and JSON.
symfony/service-contracts          v2.5.2  v3.1.1  Generic abstractions related to writing services
symfony/stopwatch                  v5.4.13 v6.2.0  Provides a way to profile code
symfony/string                     v5.4.15 v6.2.0  Provides an object-oriented API to strings and deals with bytes, UTF-8 code points and grapheme clusters in a unified way
symfony/swiftmailer-bundle         v3.5.4  v3.5.4  Symfony SwiftmailerBundle
Package symfony/swiftmailer-bundle is abandoned, you should avoid using it. Use symfony/mailer instead.
symfony/templating                 v5.4.11 v6.2.0  Provides all the tools needed to build any kind of template system
symfony/translation                v5.4.14 v6.2.0  Provides tools to internationalize your application
symfony/translation-contracts      v2.5.2  v3.2.0  Generic abstractions related to translation
symfony/twig-bridge                v5.4.16 v6.2.1  Provides integration for Twig with various Symfony components
symfony/twig-bundle                v5.4.8  v6.2.0  Provides a tight integration of Twig into the Symfony full-stack framework
symfony/validator                  v5.4.15 v6.2.0  Provides tools to validate values
symfony/var-dumper                 v5.4.14 v6.2.1  Provides mechanisms for walking through any arbitrary PHP variable
symfony/var-exporter               v5.4.10 v6.2.1  Allows exporting any serializable PHP data structure to plain PHP code
symfony/web-link                   v5.4.3  v6.2.0  Manages links between resources
symfony/web-profiler-bundle        v5.4.14 v6.2.1  Provides a development tool that gives detailed information about the execution of any request
symfony/webpack-encore-bundle      v1.16.0 v1.16.0 Integration with your Symfony app & Webpack Encore!
symfony/yaml                       v5.4.16 v6.2.0  Loads and dumps YAML files

PHP version

PHP 8.1.12 (cli) (built: Oct 28 2022 17:39:37) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.12, Copyright (c) Zend Technologies
    with Zend OPcache v8.1.12, Copyright (c), by Zend Technologies
    with Xdebug v3.1.5, Copyright (c) 2002-2022, by Derick Rethans

Subject

I have SonataAdmin Entity containing collection with two fields type CKEditor.
When I click "add" to add a new record, ckeditors fields in the previous records are cleared.

Entity admin class:

![bug](https://user-images.githubusercontent.com/16276649/208061776-f465f7ce-0db0-49d4-b734-a0516bc43113.gif)
    ->tab('General')
        ->with('Information')
            ->add('label', null, ['label' => 'Label'])
            ->add('title', null, ['label' => 'Section name'])
        ->end()
    ->end();
    ->tab('Elements')
        ->with('Elements')
            ->add('items', 
                    CollectionType::class, 
                    [   'by_reference' => true,
                        'label' => 'Elements',
                        'required' => false
                    ], 
                    [
                        'edit' => 'inline',
                        'inline' => 'table',
                        'sortable' => 'position',
                    ]
                )
        ->end()
    ->end();

Item admin class:

 protected function configureFormFields(FormMapper $formMapper): void
{
    $formMapper
        ->tab('General')
            ->with('General', ['class' => 'col-md-8'])
                ->add('title', TextType::class, ['label' => 'Title'])
                ->add('leftSideContent', 
                        CKEditorType::class,
                        [   'label' => 'Left side content',
                            'config' => ['toolbar' => 'extended_basic_with_media']
                        ]
                     )
                ->add('rightSideContent', 
                        CKEditorType::class, 
                        [   'label' => 'Right side content',
                            'config' => ['toolbar' => 'extended_basic_with_media']
                        ]
                     )
                ->add('position', null, ['label' => 'Position'])
            ->end()
        ->end();
}

Actual results

https://i.imgur.com/InDvcVX.gifv

[haivala]

But if you save in between they are not cleared?

[TomaszFilipek]

But if you save in between they are not cleared?

Yes.
The workaround is to save each time before adding next record.
https://imgur.com/gallery/VDT4mA3

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[SharkInABottle]

I tried to pinpoint the issue here, so when the add button is clicked , we have a jquery AjaxSubmit , in the twig script @SonataAdmin/CRUD/Association/edit_one_script.html.twig
Since Ckeditor updates the textarea ( or other input type associated to it) on form submit, we need to force ckeditor to update its linked input element exactly before the ajaxSubmit at line 34.
For exemple, i am using ckeditor 4 , so i may add this code:
if (typeof CKEDITOR !== 'undefined') {
for (var instanceName in CKEDITOR.instances) {
CKEDITOR.instances[instanceName].updateElement();
}
}
but i don't think adding specific javascript of other bundles here is a good idea 🤔
PS: i tested it and the values are preserved when u add new elements.

[FlxRobole]

I can confirm that this issue still exists but it can be resolved with the solution recommended by @SharkInABottle. Thank you for outlining it!

To apply this fix, you will need to copy edit_one_script.html.twig into the templates/bundles/SonataAdminBundle/CRUD/Association folder within your application, and then add the five lines of code from above before calling jQuery(form).ajaxSubmit.

The actual "fix": I recommend Sonata should provide some sort of publish/subscribe mechanism for major javascript events. This way, custom code will stay separated from core code. In the context of this issue it would be sufficient to add:

$(document).trigger("sonata_admin_append_form_element", [form])`

before executing ajaxSubmit. In your app.js, you would then add:

$(document).on("sonata_admin_append_form_element", function(event, form) {
    for (var instanceName in CKEDITOR.instances) {
      CKEDITOR.instances[instanceName].updateElement();
    }
});