convertFromHTML（）の使用時に空の要素が削除されました

Question

初期化時にDraft.js 0.10.0エディタにHTMLコンテンツを設定しようとしています。問題は、テキストを持たないHTMLブロック要素がContentBlocksに変換されないことです。改行から余分なスペースがすべて削除されます。

私は以下のコード（またはjsfiddle）に空のContentBlocksがあると思っていますが、何もありません。テキストを持つ要素だけがContentBlockを取得します。それはthis jsfiddleに見られるようにドラフト0.9.1で同じように動作するので、私は間違ったことをする必要があります。 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

まさか。

convertFromHTMLToContentBlocks.js：

// Kill whitespace after blocks 
    if (
    lastInA === '\r' 
) { 
    if (B.text === SPACE || B.text === '\n') { 
     return A; 
    } 

はあなたがconvertFromHTML()やフォークドラフト-jsからの独自の実装を使用して、このファイルを変更する必要があります空のブロックを維持します。