textAlign is not restored

[sylvainbx]

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 :)

[jpuri]

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

[jpuri]

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

[sylvainbx]

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.

[jpuri]

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

[cesaracortes]

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

[jpuri]

I will check this again. Thanks for reporting @cesaracortes

[sylvainbx]

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)
    ...

[adashst]

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

• draft-js 0.10.1
• draftjs-to-html 0.7.2
• react-draft-wysiwyg 1.9.8

[sylvainbx]

Any update on this ?

[htactive]

Me too, get a trouble with text-align when convertFromHtml. Any help?

[ed-zm]

I am running into the same issue, any update for this?

[lucasmonstrox]

Any updates? I'm having this problem :(

[Slooowpoke]

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.

[jpuri]

This is working well here in storybook: https://github.com/jpuri/react-draft-wysiwyg/blob/master/stories/ConvertFromRawDraftContent/index.js#L19

[shanmuga2414]

i want to send these editorState content send to as a email to Gmail. How to handle this editorstate content using Node JS

[suvomoy]

Same problem here when rendering editorState the text-align & font-family is striping away :

const contentDataState =
        ContentState.createFromBlockArray(convertFromHTML("<h3 style="text-align:center;"><span style="font-family: Tahoma;"><strong>This A Sample Text</strong></span></h3>"));
const [editorState, seteditorState] = React.useState(EditorState.createWithContent(contentDataState));

I'm using: "react-draft-wysiwyg": "^1.14.7" "draft-js": "^0.11.7", "draftjs-to-html": "^0.9.1",

[SaundersB]

Same issue here:

<p style="text-align:right;"><strong>It’s different, but we like different.</strong></p>

const blocksFromHtml = convertFromHTML(defaultValue);
        const contentState = ContentState.createFromBlockArray(
          blocksFromHtml.contentBlocks,
          blocksFromHtml.entityMap
        );
        const newEditorState = EditorState.createWithContent(contentState);
        setEditorState(newEditorState);

...

return (<Editor
        toolbarHidden
        readOnly={true}
        editorState={editorState}
        onEditorStateChange={onEditorStateChange}
      />);

    "react-draft-wysiwyg": "^1.15.0",
 "draft-js": "^0.11.7",
    "draftjs-to-html": "^0.9.1",