How to get event in onChange of Editor in Draft.js?

Question

I want to use event.stopPropagation() in onChange of Editor.

class MyEditor extends Component {
  constructor(props) {
    super(props);

    this.onChange = (editorState) => {
      // Is there a way to get event here?
    };
  }

  render() {
    // ...
    return (
      <Editor editorState={editorState} onChange={this.onChange} />
    );
  }
}

Is there a way to get the event? Thanks

UPDATE : add my case. I have an editor, it loads data from Redux saved in IndexedDB. Since the selection (cursor) will lose after convertToRaw and convertFromRaw , so I use a localEditorState to maintain the cursor.

The editor has a wrapper. If user click the editor wrapper, I want to move the cursor to end. If user click the editor inside, I want the cursor use the selection info from localEditorState.

class Send extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      localEditorState: EditorState.createEmpty(),
      shouldMoveCursorToEnd: false
    };

    // ...
  }

  componentDidMount() {
    const { loadEditor } = this.props;
    loadEditorFromIndexedDB();
  }

  onEditorWrapperClick() {
    const { editorState } = this.props;

    this.domEditor.focus();
    this.setState({ shouldMoveCursorToEnd: true });
  }

  onEditorChange(newEditorState) {
    // Without event.stopPropagation(), onEditorWrapperClick will also run, which is not what I want

    this.setState({ shouldMoveCursorToEnd: false });
    this.updateEditorText(newEditorState);
  }

  updateEditorText(newEditorState) {
    const { updateEditor } = this.props;

    this.setState({ localEditorState: newEditorState });

    updateEditor(newEditorState);
    this.saveToIndexedDB({ newEditorState });
  }

  render() {
    const { editorState } = this.props;
    const { localEditorState, shouldMoveCursorToEnd } = this.state;

    const editorStateWithSelection = shouldMoveCursorToEnd
      ? EditorState.moveFocusToEnd(editorState)
      : EditorState.acceptSelection(editorState, localEditorState.getSelection());

    return (
        <form onClick={this.onEditorWrapperClick}>
          <Editor editorState={editorStateWithSelection} onChange={this.onEditorChange} />
          <button type="submit">Send</button>
        </form>
    );
  }
}

export default Send;

Answer 1

I have a feeling the solution you are looking for will involve manipulating the onMouseDown() synthetic event of your <Editor/> component to preventDefault() / stopPropagation() and execute custom logic accordingly.

Clicks anywhere else inside your <Wrapper/> component should set editor state to place the caret at the end of your editor.

Your resulting implementation might look similar to the following:

// Component.
<form onMouseDown={this.handleWrapperClick}>
  <Editor .. onMouseDown={this.handleEditorClick}/>
</form>


// Logic.
handleWrapperClick = (event) => {

  // Manipulate editorState to focus / place caret at end of <Editor/>.
}
handleEditorClick = (event) => {

  // Intercept / Cancel Click Event.
  event.preventDefault()
  event.stopPropagation()

  // Set editorState to match selection info from localEditorState.
}

Answer 2

the default parameter passed to your onChange method is the event object. If I understand your intention correctly, I would modify the code as follows:

class MyEditor extends Component {
  constructor(props) {
    super(props);
  }

  onChange = (event, editorState) => {
    // event passed from Editor component
  };

  render() {
    // ...
    return (
      <Editor editorState={editorState} onChange={event => this.onChange(event, editorState)} />
    );
  }
}