@yaireo/tagify - npm Package Compare versions

Comparing version 2.19.1 to 2.20.1

dist/jQuery.tagify.min.js

 /**
- * Tagify (v 2.19.1)- tags input component
+ * Tagify (v 2.19.2)- tags input component
  * By Yair Even-Or
@@ -7,2 +7,2 @@ * Don't sell this code. (c)
  */
-"use strict";function _objectSpread(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{},n=Object.keys(i);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(i).filter(function(t){return Object.getOwnPropertyDescriptor(i,t).enumerable}))),n.forEach(function(t){_defineProperty(e,t,i[t])})}return e}function _defineProperty(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}!function(a){function n(t,e){if(!t)return console.warn("Tagify: ","invalid input element ",t),this;this.applySettings(t,e),this.state={},this.value=[],this.listeners={},this.DOM={},this.extend(this,new this.EventDispatcher(this)),this.build(t),this.loadOriginalValues(),this.events.customBinding.call(this),this.events.binding.call(this),t.autofocus&&this.DOM.input.focus()}a.fn.tagify=function(){var i=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};return this.each(function(){var t,e=a(this);if(e.data("tagify"))return this;i.isJQueryPlugin=!0,t=new n(e[0],i),e.data("tagify",t)})},n.prototype={isIE:window.document.documentMode,TEXTS:{empty:"empty",exceed:"number of tags exceeded",pattern:"pattern mismatch",duplicate:"already exists",notAllowed:"not allowed"},DEFAULTS:{delimiters:",",pattern:null,maxTags:1/0,callbacks:{},addTagOnBlur:!0,duplicates:!1,whitelist:[],blacklist:[],enforceWhitelist:!1,keepInvalidTags:!1,autoComplete:!0,mixTagsAllowedAfter:/,|\.|\:|\s/,backspace:!0,skipInvalid:!1,transformTag:function(){},dropdown:{classname:"",enabled:2,maxItems:10,itemTemplate:"",fuzzySearch:!0}},templates:{wrapper:function(t,e){return'<tags class="tagify '.concat(e.mode?"tagify--mix":""," ").concat(t.className,'"\n                          ').concat(e.readonly?'readonly aria-readonly="true"':'aria-haspopup="true" aria-expanded="false"','\n                          role="tagslist">\n                <span contenteditable data-placeholder="').concat(t.placeholder||"&#8203;",'" aria-placeholder="').concat(t.placeholder||"",'"\n                      class="tagify__input"\n                      role="textbox"\n                      aria-multiline="false"></span>\n            </tags>')},tag:function(t,e){return"<tag title='".concat(e.title||t,"'\n                         contenteditable='false'\n                         spellcheck='false'\n                         class='tagify__tag ").concat(e.class?e.class:"","'\n                         ").concat(this.getAttributes(e),">\n                <x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>\n                <div>\n                    <span class='tagify__tag-text'>").concat(t,"</span>\n                </div>\n            </tag>")},dropdownItem:function(t){var e=(t.value||t).replace(/`|'/g,"&#39;");return"<div ".concat(this.getAttributes(t),"\n                         class='tagify__dropdown__item ").concat(t.class?t.class:"",'\'\n                         tabindex="0"\n                         role="menuitem"\n                         aria-labelledby="dropdown-label">').concat(e,"</div>")}},customEventsList:["click","add","remove","invalid","input","edit"],applySettings:function(t,e){var i=t.getAttribute("data-whitelist"),n=t.getAttribute("data-blacklist");if(this.DEFAULTS.templates=this.templates,this.DEFAULTS.dropdown.itemTemplate=this.templates.dropdownItem,this.settings=this.extend({},this.DEFAULTS,e),this.settings.readonly=t.hasAttribute("readonly"),this.isIE&&(this.settings.autoComplete=!1),n&&(n=n.split(this.settings.delimiters))instanceof Array&&(this.settings.blacklist=n),i&&(i=i.split(this.settings.delimiters))instanceof Array&&(this.settings.whitelist=i),t.pattern)try{this.settings.pattern=new RegExp(t.pattern)}catch(t){}if(this.settings&&this.settings.delimiters)try{this.settings.delimiters=new RegExp("["+this.settings.delimiters+"]","g")}catch(t){}},parseHTML:function(t){return(new DOMParser).parseFromString(t.trim(),"text/html").body.firstElementChild},escapeHTML:function(t){var e=document.createTextNode(t),i=document.createElement("p");return i.appendChild(e),i.innerHTML},build:function(t){var e=this.DOM,i=this.settings.templates.wrapper(t,this.settings);e.originalInput=t,e.scope=this.parseHTML(i),e.input=e.scope.querySelector("[contenteditable]"),t.parentNode.insertBefore(e.scope,t),0<=this.settings.dropdown.enabled&&this.dropdown.init.call(this)},destroy:function(){this.DOM.scope.parentNode.removeChild(this.DOM.scope),this.dropdown.hide.call(this)},loadOriginalValues:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.DOM.originalInput.value;if(t){this.removeAllTags();try{t=JSON.parse(t)}catch(t){}"mix"==this.settings.mode?this.parseMixTags(t):this.addTags(t).forEach(function(t){t&&t.classList.add("tagify--noAnim")})}},extend:function(t,e,i){function n(t){var e=Object.prototype.toString.call(t).split(" ")[1].slice(0,-1);return t===Object(t)&&"Array"!=e&&"Function"!=e&&"RegExp"!=e&&"HTMLUnknownElement"!=e}function s(t,e){for(var i in e)e.hasOwnProperty(i)&&(n(e[i])?n(t[i])?s(t[i],e[i]):t[i]=Object.assign({},e[i]):t[i]=e[i])}return t instanceof Object||(t={}),s(t,e),i&&s(t,i),t},EventDispatcher:function(n){var s=document.createTextNode("");this.off=function(t,e){return e&&s.removeEventListener.call(s,t,e),this},this.on=function(t,e){return e&&s.addEventListener.call(s,t,e),this},this.trigger=function(t,e){var i;if(t)if(n.settings.isJQueryPlugin)a(n.DOM.originalInput).triggerHandler(t,[e]);else{try{i=new CustomEvent(t,{detail:e})}catch(t){console.warn(t)}s.dispatchEvent(i)}}},events:{customBinding:function(){var e=this;this.customEventsList.forEach(function(t){e.on(t,e.settings.callbacks[t])})},binding:function(){var t,e=!(0<arguments.length&&void 0!==arguments[0])||arguments[0],i=this.events.callbacks,n=e?"addEventListener":"removeEventListener";for(var s in e&&!this.listeners.main&&(this.DOM.input.addEventListener(this.isIE?"keydown":"input",i[this.isIE?"onInputIE":"onInput"].bind(this)),this.settings.isJQueryPlugin&&a(this.DOM.originalInput).on("tagify.removeAllTags",this.removeAllTags.bind(this))),t=this.listeners.main=this.listeners.main||{paste:["input",i.onPaste.bind(this)],focus:["input",i.onFocusBlur.bind(this)],blur:["input",i.onFocusBlur.bind(this)],keydown:["input",i.onKeydown.bind(this)],click:["scope",i.onClickScope.bind(this)],dblclick:["scope",i.onDoubleClickScope.bind(this)]})this.DOM[t[s][0]][n](s,t[s][1])},callbacks:{onFocusBlur:function(t){var e=t.target.textContent.trim();"mix"!=this.settings.mode&&("focus"==t.type?(this.DOM.scope.classList.add("tagify--focus"),0===this.settings.dropdown.enabled&&this.dropdown.show.call(this)):"blur"==t.type?(this.DOM.scope.classList.remove("tagify--focus"),e&&this.settings.addTagOnBlur&&this.addTags(e,!0).length):(this.DOM.input.removeAttribute("style"),this.dropdown.hide.call(this)))},onKeydown:function(t){var e,i,n=this,s=t.target.textContent;if("mix"==this.settings.mode){switch(t.key){case"Backspace":var a=[];i=this.DOM.input.children,setTimeout(function(){[].forEach.call(i,function(t){return a.push(t.getAttribute("value"))}),n.value=n.value.filter(function(t){return-1!=a.indexOf(t.value)})},20);break;case"Enter":t.preventDefault()}return!0}switch(t.key){case"Backspace":""!=s&&8203!=s.charCodeAt(0)||(e=(e=this.DOM.scope.querySelectorAll("tag:not(.tagify--hide):not([readonly])"))[e.length-1],!0===this.settings.backspace?this.removeTag(e):"edit"==this.settings.backspace&&this.editTag(e));break;case"Esc":case"Escape":this.input.set.call(this),t.target.blur();break;case"ArrowRight":case"Tab":if(!s)return!0;case"Enter":t.preventDefault(),this.addTags(this.input.value,!0)}},onInput:function(t){var e=this.input.normalize.call(this),i=e.length>=this.settings.dropdown.enabled;if("mix"==this.settings.mode)return this.events.callbacks.onMixTagsInput.call(this,t);e?this.input.value!=e&&(this.input.set.call(this,e,!1),this.trigger("input",e),-1!=e.search(this.settings.delimiters)?this.addTags(e).length&&this.input.set.call(this):0<=this.settings.dropdown.enabled&&this.dropdown[i?"show":"hide"].call(this,e)):this.input.set.call(this,"")},onMixTagsInput:function(t){var e,i,n,s,a;if(this.maxTagsReached())return!0;window.getSelection&&0<(e=window.getSelection()).rangeCount&&((i=e.getRangeAt(0).cloneRange()).collapse(!0),i.setStart(window.getSelection().focusNode,0),(s=(n=i.toString().split(this.settings.mixTagsAllowedAfter))[n.length-1].match(this.settings.pattern))&&(this.state.tag={prefix:s[0],value:s.input.split(s[0])[1]},s=this.state.tag,a=this.state.tag.value.length>=this.settings.dropdown.enabled)),this.update(),this.trigger("input",this.extend({},this.state.tag,{textContent:this.DOM.input.textContent})),this.state.tag&&this.dropdown[a?"show":"hide"].call(this,this.state.tag.value)},onInputIE:function(t){var e=this;setTimeout(function(){e.events.callbacks.onInput.call(e,t)})},onPaste:function(t){},onClickScope:function(t){var e,i=t.target.closest("tag");"TAGS"==t.target.tagName?this.DOM.input.focus():"X"==t.target.tagName?this.removeTag(t.target.parentNode):i&&(e=this.getNodeIndex(i),this.trigger("click",{tag:i,index:e,data:this.value[e]}))},onEditTagInput:function(t){var e=t.closest("tag"),i=this.getNodeIndex(e),n=this.input.normalize(t),s=n.toLowerCase()==t.originalValue.toLowerCase()||this.validateTag(n);e.classList.toggle("tagify--invalid",!0!==s),e.isValid=s,this.trigger("input",{tag:e,index:i,data:this.extend({},this.value[i],{newValue:n})})},onEditTagBlur:function(t){var e,i=t.closest("tag"),n=this.getNodeIndex(i),s=this.input.normalize(t)||t.originalValue,a=i.isValid,o=_objectSpread({},this.value[n],{value:s});this.settings.transformTag.call(this,o),void 0!==(a=this.validateTag(o.value))&&!0!==a||(t.textContent=o.value,this.value[n].value=o.value,this.update(),(e=t.cloneNode(!0)).removeAttribute("contenteditable"),i.title=o.value,i.classList.remove("tagify--editable"),t.parentNode.replaceChild(e,t),this.trigger("edit",{tag:i,index:n,data:this.value[n]}))},onEditTagkeydown:function(t){switch(t.key){case"Esc":case"Escape":t.target.textContent=t.target.originalValue;case"Enter":case"Tab":t.preventDefault(),t.target.blur()}},onDoubleClickScope:function(t){var e=t.target.closest("tag"),i=this.settings;"mix"==i.mode||i.readonly||i.enforceWhitelist||!e||e.classList.contains("tagify--editable")||e.hasAttribute("readonly")||this.editTag(e)}}},editTag:function(t){var e=this,i=t.querySelector(".tagify__tag-text"),n=this.events.callbacks;i?(t.classList.add("tagify--editable"),i.originalValue=i.textContent,i.setAttribute("contenteditable",!0),i.addEventListener("blur",n.onEditTagBlur.bind(this,i)),i.addEventListener("input",n.onEditTagInput.bind(this,i)),i.addEventListener("keydown",function(t){return n.onEditTagkeydown.call(e,t)}),i.focus()):console.warn("Cannot find element in Tag template: ",".tagify__tag-text")},input:{value:"",set:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",e=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];this.input.value=t,e&&(this.DOM.input.innerHTML=t),t||this.dropdown.hide.call(this),t.length<2&&this.input.autocomplete.suggest.call(this,""),this.input.validate.call(this)},setRangeAtStartEnd:function(){var t,e,i=0<arguments.length&&void 0!==arguments[0]&&arguments[0],n=1<arguments.length?arguments[1]:void 0;document.createRange&&((t=document.createRange()).selectNodeContents(n||this.DOM.input),t.collapse(i),(e=window.getSelection()).removeAllRanges(),e.addRange(t))},validate:function(){var t=!this.input.value||this.validateTag.call(this,this.input.value);this.DOM.input.classList.toggle("tagify__input--invalid",!0!==t)},normalize:function(){var t=(0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.DOM.input).innerText;return"settings"in this&&this.settings.delimiters&&(t=t.replace(/(?:\r\n|\r|\n)/g,this.settings.delimiters.source.charAt(1))),t=t.replace(/\s/g," ").replace(/^\s+/,"")},autocomplete:{suggest:function(t){t&&this.input.value?this.DOM.input.setAttribute("data-suggest",t.substring(this.input.value.length)):this.DOM.input.removeAttribute("data-suggest")},set:function(t){var e=this.DOM.input.getAttribute("data-suggest"),i=t||(e?this.input.value+e:null);return!!i&&(this.input.set.call(this,i),this.input.autocomplete.suggest.call(this,""),this.dropdown.hide.call(this),this.input.setRangeAtStartEnd.call(this),!0)}}},getNodeIndex:function(t){var e=0;if(t)for(;t=t.previousElementSibling;)e++;return e},isTagDuplicate:function(e){return this.value.findIndex(function(t){return e.trim().toLowerCase()===t.value.toLowerCase()})},getTagIndexByValue:function(i){var n=[];return this.DOM.scope.querySelectorAll("tag").forEach(function(t,e){t.textContent.trim().toLowerCase()==i.toLowerCase()&&n.push(e)}),n},getTagElmByValue:function(t){var e=this.getTagIndexByValue(t)[0];return this.DOM.scope.querySelectorAll("tag")[e]},markTagByValue:function(t,e){return!!(e=e||this.getTagElmByValue(t))&&(e.classList.add("tagify--mark"),e)},isTagBlacklisted:function(e){return e=e.toLowerCase().trim(),this.settings.blacklist.filter(function(t){return e==t.toLowerCase()}).length},isTagWhitelisted:function(e){return this.settings.whitelist.some(function(t){if((t.value||t).toLowerCase()===e.toLowerCase())return!0})},validateTag:function(t){var e=t.trim(),i=!0;return e?this.settings.pattern&&!this.settings.pattern.test(e)?i=this.TEXTS.pattern:this.settings.duplicates||-1===this.isTagDuplicate(e)?(this.isTagBlacklisted(e)||this.settings.enforceWhitelist&&!this.isTagWhitelisted(e))&&(i=this.TEXTS.notAllowed):i=this.TEXTS.duplicate:i=this.TEXTS.empty,i},maxTagsReached:function(){return this.value.length>=this.settings.maxTags&&this.TEXTS.exceed},normalizeTags:function(t){var e=this.settings,i=e.whitelist,n=e.delimiters,s=e.mode,a=!!i&&i[0]instanceof Object,o=t instanceof Array&&t[0]instanceof Object&&"value"in t[0],r=[];if(o)return t;if("number"==typeof t&&(t=t.toString()),"string"==typeof t){if(!t.trim())return[];t=t.split(n).filter(function(t){return t}).map(function(t){return{value:t.trim()}})}else t instanceof Array&&(t=t.map(function(t){return{value:t.trim()}}));return a?(t.forEach(function(e){var t=i.filter(function(t){return t.value.toLowerCase()==e.value.toLowerCase()});t[0]?r.push(t[0]):"mix"!=s&&r.push(e)}),r):t},parseMixTags:function(n){var s=this;return n.split(this.settings.mixTagsAllowedAfter).filter(function(t){return t.match(s.settings.pattern)}).forEach(function(t){var e,i=t.replace(s.settings.pattern,"");s.isTagWhitelisted(i)&&!s.settings.duplicates&&-1==s.isTagDuplicate(i)&&(e=s.normalizeTags.call(s,i)[0],n=s.replaceMixStringWithTag(n,t,e).s)}),this.DOM.input.innerHTML=n,this.update(),n},replaceMixStringWithTag:function(t,e,i,n){return i&&t&&-1!=t.indexOf(e)&&(n=this.createTagElem(i),this.value.push(i),t=t.replace(e,n.outerHTML+"&#8288;")),{s:t,tagElm:n}},addMixTag:function(t){if(t&&this.state.tag){for(var e,i,n,s,a=this.state.tag.prefix+this.state.tag.value,o=document.createNodeIterator(this.DOM.input,NodeFilter.SHOW_TEXT),r=100;(e=o.nextNode())&&r--;)if(e.nodeType===Node.TEXT_NODE){if(-1==(n=e.nodeValue.indexOf(a)))continue;s=e.splitText(n),i=this.createTagElem(t),s.nodeValue=s.nodeValue.replace(a,""),e.parentNode.insertBefore(i,s),i.insertAdjacentHTML("afterend","&#8288;")}i&&(this.value.push(t),this.update(),this.trigger("add",this.extend({},{index:this.value.length,tag:i},t))),this.state.tag=null}},addTags:function(t,e){var s=this,a=2<arguments.length&&void 0!==arguments[2]?arguments[2]:this.settings.skipInvalid,o=[];if(!t||!t.length)return console.warn("[addTags]","no tags to add:",t),o;if(t=this.normalizeTags.call(this,t),"mix"==this.settings.mode)return this.addMixTag(t[0]);return this.DOM.input.removeAttribute("style"),t.forEach(function(t){var e,i,n={};if(t=Object.assign({},t),s.settings.transformTag.call(s,t),!0!==(e=s.maxTagsReached()||s.validateTag.call(s,t.value))){if(a)return;n["aria-invalid"]=!0,n.class=(t.class||"")+" tagify--notAllowed",n.title=e,s.markTagByValue(t.value),s.trigger("invalid",{data:t,index:s.value.length,message:e})}n.role="tag",t.readonly&&(n["aria-readonly"]=!0),i=s.createTagElem(s.extend({},t,n)),o.push(i),function(t){var e=this.DOM.scope.lastElementChild;e===this.DOM.input?this.DOM.scope.insertBefore(t,e):this.DOM.scope.appendChild(t)}.call(s,i),!0===e?(s.value.push(t),s.update(),s.DOM.scope.classList.toggle("hasMaxTags",s.value.length>=s.settings.maxTags),s.trigger("add",{tag:i,index:s.value.length-1,data:t})):s.settings.keepInvalidTags||setTimeout(function(){s.removeTag(i,!0)},1e3)}),t.length&&e&&this.input.set.call(this),o},minify:function(t){return t.replace(new RegExp(">[\r\n ]+<","g"),"><")},createTagElem:function(t){var e=this.escapeHTML(t.value),i=this.settings.templates.tag.call(this,e,t);return this.settings.readonly&&(t.readonly=!0),i=this.minify(i),this.parseHTML(i)},removeTag:function(t,e){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:250;if(t&&("string"==typeof t&&(t=this.getTagElmByValue(t)),t instanceof HTMLElement)){var n,s=this.getNodeIndex(t);i&&10<i?(t.style.width=parseFloat(window.getComputedStyle(t).width)+"px",document.body.clientTop,t.classList.add("tagify--hide"),setTimeout(a,400)):a(),e||(n=this.value.splice(s,1)[0],this.update(),this.trigger("remove",{tag:t,index:s,data:n}))}function a(){t.parentNode&&t.parentNode.removeChild(t)}},removeAllTags:function(){this.value=[],this.update(),Array.prototype.slice.call(this.DOM.scope.querySelectorAll("tag")).forEach(function(t){return t.parentNode.removeChild(t)})},getAttributes:function(t){if("[object Object]"!=Object.prototype.toString.call(t))return"";var e,i,n=Object.keys(t),s="";for(i=n.length;i--;)"class"!=(e=n[i])&&t.hasOwnProperty(e)&&(s+=" "+e+(t[e]?'="'.concat(t[e],'"'):""));return s},update:function(){this.DOM.originalInput.value="mix"==this.settings.mode?this.DOM.input.textContent:JSON.stringify(this.value)},dropdown:{init:function(){this.DOM.dropdown=this.dropdown.build.call(this)},build:function(){var t="tagify__dropdown ".concat(this.settings.dropdown.classname).trim(),e='<div class="'.concat(t,'" role="menu"></div>');return this.parseHTML(e)},show:function(t){var e;if(this.settings.whitelist.length){if(this.suggestedListItems=this.dropdown.filterListItems.call(this,t),!this.suggestedListItems.length)return this.input.autocomplete.suggest.call(this),void this.dropdown.hide.call(this);e=this.dropdown.createListHTML.call(this,this.suggestedListItems),this.DOM.dropdown.innerHTML=this.minify(e),this.dropdown.highlightOption.call(this,this.DOM.dropdown.querySelector(".tagify__dropdown__item")),this.dropdown.position.call(this),this.DOM.scope.setAttribute("aria-expanded",!0),!this.DOM.dropdown.parentNode!=document.body&&(document.body.appendChild(this.DOM.dropdown),this.events.binding.call(this,!1),this.dropdown.events.binding.call(this))}},hide:function(){this.DOM.dropdown&&this.DOM.dropdown.parentNode==document.body&&(document.body.removeChild(this.DOM.dropdown),this.DOM.scope.setAttribute("aria-expanded",!1),window.removeEventListener("resize",this.dropdown.position),this.dropdown.events.binding.call(this,!1),this.events.binding.call(this))},position:function(){var t=this.DOM.scope.getBoundingClientRect();this.DOM.dropdown.style.cssText="left: "+(t.left+window.pageXOffset)+"px;                                                top: "+(t.top+t.height-1+window.pageYOffset)+"px;                                                width: "+t.width+"px"},events:{binding:function(){var t=!(0<arguments.length&&void 0!==arguments[0])||arguments[0],e=this.listeners.dropdown=this.listeners.dropdown||{position:this.dropdown.position.bind(this),onKeyDown:this.dropdown.events.callbacks.onKeyDown.bind(this),onMouseOver:this.dropdown.events.callbacks.onMouseOver.bind(this),onClick:this.dropdown.events.callbacks.onClick.bind(this)},i=t?"addEventListener":"removeEventListener";window[i]("resize",e.position),window[i]("keydown",e.onKeyDown),window[i]("mousedown",e.onClick),this.DOM.dropdown[i]("mouseover",e.onMouseOver)},callbacks:{onKeyDown:function(t){var e=this.DOM.dropdown.querySelector("[class$='--active']")||this.DOM.dropdown.children[0],i="";switch(t.key){case"ArrowDown":case"ArrowUp":case"Down":case"Up":t.preventDefault(),e&&(e=e[("ArrowUp"==t.key||"Up"==t.key?"previous":"next")+"ElementSibling"]),e||(e=this.DOM.dropdown.children["ArrowUp"==t.key||"Up"==t.key?this.DOM.dropdown.children.length-1:0]),this.dropdown.highlightOption.call(this,e,!0);break;case"Escape":case"Esc":this.dropdown.hide.call(this);break;case"ArrowRight":case"Tab":if(t.preventDefault(),!this.input.autocomplete.set.call(this,e?e.textContent:null))return!1;case"Enter":return t.preventDefault(),i=this.suggestedListItems[this.getNodeIndex(e)]||this.input.value,this.addTags([i],!0),this.dropdown.hide.call(this),!1}},onMouseOver:function(t){t.target.className.includes("__item")&&this.dropdown.highlightOption.call(this,t.target)},onClick:function(t){var e,i,n=this,s=function(){return n.dropdown.hide.call(n)};if(0==t.button&&t.target!=this.DOM.dropdown){if(t.target==document.documentElement)return s();(i=[t.target,t.target.parentNode].filter(function(t){return t.className.includes("tagify__dropdown__item")})[0])?(e=this.suggestedListItems[this.getNodeIndex(i)]||this.input.value,this.addTags([e],!0),this.dropdown.hide.call(this),setTimeout(function(){return n.DOM.input.focus()},100)):s()}}}},highlightOption:function(t,e){if(t){var i,n="tagify__dropdown__item--active";this.DOM.dropdown.querySelectorAll("[class$='--active']").forEach(function(t){t.classList.remove(n),t.removeAttribute("aria-selected")}),t.classList.add(n),t.setAttribute("aria-selected",!0),e&&(t.parentNode.scrollTop=t.clientHeight+t.offsetTop-t.parentNode.clientHeight),this.settings.autoComplete&&!this.settings.dropdown.fuzzySearch&&(i=this.suggestedListItems[this.getNodeIndex(t)].value||this.input.value,this.input.autocomplete.suggest.call(this,i))}},filterListItems:function(t){var e,i,n,s,a=this,o=[],r=this.settings.whitelist,l=this.settings.dropdown.maxItems||1/0,c=0;if(!t)return r.filter(function(t){return-1==a.isTagDuplicate(t.value||t)}).slice(0,l);for(;c<r.length&&(n=(((e=r[c]instanceof Object?r[c]:{value:r[c]}).searchBy||"")+" "+e.value).toLowerCase().indexOf(t.toLowerCase()),i=this.settings.dropdown.fuzzySearch?0<=n:0==n,s=!this.settings.duplicates&&-1<this.isTagDuplicate(e.value),i&&!s&&l--&&o.push(e),0!=l);c++);return o},createListHTML:function(t){var e=this.settings.templates.dropdownItem.bind(this);return t.map(e).join("")}}}}(jQuery);
+"use strict";function _objectSpread(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{},n=Object.keys(i);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(i).filter(function(t){return Object.getOwnPropertyDescriptor(i,t).enumerable}))),n.forEach(function(t){_defineProperty(e,t,i[t])})}return e}function _defineProperty(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}!function(a){function n(t,e){if(!t)return console.warn("Tagify: ","invalid input element ",t),this;this.applySettings(t,e),this.state={},this.value=[],this.listeners={},this.DOM={},this.extend(this,new this.EventDispatcher(this)),this.build(t),this.loadOriginalValues(),this.events.customBinding.call(this),this.events.binding.call(this),t.autofocus&&this.DOM.input.focus()}a.fn.tagify=function(){var i=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};return this.each(function(){var t,e=a(this);if(e.data("tagify"))return this;i.isJQueryPlugin=!0,t=new n(e[0],i),e.data("tagify",t)})},n.prototype={isIE:window.document.documentMode,TEXTS:{empty:"empty",exceed:"number of tags exceeded",pattern:"pattern mismatch",duplicate:"already exists",notAllowed:"not allowed"},DEFAULTS:{delimiters:",",pattern:null,maxTags:1/0,callbacks:{},addTagOnBlur:!0,duplicates:!1,whitelist:[],blacklist:[],enforceWhitelist:!1,keepInvalidTags:!1,autoComplete:!0,mixTagsAllowedAfter:/,|\.|\:|\s/,backspace:!0,skipInvalid:!1,transformTag:function(){},dropdown:{classname:"",enabled:2,maxItems:10,itemTemplate:"",fuzzySearch:!0}},templates:{wrapper:function(t,e){return'<tags class="tagify '.concat(e.mode?"tagify--mix":""," ").concat(t.className,'"\n                          ').concat(e.readonly?'readonly aria-readonly="true"':'aria-haspopup="true" aria-expanded="false"','\n                          role="tagslist">\n                <span contenteditable data-placeholder="').concat(t.placeholder||"&#8203;",'" aria-placeholder="').concat(t.placeholder||"",'"\n                      class="tagify__input"\n                      role="textbox"\n                      aria-multiline="false"></span>\n            </tags>')},tag:function(t,e){return"<tag title='".concat(e.title||t,"'\n                         contenteditable='false'\n                         spellcheck='false'\n                         class='tagify__tag ").concat(e.class?e.class:"","'\n                         ").concat(this.getAttributes(e),">\n                <x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>\n                <div>\n                    <span class='tagify__tag-text'>").concat(t,"</span>\n                </div>\n            </tag>")},dropdownItem:function(t){var e=(t.value||t).replace(/`|'/g,"&#39;");return"<div ".concat(this.getAttributes(t),"\n                         class='tagify__dropdown__item ").concat(t.class?t.class:"",'\'\n                         tabindex="0"\n                         role="menuitem"\n                         aria-labelledby="dropdown-label">').concat(e,"</div>")}},customEventsList:["click","add","remove","invalid","input","edit"],applySettings:function(t,e){var i=t.getAttribute("data-whitelist"),n=t.getAttribute("data-blacklist");if(this.DEFAULTS.templates=this.templates,this.DEFAULTS.dropdown.itemTemplate=this.templates.dropdownItem,this.settings=this.extend({},this.DEFAULTS,e),this.settings.readonly=t.hasAttribute("readonly"),this.isIE&&(this.settings.autoComplete=!1),n&&(n=n.split(this.settings.delimiters))instanceof Array&&(this.settings.blacklist=n),i&&(i=i.split(this.settings.delimiters))instanceof Array&&(this.settings.whitelist=i),t.pattern)try{this.settings.pattern=new RegExp(t.pattern)}catch(t){}if(this.settings&&this.settings.delimiters)try{this.settings.delimiters=new RegExp(this.settings.delimiters,"g")}catch(t){}},parseHTML:function(t){return(new DOMParser).parseFromString(t.trim(),"text/html").body.firstElementChild},escapeHTML:function(t){var e=document.createTextNode(t),i=document.createElement("p");return i.appendChild(e),i.innerHTML},build:function(t){var e=this.DOM,i=this.settings.templates.wrapper(t,this.settings);e.originalInput=t,e.scope=this.parseHTML(i),e.input=e.scope.querySelector("[contenteditable]"),t.parentNode.insertBefore(e.scope,t),0<=this.settings.dropdown.enabled&&this.dropdown.init.call(this)},destroy:function(){this.DOM.scope.parentNode.removeChild(this.DOM.scope),this.dropdown.hide.call(this)},loadOriginalValues:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.DOM.originalInput.value;if(t){this.removeAllTags();try{t=JSON.parse(t)}catch(t){}"mix"==this.settings.mode?this.parseMixTags(t):this.addTags(t).forEach(function(t){t&&t.classList.add("tagify--noAnim")})}},extend:function(t,e,i){function n(t){var e=Object.prototype.toString.call(t).split(" ")[1].slice(0,-1);return t===Object(t)&&"Array"!=e&&"Function"!=e&&"RegExp"!=e&&"HTMLUnknownElement"!=e}function s(t,e){for(var i in e)e.hasOwnProperty(i)&&(n(e[i])?n(t[i])?s(t[i],e[i]):t[i]=Object.assign({},e[i]):t[i]=e[i])}return t instanceof Object||(t={}),s(t,e),i&&s(t,i),t},EventDispatcher:function(n){var s=document.createTextNode("");this.off=function(t,e){return e&&s.removeEventListener.call(s,t,e),this},this.on=function(t,e){return e&&s.addEventListener.call(s,t,e),this},this.trigger=function(t,e){var i;if(t)if(n.settings.isJQueryPlugin)a(n.DOM.originalInput).triggerHandler(t,[e]);else{try{i=new CustomEvent(t,{detail:e})}catch(t){console.warn(t)}s.dispatchEvent(i)}}},events:{customBinding:function(){var e=this;this.customEventsList.forEach(function(t){e.on(t,e.settings.callbacks[t])})},binding:function(){var t,e=!(0<arguments.length&&void 0!==arguments[0])||arguments[0],i=this.events.callbacks,n=e?"addEventListener":"removeEventListener";for(var s in e&&!this.listeners.main&&(this.DOM.input.addEventListener(this.isIE?"keydown":"input",i[this.isIE?"onInputIE":"onInput"].bind(this)),this.settings.isJQueryPlugin&&a(this.DOM.originalInput).on("tagify.removeAllTags",this.removeAllTags.bind(this))),t=this.listeners.main=this.listeners.main||{paste:["input",i.onPaste.bind(this)],focus:["input",i.onFocusBlur.bind(this)],blur:["input",i.onFocusBlur.bind(this)],keydown:["input",i.onKeydown.bind(this)],click:["scope",i.onClickScope.bind(this)],dblclick:["scope",i.onDoubleClickScope.bind(this)]})this.DOM[t[s][0]][n](s,t[s][1])},callbacks:{onFocusBlur:function(t){var e=t.target.textContent.trim();"mix"!=this.settings.mode&&("focus"==t.type?(this.DOM.scope.classList.add("tagify--focus"),0===this.settings.dropdown.enabled&&this.dropdown.show.call(this)):"blur"==t.type?(this.DOM.scope.classList.remove("tagify--focus"),e&&this.settings.addTagOnBlur&&this.addTags(e,!0).length):(this.DOM.input.removeAttribute("style"),this.dropdown.hide.call(this)))},onKeydown:function(t){var e,i,n=this,s=t.target.textContent;if("mix"==this.settings.mode){switch(t.key){case"Backspace":var a=[];i=this.DOM.input.children,setTimeout(function(){[].forEach.call(i,function(t){return a.push(t.getAttribute("value"))}),n.value=n.value.filter(function(t){return-1!=a.indexOf(t.value)})},20);break;case"Enter":t.preventDefault()}return!0}switch(t.key){case"Backspace":""!=s&&8203!=s.charCodeAt(0)||(e=(e=this.DOM.scope.querySelectorAll("tag:not(.tagify--hide):not([readonly])"))[e.length-1],!0===this.settings.backspace?this.removeTag(e):"edit"==this.settings.backspace&&this.editTag(e));break;case"Esc":case"Escape":this.input.set.call(this),t.target.blur();break;case"ArrowRight":case"Tab":if(!s)return!0;case"Enter":t.preventDefault(),this.addTags(this.input.value,!0)}},onInput:function(t){var e=this.input.normalize.call(this),i=e.length>=this.settings.dropdown.enabled;if("mix"==this.settings.mode)return this.events.callbacks.onMixTagsInput.call(this,t);e?this.input.value!=e&&(this.input.set.call(this,e,!1),this.trigger("input",e),-1!=e.search(this.settings.delimiters)?this.addTags(e).length&&this.input.set.call(this):0<=this.settings.dropdown.enabled&&this.dropdown[i?"show":"hide"].call(this,e)):this.input.set.call(this,"")},onMixTagsInput:function(t){var e,i,n,s,a;if(this.maxTagsReached())return!0;window.getSelection&&0<(e=window.getSelection()).rangeCount&&((i=e.getRangeAt(0).cloneRange()).collapse(!0),i.setStart(window.getSelection().focusNode,0),(s=(n=i.toString().split(this.settings.mixTagsAllowedAfter))[n.length-1].match(this.settings.pattern))&&(this.state.tag={prefix:s[0],value:s.input.split(s[0])[1]},s=this.state.tag,a=this.state.tag.value.length>=this.settings.dropdown.enabled)),this.update(),this.trigger("input",this.extend({},this.state.tag,{textContent:this.DOM.input.textContent})),this.state.tag&&this.dropdown[a?"show":"hide"].call(this,this.state.tag.value)},onInputIE:function(t){var e=this;setTimeout(function(){e.events.callbacks.onInput.call(e,t)})},onPaste:function(t){},onClickScope:function(t){var e,i=t.target.closest("tag");"TAGS"==t.target.tagName?this.DOM.input.focus():"X"==t.target.tagName?this.removeTag(t.target.parentNode):i&&(e=this.getNodeIndex(i),this.trigger("click",{tag:i,index:e,data:this.value[e]}))},onEditTagInput:function(t){var e=t.closest("tag"),i=this.getNodeIndex(e),n=this.input.normalize(t),s=n.toLowerCase()==t.originalValue.toLowerCase()||this.validateTag(n);e.classList.toggle("tagify--invalid",!0!==s),e.isValid=s,this.trigger("input",{tag:e,index:i,data:this.extend({},this.value[i],{newValue:n})})},onEditTagBlur:function(t){var e,i=t.closest("tag"),n=this.getNodeIndex(i),s=this.input.normalize(t)||t.originalValue,a=this.input.normalize(t)!=t.originalValue,o=i.isValid,r=_objectSpread({},this.value[n],{value:s});a&&(this.settings.transformTag.call(this,r),o=this.validateTag(r.value)),void 0!==o&&!0!==o||(t.textContent=r.value,this.value[n].value=r.value,this.update(),(e=t.cloneNode(!0)).removeAttribute("contenteditable"),i.title=r.value,i.classList.remove("tagify--editable"),t.parentNode.replaceChild(e,t),this.trigger("edit",{tag:i,index:n,data:this.value[n]}))},onEditTagkeydown:function(t){switch(t.key){case"Esc":case"Escape":t.target.textContent=t.target.originalValue;case"Enter":case"Tab":t.preventDefault(),t.target.blur()}},onDoubleClickScope:function(t){var e=t.target.closest("tag"),i=this.settings;"mix"==i.mode||i.readonly||i.enforceWhitelist||!e||e.classList.contains("tagify--editable")||e.hasAttribute("readonly")||this.editTag(e)}}},editTag:function(t){var e=this,i=t.querySelector(".tagify__tag-text"),n=this.events.callbacks;i?(t.classList.add("tagify--editable"),i.originalValue=i.textContent,i.setAttribute("contenteditable",!0),i.addEventListener("blur",n.onEditTagBlur.bind(this,i)),i.addEventListener("input",n.onEditTagInput.bind(this,i)),i.addEventListener("keydown",function(t){return n.onEditTagkeydown.call(e,t)}),i.focus()):console.warn("Cannot find element in Tag template: ",".tagify__tag-text")},input:{value:"",set:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",e=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];this.input.value=t,e&&(this.DOM.input.innerHTML=t),t||this.dropdown.hide.call(this),t.length<2&&this.input.autocomplete.suggest.call(this,""),this.input.validate.call(this)},setRangeAtStartEnd:function(){var t,e,i=0<arguments.length&&void 0!==arguments[0]&&arguments[0],n=1<arguments.length?arguments[1]:void 0;document.createRange&&((t=document.createRange()).selectNodeContents(n||this.DOM.input),t.collapse(i),(e=window.getSelection()).removeAllRanges(),e.addRange(t))},validate:function(){var t=!this.input.value||this.validateTag.call(this,this.input.value);this.DOM.input.classList.toggle("tagify__input--invalid",!0!==t)},normalize:function(){var t=(0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.DOM.input).innerText;return"settings"in this&&this.settings.delimiters&&(t=t.replace(/(?:\r\n|\r|\n)/g,this.settings.delimiters.source.charAt(1))),t=t.replace(/\s/g," ").replace(/^\s+/,"")},autocomplete:{suggest:function(t){t&&this.input.value?this.DOM.input.setAttribute("data-suggest",t.substring(this.input.value.length)):this.DOM.input.removeAttribute("data-suggest")},set:function(t){var e=this.DOM.input.getAttribute("data-suggest"),i=t||(e?this.input.value+e:null);return!!i&&(this.input.set.call(this,i),this.input.autocomplete.suggest.call(this,""),this.dropdown.hide.call(this),this.input.setRangeAtStartEnd.call(this),!0)}}},getNodeIndex:function(t){var e=0;if(t)for(;t=t.previousElementSibling;)e++;return e},isTagDuplicate:function(e){return this.value.findIndex(function(t){return e.trim().toLowerCase()===t.value.toLowerCase()})},getTagIndexByValue:function(i){var n=[];return this.DOM.scope.querySelectorAll("tag").forEach(function(t,e){t.textContent.trim().toLowerCase()==i.toLowerCase()&&n.push(e)}),n},getTagElmByValue:function(t){var e=this.getTagIndexByValue(t)[0];return this.DOM.scope.querySelectorAll("tag")[e]},markTagByValue:function(t,e){return!!(e=e||this.getTagElmByValue(t))&&(e.classList.add("tagify--mark"),e)},isTagBlacklisted:function(e){return e=e.toLowerCase().trim(),this.settings.blacklist.filter(function(t){return e==t.toLowerCase()}).length},isTagWhitelisted:function(e){return this.settings.whitelist.some(function(t){if((t.value||t).toLowerCase()===e.toLowerCase())return!0})},validateTag:function(t){var e=t.trim(),i=!0;return e?this.settings.pattern&&!this.settings.pattern.test(e)?i=this.TEXTS.pattern:this.settings.duplicates||-1===this.isTagDuplicate(e)?(this.isTagBlacklisted(e)||this.settings.enforceWhitelist&&!this.isTagWhitelisted(e))&&(i=this.TEXTS.notAllowed):i=this.TEXTS.duplicate:i=this.TEXTS.empty,i},maxTagsReached:function(){return this.value.length>=this.settings.maxTags&&this.TEXTS.exceed},normalizeTags:function(t){var e=this.settings,i=e.whitelist,n=e.delimiters,s=e.mode,a=!!i&&i[0]instanceof Object,o=t instanceof Array&&t[0]instanceof Object&&"value"in t[0],r=[];if(o)return t;if("number"==typeof t&&(t=t.toString()),"string"==typeof t){if(!t.trim())return[];t=t.split(n).filter(function(t){return t}).map(function(t){return{value:t.trim()}})}else t instanceof Array&&(t=t.map(function(t){return{value:t.trim()}}));return a?(t.forEach(function(e){var t=i.filter(function(t){return t.value.toLowerCase()==e.value.toLowerCase()});t[0]?r.push(t[0]):"mix"!=s&&r.push(e)}),r):t},parseMixTags:function(t){for(var e,i,n=!1,s="",a=t,o=0;o<t.length;o++)"["==t[o]&&t[o]==t[o+1]&&(n=!0),n&&(s+=t[o]),"]"==t[o]&&t[o]==t[o-1]&&(n=!1,e=s.slice(2).slice(0,-2),this.isTagWhitelisted(e)&&!this.settings.duplicates&&-1==this.isTagDuplicate(e)&&(i=this.normalizeTags.call(this,e)[0],a=this.replaceMixStringWithTag(a,s,i).html),s="");return this.DOM.input.innerHTML=a,this.update(),t},replaceMixStringWithTag:function(t,e,i,n){return i&&t&&-1!=t.indexOf(e)&&(n=this.createTagElem(i),this.value.push(i),t=t.replace(e,n.outerHTML+"&#8288;")),{html:t,tagElm:n}},addMixTag:function(t){if(t&&this.state.tag){for(var e,i,n,s,a=this.state.tag.prefix+this.state.tag.value,o=document.createNodeIterator(this.DOM.input,NodeFilter.SHOW_TEXT),r=100;(e=o.nextNode())&&r--;)if(e.nodeType===Node.TEXT_NODE){if(-1==(n=e.nodeValue.indexOf(a)))continue;s=e.splitText(n),i=this.createTagElem(t),s.nodeValue=s.nodeValue.replace(a,""),e.parentNode.insertBefore(i,s),i.insertAdjacentHTML("afterend","&#8288;")}i&&(this.value.push(t),this.update(),this.trigger("add",this.extend({},{index:this.value.length,tag:i},t))),this.state.tag=null}},addTags:function(t,e){var s=this,a=2<arguments.length&&void 0!==arguments[2]?arguments[2]:this.settings.skipInvalid,o=[];if(!t||!t.length)return console.warn("[addTags]","no tags to add:",t),o;if(t=this.normalizeTags.call(this,t),"mix"==this.settings.mode)return this.addMixTag(t[0]);return this.DOM.input.removeAttribute("style"),t.forEach(function(t){var e,i,n={};if(t=Object.assign({},t),s.settings.transformTag.call(s,t),!0!==(e=s.maxTagsReached()||s.validateTag.call(s,t.value))){if(a)return;n["aria-invalid"]=!0,n.class=(t.class||"")+" tagify--notAllowed",n.title=e,s.markTagByValue(t.value),s.trigger("invalid",{data:t,index:s.value.length,message:e})}n.role="tag",t.readonly&&(n["aria-readonly"]=!0),i=s.createTagElem(s.extend({},t,n)),o.push(i),function(t){var e=this.DOM.scope.lastElementChild;e===this.DOM.input?this.DOM.scope.insertBefore(t,e):this.DOM.scope.appendChild(t)}.call(s,i),!0===e?(s.value.push(t),s.update(),s.DOM.scope.classList.toggle("hasMaxTags",s.value.length>=s.settings.maxTags),s.trigger("add",{tag:i,index:s.value.length-1,data:t})):s.settings.keepInvalidTags||setTimeout(function(){s.removeTag(i,!0)},1e3)}),t.length&&e&&this.input.set.call(this),o},minify:function(t){return t.replace(new RegExp(">[\r\n ]+<","g"),"><")},createTagElem:function(t){var e=this.escapeHTML(t.value),i=this.settings.templates.tag.call(this,e,t);return this.settings.readonly&&(t.readonly=!0),i=this.minify(i),this.parseHTML(i)},removeTag:function(t,e){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:250;if(t&&("string"==typeof t&&(t=this.getTagElmByValue(t)),t instanceof HTMLElement)){var n,s=this.getNodeIndex(t);i&&10<i?(t.style.width=parseFloat(window.getComputedStyle(t).width)+"px",document.body.clientTop,t.classList.add("tagify--hide"),setTimeout(a,400)):a(),e||(n=this.value.splice(s,1)[0],this.update(),this.trigger("remove",{tag:t,index:s,data:n}))}function a(){t.parentNode&&t.parentNode.removeChild(t)}},removeAllTags:function(){this.value=[],this.update(),Array.prototype.slice.call(this.DOM.scope.querySelectorAll("tag")).forEach(function(t){return t.parentNode.removeChild(t)})},getAttributes:function(t){if("[object Object]"!=Object.prototype.toString.call(t))return"";var e,i,n=Object.keys(t),s="";for(i=n.length;i--;)"class"!=(e=n[i])&&t.hasOwnProperty(e)&&(s+=" "+e+(t[e]?'="'.concat(t[e],'"'):""));return s},update:function(){this.DOM.originalInput.value="mix"==this.settings.mode?this.getMixedTagsAsString():this.value.length?JSON.stringify(this.value):""},getMixedTagsAsString:function(){var i="";return this.DOM.input.childNodes.forEach(function(t,e){1==t.nodeType?t.classList.contains("tagify__tag")&&(i+="[["+t.getAttribute("value")+"]]"):i+=t.textContent}),i},dropdown:{init:function(){this.DOM.dropdown=this.dropdown.build.call(this)},build:function(){var t="tagify__dropdown ".concat(this.settings.dropdown.classname).trim(),e='<div class="'.concat(t,'" role="menu"></div>');return this.parseHTML(e)},show:function(t){var e;if(this.settings.whitelist.length){if(this.suggestedListItems=this.dropdown.filterListItems.call(this,t),!this.suggestedListItems.length)return this.input.autocomplete.suggest.call(this),void this.dropdown.hide.call(this);e=this.dropdown.createListHTML.call(this,this.suggestedListItems),this.DOM.dropdown.innerHTML=this.minify(e),this.settings.enforceWhitelist&&this.dropdown.highlightOption.call(this,this.DOM.dropdown.querySelector(".tagify__dropdown__item")),this.dropdown.position.call(this),this.DOM.scope.setAttribute("aria-expanded",!0),!this.DOM.dropdown.parentNode!=document.body&&(document.body.appendChild(this.DOM.dropdown),this.events.binding.call(this,!1),this.dropdown.events.binding.call(this))}},hide:function(){this.DOM.dropdown&&this.DOM.dropdown.parentNode==document.body&&(document.body.removeChild(this.DOM.dropdown),this.DOM.scope.setAttribute("aria-expanded",!1),window.removeEventListener("resize",this.dropdown.position),this.dropdown.events.binding.call(this,!1),this.events.binding.call(this))},position:function(){var t=this.DOM.scope.getBoundingClientRect();this.DOM.dropdown.style.cssText="left: "+(t.left+window.pageXOffset)+"px;                                                top: "+(t.top+t.height-1+window.pageYOffset)+"px;                                                width: "+t.width+"px"},events:{binding:function(){var t=!(0<arguments.length&&void 0!==arguments[0])||arguments[0],e=this.listeners.dropdown=this.listeners.dropdown||{position:this.dropdown.position.bind(this),onKeyDown:this.dropdown.events.callbacks.onKeyDown.bind(this),onMouseOver:this.dropdown.events.callbacks.onMouseOver.bind(this),onClick:this.dropdown.events.callbacks.onClick.bind(this)},i=t?"addEventListener":"removeEventListener";window[i]("resize",e.position),window[i]("keydown",e.onKeyDown),window[i]("mousedown",e.onClick),this.DOM.dropdown[i]("mouseover",e.onMouseOver)},callbacks:{onKeyDown:function(t){var e=this.DOM.dropdown.querySelector("[class$='--active']"),i=e||this.DOM.dropdown.children[0],n="";switch(t.key){case"ArrowDown":case"ArrowUp":case"Down":case"Up":t.preventDefault(),i&&(i=i[("ArrowUp"==t.key||"Up"==t.key?"previous":"next")+"ElementSibling"]),i||(i=this.DOM.dropdown.children["ArrowUp"==t.key||"Up"==t.key?this.DOM.dropdown.children.length-1:0]),this.dropdown.highlightOption.call(this,i,!0);break;case"Escape":case"Esc":this.dropdown.hide.call(this);break;case"ArrowRight":case"Tab":if(t.preventDefault(),!this.input.autocomplete.set.call(this,i?i.textContent:null))return!1;case"Enter":if(e)return t.preventDefault(),n=this.suggestedListItems[this.getNodeIndex(e)]||this.input.value,this.addTags([n],!0),this.dropdown.hide.call(this),!1}},onMouseOver:function(t){t.target.className.includes("__item")&&this.dropdown.highlightOption.call(this,t.target)},onClick:function(t){var e,i,n=this,s=function(){return n.dropdown.hide.call(n)};if(0==t.button&&t.target!=this.DOM.dropdown){if(t.target==document.documentElement)return s();(i=t.target.closest(".tagify__dropdown__item"))?(e=this.suggestedListItems[this.getNodeIndex(i)]||this.input.value,this.addTags([e],!0),this.dropdown.hide.call(this),setTimeout(function(){return n.DOM.input.focus()},100)):s()}}}},highlightOption:function(t,e){if(t){var i,n="tagify__dropdown__item--active";this.DOM.dropdown.querySelectorAll("[class$='--active']").forEach(function(t){t.classList.remove(n),t.removeAttribute("aria-selected")}),t.classList.add(n),t.setAttribute("aria-selected",!0),e&&(t.parentNode.scrollTop=t.clientHeight+t.offsetTop-t.parentNode.clientHeight),this.settings.autoComplete&&!this.settings.dropdown.fuzzySearch&&(i=this.suggestedListItems[this.getNodeIndex(t)].value||this.input.value,this.input.autocomplete.suggest.call(this,i))}},filterListItems:function(t){var e,i,n,s,a=this,o=[],r=this.settings.whitelist,l=this.settings.dropdown.maxItems||1/0,c=0;if(!t)return r.filter(function(t){return-1==a.isTagDuplicate(t.value||t)}).slice(0,l);for(;c<r.length&&(n=(((e=r[c]instanceof Object?r[c]:{value:r[c]}).searchBy||"")+" "+e.value).toLowerCase().indexOf(t.toLowerCase()),i=this.settings.dropdown.fuzzySearch?0<=n:0==n,s=!this.settings.duplicates&&-1<this.isTagDuplicate(e.value),i&&!s&&l--&&o.push(e),0!=l);c++);return o},createListHTML:function(t){var e=this.settings.templates.dropdownItem.bind(this);return t.map(e).join("")}}}}(jQuery);

dist/tagify.js

 /**
- * Tagify (v 2.19.1)- tags input component
+ * Tagify (v 2.19.2)- tags input component
  * By Yair Even-Or
@@ -133,3 +133,3 @@ * Don't sell this code. (c)
       try {
-        this.settings.delimiters = new RegExp("[" + this.settings.delimiters + "]", "g");
+        this.settings.delimiters = new RegExp(this.settings.delimiters, "g");
       } catch (e) {}
@@ -505,2 +505,3 @@ }
             value = this.input.normalize(editableElm) || editableElm.originalValue,
+            hasChanged = this.input.normalize(editableElm) != editableElm.originalValue,
             isValid = tagElm.isValid,
@@ -512,5 +513,8 @@ tagData = _objectSpread({}, this.value[tagElmIdx], {
 
-        this.settings.transformTag.call(this, tagData); // re-validate after tag transformation
+        if (hasChanged) {
+          this.settings.transformTag.call(this, tagData); // re-validate after tag transformation
 
-        isValid = this.validateTag(tagData.value);
+          isValid = this.validateTag(tagData.value);
+        }
+
         if (isValid !== undefined && isValid !== true) return; // undo if empty
@@ -787,17 +791,27 @@
   parseMixTags: function parseMixTags(s) {
-    var _this5 = this;
+    var collect = false,
+        match = "",
+        parsedMatch,
+        value = s,
+        html = s,
+        tagData;
 
-    // example: "@cartman ,@kyle do not    know:#homer".split(/,|\.|\:|\s/).filter(item => item.match(/@|#/) )
-    s.split(this.settings.mixTagsAllowedAfter).filter(function (item) {
-      return item.match(_this5.settings.pattern);
-    }).forEach(function (tag) {
-      var value = tag.replace(_this5.settings.pattern, ''),
-          tagData;
+    for (var i = 0; i < s.length; i++) {
+      if (s[i] == '[' && s[i] == s[i + 1]) collect = true;
+      if (collect) match += s[i];
 
-      if (_this5.isTagWhitelisted(value) && !_this5.settings.duplicates && _this5.isTagDuplicate(value) == -1) {
-        tagData = _this5.normalizeTags.call(_this5, value)[0];
-        s = _this5.replaceMixStringWithTag(s, tag, tagData).s;
+      if (s[i] == ']' && s[i] == s[i - 1]) {
+        collect = false;
+        parsedMatch = match.slice(2).slice(0, -2);
+
+        if (this.isTagWhitelisted(parsedMatch) && !this.settings.duplicates && this.isTagDuplicate(parsedMatch) == -1) {
+          tagData = this.normalizeTags.call(this, parsedMatch)[0];
+          html = this.replaceMixStringWithTag(html, match, tagData).html; //  value = value.replace(match, "[[" + tagData.value + "]]")
+        }
+
+        match = "";
       }
-    });
-    this.DOM.input.innerHTML = s;
+    }
+
+    this.DOM.input.innerHTML = html;
     this.update();
@@ -809,16 +823,16 @@ return s;
    * [replaceMixStringWithTag description]
-   * @param  {String} s       [whole string]
+   * @param  {String} html    [tagify input string, probably from a textarea]
    * @param  {String} tag     [tag string to replace with tag element]
    * @param  {Object} tagData [value, plus any other optional attributes]
-   * @return {[type]}         [description]
+   * @return {Object}         [HTML string & tag DOM object]
    */
-  replaceMixStringWithTag: function replaceMixStringWithTag(s, tag, tagData, tagElm) {
-    if (tagData && s && s.indexOf(tag) != -1) {
+  replaceMixStringWithTag: function replaceMixStringWithTag(html, tag, tagData, tagElm) {
+    if (tagData && html && html.indexOf(tag) != -1) {
       tagElm = this.createTagElem(tagData);
       this.value.push(tagData);
-      s = s.replace(tag, tagElm.outerHTML + "&#8288;"); // put a zero-space at the end so the caret won't jump back to the start (when the last input child is a tag)
+      html = html.replace(tag, tagElm.outerHTML + "&#8288;"); // put a zero-space at the end so the caret won't jump back to the start (when the last input child is a tag)
     }
 
     return {
-      s: s,
+      html: html,
       tagElm: tagElm
@@ -877,3 +891,3 @@ };
   addTags: function addTags(tagsItems, clearInput) {
-    var _this6 = this;
+    var _this5 = this;
 
@@ -898,6 +912,6 @@ var skipInvalid = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.settings.skipInvalid;
 
-      _this6.settings.transformTag.call(_this6, tagData); ///////////////// ( validation )//////////////////////
+      _this5.settings.transformTag.call(_this5, tagData); ///////////////// ( validation )//////////////////////
 
 
-      tagValidation = _this6.maxTagsReached() || _this6.validateTag.call(_this6, tagData.value);
+      tagValidation = _this5.maxTagsReached() || _this5.validateTag.call(_this5, tagData.value);
 
@@ -910,7 +924,7 @@ if (tagValidation !== true) {
 
-        _this6.markTagByValue(tagData.value);
+        _this5.markTagByValue(tagData.value);
 
-        _this6.trigger("invalid", {
+        _this5.trigger("invalid", {
           data: tagData,
-          index: _this6.value.length,
+          index: _this5.value.length,
           message: tagValidation
@@ -925,24 +939,24 @@ });
 
-      tagElm = _this6.createTagElem(_this6.extend({}, tagData, tagElmParams));
+      tagElm = _this5.createTagElem(_this5.extend({}, tagData, tagElmParams));
       tagElems.push(tagElm); // add the tag to the component's DOM
 
-      appendTag.call(_this6, tagElm);
+      appendTag.call(_this5, tagElm);
 
       if (tagValidation === true) {
         // update state
-        _this6.value.push(tagData);
+        _this5.value.push(tagData);
 
-        _this6.update();
+        _this5.update();
 
-        _this6.DOM.scope.classList.toggle('hasMaxTags', _this6.value.length >= _this6.settings.maxTags);
+        _this5.DOM.scope.classList.toggle('hasMaxTags', _this5.value.length >= _this5.settings.maxTags);
 
-        _this6.trigger('add', {
+        _this5.trigger('add', {
           tag: tagElm,
-          index: _this6.value.length - 1,
+          index: _this5.value.length - 1,
           data: tagData
         });
-      } else if (!_this6.settings.keepInvalidTags) {
+      } else if (!_this5.settings.keepInvalidTags) {
         // remove invalid tags (if "keepInvalidTags" is set to "false")
         setTimeout(function () {
-          _this6.removeTag(tagElm, true);
+          _this5.removeTag(tagElm, true);
         }, 1000);
@@ -1057,4 +1071,13 @@ }
   update: function update() {
-    this.DOM.originalInput.value = this.settings.mode == 'mix' ? this.DOM.input.textContent : JSON.stringify(this.value);
+    this.DOM.originalInput.value = this.settings.mode == 'mix' ? this.getMixedTagsAsString() : this.value.length ? JSON.stringify(this.value) : "";
   },
+  getMixedTagsAsString: function getMixedTagsAsString() {
+    var result = "";
+    this.DOM.input.childNodes.forEach(function (node, i) {
+      if (node.nodeType == 1) {
+        if (node.classList.contains("tagify__tag")) result += "[[" + node.getAttribute("value") + "]]";
+      } else result += node.textContent;
+    });
+    return result;
+  },
 
@@ -1089,4 +1112,5 @@ /**
       listHTML = this.dropdown.createListHTML.call(this, this.suggestedListItems);
-      this.DOM.dropdown.innerHTML = this.minify(listHTML);
-      this.dropdown.highlightOption.call(this, this.DOM.dropdown.querySelector('.tagify__dropdown__item'));
+      this.DOM.dropdown.innerHTML = this.minify(listHTML); // if "enforceWhitelist" is "true", highlight the first suggested item
+
+      this.settings.enforceWhitelist && this.dropdown.highlightOption.call(this, this.DOM.dropdown.querySelector('.tagify__dropdown__item'));
       this.dropdown.position.call(this);
@@ -1148,3 +1172,4 @@ this.DOM.scope.setAttribute("aria-expanded", true); // if the dropdown has yet to be appended to the document,
           // get the "active" element, and if there was none (yet) active, use first child
-          var selectedElm = this.DOM.dropdown.querySelector("[class$='--active']") || this.DOM.dropdown.children[0],
+          var activeListElm = this.DOM.dropdown.querySelector("[class$='--active']"),
+              selectedElm = activeListElm || this.DOM.dropdown.children[0],
               newValue = "";
@@ -1178,8 +1203,10 @@
             case 'Enter':
-              e.preventDefault();
-              newValue = this.suggestedListItems[this.getNodeIndex(selectedElm)] || this.input.value;
-              this.addTags([newValue], true);
-              this.dropdown.hide.call(this);
-              return false;
-              break;
+              if (activeListElm) {
+                e.preventDefault();
+                newValue = this.suggestedListItems[this.getNodeIndex(activeListElm)] || this.input.value;
+                this.addTags([newValue], true);
+                this.dropdown.hide.call(this);
+                return false;
+              }
+
           }
@@ -1192,6 +1219,6 @@ },
         onClick: function onClick(e) {
-          var _this7 = this;
+          var _this6 = this;
 
           var onClickOutside = function onClickOutside() {
-            return _this7.dropdown.hide.call(_this7);
+            return _this6.dropdown.hide.call(_this6);
           },
@@ -1204,5 +1231,3 @@ value,
           if (e.target == document.documentElement) return onClickOutside();
-          listItemElm = [e.target, e.target.parentNode].filter(function (a) {
-            return a.className.includes("tagify__dropdown__item");
-          })[0];
+          listItemElm = e.target.closest(".tagify__dropdown__item");
 
@@ -1214,3 +1239,3 @@ if (listItemElm) {
             setTimeout(function () {
-              return _this7.DOM.input.focus();
+              return _this6.DOM.input.focus();
             }, 100);
@@ -1246,3 +1271,3 @@ } // clicked outside the dropdown, so just close it
     filterListItems: function filterListItems(value) {
-      var _this8 = this;
+      var _this7 = this;
 
@@ -1261,3 +1286,3 @@ var list = [],
         return whitelist.filter(function (item) {
-          return _this8.isTagDuplicate(item.value || item) == -1;
+          return _this7.isTagDuplicate(item.value || item) == -1;
         }) // don't include tags which have already been added.
@@ -1264,0 +1289,0 @@ .slice(0, suggestionsCount); // respect "maxItems" dropdown setting

dist/tagify.min.js

 /**
- * Tagify (v 2.19.1)- tags input component
+ * Tagify (v 2.19.2)- tags input component
  * By Yair Even-Or
@@ -7,2 +7,2 @@ * Don't sell this code. (c)
  */
-!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.Tagify=e()}(this,function(){"use strict";function t(t,e){if(!t)return console.warn("Tagify: ","invalid input element ",t),this;this.applySettings(t,e),this.state={},this.value=[],this.listeners={},this.DOM={},this.extend(this,new this.EventDispatcher(this)),this.build(t),this.loadOriginalValues(),this.events.customBinding.call(this),this.events.binding.call(this),t.autofocus&&this.DOM.input.focus()}return t.prototype={isIE:window.document.documentMode,TEXTS:{empty:"empty",exceed:"number of tags exceeded",pattern:"pattern mismatch",duplicate:"already exists",notAllowed:"not allowed"},DEFAULTS:{delimiters:",",pattern:null,maxTags:1/0,callbacks:{},addTagOnBlur:!0,duplicates:!1,whitelist:[],blacklist:[],enforceWhitelist:!1,keepInvalidTags:!1,autoComplete:!0,mixTagsAllowedAfter:/,|\.|\:|\s/,backspace:!0,skipInvalid:!1,transformTag:function(){},dropdown:{classname:"",enabled:2,maxItems:10,itemTemplate:"",fuzzySearch:!0}},templates:{wrapper:function(t,e){return'<tags class="tagify '.concat(e.mode?"tagify--mix":""," ").concat(t.className,'"\n                          ').concat(e.readonly?'readonly aria-readonly="true"':'aria-haspopup="true" aria-expanded="false"','\n                          role="tagslist">\n                <span contenteditable data-placeholder="').concat(t.placeholder||"&#8203;",'" aria-placeholder="').concat(t.placeholder||"",'"\n                      class="tagify__input"\n                      role="textbox"\n                      aria-multiline="false"></span>\n            </tags>')},tag:function(t,e){return"<tag title='".concat(e.title||t,"'\n                         contenteditable='false'\n                         spellcheck='false'\n                         class='tagify__tag ").concat(e.class?e.class:"","'\n                         ").concat(this.getAttributes(e),">\n                <x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>\n                <div>\n                    <span class='tagify__tag-text'>").concat(t,"</span>\n                </div>\n            </tag>")},dropdownItem:function(t){var e=(t.value||t).replace(/`|'/g,"&#39;");return"<div ".concat(this.getAttributes(t),"\n                         class='tagify__dropdown__item ").concat(t.class?t.class:"",'\'\n                         tabindex="0"\n                         role="menuitem"\n                         aria-labelledby="dropdown-label">').concat(e,"</div>")}},customEventsList:["click","add","remove","invalid","input","edit"],applySettings:function(t,e){var i=t.getAttribute("data-whitelist"),n=t.getAttribute("data-blacklist");if(this.DEFAULTS.templates=this.templates,this.DEFAULTS.dropdown.itemTemplate=this.templates.dropdownItem,this.settings=this.extend({},this.DEFAULTS,e),this.settings.readonly=t.hasAttribute("readonly"),this.isIE&&(this.settings.autoComplete=!1),n&&(n=n.split(this.settings.delimiters))instanceof Array&&(this.settings.blacklist=n),i&&(i=i.split(this.settings.delimiters))instanceof Array&&(this.settings.whitelist=i),t.pattern)try{this.settings.pattern=new RegExp(t.pattern)}catch(t){}if(this.settings&&this.settings.delimiters)try{this.settings.delimiters=new RegExp("["+this.settings.delimiters+"]","g")}catch(t){}},parseHTML:function(t){return(new DOMParser).parseFromString(t.trim(),"text/html").body.firstElementChild},escapeHTML:function(t){var e=document.createTextNode(t),i=document.createElement("p");return i.appendChild(e),i.innerHTML},build:function(t){var e=this.DOM,i=this.settings.templates.wrapper(t,this.settings);e.originalInput=t,e.scope=this.parseHTML(i),e.input=e.scope.querySelector("[contenteditable]"),t.parentNode.insertBefore(e.scope,t),0<=this.settings.dropdown.enabled&&this.dropdown.init.call(this)},destroy:function(){this.DOM.scope.parentNode.removeChild(this.DOM.scope),this.dropdown.hide.call(this)},loadOriginalValues:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.DOM.originalInput.value;if(t){this.removeAllTags();try{t=JSON.parse(t)}catch(t){}"mix"==this.settings.mode?this.parseMixTags(t):this.addTags(t).forEach(function(t){t&&t.classList.add("tagify--noAnim")})}},extend:function(t,e,i){function n(t){var e=Object.prototype.toString.call(t).split(" ")[1].slice(0,-1);return t===Object(t)&&"Array"!=e&&"Function"!=e&&"RegExp"!=e&&"HTMLUnknownElement"!=e}function s(t,e){for(var i in e)e.hasOwnProperty(i)&&(n(e[i])?n(t[i])?s(t[i],e[i]):t[i]=Object.assign({},e[i]):t[i]=e[i])}return t instanceof Object||(t={}),s(t,e),i&&s(t,i),t},EventDispatcher:function(n){var s=document.createTextNode("");this.off=function(t,e){return e&&s.removeEventListener.call(s,t,e),this},this.on=function(t,e){return e&&s.addEventListener.call(s,t,e),this},this.trigger=function(t,e){var i;if(t)if(n.settings.isJQueryPlugin)$(n.DOM.originalInput).triggerHandler(t,[e]);else{try{i=new CustomEvent(t,{detail:e})}catch(t){console.warn(t)}s.dispatchEvent(i)}}},events:{customBinding:function(){var e=this;this.customEventsList.forEach(function(t){e.on(t,e.settings.callbacks[t])})},binding:function(){var t,e=!(0<arguments.length&&void 0!==arguments[0])||arguments[0],i=this.events.callbacks,n=e?"addEventListener":"removeEventListener";for(var s in e&&!this.listeners.main&&(this.DOM.input.addEventListener(this.isIE?"keydown":"input",i[this.isIE?"onInputIE":"onInput"].bind(this)),this.settings.isJQueryPlugin&&$(this.DOM.originalInput).on("tagify.removeAllTags",this.removeAllTags.bind(this))),t=this.listeners.main=this.listeners.main||{paste:["input",i.onPaste.bind(this)],focus:["input",i.onFocusBlur.bind(this)],blur:["input",i.onFocusBlur.bind(this)],keydown:["input",i.onKeydown.bind(this)],click:["scope",i.onClickScope.bind(this)],dblclick:["scope",i.onDoubleClickScope.bind(this)]})this.DOM[t[s][0]][n](s,t[s][1])},callbacks:{onFocusBlur:function(t){var e=t.target.textContent.trim();"mix"!=this.settings.mode&&("focus"==t.type?(this.DOM.scope.classList.add("tagify--focus"),0===this.settings.dropdown.enabled&&this.dropdown.show.call(this)):"blur"==t.type?(this.DOM.scope.classList.remove("tagify--focus"),e&&this.settings.addTagOnBlur&&this.addTags(e,!0).length):(this.DOM.input.removeAttribute("style"),this.dropdown.hide.call(this)))},onKeydown:function(t){var e,i,n=this,s=t.target.textContent;if("mix"==this.settings.mode){switch(t.key){case"Backspace":var a=[];i=this.DOM.input.children,setTimeout(function(){[].forEach.call(i,function(t){return a.push(t.getAttribute("value"))}),n.value=n.value.filter(function(t){return-1!=a.indexOf(t.value)})},20);break;case"Enter":t.preventDefault()}return!0}switch(t.key){case"Backspace":""!=s&&8203!=s.charCodeAt(0)||(e=(e=this.DOM.scope.querySelectorAll("tag:not(.tagify--hide):not([readonly])"))[e.length-1],!0===this.settings.backspace?this.removeTag(e):"edit"==this.settings.backspace&&this.editTag(e));break;case"Esc":case"Escape":this.input.set.call(this),t.target.blur();break;case"ArrowRight":case"Tab":if(!s)return!0;case"Enter":t.preventDefault(),this.addTags(this.input.value,!0)}},onInput:function(t){var e=this.input.normalize.call(this),i=e.length>=this.settings.dropdown.enabled;if("mix"==this.settings.mode)return this.events.callbacks.onMixTagsInput.call(this,t);e?this.input.value!=e&&(this.input.set.call(this,e,!1),this.trigger("input",e),-1!=e.search(this.settings.delimiters)?this.addTags(e).length&&this.input.set.call(this):0<=this.settings.dropdown.enabled&&this.dropdown[i?"show":"hide"].call(this,e)):this.input.set.call(this,"")},onMixTagsInput:function(t){var e,i,n,s,a;if(this.maxTagsReached())return!0;window.getSelection&&0<(e=window.getSelection()).rangeCount&&((i=e.getRangeAt(0).cloneRange()).collapse(!0),i.setStart(window.getSelection().focusNode,0),(s=(n=i.toString().split(this.settings.mixTagsAllowedAfter))[n.length-1].match(this.settings.pattern))&&(this.state.tag={prefix:s[0],value:s.input.split(s[0])[1]},s=this.state.tag,a=this.state.tag.value.length>=this.settings.dropdown.enabled)),this.update(),this.trigger("input",this.extend({},this.state.tag,{textContent:this.DOM.input.textContent})),this.state.tag&&this.dropdown[a?"show":"hide"].call(this,this.state.tag.value)},onInputIE:function(t){var e=this;setTimeout(function(){e.events.callbacks.onInput.call(e,t)})},onPaste:function(t){},onClickScope:function(t){var e,i=t.target.closest("tag");"TAGS"==t.target.tagName?this.DOM.input.focus():"X"==t.target.tagName?this.removeTag(t.target.parentNode):i&&(e=this.getNodeIndex(i),this.trigger("click",{tag:i,index:e,data:this.value[e]}))},onEditTagInput:function(t){var e=t.closest("tag"),i=this.getNodeIndex(e),n=this.input.normalize(t),s=n.toLowerCase()==t.originalValue.toLowerCase()||this.validateTag(n);e.classList.toggle("tagify--invalid",!0!==s),e.isValid=s,this.trigger("input",{tag:e,index:i,data:this.extend({},this.value[i],{newValue:n})})},onEditTagBlur:function(t){var e,i=t.closest("tag"),n=this.getNodeIndex(i),s=this.input.normalize(t)||t.originalValue,a=i.isValid,o=function(s){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{},e=Object.keys(a);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(a).filter(function(t){return Object.getOwnPropertyDescriptor(a,t).enumerable}))),e.forEach(function(t){var e,i,n;e=s,n=a[i=t],i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n})}return s}({},this.value[n],{value:s});this.settings.transformTag.call(this,o),void 0!==(a=this.validateTag(o.value))&&!0!==a||(t.textContent=o.value,this.value[n].value=o.value,this.update(),(e=t.cloneNode(!0)).removeAttribute("contenteditable"),i.title=o.value,i.classList.remove("tagify--editable"),t.parentNode.replaceChild(e,t),this.trigger("edit",{tag:i,index:n,data:this.value[n]}))},onEditTagkeydown:function(t){switch(t.key){case"Esc":case"Escape":t.target.textContent=t.target.originalValue;case"Enter":case"Tab":t.preventDefault(),t.target.blur()}},onDoubleClickScope:function(t){var e=t.target.closest("tag"),i=this.settings;"mix"==i.mode||i.readonly||i.enforceWhitelist||!e||e.classList.contains("tagify--editable")||e.hasAttribute("readonly")||this.editTag(e)}}},editTag:function(t){var e=this,i=t.querySelector(".tagify__tag-text"),n=this.events.callbacks;i?(t.classList.add("tagify--editable"),i.originalValue=i.textContent,i.setAttribute("contenteditable",!0),i.addEventListener("blur",n.onEditTagBlur.bind(this,i)),i.addEventListener("input",n.onEditTagInput.bind(this,i)),i.addEventListener("keydown",function(t){return n.onEditTagkeydown.call(e,t)}),i.focus()):console.warn("Cannot find element in Tag template: ",".tagify__tag-text")},input:{value:"",set:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",e=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];this.input.value=t,e&&(this.DOM.input.innerHTML=t),t||this.dropdown.hide.call(this),t.length<2&&this.input.autocomplete.suggest.call(this,""),this.input.validate.call(this)},setRangeAtStartEnd:function(){var t,e,i=0<arguments.length&&void 0!==arguments[0]&&arguments[0],n=1<arguments.length?arguments[1]:void 0;document.createRange&&((t=document.createRange()).selectNodeContents(n||this.DOM.input),t.collapse(i),(e=window.getSelection()).removeAllRanges(),e.addRange(t))},validate:function(){var t=!this.input.value||this.validateTag.call(this,this.input.value);this.DOM.input.classList.toggle("tagify__input--invalid",!0!==t)},normalize:function(){var t=(0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.DOM.input).innerText;return"settings"in this&&this.settings.delimiters&&(t=t.replace(/(?:\r\n|\r|\n)/g,this.settings.delimiters.source.charAt(1))),t=t.replace(/\s/g," ").replace(/^\s+/,"")},autocomplete:{suggest:function(t){t&&this.input.value?this.DOM.input.setAttribute("data-suggest",t.substring(this.input.value.length)):this.DOM.input.removeAttribute("data-suggest")},set:function(t){var e=this.DOM.input.getAttribute("data-suggest"),i=t||(e?this.input.value+e:null);return!!i&&(this.input.set.call(this,i),this.input.autocomplete.suggest.call(this,""),this.dropdown.hide.call(this),this.input.setRangeAtStartEnd.call(this),!0)}}},getNodeIndex:function(t){var e=0;if(t)for(;t=t.previousElementSibling;)e++;return e},isTagDuplicate:function(e){return this.value.findIndex(function(t){return e.trim().toLowerCase()===t.value.toLowerCase()})},getTagIndexByValue:function(i){var n=[];return this.DOM.scope.querySelectorAll("tag").forEach(function(t,e){t.textContent.trim().toLowerCase()==i.toLowerCase()&&n.push(e)}),n},getTagElmByValue:function(t){var e=this.getTagIndexByValue(t)[0];return this.DOM.scope.querySelectorAll("tag")[e]},markTagByValue:function(t,e){return!!(e=e||this.getTagElmByValue(t))&&(e.classList.add("tagify--mark"),e)},isTagBlacklisted:function(e){return e=e.toLowerCase().trim(),this.settings.blacklist.filter(function(t){return e==t.toLowerCase()}).length},isTagWhitelisted:function(e){return this.settings.whitelist.some(function(t){if((t.value||t).toLowerCase()===e.toLowerCase())return!0})},validateTag:function(t){var e=t.trim(),i=!0;return e?this.settings.pattern&&!this.settings.pattern.test(e)?i=this.TEXTS.pattern:this.settings.duplicates||-1===this.isTagDuplicate(e)?(this.isTagBlacklisted(e)||this.settings.enforceWhitelist&&!this.isTagWhitelisted(e))&&(i=this.TEXTS.notAllowed):i=this.TEXTS.duplicate:i=this.TEXTS.empty,i},maxTagsReached:function(){return this.value.length>=this.settings.maxTags&&this.TEXTS.exceed},normalizeTags:function(t){var e=this.settings,i=e.whitelist,n=e.delimiters,s=e.mode,a=!!i&&i[0]instanceof Object,o=t instanceof Array&&t[0]instanceof Object&&"value"in t[0],r=[];if(o)return t;if("number"==typeof t&&(t=t.toString()),"string"==typeof t){if(!t.trim())return[];t=t.split(n).filter(function(t){return t}).map(function(t){return{value:t.trim()}})}else t instanceof Array&&(t=t.map(function(t){return{value:t.trim()}}));return a?(t.forEach(function(e){var t=i.filter(function(t){return t.value.toLowerCase()==e.value.toLowerCase()});t[0]?r.push(t[0]):"mix"!=s&&r.push(e)}),r):t},parseMixTags:function(n){var s=this;return n.split(this.settings.mixTagsAllowedAfter).filter(function(t){return t.match(s.settings.pattern)}).forEach(function(t){var e,i=t.replace(s.settings.pattern,"");s.isTagWhitelisted(i)&&!s.settings.duplicates&&-1==s.isTagDuplicate(i)&&(e=s.normalizeTags.call(s,i)[0],n=s.replaceMixStringWithTag(n,t,e).s)}),this.DOM.input.innerHTML=n,this.update(),n},replaceMixStringWithTag:function(t,e,i,n){return i&&t&&-1!=t.indexOf(e)&&(n=this.createTagElem(i),this.value.push(i),t=t.replace(e,n.outerHTML+"&#8288;")),{s:t,tagElm:n}},addMixTag:function(t){if(t&&this.state.tag){for(var e,i,n,s,a=this.state.tag.prefix+this.state.tag.value,o=document.createNodeIterator(this.DOM.input,NodeFilter.SHOW_TEXT),r=100;(e=o.nextNode())&&r--;)if(e.nodeType===Node.TEXT_NODE){if(-1==(n=e.nodeValue.indexOf(a)))continue;s=e.splitText(n),i=this.createTagElem(t),s.nodeValue=s.nodeValue.replace(a,""),e.parentNode.insertBefore(i,s),i.insertAdjacentHTML("afterend","&#8288;")}i&&(this.value.push(t),this.update(),this.trigger("add",this.extend({},{index:this.value.length,tag:i},t))),this.state.tag=null}},addTags:function(t,e){var s=this,a=2<arguments.length&&void 0!==arguments[2]?arguments[2]:this.settings.skipInvalid,o=[];if(!t||!t.length)return console.warn("[addTags]","no tags to add:",t),o;if(t=this.normalizeTags.call(this,t),"mix"==this.settings.mode)return this.addMixTag(t[0]);return this.DOM.input.removeAttribute("style"),t.forEach(function(t){var e,i,n={};if(t=Object.assign({},t),s.settings.transformTag.call(s,t),!0!==(e=s.maxTagsReached()||s.validateTag.call(s,t.value))){if(a)return;n["aria-invalid"]=!0,n.class=(t.class||"")+" tagify--notAllowed",n.title=e,s.markTagByValue(t.value),s.trigger("invalid",{data:t,index:s.value.length,message:e})}n.role="tag",t.readonly&&(n["aria-readonly"]=!0),i=s.createTagElem(s.extend({},t,n)),o.push(i),function(t){var e=this.DOM.scope.lastElementChild;e===this.DOM.input?this.DOM.scope.insertBefore(t,e):this.DOM.scope.appendChild(t)}.call(s,i),!0===e?(s.value.push(t),s.update(),s.DOM.scope.classList.toggle("hasMaxTags",s.value.length>=s.settings.maxTags),s.trigger("add",{tag:i,index:s.value.length-1,data:t})):s.settings.keepInvalidTags||setTimeout(function(){s.removeTag(i,!0)},1e3)}),t.length&&e&&this.input.set.call(this),o},minify:function(t){return t.replace(new RegExp(">[\r\n ]+<","g"),"><")},createTagElem:function(t){var e=this.escapeHTML(t.value),i=this.settings.templates.tag.call(this,e,t);return this.settings.readonly&&(t.readonly=!0),i=this.minify(i),this.parseHTML(i)},removeTag:function(t,e){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:250;if(t&&("string"==typeof t&&(t=this.getTagElmByValue(t)),t instanceof HTMLElement)){var n,s=this.getNodeIndex(t);i&&10<i?(t.style.width=parseFloat(window.getComputedStyle(t).width)+"px",document.body.clientTop,t.classList.add("tagify--hide"),setTimeout(a,400)):a(),e||(n=this.value.splice(s,1)[0],this.update(),this.trigger("remove",{tag:t,index:s,data:n}))}function a(){t.parentNode&&t.parentNode.removeChild(t)}},removeAllTags:function(){this.value=[],this.update(),Array.prototype.slice.call(this.DOM.scope.querySelectorAll("tag")).forEach(function(t){return t.parentNode.removeChild(t)})},getAttributes:function(t){if("[object Object]"!=Object.prototype.toString.call(t))return"";var e,i,n=Object.keys(t),s="";for(i=n.length;i--;)"class"!=(e=n[i])&&t.hasOwnProperty(e)&&(s+=" "+e+(t[e]?'="'.concat(t[e],'"'):""));return s},update:function(){this.DOM.originalInput.value="mix"==this.settings.mode?this.DOM.input.textContent:JSON.stringify(this.value)},dropdown:{init:function(){this.DOM.dropdown=this.dropdown.build.call(this)},build:function(){var t="tagify__dropdown ".concat(this.settings.dropdown.classname).trim(),e='<div class="'.concat(t,'" role="menu"></div>');return this.parseHTML(e)},show:function(t){var e;if(this.settings.whitelist.length){if(this.suggestedListItems=this.dropdown.filterListItems.call(this,t),!this.suggestedListItems.length)return this.input.autocomplete.suggest.call(this),void this.dropdown.hide.call(this);e=this.dropdown.createListHTML.call(this,this.suggestedListItems),this.DOM.dropdown.innerHTML=this.minify(e),this.dropdown.highlightOption.call(this,this.DOM.dropdown.querySelector(".tagify__dropdown__item")),this.dropdown.position.call(this),this.DOM.scope.setAttribute("aria-expanded",!0),!this.DOM.dropdown.parentNode!=document.body&&(document.body.appendChild(this.DOM.dropdown),this.events.binding.call(this,!1),this.dropdown.events.binding.call(this))}},hide:function(){this.DOM.dropdown&&this.DOM.dropdown.parentNode==document.body&&(document.body.removeChild(this.DOM.dropdown),this.DOM.scope.setAttribute("aria-expanded",!1),window.removeEventListener("resize",this.dropdown.position),this.dropdown.events.binding.call(this,!1),this.events.binding.call(this))},position:function(){var t=this.DOM.scope.getBoundingClientRect();this.DOM.dropdown.style.cssText="left: "+(t.left+window.pageXOffset)+"px;                                                top: "+(t.top+t.height-1+window.pageYOffset)+"px;                                                width: "+t.width+"px"},events:{binding:function(){var t=!(0<arguments.length&&void 0!==arguments[0])||arguments[0],e=this.listeners.dropdown=this.listeners.dropdown||{position:this.dropdown.position.bind(this),onKeyDown:this.dropdown.events.callbacks.onKeyDown.bind(this),onMouseOver:this.dropdown.events.callbacks.onMouseOver.bind(this),onClick:this.dropdown.events.callbacks.onClick.bind(this)},i=t?"addEventListener":"removeEventListener";window[i]("resize",e.position),window[i]("keydown",e.onKeyDown),window[i]("mousedown",e.onClick),this.DOM.dropdown[i]("mouseover",e.onMouseOver)},callbacks:{onKeyDown:function(t){var e=this.DOM.dropdown.querySelector("[class$='--active']")||this.DOM.dropdown.children[0],i="";switch(t.key){case"ArrowDown":case"ArrowUp":case"Down":case"Up":t.preventDefault(),e&&(e=e[("ArrowUp"==t.key||"Up"==t.key?"previous":"next")+"ElementSibling"]),e||(e=this.DOM.dropdown.children["ArrowUp"==t.key||"Up"==t.key?this.DOM.dropdown.children.length-1:0]),this.dropdown.highlightOption.call(this,e,!0);break;case"Escape":case"Esc":this.dropdown.hide.call(this);break;case"ArrowRight":case"Tab":if(t.preventDefault(),!this.input.autocomplete.set.call(this,e?e.textContent:null))return!1;case"Enter":return t.preventDefault(),i=this.suggestedListItems[this.getNodeIndex(e)]||this.input.value,this.addTags([i],!0),this.dropdown.hide.call(this),!1}},onMouseOver:function(t){t.target.className.includes("__item")&&this.dropdown.highlightOption.call(this,t.target)},onClick:function(t){var e,i,n=this,s=function(){return n.dropdown.hide.call(n)};if(0==t.button&&t.target!=this.DOM.dropdown){if(t.target==document.documentElement)return s();(i=[t.target,t.target.parentNode].filter(function(t){return t.className.includes("tagify__dropdown__item")})[0])?(e=this.suggestedListItems[this.getNodeIndex(i)]||this.input.value,this.addTags([e],!0),this.dropdown.hide.call(this),setTimeout(function(){return n.DOM.input.focus()},100)):s()}}}},highlightOption:function(t,e){if(t){var i,n="tagify__dropdown__item--active";this.DOM.dropdown.querySelectorAll("[class$='--active']").forEach(function(t){t.classList.remove(n),t.removeAttribute("aria-selected")}),t.classList.add(n),t.setAttribute("aria-selected",!0),e&&(t.parentNode.scrollTop=t.clientHeight+t.offsetTop-t.parentNode.clientHeight),this.settings.autoComplete&&!this.settings.dropdown.fuzzySearch&&(i=this.suggestedListItems[this.getNodeIndex(t)].value||this.input.value,this.input.autocomplete.suggest.call(this,i))}},filterListItems:function(t){var e,i,n,s,a=this,o=[],r=this.settings.whitelist,l=this.settings.dropdown.maxItems||1/0,d=0;if(!t)return r.filter(function(t){return-1==a.isTagDuplicate(t.value||t)}).slice(0,l);for(;d<r.length&&(n=(((e=r[d]instanceof Object?r[d]:{value:r[d]}).searchBy||"")+" "+e.value).toLowerCase().indexOf(t.toLowerCase()),i=this.settings.dropdown.fuzzySearch?0<=n:0==n,s=!this.settings.duplicates&&-1<this.isTagDuplicate(e.value),i&&!s&&l--&&o.push(e),0!=l);d++);return o},createListHTML:function(t){var e=this.settings.templates.dropdownItem.bind(this);return t.map(e).join("")}}},t});
+!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.Tagify=e()}(this,function(){"use strict";function t(t,e){if(!t)return console.warn("Tagify: ","invalid input element ",t),this;this.applySettings(t,e),this.state={},this.value=[],this.listeners={},this.DOM={},this.extend(this,new this.EventDispatcher(this)),this.build(t),this.loadOriginalValues(),this.events.customBinding.call(this),this.events.binding.call(this),t.autofocus&&this.DOM.input.focus()}return t.prototype={isIE:window.document.documentMode,TEXTS:{empty:"empty",exceed:"number of tags exceeded",pattern:"pattern mismatch",duplicate:"already exists",notAllowed:"not allowed"},DEFAULTS:{delimiters:",",pattern:null,maxTags:1/0,callbacks:{},addTagOnBlur:!0,duplicates:!1,whitelist:[],blacklist:[],enforceWhitelist:!1,keepInvalidTags:!1,autoComplete:!0,mixTagsAllowedAfter:/,|\.|\:|\s/,backspace:!0,skipInvalid:!1,transformTag:function(){},dropdown:{classname:"",enabled:2,maxItems:10,itemTemplate:"",fuzzySearch:!0}},templates:{wrapper:function(t,e){return'<tags class="tagify '.concat(e.mode?"tagify--mix":""," ").concat(t.className,'"\n                          ').concat(e.readonly?'readonly aria-readonly="true"':'aria-haspopup="true" aria-expanded="false"','\n                          role="tagslist">\n                <span contenteditable data-placeholder="').concat(t.placeholder||"&#8203;",'" aria-placeholder="').concat(t.placeholder||"",'"\n                      class="tagify__input"\n                      role="textbox"\n                      aria-multiline="false"></span>\n            </tags>')},tag:function(t,e){return"<tag title='".concat(e.title||t,"'\n                         contenteditable='false'\n                         spellcheck='false'\n                         class='tagify__tag ").concat(e.class?e.class:"","'\n                         ").concat(this.getAttributes(e),">\n                <x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>\n                <div>\n                    <span class='tagify__tag-text'>").concat(t,"</span>\n                </div>\n            </tag>")},dropdownItem:function(t){var e=(t.value||t).replace(/`|'/g,"&#39;");return"<div ".concat(this.getAttributes(t),"\n                         class='tagify__dropdown__item ").concat(t.class?t.class:"",'\'\n                         tabindex="0"\n                         role="menuitem"\n                         aria-labelledby="dropdown-label">').concat(e,"</div>")}},customEventsList:["click","add","remove","invalid","input","edit"],applySettings:function(t,e){var i=t.getAttribute("data-whitelist"),s=t.getAttribute("data-blacklist");if(this.DEFAULTS.templates=this.templates,this.DEFAULTS.dropdown.itemTemplate=this.templates.dropdownItem,this.settings=this.extend({},this.DEFAULTS,e),this.settings.readonly=t.hasAttribute("readonly"),this.isIE&&(this.settings.autoComplete=!1),s&&(s=s.split(this.settings.delimiters))instanceof Array&&(this.settings.blacklist=s),i&&(i=i.split(this.settings.delimiters))instanceof Array&&(this.settings.whitelist=i),t.pattern)try{this.settings.pattern=new RegExp(t.pattern)}catch(t){}if(this.settings&&this.settings.delimiters)try{this.settings.delimiters=new RegExp(this.settings.delimiters,"g")}catch(t){}},parseHTML:function(t){return(new DOMParser).parseFromString(t.trim(),"text/html").body.firstElementChild},escapeHTML:function(t){var e=document.createTextNode(t),i=document.createElement("p");return i.appendChild(e),i.innerHTML},build:function(t){var e=this.DOM,i=this.settings.templates.wrapper(t,this.settings);e.originalInput=t,e.scope=this.parseHTML(i),e.input=e.scope.querySelector("[contenteditable]"),t.parentNode.insertBefore(e.scope,t),0<=this.settings.dropdown.enabled&&this.dropdown.init.call(this)},destroy:function(){this.DOM.scope.parentNode.removeChild(this.DOM.scope),this.dropdown.hide.call(this)},loadOriginalValues:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.DOM.originalInput.value;if(t){this.removeAllTags();try{t=JSON.parse(t)}catch(t){}"mix"==this.settings.mode?this.parseMixTags(t):this.addTags(t).forEach(function(t){t&&t.classList.add("tagify--noAnim")})}},extend:function(t,e,i){function s(t){var e=Object.prototype.toString.call(t).split(" ")[1].slice(0,-1);return t===Object(t)&&"Array"!=e&&"Function"!=e&&"RegExp"!=e&&"HTMLUnknownElement"!=e}function n(t,e){for(var i in e)e.hasOwnProperty(i)&&(s(e[i])?s(t[i])?n(t[i],e[i]):t[i]=Object.assign({},e[i]):t[i]=e[i])}return t instanceof Object||(t={}),n(t,e),i&&n(t,i),t},EventDispatcher:function(s){var n=document.createTextNode("");this.off=function(t,e){return e&&n.removeEventListener.call(n,t,e),this},this.on=function(t,e){return e&&n.addEventListener.call(n,t,e),this},this.trigger=function(t,e){var i;if(t)if(s.settings.isJQueryPlugin)$(s.DOM.originalInput).triggerHandler(t,[e]);else{try{i=new CustomEvent(t,{detail:e})}catch(t){console.warn(t)}n.dispatchEvent(i)}}},events:{customBinding:function(){var e=this;this.customEventsList.forEach(function(t){e.on(t,e.settings.callbacks[t])})},binding:function(){var t,e=!(0<arguments.length&&void 0!==arguments[0])||arguments[0],i=this.events.callbacks,s=e?"addEventListener":"removeEventListener";for(var n in e&&!this.listeners.main&&(this.DOM.input.addEventListener(this.isIE?"keydown":"input",i[this.isIE?"onInputIE":"onInput"].bind(this)),this.settings.isJQueryPlugin&&$(this.DOM.originalInput).on("tagify.removeAllTags",this.removeAllTags.bind(this))),t=this.listeners.main=this.listeners.main||{paste:["input",i.onPaste.bind(this)],focus:["input",i.onFocusBlur.bind(this)],blur:["input",i.onFocusBlur.bind(this)],keydown:["input",i.onKeydown.bind(this)],click:["scope",i.onClickScope.bind(this)],dblclick:["scope",i.onDoubleClickScope.bind(this)]})this.DOM[t[n][0]][s](n,t[n][1])},callbacks:{onFocusBlur:function(t){var e=t.target.textContent.trim();"mix"!=this.settings.mode&&("focus"==t.type?(this.DOM.scope.classList.add("tagify--focus"),0===this.settings.dropdown.enabled&&this.dropdown.show.call(this)):"blur"==t.type?(this.DOM.scope.classList.remove("tagify--focus"),e&&this.settings.addTagOnBlur&&this.addTags(e,!0).length):(this.DOM.input.removeAttribute("style"),this.dropdown.hide.call(this)))},onKeydown:function(t){var e,i,s=this,n=t.target.textContent;if("mix"==this.settings.mode){switch(t.key){case"Backspace":var a=[];i=this.DOM.input.children,setTimeout(function(){[].forEach.call(i,function(t){return a.push(t.getAttribute("value"))}),s.value=s.value.filter(function(t){return-1!=a.indexOf(t.value)})},20);break;case"Enter":t.preventDefault()}return!0}switch(t.key){case"Backspace":""!=n&&8203!=n.charCodeAt(0)||(e=(e=this.DOM.scope.querySelectorAll("tag:not(.tagify--hide):not([readonly])"))[e.length-1],!0===this.settings.backspace?this.removeTag(e):"edit"==this.settings.backspace&&this.editTag(e));break;case"Esc":case"Escape":this.input.set.call(this),t.target.blur();break;case"ArrowRight":case"Tab":if(!n)return!0;case"Enter":t.preventDefault(),this.addTags(this.input.value,!0)}},onInput:function(t){var e=this.input.normalize.call(this),i=e.length>=this.settings.dropdown.enabled;if("mix"==this.settings.mode)return this.events.callbacks.onMixTagsInput.call(this,t);e?this.input.value!=e&&(this.input.set.call(this,e,!1),this.trigger("input",e),-1!=e.search(this.settings.delimiters)?this.addTags(e).length&&this.input.set.call(this):0<=this.settings.dropdown.enabled&&this.dropdown[i?"show":"hide"].call(this,e)):this.input.set.call(this,"")},onMixTagsInput:function(t){var e,i,s,n,a;if(this.maxTagsReached())return!0;window.getSelection&&0<(e=window.getSelection()).rangeCount&&((i=e.getRangeAt(0).cloneRange()).collapse(!0),i.setStart(window.getSelection().focusNode,0),(n=(s=i.toString().split(this.settings.mixTagsAllowedAfter))[s.length-1].match(this.settings.pattern))&&(this.state.tag={prefix:n[0],value:n.input.split(n[0])[1]},n=this.state.tag,a=this.state.tag.value.length>=this.settings.dropdown.enabled)),this.update(),this.trigger("input",this.extend({},this.state.tag,{textContent:this.DOM.input.textContent})),this.state.tag&&this.dropdown[a?"show":"hide"].call(this,this.state.tag.value)},onInputIE:function(t){var e=this;setTimeout(function(){e.events.callbacks.onInput.call(e,t)})},onPaste:function(t){},onClickScope:function(t){var e,i=t.target.closest("tag");"TAGS"==t.target.tagName?this.DOM.input.focus():"X"==t.target.tagName?this.removeTag(t.target.parentNode):i&&(e=this.getNodeIndex(i),this.trigger("click",{tag:i,index:e,data:this.value[e]}))},onEditTagInput:function(t){var e=t.closest("tag"),i=this.getNodeIndex(e),s=this.input.normalize(t),n=s.toLowerCase()==t.originalValue.toLowerCase()||this.validateTag(s);e.classList.toggle("tagify--invalid",!0!==n),e.isValid=n,this.trigger("input",{tag:e,index:i,data:this.extend({},this.value[i],{newValue:s})})},onEditTagBlur:function(t){var e,i=t.closest("tag"),s=this.getNodeIndex(i),n=this.input.normalize(t)||t.originalValue,a=this.input.normalize(t)!=t.originalValue,o=i.isValid,r=function(n){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{},e=Object.keys(a);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(a).filter(function(t){return Object.getOwnPropertyDescriptor(a,t).enumerable}))),e.forEach(function(t){var e,i,s;e=n,s=a[i=t],i in e?Object.defineProperty(e,i,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[i]=s})}return n}({},this.value[s],{value:n});a&&(this.settings.transformTag.call(this,r),o=this.validateTag(r.value)),void 0!==o&&!0!==o||(t.textContent=r.value,this.value[s].value=r.value,this.update(),(e=t.cloneNode(!0)).removeAttribute("contenteditable"),i.title=r.value,i.classList.remove("tagify--editable"),t.parentNode.replaceChild(e,t),this.trigger("edit",{tag:i,index:s,data:this.value[s]}))},onEditTagkeydown:function(t){switch(t.key){case"Esc":case"Escape":t.target.textContent=t.target.originalValue;case"Enter":case"Tab":t.preventDefault(),t.target.blur()}},onDoubleClickScope:function(t){var e=t.target.closest("tag"),i=this.settings;"mix"==i.mode||i.readonly||i.enforceWhitelist||!e||e.classList.contains("tagify--editable")||e.hasAttribute("readonly")||this.editTag(e)}}},editTag:function(t){var e=this,i=t.querySelector(".tagify__tag-text"),s=this.events.callbacks;i?(t.classList.add("tagify--editable"),i.originalValue=i.textContent,i.setAttribute("contenteditable",!0),i.addEventListener("blur",s.onEditTagBlur.bind(this,i)),i.addEventListener("input",s.onEditTagInput.bind(this,i)),i.addEventListener("keydown",function(t){return s.onEditTagkeydown.call(e,t)}),i.focus()):console.warn("Cannot find element in Tag template: ",".tagify__tag-text")},input:{value:"",set:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",e=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];this.input.value=t,e&&(this.DOM.input.innerHTML=t),t||this.dropdown.hide.call(this),t.length<2&&this.input.autocomplete.suggest.call(this,""),this.input.validate.call(this)},setRangeAtStartEnd:function(){var t,e,i=0<arguments.length&&void 0!==arguments[0]&&arguments[0],s=1<arguments.length?arguments[1]:void 0;document.createRange&&((t=document.createRange()).selectNodeContents(s||this.DOM.input),t.collapse(i),(e=window.getSelection()).removeAllRanges(),e.addRange(t))},validate:function(){var t=!this.input.value||this.validateTag.call(this,this.input.value);this.DOM.input.classList.toggle("tagify__input--invalid",!0!==t)},normalize:function(){var t=(0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.DOM.input).innerText;return"settings"in this&&this.settings.delimiters&&(t=t.replace(/(?:\r\n|\r|\n)/g,this.settings.delimiters.source.charAt(1))),t=t.replace(/\s/g," ").replace(/^\s+/,"")},autocomplete:{suggest:function(t){t&&this.input.value?this.DOM.input.setAttribute("data-suggest",t.substring(this.input.value.length)):this.DOM.input.removeAttribute("data-suggest")},set:function(t){var e=this.DOM.input.getAttribute("data-suggest"),i=t||(e?this.input.value+e:null);return!!i&&(this.input.set.call(this,i),this.input.autocomplete.suggest.call(this,""),this.dropdown.hide.call(this),this.input.setRangeAtStartEnd.call(this),!0)}}},getNodeIndex:function(t){var e=0;if(t)for(;t=t.previousElementSibling;)e++;return e},isTagDuplicate:function(e){return this.value.findIndex(function(t){return e.trim().toLowerCase()===t.value.toLowerCase()})},getTagIndexByValue:function(i){var s=[];return this.DOM.scope.querySelectorAll("tag").forEach(function(t,e){t.textContent.trim().toLowerCase()==i.toLowerCase()&&s.push(e)}),s},getTagElmByValue:function(t){var e=this.getTagIndexByValue(t)[0];return this.DOM.scope.querySelectorAll("tag")[e]},markTagByValue:function(t,e){return!!(e=e||this.getTagElmByValue(t))&&(e.classList.add("tagify--mark"),e)},isTagBlacklisted:function(e){return e=e.toLowerCase().trim(),this.settings.blacklist.filter(function(t){return e==t.toLowerCase()}).length},isTagWhitelisted:function(e){return this.settings.whitelist.some(function(t){if((t.value||t).toLowerCase()===e.toLowerCase())return!0})},validateTag:function(t){var e=t.trim(),i=!0;return e?this.settings.pattern&&!this.settings.pattern.test(e)?i=this.TEXTS.pattern:this.settings.duplicates||-1===this.isTagDuplicate(e)?(this.isTagBlacklisted(e)||this.settings.enforceWhitelist&&!this.isTagWhitelisted(e))&&(i=this.TEXTS.notAllowed):i=this.TEXTS.duplicate:i=this.TEXTS.empty,i},maxTagsReached:function(){return this.value.length>=this.settings.maxTags&&this.TEXTS.exceed},normalizeTags:function(t){var e=this.settings,i=e.whitelist,s=e.delimiters,n=e.mode,a=!!i&&i[0]instanceof Object,o=t instanceof Array&&t[0]instanceof Object&&"value"in t[0],r=[];if(o)return t;if("number"==typeof t&&(t=t.toString()),"string"==typeof t){if(!t.trim())return[];t=t.split(s).filter(function(t){return t}).map(function(t){return{value:t.trim()}})}else t instanceof Array&&(t=t.map(function(t){return{value:t.trim()}}));return a?(t.forEach(function(e){var t=i.filter(function(t){return t.value.toLowerCase()==e.value.toLowerCase()});t[0]?r.push(t[0]):"mix"!=n&&r.push(e)}),r):t},parseMixTags:function(t){for(var e,i,s=!1,n="",a=t,o=0;o<t.length;o++)"["==t[o]&&t[o]==t[o+1]&&(s=!0),s&&(n+=t[o]),"]"==t[o]&&t[o]==t[o-1]&&(s=!1,e=n.slice(2).slice(0,-2),this.isTagWhitelisted(e)&&!this.settings.duplicates&&-1==this.isTagDuplicate(e)&&(i=this.normalizeTags.call(this,e)[0],a=this.replaceMixStringWithTag(a,n,i).html),n="");return this.DOM.input.innerHTML=a,this.update(),t},replaceMixStringWithTag:function(t,e,i,s){return i&&t&&-1!=t.indexOf(e)&&(s=this.createTagElem(i),this.value.push(i),t=t.replace(e,s.outerHTML+"&#8288;")),{html:t,tagElm:s}},addMixTag:function(t){if(t&&this.state.tag){for(var e,i,s,n,a=this.state.tag.prefix+this.state.tag.value,o=document.createNodeIterator(this.DOM.input,NodeFilter.SHOW_TEXT),r=100;(e=o.nextNode())&&r--;)if(e.nodeType===Node.TEXT_NODE){if(-1==(s=e.nodeValue.indexOf(a)))continue;n=e.splitText(s),i=this.createTagElem(t),n.nodeValue=n.nodeValue.replace(a,""),e.parentNode.insertBefore(i,n),i.insertAdjacentHTML("afterend","&#8288;")}i&&(this.value.push(t),this.update(),this.trigger("add",this.extend({},{index:this.value.length,tag:i},t))),this.state.tag=null}},addTags:function(t,e){var n=this,a=2<arguments.length&&void 0!==arguments[2]?arguments[2]:this.settings.skipInvalid,o=[];if(!t||!t.length)return console.warn("[addTags]","no tags to add:",t),o;if(t=this.normalizeTags.call(this,t),"mix"==this.settings.mode)return this.addMixTag(t[0]);return this.DOM.input.removeAttribute("style"),t.forEach(function(t){var e,i,s={};if(t=Object.assign({},t),n.settings.transformTag.call(n,t),!0!==(e=n.maxTagsReached()||n.validateTag.call(n,t.value))){if(a)return;s["aria-invalid"]=!0,s.class=(t.class||"")+" tagify--notAllowed",s.title=e,n.markTagByValue(t.value),n.trigger("invalid",{data:t,index:n.value.length,message:e})}s.role="tag",t.readonly&&(s["aria-readonly"]=!0),i=n.createTagElem(n.extend({},t,s)),o.push(i),function(t){var e=this.DOM.scope.lastElementChild;e===this.DOM.input?this.DOM.scope.insertBefore(t,e):this.DOM.scope.appendChild(t)}.call(n,i),!0===e?(n.value.push(t),n.update(),n.DOM.scope.classList.toggle("hasMaxTags",n.value.length>=n.settings.maxTags),n.trigger("add",{tag:i,index:n.value.length-1,data:t})):n.settings.keepInvalidTags||setTimeout(function(){n.removeTag(i,!0)},1e3)}),t.length&&e&&this.input.set.call(this),o},minify:function(t){return t.replace(new RegExp(">[\r\n ]+<","g"),"><")},createTagElem:function(t){var e=this.escapeHTML(t.value),i=this.settings.templates.tag.call(this,e,t);return this.settings.readonly&&(t.readonly=!0),i=this.minify(i),this.parseHTML(i)},removeTag:function(t,e){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:250;if(t&&("string"==typeof t&&(t=this.getTagElmByValue(t)),t instanceof HTMLElement)){var s,n=this.getNodeIndex(t);i&&10<i?(t.style.width=parseFloat(window.getComputedStyle(t).width)+"px",document.body.clientTop,t.classList.add("tagify--hide"),setTimeout(a,400)):a(),e||(s=this.value.splice(n,1)[0],this.update(),this.trigger("remove",{tag:t,index:n,data:s}))}function a(){t.parentNode&&t.parentNode.removeChild(t)}},removeAllTags:function(){this.value=[],this.update(),Array.prototype.slice.call(this.DOM.scope.querySelectorAll("tag")).forEach(function(t){return t.parentNode.removeChild(t)})},getAttributes:function(t){if("[object Object]"!=Object.prototype.toString.call(t))return"";var e,i,s=Object.keys(t),n="";for(i=s.length;i--;)"class"!=(e=s[i])&&t.hasOwnProperty(e)&&(n+=" "+e+(t[e]?'="'.concat(t[e],'"'):""));return n},update:function(){this.DOM.originalInput.value="mix"==this.settings.mode?this.getMixedTagsAsString():this.value.length?JSON.stringify(this.value):""},getMixedTagsAsString:function(){var i="";return this.DOM.input.childNodes.forEach(function(t,e){1==t.nodeType?t.classList.contains("tagify__tag")&&(i+="[["+t.getAttribute("value")+"]]"):i+=t.textContent}),i},dropdown:{init:function(){this.DOM.dropdown=this.dropdown.build.call(this)},build:function(){var t="tagify__dropdown ".concat(this.settings.dropdown.classname).trim(),e='<div class="'.concat(t,'" role="menu"></div>');return this.parseHTML(e)},show:function(t){var e;if(this.settings.whitelist.length){if(this.suggestedListItems=this.dropdown.filterListItems.call(this,t),!this.suggestedListItems.length)return this.input.autocomplete.suggest.call(this),void this.dropdown.hide.call(this);e=this.dropdown.createListHTML.call(this,this.suggestedListItems),this.DOM.dropdown.innerHTML=this.minify(e),this.settings.enforceWhitelist&&this.dropdown.highlightOption.call(this,this.DOM.dropdown.querySelector(".tagify__dropdown__item")),this.dropdown.position.call(this),this.DOM.scope.setAttribute("aria-expanded",!0),!this.DOM.dropdown.parentNode!=document.body&&(document.body.appendChild(this.DOM.dropdown),this.events.binding.call(this,!1),this.dropdown.events.binding.call(this))}},hide:function(){this.DOM.dropdown&&this.DOM.dropdown.parentNode==document.body&&(document.body.removeChild(this.DOM.dropdown),this.DOM.scope.setAttribute("aria-expanded",!1),window.removeEventListener("resize",this.dropdown.position),this.dropdown.events.binding.call(this,!1),this.events.binding.call(this))},position:function(){var t=this.DOM.scope.getBoundingClientRect();this.DOM.dropdown.style.cssText="left: "+(t.left+window.pageXOffset)+"px;                                                top: "+(t.top+t.height-1+window.pageYOffset)+"px;                                                width: "+t.width+"px"},events:{binding:function(){var t=!(0<arguments.length&&void 0!==arguments[0])||arguments[0],e=this.listeners.dropdown=this.listeners.dropdown||{position:this.dropdown.position.bind(this),onKeyDown:this.dropdown.events.callbacks.onKeyDown.bind(this),onMouseOver:this.dropdown.events.callbacks.onMouseOver.bind(this),onClick:this.dropdown.events.callbacks.onClick.bind(this)},i=t?"addEventListener":"removeEventListener";window[i]("resize",e.position),window[i]("keydown",e.onKeyDown),window[i]("mousedown",e.onClick),this.DOM.dropdown[i]("mouseover",e.onMouseOver)},callbacks:{onKeyDown:function(t){var e=this.DOM.dropdown.querySelector("[class$='--active']"),i=e||this.DOM.dropdown.children[0],s="";switch(t.key){case"ArrowDown":case"ArrowUp":case"Down":case"Up":t.preventDefault(),i&&(i=i[("ArrowUp"==t.key||"Up"==t.key?"previous":"next")+"ElementSibling"]),i||(i=this.DOM.dropdown.children["ArrowUp"==t.key||"Up"==t.key?this.DOM.dropdown.children.length-1:0]),this.dropdown.highlightOption.call(this,i,!0);break;case"Escape":case"Esc":this.dropdown.hide.call(this);break;case"ArrowRight":case"Tab":if(t.preventDefault(),!this.input.autocomplete.set.call(this,i?i.textContent:null))return!1;case"Enter":if(e)return t.preventDefault(),s=this.suggestedListItems[this.getNodeIndex(e)]||this.input.value,this.addTags([s],!0),this.dropdown.hide.call(this),!1}},onMouseOver:function(t){t.target.className.includes("__item")&&this.dropdown.highlightOption.call(this,t.target)},onClick:function(t){var e,i,s=this,n=function(){return s.dropdown.hide.call(s)};if(0==t.button&&t.target!=this.DOM.dropdown){if(t.target==document.documentElement)return n();(i=t.target.closest(".tagify__dropdown__item"))?(e=this.suggestedListItems[this.getNodeIndex(i)]||this.input.value,this.addTags([e],!0),this.dropdown.hide.call(this),setTimeout(function(){return s.DOM.input.focus()},100)):n()}}}},highlightOption:function(t,e){if(t){var i,s="tagify__dropdown__item--active";this.DOM.dropdown.querySelectorAll("[class$='--active']").forEach(function(t){t.classList.remove(s),t.removeAttribute("aria-selected")}),t.classList.add(s),t.setAttribute("aria-selected",!0),e&&(t.parentNode.scrollTop=t.clientHeight+t.offsetTop-t.parentNode.clientHeight),this.settings.autoComplete&&!this.settings.dropdown.fuzzySearch&&(i=this.suggestedListItems[this.getNodeIndex(t)].value||this.input.value,this.input.autocomplete.suggest.call(this,i))}},filterListItems:function(t){var e,i,s,n,a=this,o=[],r=this.settings.whitelist,l=this.settings.dropdown.maxItems||1/0,d=0;if(!t)return r.filter(function(t){return-1==a.isTagDuplicate(t.value||t)}).slice(0,l);for(;d<r.length&&(s=(((e=r[d]instanceof Object?r[d]:{value:r[d]}).searchBy||"")+" "+e.value).toLowerCase().indexOf(t.toLowerCase()),i=this.settings.dropdown.fuzzySearch?0<=s:0==s,n=!this.settings.duplicates&&-1<this.isTagDuplicate(e.value),i&&!n&&l--&&o.push(e),0!=l);d++);return o},createListHTML:function(t){var e=this.settings.templates.dropdownItem.bind(this);return t.map(e).join("")}}},t});

gulpfile.js

@@ -195,2 +195,33 @@ var gulp = require('gulp'),
 
+/**
+ * Bumping version number and tagging the repository with it.
+ * Please read http://semver.org/
+ *
+ * You can use the commands
+ *
+ *     gulp patch     # makes v0.1.0 → v0.1.1
+ *     gulp feature   # makes v0.1.1 → v0.2.0
+ *     gulp release   # makes v0.2.1 → v1.0.0
+ *
+ * To bump the version numbers accordingly after you did a patch,
+ * introduced a feature or made a backwards-incompatible release.
+ */
+
+function inc(importance) {
+    // get all the files to bump version in
+    return gulp.src('./package.json')
+        // bump the version number in those files
+        .pipe($.bump({type: importance}))
+        // save it back to filesystem
+        .pipe(gulp.dest('./'))
+        // commit the changed version number
+        .pipe($.git.commit('bumps package version'))
+
+        // read only one file to get the version number
+        .pipe($.filter('package.json'))
+        // **tag it in the repository**
+        .pipe($.tagVersion());
+}
+
+
 gulp.task('watch', () => {
@@ -206,1 +237,6 @@ //gulp.watch('./images/sprite/**/*.png', ['sprite']);
 });
+
+
+gulp.task('patch', () => inc('patch'))
+gulp.task('feature', () => inc('minor'))
+gulp.task('release', () => inc('major'))

package.json

 {
     "name": "@yaireo/tagify",
-    "version": "2.19.1",
+    "version": "2.20.1",
     "homepage": "https://github.com/yairEO/tagify",
@@ -37,2 +37,3 @@ "description": "Convert an input field into a Tags element. Easy, customizable, with good performance and small code footprint.",
         "gulp-babel": "^8.0.0",
+        "gulp-bump": "^3.1.3",
         "gulp-cached": "^1.1.1",
@@ -44,2 +45,4 @@ "gulp-clean-css": "^3.10.0",
         "gulp-eslint": "^5.0.0",
+        "gulp-filter": "^5.1.0",
+        "gulp-git": "^2.9.0",
         "gulp-insert": "^0.5.0",
@@ -51,2 +54,3 @@ "gulp-load-plugins": "^1.5.0",
         "gulp-sourcemaps": "^2.6.4",
+        "gulp-tag-version": "^1.3.1",
         "gulp-uglify": "^3.0.1",
@@ -59,4 +63,5 @@ "gulp-umd": "^2.0.0",
         "puppeteer": "^1.14.0",
-        "run-sequence": "^2.2.1"
+        "run-sequence": "^2.2.1",
+        "semver": "^6.0.0"
     }
 }

README.md

@@ -72,3 +72,3 @@ <a href='https://www.npmjs.com/package/@yaireo/tagify'>
 * Can be applied on input & textarea elements
-* Supports mix content (text and tags together)
+* Supports [mix content](#mixed-content) (text and tags together)
 * Supports whitelist
@@ -229,2 +229,15 @@ * Supports blacklists
 
+## mixed-content
+
+> To use this feature it must be toggled - see [settings](#settings).
+
+When mixing text with tags, the original textarea (or input) element will have a value as follows:
+
+    [[cartman]]⁠ and [[kyle]]⁠ do not [[Bart]]⁠ know [[Homer simpson]]⁠ because he's a relic.
+
+If the inital value of the textarea or input is formatted as the above example, tagify will try to
+automatically convert everything between `[[` & `]]` to a tag, if tag exists in the *whitelist*, so make
+sure when the Tagify instance is initialized, that it has tags with the correct `value` property that match
+the same values that appear between `[[` & `]]`.
+
 ## React
@@ -231,0 +244,0 @@

src/tagify.js

@@ -130,3 +130,3 @@ function Tagify( input, settings ){
         if( this.settings && this.settings.delimiters ){
-            try { this.settings.delimiters = new RegExp("[" + this.settings.delimiters + "]", "g") }
+            try { this.settings.delimiters = new RegExp(this.settings.delimiters, "g") }
             catch(e){}
@@ -356,2 +356,3 @@ }
                     switch( e.key ){
+                        case 'Delete':
                         case 'Backspace' :
@@ -513,2 +514,3 @@ var values = [];
                     value = this.input.normalize(editableElm) || editableElm.originalValue,
+                    hasChanged = this.input.normalize(editableElm) != editableElm.originalValue,
                     isValid = tagElm.isValid,
@@ -518,7 +520,8 @@ tagData = {...this.value[tagElmIdx], value},
 
-                this.settings.transformTag.call(this, tagData);
+                if( hasChanged ){
+                    this.settings.transformTag.call(this, tagData);
+                    // re-validate after tag transformation
+                    isValid = this.validateTag(tagData.value);
+                }
 
-                // re-validate after tag transformation
-                isValid = this.validateTag(tagData.value);
-
                 if( isValid !== undefined && isValid !== true )
@@ -829,16 +832,32 @@ return;
     parseMixTags( s ){
-        // example: "@cartman ,@kyle do not    know:#homer".split(/,|\.|\:|\s/).filter(item => item.match(/@|#/) )
-        s.split(this.settings.mixTagsAllowedAfter)
-            .filter(item => item.match(this.settings.pattern) )
-            .forEach(tag => {
-                var value = tag.replace(this.settings.pattern, ''),
-                    tagData;
+        var collect = false,
+            match = "",
+            parsedMatch,
+            value = s,
+            html = s,
+            tagData;
 
-                if( this.isTagWhitelisted(value) && !this.settings.duplicates && this.isTagDuplicate(value) == -1 ){
-                    tagData = this.normalizeTags.call(this, value)[0];
-                    s = this.replaceMixStringWithTag(s, tag, tagData).s;
+        for( let i = 0; i < s.length; i++ ){
+            if( s[i] == '[' && s[i] == s[i+1])
+                collect = true;
+
+            if (collect)
+                match += s[i];
+
+            if( s[i] == ']' && s[i] == s[i-1]){
+                collect = false;
+
+                parsedMatch = match.slice(2).slice(0, -2);
+
+                if( this.isTagWhitelisted(parsedMatch) && !this.settings.duplicates && this.isTagDuplicate(parsedMatch) == -1 ){
+                    tagData = this.normalizeTags.call(this, parsedMatch)[0];
+                    html = this.replaceMixStringWithTag(html, match, tagData).html;
+                  //  value = value.replace(match, "[[" + tagData.value + "]]")
                 }
-            })
 
-        this.DOM.input.innerHTML = s;
+                match = "";
+            }
+        }
+
+        this.DOM.input.innerHTML = html;
         this.update();
@@ -850,15 +869,15 @@ return s;
      * [replaceMixStringWithTag description]
-     * @param  {String} s       [whole string]
+     * @param  {String} html    [tagify input string, probably from a textarea]
      * @param  {String} tag     [tag string to replace with tag element]
      * @param  {Object} tagData [value, plus any other optional attributes]
-     * @return {[type]}         [description]
+     * @return {Object}         [HTML string & tag DOM object]
      */
-    replaceMixStringWithTag( s, tag, tagData, tagElm ){
-        if( tagData && s && s.indexOf(tag) != -1 ){
+    replaceMixStringWithTag( html, tag, tagData, tagElm ){
+        if( tagData && html && html.indexOf(tag) != -1 ){
             tagElm = this.createTagElem(tagData);
             this.value.push(tagData);
-            s = s.replace(tag, tagElm.outerHTML + "&#8288;") // put a zero-space at the end so the caret won't jump back to the start (when the last input child is a tag)
+            html = html.replace(tag, tagElm.outerHTML + "&#8288;") // put a zero-space at the end so the caret won't jump back to the start (when the last input child is a tag)
         }
 
-        return {s, tagElm};
+        return {html, tagElm};
     },
@@ -1094,6 +1113,23 @@
         this.DOM.originalInput.value = this.settings.mode == 'mix'
-            ? this.DOM.input.textContent
-            : JSON.stringify(this.value)
+            ? this.getMixedTagsAsString()
+            : this.value.length
+                ? JSON.stringify(this.value)
+                : ""
     },
 
+    getMixedTagsAsString(){
+        var result = "";
+
+        this.DOM.input.childNodes.forEach((node, i) => {
+            if( node.nodeType == 1 ){
+                if( node.classList.contains("tagify__tag") )
+                    result += "[[" + node.getAttribute("value") + "]]"
+            }
+            else
+                result += node.textContent;
+        })
+
+        return result;
+    },
+
     /**
@@ -1135,3 +1171,4 @@ * Dropdown controller
             this.DOM.dropdown.innerHTML = this.minify(listHTML);
-            this.dropdown.highlightOption.call(this, this.DOM.dropdown.querySelector('.tagify__dropdown__item'));
+            // if "enforceWhitelist" is "true", highlight the first suggested item
+            this.settings.enforceWhitelist && this.dropdown.highlightOption.call(this, this.DOM.dropdown.querySelector('.tagify__dropdown__item'));
             this.dropdown.position.call(this);
@@ -1201,3 +1238,4 @@ this.DOM.scope.setAttribute("aria-expanded", true)
                     // get the "active" element, and if there was none (yet) active, use first child
-                    var selectedElm = this.DOM.dropdown.querySelector("[class$='--active']") || this.DOM.dropdown.children[0],
+                    var activeListElm = this.DOM.dropdown.querySelector("[class$='--active']"),
+                        selectedElm = activeListElm || this.DOM.dropdown.children[0],
                         newValue = "";
@@ -1232,8 +1270,9 @@
                         case 'Enter' :
-                            e.preventDefault();
-                            newValue = this.suggestedListItems[this.getNodeIndex(selectedElm)] || this.input.value;
-                            this.addTags( [newValue], true );
-                            this.dropdown.hide.call(this);
-                            return false;
-                            break;
+                            if( activeListElm ){
+                                e.preventDefault();
+                                newValue = this.suggestedListItems[this.getNodeIndex(activeListElm)] || this.input.value;
+                                this.addTags( [newValue], true );
+                                this.dropdown.hide.call(this);
+                                return false;
+                            }
                     }
@@ -1256,3 +1295,3 @@ },
 
-                    listItemElm = [e.target, e.target.parentNode].filter(a => a.className.includes("tagify__dropdown__item") )[0];
+                    listItemElm = e.target.closest(".tagify__dropdown__item");
 
@@ -1259,0 +1298,0 @@ if( listItemElm ){

No alert changes

Improved metrics

Total package byte prevSize

402490

increased by1.2%

Number of package files

24

increased by4.35%

Lines of code

2835

increased by3.5%

Number of lines in readme file

376

increased by3.58%

Worsened metrics

Dev dependency count

36

increased by16.13%

No dependency changes