draftjs - 使用 convertFromHTML() 时删除了空元素

Question

我试图在初始化时用一些 HTML 内容填充 Draft.js 0.10.0 编辑器。问题是任何没有文本的 HTML 块元素都不会转换为 ContentBlocks。所以所有来自换行符的额外间距都被删除了。

我希望下面的代码(或在 jsfiddle 中)有一些空的 ContentBlocks 但没有。只有其中包含文本的元素才会获得 ContentBlock。它在 0.9.1 草案中的行为与 this jsfiddle 中看到的相同，所以我一定是做错了什么。 HTML 可能会有所不同，但如果需要对其进行操作，我确实可以访问它。

任何人都知道如何使用 convertFromHTML 显示空行/内容块？

const theHTML =
  '<div>first line</div>' +
  '<div></div>' +
  '<p></p>' +
  '<br />' +
  '<div>&nbsp;</div>' +
  '<p>sixth line</p>' +
  '<div>seventh line</div>';

const {
  Editor,
  EditorState,
  ContentState,
  convertFromHTML
} = Draft;

class Container extends React.Component {
  constructor(props) {
    super(props);
    const blocksFromHTML = convertFromHTML(theHTML);
    const contentState = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks,
      blocksFromHTML.entityMap
    );
    this.state = {
      editorState: EditorState.createWithContent(contentState)
    };
  }
  render() {
    return (
      <div className = "container-root" >
      <Editor
        editorState = { this.state.editorState }
        onChange = { this._handleChange } />
      </div>
    );
  }
  _handleChange = (editorState) => {
    this.setState({
      editorState
    });
  }
}

ReactDOM.render( <Container /> , document.getElementById('react-root'))

body {
  font-family: Helvetica, sans-serif;
}

.container-root {
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.10.0/Draft.js"></script>

<div id="react-root"></div>

Answer 1

给我 draft-js-import-html解决了这个问题。 stateFromHTML 函数将 html 转换为 contentState 并保留空标签。
对此:

const blocksFromHTML = convertFromHTML(theHTML);
const contentState = ContentState.createFromBlockArray(
  blocksFromHTML.contentBlocks,
  blocksFromHTML.entityMap
);

只需使用这个:

 const contentState = stateFromHTML(theHTML);