Text Editor - Mention

Mention users with @ trigger and autocomplete suggestions.

#Usage

import { TextEditor } from '@primeui/vue-texteditor';
<TextEditor.Root v-model="value">
    <TextEditor.Content />
    <TextEditor.MentionMenu :handler="mentionHandler" filterField="name" :template="(data) => `@${data.name}`">
        <MentionList />
    </TextEditor.MentionMenu>
</TextEditor.Root>

Use mentions to open an autocomplete popover on @ that resolves candidates through a handler and inserts the selected one. Mounting TextEditor.MentionMenu enables the mention plugin in the runtime. The menu is generic over the item type, and its nested list reads candidates from useMentionMenuContext<TItem>().

Three props drive the popover: handler resolves candidates for the current @… query and returns TItem[] or Promise<TItem[]>; filterField names the field used for substring filtering; and template renders the inserted text for a selected candidate. commands.select(item) accepts the highlighted candidate.

The context is type-narrowed. Pass the item shape to useMentionMenuContext<TItem>(), and items, commands, filterText, position, and dismiss come back fully typed.

<TextEditor.MentionMenu :handler="mentionHandler" filterField="name" :template="(data) => `@${data.name}`">
    <MentionList />
</TextEditor.MentionMenu>
<!-- MentionList.vue -->
<script setup lang="ts">
import { useMentionMenuContext } from '@primeui/vue-texteditor';

interface User {
    id: number;
    name: string;
}

const { items, commands, filterText } = useMentionMenuContext<User>();
</script>

<template>
    <div v-if="items.length === 0">No matches for "{{ filterText }}"</div>
    <button v-for="item in items" :key="item.id" role="option" @click="commands.select(item)">
        {{ item.name }}
    </button>
</template>

#Alternative: inline with slot props

<TextEditor.MentionMenu> also exposes { items, commands, filterText, position, dismiss } on its default slot.

<TextEditor.MentionMenu :handler="mentionHandler" filterField="name" :template="(data) => `@${data.name}`" v-slot="{ items, commands, filterText }">
    <div v-if="items.length === 0">No matches for "{{ filterText }}"</div>
    <button v-for="item in items" :key="item.id" role="option" @click="commands.select(item)">
        {{ item.name }}
    </button>
</TextEditor.MentionMenu>

#Example

Loading Demo...

#API

TextEditor.MentionMenu is generic over the item type and exposes items, commands.select, filterText, position, and dismiss through useMentionMenuContext<T>(). Slots and Contexts shows where the menu outlet sits; API carries the typed signatures.