import sidebar from "slate-sidebar";
 
@sidebar() // ----> Add this line and your sidebar is implemented in your editor
class EditorContainer extends React.Component<Props> {
  // On change, update the app's React state with the new editor state.
  render() {
    return (
      <div className="editor">
        <Editor {...this.props} />
      </div>
    );
  }
}
 
class App extends React.Component<{}, { value: Value }> {
  // Set the initial state when the app is first constructed.
  state = {
    value: initialValue
  };
 
  render() {
    return (
      <div className="container markdown-body">
        <EditorContainer
          value={this.state.value}
          onChange={({ value }) => this.setState({ value })}
          plugins={plugins}
        />
      </div>
    );
  }
}

const options = {
  icons: [
    {
      icon: OlList,
      title: "Order List"
    },
    {
      icon: UlList,
      title: "Unorder List"
    },
    {
      icon: Header1,
      title: "Header One"
    },
    {
      icon: Header2,
      title: "Header Two"
    }
  ],
  leftOffset: 20 // offset to left default -20
};