slate White-space css property issue in Chrome / Safari

White-space css property issue in Chrome / Safari

Open peteshilling opened this issue 3 years ago • 3 comments

Description If you set the white-space property on the editor to a value that collapses spaces (e.g. normal) there is no way to add a space at the end of a line when editing text in Safari and Chrome (it works as expected in Firefox). The sandbox link below is probably the best way to see what I mean.

Background: The default editor white-space property is 'pre-wrap'. This works fine for left-aligned text, but if you center or right-align the text the text doesn't properly align because the space which caused the line break isn't collapsed. The solution to this is to set the white-space property to something that collapses spaces, which then causes the root issue described above.

Recording This video demonstrates the right alignment issue with the default white-space property, 'pre-wrap'. https://user-images.githubusercontent.com/3027424/143971223-72a5ccb6-4ed1-4938-8d7b-3018e884ceb4.mov

This video demonstrates the spacebar issue with the white-space property set to 'normal' (The spacebar is being pressed, spaces don't appear between words) https://user-images.githubusercontent.com/3027424/143971362-cd8a468b-a070-4c8e-9ee3-8235fe9b6dab.mov

Sandbox This sandbox demonstrates the issues, as well as the expected behavior: https://codesandbox.io/s/slate-reproductions-forked-48q35

Expectation Spaces should work when the white-space property is normal.

Environment