[2.1.0] Add Ckeditor5 integration

Open on Drupal.org →

Created on 13 September 2024, 8 months ago

Problem/Motivation

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

ui_patterns_blocks: Block Layout, Layout Builder ....
ui_patterns_layouts: Layout Builder, Field Layout...
ui_patterns_field_formatters: Manage Display, Layout Builder, Views...
ui_patterns_views: Views

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

Proposed resolution

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

https://git.drupalcode.org/project/ui_icons/-/tree/1.0.x/modules/ui_icon...

✨ Feature request

Status

Active

Version

2.0

Component

Code

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.

Sign in to follow issues

Comments & Activities

Issue created by @pdureau
Comment 3 months ago →
🇩🇪Germany Christian.wiedemann
Maybe we can use CKEDitor Block integration https://www.drupal.org/project/ckeditor_insert_blocks →
Comment 3 months ago →
🇫🇷France just_like_good_vibes PARIS
we should test this :)
Comment 18 days ago →
🇬🇧United Kingdom juc1
By the way this doc page https://www.drupal.org/docs/develop/theming-drupal/using-single-director... → says:

UI Patterns (version >=2.0) - Automatically integrates components into Drupal within Layout Builder, CKEditor, Views, Blocks, etc.

So does that mean the doc is misinforming because UI Patterns does not work with CKEditor?
Comment 18 days ago →
🇫🇷France just_like_good_vibes PARIS
Hello juc1, thank you for this kind message ;)
we will soon propose a tiny update to this part of doc, if a small mistake has been made by someone.
we don’t want any misunderstanding, indeed ckeditor integration had been planned for 2.1, and not for 2.0.
Comment 18 days ago →
🇬🇧United Kingdom juc1
@just_like_good_vibes ok thanks.
Comment 18 days ago →
🇫🇷France pdureau Paris
It is like that since the first version of SDC documentation, nearly 2 years before the release of UI Patterns 2: https://www.drupal.org/node/3352957/revisions/13043240/view → 🙃

The scope of the future 2.0 and 2.1 versions was far from being defined at this time. I will fix this.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024