Updating the value resets cursor position

[rbuchmann]

Hi, thanks for writing this, I used react-codemirror before but ran into JedWatson/react-codemirror#121 ...
Now, when I update the state used in the value prop in onValueChange, the cursor resets to the beginning of the text. Any hint on how to prevent that?

[scniro]

Hey @rbuchmann! Thanks for opening this up. I pushed some new changes for this in hopes that it'll fix your issue. I added a resetCursorOnSet prop that defaults to false should a user want to reset the cursor as you are experiencing (unsure if this would be even really valuable).

Either way, the internal cursor position should now be preserved by default when modifying value. 0.0.8 should be published to npm. Could you pull down and let me know if your issue is resolved?

[MartinHaeusler]

I'm writing a react-redux app, and it would be very useful to even have the text selection and cursor position (as well as the scroll bar position) of the editor available as prop / callback pairs. Do you think that would be possible?

[scniro]

@MartinHaeusler most likely I can do that. Would you mind explaining a bit more? I'm gathering that you'd like to pass text selection, cursor position, and scrollbar position as props. That should be easy enough. And then, are you suggesting a callback for each as they change. I'd envision something like this...

<CodeMirror
  scrollPos={scrollPos}
  cursorPos={cursorPos}
  textSelection={textSelection}
  onScrollPosChange={scrollPos => { }}
  onCursorPosChange={cursorPos => { }}
  onTextSelectionChange={textSelection => { }}
/>

I'll have time tomorrow to see what I can work up - but please let me know if this is indeed what you're asking for. Thanks!

[MartinHaeusler]

Yes, that's exactly what I was getting at. In a react-redux app, you will want to have as much of all that information (cursor position, scroll bar position etc.) as possible in the redux store. It's especially important e.g. when the actual react component is unmounted and re-created later on to have the same state again (think about the content of tabs in a tab sheet). Only the store state is available which you pass into the component as props, and you want to re-create the old editor state as closely as possible to the original one.

[scniro]

@MartinHaeusler okay I gave this a shot and the latest changes should be releases in 0.0.9 via npm. Check out the props cont. (wrapped codemirror programming api) portion of the doc. All the callbacks should be optional but also provide the prop/callback pair you were wishing to have. When you get some time can you try this out and share some feedback? Thanks!

[rbuchmann]

Hi @scniro thanks for the quick fix and sorry for being late with my reply. Unfortunately I can't test if it works, because now when I change something in the editor, I get a "string.split is not a function" error deep in codemirror.js. I am running the app from electron if that helps.

[rbuchmann]

Nvm, I think it was just due to me using the same handler signature as in react-codemirror(1). I'll experiment more and get back to you.

[rbuchmann]

It works, thanks a lot!

[joshy-joy]

Hi,
I have the same problem with codeMirror in Angular. Once I call the getSelection( ) method. My cursor is reset back to position 1. How could I solve this issue ?