Text alignment is saved but it is not reflected on the editor

[mastepanoski]

Example: If you take a paragraph from here lipsum, paste it react-draft-wysiwyg site, and then you select all text and press center (or justify or right), the content is not centered in the editor. I used it in a project and when I generated HTML from the content, the paragraph has the style "text-align: center;" but the editor does not show the alignment.

[rickstricker]

Here's a little more info about this issue. After playing with this a bit, the problem appears to be related to line wrapping. If a piece of text is short enough not to wrap, then it is centering fine. Adding words to the sentence to make it wrap, will cause the centered text to stop wrapping in the editor. You can also reproduce it by simply resizing the browser such that the centered piece of text will wrap, and again the text is now no longer being centered in the editor. Resize back to one line and the text again centers.

[imjared]

What I'm seeing is that the actual HTML output is fine but the CSS needs a tweak. Adding this rule seems to fix it but I'm not familiar enough with the overall CSS to say if this would have unintended effects.

.rdw-center-aligned-block > * {
  text-align: center;
}

Actual view:

Expected view:

[jpuri]

@imjared 's solution looks correct

.rdw-center-aligned-block * {
    text-align: center !important;
}

is fixing it. I will soon put this fix in code itself. Thanks :)

[franleplant]

Can confirm the css patch fixes the problem

[bbeck10]

I created a PR with this css update - https://github.com/jpuri/react-draft-wysiwyg/pull/827

[IlkhamGaysin]

any updates here?

[IlkhamGaysin]

@jpuri

[Spyron1234]

Hi All, is there any fix for the mentioned issue available?

[f-CJ]

@imjared 's solution looks correct

.rdw-center-aligned-block * {
    text-align: center !important;
}

is fixing it. I will soon put this fix in code itself. Thanks :)

This fix doesn't seem to work when alignment is equals to justify or right, I had to add this extra rule:

.public-DraftStyleDefault-ltr {
  text-align: inherit !important;
}

[lomeat]

@f-CJ Thank you! You saved my working time :) All work as expected

[abenoit-reeliant]

Doesn't seem to work for justified text on Firefox, unless we add a CSS to change white-space to 'normal' for instance.

But with that CSS change, when we go to the end of the content on Firefox and type in a space, the cursor goes back to the beginning of the text, which makes the editor unsable for typing text.

[crudobaker]

I needed to add following css rules:

.rdw-center-aligned-block * {
  text-align: center !important;
}

.rdw-left-aligned-block * {
  text-align: left !important;
}

.rdw-right-aligned-block * {
  text-align: right !important;
}

.rdw-justify-aligned-block * {
  text-align: justify !important;
}

With those rules it works as expected.