quill-mention - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

dist/quill.mention.min.js

@@ -1,1 +0,1 @@
-!function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:i})},n.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=4)}([function(t,e){t.exports=Quill},function(t,e,n){"use strict";var i,o=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),s=(i=n(0))&&i.__esModule?i:{default:i},a=s.default.import("blots/embed"),r=function(t){function e(){return function(t,n){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this),function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,a),o(e,null,[{key:"create",value:function(t){var n=function t(e,n,i){null===e&&(e=Function.prototype);var o=Object.getOwnPropertyDescriptor(e,n);if(void 0===o){var s=Object.getPrototypeOf(e);return null===s?void 0:t(s,n,i)}if("value"in o)return o.value;var a=o.get;return void 0!==a?a.call(i):void 0}(e.__proto__||Object.getPrototypeOf(e),"create",this).call(this),i=document.createElement("span");return i.className="ql-mention-denotation-char",i.innerHTML=t.denotationChar,n.appendChild(i),n.innerHTML+=t.value,n.dataset.id=t.id,n.dataset.value=t.value,n.dataset.denotationChar=t.denotationChar,n}},{key:"value",value:function(t){return{id:t.dataset.id,value:t.dataset.value,denotationChar:t.dataset.denotationChar}}}]),e}();r.blotName="mention",r.tagName="span",r.className="mention",s.default.register(r)},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={TAB:9,ENTER:13,ESCAPE:27,UP:38,DOWN:40}},function(t,e,n){"use strict";var i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},o=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),s=r(n(0)),a=r(n(2));function r(t){return t&&t.__esModule?t:{default:t}}n(6),n(1);var l=function(){function t(e,n){!function(e,n){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this),this.isOpen=!1,this.itemIndex=0,this.mentionCharPos=null,this.cursorPos=null,this.values=[],this.quill=e,this.options={source:null,renderItem:function(t,e){return""+t.value},mentionDenotationChars:["@"],allowedChars:/^[a-zA-Z0-9_]*$/,minChars:0,maxChars:31,offsetTop:2,offsetLeft:0,isolateCharacter:!1},i(this.options,n),this.mentionContainer=document.createElement("div"),this.mentionContainer.className="ql-mention-list-container",this.mentionContainer.style.cssText="display: none; position: absolute;",this.mentionList=document.createElement("ul"),this.mentionList.className="ql-mention-list",this.mentionContainer.appendChild(this.mentionList),document.body.appendChild(this.mentionContainer),e.on("text-change",this.onTextChange.bind(this)),e.on("selection-change",this.onSelectionChange.bind(this)),e.keyboard.addBinding({key:a.default.TAB},this.selectHandler.bind(this)),e.keyboard.bindings[9].unshift(e.keyboard.bindings[9].pop()),e.keyboard.addBinding({key:a.default.ENTER},this.selectHandler.bind(this)),e.keyboard.bindings[13].unshift(e.keyboard.bindings[13].pop()),e.keyboard.addBinding({key:a.default.ESCAPE},this.escapeHandler.bind(this)),e.keyboard.addBinding({key:a.default.UP},this.upHandler.bind(this)),e.keyboard.addBinding({key:a.default.DOWN},this.downHandler.bind(this))}return o(t,[{key:"selectHandler",value:function(){return!this.isOpen||(this.selectItem(),!1)}},{key:"escapeHandler",value:function(){return!this.isOpen||(this.hideMentionList(),!1)}},{key:"upHandler",value:function(){return!this.isOpen||(this.prevItem(),!1)}},{key:"downHandler",value:function(){return!this.isOpen||(this.nextItem(),!1)}},{key:"showMentionList",value:function(){this.mentionContainer.style.visibility="hidden",this.mentionContainer.style.display="",this.setMentionContainerPosition(),this.isOpen=!0}},{key:"hideMentionList",value:function(){this.mentionContainer.style.display="none",this.isOpen=!1}},{key:"highlightItem",value:function(){for(var t=0;t<this.mentionList.childNodes.length;t+=1)this.mentionList.childNodes[t].classList.remove("selected");this.mentionList.childNodes[this.itemIndex].classList.add("selected");var e=this.mentionList.childNodes[this.itemIndex].offsetHeight;this.mentionContainer.scrollTop=this.itemIndex*e}},{key:"getItemData",value:function(){return{id:this.mentionList.childNodes[this.itemIndex].dataset.id,value:this.mentionList.childNodes[this.itemIndex].dataset.value,denotationChar:this.mentionList.childNodes[this.itemIndex].dataset.denotationChar}}},{key:"selectItem",value:function(){var t=this.getItemData();this.quill.deleteText(this.mentionCharPos,this.cursorPos-this.mentionCharPos,s.default.sources.API),this.quill.insertEmbed(this.mentionCharPos,"mention",t,s.default.sources.API),this.quill.insertText(this.mentionCharPos+1," ",s.default.sources.API),this.quill.setSelection(this.mentionCharPos+2,s.default.sources.API),this.hideMentionList()}},{key:"onItemClick",value:function(t){t.stopImmediatePropagation(),t.preventDefault(),this.itemIndex=t.currentTarget.dataset.index,this.highlightItem(),this.selectItem()}},{key:"renderList",value:function(t,e,n){if(e&&e.length>0){this.values=e,this.mentionList.innerHTML="";for(var i=0;i<e.length;i+=1){var o=document.createElement("li");o.className="ql-mention-list-item",o.dataset.index=i,o.dataset.id=e[i].id,o.dataset.value=e[i].value,o.dataset.denotationChar=t,o.innerHTML=this.options.renderItem(e[i],n),o.onclick=this.onItemClick.bind(this),this.mentionList.appendChild(o)}this.itemIndex=0,this.highlightItem(),this.showMentionList()}else this.hideMentionList()}},{key:"nextItem",value:function(){this.itemIndex=(this.itemIndex+1)%this.values.length,this.highlightItem()}},{key:"prevItem",value:function(){this.itemIndex=(this.itemIndex+this.values.length-1)%this.values.length,this.highlightItem()}},{key:"hasValidChars",value:function(t){return this.options.allowedChars.test(t)}},{key:"containerBottomIsNotVisible",value:function(t){return t+this.mentionContainer.offsetHeight>window.pageYOffset+window.innerHeight}},{key:"containerRightIsNotVisible",value:function(t){return t+this.mentionContainer.offsetWidth>window.pageXOffset+document.documentElement.clientWidth}},{key:"setMentionContainerPosition",value:function(){var t=this.quill.container.getBoundingClientRect(),e=this.quill.getBounds(this.mentionCharPos),n=window.pageYOffset+t.top+e.bottom+this.options.offsetTop,i=window.pageXOffset+t.left+e.left+this.options.offsetLeft;if(this.containerBottomIsNotVisible(n)&&(n=window.pageYOffset+t.top+e.top-(this.mentionContainer.offsetHeight+this.options.offsetTop)),this.containerRightIsNotVisible(i)){var o=this.mentionContainer.offsetWidth+this.options.offsetLeft;i=window.pageXOffset+document.documentElement.clientWidth-o}this.mentionContainer.style.top=n+"px",this.mentionContainer.style.left=i+"px",this.mentionContainer.style.visibility="visible"}},{key:"onSomethingChange",value:function(){var t=this.quill.getSelection();if(null!=t){this.cursorPos=t.index;var e=Math.max(0,this.cursorPos-this.options.maxChars),n=this.quill.getText(e,this.cursorPos-e),i=this.options.mentionDenotationChars.reduce(function(t,e){var i=t,o=n.lastIndexOf(e);return o>i?o:i},-1);if(i>-1){if(this.options.isolateCharacter&&0!=i&&!n[i-1].match(/\s/g))return void this.hideMentionList();var o=this.cursorPos-(n.length-i);this.mentionCharPos=o;var s=n.substring(i+1);if(s.length>=this.options.minChars&&this.hasValidChars(s)){var a=n[i];this.options.source(s,this.renderList.bind(this,a),a)}else this.hideMentionList()}else this.hideMentionList()}}},{key:"onTextChange",value:function(t,e,n){"user"===n&&this.onSomethingChange()}},{key:"onSelectionChange",value:function(t){t&&0===t.length?this.onSomethingChange():this.hideMentionList()}}]),t}();s.default.register("modules/mention",l)},function(t,e,n){t.exports=n(3)},,function(t,e){}]);
+!function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:i})},n.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=4)}([function(t,e){t.exports=Quill},function(t,e,n){"use strict";var i,o=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),s=(i=n(0))&&i.__esModule?i:{default:i},a=s.default.import("blots/embed"),r=function(t){function e(){return function(t,n){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this),function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,a),o(e,null,[{key:"create",value:function(t){var n=function t(e,n,i){null===e&&(e=Function.prototype);var o=Object.getOwnPropertyDescriptor(e,n);if(void 0===o){var s=Object.getPrototypeOf(e);return null===s?void 0:t(s,n,i)}if("value"in o)return o.value;var a=o.get;return void 0!==a?a.call(i):void 0}(e.__proto__||Object.getPrototypeOf(e),"create",this).call(this),i=document.createElement("span");return i.className="ql-mention-denotation-char",i.innerHTML=t.denotationChar,n.appendChild(i),n.innerHTML+=t.value,n.dataset.id=t.id,n.dataset.value=t.value,n.dataset.denotationChar=t.denotationChar,n}},{key:"value",value:function(t){return{id:t.dataset.id,value:t.dataset.value,denotationChar:t.dataset.denotationChar}}}]),e}();r.blotName="mention",r.tagName="span",r.className="mention",s.default.register(r)},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={TAB:9,ENTER:13,ESCAPE:27,UP:38,DOWN:40}},function(t,e,n){"use strict";var i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},o=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),s=r(n(0)),a=r(n(2));function r(t){return t&&t.__esModule?t:{default:t}}n(6),n(1);var h=function(){function t(e,n){!function(e,n){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this),this.isOpen=!1,this.itemIndex=0,this.mentionCharPos=null,this.cursorPos=null,this.values=[],this.suspendMouseEnter=!1,this.quill=e,this.options={source:null,renderItem:function(t,e){return""+t.value},mentionDenotationChars:["@"],allowedChars:/^[a-zA-Z0-9_]*$/,minChars:0,maxChars:31,offsetTop:2,offsetLeft:0,isolateCharacter:!1,fixMentionsToQuill:!1},i(this.options,n),this.mentionContainer=document.createElement("div"),this.mentionContainer.className="ql-mention-list-container",this.mentionContainer.style.cssText="display: none; position: absolute;",this.mentionContainer.onmousemove=this.onContainerMouseMove.bind(this),this.options.fixMentionsToQuill&&(this.mentionContainer.style.width="auto"),this.mentionList=document.createElement("ul"),this.mentionList.className="ql-mention-list",this.mentionContainer.appendChild(this.mentionList),document.body.appendChild(this.mentionContainer),e.on("text-change",this.onTextChange.bind(this)),e.on("selection-change",this.onSelectionChange.bind(this)),e.keyboard.addBinding({key:a.default.TAB},this.selectHandler.bind(this)),e.keyboard.bindings[9].unshift(e.keyboard.bindings[9].pop()),e.keyboard.addBinding({key:a.default.ENTER},this.selectHandler.bind(this)),e.keyboard.bindings[13].unshift(e.keyboard.bindings[13].pop()),e.keyboard.addBinding({key:a.default.ESCAPE},this.escapeHandler.bind(this)),e.keyboard.addBinding({key:a.default.UP},this.upHandler.bind(this)),e.keyboard.addBinding({key:a.default.DOWN},this.downHandler.bind(this))}return o(t,[{key:"selectHandler",value:function(){return!this.isOpen||(this.selectItem(),!1)}},{key:"escapeHandler",value:function(){return!this.isOpen||(this.hideMentionList(),!1)}},{key:"upHandler",value:function(){return!this.isOpen||(this.prevItem(),!1)}},{key:"downHandler",value:function(){return!this.isOpen||(this.nextItem(),!1)}},{key:"showMentionList",value:function(){this.mentionContainer.style.visibility="hidden",this.mentionContainer.style.display="",this.setMentionContainerPosition(),this.isOpen=!0}},{key:"hideMentionList",value:function(){this.mentionContainer.style.display="none",this.isOpen=!1}},{key:"highlightItem",value:function(){for(var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],e=0;e<this.mentionList.childNodes.length;e+=1)this.mentionList.childNodes[e].classList.remove("selected");if(this.mentionList.childNodes[this.itemIndex].classList.add("selected"),t){var n=this.mentionList.childNodes[this.itemIndex].offsetHeight,i=this.itemIndex*n,o=this.mentionContainer.scrollTop,s=o+this.mentionContainer.offsetHeight;i<o?this.mentionContainer.scrollTop=i:i>s-n&&(this.mentionContainer.scrollTop+=i-s+n)}}},{key:"getItemData",value:function(){return{id:this.mentionList.childNodes[this.itemIndex].dataset.id,value:this.mentionList.childNodes[this.itemIndex].dataset.value,denotationChar:this.mentionList.childNodes[this.itemIndex].dataset.denotationChar}}},{key:"onContainerMouseMove",value:function(){this.suspendMouseEnter=!1}},{key:"selectItem",value:function(){var t=this.getItemData();this.quill.deleteText(this.mentionCharPos,this.cursorPos-this.mentionCharPos,s.default.sources.API),this.quill.insertEmbed(this.mentionCharPos,"mention",t,s.default.sources.API),this.quill.insertText(this.mentionCharPos+1," ",s.default.sources.API),this.quill.setSelection(this.mentionCharPos+2,s.default.sources.API),this.hideMentionList()}},{key:"onItemMouseEnter",value:function(t){if(!this.suspendMouseEnter){var e=Number(t.target.dataset.index);Number.isNaN(e)||e===this.itemIndex||(this.itemIndex=e,this.highlightItem(!1))}}},{key:"onItemClick",value:function(t){t.stopImmediatePropagation(),t.preventDefault(),this.itemIndex=t.currentTarget.dataset.index,this.highlightItem(),this.selectItem()}},{key:"renderList",value:function(t,e,n){if(e&&e.length>0){this.values=e,this.mentionList.innerHTML="";for(var i=0;i<e.length;i+=1){var o=document.createElement("li");o.className="ql-mention-list-item",o.dataset.index=i,o.dataset.id=e[i].id,o.dataset.value=e[i].value,o.dataset.denotationChar=t,o.innerHTML=this.options.renderItem(e[i],n),o.onmouseenter=this.onItemMouseEnter.bind(this),o.onclick=this.onItemClick.bind(this),this.mentionList.appendChild(o)}this.itemIndex=0,this.highlightItem(),this.showMentionList()}else this.hideMentionList()}},{key:"nextItem",value:function(){this.itemIndex=(this.itemIndex+1)%this.values.length,this.suspendMouseEnter=!0,this.highlightItem()}},{key:"prevItem",value:function(){this.itemIndex=(this.itemIndex+this.values.length-1)%this.values.length,this.suspendMouseEnter=!0,this.highlightItem()}},{key:"hasValidChars",value:function(t){return this.options.allowedChars.test(t)}},{key:"containerBottomIsNotVisible",value:function(t){return t+this.mentionContainer.offsetHeight>window.pageYOffset+window.innerHeight}},{key:"containerRightIsNotVisible",value:function(t){return!this.options.fixMentionsToQuill&&t+this.mentionContainer.offsetWidth>window.pageXOffset+document.documentElement.clientWidth}},{key:"setMentionContainerPosition",value:function(){var t=this.quill.container.getBoundingClientRect(),e=this.quill.getBounds(this.mentionCharPos),n=window.pageYOffset+this.options.offsetTop,i=window.pageXOffset+t.left+this.options.offsetLeft;if(this.options.fixMentionsToQuill){n+=t.bottom;var o=window.outerWidth-t.right;this.mentionContainer.style.right=o+"px"}else i+=e.left,n+=t.top+e.bottom;if(this.containerBottomIsNotVisible(n)){var s=this.mentionContainer.offsetHeight+this.options.offsetTop,a=window.pageYOffset+t.top;this.options.fixMentionsToQuill||(a+=e.top),n=a-s}if(this.containerRightIsNotVisible(i)){var r=this.mentionContainer.offsetWidth+this.options.offsetLeft;i=window.pageXOffset+document.documentElement.clientWidth-r}this.mentionContainer.style.top=n+"px",this.mentionContainer.style.left=i+"px",this.mentionContainer.style.visibility="visible"}},{key:"onSomethingChange",value:function(){var t=this.quill.getSelection();if(null!=t){this.cursorPos=t.index;var e=Math.max(0,this.cursorPos-this.options.maxChars),n=this.quill.getText(e,this.cursorPos-e),i=this.options.mentionDenotationChars.reduce(function(t,e){var i=t,o=n.lastIndexOf(e);return o>i?o:i},-1);if(i>-1){if(this.options.isolateCharacter&&0!=i&&!n[i-1].match(/\s/g))return void this.hideMentionList();var o=this.cursorPos-(n.length-i);this.mentionCharPos=o;var s=n.substring(i+1);if(s.length>=this.options.minChars&&this.hasValidChars(s)){var a=n[i];this.options.source(s,this.renderList.bind(this,a),a)}else this.hideMentionList()}else this.hideMentionList()}}},{key:"onTextChange",value:function(t,e,n){"user"===n&&this.onSomethingChange()}},{key:"onSelectionChange",value:function(t){t&&0===t.length?this.onSomethingChange():this.hideMentionList()}}]),t}();s.default.register("modules/mention",h)},function(t,e,n){t.exports=n(3)},,function(t,e){}]);

package.json

 {
   "name": "quill-mention",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "@mentions for the Quill rich text editor",
@@ -5,0 +5,0 @@ "main": "src/quill.mention.js",

README.md

@@ -74,2 +74,3 @@ ![Quill Mention](static/quill-mention.png "Quill Mention")
 | `isolateCharacter`   | `false`        | Whether or not the denotation character(s) should be isolated. For example, to avoid mentioning in an email.
+| `fixMentionsToQuill` | `false`        | When set to true, the mentions menu will be rendered above or below the quill container. Otherwise, the mentions menu will track the denotation character(s);
 
@@ -76,0 +77,0 @@

src/quill.mention.js

@@ -14,2 +14,3 @@ import Quill from 'quill';
     this.values = [];
+    this.suspendMouseEnter = false;
 
@@ -30,2 +31,3 @@ this.quill = quill;
       isolateCharacter: false,
+      fixMentionsToQuill: false,
     };
@@ -38,3 +40,8 @@
     this.mentionContainer.style.cssText = 'display: none; position: absolute;';
+    this.mentionContainer.onmousemove = this.onContainerMouseMove.bind(this);
 
+    if (this.options.fixMentionsToQuill) {
+      this.mentionContainer.style.width = 'auto';
+    }
+
     this.mentionList = document.createElement('ul');
@@ -116,3 +123,3 @@ this.mentionList.className = 'ql-mention-list';
 
-  highlightItem() {
+  highlightItem(scrollItemInView = true) {
     for (let i = 0; i < this.mentionList.childNodes.length; i += 1) {
@@ -122,4 +129,17 @@ this.mentionList.childNodes[i].classList.remove('selected');
     this.mentionList.childNodes[this.itemIndex].classList.add('selected');
-    const itemHeight = this.mentionList.childNodes[this.itemIndex].offsetHeight;
-    this.mentionContainer.scrollTop = this.itemIndex * itemHeight;
+
+    if (scrollItemInView) {
+      const itemHeight = this.mentionList.childNodes[this.itemIndex].offsetHeight;
+      const itemPos = this.itemIndex * itemHeight;
+      const containerTop = this.mentionContainer.scrollTop;
+      const containerBottom = containerTop + this.mentionContainer.offsetHeight;
+
+      if (itemPos < containerTop) {
+        // Scroll up if the item is above the top of the container
+        this.mentionContainer.scrollTop = itemPos;
+      } else if (itemPos > (containerBottom - itemHeight)) {
+        // scroll down if any part of the element is below the bottom of the container
+        this.mentionContainer.scrollTop += (itemPos - containerBottom) + itemHeight;
+      }
+    }
   }
@@ -135,2 +155,6 @@
 
+  onContainerMouseMove() {
+    this.suspendMouseEnter = false;
+  }
+
   selectItem() {
@@ -146,2 +170,15 @@ const data = this.getItemData();
 
+  onItemMouseEnter(e) {
+    if (this.suspendMouseEnter) {
+      return;
+    }
+
+    const index = Number(e.target.dataset.index);
+
+    if (!Number.isNaN(index) && index !== this.itemIndex) {
+      this.itemIndex = index;
+      this.highlightItem(false);
+    }
+  }
+
   onItemClick(e) {
@@ -167,2 +204,3 @@ e.stopImmediatePropagation();
         li.innerHTML = this.options.renderItem(data[i], searchTerm);
+        li.onmouseenter = this.onItemMouseEnter.bind(this);
         li.onclick = this.onItemClick.bind(this);
@@ -181,2 +219,3 @@ this.mentionList.appendChild(li);
     this.itemIndex = (this.itemIndex + 1) % this.values.length;
+    this.suspendMouseEnter = true;
     this.highlightItem();
@@ -187,2 +226,3 @@ }
     this.itemIndex = ((this.itemIndex + this.values.length) - 1) % this.values.length;
+    this.suspendMouseEnter = true;
     this.highlightItem();
@@ -200,2 +240,6 @@ }
   containerRightIsNotVisible(leftPos) {
+    if (this.options.fixMentionsToQuill) {
+      return false;
+    }
+
     const rightPos = leftPos + this.mentionContainer.offsetWidth;
@@ -211,4 +255,2 @@ const browserWidth = window.pageXOffset + document.documentElement.clientWidth;
     let topPos = window.pageYOffset +
-      containerPos.top +
-      mentionCharPos.bottom +
       this.options.offsetTop;
@@ -218,10 +260,24 @@
       containerPos.left +
-      mentionCharPos.left +
       this.options.offsetLeft;
 
+    if (this.options.fixMentionsToQuill) {
+      topPos += containerPos.bottom;
+      const rightPos = window.outerWidth - containerPos.right;
+      this.mentionContainer.style.right = `${rightPos}px`;
+    } else {
+      leftPos += mentionCharPos.left;
+      topPos += containerPos.top + mentionCharPos.bottom;
+    }
+
     if (this.containerBottomIsNotVisible(topPos)) {
-      const overMentionCharPos = window.pageYOffset + containerPos.top + mentionCharPos.top;
       const containerHeight = this.mentionContainer.offsetHeight + this.options.offsetTop;
+      let overMentionCharPos = window.pageYOffset + containerPos.top;
+
+      if (!this.options.fixMentionsToQuill) {
+        overMentionCharPos += mentionCharPos.top;
+      }
+
       topPos = overMentionCharPos - containerHeight;
     }
+
     if (this.containerRightIsNotVisible(leftPos)) {
@@ -232,4 +288,6 @@ const containerWidth = this.mentionContainer.offsetWidth + this.options.offsetLeft;
     }
+
     this.mentionContainer.style.top = `${topPos}px`;
     this.mentionContainer.style.left = `${leftPos}px`;
+
     this.mentionContainer.style.visibility = 'visible';
@@ -236,0 +294,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31797

increased by10.17%

Lines of code

344

increased by14.67%

Number of lines in readme file

85

increased by1.19%

No dependency changes