Add formatter for processed riched-text

Created on 7 April 2025, 9 days ago

Motivation

We want to provide a dedicated CE-field formatter that nicely processes a ckeditor/filtered-richt text into a proper tree of custom elements.

In particular, we need to support the use case of Drupal media or Entity embeds nicely. That means the referenced media/entity reference needs to be rendered via the CE-entity-processing into a custom element object.

Thus we want a resulting custom element tree like this:

<div>
   <drupal-markup> .. all the markup before first embed </drupal-markup>
   <drupal-media image-src="..." > .... nested props and slots as configured for it  </drupal-media>
   <drupal-markup> some more markup </a>
</div>

Next, we next the special challenge of handling wrapping html elements properly, since drupal-media can be contained in tables or other elements.

Proposed resolution

With wrapping markup the returned tree could look like this

<div>
   <drupal-markup> .. all the markup before first embed </drupal-markup>
   <drupal-ce-markup prefix="<a href>" suffix="</a>">          
      <drupal-media ... - render it and produce drupal-media custom-element </drupal-media>
      <drupal-media ... - render it and produce drupal-media custom-element </drupal-media>
   </drupal-ce-markup>
   <drupal-markup>
   <drupal-ce-markup prefix="<a href>" suffix="</a>">          
      <drupal-media ... - render it and produce drupal-media custom-element </drupal-media>
   </drupal-ce-markup>   
   <drupal-markup>
</div>
📌 Task
Status

Needs work

Version

3.0

Component

Code

Created by

🇦🇹Austria fago Vienna

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @fago
  • 🇦🇹Austria fago Vienna

    Turns out we cannot handle the prefix/suffix proposal with Vue. So we had to adapt the concept and invent a "drupal-ce-container" component to handle vue-processing difficulties.

Production build 0.71.5 2024