😪 OK managed to integrate my @mention autocomplete component into the page itself
Would have loved to keep it separate as a component but I'm not keen to delay launch any further by wrangling with v-model and $emitting events all so to ensure the parent talks properly to the child component. So it'll be messy to manage so much code on a single vue file, but refactoring can come later. It's tech debt, but so be it – maintaining DX and motivation is more important at this stage.
And even as I solved integration, another 2 edge cases/bugs pop up.
* my current regex can't read the white space that gets created when a word wraps to the next line. So if you're typing a long comment, the @mention tooltip will start to inch 'backwards' from where your cursor is. Not great UX, even if users can still use the function.
* if you're typing a particularly long comment and scroll back up to the top of your comment, the 'bottom' of your comment will extend out beyond the footer of the website. Again, still works, but annoying!
And even as I solved integration, another 2 edge cases/bugs pop up.
* my current regex can't read the white space that gets created when a word wraps to the next line. So if you're typing a long comment, the @mention tooltip will start to inch 'backwards' from where your cursor is. Not great UX, even if users can still use the function.
* if you're typing a particularly long comment and scroll back up to the top of your comment, the 'bottom' of your comment will extend out beyond the footer of the website. Again, still works, but annoying!