TextEditorField / TrixEditor performance issue with many editors

[dwd-akira]

I encountered a major frontend performance issue when using many TextEditorField instances on the same EasyAdmin page, especially inside CollectionField.

Problem :

Each TextEditorField immediately instantiates a full Trix editor on page load:

hidden textarea
trix-editor
toolbar
event listeners
undo/redo history
rich DOM/contenteditable handling

With many editors on the page (20+), the browser becomes very heavy when the user starts typing.

Symptoms :

The issue is entirely frontend-side:

typing latency starts immediately after page load
the more editors and content there are, the worse it becomes

The biggest performance hit seems related to:

multiple active contenteditable areas
Trix undo/redo history management
many simultaneously mounted editors

What significantly improved performance :

I implemented a lazy-loading approach for TextEditorField:

page load → render lightweight HTML preview only
focus/click → dynamically create trix-editor
blur → save content and completely destroy the editor + toolbar

So instead of :

20-30 active Trix instances

There is only :

1 active Trix instance at a time

This dramatically improved typing responsiveness.

I also disabled undo/redo history handling for the lazy editors, which further improved performance.

Possible improvement for EasyAdmin :

A LazyTextEditorField class (or option mode) for TextEditorField could probably solve this class of performance problems.

This would especially help pages using :

large forms
collections
multiple rich text editors
long HTML content

[dwd-akira]

My code is :

LazyTextEditorField.php

<?php
namespace App\Field;

use EasyCorp\Bundle\EasyAdminBundle\Config\Asset;
use EasyCorp\Bundle\EasyAdminBundle\Contracts\Field\FieldInterface;
use EasyCorp\Bundle\EasyAdminBundle\Field\FieldTrait;
use EasyCorp\Bundle\EasyAdminBundle\Form\Type\TextEditorType;
use Symfony\Contracts\Translation\TranslatableInterface;

class LazyTextEditorField implements FieldInterface
{
    use FieldTrait;

    public const OPTION_NUM_OF_ROWS = 'numOfRows';
    public const OPTION_TRIX_EDITOR_CONFIG = 'trixEditorConfig';
    public const OPTION_IS_LAZY_TRIX = 'isLazyTrix';

    /**
     * @param TranslatableInterface|string|false|null $label
     */
    public static function new(string $propertyName, $label = null): self
    {
        return (new self())
            ->setProperty($propertyName)
            ->setLabel($label)
            ->setTemplateName('crud/field/text_editor')
            ->setFormType(TextEditorType::class)
            ->addCssClass('field-text_editor')
            ->addCssClass('field-lazy-trix')
            ->addCssFiles(Asset::fromEasyAdminAssetPackage('field-text-editor.css')->onlyOnForms())
            ->addJsFiles(Asset::fromEasyAdminAssetPackage('field-text-editor.js')->onlyOnForms())
            ->addCssFiles(Asset::new('/admin/css/lazy-trix-editor.css')->onlyOnForms())
            ->addJsFiles(Asset::new('/admin/js/lazy-trix-editor.js')->onlyOnForms())
            ->setDefaultColumns('col-md-9 col-xxl-7')
            ->setCustomOption(self::OPTION_NUM_OF_ROWS, null)
            ->setCustomOption(self::OPTION_TRIX_EDITOR_CONFIG, null)
            ->setCustomOption(self::OPTION_IS_LAZY_TRIX, true);
    }

    public function setNumOfRows(int $rows): self
    {
        if ($rows < 1) {
            throw new \InvalidArgumentException(sprintf(
                'The argument of the "%s()" method must be 1 or higher (%d given).',
                __METHOD__,
                $rows
            ));
        }

        $this->setCustomOption(self::OPTION_NUM_OF_ROWS, $rows);

        return $this;
    }

    public function setTrixEditorConfig(array $config): self
    {
        $this->setCustomOption(self::OPTION_TRIX_EDITOR_CONFIG, $config);

        return $this;
    }
}

I copied part of the TextEditorField because of the final. I would like to extend and just add :

->addCssFiles(Asset::new('/admin/css/lazy-trix-editor.css')->onlyOnForms())
->addJsFiles(Asset::new('/admin/js/lazy-trix-editor.js')->onlyOnForms())
->setCustomOption(self::OPTION_IS_LAZY_TRIX, true)

form_theme.html.twig

{% block ea_text_editor_widget %}
    {% set ea_field = form.vars.ea_crud_form.ea_field ?? null %}
    {% set is_lazy_trix = ea_field and ea_field.customOptions.get('isLazyTrix')|default(false) %}

    {% if is_lazy_trix %}
        {% set rows = ea_field.customOptions.get('numOfRows') %}
        {% set trix_config = ea_field.customOptions.get('trixEditorConfig') %}
        <div
            class="ea-text-editor-wrapper field-text_editor lazy-trix-wrapper field-lazy-trix"
            {% if trix_config %}
                data-trix-config="{{ trix_config|json_encode|e('html_attr') }}"
            {% endif %}
        >
            <textarea
                {{ block('widget_attributes') }}
                class="lazy-trix-textarea d-none"
                {% if rows is not null %}
                    rows="{{ rows }}"
                {% endif %}
            >{{ value }}</textarea>

            <div
                class="lazy-trix-preview trix-content form-control"
                tabindex="0"
                {% if rows is not null %}
                    style="min-height: calc({{ rows }} * 1.5rem);"
                {% endif %}
            >{{ value|raw }}</div>
        </div>
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock %}

lazy-trix-editor.js

(function () {
    'use strict';

    function getEditorHeight(textarea) {
        const rows = parseInt(textarea.getAttribute('rows') || '10', 10);
        return (rows * 1.5) + 'rem';
    }

    function removeTrixEditor(wrapper) {
        const textarea = wrapper.querySelector('.lazy-trix-textarea');
        const preview = wrapper.querySelector('.lazy-trix-preview');
        const editor = wrapper.querySelector('trix-editor');

        if (!textarea || !preview || !editor) {
            return;
        }

        textarea.value = editor.innerHTML;

        textarea.dispatchEvent(new Event('input', { bubbles: true }));
        textarea.dispatchEvent(new Event('change', { bubbles: true }));

        preview.innerHTML = textarea.value;
        preview.style.display = '';

        if (editor.toolbarElement) {
            editor.toolbarElement.remove();
        }

        const toolbarId = editor.getAttribute('toolbar');
        if (toolbarId) {
            const toolbar = document.getElementById(toolbarId);
            if (toolbar) {
                toolbar.remove();
            }
        }

        editor.remove();
    }

    function getTrixConfig(wrapper) {
        try {
            return JSON.parse(wrapper.dataset.trixConfig || '{}');
        } catch (e) {
            return {};
        }
    }

    function disableTrixHistory(editor) {
        if (!editor.editor || !editor.editor.undoManager) {
            return;
        }

        const undoManager = editor.editor.undoManager;

        undoManager.undoEntries = [];
        undoManager.redoEntries = [];

        undoManager.recordUndoEntry = function () {};
        undoManager.undo = function () {};
        undoManager.redo = function () {};
    }

    function bindLazyTrix(wrapper) {
        if (wrapper.dataset.lazyTrixBound === '1') {
            return;
        }

        wrapper.dataset.lazyTrixBound = '1';

        wrapper.addEventListener('focusin', function () {
            const textarea = wrapper.querySelector('.lazy-trix-textarea');
            const preview = wrapper.querySelector('.lazy-trix-preview');

            if (!textarea || !preview) {
                return;
            }

            if (wrapper.querySelector('trix-editor')) {
                return;
            }

            preview.style.display = 'none';

            const editor = document.createElement('trix-editor');
            editor.setAttribute('input', textarea.id);
            editor.classList.add('trix-content');            

            const height = getEditorHeight(textarea);
            editor.style.minHeight = height;
            editor.style.height = height;
            editor.style.overflowY = 'auto';

            preview.after(editor);

            editor.addEventListener('trix-initialize', function () {
                setTimeout(function () {
                    disableTrixHistory(editor);
                }, 0);
            });

            requestAnimationFrame(function () {
                editor.focus();
            });
        });

        wrapper.addEventListener('focusout', function (event) {
            if (wrapper.contains(event.relatedTarget)) {
                return;
            }

            removeTrixEditor(wrapper);
        });
    }

    function initLazyTrixEditors(context) {
        context = context || document;

        context
            .querySelectorAll('.lazy-trix-wrapper')
            .forEach(bindLazyTrix);
    }

    document.addEventListener('DOMContentLoaded', function () {
        initLazyTrixEditors(document);
    });

    document.addEventListener('ea.collection.item-added', function (event) {
        if (event.detail && event.detail.newElement) {
            initLazyTrixEditors(event.detail.newElement);
        }
    });

    window.initLazyTrixEditors = initLazyTrixEditors;
})();

lazy-trix-editor.css

.lazy-trix-preview {
    cursor: text;
    overflow-y: auto;
    overflow-x: hidden;
}

.lazy-trix-preview.trix-content {
    font-size: 14px;
    line-height: 1.35;
}

.lazy-trix-preview.trix-content p,
.lazy-trix-preview.trix-content div {
    margin: 0;
}

.lazy-trix-preview.trix-content ul,
.lazy-trix-preview.trix-content ol {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 1.5rem;
    margin-left: 0;
}

.lazy-trix-preview.trix-content li {
    margin: 0;
}

.lazy-trix-preview.trix-content h1,
.lazy-trix-preview.trix-content h2,
.lazy-trix-preview.trix-content h3,
.lazy-trix-preview.trix-content h4 {
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}

.lazy-trix-wrapper .lazy-trix-preview.form-control {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.lazy-trix-wrapper trix-toolbar [data-trix-action="undo"],
.lazy-trix-wrapper trix-toolbar [data-trix-action="redo"] {
    display: none !important;
}

.lazy-trix-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.lazy-trix-wrapper trix-editor,
.lazy-trix-wrapper trix-toolbar,
.lazy-trix-wrapper .lazy-trix-preview {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.lazy-trix-wrapper trix-toolbar {
    overflow-x: auto;
}

.lazy-trix-wrapper trix-editor {
    display: block;
}

.field-lazy-trix .form-widget {
    min-width: 0;
}

There's a real problem when there are many instances of the Trix editor. It's not perfect but this code can be reduce the latences, my users say the difference is night and day.