Prosemirror: Can't justify or right-align editable content

[marijnh]

We're using white-space: pre-wrap for the editor to prevent the browser from collapsing whitespace during editing (see #651). But apparently on some browsers white-space and text-align interact in problematic ways, and this is causing problems for people who support those features in their editor.

If we could find some other robust way to avoid collapsing whitespace, preferably one that didn't require putting non-breaking spaces in the actual document, that might be preferable.

[isubasti]

can't seem to find any other way to get around this without replacing consecutive space with  

[FeliciousX]

yup.. for those who are curious, my current problem and solution is as follow:-

We use white-space: pre-line so that text-align would work.. but pre-line will collapse the extra spaces in Firefox and it will prevent users from typing multiple spaces

1. User triggers keydown event ( by pressing Spacebar )
2. ProseMirror reads event.key value ( a space )
3. ProseMirror updates the state by adding the input value at the cursor
4. ProseMirror tries to render by state
   
   
   
   1. if there are 2 spaces consecutively, then Firefox white-space: pre-line will collapse the extra space
   
   
   2. if there is only 1 space, it will render fine.
   
   

In Chrome, it will automatically generate &nbsp hence it works fine without any changes to prosemirror.

To ~fix~hack this in Firefox, we have to do 2 things.

Hijack every keydown event and if user tries to input a space, convert it to &nbsp automatically. (Use handleKeydown event handler)

To retain the behavior where the wrapping will still work when the width of the text container is smaller than the length of the text, we must replace the last &nbsp in the sequence to be a space (using prosemirror-inputrules)

hello[nbsp]world -> hello[space]world
hello[nbsp][nbsp][nbsp]world -> hello[nbsp][nbsp][space]world

of course, right now it's just a big hack.. but yeah, would be nice to see what others think about different approaches (preferrably not involving the use of &nbsp as mentioned by @marijnh

[FeliciousX]

I forgot to add the cons to the approach above. When you have a big enough font size, you could see the difference between &nbsp spacing and a normal space spacing. So when you are deleting the extra spaces it will look awkward (like it's jumping from a small space to a bigger space)

[nstoychev]

How about this approach - https://stackblitz.com/edit/react-xyvsew?file=app%2Fmain.jsx ?
To fix the alignment, I use a Decoration to change the style of the spaces where it is needed.

[guitarino]

How about this approach - https://stackblitz.com/edit/react-xyvsew?file=app%2Fmain.jsx ?
To fix the alignment, I use a Decoration to change the style of the spaces where it is needed.

Your workaround worked well for me! Thank you.

[benmandr]

On our end, we are "living" with the fact that Firefox chokes on white-space: normal and giving it white-space: pre-wrap while in text editing mode.
This gives layout shifts while entering/quiting edit mode, but seems like the simplest solution atm.
Pinging so this issue won't go dead - the are still people who experience this problem and hope for a fix.
Btw, amazing library (not using ProseMirror directly, we are using TipTap), thanks for the great work!