fix: 🍰 Suggestion List Filter

[ashleysylvialee]

🍰 Pullrequest

• Changed suggestion list filtering to search for prefix instead of substring
• Sorted results by length so stricter matches show up on top
  
• Added spacebar selection functionality for mentions

Issues

• Fixes 🐛 [Bug] Some users with short usernames missing on mention menu and cannot be mentioned #2635

Todo

• None

[Tirokk]

Hey @ashleysylvialee !

That looks really nice and well done !!! 🚀💫
An easy and good solution 🍀
Thanks for your contribution! 🙏🏼

I like to approve 👍🏼
… if the tests will run, what has nothing to do with your changes @ashleysylvialee .

Just in case you are interested on:
Would be cool if you could add a test for this in webapp/components/Editor/Editor.spec.js.
I see you have had this already in mind … ☝🏼
If you need any help for this, please let us know.

@Mogge may you have a look at failing tests in the backend?

[Tirokk]

I have a little additional functionally suggestion, if you are interested:

I would await that if I type a fitting slug, see ☝🏼, and hit the space key that the selected menu item will be chosen.

There is a similar example for hashtags already in the code @ashleysylvialee :

Ocelot-Social/webapp/components/Editor/Editor.vue

Lines 184 to 188 in b1dec55

	case key.SPACE:
	if (this.suggestionType === HASHTAG && this.query !== '') {
	this.selectItem({ id: this.query })
	}
	return true

Just in case you are interested … 😍

[Mogge]

I fixed the failing tests. Feel free to merge, although I like the suggestion @Tirokk brought up

[ashleysylvialee]

I have a little additional functionally suggestion, if you are interested:

I would await that if I type a fitting slug, see ☝🏼, and hit the space key that the selected menu item will be chosen.

There is a similar example for hashtags already in the code @ashleysylvialee :

Ocelot-Social/webapp/components/Editor/Editor.vue

Lines 184 to 188 in b1dec55

	case key.SPACE:
	if (this.suggestionType === HASHTAG && this.query !== '') {
	this.selectItem({ id: this.query })
	}
	return true

Just in case you are interested … 😍

Done! The tests I wrote are passing as well. 🥳 Anything else you'd like me to add here? 😊

[Tirokk]

Hey @ashleysylvialee .
Really cool job you’ve done!!!
Our users will be happy about your work and effort you spend. 🚀🚀💫💫

Great to have you in the project.

So I just fixed the linting: yarn lint --fix
And I approve.
Please merge!

PS: In case you change the locales they should be checked as well by : yarn locales --fix