[upstream] [Style] [GHS] empty elements do not work: <br class>, <hr class>, <col class> etc.

Interesting! If true, this would be one more edge case that the CKEditor 5 team would need to add explicit support for upstream. But first, let's verify that it is indeed true by adding test coverage.

Expanding the test coverage that 🐛 [Style] Add tests for inability to apply styles to , , , etc. in CKEditor 5 — and allows applying it to all elements Fixed added.

Confirmed.

I can't find an existing issue for this: https://github.com/search?q=repo%3Ackeditor%2Fckeditor5+style+br+class&t...

Could you please create an issue upstream and provide steps to reproduce? 🙏

Using GHS as a work-around also does not work.

Wim - thanks for verifying. I opened the a bug ticket already over there: https://github.com/ckeditor/ckeditor5/issues/15292

Perfect, thank you!

P.S.: nice cross-post battle over there ⚔️🤣

Throwing in my experience - I have a similar issue with <hr class="top-shadow"> which should be allowed as HRs are listed to allow global attributes as well as documented on MDN here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr.

I'll thumbs up the issue on GitHub as well.

👍, thanks @agbockus!

FYI: in Drupal 10.2.x you will be warned for both <br class> and <hr class> being known to not yet work correctly thanks to [#3347721.

Looking at a related ckeditor issue they offered a work around.

editor.model.schema.extend( 'horizontalLine', { allowAttributes: [ 'hrClass' ] } )

editor.conversion.attributeToAttribute( {
    model: 'hrClass',
    view: 'class'
} );

Could this be implemented in Drupal?

Good find @damondt ! If so, that'd be awesome, I need to provide more than one 'horizontal line' style option in my current site build, and I'm not looking forward to getting round to that task.

#15: Can you create an MR? 🙏 I'd totally be open to that, it's a pragmatic solution 😊

jacobupal → changed the visibility of the branch 3398223-style-br-class to hidden.

@Wim Leers I can take a stab, is the idea that it would get added as a new drupal-ckeditor plugin in here?
web/core/modules/ckeditor5/js/ckeditor5_plugins/

(aka here: https://git.drupalcode.org/project/drupal/-/tree/11.x/core/modules/ckedi...)

@alison Yes, that's right!

Pushed progress to 3398223-support-hr-tag-classes, not yet fully functional. Focusing on hr tag first.

The approach described in the ckeditor issue queue when implimented with drupal's existing ckeditor methodology looks like:
- Add support for an "hrClass" attribute in the dckeditor data model in ckeditor5.ckeditor5.yml
- Have drupal allow classes for hr tabs in ckeditor5.ckeditor5.yml
- Create a DrupalHorizontalLine plugin similar to the DrupalEmphasis plugin except it runs attributeToAttribute on init()

Running into a js warning currently "Failed to load horizontalLine - HorizontalLine", but I believe the approach is solid, taking the recommendation from the ckeditor community and applying it with Drupal's ckeditor methodology.

3398223-support-hr-tag-classes works perfectly with hr tag. I'm trying to do the same thing with br tag, but it cannot implement adding classes to br tag. I tried 2 ways:
1. Install https://www.drupal.org/project/ckeditor_breaktag → , add support for an "brClass" similar to "hrClass"
2. Add allow for br tag, following https://ckeditor.com/docs/ckeditor5/latest/features/html/general-html-su..., something like:

    config:
      htmlSupport:
        allow:
           -
            name: 'br'
            attributes: true

But no results yet ! :(

i tried the following, and it seemed to work for the class attribute for the br tag

editor.model.schema.extend( 'softBreak', { allowAttributes: [ 'brClass' ] } )
editor.conversion.attributeToAttribute( {
        model: 'brClass',
        view: 'class'
      } );

(I created a **draft** merge request, just to make it easier to grab + try out a patch of the work so far.)

I applied these changes: https://git.drupalcode.org/project/drupal/-/merge_requests/7309/diffs

Are those the correct changes to try out? I did that, cleared cache, and tried to add hr.special|Special HR to my Styles list, without success. (I also couldn't add it to "Source Editing".) I tried it on a "Full HTML" text format, which doesn't have any HTML tag limits, idk if that's relevant?

(I think I'm probably not using this the way it's meant to be used, but, I'm not sure how to do it.)

Thank you!