Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>

[orditeck]

I'm getting this warning.

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. See DraftEditorContents > p > ... > DraftEditorBlock > div.

The problem is this <p> here https://github.com/jpuri/react-draft-wysiwyg/blob/master/js/src/components/Editor/index.js#L151

Pull request coming soon.

[jpuri]

Hi @orditeck,

Thanks a lot for the PR. One of the reason that I kept it

and not

is that generated HTML and MarkDown use syntax for

, thus I preferred

in editor also to preserve exact styling of margins.

But

may just work well and also fix the warning. I will merge the PR and check. Thanks a ton 😄

~ Jyoti

[jpuri]

Hello @orditeck,

Thinks got little delayed as I was on vacation. But I have to undo the these changes. The reason being that the generated mark-down and HTML use

tag thus to keep things consistent I would prefer to use

tag in editor also.

Plz share your thoughts about it.

[orditeck]

@jpuri I'm sorry but I don't understand why you want to keep the <p> as the main tag. There are multiple <div> in that <p>, and it's not allowed, which is why this warning is showing.

Is there any reason for this? 'cause otherwise the warning will stay.

[jpuri]

@orditeck: WYSIWYG editor typically use

for normal text paragraphs and I would not prefer to deviate from it also you can see in output

tags are used for paragraphs.

Should I go ahead to close this issue ?

[jpuri]

Closing the issue as there is no response.

[vhmth]

Hey @jpuri I think it's fine to use <p> within the content block, but I think we should definitely not nest divs inside the <p> tag. This is semantically incorrect and will result in error logs for any application that uses this wonderful library.

What issues would result from us transitioning from <p> to <div> or ensuring that <p> does not nest <div>s within it? How large would that transition be? If you look at a lib like Medium.js, they use <div>s and I'm starting to see that it may because of this issue.

[jpuri]

@orditeck , @vhmth : I am convinced about fixing this 😄 . I will redo changes of your pr, thanks a lot @orditeck , @vhmth.

[vhmth]

https://www.opentest.co/share/bc85f010c0a511e693d2c326b54ba9c0

[bonniecool]

@jpuri I reinstall this package and we still get the warning "Warning: validateDOMNesting(...): < div > cannot appear as a descendant of < p >"

Red warning color is not good for an application. Please tell us if you pursue to continue using "< p >" instead of < div >

Thanks!

[vhmth]

@bonniecool look at her comment right above mine.

[bonniecool]

@vhmth thanks! :-D

[jpuri]

Hey @vhmth, @bonniecool:

These changes are already in develop and I will release this week. I am trying to slow down little on release cycles and releasing only well tested code.

[jpuri]

The fix has been release in in version react-draft-wysiwyg@1.4.0.

[vhmth]

Sweet! Seems like it works. :-)

[bnwan]

Just started to use this yesterday and getting the "Calling PropTypes validators..." warning. Any help is apprecaited. Thanks

[jpuri]

@bnwan: which version of editor are you using ?
Also, this warning is not fatal - you can ignore for now, we will anyways soon fix it.