Feature: add tagging ability in comment section

[DarrellRoberts]

Description

In the comment section add a feature that allows the user to tag other users. For example with a @ character similar to tagging in the Slack platform.

When the @ character is present, an autocomplete dropdown will appear whereby the user selects which user they want to tag (again similar to Slack).

When the comment is saved, it will send data to the be which will then trigger the Slack Web hook to process it and create a Slack notification, detailing:

• User(s) that has been tagged
• Which user sent the tag
• Path of where it happened
• Mention text content

e.g. "John tagged Sarah in /opportunity/5 : 'hey @Sarah, what do you think of this?'"

Proposed solution

This will be a big task so I propose breaking it down into these sections

1. Modify TextArea component on Comments so that when a user is tagged with the @ key, the tag is a different color than the rest of the text (usually blue). There are a few approaches to this but some involve the inject HTML method which we should avoid for XSS attack reasons. I'm drawn towards a CSS Mirroring technique which avoids this.
   May also be better to use a library such as react-mentions-ts but I'm hoping this won't be neccessary.
2. Create autocomplete component that is triggered by the @ character. This will work in the same way as the searchbar on the /dashboard/volunteer route with a debounced request and can use a Selector component to contain the results (I imagined you might have to create your own rather than using our current one).
3. Modify the comment mutation hook and form that will send the additional request data. We can use the current comment request and add a nested object like below:

{
// existing comment data,
taggedInfo: {
	authorId: number // e.g. 1
	taggedUserIds: Array<number> // e.g. [2, 3], so we can tagged multiple users
	path: string // e.g. "/dashboard/opportunity/1"
	mentionText: string //"hey @user2, @user3, can you help out"
}
}