Conflict between GeneralHtmlSupport and FontBackgroundColor

[sunesimonsen]

📝 Provide detailed reproduction steps (if any)

On the branch ssimonsen/general-html-support the editor renders the background color for the heading:

But when the BackgroundFontColor plugin is added the background color is no longer rendered:

I tracked the problem do to this line, when removed everything works again.

Minimal reproduction can be found here.

Notice that the table plugin also introduces the bug, as it also makes use of addBackgroundRules.

This bug is currently blocking Zendesk customers from applying background styles.

✔️ Expected result

That the background color is maintained.

❌ Actual result

The background inline style is stripped.

❓ Possible solution

Make addBackgroundRules compatible with the general HTML support plugin.

📃 Other details

• First affected CKEditor version: probably all
• Installed CKEditor plugins: @ckeditor/ckeditor5-basic-styles, @ckeditor/ckeditor5-essentials, @ckeditor/ckeditor5-paragraph, @ckeditor/ckeditor5-html-support, @ckeditor/ckeditor5-font

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[FilipTokarski]

I was able to reproduce it.

The only way to make it work for me, was to change GHS config to:

allow: [
  {
       name: "h1",
       styles: true,
   }
]

This also converted original background property to background-color.

cc @Witoso

[sunesimonsen]

@Witoso the background also conflicts with the table plugin, so maybe this issue should also have the package:table label.

[niegowski]

I was able to reproduce it.

The only way to make it work for me, was to change GHS config to:

allow: [
  {
       name: "h1",
       styles: true,
   }
]

This also converted original background property to background-color.

This would also work with the following GHS config:

allow: [
  {
       name: "h1",
       styles: [ 'background-color' ],
   }
]

The above would properly handle both background: red and background-color: red.

This is happening because the editor (while loading data) parses the styles and normalizes values so that shorthand notations can be handled transparently as longhand notations (background: red => background-color: red). Since we handle only the background-color style then we can't reduce it to the shorthand notation because we do not know if there is no other rule for background that could interfere.

[sunesimonsen]

This is happening because the editor (while loading data) parses the styles and normalizes values so that shorthand notations can be handled transparently as longhand notations (background: red => background-color: red). Since we handle only the background-color style then we can't reduce it to the shorthand notation because we do not know if there is no other rule for background that could interfere.

I just checked, using the following configuration also conflicts:

      htmlSupport: {
        allow: [
          {
            name: "h1",
            styles: ["background-color"],
          },
        ],
      },

[sunesimonsen]

@Witoso do you have any timeline for when this bug will be fixed? The reason why I'm asking is because Zendesk is currently holding back on realizing a new feature because of this bug ☺️

[Witoso]

@niegowski is doing a research right now, as it turned out to be more complex than we anticipated. Should know soon the scope, and then we will decide on the next steps. cc @arkflpc

[sunesimonsen]

🥇 thanks a lot - I'll test it as soon as it have been released.

[sunesimonsen]

The new release seems to have fixed the problem - thank you so much 🥇