feat: add support for dom element in template functions

Author: pranav-jindal-wingify

README.md

@@ -144,12 +144,12 @@ Collection object shown with defaults:
   // class added to each list item
   itemClass: '',
 
-  // function called on select that returns the content to insert
+  // function called on select that returns the content to insert (return dom string or dom node)
   selectTemplate: function (item) {
     return '@' + item.original.value;
   },
 
-  // template for displaying item in menu
+  // template for displaying item in menu (return dom string or dom node)
   menuItemTemplate: function (item) {
     return item.string;
   },

src/Tribute.js

@@ -395,7 +395,14 @@ class Tribute {
         if (this.menuSelected === index) {
           li.classList.add(this.current.collection.selectClass);
         }
-        li.innerHTML = this.current.collection.menuItemTemplate(item);
+        // remove all content in the li and append the content of menuItemTemplate
+        const menuItemDomOrString = this.current.collection.menuItemTemplate(item);
+        if (menuItemDomOrString instanceof Element) {
+          li.innerHTML = "";
+          li.appendChild(menuItemDomOrString);
+        } else {
+          li.innerHTML = menuItemDomOrString;
+        }
         fragment.appendChild(li);
       });
       ul.appendChild(fragment);

src/TributeRange.js

@@ -138,7 +138,12 @@ class TributeRange {
                 let textSuffix = typeof this.tribute.replaceTextSuffix == 'string'
                     ? this.tribute.replaceTextSuffix
                     : '\xA0'
-                text += textSuffix
+                if(text instanceof HTMLElement) {
+                    // skip adding suffix yet - TODO later
+                    // text.appendChild(this.getDocument().createTextNode(textSuffix))
+                } else {
+                    text += textSuffix
+                }
                 let endPos = info.mentionPosition + info.mentionText.length
                 if (!this.tribute.autocompleteMode) {
                     endPos += info.mentionTriggerChar.length
@@ -151,7 +156,7 @@ class TributeRange {
         }
     }
 
-    pasteHtml(html, startPos, endPos) {
+    pasteHtml(htmlOrElem, startPos, endPos) {
         let range, sel
         sel = this.getWindowSelection()
         range = this.getDocument().createRange()
@@ -160,7 +165,11 @@ class TributeRange {
         range.deleteContents()
 
         let el = this.getDocument().createElement('div')
-        el.innerHTML = html
+        if(htmlOrElem instanceof HTMLElement) {
+            el.appendChild(htmlOrElem)
+        } else {
+            el.innerHTML = htmlOrElem
+        }
         let frag = this.getDocument().createDocumentFragment(),
             node, lastNode
         while ((node = el.firstChild)) {
@@ -487,7 +496,7 @@ class TributeRange {
         div.appendChild(span0)
 
         if (element.nodeName === 'INPUT') {
-            div.textContent = div.textContent.replace(/\s/g, ' ')
+            div.textContent = div.textContent.replace(/\s/g, ' ')
         }
 
         //Create a span in the div that represents where the cursor

tributejs.d.ts

@@ -32,10 +32,10 @@ export type TributeCollection<T extends {}> = {
   itemClass?: string;
 
   // function called on select that returns the content to insert
-  selectTemplate?: (item: TributeItem<T>|undefined) => string;
+  selectTemplate?: (item: TributeItem<T>|undefined) => string | HTMLElement;
 
   // template for displaying item in menu
-  menuItemTemplate?: (item: TributeItem<T>) => string;
+  menuItemTemplate?: (item: TributeItem<T>) => string | HTMLElement;
 
   // template for when no match is found (optional),
   // If no template is provided, menu is hidden.
@@ -94,7 +94,7 @@ export type TributeCollection<T extends {}> = {
   closeOnScroll?: any
 };
 
-export type TributeOptions<T> =
+export type TributeOptions<T extends {}> =
   | TributeCollection<T>
   | {
       // pass an array of config objects