Heading with multiple classes in view object causes unexpected behavior

[jelle360]

Description

I would like to add multiple classes to a heading for styling in the front-end. When I configure this in custom config options and try to use this in the CKEditor field, a border appears in the text field around the heading. After saving the entry, the text will be displayed as if it was saved as a paragraph. When rendering this in the front-end, the classes that were defined in the custom config options are all present. This happens when the classes are defined as a string with spaces: 'text text--bold text--big', but also if they are defined as an array: ['text', 'text--bold', 'text--big']. This is the complete custom config that results in this issue:

return {
  heading: {
    options: [
      {
        model: 'heading2',
        view: 'h2',
        title: 'Title',
        class: 'ck-heading_heading2',
        view: {
          name: 'h2',
          classes: 'text--bold text text--big'
        },
      },
      {
        model: 'paragraph',
        title: 'Paragraph',
        class: 'ck-heading_paragraph',
      }
    ],
  },
  list: {
    properties: {
      styles: false,
    }
  },
  link: {
    decorators: {
      openInNewTab: {
        mode: 'manual',
        label: 'Open in a new tab',
        attributes: {
          target: '_blank',
          rel: 'noopener noreferrer'
        }
      },
    },
    defaultProtocol: 'https://'
  }
}

Steps to reproduce

1. Create a CKEditor config with custom config options.
2. In the options of a heading, add multiple classes to the view object.
3. After saving the configuration, select the heading with multiple classes and notice the border that appears around the text.
4. After saving the entry, the chosen heading appears to not be saved. The text looks like a paragraph and when selected, the heading dropdown displays 'paragraph' instead of the chosen heading. When rendering this text in the front-end however, the multiple classes that were defined in the custom config options are present.

Additional info

• Craft version: Craft Pro 5.4.6
• PHP version: 8.2.23
• Database driver & version: MySQL 8.0.19
• Plugins & versions:
  • CKEditor 4.2.0
  • Retour 5.0.3
  • SendGrid 3.0.0
  • Sentry Logger 5.0.1
  • SEOmatic 5.1.4
  • SEOmatic 3.5.0
  • Vite 5.0.1

After selecting the heading:

After saving the entry:

[i-just]

Hi, thanks for getting in touch!

You need 2 adjustments to your config:

• The view classes should be specified as an array.
• You have the view attribute specified twice - you should only have one.

It’s also worth mentioning the converterPriority: 'high' option. It might be useful if you would like to use both the standard and your own version of h2. This option will ensure that your h2 is converted before the standard h2.

I hope this helps!

I’ll close this now, but feel free to reach out if you run into any further issues.