Implement Mention Module for User Referencing (#139)

Signed-off-by: Harshil-Jani <[email protected]>

Author: Harshil-Jani

package-lock.json

@@ -37,6 +37,7 @@
     "@scure/bip39": "^1.1.1",
     "@twogate/ngx-photo-gallery": "^1.4.0",
     "@types/sharedworker": "^0.0.91",
+    "angular-mentions": "^1.5.0",
     "angularx-qrcode": "^15.0.1",
     "html5-qrcode": "^2.3.7",
     "idb": "^7.1.1",

package.json

@@ -29,6 +29,7 @@ import { MatStepperModule } from '@angular/material/stepper';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatPaginatorModule } from '@angular/material/paginator';
+import { MentionModule } from 'angular-mentions';
 import { AuthGuardService } from './services/auth-guard';
 import { ConnectComponent } from './connect/connect';
 import { LogoutComponent } from './logout/logout';
@@ -294,6 +295,7 @@ import { ExampleComponent } from './example/example';
     MatPaginatorModule,
     MatSlideToggleModule,
     MatAutocompleteModule,
+    MentionModule,
     PickerModule,
     FormsModule,
     ReactiveFormsModule,

src/app/app.module.ts

@@ -75,7 +75,7 @@
     <div mat-dialog-content class="mat-dialog-content">
       <mat-form-field class="input-full-width">
         <mat-label>What's on your mind?</mat-label>
-        <textarea appContentEditor appAutoInputHeight #noteContent class="note-input noscrollbars" matInput type="text" formControlName="content" rows="2"></textarea>
+        <textarea appContentEditor appAutoInputHeight #noteContent class="note-input noscrollbars" matInput type="text" formControlName="content" rows="2" [mention]="followingUsers"></textarea>
       </mat-form-field>
 
       <!-- <mat-autocomplete #auto="matAutocomplete">

src/app/editor/editor.html

@@ -61,6 +61,8 @@ export class EditorComponent {
 
   subscriptions: Subscription[] = [];
 
+  followingUsers : string [] = this.profileService.following.map(follower => follower.name);
+
   constructor(
     private snackBar: MatSnackBar,
     public articleService: ArticleService,