question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Do you want to request a feature or report a bug? Bug

What is the current behavior? When trying to use paragraph, as in the below.

const blockRenderMap = Immutable.Map({
  'paragraph': {
    element: 'p',
  },
  'unstyled': {
    element: 'p',
  }
})

An invalid DOM is generated:

<p class="unstyled" data-block="true" data-editor="40m80" data-offset-key="ej8f1-0-0">
    <div data-offset-key="ej8f1-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr">
        <span data-offset-key="ej8f1-0-0">
            <span data-text="true">asdf</span>
        </span>
    </div>
</p>

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: https://jsfiddle.net/stopachka/m6z0xn4r/.

Check the output below what you are typing and notice the div nested inside the p tag. https://jsfiddle.net/fedan2nv/25/

What is the expected behavior? The P tag should only contain phrasing content. A div element is invalid. http://w3c.github.io/html/single-page.html#phrasing-content http://w3c.github.io/html/single-page.html#the-p-element

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

Draft.js 0.10.5 I can’t tell you if it worked in previous versions as I just started looking into Draft.JS

Windows 10, MacOS 10.13.3 All Browsers

See the render method at:

https://github.com/facebook/draft-js/blob/e9540910e0e0168e5fdb3ce5b9e42168b301bd91/src/component/contents/DraftEditorBlock.react.js#L228

Also see #395

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:19
  • Comments:6

github_iconTop GitHub Comments

3reactions
gegorovcommented, Feb 19, 2021

still an issue. Can those divs be changed to spans by default?

2reactions
iam-medvedevcommented, Sep 27, 2022

@sahilpurav Most likely, there will be no more releases. https://github.com/facebook/draft-js#status

Read more comments on GitHub >

github_iconTop Results From Across the Web

I'm getting an error using React: "Invalid DOM property `for ...
I'm creating a simple CRUD app using React for my front-end, and I'm having trouble with this error: app.js:21988 Warning: Invalid DOM property ......
Read more >
Invalid DOM property `for` warning in React [Solved]
To fix the React.js warning "Invalid DOM property `for`. Did you mean `htmlFor`", use the `htmlFor` prop instead of `for` on your label...
Read more >
Warning: Unknown DOM property for. Did you mean htmlFor ...
I get this warning whenever I attempt to use the for property on a element.
Read more >
Invalid DOM property `class`. Did you mean `className`?
In this video I will show you how to solve this error - Invalid DOM property `class`. Did you mean `className`?
Read more >
HTMLInputElement: invalid event - Web APIs | MDN
The invalid event fires when a submittable element has been checked for validity and doesn't satisfy its constraints.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found