Based on lexical editor, inspired by Dify and lexical-beautiful-mentions.
Mentions
import { Mentions } from '@yuntijs/ui';Based on lexical editor, inspired by Dify and lexical-beautiful-mentions.
import { Mentions } from '@yuntijs/ui';Based on lexical editor, inspired by Dify and lexical-beautiful-mentions.
import { Icon } from '@lobehub/ui';
import { Mentions } from '@yuntijs/ui';
import { Smile } from 'lucide-react';
export default () => {
return (
<Mentions
autoSize={{
minRows: 3,
}}
defaultValue="👋，I'm {{1.zhang}}"
options={[{ label: 'zhang', value: '1.zhang', icon: <Icon icon={Smile} /> }]}
triggers={['@']}
/>
);
};Press shift + enter for line break, press enter to send and clear input.
| Name | Description | Type | Default |
|---|---|---|---|
| className | -- | string | -- |
| classNames | -- | {wrapper?:string;menuOverlay?:string} | -- |
| wrapperClassname | -- | string | -- |
| placeholder | -- | ReactNode | -- |
| style | -- | {} | -- |
| value | -- | string | -- |
| defaultValue | -- | string | -- |
| readOnly | -- | boolean | -- |
| disabled | -- | boolean | -- |
| onChange | -- | (text:string)=>void | -- |
| onBlur | -- | ()=>void | -- |
| onFocus | -- | ()=>void | -- |
| onPressEnter | 按下回车的回调，指定后会改变回车的默认行为，换行需要使用 shift + enter | (value:string,__1:{ event: KeyboardEvent | null; })=>void | -- |
| onKeyDown | 用户输入 trigger 后的回调; 按下键盘的回调 | (event:KeyboardEvent | null)=>void | -- |
| onTrigger | 用户输入 trigger 后的回调 | (trigger:string)=>void | -- |
| variant | -- | "outlined"|"borderless"|"filled" | -- |
| autoSize | -- | {minRows?:number;maxRows?:number} | -- |
| code | -- | boolean | -- |
| getPopContainer | -- | ()=>HTMLElement | -- |
| autoFocus | -- | "rootStart"|"rootEnd" | -- |
| extraNodes | -- | {length:number;toString:()=>string;toLocaleString:()=>string;concat:(items:ConcatArray<T>[])=>T[]|(items:(T | ConcatArray<T>)[])=>T[];join:(separator?:string)=>string;slice:(start?:number,end?:number)=>T[];indexOf:(searchElement:T,fromIndex?:number)=>number;lastIndexOf:(searchElement:T,fromIndex?:number)=>number;every:(predicate:(value: T, index: number, array: readonly T[]) => value is S,thisArg?:any)=>boolean|(predicate:(value: T, index: number, array: readonly T[]) => unknown,thisArg?:any)=>boolean;some:(predicate:(value: T, index: number, array: readonly T[]) => unknown,thisArg?:any)=>boolean;forEach:(callbackfn:(value: T, index: number, array: readonly T[]) => void,thisArg?:any)=>void;map:(callbackfn:(value: T, index: number, array: readonly T[]) => U,thisArg?:any)=>U[];filter:(predicate:(value: T, index: number, array: readonly T[]) => value is S,thisArg?:any)=>S[]|(predicate:(value: T, index: number, array: readonly T[]) => unknown,thisArg?:any)=>T[];reduce:(callbackfn:(previousValue: T, currentValue: T, currentIndex: number, array: readonly T[]) => T)=>any|(callbackfn:(previousValue: T, currentValue: T, currentIndex: number, array: readonly T[]) => T,initialValue:T)=>any|(callbackfn:(previousValue: U, currentValue: T, currentIndex: number, array: readonly T[]) => U,initialValue:U)=>any;reduceRight:(callbackfn:(previousValue: T, currentValue: T, currentIndex: number, array: readonly T[]) => T)=>any|(callbackfn:(previousValue: T, currentValue: T, currentIndex: number, array: readonly T[]) => T,initialValue:T)=>any|(callbackfn:(previousValue: U, currentValue: T, currentIndex: number, array: readonly T[]) => U,initialValue:U)=>any;find:(predicate:(this: void, value: T, index: number, obj: readonly T[]) => value is S,thisArg?:any)=>any|(predicate:(value: T, index: number, obj: readonly T[]) => unknown,thisArg?:any)=>any;findIndex:(predicate:(value: T, index: number, obj: readonly T[]) => unknown,thisArg?:any)=>number;entries:unknown;keys:unknown;values:()=>unknown;includes:(searchElement:T,fromIndex?:number)=>boolean;flatMap:(callback:(this: This, value: T, index: number, array: T[]) => U | readonly U[],thisArg?:This)=>U[];flat:(depth?:D)=>FlatArray<A_D>[];__@iterator@1032:()=>unknown} | -- |
| overlayClassName | The className of menu overlay | string | -- |
| options | The options of menu | MentionOption[] | -- |
| triggers | The characters that trigger the mention menu. Needed to tell the plugin when to call the query function. | string[] | (required) |
| allowSpaces | If `true`, mentions can contain spaces. | boolean | true |
| punctuation | Regular expression that matches punctuation characters when looking for mentions. In addition to spaces, these characters can appear directly after a mention. E.g. `@John!` or `@John,`. | string | "\\.,\\*\\?\\$\\|#{}\\(\\)\\^\\[\\]\\/!%'\\\"~=<>_:;" |
| preTriggerChars | Regular expression that matches characters that can appear directly before the trigger character. | string | "\\(" |
| onSelect | When mention selected, this func will be called | (option:import("/src/Mentions/plugins/mention-picker/utils").MentionMenuOption,trigger:string | null,queryString:string | null)=>void | -- |
| parent | Parent element | HTMLElement | -- |
| onOpen | -- | (resolution:import("/node_modules/@lexical/react/shared/LexicalMenu").MenuResolution)=>void | -- |
| children | -- | ReactNode | -- |
| ref | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | |bivarianceHack|RefObject | -- |
| key | -- | Key| | -- |