Adding a tag within `<span>` breaks it into multiple `<span>`s / Outputting multiple inline tags like `strong` in HTML / Adjacent <span> tags are merged together

[dokumori]

📝 Provide detailed reproduction steps (if any)

1. Toggle the source mode and enable the HTML editing feature
2. Enter the following string <span>This is a <a href="">test</a></span>
3. Switch back to the normal editing mode
4. Again, switch the source mode to edit the HTML source - now the single line of <span> entered in step 2 is split into multiple <span>s (and wrapped in an unnecessary <p> tag)

✔️ Expected result

• The original string is left intact: <span>This is a <a href="">test</a></span>

❌ Actual result

<p>
    <span>This is a </span><a href=""><span>test</span></a>
</p>

Reversed scenario

When we add two adjacent tags using HTML source editing mode (General HTML Support (“GHS”) feature) ckeditor5 merges those spans together. For example, try following code <span> <span>aaaa</span> <span>bbbb</span> </span>

Copy the above code and paste into an editor with source mode.

1. Turn off source editing mode.
2. Turn ON source editing again and see the HTML changes.

✔️ Expected result

It should stay as separate spans

❌ Actual result

Got merged into a single span

---

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

[Witoso]

This is how our internal engine model represents inline elements to HTML. Unfortunately, there's no easy fix at the moment. Related tickets that show merging of tags (the opposite scenario):

• 15046

• 15242

[Bent-4-Speed]

I have the same problem, except I'm trying to put both an input tag and label tag pair within a span tag pair (needed for current JavaScript code to work). This worked before we moved to CK Editor 5. As far as I can tell, both dokumori and I are writing valid HTML. I don't understand why CK Editor would want to change valid HTML. Can we flag a page to block CK Editor HTML changes?

[Witoso]

Unfortunately, it's not possible, CKEditor 5 works on a very different layer than CKEditor 4. CKE4 is an HTML editor, CKE5 "imports" HTML to an abstract data schema, and all features work on top of it. Then it "standardizes" the output HTML which maybe be different from the input.

[jameswilson]

I'm seeing the same exact issue and behavior, just with a different tag, so maybe this one should be generalized.

When you apply Bold to a line of text with a link, it adds multiple <strong> tags. If you go into the Source code and strip out the extra tags, switch back to the Visual editor then go back in to look at the Source code, the CKEditor adds the multiple <strong> tags back in the code.

Bolding this phrase:

Please email <a href="#">x@y.com</a> or <a href="#">z@y.com</a> for advising assistance.

Produces the following:

<strong>Please email </strong><a href="#"><strong>x@y.com</strong></a><strong> or </strong><a href="#"><strong>z@y.com</strong></a><strong> for advising assistance.</strong>

Expected output:

<strong>Please email <a href="#">x@y.com</a> or <a href="#">z@y.com</a> for advising assistance.</strong>

Maybe this is intentional, but how is this at all practical from a clean code structure?

[Witoso]

CKEditor 5 simply doesn't operate on HTML, it just accepts it and outputs it. While the HTML could be more semantically correct, as far as I understand, it's difficult to reflect the exact structure in the current data model. Maybe @scofalik or @Reinmar could share some more insights.

[jpmariano]

Nested span tag should be allowed. Inline elements can have another inline elements. I'm also having this issue.

[peterwcm]

When you have inline text styles that are targeting inline elements, such as <span> or <strong>, this will cause extra difficulties in theming especially if your style is 'interactive', e.g. changing text style on hover

We can reproduce the UI challenge/issue with the official demo page: https://ckeditor.com/docs/ckeditor5/latest/features/style.html

To reproduce:

1. Apply the Spoiler text style to some text that contains a link, e.g. the first sentence Nowadays, writing is often a team sport.
2. The hover effect will break into 3 different parts because of the new HTML structure, thus, creating a bad UX for users

In my opinion, the current way CKEditor5 works with inline elements creates a conflict with how inline text styles are meant to work, which needs to be looked at.

[torstendlp]

I second this. Nesting inline elements is totally valid code and there is no sense in breaking this apart. In many cases it's even necessary. Keeping spans inside spans etc. should be default behavior of any good editor. The current behavior breaks totally valid code and should definitely be regarded as a critical bug.

[fleckiboy]

We also ran into this problem and found out something interesting. While trying out custom HTML tags instead of span elements (which we hoped could be a workaroung for that), we figured out that the editor also breaks inline custom elements apart. However, when we named the custom elements with the prefix "cke-", the behaviour did not occur.

Here are some examples:

Input A <placeholder><strong>Strong Text</strong> <i>Italic Text</i></placeholder> Output A <placeholder><strong>Strong Text</strong> </placeholder><i><placeholder>Italic Text</placeholder></i>

Input B <cke-placeholder><strong>Strong Text</strong> <i>Italic Text</i></cke-placeholder> Output B <cke-placeholder><strong>Strong Text</strong> <i>Italic Text</i></cke-placeholder>

We would at least be happy to know whether this is intentionally and stable, as this could be either an intention by the developers or another bug, that bypasses the initial bug.