The Editor's HTML markup inline CSS styles do not support semicolons (";") within CSS property values

[yanmariomenev]

Related to private issue

Description

If the editor's HTML markup contains inline CSS styles, and a CSS attribute value includes a semicolon (;), it breaks the applied styles and throws an exception. For example: <p style= "" ....background-image: url('data:image/png;base64...;""

Currently, semicolons are only accepted as separators between CSS style attributes, and they are not supported within the value of a CSS property.

The bug is in the common package that we inherit from the kendo-editor-common repo.

Steps To Reproduce

https://stackblitz.com/edit/angular-i2nq1a?file=src%2Fapp%2Fapp.component.ts

Actual Behavior

When inline CSS contains a semicolon (;) within a value (e.g.,

), the Kendo Editor fails to parse it correctly, breaking styles and throwing an exception.

Expected Behavior

The editor should consider semicolons in CSS values as part of the value instead of as separators. It should apply the styles correctly and handle any invalid CSS smoothly by giving a clear error message while keeping the content intact.

[jgtestw]

Do you know when the bug will be fixed?

[jgtestw]

@yanmariomenev I wouldn't try to get the CSS parser to handle embedded semicolons. Just have some defensive code that checks if the array has length >= 2 before calling trim on parts[1]. That would be good enough. That should be a quick and low risk change on your end. Please let me know what you think /how I can help to make this happen.

If you are not able to implement this fix, would it be possible for you to show me how I can monkey patch it so I can implement this in our app?

[yanmariomenev]

Hi @jgtestw,

I will ping our developers with the provided information and update you on your questions as soon as I have more details from them.

[jgtestw]

@yanmariomenev Another question, do you know in which change this error occurred? Perhaps we can downgrade our version of the kendo angular editor to a version that does not have this issue? Before we upgraded to 16.2.0, we were using 4.2.0. The reason we upgraded was that we upgraded angular to 18.0.5.

[yanmariomenev]

@jgtestw I have good news! Our developers have created a fix for the error, which will be available in our major release, version 17.0.0, scheduled for mid-November.

In the meantime, you can use version 13.1.0 of the Editor.

[jgtestw]

@yanmariomenev That's good. Thanks.

BTW, does your fix add defensive code to avoid calling trim on parts[1] if it is undefined/null? I ask because I have found examples in our database of bad css (so not the semicolon issue) that also crash in this part of the code.

[nstoychev]

@jgtestw - We have completed a major refactoring of the inline style parsing functionality in the editor, moving the implementation to a separate package: @progress/kendo-common (version 1.0.1). The parsing function, parseInlineStyles, accepts a string, null, or undefined as input and returns an object with the parsed styles.

If you have the opportunity, please install the package and test it with the cases you've mentioned. We believe this update addresses all previously identified issues. However, if you have concerns about specific cases, feel free to test them, and let us know if you encounter any further issues.

[DanielTakev]

@jgtestw, hello! 👋 Just FYI, we’ve fixed a minor issue in the kendo-common package. Please use v1.0.2 for testing purposes.

[jgtestw]

@DanielTakev

Hi, what's the difference between kendo-common and kendo-angular-common? In our package.json, we only have kendo-angular-common.

[DanielTakev]

@jgtestw, you're correct. 😊 We use kendo-common internally, and kendo-angular-common depends on it. We've merged the fix, and it’s now applied in our latest develop version. Feel free to take a look and test it. 👋