Some progress on the @mention feature today
Managed to insert username either using mouse click or enter key. Yass! The key piece of code was discovering selectionStart, selectionEnd and setRangeText for html input elements, in order to be able to insert the @username into textarea when user hits the @ key and selects a username from a dropdown list tooltip. Another key part was using $refs in Vue.js to directly access the DOM element of the textarea. (Thanks to @yuyu!)
typeInTextarea(el, newText) {
const [start, end] = [el.selectionStart, el.selectionEnd]
el.setRangeText(newText, start, end, 'select')
},
But now I got an issue with the enter key. When I press enter again after inserting username, instead of adding a new line/carriage return, it inserts the username again (and again and again when I hit enter)! So basically using the enter key for adding a new line is completely shot now. 😵
Found ref, described the @mention functions needed perfectly: https://medium.com/streak-developer-blog/the-complexities-of-implementing-inline-autocomplete-for-content-editables-e358c0ed504b
typeInTextarea(el, newText) {
const [start, end] = [el.selectionStart, el.selectionEnd]
el.setRangeText(newText, start, end, 'select')
},
But now I got an issue with the enter key. When I press enter again after inserting username, instead of adding a new line/carriage return, it inserts the username again (and again and again when I hit enter)! So basically using the enter key for adding a new line is completely shot now. 😵
Found ref, described the @mention functions needed perfectly: https://medium.com/streak-developer-blog/the-complexities-of-implementing-inline-autocomplete-for-content-editables-e358c0ed504b
Jason Leow
Author
@Mostdefkima3ff thanks for the suggestion! :) Yeah am aware of tribute and a few others - vue-at, vue-mention. They are in my fallback plans for sure.. I'm trying to give it 1 more day of trying before I give up. And I'm sooo close urgh..like 80-90% there…
The mention stuff is a headache so I opted not to try to do that from scratch. I use At-Who but it's no longer maintained .. the alternative is https://github.com/zurb/tribute if you decide that building it from scratch becomes too much of a hassle. If not, ignore my comments :)
Please sign in to leave a comment.