@tiptap/extension-mention

What is @tiptap/extension-mention?

@tiptap/extension-mention is an extension for the Tiptap editor that allows you to add mention functionality to your text editor. This can be used to mention users, tags, or any other entities within the text.

What are @tiptap/extension-mention's main functionalities?

Basic Mention Setup

This code sets up a basic mention extension with custom HTML attributes and a suggestion list. The suggestion list filters items based on the query.

import { Mention } from '@tiptap/extension-mention';

const mention = Mention.configure({
  HTMLAttributes: {
    class: 'mention',
  },
  suggestion: {
    items: (query) => {
      return [
        { id: 1, label: 'John Doe' },
        { id: 2, label: 'Jane Doe' },
      ].filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
    },
    render: () => {
      // Custom rendering logic
    },
  },
});

Custom Mention Rendering

This code configures the mention extension to render mentions with a custom label format, prefixing the label with '@'.

import { Mention } from '@tiptap/extension-mention';

const mention = Mention.configure({
  renderLabel({ options, node }) {
    return `@${node.attrs.label}`;
  },
});

Mention with Custom Attributes

This code configures the mention extension to include custom HTML attributes, such as a custom class and a data attribute for the mention ID.

import { Mention } from '@tiptap/extension-mention';

const mention = Mention.configure({
  HTMLAttributes: {
    class: 'custom-mention',
    'data-mention-id': (node) => node.attrs.id,
  },
});

Other packages similar to @tiptap/extension-mention

quill-mention

quill-mention is a module for the Quill editor that provides similar mention functionality. It allows you to mention users, tags, or other entities within the text. Compared to @tiptap/extension-mention, quill-mention is designed specifically for the Quill editor and offers a different API and configuration options.

draft-js-mention-plugin

draft-js-mention-plugin is a plugin for the Draft.js editor that adds mention functionality. It allows you to mention users, tags, or other entities within the text. Compared to @tiptap/extension-mention, draft-js-mention-plugin is designed specifically for the Draft.js editor and offers a different API and configuration options.

slate-plugins

slate-plugins is a collection of plugins for the Slate editor, including a mention plugin. It allows you to mention users, tags, or other entities within the text. Compared to @tiptap/extension-mention, slate-plugins is designed specifically for the Slate editor and offers a different API and configuration options.

README

@tiptap/extension-mention

Introduction

tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.

Offical Documentation

Documentation can be found on the tiptap website.

License

tiptap is open-sourced software licensed under the MIT license.