fix: support preview full list of mention suggestion (#949)

taiga-family · Apr 3, 2024 · 68d8773 · 68d8773
1 parent c412680
commit 68d8773
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 6 deletions.
diff --git a/projects/demo/src/app/pages/mention/examples/1/index.html b/projects/demo/src/app/pages/mention/examples/1/index.html
@@ -3,11 +3,12 @@
     [tools]="builtInTools"
 >
     <ng-container ngProjectAs="mention">
-        <tui-data-list>
+        <tui-data-list (mouseleave.capture)="$event.stopPropagation()">
             <button
                 *ngFor="let item of getFilteredItems(items, this.wysiwyg?.mentionSuggestions)"
                 tuiOption
                 (click)="setMention(item)"
+                (keydown.enter)="setMention(item)"
             >
                 {{ item.name }}
                 <tui-avatar

diff --git a/projects/demo/src/app/pages/mention/examples/1/index.less b/projects/demo/src/app/pages/mention/examples/1/index.less
@@ -1,5 +1,6 @@
 :host {
-    ::ng-deep span[data-type='mention'] {
+    ::ng-deep .my-mention {
+        background: var(--tui-autofill);
         border: 1px solid var(--tui-base-08);
         border-radius: 0.4rem;
         padding: 0.1rem 0.3rem;

diff --git a/projects/demo/src/app/pages/mention/examples/1/index.ts b/projects/demo/src/app/pages/mention/examples/1/index.ts
@@ -56,7 +56,7 @@ export default class ExampleComponent {
     ];
 
     protected control = new FormControl(`
-        <p><span data-type="mention">@a.inkin</span> FYI</p>
+        <p><span class="my-mention" data-type="mention">@a.inkin</span> FYI</p>
     `);
 
     protected readonly items: readonly User[] = [
@@ -90,7 +90,7 @@ export default class ExampleComponent {
             return;
         }
 
-        const replaceText = `<span data-type="mention">@${item.login}</span>&nbsp;`;
+        const replaceText = `<span class="my-mention" data-type="mention">@${item.login}</span>&nbsp;`;
         const to = editor.state.selection.to;
         const from =
             editor.state.selection.from -

diff --git a/projects/tui-editor/src/components/editor/editor.component.ts b/projects/tui-editor/src/components/editor/editor.component.ts
@@ -99,6 +99,7 @@ export class TuiEditorComponent
     @Output()
     public readonly fileAttached = new EventEmitter<Array<TuiEditorAttachedFile<any>>>();
 
+    public hasMentionPlugin = false;
     public focused = false;
 
     public readonly editorService = inject(TuiTiptapEditorService);
@@ -111,7 +112,15 @@ export class TuiEditorComponent
 
     protected sub = this.editorLoaded$
         .pipe(delay(0), takeUntil(this.destroy$))
-        .subscribe(() => this.patchContentEditableElement());
+        .subscribe(() => {
+            this.hasMentionPlugin = !!this.editorService
+                .getOriginTiptapEditor()
+                .extensionManager.extensions.find(
+                    extension => extension.name === 'mention',
+                );
+
+            this.patchContentEditableElement();
+        });
 
     public get editor(): AbstractTuiEditor | null {
         return this.editorService.getOriginTiptapEditor() ? this.editorService : null;
@@ -136,6 +145,10 @@ export class TuiEditorComponent
             : '';
     }
 
+    public get isMentionMode(): boolean {
+        return this.hasMentionPlugin && this.selectionState.before?.startsWith('@');
+    }
+
     public override writeValue(value: string | null): void {
         if (value === this.value) {
             return;
@@ -249,7 +262,7 @@ export class TuiEditorComponent
     private readonly openDropdownWhen = (range: Range): boolean =>
         this.currentFocusedNodeIsTextAnchor(range) ||
         this.currentFocusedNodeIsImageAnchor ||
-        this.mentionSuggestions.length > 0;
+        this.isMentionMode;
 
     /**
      * @description:

diff --git a/projects/tui-editor/src/extensions/mention/index.ts b/projects/tui-editor/src/extensions/mention/index.ts
@@ -38,6 +38,10 @@ export const TuiMention = Node.create<TuiMentionOptions>({
                 parseHTML: element => element.innerText,
                 renderHTML: () => ({'data-type': this.name}),
             },
+            class: {
+                default: null,
+                keepOnSplit: true,
+            },
         };
     },