Move tributejs to npm/webpack (#11497)

* Move tributejs to npm/webpack

- Move vendored bundle to npm and webpack
- Rewrote initialization to single function
- Restyled it (made it a bit smaller)
- Fixed it for arc-green

* fix mention

* also include emoji on #content

* Update web_src/less/_tribute.less

Co-authored-by: mrsdizzie <info@mrsdizzie.com>

* rewrite to only use one instance of Tribute

* refactor

* fix copy/paste error

Co-authored-by: mrsdizzie <info@mrsdizzie.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

12 files changed, 130 insertions, 127 deletions

diff --git a/package-lock.json b/package-lock.json
index 71183fed43..89c41721c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13574,6 +13574,11 @@
       "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
       "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc="
     },
+    "tributejs": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/tributejs/-/tributejs-5.1.3.tgz",
+      "integrity": "sha512-B5CXihaVzXw+1UHhNFyAwUTMDk1EfoLP5Tj1VhD9yybZ1I8DZJEv8tZ1l0RJo0t0tk9ZhR8eG5tEsaCvRigmdQ=="
+    },
     "trim": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
diff --git a/package.json b/package.json
index e48bb20819..1e81ea1448 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "svgo-loader": "2.2.1",
     "swagger-ui": "3.25.3",
     "terser-webpack-plugin": "3.0.1",
+    "tributejs": "5.1.3",
     "vue": "2.6.11",
     "vue-bar-graph": "1.2.0",
     "vue-calendar-heatmap": "0.8.4",
diff --git a/public/vendor/plugins/tribute/tribute.css b/public/vendor/plugins/tribute/tribute.css
deleted file mode 100755
index f122d1b5fc..0000000000
--- a/public/vendor/plugins/tribute/tribute.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.tribute-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: auto;
-  max-height: 300px;
-  max-width: 500px;
-  overflow: auto;
-  display: block;
-  z-index: 999999; }
-  .tribute-container ul {
-    margin: 0;
-    margin-top: 2px;
-    padding: 0;
-    list-style: none;
-    background: #efefef; }
-  .tribute-container li {
-    padding: 5px 5px;
-    cursor: pointer; }
-    .tribute-container li.highlight, .tribute-container li:hover {
-      background: #ddd; }
-    .tribute-container li span {
-      font-weight: bold; }
-    .tribute-container li.no-match {
-      cursor: default; }
-  .tribute-container .menu-highlighted {
-    font-weight: bold; }
diff --git a/public/vendor/plugins/tribute/tribute.min.js b/public/vendor/plugins/tribute/tribute.min.js
deleted file mode 100755
index f9eb832d3c..0000000000
--- a/public/vendor/plugins/tribute/tribute.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Tribute=e()}}(function(){return function e(t,n,i){function r(u,l){if(!n[u]){if(!t[u]){var a="function"==typeof require&&require;if(!l&&a)return a(u,!0);if(o)return o(u,!0);var c=new Error("Cannot find module '"+u+"'");throw c.code="MODULE_NOT_FOUND",c}var s=n[u]={exports:{}};t[u][0].call(s.exports,function(e){var n=t[u][1][e];return r(n?n:e)},s,s.exports,e,t,n,i)}return n[u].exports}for(var o="function"==typeof require&&require,u=0;u<i.length;u++)r(i[u]);return r}({1:[function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(n,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),u=e("./utils"),l=(i(u),e("./TributeEvents")),a=i(l),c=e("./TributeMenuEvents"),s=i(c),d=e("./TributeRange"),f=i(d),h=e("./TributeSearch"),v=i(h),p=function(){function e(t){var n=this,i=t.values,o=void 0===i?null:i,u=t.iframe,l=void 0===u?null:u,c=t.selectClass,d=void 0===c?"highlight":c,h=t.trigger,p=void 0===h?"@":h,g=t.selectTemplate,m=void 0===g?null:g,b=t.menuItemTemplate,y=void 0===b?null:b,w=t.lookup,T=void 0===w?"key":w,E=t.fillAttr,S=void 0===E?"value":E,k=t.collection,x=void 0===k?null:k,C=t.menuContainer,A=void 0===C?null:C,N=t.noMatchTemplate,M=void 0===N?null:N,I=t.requireLeadingSpace,P=void 0===I||I,L=t.allowSpaces,D=void 0!==L&&L,O=t.replaceTextSuffix,R=void 0===O?null:O;if(r(this,e),this.menuSelected=0,this.current={},this.inputEvent=!1,this.isActive=!1,this.menuContainer=A,this.allowSpaces=D,this.replaceTextSuffix=R,o)this.collection=[{trigger:p,iframe:l,selectClass:d,selectTemplate:(m||e.defaultSelectTemplate).bind(this),menuItemTemplate:(y||e.defaultMenuItemTemplate).bind(this),noMatchTemplate:function(e){return"function"==typeof e?e.bind(n):function(){return'<li class="no-match">No match!</li>'}.bind(n)}(M),lookup:T,fillAttr:S,values:o,requireLeadingSpace:P}];else{if(!x)throw new Error("[Tribute] No collection specified.");this.collection=x.map(function(t){return{trigger:t.trigger||p,iframe:t.iframe||l,selectClass:t.selectClass||d,selectTemplate:(t.selectTemplate||e.defaultSelectTemplate).bind(n),menuItemTemplate:(t.menuItemTemplate||e.defaultMenuItemTemplate).bind(n),noMatchTemplate:function(e){return"function"==typeof e?e.bind(n):null}(M),lookup:t.lookup||T,fillAttr:t.fillAttr||S,values:t.values,requireLeadingSpace:t.requireLeadingSpace}})}new f.default(this),new a.default(this),new s.default(this),new v.default(this)}return o(e,[{key:"triggers",value:function(){return this.collection.map(function(e){return e.trigger})}},{key:"attach",value:function(e){if(!e)throw new Error("[Tribute] Must pass in a DOM node or NodeList.");if("undefined"!=typeof jQuery&&e instanceof jQuery&&(e=e.get()),e.constructor===NodeList||e.constructor===HTMLCollection||e.constructor===Array)for(var t=e.length,n=0;n<t;++n)this._attach(e[n]);else this._attach(e)}},{key:"_attach",value:function(e){e.hasAttribute("data-tribute")&&console.warn("Tribute was already bound to "+e.nodeName),this.ensureEditable(e),this.events.bind(e),e.setAttribute("data-tribute",!0)}},{key:"ensureEditable",value:function(t){if(e.inputTypes().indexOf(t.nodeName)===-1){if(!t.contentEditable)throw new Error("[Tribute] Cannot bind to "+t.nodeName);t.contentEditable=!0}}},{key:"createMenu",value:function(){var e=this.range.getDocument().createElement("div"),t=this.range.getDocument().createElement("ul");return e.className="tribute-container",e.appendChild(t),this.menuContainer?this.menuContainer.appendChild(e):this.range.getDocument().body.appendChild(e)}},{key:"showMenuFor",value:function(e,t){var n=this;if(!this.isActive||this.current.element!==e||this.current.mentionText!==this.currentMentionTextSnapshot){this.currentMentionTextSnapshot=this.current.mentionText,this.menu||(this.menu=this.createMenu(),this.menuEvents.bind(this.menu)),this.isActive=!0,this.menuSelected=0,this.current.mentionText||(this.current.mentionText="");var i=function(e){if(n.isActive){var i=n.search.filter(n.current.mentionText,e,{pre:"<span>",post:"</span>",extract:function(e){if("string"==typeof n.current.collection.lookup)return e[n.current.collection.lookup];if("function"==typeof n.current.collection.lookup)return n.current.collection.lookup(e);throw new Error("Invalid lookup attribute, lookup must be string or function.")}});n.current.filteredItems=i;var r=n.menu.querySelector("ul");if(n.range.positionMenuAtCaret(t),!i.length){var o=new CustomEvent("tribute-no-match",{detail:n.menu});return n.current.element.dispatchEvent(o),void(n.current.collection.noMatchTemplate?r.innerHTML=n.current.collection.noMatchTemplate():n.hideMenu())}r.innerHTML="",i.forEach(function(e,t){var i=n.range.getDocument().createElement("li");i.setAttribute("data-index",t),i.addEventListener("mouseenter",function(e){var t=e.target,i=t.getAttribute("data-index");n.events.setActiveLi(i)}),n.menuSelected===t&&(i.className=n.current.collection.selectClass),i.innerHTML=n.current.collection.menuItemTemplate(e),r.appendChild(i)})}};"function"==typeof this.current.collection.values?this.current.collection.values(this.current.mentionText,i):i(this.current.collection.values)}}},{key:"showMenuForCollection",value:function(e,t){e!==document.activeElement&&this.placeCaretAtEnd(e),this.current.collection=this.collection[t||0],this.current.externalTrigger=!0,this.current.element=e,e.isContentEditable?this.insertTextAtCursor(this.current.collection.trigger):this.insertAtCaret(e,this.current.collection.trigger),this.showMenuFor(e)}},{key:"placeCaretAtEnd",value:function(e){if(e.focus(),"undefined"!=typeof window.getSelection&&"undefined"!=typeof document.createRange){var t=document.createRange();t.selectNodeContents(e),t.collapse(!1);var n=window.getSelection();n.removeAllRanges(),n.addRange(t)}else if("undefined"!=typeof document.body.createTextRange){var i=document.body.createTextRange();i.moveToElementText(e),i.collapse(!1),i.select()}}},{key:"insertTextAtCursor",value:function(e){var t,n;t=window.getSelection(),n=t.getRangeAt(0),n.deleteContents();var i=document.createTextNode(e);n.insertNode(i),n.selectNodeContents(i),n.collapse(!1),t.removeAllRanges(),t.addRange(n)}},{key:"insertAtCaret",value:function(e,t){var n=e.scrollTop,i=e.selectionStart,r=e.value.substring(0,i),o=e.value.substring(e.selectionEnd,e.value.length);e.value=r+t+o,i+=t.length,e.selectionStart=i,e.selectionEnd=i,e.focus(),e.scrollTop=n}},{key:"hideMenu",value:function(){this.menu&&(this.menu.style.cssText="display: none;",this.isActive=!1,this.menuSelected=0,this.current={})}},{key:"selectItemAtIndex",value:function(e,t){if(e=parseInt(e),"number"==typeof e){var n=this.current.filteredItems[e],i=this.current.collection.selectTemplate(n);null!==i&&this.replaceText(i,t,n)}}},{key:"replaceText",value:function(e,t,n){this.range.replaceTriggerText(e,!0,!0,t,n)}},{key:"_append",value:function(e,t,n){if("function"==typeof e.values)throw new Error("Unable to append to values, as it is a function.");n?e.values=t:e.values=e.values.concat(t)}},{key:"append",value:function(e,t,n){var i=parseInt(e);if("number"!=typeof i)throw new Error("please provide an index for the collection to update.");var r=this.collection[i];this._append(r,t,n)}},{key:"appendCurrent",value:function(e,t){if(!this.isActive)throw new Error("No active state. Please use append instead and pass an index.");this._append(this.current.collection,e,t)}}],[{key:"defaultSelectTemplate",value:function(e){return"undefined"==typeof e?null:this.range.isContentEditable(this.current.element)?'<span class="tribute-mention">'+(this.current.collection.trigger+e.original[this.current.collection.fillAttr])+"</span>":this.current.collection.trigger+e.original[this.current.collection.fillAttr]}},{key:"defaultMenuItemTemplate",value:function(e){return e.string}},{key:"inputTypes",value:function(){return["TEXTAREA","INPUT"]}}]),e}();n.default=p,t.exports=n.default},{"./TributeEvents":2,"./TributeMenuEvents":3,"./TributeRange":4,"./TributeSearch":5,"./utils":7}],2:[function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(n,"__esModule",{value:!0});var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),u=function(){function e(t){i(this,e),this.tribute=t,this.tribute.events=this}return o(e,[{key:"bind",value:function(e){e.addEventListener("keydown",this.keydown.bind(e,this),!1),e.addEventListener("keyup",this.keyup.bind(e,this),!1),e.addEventListener("input",this.input.bind(e,this),!1)}},{key:"keydown",value:function(t,n){t.shouldDeactivate(n)&&(t.tribute.isActive=!1,t.tribute.hideMenu());var i=this;t.commandEvent=!1,e.keys().forEach(function(e){e.key===n.keyCode&&(t.commandEvent=!0,t.callbacks()[e.value.toLowerCase()](n,i))})}},{key:"input",value:function(e,t){e.inputEvent=!0,e.keyup.call(this,e,t)}},{key:"click",value:function(e,t){var n=e.tribute;if(n.menu&&n.menu.contains(t.target)){var i=t.target;for(t.preventDefault(),t.stopPropagation();"li"!==i.nodeName.toLowerCase();)if(i=i.parentNode,!i||i===n.menu)throw new Error("cannot find the <li> container for the click");n.selectItemAtIndex(i.getAttribute("data-index"),t),n.hideMenu()}else n.current.element&&!n.current.externalTrigger&&(n.current.externalTrigger=!1,setTimeout(function(){return n.hideMenu()}))}},{key:"keyup",value:function(e,t){var n=this;if(e.inputEvent&&(e.inputEvent=!1),e.updateSelection(this),27!==t.keyCode){if(!e.tribute.isActive){var i=function(){var i=e.getKeyCode(e,n,t);if(isNaN(i)||!i)return{v:void 0};var r=e.tribute.triggers().find(function(e){return e.charCodeAt(0)===i});"undefined"!=typeof r&&e.callbacks().triggerChar(t,n,r)}();if("object"===("undefined"==typeof i?"undefined":r(i)))return i.v}(e.tribute.current.trigger&&e.commandEvent===!1||e.tribute.isActive&&8===t.keyCode)&&e.tribute.showMenuFor(this,!0)}}},{key:"shouldDeactivate",value:function(t){if(!this.tribute.isActive)return!1;if(0===this.tribute.current.mentionText.length){var n=!1;return e.keys().forEach(function(e){t.keyCode===e.key&&(n=!0)}),!n}return!1}},{key:"getKeyCode",value:function(e,t,n){var i=e.tribute,r=i.range.getTriggerInfo(!1,!1,!0,i.allowSpaces);return!!r&&r.mentionTriggerChar.charCodeAt(0)}},{key:"updateSelection",value:function(e){this.tribute.current.element=e;var t=this.tribute.range.getTriggerInfo(!1,!1,!0,this.tribute.allowSpaces);t&&(this.tribute.current.selectedPath=t.mentionSelectedPath,this.tribute.current.mentionText=t.mentionText,this.tribute.current.selectedOffset=t.mentionSelectedOffset)}},{key:"callbacks",value:function(){var e=this;return{triggerChar:function(t,n,i){var r=e.tribute;r.current.trigger=i;var o=r.collection.find(function(e){return e.trigger===i});r.current.collection=o,r.inputEvent&&r.showMenuFor(n,!0)},enter:function(t,n){e.tribute.isActive&&(t.preventDefault(),t.stopPropagation(),setTimeout(function(){e.tribute.selectItemAtIndex(e.tribute.menuSelected,t),e.tribute.hideMenu()},0))},escape:function(t,n){e.tribute.isActive&&(t.preventDefault(),t.stopPropagation(),e.tribute.isActive=!1,e.tribute.hideMenu())},tab:function(t,n){e.callbacks().enter(t,n)},up:function(t,n){if(e.tribute.isActive){t.preventDefault(),t.stopPropagation();var i=e.tribute.current.filteredItems.length,r=e.tribute.menuSelected;i>r&&r>0?(e.tribute.menuSelected--,e.setActiveLi()):0===r&&(e.tribute.menuSelected=i-1,e.setActiveLi(),e.tribute.menu.scrollTop=e.tribute.menu.scrollHeight)}},down:function(t,n){if(e.tribute.isActive){t.preventDefault(),t.stopPropagation();var i=e.tribute.current.filteredItems.length-1,r=e.tribute.menuSelected;i>r?(e.tribute.menuSelected++,e.setActiveLi()):i===r&&(e.tribute.menuSelected=0,e.setActiveLi(),e.tribute.menu.scrollTop=0)}},delete:function(t,n){e.tribute.isActive&&e.tribute.current.mentionText.length<1?e.tribute.hideMenu():e.tribute.isActive&&e.tribute.showMenuFor(n)}}}},{key:"setActiveLi",value:function(e){var t=this.tribute.menu.querySelectorAll("li"),n=t.length>>>0,i=this.getFullHeight(this.tribute.menu),r=this.getFullHeight(t[0]);e&&(this.tribute.menuSelected=e);for(var o=0;o<n;o++){var u=t[o];if(o===this.tribute.menuSelected){var l=r*(o+1),a=this.tribute.menu.scrollTop,c=a+i;l>c?this.tribute.menu.scrollTop+=r:l<c&&(this.tribute.menu.scrollTop-=r),u.className=this.tribute.current.collection.selectClass}else u.className=""}}},{key:"getFullHeight",value:function(e,t){var n=e.getBoundingClientRect().height;if(t){var i=e.currentStyle||window.getComputedStyle(e);return n+parseFloat(i.marginTop)+parseFloat(i.marginBottom)}return n}}],[{key:"keys",value:function(){return[{key:9,value:"TAB"},{key:8,value:"DELETE"},{key:13,value:"ENTER"},{key:27,value:"ESCAPE"},{key:38,value:"UP"},{key:40,value:"DOWN"}]}}]),e}();n.default=u,t.exports=n.default},{}],3:[function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(n,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),o=function(){function e(t){i(this,e),this.tribute=t,this.tribute.menuEvents=this,this.menu=this.tribute.menu}return r(e,[{key:"bind",value:function(e){var t=this;e.addEventListener("keydown",this.tribute.events.keydown.bind(this.menu,this),!1),this.tribute.range.getDocument().addEventListener("mousedown",this.tribute.events.click.bind(null,this),!1),this.tribute.range.getDocument().addEventListener("MSPointerDown",this.tribute.events.click.bind(null,this),!1),window.addEventListener("resize",this.debounce(function(){t.tribute.isActive&&t.tribute.range.positionMenuAtCaret(!0)},300,!1)),this.menuContainer?this.menuContainer.addEventListener("scroll",this.debounce(function(){t.tribute.isActive&&t.tribute.showMenuFor(t.tribute.current.element,!1)},300,!1),!1):window.onscroll=this.debounce(function(){t.tribute.isActive&&t.tribute.showMenuFor(t.tribute.current.element,!1)},300,!1)}},{key:"debounce",value:function(e,t,n){var i,r=this,o=arguments;return function(){var u=r,l=o,a=function(){i=null,n||e.apply(u,l)},c=n&&!i;clearTimeout(i),i=setTimeout(a,t),c&&e.apply(u,l)}}}]),e}();n.default=o,t.exports=n.default},{}],4:[function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(n,"__esModule",{value:!0});var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),u=function(){function e(t){i(this,e),this.tribute=t,this.tribute.range=this}return o(e,[{key:"getDocument",value:function(){var e=void 0;return this.tribute.current.collection&&(e=this.tribute.current.collection.iframe),e?e.contentWindow.document:document}},{key:"positionMenuAtCaret",value:function(e){var t=this.tribute.current,n=void 0,i=this.getTriggerInfo(!1,!1,!0,this.tribute.allowSpaces);"undefined"!=typeof i?(n=this.isContentEditable(t.element)?this.getContentEditableCaretPosition(i.mentionPosition):this.getTextAreaOrInputUnderlinePosition(this.getDocument().activeElement,i.mentionPosition),this.tribute.menu.style.cssText="top: "+n.top+"px;\n                                     left: "+n.left+"px;\n                                     position: absolute;\n                                     zIndex: 10000;\n                                     display: block;",e&&this.scrollIntoView()):this.tribute.menu.style.cssText="display: none"}},{key:"selectElement",value:function(e,t,n){var i=void 0,r=e;if(t)for(var o=0;o<t.length;o++){if(r=r.childNodes[t[o]],void 0===r)return;for(;r.length<n;)n-=r.length,r=r.nextSibling;0!==r.childNodes.length||r.length||(r=r.previousSibling)}var u=this.getWindowSelection();i=this.getDocument().createRange(),i.setStart(r,n),i.setEnd(r,n),i.collapse(!0);try{u.removeAllRanges()}catch(e){}u.addRange(i),e.focus()}},{key:"resetSelection",value:function(e,t,n){this.isContentEditable(e)?this.selectElement(e,t,n):e!==this.getDocument().activeElement&&e.focus()}},{key:"replaceTriggerText",value:function(e,t,n,i,r){var o=this.tribute.current,u=this.getTriggerInfo(!0,n,t,this.tribute.allowSpaces),l=new CustomEvent("tribute-replaced",{detail:{item:r,event:i}});if(void 0!==u){if(this.isContentEditable(o.element)){var a="string"==typeof this.tribute.replaceTextSuffix?this.tribute.replaceTextSuffix:" ";e+=a,this.pasteHtml(e,u.mentionPosition,u.mentionPosition+u.mentionText.length+1)}else{var c=this.getDocument().activeElement,s="string"==typeof this.tribute.replaceTextSuffix?this.tribute.replaceTextSuffix:" ";e+=s;var d=u.mentionPosition,f=u.mentionPosition+u.mentionText.length+s.length;c.value=c.value.substring(0,d)+e+c.value.substring(f,c.value.length),c.selectionStart=d+e.length,c.selectionEnd=d+e.length}o.element.dispatchEvent(l)}}},{key:"pasteHtml",value:function(e,t,n){var i=void 0,r=void 0;r=this.getWindowSelection(),i=this.getDocument().createRange(),i.setStart(r.anchorNode,t),i.setEnd(r.anchorNode,n),i.deleteContents();var o=this.getDocument().createElement("div");o.innerHTML=e;for(var u=this.getDocument().createDocumentFragment(),l=void 0,a=void 0;l=o.firstChild;)a=u.appendChild(l);i.insertNode(u),a&&(i=i.cloneRange(),i.setStartAfter(a),i.collapse(!0),r.removeAllRanges(),r.addRange(i))}},{key:"getWindowSelection",value:function(){return this.tribute.collection.iframe?this.tribute.collection.iframe.contentWindow.getSelection():window.getSelection()}},{key:"getNodePositionInParent",value:function(e){if(null===e.parentNode)return 0;for(var t=0;t<e.parentNode.childNodes.length;t++){var n=e.parentNode.childNodes[t];if(n===e)return t}}},{key:"getContentEditableSelectedPath",value:function(e){var t=this.getWindowSelection(),n=t.anchorNode,i=[],r=void 0;if(null!=n){for(var o=void 0,u=n.contentEditable;null!==n&&"true"!==u;)o=this.getNodePositionInParent(n),i.push(o),n=n.parentNode,null!==n&&(u=n.contentEditable);return i.reverse(),r=t.getRangeAt(0).startOffset,{selected:n,path:i,offset:r}}}},{key:"getTextPrecedingCurrentSelection",value:function(){var e=this.tribute.current,t="";if(this.isContentEditable(e.element)){var n=this.getWindowSelection().anchorNode;if(null!=n){var i=n.textContent,r=this.getWindowSelection().getRangeAt(0).startOffset;i&&r>=0&&(t=i.substring(0,r))}}else{var o=this.tribute.current.element;if(o){var u=o.selectionStart;o.value&&u>=0&&(t=o.value.substring(0,u))}}return t}},{key:"getTriggerInfo",value:function(e,t,n,i){var o=this,u=this.tribute.current,l=void 0,a=void 0,c=void 0;if(this.isContentEditable(u.element)){var s=this.getContentEditableSelectedPath(u);s&&(l=s.selected,a=s.path,c=s.offset)}else l=this.getDocument().activeElement;var d=this.getTextPrecedingCurrentSelection();if(void 0!==d&&null!==d){var f=function(){var r=-1,u=void 0;if(o.tribute.collection.forEach(function(e){var t=e.trigger,i=e.requireLeadingSpace?o.lastIndexWithLeadingSpace(d,t):d.lastIndexOf(t);i>r&&(r=i,u=t,n=e.requireLeadingSpace)}),r>=0&&(0===r||!n||/[\xA0\s]/g.test(d.substring(r-1,r)))){var s=d.substring(r+1,d.length);u=d.substring(r,r+1);var f=s.substring(0,1),h=s.length>0&&(" "===f||" "===f);t&&(s=s.trim());var v=i?/[^\S ]/g:/[\xA0\s]/g;if(!h&&(e||!v.test(s)))return{v:{mentionPosition:r,mentionText:s,mentionSelectedElement:l,mentionSelectedPath:a,mentionSelectedOffset:c,mentionTriggerChar:u}}}}();if("object"===("undefined"==typeof f?"undefined":r(f)))return f.v}}},{key:"lastIndexWithLeadingSpace",value:function(e,t){for(var n=e.split("").reverse().join(""),i=-1,r=0,o=e.length;r<o;r++){var u=r===e.length-1,l=/\s/.test(n[r+1]),a=t===n[r];if(a&&(u||l)){i=e.length-1-r;break}}return i}},{key:"isContentEditable",value:function(e){return"INPUT"!==e.nodeName&&"TEXTAREA"!==e.nodeName}},{key:"getTextAreaOrInputUnderlinePosition",value:function(e,t){var n=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing"],i=null!==window.mozInnerScreenX,r=this.getDocument().createElement("div");r.id="input-textarea-caret-position-mirror-div",this.getDocument().body.appendChild(r);var o=r.style,u=window.getComputedStyle?getComputedStyle(e):e.currentStyle;o.whiteSpace="pre-wrap","INPUT"!==e.nodeName&&(o.wordWrap="break-word"),o.position="absolute",o.visibility="hidden",n.forEach(function(e){o[e]=u[e]}),i?(o.width=parseInt(u.width)-2+"px",e.scrollHeight>parseInt(u.height)&&(o.overflowY="scroll")):o.overflow="hidden",r.textContent=e.value.substring(0,t),"INPUT"===e.nodeName&&(r.textContent=r.textContent.replace(/\s/g," "));var l=this.getDocument().createElement("span");l.textContent=e.value.substring(t)||".",r.appendChild(l);var a=e.getBoundingClientRect(),c=document.documentElement,s=(window.pageXOffset||c.scrollLeft)-(c.clientLeft||0),d=(window.pageYOffset||c.scrollTop)-(c.clientTop||0),f={top:a.top+d+l.offsetTop+parseInt(u.borderTopWidth)+parseInt(u.fontSize)-e.scrollTop,left:a.left+s+l.offsetLeft+parseInt(u.borderLeftWidth)};return this.getDocument().body.removeChild(r),f}},{key:"getContentEditableCaretPosition",value:function(e){var t="\ufeff",n=void 0,i="sel_"+(new Date).getTime()+"_"+Math.random().toString().substr(2),r=void 0,o=this.getWindowSelection(),u=o.getRangeAt(0);r=this.getDocument().createRange(),r.setStart(o.anchorNode,e),r.setEnd(o.anchorNode,e),r.collapse(!1),n=this.getDocument().createElement("span"),n.id=i,n.appendChild(this.getDocument().createTextNode(t)),r.insertNode(n),o.removeAllRanges(),o.addRange(u);var l=n.getBoundingClientRect(),a=document.documentElement,c=(window.pageXOffset||a.scrollLeft)-(a.clientLeft||0),s=(window.pageYOffset||a.scrollTop)-(a.clientTop||0),d={left:l.left+c,top:l.top+n.offsetHeight+s};return n.parentNode.removeChild(n),d}},{key:"scrollIntoView",value:function(e){var t=20,n=void 0,i=100,r=this.menu;if("undefined"!=typeof r){for(;void 0===n||0===n.height;)if(n=r.getBoundingClientRect(),0===n.height&&(r=r.childNodes[0],void 0===r||!r.getBoundingClientRect))return;var o=n.top,u=o+n.height;if(o<0)window.scrollTo(0,window.pageYOffset+n.top-t);else if(u>window.innerHeight){var l=window.pageYOffset+n.top-t;l-window.pageYOffset>i&&(l=window.pageYOffset+i);var a=window.pageYOffset-(window.innerHeight-u);a>l&&(a=l),window.scrollTo(0,a)}}}}]),e}();n.default=u,t.exports=n.default},{}],5:[function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(n,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),o=function(){function e(t){i(this,e),this.tribute=t,this.tribute.search=this}return r(e,[{key:"simpleFilter",value:function(e,t){var n=this;return t.filter(function(t){return n.test(e,t)})}},{key:"test",value:function(e,t){return null!==this.match(e,t)}},{key:"match",value:function(e,t,n){n=n||{};var i=(t.length,n.pre||""),r=n.post||"",o=n.caseSensitive&&t||t.toLowerCase();e=n.caseSensitive&&e||e.toLowerCase();var u=this.traverse(o,e,0,0,[]);return u?{rendered:this.render(t,u.cache,i,r),score:u.score}:null}},{key:"traverse",value:function(e,t,n,i,r){if(t.length===i)return{score:this.calculateScore(r),cache:r.slice()};if(!(e.length===n||t.length-i>e.length-n)){for(var o=t[i],u=e.indexOf(o,n),l=void 0,a=void 0;u>-1;){if(r.push(u),a=this.traverse(e,t,u+1,i+1,r),r.pop(),!a)return l;(!l||l.score<a.score)&&(l=a),u=e.indexOf(o,u+1)}return l}}},{key:"calculateScore",value:function(e){var t=0,n=1;return e.forEach(function(i,r){r>0&&(e[r-1]+1===i?n+=n+1:n=1),t+=n}),t}},{key:"render",value:function(e,t,n,i){var r=e.substring(0,t[0]);return t.forEach(function(o,u){r+=n+e[o]+i+e.substring(o+1,t[u+1]?t[u+1]:e.length)}),r}},{key:"filter",value:function(e,t,n){var i=this;return n=n||{},t.reduce(function(t,r,o,u){var l=r;n.extract&&(l=n.extract(r),l||(l=""));var a=i.match(e,l,n);return null!=a&&(t[t.length]={string:a.rendered,score:a.score,index:o,original:r}),t},[]).sort(function(e,t){var n=t.score-e.score;return n?n:e.index-t.index})}}]),e}();n.default=o,t.exports=n.default},{}],6:[function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=e("./Tribute"),o=i(r);n.default=o.default,t.exports=n.default},{"./Tribute":1}],7:[function(e,t,n){"use strict";if(Array.prototype.find||(Array.prototype.find=function(e){if(null===this)throw new TypeError("Array.prototype.find called on null or undefined");if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var t,n=Object(this),i=n.length>>>0,r=arguments[1],o=0;o<i;o++)if(t=n[o],e.call(r,t,o,n))return t}),window&&"function"!=typeof window.CustomEvent){var i=function(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n};"undefined"!=typeof window.Event&&(i.prototype=window.Event.prototype),window.CustomEvent=i}},{}]},{},[6])(6)});

-//# sourceMappingURL=tribute.min.js.map
\ No newline at end of file
diff --git a/templates/base/footer.tmpl b/templates/base/footer.tmpl
index 07cbba7069..6570a6eaed 100644
--- a/templates/base/footer.tmpl
+++ b/templates/base/footer.tmpl
@@ -34,10 +34,6 @@
 		<script src='{{ URLJoin .RecaptchaURL "api.js"}}' async></script>
 	{{end}}
 {{end}}
-{{if .RequireTribute}}
-	<script src="{{StaticUrlPrefix}}/vendor/plugins/tribute/tribute.min.js"></script>
-{{end}}
-
 	<script src="{{StaticUrlPrefix}}/fomantic/semantic.min.js?v={{MD5 AppVer}}"></script>
 	<script src="{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}"></script>
 {{template "custom/footer" .}}
diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl
index eae2389238..8e58c07d23 100644
--- a/templates/base/head.tmpl
+++ b/templates/base/head.tmpl
@@ -119,10 +119,6 @@
 {{if .RequireSimpleMDE}}
 	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.css">
 {{end}}
-
-{{if .RequireTribute}}
-	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/tribute/tribute.css">
-{{end}}
 	<link rel="stylesheet" href="{{StaticUrlPrefix}}/fomantic/semantic.min.css?v={{MD5 AppVer}}">
 	<link rel="stylesheet" href="{{StaticUrlPrefix}}/css/index.css?v={{MD5 AppVer}}">
 	<noscript>
diff --git a/templates/pwa/serviceworker_js.tmpl b/templates/pwa/serviceworker_js.tmpl
index 32975e0fd5..a074879f3e 100644
--- a/templates/pwa/serviceworker_js.tmpl
+++ b/templates/pwa/serviceworker_js.tmpl
@@ -10,6 +10,7 @@ var urlsToCache = [
   '{{StaticUrlPrefix}}/js/swagger.js?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/js/dropzone.js',
   '{{StaticUrlPrefix}}/js/datetimepicker.js',
+  '{{StaticUrlPrefix}}/js/tribute.js',
   '{{StaticUrlPrefix}}/vendor/plugins/codemirror/addon/mode/loadmode.js',
   '{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/meta.js',
   '{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js',
@@ -24,7 +25,6 @@ var urlsToCache = [
   '{{StaticUrlPrefix}}/vendor/assets/font-awesome/css/font-awesome.min.css',
   '{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css',
   '{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.css',
-  '{{StaticUrlPrefix}}/vendor/plugins/tribute/tribute.css',
 {{if .IsSigned }}
 	{{ if ne .SignedUser.Theme "gitea" }}
 		'{{StaticUrlPrefix}}/css/theme-{{.SignedUser.Theme}}.css?v={{MD5 AppVer}}',
diff --git a/web_src/js/features/tribute.js b/web_src/js/features/tribute.js
index 30afb2b184..851ff74e57 100644
--- a/web_src/js/features/tribute.js
+++ b/web_src/js/features/tribute.js
@@ -1,61 +1,77 @@
 import {emojiKeys, emojiHTML, emojiString} from './emoji.js';
+import {uniq} from '../utils.js';
 
-export const issuesTribute = window.config.Tribute ? new Tribute({
-  values: window.config.tributeValues,
-  noMatchTemplate() { return null },
-  menuItemTemplate(item) {
-    const div = $('<div/>');
-    div.append($('<img/>', {src: item.original.avatar}));
-    div.append($('<span/>', {class: 'name'}).text(item.original.name));
-    if (item.original.fullname && item.original.fullname !== '') {
-      div.append($('<span/>', {class: 'fullname'}).text(item.original.fullname));
-    }
-    return div.html();
-  }
-}) : null;
-
-export const emojiTribute = window.config.Tribute ? new Tribute({
-  collection: [{
-    trigger: ':',
-    requireLeadingSpace: true,
-    values(query, cb) {
-      const matches = [];
-      for (const name of emojiKeys) {
-        if (name.includes(query)) {
-          matches.push(name);
-          if (matches.length > 5) break;
+function makeCollections({mentions, emoji}) {
+  const collections = [];
+
+  if (mentions) {
+    collections.push({
+      trigger: ':',
+      requireLeadingSpace: true,
+      values: (query, cb) => {
+        const matches = [];
+        for (const name of emojiKeys) {
+          if (name.includes(query)) {
+            matches.push(name);
+            if (matches.length > 5) break;
+          }
         }
+        cb(matches);
+      },
+      lookup: (item) => item,
+      selectTemplate: (item) => {
+        if (typeof item === 'undefined') return null;
+        return emojiString(item.original);
+      },
+      menuItemTemplate: (item) => {
+        return `<div class="tribute-item">${emojiHTML(item.original)}<span>${item.original}</span></div>`;
       }
-      cb(matches);
-    },
-    lookup(item) {
-      return item;
-    },
-    selectTemplate(item) {
-      if (typeof item === 'undefined') return null;
-      return emojiString(item.original);
-    },
-    menuItemTemplate(item) {
-      return `<div class="tribute-item">${emojiHTML(item.original)}<span>${item.original}</span></div>`;
-    }
-  }]
-}) : null;
-
-export function initTribute() {
-  if (!window.config.Tribute) return;
-
-  let content = document.getElementById('content');
-  if (content !== null) {
-    issuesTribute.attach(content);
+    });
   }
 
-  const emojiInputs = document.querySelectorAll('.emoji-input');
-  if (emojiInputs.length > 0) {
-    emojiTribute.attach(emojiInputs);
+  if (emoji) {
+    collections.push({
+      values: window.config.tributeValues,
+      noMatchTemplate: () => null,
+      menuItemTemplate: (item) => {
+        return `
+          <div class="tribute-item">
+            <img src="${item.original.avatar}"/>
+            <span class="name">${item.original.name}</span>
+            ${item.original.fullname && item.original.fullname !== '' ? `<span class="fullname">${item.original.fullname}</span>` : ''}
+          </div>
+        `;
+      }
+    });
   }
 
-  content = document.getElementById('content');
-  if (content !== null) {
-    emojiTribute.attach(document.getElementById('content'));
+  return collections;
+}
+
+export default async function attachTribute(elementOrNodeList, {mentions, emoji} = {}) {
+  if (!window.config.Tribute || !elementOrNodeList) return;
+  const nodes = Array.from('length' in elementOrNodeList ? elementOrNodeList : [elementOrNodeList]);
+  if (!nodes.length) return;
+
+  const mentionNodes = nodes.filter((node) => {
+    return mentions || node.id === 'content';
+  });
+  const emojiNodes = nodes.filter((node) => {
+    return emoji || node.id === 'content' || node.classList.contains('emoji-input');
+  });
+  const uniqueNodes = uniq([...mentionNodes, ...emojiNodes]);
+  if (!uniqueNodes.length) return;
+
+  const {default: Tribute} = await import(/* webpackChunkName: "tribute" */'tributejs');
+
+  const collections = makeCollections({
+    mentions: mentions || mentionNodes.length > 0,
+    emoji: emoji || emojiNodes.length > 0,
+  });
+
+  const tribute = new Tribute({collection: collections});
+  for (const node of uniqueNodes) {
+    tribute.attach(node);
   }
+  return tribute;
 }
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 4042924b6f..fdc5a926db 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -14,7 +14,7 @@ import initGitGraph from './features/gitgraph.js';
 import initClipboard from './features/clipboard.js';
 import initUserHeatmap from './features/userheatmap.js';
 import initDateTimePicker from './features/datetimepicker.js';
-import {initTribute, issuesTribute, emojiTribute} from './features/tribute.js';
+import attachTribute from './features/tribute.js';
 import createDropzone from './features/dropzone.js';
 import highlight from './features/highlight.js';
 import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
@@ -891,8 +891,7 @@ async function initRepository() {
       if ($editContentZone.html().length === 0) {
         $editContentZone.html($('#edit-content-form').html());
         $textarea = $editContentZone.find('textarea');
-        issuesTribute.attach($textarea.get());
-        emojiTribute.attach($textarea.get());
+        attachTribute($textarea.get(), {mentions: true, emoji: true});
 
         let dz;
         const $dropzone = $editContentZone.find('.dropzone');
@@ -1496,7 +1495,8 @@ function setCommentSimpleMDE($editArea) {
   $(simplemde.codemirror.getInputField()).addClass('js-quick-submit');
   simplemde.codemirror.setOption('extraKeys', {
     Enter: () => {
-      if (!(issuesTribute.isActive || emojiTribute.isActive)) {
+      const tributeContainer = document.querySelector('.tribute-container');
+      if (tributeContainer && tributeContainer.style.display !== 'none') {
         return CodeMirror.Pass;
       }
     },
@@ -1507,8 +1507,7 @@ function setCommentSimpleMDE($editArea) {
       cm.execCommand('delCharBefore');
     }
   });
-  issuesTribute.attach(simplemde.codemirror.getInputField());
-  emojiTribute.attach(simplemde.codemirror.getInputField());
+  attachTribute(simplemde.codemirror.getInputField(), {mentions: true, emoji: true});
   return simplemde;
 }
 
@@ -2431,7 +2430,6 @@ $(document).ready(async () => {
   initContextPopups();
   initNotificationsTable();
   initNotificationCount();
-  initTribute();
 
   // Repo clone url.
   if ($('#repo-clone-url').length > 0) {
@@ -2473,6 +2471,7 @@ $(document).ready(async () => {
   // parallel init of lazy-loaded features
   await Promise.all([
     highlight(document.querySelectorAll('pre code')),
+    attachTribute(document.querySelectorAll('#content, .emoji-input')),
     initGitGraph(),
     initClipboard(),
     initUserHeatmap(),
diff --git a/web_src/js/utils.js b/web_src/js/utils.js
index b511c9981d..b16b05a1b7 100644
--- a/web_src/js/utils.js
+++ b/web_src/js/utils.js
@@ -23,3 +23,8 @@ export function isObject(obj) {
 export function isDarkTheme() {
   return document.documentElement.classList.contains('theme-arc-green');
 }
+
+// removes duplicate elements in an array
+export function uniq(arr) {
+  return Array.from(new Set(arr));
+}
diff --git a/web_src/less/_tribute.less b/web_src/less/_tribute.less
index d0baaf51e1..5e91e00174 100644
--- a/web_src/less/_tribute.less
+++ b/web_src/less/_tribute.less
@@ -1,34 +1,29 @@
+@import "~tributejs/dist/tribute.css";
+
 .tribute-container {
-    box-shadow: 0 1px 3px 1px #c7c7c7;
-
-    ul {
-        background: #ffffff;
-    }
-
-    li {
-        padding: 8px 12px;
-        border-bottom: 1px solid #dcdcdc;
-
-        img {
-            display: inline-block;
-            vertical-align: middle;
-            width: 28px;
-            height: 28px;
-            margin-right: 5px;
-        }
-
-        span.fullname {
-            font-weight: normal;
-            font-size: .8rem;
-            margin-left: 3px;
-        }
-    }
-
-    li.highlight,
-    li:hover {
-        background: #2185d0;
-        color: #ffffff;
-    }
+    box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25);
+    border-radius: .25rem;
+}
+
+.tribute-container ul {
+    margin-top: 0 !important;
+    background: #ffffff !important;
+}
+
+.tribute-container li {
+    padding: 3px .5rem !important;
+}
+
+.tribute-container li span.fullname {
+    font-weight: normal;
+    font-size: .8rem;
+    margin-left: 3px;
+}
+
+.tribute-container li.highlight,
+.tribute-container li:hover {
+    background: #2185d0 !important;
+    color: #ffffff !important;
 }
 
 .tribute-item {
@@ -36,6 +31,12 @@
     align-items: center;
 }
 
-.tribute-item .emoji {
+.tribute-item .emoji,
+.tribute-item img[src*="/avatar/"] {
     margin-right: .5rem;
 }
+
+.tribute-container img {
+    width: 1.5rem !important;
+    height: 1.5rem !important;
+}
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index e893307c51..a79bbe1ec5 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -1625,3 +1625,16 @@ footer .container .links > * {
 .repository.release #release-list > li .detail .dot {
     background-color: #888;
 }
+
+.tribute-container {
+    box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .6);
+}
+
+.tribute-container ul {
+    background: #2d303b !important;
+}
+
+.tribute-container li.highlight,
+.tribute-container li:hover {
+    background: #728e5e !important;
+}