[2.1.0] Add Ckeditor5 integration

Created on 13 September 2024, 7 months ago

With UI Patterns 2.0, we cover most of the Drupal Core display builders:

However, one is still missing: Ckeditor5.

There is already a module to use Layout plugins in Ckeditor5: https://www.drupal.org/project/ckeditor_layouts →
However:

it is not working well with UI Patterns yet: 📌 [2.0.0-beta3] Test ComponentLayout with ckeditor_layouts Active
it is not managing layout options (so component props) anyway, so not that useful. See: ✨ Capture all settings used by layouts Active

We can take inspiration from UI Icons → module

Contrib:

A CKEditor5Plugin plugin (related YAML) is exposing a modal route
The modal will use the UI Patterns 2.x form builder. So, both the slots and the props will be set inside the modal.

Preview:

The modal is placing a placeholder (<drupal-icon data-icon-id> in UI Icons) in the Ckeditor virtual DOM with all the component configuration (component id, variant, slots, props)
An HTTP controller is generating the preview using the Render API

Rendering:

A text filter plugin → is catching the place holder and rendering the HTML using the
render API

Configuration:

in the text format configuration page, in the CKEditor 5 plugin settings, we can chose the components we want to expose like that

✨ Feature request

Status

Active

Version

2.0

Component

Code

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.

Comments & Activities

Production build 0.71.5 2024