Spaces collapsed when readOnly=true and white-space set to nowrap

[mdanka]

Do you want to request a feature or report a bug?

Bug

What's the current behavior?

I am creating an editor for guitar tabs. For this, it is important to 1) display multiple spaces with a monospace font 2) sometime switch to read-only mode 3) not to wrap the text in the editor (and instead for the editor to expand horizontally, with a horizontal scrollbar appearing).

1. To achieve this effect, I add white-space: nowrap to the editor.
2. When the Editor is editable, it works as expected.
3. However, when readOnly is set to true, multiple spaces collapse into a single space.

JSFiddle to reproduce (note the style={{whiteSpace: "nowrap"}} on the Editor): https://jsfiddle.net/a9copgsy/1/

OS: Mac Browser: Chrome Slate: 0.40.2

What's the expected behavior?

The spaces are preserved, not collapsed.

Solution

1. There might be a different way of disabling line wrapping - suggestions are welcome.
2. Another option is to add a property to the Editor to disable line wrapping, avoiding the need to use white-space: nowrap.
3. Another is to change the logic of whatever is causing the above difference in read-only mode. (Note: it looks like that the Value itself is correct, the text leaf contains the correct number of spaces, but they are not rendered correctly.)

I am happy to submit a PR, but not knowing the code base, I'd appreciate some guidance: you might already have a clear idea of what is going wrong, or whether there is a better way of disabling line wrapping.

Thank you!

[ericedem]

It looks like the only difference between the read only text and the editable text is that the span in the editable text has a -webkit-user-modify: read-write-plaintext-only; attribute on it. If I disable this style the spaces collapse as well.

It gets added here: https://github.com/ianstormtaylor/slate/blob/master/packages/slate-react/src/components/content.js#L405

[ericedem]

@mdanka would white-space: pre get you where you need to go? By default the editor uses white-space: pre-wrap.

[mdanka]

Ah, @ericedem, that's an excellent observation, I missed that. It indeed resolves the problem! See here: https://jsfiddle.net/a9copgsy/6/

Thanks a lot! Really appreciated.