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

Created on 12 Nov 2016 · 16Comments · Source: jpuri/react-draft-wysiwyg

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.

bug

Source

orditeck

Most helpful comment

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

orditeck on 16 Nov 2016

👍7

All 16 comments

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 on 12 Nov 2016

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.

jpuri on 16 Nov 2016

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

orditeck on 16 Nov 2016

👍7

@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 on 5 Dec 2016

Closing the issue as there is no response.

jpuri on 9 Dec 2016

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.

vhmth on 11 Dec 2016

👍1

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

jpuri on 12 Dec 2016

👍3 ❤1 🎉1

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

vhmth on 12 Dec 2016

@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!

bonniecool on 13 Dec 2016

@bonniecool look at her comment right above mine.

vhmth on 13 Dec 2016

@vhmth thanks! :-D

bonniecool on 13 Dec 2016

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 on 13 Dec 2016

The fix has been release in in version [email protected].

jpuri on 14 Dec 2016

Sweet! Seems like it works. :-)

vhmth on 14 Dec 2016

😄1

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