React-draft-wysiwyg: textAlign is not restored

Created on 11 Apr 2017 · 15Comments · Source: jpuri/react-draft-wysiwyg

When initializing the Editor with some previously saved content, eg:

{"blocks":[
  {"key":"78mel",
  "text":"Lorem ipsum duis vulputate erat vel tortor ornare lobortis. In tempus aliquet elit nec porttitor.",
  "type":"unstyled",
  "depth":0,
  "inlineStyleRanges":[],
  "entityRanges":[],
  "data":{"textAlign":"center"}}
],"entityMap":{}}

The text alignment is not restored. All other properties are restored correctly (bold, italic, list ...), but textAlign (here center but possibly right or justify) are not restored.

Here's the full code of my component:
https://gist.github.com/sylvainbx/e281f0596617b6119559f05388318e7d

I'm using react-draft-wysiwyg 1.9.0 and draft-js 0.10.0.
Any suggestions are welcome :)

Source

sylvainbx

Most helpful comment

I was having the same issue using the default convertFromHTML (from Draft.js), but after switching to the recommended package: https://github.com/jpuri/html-to-draftjs and using htmlToDraft instead solved my issue.

Slooowpoke on 19 Feb 2019

👍2

All 15 comments

@sylvainbx : thanks for reporting the issue, I will check this.

jpuri on 16 Apr 2017

Also, @sylvainbx : are you facing this issue when you display content in HTML ? That I fixed in last version already.

jpuri on 16 Apr 2017

Hi, thanks for your answer. I've just upgraded react-draft-wysiwyg from 1.9.0 to 1.9.4 but sadly, this does not solve the issue.

I don't know what you mean by "display content in HTML". I'm displaying some draft raw content (like the initial example I gave) in the <Editor />, using convertFromRaw and createWithContent.

sylvainbx on 20 Apr 2017

This should be fixed in latest version, can you plz check: [email protected].

jpuri on 29 Apr 2017

Hi!
I have the same problem, and im using the version [email protected]

cesaracortes on 2 May 2017

I will check this again. Thanks for reporting @cesaracortes

jpuri on 2 May 2017

😄1 👍1

Hi, I've upgraded to [email protected], but I still have the issue.
Moreover, now I'm having the following error in the console:

warning.js?85a7:36 Warning: Failed prop type: Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types
    in e (created by TextEditor)
    in TextEditor (created by ProjectId)
    ...

sylvainbx on 2 May 2017

Same for me.

When trying to load :

const contentBlocks = convertFromHTML('<p style="text-align:right;">right aligned</p>')
const editorState = EditorState.createWithContent(ContentState.createFromBlockArray(contentBlocks))

style="text-align:right;" seems to be stripped out.

editorState is:

 {
        entityMap: {},
        blockMap: {
          '89ct4': {
            key: '89ct4',
            type: 'unstyled',
            text: 'right aligned',
            characterList: [
              { style: [], entity: null },
              { style: [], entity: null },
              { style: [], entity: null },
              { style: [], entity: null },
              { style: [], entity: null },
              { style: [], entity: null },
              { style: [], entity: null },
              { style: [], entity: null },
              { style: [], entity: null },
              { style: [], entity: null },
              { style: [], entity: null },
              { style: [], entity: null },
              { style: [], entity: null },
            ],
            depth: 0,
            data: {},
          },
        },
        selectionBefore: {
          anchorKey: '89ct4',
          anchorOffset: 0,
          focusKey: '89ct4',
          focusOffset: 0,
          isBackward: false,
          hasFocus: false,
        },
        selectionAfter: {
          anchorKey: '89ct4',
          anchorOffset: 0,
          focusKey: '89ct4',
          focusOffset: 0,
          isBackward: false,
          hasFocus: false,
        },
 }

I guess data: {} should be: data: {'text-align': 'right'} after convertFromHTML.
Maybe i'm doing sth wrong?

I'm using