Hlars/angular-comment-mentions
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bugfixes and improvements

Browse Source
This commit is contained in:
Hlars 2024-12-10 09:40:24 +01:00
parent 870695102a
commit 089150b88a
2 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/comment-box/comment-box.component.html
View File

@ -1,5 +1,5 @@
<div #commentInput cdkOverlayOrigin #commentBox="cdkOverlayOrigin" class="comment-box" contenteditable="true"
(input)="handleTextChangedEvent($event)" (keydown)="handleKeyEvent($event)" (focus)="onFocusIn($event)"
(input)="handleInputEvent($event)" (keydown)="handleKeyEvent($event)" (focus)="onFocusIn($event)"
(blur)="onFocusOut($event)">
</div>
@ -26,13 +26,14 @@
offsetX: menuOffsetX,
offsetY: menuOffsetY - menuOpenAboveYShift
}
]">
]" (overlayOutsideClick)="clickOutsideMenu($event)">
<div class="mat-mdc-menu-panel" #menuContent>
<div class="mat-mdc-menu-content">
@for (item of filteredSelectionList; track item; let index_ = $index) {
<div class="mat-mdc-menu-item mat-focus-indicator"
[class.mat-mdc-menu-item-highlighted]="index_ === selectedDropdownItemIndex"
[class.active]="index_ === selectedDropdownItemIndex">{{item}}</div>
[class.active]="index_ === selectedDropdownItemIndex" (click)="clickMention(index_)">{{item}}
</div>
}
</div>
</div>

35
src/app/comment-box/comment-box.component.ts
View File

@ -117,12 +117,11 @@ export class CommentBoxComponent implements MatFormFieldControl<string>, Control
onFocusOut(event: FocusEvent) {
if (!this._commentInputRef.nativeElement.contains(event.relatedTarget as Element)) {
this.commentText = JSON.stringify(this._commentInputRef.nativeElement.innerHTML);
this.commentText = this._commentInputRef.nativeElement.innerHTML;
this.touched = true;
this.focused = false;
this.onTouched();
this.onChange(this.commentText);
this.isOpen = false;
this.stateChanges.next();
}
}
@ -182,17 +181,33 @@ export class CommentBoxComponent implements MatFormFieldControl<string>, Control
break;
case ENTER || TAB:
this.addMention(event.target as HTMLInputElement);
this.handleTextChangedEvent(event, true, 1);
this.handleTextChanged(true, 1);
event.preventDefault();
break;
}
}
}
handleTextChangedEvent(event: any, skipPositionGetting: boolean = false, offset: number = 0) {
event.preventDefault();
clickOutsideMenu(event: any) {
if (this.isOpen)
this.removeFocusedMention(this._commentInputRef.nativeElement as HTMLInputElement);
this.isOpen = false;
}
let htmlElement = (event.target as HTMLInputElement);
clickMention(selectedIndex: number) {
this.selectedDropdownItemIndex = selectedIndex;
this.addMention(this._commentInputRef.nativeElement as HTMLInputElement);
this.handleTextChanged(true, 1);
}
handleInputEvent(event: Event) {
event.preventDefault();
this.handleTextChanged();
}
handleTextChanged(skipPositionGetting: boolean = false, offset: number = 0) {
let htmlElement = this._commentInputRef.nativeElement as HTMLInputElement;
if (!skipPositionGetting)
offset = Cursor.getPosition(htmlElement);
@ -214,6 +229,8 @@ export class CommentBoxComponent implements MatFormFieldControl<string>, Control
// filter menu entries
let searchQuery = focusedMentionElement.textContent?.substring(1);
this.filteredSelectionList = this.mentionListItems.filter((element) => element.toLocaleLowerCase().includes(searchQuery?.toLocaleLowerCase() ?? ""))
if (this.selectedDropdownItemIndex > this.filteredSelectionList.length - 1)
this.selectedDropdownItemIndex = this.filteredSelectionList.length - 1;
this.isOpen = true;
} else {
@ -253,7 +270,7 @@ export class CommentBoxComponent implements MatFormFieldControl<string>, Control
}
}
if (this.selectedDropdownItemIndex < this.mentionListItems.length - 1)
if (this.selectedDropdownItemIndex < this.filteredSelectionList.length - 1)
this.selectedDropdownItemIndex += 1;
else {
this.selectedDropdownItemIndex = 0;
@ -278,7 +295,7 @@ export class CommentBoxComponent implements MatFormFieldControl<string>, Control
if (this.selectedDropdownItemIndex > 0)
this.selectedDropdownItemIndex -= 1;
else {
this.selectedDropdownItemIndex = this.mentionListItems.length - 1;
this.selectedDropdownItemIndex = this.filteredSelectionList.length - 1;
this._menuContent.nativeElement.scrollTop = listEl.scrollHeight;
}
}
@ -288,7 +305,7 @@ export class CommentBoxComponent implements MatFormFieldControl<string>, Control
let focusedElements = element.querySelectorAll(Cursor.focusedClassName);
if (focusedMention) {
// set text and remove ignore to style mention
focusedMention.textContent = `@${this.mentionListItems[this.selectedDropdownItemIndex]}`;
focusedMention.textContent = `@${this.filteredSelectionList[this.selectedDropdownItemIndex]}`;
focusedMention.classList.remove(Cursor.focusedClassName);
focusedMention.classList.remove("ignore")