Fix cursor jumping while editing in codemirror #145
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @@ -40,6 +40,10 @@ export default class Editor extends Component { | |||
| cssRequire(`./${highlightTheme}.css`); | |||
| } | |||
|
|
|||
| shouldComponentUpdate() { | |||
| return false; | |||
|
That’s great, thanks! |
|
Doesn't this break hot-reloading the code for examples? I mean, when you save the |
|
@mik01aj no, it still behaves as it used to. Namely, the example code in the live editor gets replaced with what's in |
|
Yes, thanks. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #139
The reason why this happens is because the
<Editor />component re-renders when code changes by the editor itself. So when thehandleChange()event is fired, it's re-rendering the<Editor />which resets where the cursor position is.There's 2 ways to fix this. One way is to capture the current cursor position in
componentWillReceiveProps()and then set it again incomponentDidUpdate(), but that's a bit hacky and a lot of machinery for no real reason.The other, and I think simpler approach (and what is implemented in this PR), is to just not have the
<Editor />update once it's been rendered, so it no longer reacts to property updates entirely. This is okay because we just need the codemirror editor rendered once and then just pass along any code changes to the<Preview />component from then on, which still responds and updates to code changes as expected.With this implementation, we can even tighten up the
UPDATE_DELAYif we wanted to. I changed it from 100 to 10 in this PR and it works great.