or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdcore-plugins.mdindex.mdui-components.md
tile.json

tessl/npm-ckeditor--ckeditor5-mention

Mention feature for CKEditor 5 providing smart autocompletion functionality for @mentions and #tags.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@ckeditor/ckeditor5-mention@46.0.x

To install, run

npx @tessl/cli install tessl/npm-ckeditor--ckeditor5-mention@46.0.0

index.mddocs/

CKEditor 5 Mention

CKEditor 5 Mention provides smart autocompletion functionality for @mentions and #tags. It enables users to trigger mention suggestions by typing specific characters (like '@' or '#') and select from a list of predefined items with full keyboard navigation and customizable rendering.

Package Information

  • Package Name: @ckeditor/ckeditor5-mention
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @ckeditor/ckeditor5-mention

Core Imports

import { Mention } from "@ckeditor/ckeditor5-mention";

For additional components:

import { 
    Mention, 
    MentionEditing, 
    MentionUI, 
    MentionCommand,
    MentionsView,
    MentionListItemView,
    MentionDomWrapperView,
    type MentionConfig,
    type MentionFeed,
    type MentionAttribute,
    type MentionFeedItem,
    type MentionFeedObjectItem,
    type MentionItemRenderer,
    type MentionFeedbackCallback,
    _createMentionMarkerRegExp,
    _addMentionAttributes,
    _toMentionAttribute
} from "@ckeditor/ckeditor5-mention";

CommonJS (if supported):

const { Mention } = require("@ckeditor/ckeditor5-mention");

Basic Usage

import { ClassicEditor } from "@ckeditor/ckeditor5-editor-classic";
import { Mention } from "@ckeditor/ckeditor5-mention";

ClassicEditor
    .create(document.querySelector('#editor'), {
        plugins: [Mention, /* other plugins */],
        mention: {
            feeds: [
                {
                    marker: '@',
                    feed: ['@alice', '@bob', '@charlie'],
                    minimumCharacters: 1
                },
                {
                    marker: '#',
                    feed: (searchString) => {
                        return fetchHashtags(searchString);
                    }
                }
            ]
        }
    })
    .then(editor => {
        // Access mention functionality
        const mentionPlugin = editor.plugins.get('Mention');
        
        // Convert view element to mention attribute
        const mentionAttr = mentionPlugin.toMentionAttribute(viewElement, {
            userId: '123',
            fullName: 'Alice Johnson'
        });
    })
    .catch(error => {
        console.error(error);
    });

Architecture

CKEditor 5 Mention is built around several key components:

  • Plugin Architecture: Main Mention plugin that combines editing and UI functionality
  • Three-Layer Design: MentionEditing handles model/view conversion, MentionUI manages user interface, MentionCommand executes mention insertion
  • Feed System: Flexible mention data sources supporting static arrays, synchronous callbacks, and asynchronous promises
  • Smart Positioning: Context-aware dropdown positioning with multiple fallback positions
  • Validation Engine: Automatic cleanup of partial/broken mentions with post-fixing

Capabilities

Core Plugin System

The main plugin classes that provide mention functionality including editing, UI, and command execution.

class Mention extends Plugin {
    static get pluginName(): 'Mention';
    static get requires(): [typeof MentionEditing, typeof MentionUI];
    
    toMentionAttribute<T extends Record<string, unknown>>(
        viewElement: ModelElement, 
        data?: T
    ): (MentionAttribute & T) | undefined;
}

Core Plugin System

Configuration System

Configuration interfaces and types for setting up mention feeds, commit keys, and dropdown behavior.

interface MentionConfig {
    feeds: Array<MentionFeed>;
    commitKeys?: Array<number>;
    dropdownLimit?: number;
}

interface MentionFeed {
    marker: string;
    feed: Array<MentionFeedItem> | MentionFeedbackCallback;
    minimumCharacters?: number;
    itemRenderer?: MentionItemRenderer;
    dropdownLimit?: number;
}

Configuration System

UI Components

User interface components for displaying and interacting with mention suggestions including dropdown views and list items.

class MentionsView extends ListView {
    selectFirst(): void;
    selectNext(): void;
    selectPrevious(): void;
    select(index: number): void;
    executeSelected(): void;
}

UI Components

Types

interface MentionAttribute {
    id: string;
    uid: string;
    _text: string;
}

type MentionFeedItem = string | MentionFeedObjectItem;

interface MentionFeedObjectItem {
    id: string;
    text?: string;
}

type MentionFeedbackCallback = (searchString: string) => Array<MentionFeedItem> | Promise<Array<MentionFeedItem>>;

type MentionItemRenderer = (item: MentionFeedObjectItem) => HTMLElement | string;