Multiple space → nbsp translation has poor line wrapping behavior #748
Description
mobiledoc-kit currently renders multiple consecutive spaces by replacing each space-space pair with space-nbsp (#209). Depending on the text width, this results in the left margin being misaligned when a line is wrapped at that point. Emphasizing nbsp with _ to illustrate the problem:
This is a sentence that is followed by two
spaces. _This is a sentence that is followed
by three spaces. _ This is another sentence.
This is a sentence that is
followed by two spaces.
_This is a sentence that is
followed by three spaces.
_ This is another sentence.
To fix this, it would be better to replace each sequence of n spaces with n − 1 nbsps followed by 1 space. This can be done with regexp lookahead:
text.replace(/ (?= )/g, "\u00A0")This is a sentence that is followed by two
spaces._ This is a sentence that is followed
by three spaces.__ This is another sentence.
This is a sentence that is
followed by two spaces._
This is a sentence that is
followed by three spaces.__
This is another sentence.
It might be better to disable the nbsp translation entirely and rely on CSS white-space: pre-wrap, but that’d be a bigger change.
(The same issue is present in other repositories like mobiledoc-dom-renderer, mobiledoc-html-renderer, mobiledoc-apple-news-renderer; I assume I don’t need to file separate issues for each one.)