quill-mention-absolute v2.2.6

Quill Mention

Quill Mention is a module to provide @mentions or #hashtag functionality for the Quill rich text editor.

Demo

https://afry.github.io/quill-mention/

Getting Started

Install

Install with npm:

npm install quill-mention --save

Install with Yarn:

yarn add quill-mention

Import package

import 'quill-mention';
// or
require('quill-mention');

Importing quill-mention automagically adds it to Quill modules.

Now you only need to pass quill-mention config to quill.

Example

import 'quill-mention';

const atValues = [
  { id: 1, value: 'Fredrik Sundqvist' },
  { id: 2, value: 'Patrik Sjölin' }
];
const hashValues = [
  { id: 3, value: 'Fredrik Sundqvist 2' },
  { id: 4, value: 'Patrik Sjölin 2' }
]
const quill = new Quill('#editor', {
  modules: {
    mention: {
      allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
      mentionDenotationChars: ["@", "#"],
      source: function (searchTerm, renderList, mentionChar) {
        let values;

        if (mentionChar === "@") {
          values = atValues;
        } else {
          values = hashValues;
        }

        if (searchTerm.length === 0) {
          renderList(values, searchTerm);
        } else {
          const matches = [];
          for (let i = 0; i < values.length; i++)
            if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) matches.push(values[i]);
          renderList(matches, searchTerm);
        }
      },
    },
  }
});

Async example

async function suggestPeople(searchTerm) {
  const allPeople = [
    {
      id: 1,
      value: 'Fredrik Sundqvist'
    },
    {
      id: 2,
      value: 'Patrik Sjölin'
    }
  ];
  return allPeople.filter((person) => person.value.includes(searchTerm));
}

const quill = new Quill('#editor', {
  modules: {
    mention: {
      allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
      mentionDenotationChars: ["@", "#"],
      source: async function (searchTerm, renderList) {
        const matchedPeople = await suggestPeople(searchTerm);
        renderList(matchedPeople);
      },
    },
  }
});

Note: if you whitelist quill formats via "formats" option, you need to add "mention" format there. Another way quill-mention won't work. Here's an example with whitelisted formats:

const quill = new Quill('#editor', {
      formats: ["bold", "italic", "mention"],
      // note "mention" format above
      modules: {
        mention: {
          allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
          mentionDenotationChars: ["@", "#"],
          source: function (searchTerm, renderList, mentionChar) {
            // some source implementation
          },
        },
      }
    });

Settings

Styling

To allow styling based on the menu orientation, a class is added depending on the orientation and the mentionContainerClass option. By default this will be ql-mention-list-container-bottom or ql-mention-list-container-top.

Authors

Fredrik Sundqvist (MadSpindel)

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE file for details