CKEDITOR leaves behind 'Filling Char' zero-width-space after selectBookmarks/selectRanges

[Dusty Jewett]

By leaving behind filling char, the text content is unpredictable. As soon as the user types backspace, delete, makes another selection, or navigates the file in any way, the character is deleted, further making it difficult to know whether we should expect a filling character or not. (when writing plugins)

As an aside, it is not clear WHY a filling character is introduced in this specific instance.

Steps to reproduce

via javascript:

var text = editor.editable().getText();
editor.getSelection().createBookmarks(true);
editor.getSelection().selectBookmarks(bookmarks);
console.log(editor.editable().getText() === text);

Expected result

selectBookmarks should not leave behind the filling char.

Actual result

filling char is left behind.

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

[Piotrek Koszuliński]

It's a workaround for ​https://bugs.webkit.org/show_bug.cgi?id=15256. It's a terrible bug/feature (depending whether you are editor developer or a browser developer ;) which does not allow us to put selection in some certain places. To make it work we need to put a ZWS in those places and this causes a lot of troubles, so there's a lot of weird code internally. One of the things is that ZWS should not leak to data, and that's working rather flawlessly. Your getText() check is of course not covered as it's a method that works on HTML inside the editor, not on the data.

BTW. You were asking in #11502 about updates. We could not work on this ticket, because we were actually working in W3C to fix the situation with selection normalization (the WebKit and Blink bug).

You can read more here:

• ​https://medium.com/content-uneditable/contenteditable-the-good-the-bad-and-the-ugly-261a38555e9c
• ​https://medium.com/content-uneditable/fixing-contenteditable-1a9a5073c35d (one of the points is to make browser vendors stop normalizing selection and we were able to convince them to do so)

As for "why is a filling char introduced in this specific case?", for me it isn't:

var text = editor.editable().getText();
var bookmarks = editor.getSelection().createBookmarks(true);
editor.getSelection().selectBookmarks(bookmarks);
console.log(editor.editable().getText() === text);

true

It will depend on the data that you have and selection that you made, so if you still think that there's something wrong, please give more details and I can reopen the ticket.