Implement Mention Module for User Referencing

Signed-off-by: Harshil-Jani <harshiljani2002@gmail.com>

package-lock.json

@@ -31,6 +31,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",
@@ -4729,6 +4730,18 @@
         "ajv": "^8.8.2"
       }
     },
+    "node_modules/angular-mentions": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/angular-mentions/-/angular-mentions-1.5.0.tgz",
+      "integrity": "sha512-6l63v7AvrX9vFzj2h7jAPTnQ390IomCz3HiQP+b3PnDvaZiycd+tiVavi5RxAIX8WYjsamAR+tTPCkOkBkqZ+w==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=7.2.0",
+        "@angular/core": ">=7.2.0"
+      }
+    },
     "node_modules/angularx-qrcode": {
       "version": "15.0.1",
       "resolved": "https://registry.npmjs.org/angularx-qrcode/-/angularx-qrcode-15.0.1.tgz",
@@ -16429,6 +16442,14 @@
         "fast-deep-equal": "^3.1.3"
       }
     },
+    "angular-mentions": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/angular-mentions/-/angular-mentions-1.5.0.tgz",
+      "integrity": "sha512-6l63v7AvrX9vFzj2h7jAPTnQ390IomCz3HiQP+b3PnDvaZiycd+tiVavi5RxAIX8WYjsamAR+tTPCkOkBkqZ+w==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "angularx-qrcode": {
       "version": "15.0.1",
       "resolved": "https://registry.npmjs.org/angularx-qrcode/-/angularx-qrcode-15.0.1.tgz",

package.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",

src/app/app.module.ts

@@ -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/editor/editor.html

@@ -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.ts

@@ -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,