quill-mention/quill-mention

💬 @mentions for the Quill rich text editor

quill-mention's Issues

How to I add this to Vue.js?

Upper limit on number of items shown in the dropdown

Would it be possible to expose a parameter like maxItems (for example like in the angular-mentions module) that limits the number of items in the dropdown?

The use case I have in mind is 20+ possible mention values, of which only the first maxItems values will be displayed as soon as the user types "#"

How to customize list item?

Issue with `link` attribute

When passing data with link the resultant span has data-value attribute as:

<a href="https://google.com" target="_blank">Fredrik Sundqvist

Which is incorrect and rather should only be the name. Checkout the stackblitz here: https://stackblitz.com/edit/ngx-quill

Once again if #43 (comment) is addressed it would solve a lot of issues.

Cant import modules/mention in quill 2.0.0-dev.2 build

I can't import this module after installing quill development build.

previously in quill 1.3.6 I used this module with the steps bellow:

1. install using npm install quill-mention --save
2. import using import "quill-mention"
3. and adding mention module to quill option

mention: {
            allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
            mentionDenotationChars: ["@"],
            source: a_function.bind.(this),
        },

but now it just error Cannot import modules/mention. Are you sure it was registered?, Cannot load mention module. Are you sure you registered it?

there wasn't any step explained to import this module in the README.md, perhaps my import was wrong?
because I see other plugin require to register it using Quill.register(a_module) but this isn't

The given range isn't in document. - when used with react-quill

Nothing to configure - used default options.

Question / Idea: change of a trigger symbol

Hi,

Thanks for this great module.
Is it possible to easily change the trigger symbol from '@' to e.g. '#'?

Allow user to abort mention-action

I've noticed that it's possible to search for items which also contain whitespaces (which is cool) but sometimes a user just want to insert a denotation character and not search for anything. For this case it should be able to abort the mention-action by hitting Esc.

Use source 'user' when inserting into editor content

Hey there i am the creator of:
https://www.npmjs.com/package/ngx-quill

In angular you are using ngModel or formControls as wrapper for stuff like inputs where you have a view value and the real value of something (like the value stored in the db).
But a ngModel or formControl should only change through a user interaction, so the changes of your plugin gets missed.

But i think the content quill-mention inserts is more 'user' initiated like every other change through toolbar buttons, like formattings.
Because of that this issue occured on my repo:
KillerCodeMonkey/ngx-quill#327

Maybe you can make it configurable, which source should be used :).

Do not automatically insert a space after mention

It would be nice to have an option which disables the automatic insertion of a space after a mention, thanks!

Quill mentions state

Hello guys !

I'm currently wondering how I can access to the quill-mention states. I would like to check if the mention box is opened or closed, I saw that there is a "isOpen" attribute on the Mention class (quill-mention.js)

Is there a way to access to this state ? Any example ?

Best,

Is it possible to support RTL

Thanks for your plugin. I need to add this plugin in RTL Quill editor. Is it possible to add offsetRight option to support RTL?

Thanks

Using quill-mention in Angular: "Cannot import modules/mention"

I am trying to use quill-mention in my Angular application. For that I installed both libraries:

"quill": "^1.3.6",
"quill-mention": "^2.0.8",

and in my editor.component.ts I first require:

const Quill = require('quill');

which I then use in ngAfterViewInit() in order to initialize the editor - I copied that from the main page:

ngAfterViewInit() {

  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'}
  ];

  this.editor = new Quill('#theeditor',
    {
      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 (i = 0; i < values.length; i++) {
                if (!values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) {
                  matches.push(values[i]);
                }
              }
              renderList(matches, searchTerm);
            }
          },
        },
      }
    }
  );
}

It appears that the constructor gets called, but the mentioning does not work unfortunately.

In the console I see

quill.js:1987 quill Cannot import modules/mention. Are you sure it was registered?

What am I missing here?

String as trigger

Hi, is it possible to trigger the mention with a string instead of a single character?
Thank you

Replacing mention blot at start of the input bugs out on replace

Hi, thanks for this great addon.

I've noticed a bug when having a quill mention at the start of the input.
Once a user tries to replace it with a regular text, it bugs out.

To reproduce the issue:

1. focus quill editor
2. trigger mention
3. select all
4. press any alphanumeric key

See example gif:

This only happens in Chrome 🤔 I can't reproduce it on FF

I think it's related to quilljs/quill#783 . If i locally patch parchment with the fix made in zenreach/parchment#1 it doesn't occur anymore.
Weirdly enough it's not injecting font elements in the quill-mention demo page.

Not Inserting text

I'm having a problem with quill-mention and react-quill.

The lists of options populate fine, and I'm able to search and select options, but when I select an option the tag is not inserted into quill. Quill will only show that a new paragraph has been added, but no other content is added.

`mention: {
allowedChars: /^[A-Za-z0-9_\sÅÄÖåäö]*$/,
mentionDenotationChars: ["@", "#"],
isolateCharacter: true,
source: function (searchTerm, renderList, mentionChar) {
let values;

			if (mentionChar === "@") {
				values = mentionList;
			} else {
				values = tagList;
			}

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

Add Azure Pipelines

https://docs.microsoft.com/en-us/azure/devops/pipelines/get-started-yaml?view=azure-devops

Unexpected token: name (Mention) - while building

ERROR in 0.build.js from UglifyJs
Unexpected token: name (Mention) [./node_modules/quill-mention/src/quill.mention.js:7,0][0.build.js:24944,6]

ERROR in 1.build.js from UglifyJs
Unexpected token: name (Mention) [./node_modules/quill-mention/src/quill.mention.js:7,0][1.build.js:24944,6]

ERROR in 2.build.js from UglifyJs
Unexpected token: name (Mention) [./node_modules/quill-mention/src/quill.mention.js:7,0][2.build.js:23938,6]

Current version
"quill-mention": "^2.0.8"

Seems to build fine if I remove quill-mention. I tried some suggestions here webpack/webpack#2972 but they didn't seem to help.

Any suggestions to get quill-mention to build?

[Question] Possible to add click events to @ or # entries?

Is it possible to add click event to entries?

I'm trying to have an @mention navigate to an internal page when clicked.

selection callback

it's possible when i call select and get data through callback?

Duplicate of `ql-mention-list-container` in the DOM

In my application I have a quill in separate component which I add after some event. Each time when I open/close this component ql-mention-list-container container is created, but previous container still is in the DOM.

You can try to reproduce it on you demo application by following steps:

1. Open demo application
2. Click on the logo(You will be redirected on the home page https://afconsult.github.io)
3. Click Back button

You need to have your developers took opened.
After this you will see that ql-mention-list-container is created one more time.

So question is, how to delete this container when we don't have quill on the page, and how to avoid duplications?

Adding an action-button to the end of the dropdown

I am using a filter to display items in a list and I want the user to be able to "create" and item based on the query in case the user wants to do that on the fly.

For this I am just adding a last item with a property query to the list of filtered items like so:

mention: {
  renderItem: (item, searchTerm) => {
    if (item.hasOwnProperty('query')) {
      return `<div>\"Create <i>${item.query}</i>\"</div>`;
    }
    return item.value;
  }
}

and everything works so far.

Up to the point where it comes to the actual selection. In "normal" cases I just want to add the selected item to the editor, but I need to perform a different action in case the user selects the last item (which is just an "injected" button basically).

Is there a way to intercept this selection event and prevent the item from being added and instead perform a different action?

Something like

beforeAdd(item) {
  if (item.hasOwnProperty('query') {
    this.askUserIfCreate(item.query);
    return false; // don't add item to the editor
  }
  return true; // add item to the editor
}

delete fail on mobile

First 🙌 for an incredible plugin.

Deleting mentions doesn't work with the current release on mobile handsets I've tested (Nexus 5X + OnePlus6). I'm seeing distinct issues in Firefox and Chrome on Androids 8.1 and 9. gifs follow.

Is this a regression? As the recordings show, most of the functionality seems present (i.e. '@' triggering user menu, typing sub-selecting menu, being able to select a mention all seem to work ...)

on Chrome: (v69.0.3491.100 + v61.0.3163.98)

on Firefox (v62.0.3)

Recordings done with OnePlus 6, running OxygenOS v9 (+ zoom.us for screensharing + gifox).
Behaviours reproduced on Nexus 5X running Android 8.1

Mention List position is not correct

We are using ngx-quill: 2.2.0 and quill-mention: 0.2.5. Suddenly we are getting this issue regarding the positioning of the Mention List in a VM. Locally it is reproducible but we also fixed it by giving a offsetTop: 2. Locally its working now but on VM issue still persists. Additionally in firefox(On VM) it is coming perfect. Can you please look into this if this is an issue with any of the module ?

Unexpected token: name (MentionBlot) - while building

ERROR in build.js from UglifyJs
Unexpected token: name (MentionBlot) [./~/quill-mention/src/blots/mention.js:6,0][build.js:121511,6]

npm ERR! Windows_NT 10.0.16299
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v6.11.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: cross-env NODE_ENV=production webpack --progress --hide-modules
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script 'cross-env NODE_ENV=production webpack --progress --hide-modules'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the Quickscrum package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cross-env NODE_ENV=production webpack --progress --hide-modules
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs Quickscrum
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls Quickscrum
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\rut2\Quickscrum\Code\scrum-board\npm-debug.log

@mention does not show user image on li list

This feature is very important, on renderList function, you created li list tags on ngfor loop, can we create img tags and append it to li list tags?

const li = document.createElement('li');
const img = document.createElement('img');
img.src = data[i].avatar;
li.appendChild(img)

How to insert as plain text

Hi,
I wanna to insert key like @requester as plain text. Do you have any option for this? Already when I export text from Quilljs it's return:

<span class="mention" data-id="1" data-value="Request" data-denotation-char="@"><span contenteditable="false"><span class="ql-mention-denotation-char">@</span>Request</span></span> </p>

I wanna to see in export this:

@Request

onItemClick event

Is there a way I could overwrite or disable the onClick event of the render list item? I'm doing some validations in the mention list items, and some of those shouldn't be inserted to the editor. Is this possible without modifying the plugin?

Dropdown goes off screen when at the bottom of page

I'm afraid the mention list is still dropping down when at the bottom of the page. Here is a screenshot of the demo page with editor 2 at the bottom of the page:

The list goes off the screen so you can't see it.

Request to share example file

Hey @eltimn @jonwa @xJom @PatrikSjolin @AFCONSULTOLD

This is awesome lib for quill.
I would request to share example file using es6.

I want to know how I could import and use this with

import Quill from 'quill'
import quillMention from 'quill-mention'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'

this.options.modules = {
        mention: {
          allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
          mentionDenotationChars: ['@', '#'],
          source: function (searchTerm, renderList, mentionChar) {
            let values

            if (mentionChar === '@') {
              values = this.atValues
            } else {
              values = this.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)
            }
          }
        }
      }
      this.editor = new Quill('.editor', this.options)

Display custom popover when user is added

How can I display bootstrap popover when user is added? Like this: http://pix.toile-libre.org/upload/original/1536659853.png

I'm able to manage popover on click of name (in getItemData function)but unable to add any HTML element inside it.

Thanks

Unable to use mentions in IE11

Hi,
I am using IE11 with quill packages-
ngx-quill": "^4.8.0",
"quill": "^1.3.6",
"quill-mention": "^2.1.1"

but in IE 11, it is not working. Application is not loading.
I am using below example on my system with all the files installed mentioned in polyfills.ts

https://killercodemonkey.github.io/ngx-quill-example/

Suggestion: Emit an event when an item is selected from the dropdown

Suggestion: Might be useful to emit an event when an item is selected from the dropdown (which contains info like the denotation character, value etc.) - this would make it easy to parse the text.

Happy to help implement this with some pointers / help.

EDIT:
I realize my suggestion was not very clear.. so here's the use case I'm describing. I'm using this module in combination with ngx-quill-editor in an Angular project. What I want to achieve is, when an item from the dropdown is selected, its info should be available in my Angular component so that it can be parsed before sending to the server.

Not sure if this is a more relevant suggestion in the other repo.

Focus on highlighted list item

Hi, I'm trying to focus on the highlighted list item when pressing the down or up arrow key. I use to have a long list of users to mention and I want to auto scroll the list down next to the highlighted item. I've tried to add this quill keyboard handler for down arrow but it didn't work:

down: {
        key: 40,
        handler: function(range: any, context: any) {      
          const mentionListItem: any = document.querySelector('.ql-mention-list-item.selected');
          const focusList: any = findDOMNode(mentionListItem).nextSibling;
          // TODO: know how to focus list item
          mentionListItem.focus();
          return true;
        }
      }

I guess because we already return false to the downHandler function of quill-mention module? Is there a way we focus the item to scroll it down to the remaining items of the list? Like in this example .

Serializing content to markup

This might probably end up as a feature request but is there a way I can serialize the content in the editor? What I need basically is to transform the content of the editor to a simpler format (e.g. a markup) s.t. in the end there is only the text and the mentioned entity in form of a markup available.

<div><div data-id="1" data-value="Brad"><span>Brad</span></div> came to the office</div>

would become something like

{id:1} came to the office

Is there a "simple" I could do this myself with the existing API?

Is it possible to add loading indicator ?

Is it possible to add loading indicator to the dropdown menu while the matches are being loaded from remote source ? it will be really usefull.

Replacing mention with mention isn't removing the old mention from quill contents

To reproduce:

1. write some text
2. add mention
3. select mention and replace it with other mention

Somehow the quill contents isn't removing the old mention and it'll always be there as "invisible" mention.

This is possibly related to #27

Caret sometimes gets stuck

Steps to reproduce

1. Mention some user

Expected behavior

A space is added after the mention, the caret moves

Actual behavior

  isn't added after the mention. When the user presses space to add it manually, it's added to the DOM, but the caret doesn't move.

Environment

• React 16.8.1
• Quill 1.3.6
• React-Quill 1.0.0
• Chrome 73
• macOS Mojave 10.14.3

Additional info

• The bug is coming from the browser itself, not from your library or Quill. It's described here: https://github.com/quilljs/quill/issues/1172. Basically contenteditable="false" inside contenteditable="true" is buggy.

How to use renderitem?

I'm sorry that's probably a noobish question but how can I use renderItem?

I'm using the ngx-quill library to user quill-mention in Angular. Everything works like a charm but I can't figure out how to render items in a certain way using renderItem.

this.modules = {
  toolbar: null,
  mention: {
    mentionDenotationChars: ['#', '@'],
    allowedChars: /^[A-Za-z\sÅÄÖÜåäöüß]*$/,
    source: (searchTerm, renderList) => {
      this.onSearch(searchTerm, renderList);
    },
    renderItem: (item, searchTerm) => {
      console.log(item);
      return `<span>test</span>`;
    }
  },
};

FeatureRequest: Allow custom html when selecting an item

It would be great is can pass in a template for what should be pasted in the editor once an item is selected.

Demo page is 404

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

Issue while setting the selection.

Hi,

I found issue toady while setting the selection for quill editor with mentions. I'm using quill-mentions with MarkdownShortCuts. I faced few issues while using it. Once we give mention and then after if I insert any content it not inserting properly. I'm trying find the issue. Please help me.
https://cl.ly/9383e3be0da6

How to run the demo?

I'd like to work on quill-mention but I am not really able to run the demo locally.

I've installed http-server (via npm) and try to serve the static files but I am running from one exception into the next one.

I assume I am doing it wrong so what's the fastest way to get the demo running s.t. I can add some features?

First thing I noticed btw is that the paths seem to be wrong:

<link href="quill.mention.min.css" rel="stylesheet">
<script src="quill.mention.min.js"></script>

---

Btw I've created a quill-mention tag on stackoverflow

Dynamically add an item to the values array

Fantastic plugin. Is it possible to let the user add an item to the values array on the fly? If they want to add a hashtag that isn't already in the hashValues array, is it possible to dynamically insert it in the array?

I tried doing this with a content change listener on the quill box - picking up the typed hashtag and adding it to the array - but it is a clunky and less-than-great implementation.

Would appreciate any help or pointers. Thanks!

Export configuration is broken, default export folder should be "dist" folder, now is "src'

Export configuration is broken, default export folder should be "dist" folder, now is "src'

Configuration should look like:
{
....
"files": [
"dist",
"LICENSE",
"README.md"
],
...
}

Package.json main entry point pointing to src instead of dist

Hi, I tried to use this module in IE11 and bumped into a couple of issues. Which I couldn't directly resolve on my own.

1. The main property in the package json is now directing to "main": "src/quill.mention.js". I think the general convention here is to direct it to the post build files that would be located in the dist folder. The issue here is that the source files are using Ecmascript that is not supported by IE11. Where the distribution files should work since they are run through babel.

2. I manually changed the main property to direct to dist/quil.mention.min.js. The issue that I get then is ReferenceError: Quill is not defined.

Some more details:

• Angular 7.2.14
• Quill 1.3.6
• Ngx-quill 3.6.0
• Quill-mention 2.1.1

My current temporary solution is running babel over the source files manually and using those files from a forked repository.

Related issues:
#67
#72

Option to remove '@' sign

Is there a way I can remove the at '@' sign in the mention span once we select an item in from the dropdown?

Does not work with Node.js

Probably not a huge use case for this but I need to render the resulting delta into plain HTML, and I would ideally like to do this server-side.

I'm using nozer/quill-delta-to-html to convert the base delta.

The current issue is that since it uses the import syntax it cannot really work in Node.js without something like Babel. So I cannot add this module in to render the mentions!

[Bug] denotationChar becomes null in mention

Hi!
First of all let me thank you for such a nice solution!

But i have found a bug, while trying to use this in my project. Sometimes null is added instead of denotation char to mention blot.

I guess, I have found the reason for this behaviour. Please see screenshot attached below.

I commented out this row, and the problem has gone.

It would be very nice if you could come up with some fix for this issue.

Cheers!

Callback to get the value of selected mentions

Hi there,

I am using this library together with vue2-editor. I am wondering if there is some callback function I could use to get the selected mentions.

Otherwise I would have to parse the content and extract the mentions myself or am I missing something here?

Thanks a lot!
Sebastian