Problem/Motivation

Bold and italic formatting are not applied in summary.

Steps to reproduce

  1. Create details element
  2. Edit text in summary element
  3. Apply italic or bold
  4. See that the styles do not apply, also in source they are not present

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

anruether created an issue. See original summary.

amykhailova’s picture

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?

jacobupal’s picture

[deleted my earlier suggestion]

jacobupal’s picture

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.

mandclu’s picture

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.

maursilveira’s picture

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.

maursilveira’s picture

Version: 2.0.3 » 2.x-dev
Status: Active » Needs review
StatusFileSize
new12.08 KB

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.

roshanibhangale’s picture

StatusFileSize
new161.28 KB

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

roshanibhangale’s picture

Status: Needs review » Reviewed & tested by the community

liam morland made their first commit to this issue’s fork.

liam morland’s picture

Status: Reviewed & tested by the community » Fixed

Thanks!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

liam morland’s picture

Version: 2.x-dev » 2.1.x-dev

Status: Fixed » Closed (fixed)

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