[Bug][Editor] Strikethrough line renders at wrong vertical position when combined with a custom font size

[vveesseelliinnaa]

Description

When the Strikethrough and FontSize tools are both applied to the same text selection, the strikethrough line appears near the top of the text instead of through its vertical middle. The issue occurs because the ProseMirror mark schema in @progress/kendo-editor-common orders the del mark before the style mark, so the editor renders <del><span style="font-size: Xpx">text</span></del>. The browser's UA stylesheet positions the line-through decoration using the <del> element's own (default) font-size, not the larger font-size of the inner <span>.

Workaround

As a temporary workaround, you can inject scoped CSS into the editor's document via the onMount callback. The CSS removes text-decoration from del and re-applies line-through only on del > span (i.e., when a font-size span is present inside del). When no font-size span is present, the del:not(:has(span)) rule preserves the default behavior.

https://stackblitz.com/edit/react-yujzbin3-fpptv8t6?file=package.json,app%2Fapp.tsx

Plan

KendoReact Free

Steps To Reproduce

1. Go to https://stackblitz.com/edit/react-yujzbin3-k236cjtf?file=package.json,app%2Fapp.tsx
2. Type some text.
3. Select the text and apply a large font size (e.g. 36px / xx-large).
4. With the text still selected, click the Strikethrough button (or apply strikethrough first, then font size — both orderings reproduce the issue).

Screenshots or video

No response

Actual Behavior

The strikethrough line renders near the top of the large text, not through its middle.

Expected Behavior

The strikethrough line passes through the vertical midpoint of the text, matching the larger font size.

Browser

Chrome

Browser version

latest

OS type

MacOS

OS version

No response

Aditionl details

Reported in ticket Ticket ID: 1717122