From f01541a13126362137942903c941cde420b7b184 Mon Sep 17 00:00:00 2001
From: Harshil Jani <harshiljani2002@gmail.com>
Date: Thu, 17 Oct 2024 23:21:20 +0530
Subject: [PATCH] Implement Mention Module for User Referencing (#139)

Signed-off-by: Harshil-Jani <harshiljani2002@gmail.com>
---
 package-lock.json          | 21 +++++++++++++++++++++
 package.json               |  1 +
 src/app/app.module.ts      |  2 ++
 src/app/editor/editor.html |  2 +-
 src/app/editor/editor.ts   |  2 ++
 5 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 6e3013b2..c8a3e41b 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 4cf930a9..fe8fa9e3 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 7b254da5..46f6d19c 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/editor/editor.html b/src/app/editor/editor.html
index a15d73c9..87b788b9 100644
--- a/src/app/editor/editor.html
+++ b/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">
diff --git a/src/app/editor/editor.ts b/src/app/editor/editor.ts
index 849414b4..18374c9a 100644
--- a/src/app/editor/editor.ts
+++ b/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,