remote html content as editorState

[binaryhq]

Hello geeks.

I have problem here. might be silly, please help componentwillmount will get html content from remote server. How do i use this html as editorState? here is my simplified test code.

import { EditorState, convertToRaw, ContentState, createFromText, Modifier } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
export default  class SingleTemplate extends Component {
    constructor(props){
        super(props)
        this.state = {
           // editorState: EditorState.createEmpty(),          
        }
    }

    componentWillMount(){
        fetch(url)
        .then(response => {
          if (response.ok) {
            return response.json();
          } else {
            throw new Error('Something went wrong ...');
          }
        })
        //basically data.data.subject has html content 
        .then(data => this.setState({ editorState:EditorState.createWithContent(createFromText(data.data.subject)) ,  isLoading: false }))
        .catch(error => this.setState({ error, isLoading: false }));
    }

    render(){
        return(
             <Editor
                  editorState={this.state.editorState}
                  wrapperClassName="demo-wrapper"
                  editorClassName="demo-editor"
                  onEditorStateChange={this.onEditorStateChange}
                  suppressContentEditableWarning 
                />
        )
    }
}

I'm i doing anything wrong. Please suggest.

I used Modifier, something like this.

let editorState = this.state.editorState;
let selection = editorState.getSelection();
let contentState = editorState.getCurrentContent();
let ncs = Modifier.insertText(contentState, selection, data.data.body);
console.log(ncs);
let es = EditorState.push(editorState, ncs, 'change-block-data');
this.setState({editorState: es})

this prints html as unicode text.

please help.

[Sashkan]

You can fetch and populate your Editor Stat this way :

  constructor(props) {
    super(props);
    const html = however you get your html
    let editorState
    if (html) {
      const contentBlock = htmlToDraft(html)
      if (contentBlock) {
        const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks)
        editorState = EditorState.createWithContent(contentState)
      } else {
        editorState = EditorState.createEmpty()
      }
    } else {
      editorState = EditorState.createEmpty()
    }
    this.state = {
      editorState,
    }
  }

And render your editor this way :

  render() {
    const { editorState } = this.state;
    return (
        <div>
          <Editor
            editorStyle={{
              padding: '0 10px',
            }}
            editorState={editorState}
            wrapperClassName="demo-wrapper"
            editorClassName="demo-editor"
            onEditorStateChange={this.onEditorStateChange}
          />
        </div>
    )
  }

[namnh06]

@Sashkan thanks for your recommend, but if I want to add an image from parent component, we have to re-render editor again ?

[marty331]

You can fetch and populate your Editor Stat this way :

  constructor(props) {
    super(props);
    const html = however you get your html
    let editorState
    if (html) {
      const contentBlock = htmlToDraft(html)
      if (contentBlock) {
        const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks)
        editorState = EditorState.createWithContent(contentState)
      } else {
        editorState = EditorState.createEmpty()
      }
    } else {
      editorState = EditorState.createEmpty()
    }
    this.state = {
      editorState,
    }
  }

And render your editor this way :

  render() {
    const { editorState } = this.state;
    return (
        <div>
          <Editor
            editorStyle={{
              padding: '0 10px',
            }}
            editorState={editorState}
            wrapperClassName="demo-wrapper"
            editorClassName="demo-editor"
            onEditorStateChange={this.onEditorStateChange}
          />
        </div>
    )
  }

This should be posted in the documentation, I was stuck till I found your answer.