@tiptap/suggestion

What is @tiptap/suggestion?

@tiptap/suggestion is a plugin for the Tiptap editor that provides a way to add suggestions to your editor. This can be used for implementing features like mentions, hashtags, or any other type of inline suggestions.

What are @tiptap/suggestion's main functionalities?

Basic Suggestion Setup

This code sets up a basic suggestion plugin that triggers on the '@' character. When a suggestion is selected, it inserts a mention node at the current position.

import { Suggestion } from '@tiptap/suggestion';

const suggestion = Suggestion({
  char: '@',
  startOfLine: false,
  command: ({ editor, range, props }) => {
    editor.chain().focus().insertContentAt(range, [
      {
        type: 'mention',
        attrs: props,
      },
      {
        type: 'text',
        text: ' ',
      },
    ]).run();
  },
});

Customizing Suggestion Menu

This code customizes the suggestion menu to trigger on the '#' character and filter items based on the query. It uses Vue and Tippy.js to render and manage the suggestion list.

import { Suggestion } from '@tiptap/suggestion';

const suggestion = Suggestion({
  char: '#',
  startOfLine: false,
  items: ({ query }) => {
    return [
      { title: 'JavaScript', id: 1 },
      { title: 'TypeScript', id: 2 },
      { title: 'React', id: 3 },
    ].filter(item => item.title.toLowerCase().includes(query.toLowerCase()));
  },
  render: () => {
    let component;
    let popup;

    return {
      onStart: props => {
        component = new Vue({
          render: h => h(SuggestionList, { props }),
        }).$mount();
        popup = tippy('body', {
          getReferenceClientRect: props.clientRect,
          appendTo: () => document.body,
          content: component.$el,
          showOnCreate: true,
        });
      },
      onUpdate: props => {
        component.$props = props;
        popup[0].setProps({
          getReferenceClientRect: props.clientRect,
        });
      },
      onExit: () => {
        popup[0].destroy();
        component.$destroy();
      },
    };
  },
});

Other packages similar to @tiptap/suggestion

prosemirror-suggest

prosemirror-suggest is a plugin for ProseMirror that provides similar functionality to @tiptap/suggestion. It allows you to create suggestions for mentions, hashtags, and other inline elements. Compared to @tiptap/suggestion, it is more tightly integrated with ProseMirror and may require more setup.

tributejs

Tribute.js is a lightweight, vanilla JavaScript library for adding autocomplete/suggestions to input fields and textareas. It is not specifically designed for rich text editors like Tiptap but can be adapted for use with them. It offers a flexible API and is easy to integrate.

quill-mention

quill-mention is a module for the Quill rich text editor that provides mention suggestions. It is similar to @tiptap/suggestion but is designed specifically for Quill. It offers a straightforward way to add mention functionality to Quill editors.

README

@tiptap/suggestion

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.

Official Documentation

Documentation can be found on the Tiptap website.

License

Tiptap is open sourced software licensed under the MIT license.

Changelog

2.2.2 (2024-02-07)

Bug Fixes

• react: use ref instead of state in useEditor to prevent rerenders (#4856) (56a5737)