Unwanted non breaking space ( ) characters automatically inserted

Hi Mohamed Boussaa,

I tested on a fresh XWiki 9.8.1 instance and I did not reproduce.

I do reproduce on a clean XWiki 9.8.1 using Chrome. Firefox doesn't have the problem, neither on XWiki 9.8.1 nor on 17.10.2.

XWIKI-23818.webm

As you can see the space is replaced with a non-breaking space both when deleting a character before the space or when inserting a character before the space. This is not specific to CKEditor. You have the same behaviour with a plain contenteditable DIV:

{{html clean="false"}}
<div contenteditable="true">one <strong>two</strong> three</div>
{{/html}}

XWIKI-23818-contenteditable.webm

Chrome behaves like this because the space is before an element, and Chrome wants to make sure it stays visible, because in HTML whitespace is not always visible. Now in this case we are inline, so Chrome is being overprotective. Fixing this behaviour is tricky and can lead to unexpected side effects or regressions. There are many ways in which Chrome can replace a plain space with a non-breaking space. In CKEDITOR-385 I tried to fix one such case. Fixing all these cases is tedious and dangerous.

If this is a serious problem for you then I suggest you write a filter server-side to replace non-breaking spaces with plain spaces when a non-breaking space is not needed (e.g. when there are no consecutive spaces). But even writing this filter is not easy because there are a few cases you need to take into account (like non-breaking space before a block-level element). Moreover, there are valid cases when non-breaking space is used to make sure a name is not split on multiple lines. If you replace the non-breaking space blindly you will break those valid use cases.

I wrote this functional test to show the problem:

@Test
@Order(2)
void fixNonBreakingSpaceOnDelete()
{
    setSource("one **two** three");

    // Delete a character before space.
    this.textArea.sendKeys(Keys.HOME);
    this.textArea.sendKeys(Keys.chord(Keys.CONTROL, Keys.RIGHT));
    this.textArea.sendKeys(Keys.BACK_SPACE);

    // Delete a character after space.
    this.textArea.sendKeys(Keys.END);
    this.textArea.sendKeys(Keys.chord(Keys.CONTROL, Keys.LEFT));
    this.textArea.sendKeys(Keys.DELETE);

    this.assertSourceEquals("on **two** hree");
}