@libs-ui/components-inputs-mention

Thêm tính năng mention (gợi ý khi gõ ký tự trigger) vào các input, textarea hoặc contenteditable elements.

Giới thiệu

LibsUiComponentsInputsMentionDirective là một standalone Angular directive cho phép người dùng tìm kiếm và chọn các mục từ danh sách khi họ gõ một ký tự kích hoạt (ví dụ: @, #).

Tính năng

• ✅ Hỗ trợ nhiều ký tự trigger với cấu hình riêng biệt.
• ✅ Hoạt động trên input, textarea và các thành phần contenteditable.
• ✅ Tích hợp sẵn với các trình soạn thảo như Quill.
• ✅ Tùy chỉnh template danh sách gợi ý.
• ✅ Hỗ trợ Iframe.
• ✅ Angular Signals cho việc quản lý trạng thái.
• ✅ Standalone Directive.

Khi nào sử dụng

• Khi bạn cần tính năng mention trong khung chat hoặc bình luận.
• Khi bạn muốn hỗ trợ phím tắt hoặc tag nhanh trong các form nhập liệu.
• Khi bạn cần tích hợp mention vào các trình soạn thảo văn bản giàu tính năng (Rich Text Editors).

Cài đặt

# npm
npm install @libs-ui/components-inputs-mention

# yarn
yarn add @libs-ui/components-inputs-mention

Import

import { LibsUiComponentsInputsMentionDirective } from '@libs-ui/components-inputs-mention';

@Component({
  standalone: true,
  imports: [LibsUiComponentsInputsMentionDirective],
  // ...
})
export class YourComponent {}

Ví dụ

Cơ bản

<input
  type="text"
  LibsUiComponentsInputsMentionDirective
  [mentionConfig]="{ items: items, triggerChar: '@' }" />

Đa Trigger

<div
  contenteditable="true"
  LibsUiComponentsInputsMentionDirective
  [mentionConfig]="{ 
    items: people, 
    triggerChar: '@',
    mention: [
      { items: tags, triggerChar: '#' }
    ]
  }"></div>

API

[LibsUiComponentsInputsMentionDirective]

Inputs

| Property | Type | Default | Description | | ----------------------- | -------------------------------- | ----------- | ------------------------------------------------- | | [timeDelayInit] | number | 0 | Thời gian trễ trước khi khởi tạo directive logic. | | [mentionConfig] | IMentionConfig | undefined | Cấu hình chính cho mention. | | [mentionListTemplate] | TemplateRef<TYPE_TEMPLATE_REF> | undefined | Template tùy chỉnh cho danh sách gợi ý. |

Outputs

| Property | Type | Description | | ---------------------- | -------------------------------------------- | --------------------------------------------------------------- | | (outSearchTerm) | EventEmitter<string \| undefined> | Emits từ khóa tìm kiếm hiện tại. | | (outItemSelected) | EventEmitter<unknown> | Emits đối tượng mục được chọn. | | (outToggle) | EventEmitter<boolean> | Emits true khi danh sách hiện, false khi ẩn. | | (outInsertMention) | EventEmitter<IMentionInsert> | Emits khi một mention được chèn (dành cho các editor phức tạp). | | (outFunctionControl) | EventEmitter<IMentionFunctionControlEvent> | Cung cấp phương thức điều khiển thủ công. |

Types & Interfaces

export interface IMentionConfig extends IMentionItem {
  disableStyle?: boolean;
  iframe?: string;
  mention?: Array<IMentionItem>;
}

export interface IMentionItem {
  triggerChar?: string;
  labelKey?: string;
  disableSort?: boolean;
  disableSearch?: boolean;
  dropUp?: boolean;
  allowSpace?: boolean;
  limitSpaceSearchQuery?: number;
  returnTrigger?: boolean;
  mentionSelect?: (item: unknown, triggerChar?: string) => string;
  mentionFilter?: (searchString: string, items?: Array<unknown>) => Array<unknown> | undefined;
  mentionEventName?: 'click' | 'mouseenter';
  mentionActionByEvent?: (item: unknown, triggerChars?: string) => void;
  items: Array<Record<string, string | undefined>>;

  zIndex?: number;
}

export interface IMentionInsert {
  data: {
    id: string;
    feId: string;
    value: string;
  };
  lengthKey: number;
}

export interface IMentionFunctionControlEvent {
  addMention: (inputEvent: boolean) => void;
}

Công nghệ

| Technology | Version | Purpose | | --------------- | ------- | ---------------- | | Angular | 18+ | Framework | | Angular Signals | - | State management | | TailwindCSS | 3.x | Styling | | OnPush | - | Change Detection |

Demo

npx nx serve core-ui

Truy cập: http://localhost:4200/inputs/mention

License

MIT