Draft Js - Add a react component

Question

I'm trying desesperatelly to understand Draft Js logic but I don't find a good tutorial or documentation on the subject.

What I want for the moment is just a function (triggered by a button below) that can add at the end of the editor one of my react component.

Then I would like to be able to edit the content inside and why not change component type without loosing the raw text.

I've seen many many things, API documentation, wierd functions, maps etc... But I still don't know how to do this.

PS: My code is just the draft basic editor for the moment.

Thanks,

Lucien

Answer 1

Short answer: Use a container component that holds the editor, button, and the added component.

React solves the problem of building networks of "things" that interact with Composition (as opposed to Inheritance). Create a stateful ("class-based") component, store "all the stuff that changes" inside that component's state, and then you won't lose any data when components inside that component change. Pass data to child components as props.

The DraftJS documentation tells you how to store editor data in state.

It will look something like this:

class Container extends React.Component {
  constructor(props) {
    this.state = {
      editorState: EditorState.createEmpty(),
      // Make sure 'MyComponent` is a React component defined in this file or imported from somewhere
      addedComponentType: MyComponent,
      showAddedComponent: false,
    }
  }

  handleEditorChange = (editorState) => this.setState({editorState})
  // shorthand for `this.setState({editorState: editorState})`

  toggleShowAddedComponent = () => this.setState({
    showAddedComponent: !this.state.showAddedComponent
  })

  render() {
    const {addedComponentType: AddedComponent} = this.state
    // Shorthand for `const AddedComponent = this.state.addedComponentType`
    return (
      <Editor editorState={this.state.editorState} onChange={this.handleEditorChange} />
      {this.state.showAddedComponent && <AddedComponent>Hello World!</AddedComponent>}
      <button onClick={this.toggleShowAddedComponent}>
        {this.state.showAddedComponent ? 'Hide' : 'Show'} Added Component
      </button>
    )
  }
}