search

webscopeio / react-textarea-autocomplete

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

Text touching inserted content is replaced. #61

Closed coniel closed 6 years ago

coniel commented 6 years ago

Hello, first of all, thank you for this great component! It has been incredibly useful for me. I'm using it as part of a latex editor plugin for draft js. Users can add variables into the latex using @mentions. The issue I'm having is that when a mention is used, any text after it that is not separated by a space, is removed. Here's a gif demonstrating the problem: word replaced

jukben commented 6 years ago

Hi 👋

That's actually a feature. But as I've tried to test the behavior of Github autocomplete they seem to "insert" the word than "replace" it. Maybe it would be worthy to introduce "insert"/"replace" option to set. What do you think?

EDIT: Probably, it should take caret as a separator, not the end of the word.

:rocket| -> enter -> 🚀

When you move the caret the behavior is the same, but when you re-edit the word it will take caret as a "delimiter".

See the GIF.

rocketrobot

We can mimic this behavior if you think it's better. I'm kinda surprised that it works like this.

coniel commented 6 years ago

Thanks for the quick reply. Having the option to either replace the entire word or replace the text up to caret would be a simple solution.

Whilst replacing up to the caret as Github's autocomplete does isn't ideal, I think that trying to avoid that would add more complexity to the component than it's worth. I don't think someone moving the caret back and editing the text (as opposed to using a backspace) will be such a common occurrence, and in the worst case the end result is just a minor inconvenience.

jukben commented 6 years ago

So what's your use case? Would you be satisfied with such a solution? I would probably do the same as GitHub. I would replace up to the last word based on last entered character. In your case, it would be just "insert" (in your gif use-case). Is it makes sense for you?

You are using minChar: 0, Am I right?

coniel commented 6 years ago

Yes, a Github style solution would be fine. I am indeed using minChar: 0. Here's another gif demonstrating a more realistic use case. As you can see, when I try and replace the first @foo variable I lose the rest of the content: changing variable

jukben commented 6 years ago

Thanks for the GIF, I will try to come with something ASAP. 👍

jukben commented 6 years ago

I will support this in the way how Github supports it. e.g

rta

@coniel Does it make a sense for you? Does it solve your issues?

coniel commented 6 years ago

Yes, that would be perfect. Thank you very much!

jukben commented 6 years ago

Hey, @coniel I've finally found some time for this – could you check it out the newest version https://github.com/webscopeio/react-textarea-autocomplete/releases/tag/v2.3.2? I hope I was able to fix it quite elegantly and it should work for your use-case well. 🙏 Sorry for waiting so long, I'm trying my best. 🚀

Feel free to comment it here, I will reopen it if it'll be still an issue.

coniel commented 6 years ago

I owe you long overdue thanks!

I only just had time to upgrade and test it out. It works perfectly. Thank you for fixing #62 as well!

jukben commented 6 years ago

Nice! I'm super glad, that I've fixed your case. If you are using React Textarea Autocomplete somewhere where it might have a reason to mention it, create PR for it! I'd be more than happy about it. Cheers!