Name: Typix
Author: Diyorbek Juraev

Watches for a trigger character (default @) and opens a typeahead picker to insert mention nodes. Works for people, channels, anything suggestion-shaped.

Install

pnpm add @typix-editor/extension-mention

Live demo

Config

Option	Type	Default	Description
`trigger`	`string`	`"@"`	The character that opens the picker.
`search`	`MentionSearchFn`	sync	Async/sync function returning `MentionItem[]`.
`node`	`MentionNodeOptions`	—	Customize the mention node renderer.

Custom search

import type { MentionSearchFn } from "@typix-editor/extension-mention";

const searchUsers: MentionSearchFn = async (query) => {
  const res = await fetch(`/api/users?q=${query}`);
  const users = await res.json();
  return users.map((u) => ({
    id: u.id,
    label: u.name,
    subtitle: u.email,
    avatar: u.avatar,
  }));
};

configExtension(MentionExtension, { trigger: "@", search: searchUsers });

Custom trigger (e.g., #channels)

configExtension(MentionExtension, {
  trigger: "#",
  search: searchChannels,
});

Add multiple instances for multiple triggers (e.g., @users + #channels).

Vendor the UI

npx typix ui add mention

Slash Command

Trigger-based menu for inserting blocks.

Mention