quill-mention - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/quill.mention.min.js

@@ -1,1 +0,1 @@
-!function(t){var e={};function i(n){if(e[n])return e[n].exports;var s=e[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,i),s.l=!0,s.exports}i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){t.exports=i(1)},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(2),s=(i.n(n),i(3)),o=(i.n(s),i(4));Quill.register("modules/mention",class{constructor(t,e){this.isOpen=!1,this.itemIndex=0,this.atPos=null,this.cursorPos=null,this.values=[],this.quill=t,this.source=e.source,this.renderItem=e.renderItem,this.minChars=e.minChars||0,this.maxChars=(e.maxChars||30)+1,this.allowedChars=e.allowedChars||/^[a-zA-Z0-9_]*$/,this.mentionContainer=document.createElement("div"),this.mentionContainer.className="ql-mention-list-container",this.mentionContainer.style.cssText="display: none; position: absolute;",this.mentionContainer.innerHTML='<ul id="ql-mention-list" class="ql-mention-list"></ul>',document.body.appendChild(this.mentionContainer),this.mentionList=document.getElementById("ql-mention-list"),t.on("text-change",this.onTextChange.bind(this)),t.on("selection-change",this.onSelectionChange.bind(this)),t.keyboard.addBinding({key:o.a.TAB},this.selectHandler.bind(this)),t.keyboard.bindings[9].unshift(t.keyboard.bindings[9].pop()),t.keyboard.addBinding({key:o.a.ENTER},this.selectHandler.bind(this)),t.keyboard.bindings[13].unshift(t.keyboard.bindings[13].pop()),t.keyboard.addBinding({key:o.a.ESCAPE},this.escapeHandler.bind(this)),t.keyboard.addBinding({key:o.a.UP},this.upHandler.bind(this)),t.keyboard.addBinding({key:o.a.DOWN},this.downHandler.bind(this))}selectHandler(){return!this.isOpen||(this.selectItem(),!1)}escapeHandler(){return!this.isOpen||(this.hideMentionList(),!1)}upHandler(){return!this.isOpen||(this.prevItem(),!1)}downHandler(){return!this.isOpen||(this.nextItem(),!1)}showMentionList(){this.mentionContainer.style.display="",this.isOpen=!0}hideMentionList(){this.mentionContainer.style.display="none",this.isOpen=!1}highlightItem(){for(let t=0;t<this.mentionList.childNodes.length;t+=1)this.mentionList.childNodes[t].classList.remove("selected");this.mentionList.childNodes[this.itemIndex].classList.add("selected")}getItemData(){return{id:this.mentionList.childNodes[this.itemIndex].dataset.id,value:this.mentionList.childNodes[this.itemIndex].dataset.value}}selectItem(){const t=this.getItemData();this.quill.deleteText(this.atPos,this.cursorPos-this.atPos,Quill.sources.API),this.quill.insertEmbed(this.atPos,"mention",t,Quill.sources.API),this.quill.insertText(this.atPos+1," ",Quill.sources.API),this.quill.setSelection(this.atPos+2,Quill.sources.API),this.hideMentionList()}onItemClick(t){t.stopImmediatePropagation(),t.preventDefault(),this.itemIndex=t.currentTarget.dataset.index,this.highlightItem(),this.selectItem()}renderList(t,e){if(t&&t.length>0){this.values=t,this.mentionList.innerHTML="";for(let i=0;i<t.length;i+=1){const n=document.createElement("li");n.className="ql-mention-list-item",n.dataset.index=i,n.dataset.id=t[i].id,n.dataset.value=t[i].value,n.innerHTML=this.renderItem(t[i],e),n.onclick=this.onItemClick.bind(this),this.mentionList.appendChild(n)}this.itemIndex=0,this.highlightItem(),this.showMentionList()}else this.hideMentionList()}nextItem(){this.itemIndex=(this.itemIndex+1)%this.values.length,this.highlightItem()}prevItem(){this.itemIndex=(this.itemIndex+this.values.length-1)%this.values.length,this.highlightItem()}hasValidChars(t){return this.allowedChars.test(t)}setMentionListPosition(t){const e=this.quill.container.getBoundingClientRect(),i=this.quill.getBounds(t);this.mentionContainer.style.top=`${window.scrollY+e.top+i.bottom}px`,this.mentionContainer.style.left=`${window.scrollX+e.left+i.left}px`}onSomethingChange(){const t=this.quill.getSelection();if(null==t)return;this.cursorPos=t.index;const e=Math.max(0,this.cursorPos-this.maxChars),i=this.quill.getText(e,this.cursorPos-e),n=i.lastIndexOf("@");if(n>-1){const t=this.cursorPos-(i.length-n);this.atPos=t,this.setMentionListPosition(t);const e=i.substring(n+1);e.length>=this.minChars&&this.hasValidChars(e)?this.source(e):this.hideMentionList()}else this.hideMentionList()}onTextChange(t,e,i){"user"===i&&this.onSomethingChange()}onSelectionChange(t){t&&0===t.length?this.onSomethingChange():this.hideMentionList()}})},function(t,e){},function(t,e){const i=Quill.import("blots/embed");class n extends i{static create(t){const e=super.create(),i=document.createElement("span");return i.className="ql-mention-at-sign",i.innerHTML="@",e.appendChild(i),e.innerHTML+=t.value,e.dataset.id=t.id,e.dataset.value=t.value,e}static value(t){return{id:t.dataset.id,value:t.dataset.value}}}n.blotName="mention",n.tagName="span",n.className="mention",Quill.register(n)},function(t,e,i){"use strict";e.a={TAB:9,ENTER:13,ESCAPE:27,UP:38,DOWN:40}}]);
+!function(t){var e={};function i(n){if(e[n])return e[n].exports;var s=e[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,i),s.l=!0,s.exports}i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){t.exports=i(1)},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(2),s=(i.n(n),i(3)),o=(i.n(s),i(4)),h=i(5);Quill.register("modules/mention",class{constructor(t,e){this.isOpen=!1,this.itemIndex=0,this.atPos=null,this.cursorPos=null,this.values=[],this.quill=t,this.source=e.source,this.renderItem=e.renderItem,this.minChars=e.minChars||0,this.maxChars=(e.maxChars||30)+1,this.allowedChars=e.allowedChars||/^[a-zA-Z0-9_]*$/,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),t.on("text-change",this.onTextChange.bind(this)),t.on("selection-change",this.onSelectionChange.bind(this)),t.keyboard.addBinding({key:o.a.TAB},this.selectHandler.bind(this)),t.keyboard.bindings[9].unshift(t.keyboard.bindings[9].pop()),t.keyboard.addBinding({key:o.a.ENTER},this.selectHandler.bind(this)),t.keyboard.bindings[13].unshift(t.keyboard.bindings[13].pop()),t.keyboard.addBinding({key:o.a.ESCAPE},this.escapeHandler.bind(this)),t.keyboard.addBinding({key:o.a.UP},this.upHandler.bind(this)),t.keyboard.addBinding({key:o.a.DOWN},this.downHandler.bind(this))}selectHandler(){return!this.isOpen||(this.selectItem(),!1)}escapeHandler(){return!this.isOpen||(this.hideMentionList(),!1)}upHandler(){return!this.isOpen||(this.prevItem(),!1)}downHandler(){return!this.isOpen||(this.nextItem(),!1)}showMentionList(){this.mentionContainer.style.display="",this.mentionContainer.style.visibility="hidden",this.setMentionListPosition(),this.isOpen=!0}hideMentionList(){this.mentionContainer.style.display="none",this.isOpen=!1}highlightItem(){for(let t=0;t<this.mentionList.childNodes.length;t+=1)this.mentionList.childNodes[t].classList.remove("selected");this.mentionList.childNodes[this.itemIndex].classList.add("selected")}getItemData(){return{id:this.mentionList.childNodes[this.itemIndex].dataset.id,value:this.mentionList.childNodes[this.itemIndex].dataset.value}}selectItem(){const t=this.getItemData();this.quill.deleteText(this.atPos,this.cursorPos-this.atPos,Quill.sources.API),this.quill.insertEmbed(this.atPos,"mention",t,Quill.sources.API),this.quill.insertText(this.atPos+1," ",Quill.sources.API),this.quill.setSelection(this.atPos+2,Quill.sources.API),this.hideMentionList()}onItemClick(t){t.stopImmediatePropagation(),t.preventDefault(),this.itemIndex=t.currentTarget.dataset.index,this.highlightItem(),this.selectItem()}renderList(t,e){if(t&&t.length>0){this.values=t,this.mentionList.innerHTML="";for(let i=0;i<t.length;i+=1){const n=document.createElement("li");n.className="ql-mention-list-item",n.dataset.index=i,n.dataset.id=t[i].id,n.dataset.value=t[i].value,n.innerHTML=this.renderItem(t[i],e),n.onclick=this.onItemClick.bind(this),this.mentionList.appendChild(n)}this.itemIndex=0,this.highlightItem(),this.showMentionList()}else this.hideMentionList()}nextItem(){this.itemIndex=(this.itemIndex+1)%this.values.length,this.highlightItem()}prevItem(){this.itemIndex=(this.itemIndex+this.values.length-1)%this.values.length,this.highlightItem()}hasValidChars(t){return this.allowedChars.test(t)}setMentionListPosition(){const t=this.quill.container.getBoundingClientRect(),e=this.quill.getBounds(this.atPos);let i=window.scrollY+t.top+e.bottom,n=window.scrollX+t.left+e.left;i+this.mentionContainer.offsetHeight>h.a.getHeight()&&(i=window.scrollY+t.top+e.top-this.mentionContainer.offsetHeight),n+this.mentionContainer.offsetWidth>h.a.getWidth()&&(n=h.a.getWidth()-this.mentionContainer.offsetWidth),this.mentionContainer.style.top=`${i}px`,this.mentionContainer.style.left=`${n}px`,this.mentionContainer.style.visibility="visible"}onSomethingChange(){const t=this.quill.getSelection();if(null==t)return;this.cursorPos=t.index;const e=Math.max(0,this.cursorPos-this.maxChars),i=this.quill.getText(e,this.cursorPos-e),n=i.lastIndexOf("@");if(n>-1){const t=this.cursorPos-(i.length-n);this.atPos=t;const e=i.substring(n+1);e.length>=this.minChars&&this.hasValidChars(e)?this.source(e):this.hideMentionList()}else this.hideMentionList()}onTextChange(t,e,i){"user"===i&&this.onSomethingChange()}onSelectionChange(t){t&&0===t.length?this.onSomethingChange():this.hideMentionList()}})},function(t,e){},function(t,e){const i=Quill.import("blots/embed");class n extends i{static create(t){const e=super.create(),i=document.createElement("span");return i.className="ql-mention-at-sign",i.innerHTML="@",e.appendChild(i),e.innerHTML+=t.value,e.dataset.id=t.id,e.dataset.value=t.value,e}static value(t){return{id:t.dataset.id,value:t.dataset.value}}}n.blotName="mention",n.tagName="span",n.className="mention",Quill.register(n)},function(t,e,i){"use strict";e.a={TAB:9,ENTER:13,ESCAPE:27,UP:38,DOWN:40}},function(t,e,i){"use strict";e.a=class{static getWidth(){return Math.max(document.body.scrollWidth,document.documentElement.scrollWidth,document.body.offsetWidth,document.documentElement.offsetWidth,document.documentElement.clientWidth)}static getHeight(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.documentElement.clientHeight)}}}]);

package.json

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

src/constants/keys.js

@@ -0,0 +0,0 @@ const Keys = {

src/quill.mention.js

 import './quill.mention.css';
 import './blots/mention';
 import Keys from './constants/keys';
+import Utilities from './helpers/utilities';
 
@@ -24,5 +25,8 @@
     this.mentionContainer.style.cssText = 'display: none; position: absolute;';
-    this.mentionContainer.innerHTML = '<ul id="ql-mention-list" class="ql-mention-list"></ul>';
+
+    this.mentionList = document.createElement('ul');
+    this.mentionList.className = 'ql-mention-list';
+    this.mentionContainer.appendChild(this.mentionList);
+
     document.body.appendChild(this.mentionContainer);
-    this.mentionList = document.getElementById('ql-mention-list');
 
@@ -89,2 +93,4 @@ quill.on('text-change', this.onTextChange.bind(this));
     this.mentionContainer.style.display = '';
+    this.mentionContainer.style.visibility = 'hidden';
+    this.setMentionListPosition();
     this.isOpen = true;
@@ -165,7 +171,16 @@ }
 
-  setMentionListPosition(startIndex) {
+  setMentionListPosition() {
     const containerPos = this.quill.container.getBoundingClientRect();
-    const indexPos = this.quill.getBounds(startIndex);
-    this.mentionContainer.style.top = `${window.scrollY + containerPos.top + indexPos.bottom}px`;
-    this.mentionContainer.style.left = `${window.scrollX + containerPos.left + indexPos.left}px`;
+    const atPos = this.quill.getBounds(this.atPos);
+    let topPos = window.scrollY + containerPos.top + atPos.bottom;
+    let leftPos = window.scrollX + containerPos.left + atPos.left;
+    if (topPos + this.mentionContainer.offsetHeight > Utilities.getHeight()) {
+      topPos = (window.scrollY + containerPos.top + atPos.top) - this.mentionContainer.offsetHeight;
+    }
+    if (leftPos + this.mentionContainer.offsetWidth > Utilities.getWidth()) {
+      leftPos = Utilities.getWidth() - this.mentionContainer.offsetWidth;
+    }
+    this.mentionContainer.style.top = `${topPos}px`;
+    this.mentionContainer.style.left = `${leftPos}px`;
+    this.mentionContainer.style.visibility = 'visible';
   }
@@ -183,3 +198,2 @@
       this.atPos = atPos;
-      this.setMentionListPosition(atPos);
       const textAfterAtPos = beforeCursorPos.substring(atSignIndex + 1);
@@ -186,0 +200,0 @@ if (textAfterAtPos.length >= this.minChars && this.hasValidChars(textAfterAtPos)) {

webpack.config.js

@@ -0,0 +0,0 @@ const path = require('path');

No alert changes

Improved metrics

Number of package files

16

increased by14.29%

Lines of code

750

increased by155.1%

Worsened metrics

Total package byte prevSize

36292

decreased by-81.6%

No dependency changes