Issue #3608801: Make example email templates CKEditor 5 safe (align="center" becomes inheriting text-align:center)

Frank Mablyrequested to merge
issue/orchestra-3608801:3608801-make-example-email into 1.x

Closes #3608801

Problem

The example easy_email templates centered the card with a wrapper cell using the legacy align="center" attribute. When a site editor re-saves the body in CKEditor 5, that attribute becomes an inheriting text-align:center and centres all the content. Centering the table via margin:0 auto doesn't survive either: CKEditor's Table properties plugin owns table alignment and strips the auto left/right margins on save.

Changes

All 7 example templates now center the card with a flexbox wrapper div instead of a table cell with align:

<div style="display:flex;justify-content:center;padding:24px 12px;background:#f4f5f7;">

Because the centering lives on a <div> (not a <table>), the Table plugin leaves it alone and General HTML Support preserves it verbatim, so it round-trips cleanly when editors customise the templates in CKEditor 5. text-align:left on the card table keeps the content left-aligned regardless of inheritance.

  • orchestra_easy_email: orchestra_generic, orchestra_interaction_link, orchestra_task_assigned, orchestra_task_reminder.
  • orchestra_interaction_webform_examples: orchestra_request_changes, orchestra_request_processed, orchestra_request_rejected.

Note

Outlook desktop (Word engine) does not support flexbox, so the card left-aligns there; the content text stays left everywhere. This is an accepted tradeoff: the Outlook-proof alternatives (align attribute / MSO ghost tables) are exactly what CKEditor 5 strips or rewrites, so they cannot coexist with editing the templates in the rich editor. The shipped format: full_html is unchanged; the format choice is site-specific.

Edited by Frank Mably

Merge request reports