hzdg / hz-core

HZ's internal library of React Components 🚧
https://hz-core.netlify.com
0 stars 0 forks source link

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

Open presto2116 opened 4 years ago

presto2116 commented 4 years ago

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>
elainen commented 4 years ago

@presto2116 can you paste here the full json block map that renders the above html?

talebbits commented 4 years ago

this is the page right ? http://twou-production.us-east-1.elasticbeanstalk.com/api/graphiql#query=%7B%0A%20%20page(id%3A%20%22214%22)%20%7B%0A%20%20%20%20url%0A%20%20%20%20...%20on%20LatestEntryPage%20%7B%0A%20%20%20%20%20%20title%0A%20%20%20%20%20%20body%7B%0A%20%20%20%20%20%20%20%20...%20on%20HeaderBodyBlock%7B%0A%20%20%20%20%20%20%20%20%20%20body%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A