Bold and italic formatting are not applied in summary

Facing the same issue, all elements except spans are being stripped out in summary and span inside span is being stripped out too. Any ideas?

Span-level styles do work within the element, so until this is solved, you can use them to apply bold and italic styling to text within summaries. This is a workaround though, not a permanent solution, which only effects the appearance of the text, not the semantics.

1. add a 'bold' and 'italic' style to the Styles config in the CKEditor settings for the Text Format you are using
2. use those styles within the element
3. apply the bold and italic styling you need with CSS

Example styles:

span.force-bold|Force Bold
span.force-italic|Force Italic

Example CSS:

span.force-bold{font-weight:bold!important}
span.force-italic{font-style:italic!important}

!important; is usually not recommended, but personally I think it helps in later identifying which css rules which were hacks that need removing in future.

Actually. Ignore everything I said above. The method I wrote works exactly the same as using 'Italic' and 'Bold' buttons.

Neither button (for me) will apply to selected text, but both of them do create an empty <strong> or <em> element at the end of the summary. This is removed if you switch to source view. But if you click the 'Bold' icon and start typing right away you do get some bold text at the end of the summary.

Incidentally keyboard shortcuts Ctrl+i and Ctrl+b do both work as expected.

I can also verify the problem. In fact, the CKEditor4 version of this plugin explicitly allowed for media and images inside the summary, since the HTML spec for the summary element allows for any phrasing content (or one element of heading content, but with accessibility problems).

In the conversion of the plugin to work with CKEditor5, I missed the fact that the allowedContent configuration option was dropped from CKEditor5. It sounds like the way to make this work is by creating a plugin that will extend the editor's General HTML support. There's more information available in the CKE documentation.

Hello all,

Has anybody found a solution for this? Having the same issue with some CKEditor plugins that don't really have keyboard shortcuts, such as font colours provided by CKEditor 5 Plugin Pack → .

I'm wondering if it's possible to apply the same structure/configuration from the ".details-wrapper" to the summary, since styling and functionalities provided by other CKEditor plugins work correctly on text within the content wrapper.

Hello,

After some investigation and attempts, I found out that the blur event in the function _addEventListeners() in the file js/ckeditor5_plugins/detail/src/detailediting.js is replacing the whole text in the summary with it own on each blur event, which happens when we click on any format buttons in CKEditor (e.g. Italic). This is causing the removal of the text selection, meaning the format won't be applied because there is no text selected anymore. This is caused by a functionality to remove (technically, it's replacing it with an empty string) all zero-width spaces from the summary, which happens on each blur event, no matter if there's any occurrence of that character in the summary or not.

I added an if statement to make sure the replacement only happens if a ZWSP is found in the summary. This will cause the formatting not being added in the very first attempt, when the ZWSP is removed, but it will work after that (unless a new ZWSP is added). I acknowledge this will cause this glitch when a ZWSP is added, but that seems to be a very edge case. This solution can definitely be improved, but I believe, for now, this is a quite decent fix to resolve this issue for the vast majority of the situations.

I created a MR with the fix, and I'm also uploading a patch file in case someone needs it.

Please let me know if you have any questions. Thank you.

Hi
I have tested issue on Drupal 2.x-dev

Testing steps:

• Steps to reproduce
• Create details element
• Edit text in summary element
• Apply italic or bold
• Observe that the Bold and Italic styles are applied.

After applied MR, the Help link is redirecting to the help page correctly.

Attaching screenshot

Moving to RTBC+1