webscopeio / react-textarea-autocomplete

📝 React component implements configurable GitHub's like textarea autocomplete.
MIT License
454 stars 80 forks source link

Provide getters/setters and listener for the caret position #24

Closed jukben closed 6 years ago

jukben commented 7 years ago

Based on the idea from #23

It would be nice to provide getter and setter for caret position.

<ReactTextareaAutocomplete 
    onCaretPositionChange={(position: integer, ref: React$Class) => void}}
    ref={ref => {this.textarea = ref}}
    ...
/>

...

// Getter:

this.textarea.getCaretPosition(): integer;

// Setter:

this.textarea.setCaretPosition(position: integer);

We should use our dependency textarea-caret as much as possible.

Could help: https://stackoverflow.com/questions/36978192/how-to-get-text-cursor-position-after-keypress-event-happened

marcinlichwala commented 7 years ago

Hello, @jukben! I would like to give it a go :)

jukben commented 7 years ago

@marcinlichwala Hi @marcinlichwala! Of course, go for it! Don't hesitate to ask for help. Just mention me in PR and together we'll figure it out for sure.

For the others interested, there is (also easy!) #23 ❤️ @Skotu?

marcinlichwala commented 7 years ago

Hello @jukben,

I'm a bit confused. You mention 'integer' types in the issue description whereas you added the textarea-caret as the recommended dependency. Do you want the methods to return the caret position based on the coordinates or the setSelectionRange type of position? There is already setTextareaCaret method so I believe it might be a duplication.

marcinlichwala commented 7 years ago

Created a PR for the integer position (not coordinates). Still have some issues with one test which I think would be valuable. https://github.com/webscopeio/react-textarea-autocomplete/pull/28

jukben commented 7 years ago

Hey, you are right. But you did it with an ease! I will continue in PR. Good job anyway.

jukben commented 6 years ago

Closed by https://github.com/webscopeio/react-textarea-autocomplete/commit/c9e09d6eb79bba0a760a1f8b8e4c2bdfa4835973 💪