Mention

Honestly, the mention node is amazing. It adds support for @mentions, for example to ping users, and provides full control over the rendering.

Literally everything can be customized. You can pass a custom component for the rendering. All examples use .filter() to search through items, but feel free to send async queries to an API or add a more advanced library like fuse.js to your project.

Installation

# with npm
npm install @tiptap/extension-mention

# with Yarn
yarn add @tiptap/extension-mention

Dependencies

To place the popups correctly, we’re using tippy.js in all our examples. You are free to bring your own library, but if you’re fine with it, just install what we use:

# with npm
npm install tippy.js

# with Yarn
yarn add tippy.js

Rendering

Currently, we’re supporting custom Vue.js components only. To get the required VueRenderer install our Vue.js package:

# with npm
npm install @tiptap/vue-2

# with Yarn
yarn add @tiptap/vue-2

If you are using vue-3 then the VueRenderer requires different input:

new VueRenderer(MentionList, {
  props: props,
  editor: this.editor,
})

and not

new VueRenderer(MentionList, {
  parent: this,
  propsData: props,
})

And yes, we plan to support React, too. Meanwhile, you can roll your own ReactRenderer, but don’t forget to share it with the community.

It’s also possible to use Vanilla JavaScript, but that is probably a lot more work.

Settings

HTMLAttributes

Custom HTML attributes that should be added to the rendered HTML tag.

Mention.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})

| renderLabel | String | ({ options, node }) => … | Define how a mention label should be rendered. | | suggestion | Object | { … } | Read more |

Source code

packages/extension-mention/

2.4 KiB Raw Blame History Unescape Escape