Pasting Rich Text Into Chrome & Firefox on Windows Adds A Space On Either Side

When pasting rich text into Chrome it adds a space on either side of the string (first screenshot). When pasting in any other browser (Safari or Firefox) it behaves fine (second screenshot). It seems that Chrome is using the HTML text and the others are using plain text. Is there a way to get Chrome to trim the string on paste? Tried using handlePastedText but I’m not sure how to update the state on firing. Chrome: Safari:

[aem]

not sure why this would happen, but this code should work to trim the trailing whitespace assuming your change handler is called onChange:

  handlePastedText(text) {
    const {editorState} = this.state;
    const blockMap = ContentState.createFromText(text.trim()).blockMap;
    const newState = Modifier.replaceWithFragment(editorState.getCurrentContent(), editorState.getSelection(), blockMap);
    this.onChange(EditorState.push(editorState, newState, 'insert-fragment'));
    return true;
  },

[aem]

ES6 class members aren’t auto-bound like they are in React.createClass, implementing members as arrow functions solves this problem:

class TestEditor extends React.Component {
  constructor(props) {
    super(props);
    const initialContent = ContentState.createFromText(props.inititalText);
    const editorState = EditorState.createWithContent(initialContent);
    this.state = {editorState};
  }

  onChange = (editorState) => this.setState({editorState});

  handlePastedText = (text) => {
    const {editorState} = this.state;
    const blockMap = ContentState.createFromText(stripNewLines(text)).blockMap;
    const newState = Modifier.replaceWithFragment(editorState.getCurrentContent(), editorState.getSelection(), blockMap);
    this.onChange(EditorState.push(editorState, newState, 'insert-fragment'));
    return true;
  };

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