package.json

@@ -8,7 +8,7 @@
  "prebuild": "gulp build.sass",
  "build": "ng build --prod",
  "prebuild-dev": "gulp build.sass --deploy-url=http://localhost/en",
- "build-dev": "ng build --output-path dist/en --deploy-url=/en/ --watch=true",
+ "build-dev": "ng build --output-path dist/en --deploy-url=/en/ --watch=true --poll=800",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "cypress run --debug",
@@ -27,7 +27,6 @@
  "@angular/platform-browser-dynamic": "~8.0.3",
  "@angular/router": "~8.0.3",
  "angular-plotly.js": "^1.3.2",
- "angular-text-input-autocomplete": "^0.3.0",
  "bn.js": "^4.11.8",
  "braintree-web": "3.41.0",
  "core-js": "~2.6.2",
@@ -44,6 +43,7 @@
  "plotly.js": "^1.47.4",
  "rxjs": "~6.5.2",
  "socket.io-client": "^2.2.0",
+ "textarea-caret": "^3.1.0",
  "tslib": "~1.9.3",
  "webtorrent": "^0.103.0",
  "zone.js": "~0.9.1"

src/app/common/components/autocomplete/index.ts

+export * from './text-input-autocomplete.module';
+export {
+ TextInputAutocompleteMenuComponent
+} from './text-input-autocomplete-menu.component';

src/app/common/components/autocomplete/item-renderers/posts-autocomplete.component.html

+<ng-container *ngIf="choice?.type == 'user'; else hashtagBlock">
+ <a
+ href="javascript:;"
+ (click)="selectChoice.next(choice.username)"
+ >
+ <img
+ class="m-postAutocompleteItemRenderer__avatar mdl-shadow--2dp"
+ [src]="minds.cdn_url + 'icon/' + choice.guid + '/medium/' + choice.icontime">
+ {{ choice.username }}
+ </a>
+</ng-container>
+
+<ng-template #hashtagBlock>
+ <a
+ href="javascript:;"
+ (click)="selectChoice.next(choice)"
+ >
+ #{{ choice }}
+ </a>
+</ng-template>

src/app/common/components/autocomplete/item-renderers/posts-autocomplete.component.scss

+m-post-autocomplete-item-renderer {
+ .m-postAutocompleteItemRenderer__avatar {
+ margin-right: 4px;
+ height: 24px;
+ border-radius: 50%;
+ }
+}

src/app/common/components/autocomplete/item-renderers/posts-autocomplete.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'm-post-autocomplete-item-renderer',
+ templateUrl: 'posts-autocomplete.component.html'
+})
+
+export class PostsAutocompleteItemRendererComponent {
+ @Input() choice;
+ @Input() selectChoice;
+
+ minds = window.Minds;
+}

src/app/common/components/autocomplete/text-input-autocomplete-container.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'm-text-input--autocomplete-container',
+ styles: [
+ `
+ :host {
+ position: relative;
+ display: block;
+ }
+ `
+ ],
+ template: '<ng-content></ng-content>'
+})
+export class TextInputAutocompleteContainerComponent {
+}

src/app/common/components/autocomplete/text-input-autocomplete-menu.component.html

+<ul
+ *ngIf="choices?.length > 0"
+ #dropdownMenu
+ class="dropdown-menu"
+ [style.top.px]="position?.top"
+ [style.left.px]="position?.left">
+ <li
+ *ngFor="let choice of choices; trackBy:trackById"
+ [class.active]="activeChoice === choice"
+ >
+ <ng-container
+ [ngTemplateOutlet]="itemTemplate"
+ [ngTemplateOutletContext]="{choice: choice, selectChoice: selectChoice}"
+ >
+ </ng-container>
+ </li>
+</ul>
+
+<ng-template #defaultItemTemplate let-choice="choice" let-selectChoice="selectChoice">
+ <a
+ href="javascript:;"
+ (click)="selectChoice.next(choice)"
+ >
+ {{ choice }}
+ </a>
+</ng-template>

src/app/common/components/autocomplete/text-input-autocomplete-menu.component.scss

+m-text-input--autocomplete-menu {
+ .dropdown-menu {
+ display: block;
+ max-height: 200px;
+ overflow-y: auto;
+ }
+}

src/app/common/components/autocomplete/text-input-autocomplete-menu.component.ts

+import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Component({
+ selector: 'm-text-input--autocomplete-menu',
+ templateUrl: 'text-input-autocomplete-menu.component.html',
+})
+export class TextInputAutocompleteMenuComponent implements OnInit {
+ @ViewChild('dropdownMenu', { static: true }) dropdownMenuElement: ElementRef<HTMLUListElement>;
+ @ViewChild('defaultItemTemplate', { static: true }) defaultItemTemplate;
+ itemTemplate: any;
+ position: { top: number; left: number };
+ selectChoice = new Subject();
+ activeChoice: any;
+ searchText: string;
+ choiceLoadError: any;
+ choiceLoading = false;
+ private _choices: any[];
+ trackById = (index: number, choice: any) =>
+ typeof choice.id !== 'undefined' ? choice.id : choice;
+
+ set choices(choices: any[]) {
+ this._choices = choices;
+ if (choices.indexOf(this.activeChoice) === -1 && choices.length > 0) {
+ this.activeChoice = choices[0];
+ }
+ }
+
+ get choices() {
+ return this._choices;
+ }
+
+ ngOnInit() {
+ if (!this.itemTemplate) {
+ this.itemTemplate = this.defaultItemTemplate;
+ }
+ }
+
+ @HostListener('document:keydown.ArrowDown', ['$event'])
+ onArrowDown(event: KeyboardEvent) {
+ event.preventDefault();
+ const index = this.choices.indexOf(this.activeChoice);
+ if (this.choices[index + 1]) {
+ this.scrollToChoice(index + 1);
+ }
+ }
+
+ @HostListener('document:keydown.ArrowUp', ['$event'])
+ onArrowUp(event: KeyboardEvent) {
+ event.preventDefault();
+ const index = this.choices.indexOf(this.activeChoice);
+ if (this.choices[index - 1]) {
+ this.scrollToChoice(index - 1);
+ }
+ }
+
+ @HostListener('document:keydown.Enter', ['$event'])
+ onEnter(event: KeyboardEvent) {
+ if (this.choices.indexOf(this.activeChoice) > -1) {
+ event.preventDefault();
+ this.selectChoice.next(this.activeChoice);
+ }
+ }
+
+ private scrollToChoice(index: number) {
+ this.activeChoice = this._choices[index];
+ if (this.dropdownMenuElement) {
+ const ulPosition = this.dropdownMenuElement.nativeElement.getBoundingClientRect();
+ const li = this.dropdownMenuElement.nativeElement.children[index];
+ const liPosition = li.getBoundingClientRect();
+ if (liPosition.top < ulPosition.top) {
+ li.scrollIntoView();
+ } else if (liPosition.bottom > ulPosition.bottom) {
+ li.scrollIntoView(false);
+ }
+ }
+ }
+}

src/app/common/components/autocomplete/text-input-autocomplete.directive.ts

+import {
+ ComponentFactoryResolver,
+ ComponentRef,
+ Directive,
+ ElementRef,
+ EventEmitter,
+ HostListener,
+ Injector,
+ Input,
+ OnDestroy,
+ Output,
+ ViewContainerRef
+} from '@angular/core';
+import { takeUntil } from 'rxjs/operators';
+import { TextInputAutocompleteMenuComponent } from './text-input-autocomplete-menu.component';
+import { Subject } from 'rxjs';
+import getCaretCoordinates from 'textarea-caret';
+import { getContentEditableCaretCoordinates } from "../../../helpers/contenteditable-caret";
+
+export interface ChoiceSelectedEvent {
+ choice: any;
+ insertedAt: {
+ start: number;
+ end: number;
+ };
+}
+
+@Directive({
+ selector:
+ 'minds-textarea[mTextInputAutocomplete],textarea[mTextInputAutocomplete],input[type="text"][mTextInputAutocomplete]'
+})
+export class TextInputAutocompleteDirective implements OnDestroy {
+ triggerCharacter: string;
+ /**
+ * The character that will trigger the menu to appear
+ */
+ @Input() triggerCharacters = ['@'];
+
+ /**
+ * The regular expression that will match the search text after the trigger character
+ */
+ @Input() searchRegexp = /^\w*$/;
+
+ /**
+ * The menu component to show with available options.
+ * You can extend the built in `TextInputAutocompleteMenuComponent` component to use a custom template
+ */
+ @Input() menuComponent = TextInputAutocompleteMenuComponent;
+
+ @Input() itemTemplate: any;
+
+ /**
+ * Called when the options menu is shown
+ */
+ @Output() menuShown = new EventEmitter();
+
+ /**
+ * Called when the options menu is hidden
+ */
+ @Output() menuHidden = new EventEmitter();
+
+ /**
+ * Called when a choice is selected
+ */
+ @Output() choiceSelected = new EventEmitter<ChoiceSelectedEvent>();
+
+ /**
+ * A function that accepts a search string and returns an array of choices. Can also return a promise.
+ */
+ @Input()
+ findChoices: (
+ searchText: string,
+ triggerCharacter?: string
+ ) => any[] | Promise<any[]>;
+
+ /**
+ * A function that formats the selected choice once selected.
+ */
+ @Input()
+ getChoiceLabel: (choice: any, triggerCharacter?: any) => string = choice => choice;
+
+ /* tslint:disable member-ordering */
+ private menu:
+ | {
+ component: ComponentRef<TextInputAutocompleteMenuComponent>;
+ triggerCharacterPosition: number;
+ lastCaretPosition?: number;
+ }
+ | undefined;
+
+ private menuHidden$ = new Subject();
+
+ constructor(
+ private componentFactoryResolver: ComponentFactoryResolver,
+ private viewContainerRef: ViewContainerRef,
+ private injector: Injector,
+ private elm: ElementRef
+ ) {
+ }
+
+ @HostListener('keypress', ['$event.key'])
+ onKeypress(key: string) {
+ const index: number = this.triggerCharacters.indexOf(key);
+ if (index !== -1) {
+ this.triggerCharacter = this.triggerCharacters[index];
+ this.showMenu();
+ }
+ }
+
+ @HostListener('input', ['$event'])
+ onChange(event: any) {
+ const value: string = event.target.value || event.target.textContent;
+ if (this.menu) {
+ if (
+ this.triggerCharacters.indexOf(
+ value[this.menu.triggerCharacterPosition]
+ ) === -1
+ ) {
+ this.hideMenu();
+ } else {
+ const cursor = this.elm.nativeElement.selectionStart;
+ if (cursor < this.menu.triggerCharacterPosition) {
+ this.hideMenu();
+ } else {
+ const searchText = value.slice(
+ this.menu.triggerCharacterPosition + 1,
+ cursor
+ );
+ if (!searchText.match(this.searchRegexp)) {
+ this.hideMenu();
+ } else {
+ this.menu.component.instance.searchText = searchText;
+ this.menu.component.instance.choices = [];
+ this.menu.component.instance.choiceLoadError = undefined;
+ this.menu.component.instance.choiceLoading = true;
+ this.menu.component.changeDetectorRef.detectChanges();
+ Promise.resolve(this.findChoices(searchText, this.triggerCharacter))
+ .then(choices => {
+ if (this.menu) {
+ this.menu.component.instance.choices = choices;
+ this.menu.component.instance.choiceLoading = false;
+ this.menu.component.changeDetectorRef.detectChanges();
+ }
+ })
+ .catch(err => {
+ if (this.menu) {
+ this.menu.component.instance.choiceLoading = false;
+ this.menu.component.instance.choiceLoadError = err;
+ this.menu.component.changeDetectorRef.detectChanges();
+ }
+ });
+ }
+ }
+ }
+ }
+ }
+
+ @HostListener('blur')
+ onBlur() {
+ if (this.menu) {
+ this.menu.lastCaretPosition = this.getTriggerCharPosition(this.elm.nativeElement);
+ }
+ }
+
+ private getTriggerCharPosition(element) {
+ if (element instanceof HTMLTextAreaElement || element instanceof HTMLInputElement) {
+ return this.elm.nativeElement.selectionStart;
+ } else {
+ return getContentEditableCaretCoordinates(element).start;
+ }
+ }
+
+ private showMenu() {
+ if (!this.menu) {
+ const menuFactory = this.componentFactoryResolver.resolveComponentFactory<TextInputAutocompleteMenuComponent>(this.menuComponent);
+ this.menu = {
+ component: this.viewContainerRef.createComponent(
+ menuFactory,
+ 0,
+ this.injector
+ ),
+ triggerCharacterPosition: this.getTriggerCharPosition(this.elm.nativeElement)
+ };
+ const lineHeight = +getComputedStyle(
+ this.elm.nativeElement
+ ).lineHeight!.replace(/px$/, '');
+
+ const { top, left } = this.elm.nativeElement instanceof HTMLTextAreaElement ?
+ <any>getCaretCoordinates(
+ this.elm.nativeElement,
+ this.elm.nativeElement.selectionStart
+ ) :
+ getContentEditableCaretCoordinates(this.elm.nativeElement)
+ ;
+ this.menu.component.instance.itemTemplate = this.itemTemplate;
+ this.menu.component.instance.position = {
+ top: top + lineHeight,
+ left
+ };
+ this.menu.component.changeDetectorRef.detectChanges();
+ this.menu.component.instance.selectChoice
+ .pipe(takeUntil(this.menuHidden$))
+ .subscribe(choice => {
+ const label = this.getChoiceLabel(choice, this.triggerCharacter);
+ let element: any = this.elm.nativeElement;
+
+ if (element.nodeName === 'MINDS-TEXTAREA') {
+ element = element.firstChild;
+ }
+ let value: string;
+ let selectionStart;
+ if (element instanceof HTMLTextAreaElement) {
+ value = element.value;
+ selectionStart = element.selectionStart;
+ } else {
+ value = element.textContent;
+ selectionStart = getContentEditableCaretCoordinates(element).start;
+ }
+
+ const startIndex = this.menu!.triggerCharacterPosition;
+
+ const start = value.slice(0, startIndex);
+
+ const caretPosition =
+ this.menu!.lastCaretPosition || selectionStart || 0;
+
+ const end = value.slice(caretPosition);
+
+ value = start + label + end;
+
+ if (element instanceof HTMLDivElement) {
+ element.textContent = value;
+ } else {
+ element.value = value;
+ }
+ // force ng model / form control to update
+ element.dispatchEvent(new Event('input'));
+ this.hideMenu();
+ const setCursorAt = (start + label).length;
+
+ if (element instanceof HTMLTextAreaElement || element instanceof HTMLInputElement) {
+ element.setSelectionRange(setCursorAt, setCursorAt);
+ } else {
+ const range = document.createRange();
+ const sel = window.getSelection();
+
+ range.setStart(element.firstChild, setCursorAt);
+ range.setEnd(element.firstChild, setCursorAt);
+ //range.collapse(true);
+ sel.removeAllRanges();
+ sel.addRange(range);
+ }
+
+ element.focus();
+
+ this.choiceSelected.emit({
+ choice,
+ insertedAt: {
+ start: startIndex,
+ end: startIndex + label.length
+ }
+ });
+ });
+ this.menuShown.emit();
+ }
+ }
+
+ private hideMenu() {
+ if (this.menu) {
+ this.menu.component.destroy();
+ this.menuHidden$.next();
+ this.menuHidden.emit();
+ this.menu = undefined;
+ }
+ }
+
+ ngOnDestroy() {
+ this.hideMenu();
+ }
+}

src/app/common/components/autocomplete/text-input-autocomplete.module.ts

+/* taken from https://github.com/mattlewis92/angular-text-input-autocomplete */
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TextInputAutocompleteDirective } from './text-input-autocomplete.directive';
+import { TextInputAutocompleteContainerComponent } from './text-input-autocomplete-container.component';
+import { TextInputAutocompleteMenuComponent } from './text-input-autocomplete-menu.component';
+import { PostsAutocompleteItemRendererComponent } from "./item-renderers/posts-autocomplete.component";
+
+@NgModule({
+ declarations: [
+ TextInputAutocompleteDirective,
+ TextInputAutocompleteContainerComponent,
+ TextInputAutocompleteMenuComponent,
+ PostsAutocompleteItemRendererComponent,
+ ],
+ imports: [CommonModule],
+ exports: [
+ TextInputAutocompleteDirective,
+ TextInputAutocompleteContainerComponent,
+ TextInputAutocompleteMenuComponent,
+ PostsAutocompleteItemRendererComponent,
+ ],
+ entryComponents: [TextInputAutocompleteMenuComponent]
+})
+export class TextInputAutocompleteModule {
+}

src/app/helpers/contenteditable-caret.ts

+// node_walk: walk the element tree, stop when func(node) returns false
+function node_walk(node, func) {
+ var result = func(node);
+ for (node = node.firstChild; result !== false && node; node = node.nextSibling)
+ result = node_walk(node, func);
+ return result;
+};
+
+// getCaretPosition: return [start, end] as offsets to elem.textContent that
+// correspond to the selected portion of text
+// (if start == end, caret is at given position and no text is selected)
+export function getContentEditableCaretCoordinates(elem) {
+ var sel: any = window.getSelection();
+ var cum_length = [0, 0];
+
+ if (sel.anchorNode == elem)
+ cum_length = [sel.anchorOffset, sel.extentOffset];
+ else {
+ var nodes_to_find = [sel.anchorNode, sel.extentNode];
+ if (!elem.contains(sel.anchorNode) || !elem.contains(sel.extentNode))
+ return undefined;
+ else {
+ var found: any = [0, 0];
+ var i;
+ node_walk(elem, function (node) {
+ for (i = 0; i < 2; i++) {
+ if (node == nodes_to_find[i]) {
+ found[i] = true;
+ if (found[i == 0 ? 1 : 0])
+ return false; // all done
+ }
+ }
+
+ if (node.textContent && !node.firstChild) {
+ for (i = 0; i < 2; i++) {
+ if (!found[i])
+ cum_length[i] += node.textContent.length;
+ }
+ }
+ });
+ cum_length[0] += sel.anchorOffset;
+ cum_length[1] += sel.extentOffset;
+ }
+ }
+ let coordinates = {
+ start: cum_length[0],
+ end: cum_length[1],
+ };
+
+ if (cum_length[0] <= cum_length[1])
+ return coordinates;
+
+ // it's reversed
+ coordinates.start = cum_length[1];
+ coordinates.end = cum_length[0];
+
+ return coordinates;
+}

src/app/modules/comments/comments.module.ts

@@ -15,6 +15,7 @@ import { CommentPosterComponent } from './poster/poster.component';
 import { CommentsTreeComponent } from './tree/tree.component';
 import { CommentsThreadComponent } from './thread/thread.component';
 import { CommentsService } from './comments.service';
+import { TextInputAutocompleteModule } from "../../common/components/autocomplete";
 
 @NgModule({
  imports: [
@@ -25,6 +26,7 @@ import { CommentsService } from './comments.service';
  VideoModule,
  TranslateModule,
  ModalsModule,
+ TextInputAutocompleteModule,
  ],
  declarations: [
  CommentsScrollDirective,

src/app/modules/comments/list/list.component.scss

@@ -245,6 +245,9 @@ minds-comments, m-comments__tree, .m-comment-wrapper {
  }
  }
 
+ .m-comments-composer form m-text-input--autocomplete-container {
+ width: 100%;
+ }
  .m-comments-composer form minds-textarea,
  .minds-editable-container textarea {
  width: 100%;
@@ -423,6 +426,6 @@ minds-comments, m-comments__tree, .m-comment-wrapper {
 }
 
 .m-comment--poster .minds-body {
- overflow: hidden;
+ overflow: visible;
  min-height: 50px;
 }

src/app/modules/comments/poster/poster.component.html

@@ -10,14 +10,28 @@
  <div class="m-comments-composer">
 
  <form (submit)="post($event)">
- <minds-textarea
- #message="Textarea"
- [(mModel)]="content"
- [disabled]="(ascendingInProgress || descendingInProgress) && attachment.hasFile()"
- (keyup)="getPostPreview(content)"
- (keypress)="keypress($event)"
- [placeholder]="conversation ? 'Enter your message' : 'Enter your comment'"
- ></minds-textarea>
+ <ng-template #itemTemplate let-choice="choice" let-selectChoice="selectChoice">
+ <m-post-autocomplete-item-renderer
+ [choice]="choice"
+ [selectChoice]="selectChoice"
+ ></m-post-autocomplete-item-renderer>
+ </ng-template>
+ <m-text-input--autocomplete-container>
+ <minds-textarea
+ #message="Textarea"
+ [(mModel)]="content"
+ [disabled]="(ascendingInProgress || descendingInProgress) && attachment.hasFile()"
+ (keyup)="getPostPreview(content)"
+ (keypress)="keypress($event)"
+ [placeholder]="conversation ? 'Enter your message' : 'Enter your comment'"
+ mTextInputAutocomplete
+ [findChoices]="suggestions.findSuggestions"
+ [getChoiceLabel]="suggestions.getChoiceLabel"
+ [itemTemplate]="itemTemplate"
+ [triggerCharacters]="['#', '@']"
+ ></minds-textarea>
+ </m-text-input--autocomplete-container>
+
  </form>
 
  <div class="minds-comment-span mdl-color-text--red-500" *ngIf="!canPost && triedToPost">

src/app/modules/comments/poster/poster.component.ts

@@ -16,6 +16,8 @@ import { Upload } from '../../../services/api/upload';
 import { AttachmentService } from '../../../services/attachment';
 import { Textarea } from '../../../common/components/editors/textarea.component';
 import { SocketsService } from '../../../services/sockets';
+import autobind from "../../../helpers/autobind";
+import { AutocompleteSuggestionsService } from "../../suggestions/services/autocomplete-suggestions.service";
 
 @Component({
  selector: 'm-comment__poster',
@@ -47,6 +49,7 @@ export class CommentPosterComponent {
  public client: Client,
  public attachment: AttachmentService,
  public sockets: SocketsService,
+ public suggestions: AutocompleteSuggestionsService,
  private renderer: Renderer,
  private cd: ChangeDetectorRef
  ) {

src/app/modules/groups/groups.module.ts

@@ -27,13 +27,13 @@ import { CommentsModule } from '../comments/comments.module';
 import { PosterModule } from '../newsfeed/poster/poster.module';
 import { HashtagsModule } from '../hashtags/hashtags.module';
 import { GroupMemberPreviews } from './profile/member-previews/member-previews.component';
-import { TextInputAutocompleteModule } from 'angular-text-input-autocomplete';
 import { CanDeactivateGroupService } from './profile/can-deactivate/can-deactivate-group.service';
 import { GroupProfileFeedComponent } from './profile/feed/feed.component';
 import { GroupProfileFeedSortedComponent } from "./profile/feed/sorted.component";
 import { NewsfeedModule } from "../newsfeed/newsfeed.module";
 import { GroupsProfileReviewComponent } from "./profile/review/review.component";
 import { GroupsKickModalComponent } from "./kick-modal/kick-modal.component";
+import { TextInputAutocompleteModule } from "../../common/components/autocomplete";
 
 const routes: Routes = [
  { path: 'groups/profile/:guid', component: GroupsProfile, canDeactivate: [CanDeactivateGroupService], children: [

src/app/modules/groups/profile/profile.html

@@ -93,20 +93,20 @@
  class="m-groupInfo__description"
  *ngIf="editing && group['is:owner']"
  >
- <mwl-text-input-autocomplete-container>
+ <m-text-input--autocomplete-container>
  <textarea
  name="briefdescription"
  [autoGrow]
  [(ngModel)]="group.briefdescription"
  placeholder="Enter a brief description"
  i18n-placeholder="@@GROUPS__DESCRIPTION_PLACEHOLDER"
- mwlTextInputAutocomplete
+ mTextInputAutocomplete
  [findChoices]="findTrendingHashtags.bind(this)"
  [getChoiceLabel]="getChoiceLabel"
- [triggerCharacter]="'#'"
+ [triggerCharacters]="['#']"
  >
  </textarea>
- </mwl-text-input-autocomplete-container>
+ </m-text-input--autocomplete-container>
  </p>
 
  <ng-container *ngIf="false">

src/app/modules/hashtags/hashtags.module.ts

@@ -5,12 +5,12 @@ import { TagsInput } from './tags-input/tags.component';
 import { CommonModule as NgCommonModule } from '@angular/common';
 import { CommonModule } from '../../common/common.module';
 import { FormsModule } from '@angular/forms';
-import { TextInputAutocompleteModule } from 'angular-text-input-autocomplete';
 import { TopbarHashtagsComponent } from './topbar/topbar.component';
 import { TopbarHashtagsService } from './service/topbar.service';
 import { HashtagsTopbarSelectorComponent } from './topbar-selector/topbar-selector.component';
 import { SidebarSelectorComponent } from './sidebar-selector/sidebar-selector.component';
 import { SidebarSelectorItemComponent } from './sidebar-selector/item.component';
+import { TextInputAutocompleteModule } from "../../common/components/autocomplete";
 
 @NgModule({
  imports: [

src/app/modules/legacy/legacy.module.ts

@@ -37,7 +37,7 @@ import { PostMenuModule } from '../../common/components/post-menu/post-menu.modu
 import { HovercardPopup } from './components/hovercard-popup/hovercard-popup';
 import { CarouselComponent } from './components/carousel.component';
 import { CommentsModule } from '../comments/comments.module';
-import { TextInputAutocompleteModule } from 'angular-text-input-autocomplete';
+import { TextInputAutocompleteModule } from "../../common/components/autocomplete";
 import { CommentComponentV2 } from "../comments/comment/comment.component";
 
 @NgModule({

src/app/modules/newsfeed/poster/poster.component.html

 <div class="mdl-card m-border post m-poster" *ngIf="session.isLoggedIn()">
  <div class="mdl-card__supporting-text">
  <form (submit)="post()">
- <mwl-text-input-autocomplete-container>
+ <ng-template #itemTemplate let-choice="choice" let-selectChoice="selectChoice">
+ <m-post-autocomplete-item-renderer
+ [choice]="choice"
+ [selectChoice]="selectChoice"
+ ></m-post-autocomplete-item-renderer>
+ </ng-template>
+
+ <m-text-input--autocomplete-container>
  <textarea
  class="mdl-textfield__input"
  type="text"
@@ -14,12 +21,13 @@
  placeholder="Speak your mind..."
  i18n-placeholder="@@MINDS__POSTER__SPEAK_YOUR_MIND"
  [autoGrow]
- mwlTextInputAutocomplete
- [findChoices]="findTrendingHashtags"
- [getChoiceLabel]="getChoiceLabel"
- triggerCharacter="#"
+ mTextInputAutocomplete
+ [findChoices]="suggestions.findSuggestions"
+ [getChoiceLabel]="suggestions.getChoiceLabel"
+ [itemTemplate]="itemTemplate"
+ [triggerCharacters]="['#', '@']"
  ></textarea>
- </mwl-text-input-autocomplete-container>
+ </m-text-input--autocomplete-container>
 
  <div
  class="m-poster__ActionBar"

src/app/modules/newsfeed/poster/poster.component.spec.ts

@@ -17,8 +17,7 @@ import { attachmentServiceMock } from '../../../../tests/attachment-service-mock
 import { AutoGrow } from '../../../common/directives/autogrow';
 import { MaterialUploadMock } from '../../../mocks/common/directives/material/upload-mock';
 import { CommonModule } from '@angular/common';
-import { MockComponent, MockDirective } from '../../../utils/mock';
-import { TextInputAutocompleteModule } from 'angular-text-input-autocomplete';
+import { MockComponent, MockDirective, MockService } from '../../../utils/mock';
 import { HashtagsSelectorComponent } from '../../hashtags/selector/selector.component';
 import { DropdownComponent } from '../../../common/components/dropdown/dropdown.component';
 import { TagsInput } from '../../hashtags/tags-input/tags.component';
@@ -26,6 +25,8 @@ import {TopbarHashtagsService} from "../../hashtags/service/topbar.service";
 import {topbarHashtagsServiceMock} from "../../../mocks/modules/hashtags/service/topbar.service.mock";
 import { InMemoryStorageService } from "../../../services/in-memory-storage.service";
 import { inMemoryStorageServiceMock } from "../../../../tests/in-memory-storage-service-mock.spec";
+import { TextInputAutocompleteModule } from "../../../common/components/autocomplete";
+import { AutocompleteSuggestionsService } from "../../suggestions/services/autocomplete-suggestions.service";
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 @Component({
@@ -99,6 +100,7 @@ describe('PosterComponent', () => {
  { provide: AttachmentService, useValue: attachmentServiceMock },
  { provide: TopbarHashtagsService, useValue: topbarHashtagsServiceMock },
  { provide: InMemoryStorageService, useValue: inMemoryStorageServiceMock },
+ { provide: AutocompleteSuggestionsService, useValue: MockService(AutocompleteSuggestionsService) },
  ],
  schemas: [
  NO_ERRORS_SCHEMA,
@@ -245,4 +247,4 @@ describe('PosterComponent', () => {
  expect(clientMock.post).toHaveBeenCalled();
  expect(clientMock.post.calls.mostRecent().args[0]).toEqual('api/v1/newsfeed');
  }));
-});
\ No newline at end of file
+});

src/app/modules/newsfeed/poster/poster.component.ts

@@ -11,6 +11,7 @@ import { Subject, Subscription } from "rxjs";
 import { debounceTime } from "rxjs/operators";
 import { Router } from "@angular/router";
 import { InMemoryStorageService } from "../../../services/in-memory-storage.service";
+import { AutocompleteSuggestionsService } from "../../suggestions/services/autocomplete-suggestions.service";
 
 @Component({
  moduleId: module.id,
@@ -54,6 +55,7 @@ export class PosterComponent {
  public client: Client,
  public upload: Upload,
  public attachment: AttachmentService,
+ public suggestions: AutocompleteSuggestionsService,
  protected elementRef: ElementRef,
  protected router: Router,
  protected inMemoryStorageService: InMemoryStorageService
@@ -253,18 +255,6 @@ export class PosterComponent {
  this.attachment.preview(message.value);
  }
 
- @autobind()
- async findTrendingHashtags(searchText: string) {
- const response: any = await this.client.get('api/v2/search/suggest/tags', { q: searchText });
- return response.tags
- .filter(item => item.toLowerCase().includes(searchText.toLowerCase()))
- .slice(0, 5);
- }
-
- getChoiceLabel(text: string) {
- return `#${text}`;
- }
-
  createBlog() {
  if (this.meta && this.meta.message) {
  const shouldNavigate = confirm(`Are you sure? The content will be moved to the blog editor.`);

src/app/modules/newsfeed/poster/poster.module.ts

@@ -9,7 +9,7 @@ import { ThirdPartyNetworksModule } from '../../third-party-networks/third-party
 import { CommonModule } from '../../../common/common.module';
 import { RouterModule } from '@angular/router';
 import { HashtagsModule } from '../../hashtags/hashtags.module';
-import { TextInputAutocompleteModule } from 'angular-text-input-autocomplete';
+import { TextInputAutocompleteModule } from "../../../common/components/autocomplete";
 
 @NgModule({
  imports: [

src/app/modules/suggestions/services/autocomplete-suggestions.service.ts

+import { Injectable } from '@angular/core';
+import { Client } from "../../../services/api/client";
+import autobind from "../../../helpers/autobind";
+
+@Injectable()
+export class AutocompleteSuggestionsService {
+
+ constructor(private client: Client) {
+ }
+
+ @autobind()
+ async findSuggestions(searchText: string, triggerCharacter: string) {
+ if (searchText == '')
+ return;
+
+ let url = 'api/v2/search/suggest';
+
+ if (triggerCharacter === '#') {
+ url += '/tags';
+ }
+ const response: any = await this.client.get(url, { q: searchText });
+
+ let result;
+ switch (triggerCharacter) {
+ case '#':
+ result = response.tags.filter(item => item.toLowerCase().includes(searchText.toLowerCase()));
+ break;
+ case '@':
+ result = response.entities
+ .filter(item => item.username.toLowerCase().includes(searchText.toLowerCase()));
+ break;
+ }
+
+ return result.slice(0,5);
+ }
+
+ getChoiceLabel(text: string, triggerCharacter: string) {
+ return `${triggerCharacter}${text}`;
+ }
+}

src/app/modules/suggestions/suggestions.module.ts

@@ -7,6 +7,7 @@ import { LegacyModule } from '../legacy/legacy.module';
 import { CommonModule } from '../../common/common.module';
 import { SuggestionsSidebar } from './channel/sidebar.component';
 import { GroupSuggestionsSidebarComponent } from "./groups/sidebar.component";
+import { AutocompleteSuggestionsService } from "./services/autocomplete-suggestions.service";
 
 @NgModule({
  imports: [
@@ -25,6 +26,9 @@ import { GroupSuggestionsSidebarComponent } from "./groups/sidebar.component";
  SuggestionsSidebar,
  GroupSuggestionsSidebarComponent,
  ],
+ providers: [
+ AutocompleteSuggestionsService,
+ ]
 })
 export class SuggestionsModule {
 }

src/stylesheets/components/components.scss

@@ -759,13 +759,12 @@ svg.m-facebook-icon{
  visibility: hidden;
 }
 
-mwl-text-input-autocomplete-menu {
+m-text-input--autocomplete-menu {
  ul.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
- display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
@@ -785,7 +784,7 @@ mwl-text-input-autocomplete-menu {
  li {
  a {
  display: block;
- padding: 3px 20px;
+ padding: $minds-padding / 2 $minds-padding;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;