Uncaught TypeError: props.getEditorState is not a function while using the separatorButton

[BlastWind]

Here's my setup:

import { Editor, createEditorState, AtomicBlock } from "medium-draft";

import { EditorState, AtomicBlockUtils } from "draft-js";
import { BLOCK_BUTTONS, INLINE_BUTTONS, ImageSideButton } from "medium-draft";
 ......

const sideButtons = [
  { title: "Image", component: ImageSideButton },
  { title: "Embed", component: SeparatorSideButton }
];

then in Render I would do <Editor sideButtons={sideButtons}/>

The ImageSideButton works perfectly, however, pressing the separator button will throw "props.getEditorState is not a function..." in a file named atomic.js

Here's the code for SeparatorSideButton, I copied it from your example.js:

class SeparatorSideButton extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    console.log(this.props);
    let editorState = this.props.getEditorState();
    const content = editorState.getCurrentContent();
    const contentWithEntity = content.createEntity(
      "separator",
      "IMMUTABLE",
      {}
    );
    const entityKey = contentWithEntity.getLastCreatedEntityKey();

    
    editorState = EditorState.push(
      editorState,
      contentWithEntity,
      "create-entity"
    );

    this.props.setEditorState(
      AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, "-")
    );

    this.props.close();
  }

  render() {
    return (
      <button
        className="md-sb-button md-sb-img-button"
        type="button"
        title="Add a separator"
        onClick={this.onClick}
      >
        <i className="fa fa-minus" />
      </button>
    );
  }
}

And it seems to be throwing from

this.props.setEditorState(
      AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, "-")
    );

Thanks in advance.

[sahilpaudel]

Getting the same issue anyone will be looking into this one? @brijeshb42