How to force CKEditor inline widgets to preserve trailing spaces - ckeditor

Question

As I reported at in this CKEditor this ticket, inline widgets in CKEditor (4.7.0) do not preserve trailing spaces, causing display issues.
Take the following simple widget:
CKEDITOR.plugins.add('spanwidget', {
requires: 'widget',
init: function (editor) {
editor.widgets.add('spanwidget', {
editables: {
content: {
selector: 'span'
}
},
upcast: function (element) {
return element.name == 'span';
}
});
}
});
When you load the following data <span>lorem </span>ipsum, you see this text in output: loremipsum (notice the missing space).
This can be seen in this JSFiddle.
How can I work around the problem (I do not control which data is loaded inside CKEditor)?

Answer 1

I found a workaround to force the last trailing space to be preserved. The idea is to replace the last space with a when upcasting the widget element, then remove it before downcasting it:
CKEDITOR.replace('ck', {
allowedContent: true,
extraPlugins: 'spanwidget'
});
CKEDITOR.plugins.add('spanwidget', {
requires: 'widget',
init: function (editor) {
editor.widgets.add('spanwidget', {
editables: {
content: { selector: 'span' }
},
upcast: function (element) {
// Matches?
if (element.name == 'span') {
// Ends with text?
var children = element.children,
childCount = children.length,
lastChild = childCount && children[childCount - 1];
if (lastChild instanceof CKEDITOR.htmlParser.text) {
// Replace the last space with a non breaking space
// (see https://github.com/ckeditor/ckeditor-dev/issues/605)
lastChild.value = lastChild.value.replace(/ $/, ' ');
}
// Match!
return true;
}
// No match
return false;
},
downcast: function (element) {
// Span with class "targetinfo"?
if (element.name == 'span') {
// Ends with text?
var children = element.children,
childCount = children.length,
lastChild = childCount && children[childCount - 1];
if (lastChild instanceof CKEDITOR.htmlParser.text) {
// Ends with a non breaking space?
var match = lastChild.value.match(/ $/i);
if (match) {
// Replace the non breaking space with a normal one
lastChild.value = lastChild.value.replace(/ $/i, ' ');
// Clone the element
var clone = element.clone();
// Reinsert all the children into that element
for (var i = 0; i < childCount; i++) {
clone.add(children[i]);
}
// Return the clone
return clone;
}
}
}
}
});
}
});
See updated JSFiddle here.