[Beta: CodeMirror] User can undo past the current challenge

[ghost]

Challenge Name

Any challenge with a code editor.

Issue Description

Steps to reproduce:

1. Complete a challenge.
2. Enter some code in the new challenge.
3. Keep undoing typing and your current code will be reverted to that of the previous challenge.

Browser Information

• Browser Name, Version: Chrome 65.0.3325.181
• Operating System: macOS 10.13.3
• Mobile, Desktop, or Tablet: desktop

Screenshot

[love1024]

@raisedadead we need to call clearHistory of codemirror to get rid of undo history when new challenge comes. But when we know that this is new challenge so that we can clear history in Editor.jsx? componentWillMount and componentWillUpdate does not seem right for this. Any Suggestion?

[raisedadead]

You should be able to hook it to an action in the editor, when a new challenge arrives. /cc @Bouncey can you guide.

[love1024]

Yes i am getting id of challenge to compare if this challenge is new in componentWillUpdate and then clearing history. This is working fine expect for the first time. Working on this.

[love1024]

@raisedadead @Bouncey There are two ways to do this
First is to add setTimeout to clear codemirror history

  componentDidUpdate(nextProps) {
    if (nextProps.id !== this.props.id) {
      setTimeout(() => {
        this.refs.editor.getCodeMirror().doc.clearHistory();
      }, 0);
    }
  }

Settimeout is required because codemirror does not give updated value when new challenge is selected as of this issue JedWatson/react-codemirror#106
Second is to use the workaround given in issue to add key to codemirror component to get updated value.I used id of the challenge for this

<codemirror
key = {id}
...
/>

 componentDidUpdate(nextProps) {
    if (nextProps.id !== this.props.id) {
        this.refs.editor.getCodeMirror().doc.clearHistory();
    }
  }

So Any Suggestion which one to use?

[raisedadead]

I would want to move away to using https://github.com/scniro/react-codemirror2 however, in case its not trivial at the moment I would prefer your second solution.

[love1024]

yes codemirror2 seems a right option, for now i am raising PR with second solution.