Enable Adding Class to Details

Created on 31 October 2023, about 1 year ago
Updated 28 March 2024, 10 months ago

Problem/Motivation

I am attempting to allow class to be added on details from the source editor so content editors can specify different styles of the details. Unfortunately, it does not stay saved. I can put it in the source editor and it will be good as soon as I go back to the WYSIWYG editor, even before I save. I have confirmed that the CKE5 text format/filter does allow details class, so I think it is something unique to this module.

Steps to reproduce

Drupal core 10.1.5

PHP 8.1

CKEditor 5

Change your text filter to allow details class, then create a node with a details element and try to put a class on it.

✨ Feature request
Status

Active

Version

2.1

Component

Code

Created by

πŸ‡¨πŸ‡¦Canada ryanrobinson_wlu

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

Comments & Activities

  • Issue created by @ryanrobinson_wlu
  • πŸ‡¨πŸ‡¦Canada ryanrobinson_wlu

    Our workaround for now: putting the class on a div wrapped around the details. Messy code but it works until this gets resolved.

  • πŸ‡ΊπŸ‡ΈUnited States mlncn Minneapolis, MN, USA

    related need: ability to add a class through a template?

  • πŸ‡ΊπŸ‡ΈUnited States mlncn Minneapolis, MN, USA

    In trying to see what would be needed for this to work, i did some quick hard-coding in /js/ckeditor5_plugins/detail/src/detailediting.js:

        // Convert the <detailSummary> model into an editable <h2> widget.
        conversion.for('editingDowncast').elementToElement({
          model: 'detailSummary',
          view: (modelElement, { writer: viewWriter }) => {
            const summary = viewWriter.createEditableElement('summary', {
              class: 'card-header',
            });
            return toWidgetEditable(summary, viewWriter);
          },
        });
    
        // Convert the <detailWrapper> model into an editable <div> widget.
        conversion.for('editingDowncast').elementToElement({
          model: 'detailWrapper',
          view: (modelElement, { writer: viewWriter }) => {
            const div = viewWriter.createEditableElement('div', {
              class: 'details-wrapper card-body',
            });
            return toWidgetEditable(div, viewWriter);
          },
        });
    

    and those classes do show while editing, but they get stripped by CKEditor. I have tried making changes to allowedContent in /js/plugins/detail/plugin.js but it is not helping. I would like to help contribute an admin UI for setting classes and set up the possibility for content editor added/modified classes, but fighting with CKEditor5 and its lack of documentation for something as basic as "how do i let my plugin allow people to add classes without getting them stripped" really saps my motivation. Kudos to the module developers here! (When my search terms went from 'ckeditor5 plugin "allowedContent" any class' to 'ckeditor5 plugin development' and went through the examples and still no answers, i gave up.)

    (My use case is adding classes for a CSS framework that will always be the same, not an editor setting a class, but the initial steps of wrangling more flexibility out of CKEditor5 are the same.)

Production build 0.71.5 2024