Combine nested span css

[Mahesh Waghmare]

Steps to reproduce

I'm working on inline CKEditor. I use font size, line height, & font family plugins. All of these apply to nested spans.

E.g. Text input is - "CKEditor is awesome"

When I applied below commands.

1. After added - font family:

<span style='font-family: Arial;'>CKEditor is awesome</span>

2. After added - font size:

<span style='font-family: Arial;'><span style='font-size: 30px'>CKEditor is awesome</span></span>

3. After added - line height:

<span style='font-family: Arial;'><span style='font-size: 30px;'><span style='line-height'>CKEditor is awesome</span></span></span>

So, All of these added in nested span elements.

Expected result

<span style='font-family: Arial;font-size: 30px;line-height'>CKEditor is awesome</span>

or

<span class="target_class" style='font-family: Arial;font-size: 30px;line-height'>CKEditor is awesome</span>

Actual result

<span style='font-family: Arial;'><span style='font-size: 30px;'><span style='line-height'>CKEditor is awesome</span></span></span>

Other details (browser, OS, CKEditor version, installed plugins)

To get expected result I use below code snippet to add common class for each span

config.fontSize_style       = { element : 'span', styles: { 'font-size': '#(size)' }, attributes : { 'data-font-size': '#(size)', 'class' : 'target_class' } };

config.cp_line_height_style = { element : 'span', styles: { 'line-height': '#(size)' }, attributes : { 'data-line-height': '#(size)', 'class' : 'target_class' } };

[Piotrek Koszuliński]

DUP of #9295.