in CKEditor font formatting is not applied to empty paragraphs

Question

Consider the following markup:

<p>spaceflight</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>spaceflight</p>

When user selects the whole block of text (e.g. using [Ctrl+A]) and applies font formatting in CKEditor the resulting markup is something like this:

<p><span style="font-family:comic sans ms,cursive">spaceflight</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="font-family:comic sans ms,cursive">spaceflight</span></p>

i.e. font is not applied to the empty paragraphs.

Steps to reproduce the problem:

1. type a couple of lines of text, use [Enter] to insert empty paragraphs in between the lines
2. use [Ctrl+A] to select the whole block of text and apply "Comic Sans MS" font to the selection
3. use [Source] to check the resulting markup and see that the empty paragraphs are missing the font style
4. switch back to editing mode and type inside one of the empty paragraphs, the new text indeed uses default font

Is there any known workaround allowing to make CKEditor to apply formatting to empty paragraphs inside the current selection?

Answer 1

The problem here is after user has explicitly applied font to the whole block they expect the whole block to be in that font, but when they use cursor and navigate to one of the empty paragraphs and start typing there it's a different font altogether

So the problem is actually different - it's not related to data, but to these empty blocks not preserving styling inside the editor. There's a ticket for this somewhere, but the solution is not trivial. The problem is that when you apply style to an empty block this structure is created (inspect the DOM of the editor):

<p><strong></strong><br /></p>

The <br> there is for making the paragraph visible - it's so called bogus br. Otherwise, the paragraph would have 0 height.

Now, when you try to place your caret there (using mouse or keyboard) the browser finds an empty strong element, which is 0x0 and a paragraph which has non-zero width and height. Where the browser puts your caret? In the paragraph.

The same situation happens if you apply style on an empty selection and move your caret - there's still an empty inline element out there, but you won't be able to move your caret back to it.

It is possible to workaround this and there's even more than one way. Unfortunately, none is trivial.

If you want to attempt to implement a hack which should solve the most common cases, then it should work like this:

1. Watch the selection changes (editor#selectionChange).
2. If selection is collapsed and it is placed in an empty block (mind bogus brs) and there's an empty inline element, move caret there.
3. CKEditor's selection engine is able to place caret in an empty inline element (native implementations in Webkit and Blink are not able to do that).