@richhtmleditor/mentions

@ mention autocomplete plugin for Rich HTML Editor. Type @ to search and mention users, documents, or tags with an inline dropdown. Built on @richhtmleditor/core.

Current release: 1.2.9 — Depends on @richhtmleditor/core ^1.2.9.

Repository: github.com/rajkishorsahu89/richhtmleditor

Demo: richhtmleditor.stackkitlabs.com — demo · guide · API

What's in 1.2.9

• createMentionsPlugin — registers the @ trigger and autocomplete dropdown
• Inline autocomplete — type @ followed by a query to search mentions
• Async data source — wire your user/document/tag API via onSearch
• Keyboard navigation — arrow keys to navigate, Enter to confirm, Escape to dismiss
• Styled mention chips — inserted mentions render as styled <span> elements with data-mention-id

Community feature — no enterprise licence required.

Keywords: richhtmleditor mentions autocomplete users tags wysiwyg

Install

npm install @richhtmleditor/mentions
# Requires @richhtmleditor/core (via framework wrapper or direct install).

Usage

import { createEditor } from "@richhtmleditor/core";
import { createMentionsPlugin } from "@richhtmleditor/mentions";

const editor = createEditor({
  element: host,
  toolbar: { preset: "full" },
  plugins: [
    createMentionsPlugin({
      onSearch: async (query) => {
        const res = await fetch(`/api/users?q=${query}`);
        return res.json(); // [{ id, label, avatar? }]
      }
    })
  ]
});

Angular

import { createMentionsPlugin } from "@richhtmleditor/mentions";

plugins = [
  createMentionsPlugin({
    onSearch: async (query) => fetchUsers(query)
  })
];

<richhtmleditor [plugins]="plugins" [toolbar]="{ preset: 'full' }" />

Static mentions list

createMentionsPlugin({
  items: [
    { id: "alice", label: "Alice" },
    { id: "bob", label: "Bob" },
    { id: "charlie", label: "Charlie" }
  ]
})

API

createMentionsPlugin(options?)

Returns an EditorPlugin that registers the @ mention trigger.

| Option | Type | Description | | --- | --- | --- | | onSearch | (query: string) => Promise<MentionItem[]> | Async search function for mention suggestions. | | items | MentionItem[]? | Static list of mention items (used when onSearch is omitted). | | trigger | string? | Trigger character (default: "@"). |

MentionItem

| Field | Type | Description | | --- | --- | --- | | id | string | Unique identifier stored in data-mention-id. | | label | string | Display name shown in dropdown and inserted chip. | | avatar | string? | Optional avatar URL shown in the dropdown. |

Related packages

• @richhtmleditor/core — editor engine and plugins API.
• @richhtmleditor/themes — shared CSS.
• @richhtmleditor/comments — review comments plugin.
• @richhtmleditor/spellcheck — spell check plugin.
• @richhtmleditor/angular — Angular wrapper.
• @richhtmleditor/react — React wrapper.

License

MIT