[Style] Warn the user about styles for unsupported elements

The same limitation existed in CKEditor 4: #2642808: [upstream] CKEditor Style for not working because it is an "image" widget → . That's why it was not a blocker for #3222797: Upgrade path from CKEditor 4's StylesCombo to CKEditor 5's Style → .

Note the sibling issue ✨ [PP-1] [upstream] Consider allowing styles for non-HTML5 tags Postponed for CKEditor 5 and ✨ [upstream] Allow CKEditor styles for Postponed for Drupal core's Media module.

It would be helpful if the Styles Plugin could warn users when they attempt to define a style for an tag that this will not be effective.

💯 — this is a great action to take today!

Let's do that here! I'll ask in the upcoming CKEditor 5 meeting later today how we can get a reliable list of elements that the current Style plugin actually supports.

Wim Leers → credited Reinmar → .

Just discussed with @Reinmar & Witek. Witek indicates that list of tags that are supported by Style is actually one of the things their customers are missing in their official docs. So: 2 birds, 1 stone — they'll work on getting us this list soonish so that we can add the necessary validation and ship that to users in 9.5.x and 10.0.x 🤓👍

@Wim-Leers, thanks for your input on this. My comment about warning about the use of an unsupported style tag was really just an aside, and not the main point of the issue I raised. (It did occur to me that perhaps I should not create confusion by mentioning this.) Your change to the title rather shifts attention away from my main concern.

Thanks for pointing out the related issues. It is sad to see that despite 7 years of effort, there are no solutions, only partially successful workarounds. Nobody seems to have given much consideration to customising the image widget so as to include a styles dropdown. I wonder if that's because it is just too difficult?

Wim Leers → credited witeksocha → .

@witeksocha from CKSource investigated this: https://github.com/ckeditor/ckeditor5/issues/13763

I think this should be implemented as validation? OTOH, doing so could cause existing configuration to be treated as invalid, even if in the future it will work, but for now it won't, until the upstream bugs are fixed … tricky 🤔

Could we implement it just as a warning in the UI instead of schema validation that prevents saving?

Yes, but how?

1. A confirmation form if we detect that you added new styles that are known to not work?
2. Or simply always a confirmation form if any of the styles are known to not work?
3. Or something else? 😅

🐛 [Style] Add tests for inability to apply styles to , , , etc. in CKEditor 5 — and allows applying it to all elements Fixed proves that one of the examples in the issue summary now does work: a.special-offer|Special Offer. But img.feature|Featured Image indeed does not yet work (upstream issue: https://github.com/ckeditor/ckeditor5/issues/13778), nor does drupal-media.features|Features media ( #3117172-34: [upstream] Allow CKEditor styles for → ).

So I think this is still relevant.

@lauriii, what do you think about limiting the scope of this issue to <img> and <drupal-media> for now? And perhaps showing a warning message that links to the relevant upstream issue, asking the site builder to go and vote on those issues 🤓

Just my 2 cents but I think any warnings that core can do around ckeditor would be extremely useful.

The proposal seems fine 👍 We can expand the scope of the warning if we discover other use cases that are not compatible.

Just closed 🐛 CKEditor 5 - styles for Images not picking up Active as a duplicate of this. This is clearly becoming increasingly important!

Wim Leers → credited thatipudir → .

Just pushed a test.

Now passing tests 👍

P.S.: please vote on https://github.com/ckeditor/ckeditor5/issues/13778 — that's how they prioritize things: based on demand!

Ran the test-only feature and got

1) Drupal\Tests\ckeditor5\Kernel\ValidatorsTest::test with data set "INVALID: Style plugin configured to add class to plugin-supported tag known to not work with Style … yet" (array(array(array('drupalInsertImage', 'style')), array(array(false), array(array(array('Featured image', '<img class="featured">'), array('Fancy linebreak', '<br class="fancy">'))))), array('Unfortunately, the <code>&lt;...lugin.', 'Unfortunately, the <code>&lt;...lugin.'))
Failed asserting that two arrays are identical.
--- Expected
+++ Actual
@@ @@
-Array &0 (
-    'settings.plugins.ckeditor5_style.styles.0.element' => 'Unfortunately, the <code>&lt;img&gt;

tag is not yet supported by the Style plugin.'
- 'settings.plugins.ckeditor5_style.styles.1.element' => 'Unfortunately, the <br> tag is not yet supported by the Style plugin.'
-)
+Array &0 ()

Tested manually following the steps in the issue summary and am now seeing the warning message.

Think this will be very helpful for many people

lauriii → closed merge request !5364

Committed e8d2c22 and pushed to 11.x. Also cherry-picked to 10.2.x. Thanks!

Automatically closed - issue fixed for 2 weeks with no activity.