Justified text is not possible in Firefox

[si13b]

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

What is the current behavior? Applying text-align: justify; on a block via a class name returned from the blockStyleFn function has no effect in Firefox.

It looks like this is because the white-space: pre-wrap; rule applied to .public-DraftStyleDefault-block, which is preventing the justified alignment in Firefox 50.1.0. The same problem does not exist in Chrome 55.0.2883.87.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: https://jsfiddle.net/stopachka/m6z0xn4r/. Apply text-align: justify; to a block type class name. See example https://jsfiddle.net/rxycutze/2/

What is the expected behavior? It should be possible to apply the text-align: justify; CSS rule to a block without side effects.

Perhaps Draft.js should investigate the substitution of white-space with   and <br/> to avoid the need to apply white-space: pre-wrap;.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js? Draft.JS 0.9.1 Firefox 50.1.0

[Okazari]

I actually also got this issue on PhantomJS because of the white-space: pre-wrap css property rule.

[Okazari]

I made a workaround using the blockRenderFn to always return a class that overide white-space to normal.

[si13b]

@Okazari surely that would break double-spacing and soft line breaks though?

[Okazari]

@si13b double-spacing works fine for me, since each line break create a new div in draftjs. I don't really know what is "soft" line breaks :thinking:

[si13b]

hi @Okazari , sorry I didn't explain myself well in my last post.

By double spacing, I meant that with white-space: normal;, browsers will collapse successive white space characters (new line ,space, tab etc) into a single space. e.g. foo<space><space><space><space>bar will be presented as foo<space>bar.

In draft JS, pressing return key will create a new div (block). There is also the concept of a soft line break (https://facebook.github.io/draft-js/docs/api-reference-rich-utils.html#insertsoftnewline). Soft line break in traditional text editors is usually Shift+Return, this is the equivalent of a \n character.

With white-space: 'normal' soft line breaks will be stripped out, e.g.

<p>hello
there</p>

will become <p>hello there</p>. I think this is why Draft.js uses white-space: pre-wrap.

Other editors solve this problem by substituting spaces and tabs with html entities such as   and new line with <br /> and so on.

edit: it seems github editor has the same problem :-)

[Okazari]

@si13b Hmm, juste tried double spaces with my workaround and it looks like it works fine. I don't know how to try soft line break :confused:

[si13b]

@Okazari you can use RichUtils.insertSoftNewline(editorState) to insert a soft newline.

If you have a jsfiddle of your workaround, that would be awesome.

[Okazari]

@si13b Would be something like this : https://jsfiddle.net/qj2n080k/4/ (i just added white-space: normal to the .align-justify .public-DraftStyleDefault-ltr css

[si13b]

Thanks @Okazari , that workaround seems to work, although I don't understand why as it seems to be still preserving the white-space (white-space: pre-wrap), despite using white-space: normal;. It could even be a bug in Firefox.

[si13b]

Sorry, I have to re-open as I didn't test insertSoftNewline properly.

See; https://jsfiddle.net/qj2n080k/5/

Steps to reproduce:

1. type text
2. Press Shift+Return

Outcome: Space inserted (In Firefox)

Expected: Soft newline (\n) should be inserted (without creating another block).

Same issue doesn't happen in Chrome

[maierson]

I also ran into the same problem on Firefox and Safari. Adding white-space:normal causes the collapse of double white spaces on both.

draft-js 0.10.0 with Firefox 52.0, Safari 10.0.3. Option to align justify is relatively important for us since we're building a publishing platform.

[PeterDekkers]

We found that adding white-space: normal caused other issues, so please be aware of this.

E.g. cursor jumping unexpectedly while editing in Firefox:

1. Delete any text
2. Type a few characters, hit space
3. The cursor will jump to the beginning of the line

There were also some uncaught errors in mobile Safari while making edits.

For now we're opting to not allow justify-aligned text in Firefox.

[RdNetwork]

@PeterDekkers

We found that adding white-space: normal caused other issues, so please be aware of this.

E.g. cursor jumping unexpectedly while editing in Firefox:

1. Delete any text
2. Type a few characters, hit space
3. The cursor will jump to the beginning of the line

There were also some uncaught errors in mobile Safari while making edits.

For now we're opting to not allow justify-aligned text in Firefox.

I am currently facing the same issue, having to choose between 'allowing justified text' and 'allowing typing a space at the end of a paragraph (otherwise the cursor jumps at the beginning of the paragraph)'... I haven't found any way to achieve both yet. Did anyone find a solution for this?