TextEditorField toolbar is over text

[LaurentMarquet]

Describe the bug
The toolbar is displayed over the text and we can't edit it. It was not the case before.

To Reproduce
Use TextEditorField
EasyAdmin version : 4.29.3, SF 7.4

Additional context

Rendered html

<div class="form-widget">
    <textarea id="Product_description" name="Product[description]" class="ea-text-editor-content d-none form-control" data-number-of-rows="5" data-trix-editor-config="null" data-ea-trix-is-required="true">&lt;div&gt;A story of Papa Câlin with the Backhoe loader and the Flowers, where we discover that new encounters can lead to beautiful friendships.&lt;/div&gt;</textarea>

    <div class="ea-text-editor-wrapper field-text_editor">
        <trix-toolbar id="trix-toolbar-1"><div class="trix-button-row">
      <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
        <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" title="Bold" tabindex="-1">Bold</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" title="Italic" tabindex="-1">Italic</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" title="Strikethrough" tabindex="-1">Strikethrough</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="Link" tabindex="-1">Link</button>
      </span>

      <span class="trix-button-group trix-button-group--block-tools" data-trix-button-group="block-tools">
        <button type="button" class="trix-button trix-button--icon trix-button--icon-heading-1" data-trix-attribute="heading1" title="Heading" tabindex="-1">Heading</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-quote" data-trix-attribute="quote" title="Quote" tabindex="-1">Quote</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-code" data-trix-attribute="code" title="Code" tabindex="-1">Code</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" title="Bullets" tabindex="-1">Bullets</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" title="Numbers" tabindex="-1">Numbers</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-decrease-nesting-level" data-trix-action="decreaseNestingLevel" title="Decrease Level" tabindex="-1" disabled="">Decrease Level</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-increase-nesting-level" data-trix-action="increaseNestingLevel" title="Increase Level" tabindex="-1" disabled="">Increase Level</button>
      </span>

      <span class="trix-button-group trix-button-group--file-tools" data-trix-button-group="file-tools">
        <button type="button" class="trix-button trix-button--icon trix-button--icon-attach" data-trix-action="attachFiles" title="Attach Files" tabindex="-1">Attach Files</button>
      </span>

      <span class="trix-button-group-spacer"></span>

      <span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">
        <button type="button" class="trix-button trix-button--icon trix-button--icon-undo" data-trix-action="undo" data-trix-key="z" title="Undo" tabindex="-1" disabled="">Undo</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" title="Redo" tabindex="-1" disabled="">Redo</button>
      </span>
    </div>

    <div class="trix-dialogs" data-trix-dialogs="">
      <div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href">
        <div class="trix-dialog__link-fields">
          <input type="url" name="href" class="trix-input trix-input--dialog" placeholder="Enter a URL…" aria-label="URL" data-trix-validate-href="" required="" data-trix-input="" disabled="disabled">
          <div class="trix-button-group">
            <input type="button" class="trix-button trix-button--dialog" value="Link" data-trix-method="setAttribute">
            <input type="button" class="trix-button trix-button--dialog" value="Unlink" data-trix-method="removeAttribute">
          </div>
        </div>
      </div>
    </div></trix-toolbar><trix-editor input="Product_description" class="trix-content" contenteditable="" role="textbox" trix-id="1" toolbar="trix-toolbar-1" style="/* min-block-size: 105px; */" connected=""><div><!--block-->A story of Papa Câlin with the Backhoe loader and the Flowers, where we discover that new encounters can lead to beautiful friendships.</div></trix-editor>
    </div>
</div>

I don't seem to have css rules that overrides the ones in EasyAdmin

[LaurentMarquet]

It seems it has to do with CSP config. I use NelmioSecurity, I've disabled unsafe-inline but I still have the error :

Applying inline style violates the following Content Security Policy directive 'style-src 'self' cdnjs.cloudflare.com cdn.jsdelivr.net 'nonce-O26q42FHm8fLaqcAe1H5Kg==' 'unsafe-inline' 'nonce-7dfca92a84efb18af8417f192c94bc8c''. Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list. The action has been blocked.

I don't know much about using nonce, but what I've understood is that if nonce is used it MUST be used everywhere and it seems that /easyadmin/field-text-editor.3e768b9b.js doesn't do it.

[javiereguiluz]

Closing as fixed by #7567. Thanks.