I’m building a website using symfony 7 and EasyAdmin 4, I’m learning how to use this framework so I don’t get how everything connect together yet.

The problem I’m having is with the library ‘Trumbowig’ and custom fields.
I made it work but it was just a test to see if all needed files where working, now I want to create a custom field to be able to use this feature properly.

I don’t understand how to create the template that will be used in forms.

I’ve read the documentation here, looked at TextEditorField and TextAreaField in EasyAdmin package.

I found that I need a custom class for my field, so I made this TrumbowygEditorField class:

final class TrumbowygEditorField implements FieldInterface
{
    use FieldTrait;

    public const OPTION_MAX_LENGTH = TextField::OPTION_MAX_LENGTH;
    public const OPTION_NUM_OF_ROWS = 'numOfRows';
    public const OPTION_RENDER_AS_HTML = TextField::OPTION_RENDER_AS_HTML;
    public const OPTION_STRIP_TAGS = TextField::OPTION_STRIP_TAGS;
    public const OPTION_TRUMBOWYG_CONFIG = 'trumbowygConfig';

    public static function new(string $propertyName, ?string $label = null): self
    {
        return (new self())
            ->setProperty($propertyName)
            ->setLabel($label)
            // this template is used in 'index' and 'detail' pages
            ->setTemplatePath('admin/field/trumbowyg_editor.html.twig')

            // this is used in 'edit' and 'new' pages to edit the field contents
            ->setFormType(TextareaType::class)
            ->setCustomOption(self::OPTION_TRUMBOWYG_CONFIG, [])
            ->setCustomOption(self::OPTION_MAX_LENGTH, null)
            ->setCustomOption(self::OPTION_NUM_OF_ROWS, 5)
            ->setCustomOption(self::OPTION_RENDER_AS_HTML, false)
            ->setCustomOption(self::OPTION_STRIP_TAGS, false);
    }

And made the template for index and detail :

{% set render_as_html = field.customOptions.get('renderAsHtml') %}
{% if ea.crud.currentAction == 'detail' %}
    <span title="{{ field.value }}">
        {{ render_as_html ? field.formattedValue|raw|nl2br : field.formattedValue|nl2br }}
    </span>
{% else %}
    <span title="{{ field.value }}">
        {{ render_as_html ? field.formattedValue|raw : field.formattedValue|striptags }}
    </span>
{% endif %}

It seems to be working as expected at index page.

Now I’m having trouble to understand how to make the form field, I know that it’s related to this line ->setFormType(TextareaType::class), and I need to find a way to import a css file, some js scripts and execute something like this :

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        $('{{ fieldId }}').trumbowyg();
    });
</script>

But I don’t know how to proceed, do I need to build a custom formType ?
Can you help me please ? Thank you.