draft-js Invalid DOM

Invalid DOM

Open teddarling opened this issue 6 years ago • 6 comments

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