Richtext custom toolbar per field + custom config per field

[didoda]

This provides a way to personalize richtext UI per single field.

Use UI.richeditor.{field}.config to add configuration values to tinymce.init.

Use UI.richeditor.{field}.toolbar to customize toolbar.

Example:

'UI' => [
    'richeditor' => [
        'title' => [
            'config' => [
                'forced_root_block' => 'div',
                'forced_root_block_attrs' => ['class' => 'titleContainer'],
            ],
            'toolbar' => [
                'italic',
                'subscript',
                'superscript',
            ],
        ],
        'description' => [
            'config' => [
                'forced_root_block' => 'div',
                'forced_root_block_attrs' => ['class' => 'descriptionContainer'],
            ],
            'toolbar' => [
                'bold',
                'italic',
                'subscript',
                'superscript',
                'link',
                'unlink',
                'code',
            ],
        ],
    ],
],

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.65%. Comparing base (62e2b3c) to head (4d1329c).
Report is 13 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##             master    #1202   +/-   ##
=========================================
  Coverage     99.65%   99.65%           
- Complexity     1326     1330    +4     
=========================================
  Files            98       98           
  Lines          5205     5218   +13     
=========================================
+ Hits           5187     5200   +13     
  Misses           18       18           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

---

🚨 Try these New Features:

• Flaky Tests Detection - Detect and resolve failed and flaky tests
• JS Bundle Analysis - Avoid shipping oversized bundles

[manuelzane]

metterei la textarea del titolo più piccola, con altezza di 132px per differenziarla meglio dalla description:

un dubbio che ho: quel DIV che viene mostrato in basso nell'editor, non viene poi salvato nell'html del dato, giusto?

[didoda]

metterei la textarea del titolo più piccola, con altezza di 132px per differenziarla meglio dalla description:

un dubbio che ho: quel DIV che viene mostrato in basso nell'editor, non viene poi salvato nell'html del dato, giusto?

il <div> viene salvato, e non possiamo farne a meno: ci deve essere un elemento dom contenitore, fa parte del funzionamento di tinymce. Se vedi la descrizione della PR, ci sono delle configurazioni per "pilotare" questa parte:

'forced_root_block' => 'div',
'forced_root_block_attrs' => ['class' => 'titleContainer'],

Teoricamente, per il title, si potrebbe impostare:

'forced_root_block' => 'h1',

[manuelzane]

@didoda a questo punto metterei qualcosa di non semantico perchè non sappiamo come può essere utilizzato nel frontend. Quindi meglio un div o forse meglio ancora uno span e magari poi se ne può occupare il frontend se ripulire o meno quel container? oppure possiamo tenerci lo span che non è un problema?

[didoda]

@didoda a questo punto metterei qualcosa di non semantico perchè non sappiamo come può essere utilizzato nel frontend. Quindi meglio un div o forse meglio ancora uno span e magari poi se ne può occupare il frontend se ripulire o meno quel container? oppure possiamo tenerci lo span che non è un problema?

ok per lo span. Comunque possiamo decidere di cambiare, in ogni momento: la configurazione non è nel codice di BEM, ma sarà in config/app_local.php del plugin zebra.