Skip to content

Draftail-renderer renders div's inside p tags #49

@presto2116

Description

@presto2116

Description

When working on 2u in dev mode, I get this error every time I pull up a latest-content article. react yells at me for having a nested div inside a p tag.
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. in div (created by DraftEditorBlock)

Steps to Reproduce

On 2u at least, if you open up the site in dev mode, and go to any of the latest-details pages. i.e.
http://localhost:5000/latest/day-life-2u-senior-manager-internal-communications-candice-adderly/
(production link: https://2u.com/latest/day-life-2u-senior-manager-internal-communications-candice-adderly/)
you will receive this error

Expected Result

Not have a nested div or p tags inside of a p tag.

Actual Result

Screen Shot 2020-03-02 at 1 27 57 PM
Screen Shot 2020-03-02 at 1 28 06 PM

Additional Context

Here is the rendered html of an example above but it seems to affect all of the latest templates on 2u

<p
  class=""
  data-block="true"
  data-editor="cleqc"
  data-offset-key="yxdxs-0-0"
>
  <div
    data-offset-key="yxdxs-0-0"
    class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
  >
    <span data-offset-key="yxdxs-0-0">
      <span data-text="true">
        Growing up in Durham, North Carolina,{' '}
      </span>
    </span>
    <a
      href="https://www.linkedin.com/in/candiceadderly/"
      class="sc-chPdSV iFWHec"
      target="_blank"
      aria-label="external link. Candice Adderly"
    >
      Candice Adderly
    </a>
    <span data-offset-key="yxdxs-2-0">
      <span data-text="true">
        ’s life revolved around the “Bull City.” Durham and its people
        instilled in her a sense of confidence and pride, and these
        values motivated her to stay in-state for school and, later, for
        her first job at Hilton Charlotte Center City.
      </span>
    </span>
  </div>
</p>

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type: BugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions