Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
quill-mention
Advanced tools
quill-mention - npm Package Compare versions
Comparing version 2.2.1 to 2.2.2
@@ -132,3 +132,3 @@ 'use strict'; | ||
| var Embed = Quill["import"]('blots/embed'); | ||
| var Embed = Quill["import"]("blots/embed"); | ||
@@ -151,4 +151,4 @@ var MentionBlot = | ||
| var denotationChar = document.createElement('span'); | ||
| denotationChar.className = 'ql-mention-denotation-char'; | ||
| var denotationChar = document.createElement("span"); | ||
| denotationChar.className = "ql-mention-denotation-char"; | ||
| denotationChar.innerHTML = data.denotationChar; | ||
@@ -178,5 +178,5 @@ node.appendChild(denotationChar); | ||
| MentionBlot.blotName = 'mention'; | ||
| MentionBlot.tagName = 'span'; | ||
| MentionBlot.className = 'mention'; | ||
| MentionBlot.blotName = "mention"; | ||
| MentionBlot.tagName = "span"; | ||
| MentionBlot.className = "mention"; | ||
| Quill.register(MentionBlot); | ||
@@ -205,3 +205,3 @@ | ||
| }, | ||
| mentionDenotationChars: ['@'], | ||
| mentionDenotationChars: ["@"], | ||
| showDenotationChar: true, | ||
@@ -215,5 +215,5 @@ allowedChars: /^[a-zA-Z0-9_]*$/, | ||
| fixMentionsToQuill: false, | ||
| defaultMenuOrientation: 'bottom', | ||
| dataAttributes: ['id', 'value', 'denotationChar', 'link', 'target'], | ||
| linkTarget: '_blank', | ||
| defaultMenuOrientation: "bottom", | ||
| dataAttributes: ["id", "value", "denotationChar", "link", "target"], | ||
| linkTarget: "_blank", | ||
| onOpen: function onOpen() { | ||
@@ -226,5 +226,5 @@ return true; | ||
| // Style options | ||
| listItemClass: 'ql-mention-list-item', | ||
| mentionContainerClass: 'ql-mention-list-container', | ||
| mentionListClass: 'ql-mention-list', | ||
| listItemClass: "ql-mention-list-item", | ||
| mentionContainerClass: "ql-mention-list-container", | ||
| mentionListClass: "ql-mention-list", | ||
| spaceAfterInsert: true | ||
@@ -237,17 +237,17 @@ }; | ||
| this.mentionContainer = document.createElement('div'); | ||
| this.mentionContainer.className = this.options.mentionContainerClass ? this.options.mentionContainerClass : ''; | ||
| this.mentionContainer.style.cssText = 'display: none; position: absolute;'; | ||
| this.mentionContainer = document.createElement("div"); | ||
| this.mentionContainer.className = this.options.mentionContainerClass ? this.options.mentionContainerClass : ""; | ||
| 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.mentionContainer.style.width = "auto"; | ||
| } | ||
| this.mentionList = document.createElement('ul'); | ||
| this.mentionList.className = this.options.mentionListClass ? this.options.mentionListClass : ''; | ||
| this.mentionList = document.createElement("ul"); | ||
| this.mentionList.className = this.options.mentionListClass ? this.options.mentionListClass : ""; | ||
| this.mentionContainer.appendChild(this.mentionList); | ||
| this.quill.container.appendChild(this.mentionContainer); | ||
| quill.on('text-change', this.onTextChange.bind(this)); | ||
| quill.on('selection-change', this.onSelectionChange.bind(this)); | ||
| quill.on("text-change", this.onTextChange.bind(this)); | ||
| quill.on("selection-change", this.onSelectionChange.bind(this)); | ||
| quill.keyboard.addBinding({ | ||
@@ -315,4 +315,4 @@ key: Keys.TAB | ||
| value: function showMentionList() { | ||
| this.mentionContainer.style.visibility = 'hidden'; | ||
| this.mentionContainer.style.display = ''; | ||
| this.mentionContainer.style.visibility = "hidden"; | ||
| this.mentionContainer.style.display = ""; | ||
| this.setMentionContainerPosition(); | ||
@@ -324,3 +324,3 @@ this.setIsOpen(true); | ||
| value: function hideMentionList() { | ||
| this.mentionContainer.style.display = 'none'; | ||
| this.mentionContainer.style.display = "none"; | ||
| this.setIsOpen(false); | ||
@@ -334,6 +334,6 @@ } | ||
| for (var i = 0; i < this.mentionList.childNodes.length; i += 1) { | ||
| this.mentionList.childNodes[i].classList.remove('selected'); | ||
| this.mentionList.childNodes[i].classList.remove("selected"); | ||
| } | ||
| this.mentionList.childNodes[this.itemIndex].classList.add('selected'); | ||
| this.mentionList.childNodes[this.itemIndex].classList.add("selected"); | ||
@@ -359,3 +359,3 @@ if (scrollItemInView) { | ||
| var link = this.mentionList.childNodes[this.itemIndex].dataset.link; | ||
| var hasLinkValue = typeof link !== 'undefined'; | ||
| var hasLinkValue = typeof link !== "undefined"; | ||
| var itemTarget = this.mentionList.childNodes[this.itemIndex].dataset.target; | ||
@@ -395,3 +395,3 @@ | ||
| if (!this.options.showDenotationChar) { | ||
| render.denotationChar = ''; | ||
| render.denotationChar = ""; | ||
| } | ||
@@ -401,6 +401,6 @@ | ||
| this.quill.deleteText(this.mentionCharPos, this.cursorPos - this.mentionCharPos, Quill.sources.USER); | ||
| this.quill.insertEmbed(prevMentionCharPos, 'mention', render, Quill.sources.USER); | ||
| this.quill.insertEmbed(prevMentionCharPos, "mention", render, Quill.sources.USER); | ||
| if (this.options.spaceAfterInsert) { | ||
| this.quill.insertText(prevMentionCharPos + 1, ' ', Quill.sources.USER); // setSelection here sets cursor position | ||
| this.quill.insertText(prevMentionCharPos + 1, " ", Quill.sources.USER); // setSelection here sets cursor position | ||
@@ -431,4 +431,4 @@ this.quill.setSelection(prevMentionCharPos + 2, Quill.sources.USER); | ||
| value: function onItemClick(e) { | ||
| e.preventDefault(); | ||
| e.stopImmediatePropagation(); | ||
| e.preventDefault(); | ||
| this.itemIndex = e.currentTarget.dataset.index; | ||
@@ -458,7 +458,7 @@ this.highlightItem(); | ||
| this.values = data; | ||
| this.mentionList.innerHTML = ''; | ||
| this.mentionList.innerHTML = ""; | ||
| for (var i = 0; i < data.length; i += 1) { | ||
| var li = document.createElement('li'); | ||
| li.className = this.options.listItemClass ? this.options.listItemClass : ''; | ||
| var li = document.createElement("li"); | ||
| li.className = this.options.listItemClass ? this.options.listItemClass : ""; | ||
| li.dataset.index = i; | ||
@@ -551,3 +551,3 @@ li.innerHTML = this.options.renderItem(data[i], searchTerm); | ||
| if (this.options.defaultMenuOrientation === 'top') { | ||
| if (this.options.defaultMenuOrientation === "top") { | ||
| // Attempt to align the mention container with the top of the quill editor | ||
@@ -602,3 +602,3 @@ if (this.options.fixMentionsToQuill) { | ||
| this.mentionContainer.style.left = "".concat(leftPos, "px"); | ||
| this.mentionContainer.style.visibility = 'visible'; | ||
| this.mentionContainer.style.visibility = "visible"; | ||
| } | ||
@@ -642,3 +642,3 @@ }, { | ||
| value: function onTextChange(delta, oldDelta, source) { | ||
| if (source === 'user') { | ||
| if (source === "user") { | ||
| this.onSomethingChange(); | ||
@@ -661,4 +661,4 @@ } | ||
| Quill.register('modules/mention', Mention); | ||
| Quill.register("modules/mention", Mention); | ||
| module.exports = Mention; |
@@ -128,3 +128,3 @@ import Quill from 'quill'; | ||
| var Embed = Quill["import"]('blots/embed'); | ||
| var Embed = Quill["import"]("blots/embed"); | ||
@@ -147,4 +147,4 @@ var MentionBlot = | ||
| var denotationChar = document.createElement('span'); | ||
| denotationChar.className = 'ql-mention-denotation-char'; | ||
| var denotationChar = document.createElement("span"); | ||
| denotationChar.className = "ql-mention-denotation-char"; | ||
| denotationChar.innerHTML = data.denotationChar; | ||
@@ -174,5 +174,5 @@ node.appendChild(denotationChar); | ||
| MentionBlot.blotName = 'mention'; | ||
| MentionBlot.tagName = 'span'; | ||
| MentionBlot.className = 'mention'; | ||
| MentionBlot.blotName = "mention"; | ||
| MentionBlot.tagName = "span"; | ||
| MentionBlot.className = "mention"; | ||
| Quill.register(MentionBlot); | ||
@@ -201,3 +201,3 @@ | ||
| }, | ||
| mentionDenotationChars: ['@'], | ||
| mentionDenotationChars: ["@"], | ||
| showDenotationChar: true, | ||
@@ -211,5 +211,5 @@ allowedChars: /^[a-zA-Z0-9_]*$/, | ||
| fixMentionsToQuill: false, | ||
| defaultMenuOrientation: 'bottom', | ||
| dataAttributes: ['id', 'value', 'denotationChar', 'link', 'target'], | ||
| linkTarget: '_blank', | ||
| defaultMenuOrientation: "bottom", | ||
| dataAttributes: ["id", "value", "denotationChar", "link", "target"], | ||
| linkTarget: "_blank", | ||
| onOpen: function onOpen() { | ||
@@ -222,5 +222,5 @@ return true; | ||
| // Style options | ||
| listItemClass: 'ql-mention-list-item', | ||
| mentionContainerClass: 'ql-mention-list-container', | ||
| mentionListClass: 'ql-mention-list', | ||
| listItemClass: "ql-mention-list-item", | ||
| mentionContainerClass: "ql-mention-list-container", | ||
| mentionListClass: "ql-mention-list", | ||
| spaceAfterInsert: true | ||
@@ -233,17 +233,17 @@ }; | ||
| this.mentionContainer = document.createElement('div'); | ||
| this.mentionContainer.className = this.options.mentionContainerClass ? this.options.mentionContainerClass : ''; | ||
| this.mentionContainer.style.cssText = 'display: none; position: absolute;'; | ||
| this.mentionContainer = document.createElement("div"); | ||
| this.mentionContainer.className = this.options.mentionContainerClass ? this.options.mentionContainerClass : ""; | ||
| 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.mentionContainer.style.width = "auto"; | ||
| } | ||
| this.mentionList = document.createElement('ul'); | ||
| this.mentionList.className = this.options.mentionListClass ? this.options.mentionListClass : ''; | ||
| this.mentionList = document.createElement("ul"); | ||
| this.mentionList.className = this.options.mentionListClass ? this.options.mentionListClass : ""; | ||
| this.mentionContainer.appendChild(this.mentionList); | ||
| this.quill.container.appendChild(this.mentionContainer); | ||
| quill.on('text-change', this.onTextChange.bind(this)); | ||
| quill.on('selection-change', this.onSelectionChange.bind(this)); | ||
| quill.on("text-change", this.onTextChange.bind(this)); | ||
| quill.on("selection-change", this.onSelectionChange.bind(this)); | ||
| quill.keyboard.addBinding({ | ||
@@ -311,4 +311,4 @@ key: Keys.TAB | ||
| value: function showMentionList() { | ||
| this.mentionContainer.style.visibility = 'hidden'; | ||
| this.mentionContainer.style.display = ''; | ||
| this.mentionContainer.style.visibility = "hidden"; | ||
| this.mentionContainer.style.display = ""; | ||
| this.setMentionContainerPosition(); | ||
@@ -320,3 +320,3 @@ this.setIsOpen(true); | ||
| value: function hideMentionList() { | ||
| this.mentionContainer.style.display = 'none'; | ||
| this.mentionContainer.style.display = "none"; | ||
| this.setIsOpen(false); | ||
@@ -330,6 +330,6 @@ } | ||
| for (var i = 0; i < this.mentionList.childNodes.length; i += 1) { | ||
| this.mentionList.childNodes[i].classList.remove('selected'); | ||
| this.mentionList.childNodes[i].classList.remove("selected"); | ||
| } | ||
| this.mentionList.childNodes[this.itemIndex].classList.add('selected'); | ||
| this.mentionList.childNodes[this.itemIndex].classList.add("selected"); | ||
@@ -355,3 +355,3 @@ if (scrollItemInView) { | ||
| var link = this.mentionList.childNodes[this.itemIndex].dataset.link; | ||
| var hasLinkValue = typeof link !== 'undefined'; | ||
| var hasLinkValue = typeof link !== "undefined"; | ||
| var itemTarget = this.mentionList.childNodes[this.itemIndex].dataset.target; | ||
@@ -391,3 +391,3 @@ | ||
| if (!this.options.showDenotationChar) { | ||
| render.denotationChar = ''; | ||
| render.denotationChar = ""; | ||
| } | ||
@@ -397,6 +397,6 @@ | ||
| this.quill.deleteText(this.mentionCharPos, this.cursorPos - this.mentionCharPos, Quill.sources.USER); | ||
| this.quill.insertEmbed(prevMentionCharPos, 'mention', render, Quill.sources.USER); | ||
| this.quill.insertEmbed(prevMentionCharPos, "mention", render, Quill.sources.USER); | ||
| if (this.options.spaceAfterInsert) { | ||
| this.quill.insertText(prevMentionCharPos + 1, ' ', Quill.sources.USER); // setSelection here sets cursor position | ||
| this.quill.insertText(prevMentionCharPos + 1, " ", Quill.sources.USER); // setSelection here sets cursor position | ||
@@ -427,4 +427,4 @@ this.quill.setSelection(prevMentionCharPos + 2, Quill.sources.USER); | ||
| value: function onItemClick(e) { | ||
| e.preventDefault(); | ||
| e.stopImmediatePropagation(); | ||
| e.preventDefault(); | ||
| this.itemIndex = e.currentTarget.dataset.index; | ||
@@ -454,7 +454,7 @@ this.highlightItem(); | ||
| this.values = data; | ||
| this.mentionList.innerHTML = ''; | ||
| this.mentionList.innerHTML = ""; | ||
| for (var i = 0; i < data.length; i += 1) { | ||
| var li = document.createElement('li'); | ||
| li.className = this.options.listItemClass ? this.options.listItemClass : ''; | ||
| var li = document.createElement("li"); | ||
| li.className = this.options.listItemClass ? this.options.listItemClass : ""; | ||
| li.dataset.index = i; | ||
@@ -547,3 +547,3 @@ li.innerHTML = this.options.renderItem(data[i], searchTerm); | ||
| if (this.options.defaultMenuOrientation === 'top') { | ||
| if (this.options.defaultMenuOrientation === "top") { | ||
| // Attempt to align the mention container with the top of the quill editor | ||
@@ -598,3 +598,3 @@ if (this.options.fixMentionsToQuill) { | ||
| this.mentionContainer.style.left = "".concat(leftPos, "px"); | ||
| this.mentionContainer.style.visibility = 'visible'; | ||
| this.mentionContainer.style.visibility = "visible"; | ||
| } | ||
@@ -638,3 +638,3 @@ }, { | ||
| value: function onTextChange(delta, oldDelta, source) { | ||
| if (source === 'user') { | ||
| if (source === "user") { | ||
| this.onSomethingChange(); | ||
@@ -657,4 +657,4 @@ } | ||
| Quill.register('modules/mention', Mention); | ||
| Quill.register("modules/mention", Mention); | ||
| export default Mention; |
@@ -1,1 +0,1 @@ | ||
| var quillMention=function(t){"use strict";function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function n(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function s(){return(s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n])}return t}).apply(this,arguments)}function o(t){return(o=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function a(t,e){return(a=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function r(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function h(t,e,i){return(h="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,i){var n=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=o(t)););return t}(t,e);if(n){var s=Object.getOwnPropertyDescriptor(n,e);return s.get?s.get.call(i):s.value}})(t,e,i||t)}t=t&&t.hasOwnProperty("default")?t.default:t;var l={TAB:9,ENTER:13,ESCAPE:27,UP:38,DOWN:40},u=function(t){function i(){return e(this,i),r(this,o(i).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");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&a(t,e)}(i,t),n(i,null,[{key:"create",value:function(t){var e=h(o(i),"create",this).call(this),n=document.createElement("span");return n.className="ql-mention-denotation-char",n.innerHTML=t.denotationChar,e.appendChild(n),e.innerHTML+=t.value,i.setDataValues(e,t)}},{key:"setDataValues",value:function(t,e){var i=t;return Object.keys(e).forEach((function(t){i.dataset[t]=e[t]})),i}},{key:"value",value:function(t){return t.dataset}}]),i}(t.import("blots/embed"));u.blotName="mention",u.tagName="span",u.className="mention",t.register(u);var c=function(){function i(t,n){e(this,i),this.isOpen=!1,this.itemIndex=0,this.mentionCharPos=null,this.cursorPos=null,this.values=[],this.suspendMouseEnter=!1,this.quill=t,this.options={source:null,renderItem:function(t){return"".concat(t.value)},onSelect:function(t,e){e(t)},mentionDenotationChars:["@"],showDenotationChar:!0,allowedChars:/^[a-zA-Z0-9_]*$/,minChars:0,maxChars:31,offsetTop:2,offsetLeft:0,isolateCharacter:!1,fixMentionsToQuill:!1,defaultMenuOrientation:"bottom",dataAttributes:["id","value","denotationChar","link","target"],linkTarget:"_blank",onOpen:function(){return!0},onClose:function(){return!0},listItemClass:"ql-mention-list-item",mentionContainerClass:"ql-mention-list-container",mentionListClass:"ql-mention-list",spaceAfterInsert:!0},s(this.options,n,{dataAttributes:Array.isArray(n.dataAttributes)?this.options.dataAttributes.concat(n.dataAttributes):this.options.dataAttributes}),this.mentionContainer=document.createElement("div"),this.mentionContainer.className=this.options.mentionContainerClass?this.options.mentionContainerClass:"",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=this.options.mentionListClass?this.options.mentionListClass:"",this.mentionContainer.appendChild(this.mentionList),this.quill.container.appendChild(this.mentionContainer),t.on("text-change",this.onTextChange.bind(this)),t.on("selection-change",this.onSelectionChange.bind(this)),t.keyboard.addBinding({key:l.TAB},this.selectHandler.bind(this)),t.keyboard.bindings[9].unshift(t.keyboard.bindings[9].pop()),t.keyboard.addBinding({key:l.ENTER},this.selectHandler.bind(this)),t.keyboard.bindings[13].unshift(t.keyboard.bindings[13].pop()),t.keyboard.addBinding({key:l.ESCAPE},this.escapeHandler.bind(this)),t.keyboard.addBinding({key:l.UP},this.upHandler.bind(this)),t.keyboard.addBinding({key:l.DOWN},this.downHandler.bind(this))}return n(i,[{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.setIsOpen(!0)}},{key:"hideMentionList",value:function(){this.mentionContainer.style.display="none",this.setIsOpen(!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 i=this.mentionList.childNodes[this.itemIndex].offsetHeight,n=this.itemIndex*i,s=this.mentionContainer.scrollTop,o=s+this.mentionContainer.offsetHeight;n<s?this.mentionContainer.scrollTop=n:n>o-i&&(this.mentionContainer.scrollTop+=n-o+i)}}},{key:"getItemData",value:function(){var t=this.mentionList.childNodes[this.itemIndex].dataset.link,e=void 0!==t,i=this.mentionList.childNodes[this.itemIndex].dataset.target;return e&&(this.mentionList.childNodes[this.itemIndex].dataset.value='<a href="'.concat(t,'" target=').concat(i||this.options.linkTarget,">").concat(this.mentionList.childNodes[this.itemIndex].dataset.value)),this.mentionList.childNodes[this.itemIndex].dataset}},{key:"onContainerMouseMove",value:function(){this.suspendMouseEnter=!1}},{key:"selectItem",value:function(){var t=this,e=this.getItemData();this.options.onSelect(e,(function(e){t.insertItem(e)})),this.hideMentionList()}},{key:"insertItem",value:function(e){var i=e;if(null!==i){this.options.showDenotationChar||(i.denotationChar="");var n=this.mentionCharPos;this.quill.deleteText(this.mentionCharPos,this.cursorPos-this.mentionCharPos,t.sources.USER),this.quill.insertEmbed(n,"mention",i,t.sources.USER),this.options.spaceAfterInsert?(this.quill.insertText(n+1," ",t.sources.USER),this.quill.setSelection(n+2,t.sources.USER)):this.quill.setSelection(n+1,t.sources.USER),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:"attachDataValues",value:function(t,e){var i=this,n=t;return Object.keys(e).forEach((function(t){i.options.dataAttributes.indexOf(t)>-1?n.dataset[t]=e[t]:delete n.dataset[t]})),n}},{key:"renderList",value:function(t,e,i){if(e&&e.length>0){this.values=e,this.mentionList.innerHTML="";for(var n=0;n<e.length;n+=1){var s=document.createElement("li");s.className=this.options.listItemClass?this.options.listItemClass:"",s.dataset.index=n,s.innerHTML=this.options.renderItem(e[n],i),s.onmouseenter=this.onItemMouseEnter.bind(this),s.dataset.denotationChar=t,s.onclick=this.onItemClick.bind(this),this.mentionList.appendChild(this.attachDataValues(s,e[n]))}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,e){return t+this.mentionContainer.offsetHeight+e.top>window.pageYOffset+window.innerHeight}},{key:"containerRightIsNotVisible",value:function(t,e){return!this.options.fixMentionsToQuill&&t+this.mentionContainer.offsetWidth+e.left>window.pageXOffset+document.documentElement.clientWidth}},{key:"setIsOpen",value:function(t){this.isOpen!==t&&(t?this.options.onOpen():this.options.onClose(),this.isOpen=t)}},{key:"setMentionContainerPosition",value:function(){var t=this.quill.container.getBoundingClientRect(),e=this.quill.getBounds(this.mentionCharPos),i=this.mentionContainer.offsetHeight,n=this.options.offsetTop,s=this.options.offsetLeft;if(this.options.fixMentionsToQuill){this.mentionContainer.style.right="".concat(0,"px")}else s+=e.left;if(this.containerRightIsNotVisible(s,t)){var o=this.mentionContainer.offsetWidth+this.options.offsetLeft;s=t.width-o}if("top"===this.options.defaultMenuOrientation){if((n=this.options.fixMentionsToQuill?-1*(i+this.options.offsetTop):e.top-(i+this.options.offsetTop))+t.top<=0){var a=this.options.offsetTop;this.options.fixMentionsToQuill?a+=t.height:a+=e.bottom,n=a}}else if(this.options.fixMentionsToQuill?n+=t.height:n+=e.bottom,this.containerBottomIsNotVisible(n,t)){var r=-1*this.options.offsetTop;this.options.fixMentionsToQuill||(r+=e.top),n=r-i}n>=0?(this.mentionContainer.classList.add("".concat(this.options.mentionContainerClass,"-bottom")),this.mentionContainer.classList.remove("".concat(this.options.mentionContainerClass,"-top"))):(this.mentionContainer.classList.add("".concat(this.options.mentionContainerClass,"-top")),this.mentionContainer.classList.remove("".concat(this.options.mentionContainerClass,"-bottom"))),this.mentionContainer.style.top="".concat(n,"px"),this.mentionContainer.style.left="".concat(s,"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),i=this.quill.getText(e,this.cursorPos-e),n=this.options.mentionDenotationChars.reduce((function(t,e){var n=t,s=i.lastIndexOf(e);return s>n?s:n}),-1);if(n>-1){if(this.options.isolateCharacter&&0!==n&&!i[n-1].match(/\s/g))return void this.hideMentionList();var s=this.cursorPos-(i.length-n);this.mentionCharPos=s;var o=i.substring(n+1);if(o.length>=this.options.minChars&&this.hasValidChars(o)){var a=i[n];this.options.source(o,this.renderList.bind(this,a),a)}else this.hideMentionList()}else this.hideMentionList()}}},{key:"onTextChange",value:function(t,e,i){"user"===i&&this.onSomethingChange()}},{key:"onSelectionChange",value:function(t){t&&0===t.length?this.onSomethingChange():this.hideMentionList()}}]),i}();return t.register("modules/mention",c),c}(Quill); | ||
| var quillMention=function(t){"use strict";function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function n(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function s(){return(s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n])}return t}).apply(this,arguments)}function o(t){return(o=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function a(t,e){return(a=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function r(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function h(t,e,i){return(h="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,i){var n=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=o(t)););return t}(t,e);if(n){var s=Object.getOwnPropertyDescriptor(n,e);return s.get?s.get.call(i):s.value}})(t,e,i||t)}t=t&&t.hasOwnProperty("default")?t.default:t;var l={TAB:9,ENTER:13,ESCAPE:27,UP:38,DOWN:40},u=function(t){function i(){return e(this,i),r(this,o(i).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");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&a(t,e)}(i,t),n(i,null,[{key:"create",value:function(t){var e=h(o(i),"create",this).call(this),n=document.createElement("span");return n.className="ql-mention-denotation-char",n.innerHTML=t.denotationChar,e.appendChild(n),e.innerHTML+=t.value,i.setDataValues(e,t)}},{key:"setDataValues",value:function(t,e){var i=t;return Object.keys(e).forEach((function(t){i.dataset[t]=e[t]})),i}},{key:"value",value:function(t){return t.dataset}}]),i}(t.import("blots/embed"));u.blotName="mention",u.tagName="span",u.className="mention",t.register(u);var c=function(){function i(t,n){e(this,i),this.isOpen=!1,this.itemIndex=0,this.mentionCharPos=null,this.cursorPos=null,this.values=[],this.suspendMouseEnter=!1,this.quill=t,this.options={source:null,renderItem:function(t){return"".concat(t.value)},onSelect:function(t,e){e(t)},mentionDenotationChars:["@"],showDenotationChar:!0,allowedChars:/^[a-zA-Z0-9_]*$/,minChars:0,maxChars:31,offsetTop:2,offsetLeft:0,isolateCharacter:!1,fixMentionsToQuill:!1,defaultMenuOrientation:"bottom",dataAttributes:["id","value","denotationChar","link","target"],linkTarget:"_blank",onOpen:function(){return!0},onClose:function(){return!0},listItemClass:"ql-mention-list-item",mentionContainerClass:"ql-mention-list-container",mentionListClass:"ql-mention-list",spaceAfterInsert:!0},s(this.options,n,{dataAttributes:Array.isArray(n.dataAttributes)?this.options.dataAttributes.concat(n.dataAttributes):this.options.dataAttributes}),this.mentionContainer=document.createElement("div"),this.mentionContainer.className=this.options.mentionContainerClass?this.options.mentionContainerClass:"",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=this.options.mentionListClass?this.options.mentionListClass:"",this.mentionContainer.appendChild(this.mentionList),this.quill.container.appendChild(this.mentionContainer),t.on("text-change",this.onTextChange.bind(this)),t.on("selection-change",this.onSelectionChange.bind(this)),t.keyboard.addBinding({key:l.TAB},this.selectHandler.bind(this)),t.keyboard.bindings[9].unshift(t.keyboard.bindings[9].pop()),t.keyboard.addBinding({key:l.ENTER},this.selectHandler.bind(this)),t.keyboard.bindings[13].unshift(t.keyboard.bindings[13].pop()),t.keyboard.addBinding({key:l.ESCAPE},this.escapeHandler.bind(this)),t.keyboard.addBinding({key:l.UP},this.upHandler.bind(this)),t.keyboard.addBinding({key:l.DOWN},this.downHandler.bind(this))}return n(i,[{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.setIsOpen(!0)}},{key:"hideMentionList",value:function(){this.mentionContainer.style.display="none",this.setIsOpen(!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 i=this.mentionList.childNodes[this.itemIndex].offsetHeight,n=this.itemIndex*i,s=this.mentionContainer.scrollTop,o=s+this.mentionContainer.offsetHeight;n<s?this.mentionContainer.scrollTop=n:n>o-i&&(this.mentionContainer.scrollTop+=n-o+i)}}},{key:"getItemData",value:function(){var t=this.mentionList.childNodes[this.itemIndex].dataset.link,e=void 0!==t,i=this.mentionList.childNodes[this.itemIndex].dataset.target;return e&&(this.mentionList.childNodes[this.itemIndex].dataset.value='<a href="'.concat(t,'" target=').concat(i||this.options.linkTarget,">").concat(this.mentionList.childNodes[this.itemIndex].dataset.value)),this.mentionList.childNodes[this.itemIndex].dataset}},{key:"onContainerMouseMove",value:function(){this.suspendMouseEnter=!1}},{key:"selectItem",value:function(){var t=this,e=this.getItemData();this.options.onSelect(e,(function(e){t.insertItem(e)})),this.hideMentionList()}},{key:"insertItem",value:function(e){var i=e;if(null!==i){this.options.showDenotationChar||(i.denotationChar="");var n=this.mentionCharPos;this.quill.deleteText(this.mentionCharPos,this.cursorPos-this.mentionCharPos,t.sources.USER),this.quill.insertEmbed(n,"mention",i,t.sources.USER),this.options.spaceAfterInsert?(this.quill.insertText(n+1," ",t.sources.USER),this.quill.setSelection(n+2,t.sources.USER)):this.quill.setSelection(n+1,t.sources.USER),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.preventDefault(),t.stopImmediatePropagation(),this.itemIndex=t.currentTarget.dataset.index,this.highlightItem(),this.selectItem()}},{key:"attachDataValues",value:function(t,e){var i=this,n=t;return Object.keys(e).forEach((function(t){i.options.dataAttributes.indexOf(t)>-1?n.dataset[t]=e[t]:delete n.dataset[t]})),n}},{key:"renderList",value:function(t,e,i){if(e&&e.length>0){this.values=e,this.mentionList.innerHTML="";for(var n=0;n<e.length;n+=1){var s=document.createElement("li");s.className=this.options.listItemClass?this.options.listItemClass:"",s.dataset.index=n,s.innerHTML=this.options.renderItem(e[n],i),s.onmouseenter=this.onItemMouseEnter.bind(this),s.dataset.denotationChar=t,s.onclick=this.onItemClick.bind(this),this.mentionList.appendChild(this.attachDataValues(s,e[n]))}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,e){return t+this.mentionContainer.offsetHeight+e.top>window.pageYOffset+window.innerHeight}},{key:"containerRightIsNotVisible",value:function(t,e){return!this.options.fixMentionsToQuill&&t+this.mentionContainer.offsetWidth+e.left>window.pageXOffset+document.documentElement.clientWidth}},{key:"setIsOpen",value:function(t){this.isOpen!==t&&(t?this.options.onOpen():this.options.onClose(),this.isOpen=t)}},{key:"setMentionContainerPosition",value:function(){var t=this.quill.container.getBoundingClientRect(),e=this.quill.getBounds(this.mentionCharPos),i=this.mentionContainer.offsetHeight,n=this.options.offsetTop,s=this.options.offsetLeft;if(this.options.fixMentionsToQuill){this.mentionContainer.style.right="".concat(0,"px")}else s+=e.left;if(this.containerRightIsNotVisible(s,t)){var o=this.mentionContainer.offsetWidth+this.options.offsetLeft;s=t.width-o}if("top"===this.options.defaultMenuOrientation){if((n=this.options.fixMentionsToQuill?-1*(i+this.options.offsetTop):e.top-(i+this.options.offsetTop))+t.top<=0){var a=this.options.offsetTop;this.options.fixMentionsToQuill?a+=t.height:a+=e.bottom,n=a}}else if(this.options.fixMentionsToQuill?n+=t.height:n+=e.bottom,this.containerBottomIsNotVisible(n,t)){var r=-1*this.options.offsetTop;this.options.fixMentionsToQuill||(r+=e.top),n=r-i}n>=0?(this.mentionContainer.classList.add("".concat(this.options.mentionContainerClass,"-bottom")),this.mentionContainer.classList.remove("".concat(this.options.mentionContainerClass,"-top"))):(this.mentionContainer.classList.add("".concat(this.options.mentionContainerClass,"-top")),this.mentionContainer.classList.remove("".concat(this.options.mentionContainerClass,"-bottom"))),this.mentionContainer.style.top="".concat(n,"px"),this.mentionContainer.style.left="".concat(s,"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),i=this.quill.getText(e,this.cursorPos-e),n=this.options.mentionDenotationChars.reduce((function(t,e){var n=t,s=i.lastIndexOf(e);return s>n?s:n}),-1);if(n>-1){if(this.options.isolateCharacter&&0!==n&&!i[n-1].match(/\s/g))return void this.hideMentionList();var s=this.cursorPos-(i.length-n);this.mentionCharPos=s;var o=i.substring(n+1);if(o.length>=this.options.minChars&&this.hasValidChars(o)){var a=i[n];this.options.source(o,this.renderList.bind(this,a),a)}else this.hideMentionList()}else this.hideMentionList()}}},{key:"onTextChange",value:function(t,e,i){"user"===i&&this.onSomethingChange()}},{key:"onSelectionChange",value:function(t){t&&0===t.length?this.onSomethingChange():this.hideMentionList()}}]),i}();return t.register("modules/mention",c),c}(Quill); |
| { | ||
| "name": "quill-mention", | ||
| "version": "2.2.1", | ||
| "version": "2.2.2", | ||
| "description": "@mentions for the Quill rich text editor", | ||
@@ -22,11 +22,12 @@ "main": "dist/quill.mention.csj.js", | ||
| "@babel/preset-env": "^7.7.4", | ||
| "eslint": "^6.7.2", | ||
| "eslint-config-airbnb-base": "^14.0.0", | ||
| "eslint-plugin-import": "^2.18.2", | ||
| "concurrently": "^5.0.2", | ||
| "prettier": "1.19.1", | ||
| "rollup": "^1.27.8", | ||
| "rollup-plugin-babel": "^4.3.3", | ||
| "rollup-plugin-postcss": "^2.0.3", | ||
| "rollup-plugin-terser": "^5.1.2" | ||
| "rollup-plugin-terser": "^5.1.2", | ||
| "serve": "^11.2.0" | ||
| }, | ||
| "scripts": { | ||
| "start": "concurrently \"rollup -c -w\" \"serve docs\"", | ||
| "build": "rollup -c" | ||
@@ -33,0 +34,0 @@ }, |
127
README.md
|  | ||
| # Quill Mention | ||
| [](https://badge.fury.io/js/quill-mention) | ||
@@ -9,2 +11,3 @@ [](https://opensource.org/licenses/MIT) | ||
| ## Demo | ||
| https://afry.github.io/quill-mention/ | ||
@@ -15,8 +18,13 @@ | ||
| ## Getting Started | ||
| ### Install | ||
| Install with npm: | ||
| ```bash | ||
| npm install quill-mention --save | ||
| ``` | ||
| Install with [Yarn](https://yarnpkg.com/en/): | ||
| ```bash | ||
@@ -27,6 +35,7 @@ yarn add quill-mention | ||
| ### Import package | ||
| ```javascript | ||
| import 'quill-mention'; | ||
| import "quill-mention"; | ||
| // or | ||
| require('quill-mention'); | ||
| require("quill-mention"); | ||
| ``` | ||
@@ -39,15 +48,15 @@ | ||
| ### Example | ||
| ```javascript | ||
| import "quill-mention"; | ||
| import 'quill-mention'; | ||
| const atValues = [ | ||
| { id: 1, value: 'Fredrik Sundqvist' }, | ||
| { id: 2, value: 'Patrik Sjölin' } | ||
| { 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', { | ||
| { id: 3, value: "Fredrik Sundqvist 2" }, | ||
| { id: 4, value: "Patrik Sjölin 2" } | ||
| ]; | ||
| const quill = new Quill("#editor", { | ||
| modules: { | ||
@@ -57,3 +66,3 @@ mention: { | ||
| mentionDenotationChars: ["@", "#"], | ||
| source: function (searchTerm, renderList, mentionChar) { | ||
| source: function(searchTerm, renderList, mentionChar) { | ||
| let values; | ||
@@ -72,7 +81,10 @@ | ||
| for (let i = 0; i < values.length; i++) | ||
| if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) matches.push(values[i]); | ||
| if ( | ||
| ~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase()) | ||
| ) | ||
| matches.push(values[i]); | ||
| renderList(matches, searchTerm); | ||
| } | ||
| }, | ||
| }, | ||
| } | ||
| } | ||
| } | ||
@@ -83,2 +95,3 @@ }); | ||
| ### Async example | ||
| ```javascript | ||
@@ -89,13 +102,13 @@ async function suggestPeople(searchTerm) { | ||
| id: 1, | ||
| value: 'Fredrik Sundqvist' | ||
| value: "Fredrik Sundqvist" | ||
| }, | ||
| { | ||
| id: 2, | ||
| value: 'Patrik Sjölin' | ||
| value: "Patrik Sjölin" | ||
| } | ||
| ]; | ||
| return allPeople.filter((person) => person.value.includes(searchTerm)); | ||
| return allPeople.filter(person => person.value.includes(searchTerm)); | ||
| } | ||
| const quill = new Quill('#editor', { | ||
| const quill = new Quill("#editor", { | ||
| modules: { | ||
@@ -105,7 +118,7 @@ mention: { | ||
| mentionDenotationChars: ["@", "#"], | ||
| source: async function (searchTerm, renderList) { | ||
| source: async function(searchTerm, renderList) { | ||
| const matchedPeople = await suggestPeople(searchTerm); | ||
| renderList(matchedPeople); | ||
| }, | ||
| }, | ||
| } | ||
| } | ||
| } | ||
@@ -120,42 +133,43 @@ }); | ||
| ```javascript | ||
| 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 | ||
| }, | ||
| }, | ||
| 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 | ||
| | Property | Default | Description | | ||
| | -------------------- | -------------- | ------------ | | ||
| | `source(searchTerm, renderList, mentionChar)` | `null` | Required callback function to handle the search term and connect it to a data source for matches. The data source can be a local source or an AJAX request. The callback should call `renderList(matches, searchTerm);` with matches of JSON Objects in an array to show the result for the user. The JSON Objects should have `id` and `value` but can also have other values to be used in `renderItem` for custom display. | | ||
| | `renderItem(item, searchTerm)` | `function` | A function that gives you control over how matches from source are displayed. You can use this function to highlight the search term or change the design with custom HTML. | | ||
| | `allowedChars` | `[a-zA-Z0-9_]` | Allowed characters in search term triggering a search request using regular expressions | | ||
| | `minChars` | `0` | Minimum number of characters after the @ symbol triggering a search request | | ||
| | `maxChars` | `31` | Maximum number of characters after the @ symbol triggering a search request | | ||
| | `offsetTop` | `2` | Additional top offset of the mention container position | | ||
| | `offsetLeft` | `0` | Additional left offset of the mention container position | | ||
| | `mentionDenotationChars` | `["@"]` | Specifies which characters will cause the mention autocomplete to open | ||
| | `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); | ||
| |`showDenotationChar` | `true` | Whether to show the used denotation character in the mention item or not | ||
| | `defaultMenuOrientation` | `'bottom'` | Options are `'bottom'` and `'top'`. Determines what the default orientation of the menu will be. Quill-mention will attempt to render the menu either above or below the editor. If `'top'` is provided as a value, and there is not enough space above the editor, the menu will be rendered below. Vice versa, if there is not enough space below the editor, and `'bottom'` is provided as a value (or no value is provided at all), the menu will be rendered above the editor. | ||
| | `dataAttributes` | `['id', 'value', 'denotationChar', 'link', 'target']` | A list of data values you wish to be passed from your list data to the html node. (`id, value, denotationChar, link, target` are included by default). | ||
| | `onOpen` | `function` | Callback when mention dropdown is open. | ||
| | `onClose` | `function` | Callback when mention dropdown is closed. | ||
| |`onSelect(item, insertItem)` | `function` | Callback for a selected item. When overriding this method, `insertItem` should be used to insert `item` to the editor. This makes async requests possible. | ||
| | `linkTarget` | `'_blank'` | Link target for mentions with a link | ||
| | `listItemClass` | `'ql-mention-list-item'` | Style class to be used for list items (may be null) | ||
| | `mentionContainerClass` | `'ql-mention-list-container'` | Style class to be used for the mention list container (may be null) | ||
| | `mentionListClass` | `'ql-mention-list'` | Style class to be used for the mention list (may be null) | ||
| | `spaceAfterInsert` | `true` | Whether or not insert 1 space after mention block in text | ||
| | Property | Default | Description | | ||
| | --------------------------------------------- | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `source(searchTerm, renderList, mentionChar)` | `null` | Required callback function to handle the search term and connect it to a data source for matches. The data source can be a local source or an AJAX request. The callback should call `renderList(matches, searchTerm);` with matches of JSON Objects in an array to show the result for the user. The JSON Objects should have `id` and `value` but can also have other values to be used in `renderItem` for custom display. | | ||
| | `renderItem(item, searchTerm)` | `function` | A function that gives you control over how matches from source are displayed. You can use this function to highlight the search term or change the design with custom HTML. | | ||
| | `allowedChars` | `[a-zA-Z0-9_]` | Allowed characters in search term triggering a search request using regular expressions | | ||
| | `minChars` | `0` | Minimum number of characters after the @ symbol triggering a search request | | ||
| | `maxChars` | `31` | Maximum number of characters after the @ symbol triggering a search request | | ||
| | `offsetTop` | `2` | Additional top offset of the mention container position | | ||
| | `offsetLeft` | `0` | Additional left offset of the mention container position | | ||
| | `mentionDenotationChars` | `["@"]` | Specifies which characters will cause the mention autocomplete to open | | ||
| | `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); | | ||
| | `showDenotationChar` | `true` | Whether to show the used denotation character in the mention item or not | | ||
| | `defaultMenuOrientation` | `'bottom'` | Options are `'bottom'` and `'top'`. Determines what the default orientation of the menu will be. Quill-mention will attempt to render the menu either above or below the editor. If `'top'` is provided as a value, and there is not enough space above the editor, the menu will be rendered below. Vice versa, if there is not enough space below the editor, and `'bottom'` is provided as a value (or no value is provided at all), the menu will be rendered above the editor. | | ||
| | `dataAttributes` | `['id', 'value', 'denotationChar', 'link', 'target']` | A list of data values you wish to be passed from your list data to the html node. (`id, value, denotationChar, link, target` are included by default). | | ||
| | `onOpen` | `function` | Callback when mention dropdown is open. | | ||
| | `onClose` | `function` | Callback when mention dropdown is closed. | | ||
| | `onSelect(item, insertItem)` | `function` | Callback for a selected item. When overriding this method, `insertItem` should be used to insert `item` to the editor. This makes async requests possible. | | ||
| | `linkTarget` | `'_blank'` | Link target for mentions with a link | | ||
| | `listItemClass` | `'ql-mention-list-item'` | Style class to be used for list items (may be null) | | ||
| | `mentionContainerClass` | `'ql-mention-list-container'` | Style class to be used for the mention list container (may be null) | | ||
| | `mentionListClass` | `'ql-mention-list'` | Style class to be used for the mention list (may be null) | | ||
| | `spaceAfterInsert` | `true` | Whether or not insert 1 space after mention block in text | | ||
| ### Styling | ||
@@ -172,2 +186,3 @@ | ||
| ## License | ||
| This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by15.78%
71204
- Number of lines in readme file
- increased by9.2%
178
No dependency changes