Introducing Action Button for Dropdown

src/index.html

@@ -14,8 +14,13 @@
   <h1>Quill Mention Demo</h1>
 
   <!-- Create the editor container -->
+  <h2>Basic</h2>
   <div id="editor"></div>
 
+  <h2>Optional Action Button</h2>
+  <div id="editor-action-button"></div>
+  <div id="action-data" style="margin: 8px;"></div>
+
   <!-- Include the Quill library -->
   <script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
   <script src="quill.mention.min.js"></script>
@@ -61,7 +66,13 @@ <h1>Quill Mention Demo</h1>
       { "id": "5a97b2a4436c2c9acc6b5ad2", "value": "Maria Cruiser", "myCustomProperty": "custom value" },
       { "id": "5a97b2a4436c2c9acc6b5ad3", "value": "Pablo Escobeer", "myCustomProperty": "custom value" },
       { "id": "5a97b2a4436c2c9acc6b5ad4", "value": "Richard Schmidt", "myCustomProperty": "custom value" }
-    ]
+    ];
+
+    const actionValues = [
+        {"id": "1", "value": "Porsche"},
+        {"id": "1", "value": "Volkswagen"},
+        {"id": "1", "value": "BMW"},
+    ];
 
     var quill = new Quill('#editor', {
       modules: {
@@ -73,23 +84,69 @@ <h1>Quill Mention Demo</h1>
             let values;
 
             if (mentionChar === "@") {
-              values = atValues;
+                values = atValues;
             } else {
-              values = hashValues;
+                values = hashValues;
             }
 
             if (searchTerm.length === 0) {
-              renderList(values, searchTerm);
+                renderList(values, searchTerm);
             } else {
-              const matches = [];
-              for (i = 0; i < values.length; i++)
-                if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) matches.push(values[i]);
-              renderList(matches, searchTerm);
+                const matches = [];
+                for (i = 0; i < values.length; i++)
+                    if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) matches.push(values[i]);
+                renderList(matches, searchTerm);
             }
           },
         },
       }
     });
+
+    var quillAction = new Quill('#editor-action-button', {
+        modules: {
+            mention: {
+                allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
+                mentionDenotationChars: ["@", "#"],
+                showDenotationChar: false,
+                dataAttributes: ['myCustomProperty'],
+                renderItem(item, searchTerm) {
+                    if (item.hasOwnProperty('query')) {
+                        return `<div>Create \"<i>${searchTerm}</i>\"</div>`;
+                    }
+                    return item.value;
+                },
+                beforeInsert(data, insertItem) {
+                    if (data.hasOwnProperty('query')) {
+                        document.getElementById('action-data').innerHTML = `<span>Server request: ${data.query}</span>`;
+
+                        setTimeout(() => {
+                            insertItem({"id": "fake-id", "value": data.query})
+                        }, 1000);
+
+                        return null;
+                    }
+                    return data;
+                },
+                source: function (searchTerm, renderList, mentionChar) {
+                    let values = actionValues;
+
+                    if (searchTerm.length === 0) {
+                        renderList(values, searchTerm);
+                    } else {
+                        const matches = [];
+                        for (i = 0; i < values.length; i++) {
+                            if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) {
+                                matches.push(values[i])
+                            }
+                        }
+                        matches.push({"query": searchTerm});
+                        renderList(matches, searchTerm);
+                    }
+
+                },
+            },
+        }
+    });
   </script>
 
 </body>

src/quill.mention.css

@@ -27,6 +27,21 @@
   text-decoration: none;
 }
 
+.ql-mention-list-item-action {
+  color: white;
+  background-color: #456789;
+  cursor: pointer;
+  height: 44px;
+  line-height: 44px;
+  font-size: 16px;
+  padding: 0 20px;
+  vertical-align: middle;
+}
+
+.ql-mention-list-item-action.selected {
+  background-color: #345678;
+}
+
 .mention {
   height: 24px;
   width: 65px;

src/quill.mention.js

@@ -21,7 +21,11 @@ class Mention {
       renderItem(item, searchTerm) {
         return `${item.value}`;
       },
+      beforeInsert(item, insertItem) {
+        return item;
+      },
       mentionDenotationChars: ['@'],
+      showDenotationChar: true,
       allowedChars: /^[a-zA-Z0-9_]*$/,
       minChars: 0,
       maxChars: 31,
@@ -30,14 +34,14 @@ class Mention {
       isolateCharacter: false,
       fixMentionsToQuill: false,
       defaultMenuOrientation: 'bottom',
-      dataAttributes: ['id', 'value', 'denotationChar', 'link', 'target'],
+      dataAttributes: ['id', 'value', 'denotationChar', 'link', 'target', 'query'],
       linkTarget: '_blank',
       onOpen() {
         return true;
       },
       onClose() {
         return true;
-      }
+      },
     };
 
     Object.assign(this.options, options, {
@@ -124,7 +128,6 @@ class Mention {
     this.mentionContainer.style.display = '';
     this.setMentionContainerPosition();
     this.setIsOpen(true);
-
   }
 
   hideMentionList() {
@@ -169,10 +172,29 @@ class Mention {
   }
 
   selectItem() {
-    const data = this.getItemData();
+    const tmpData = this.getItemData();
+    const data = this.options.beforeInsert(
+      tmpData,
+      (asyncData) => {
+        const toInsert = asyncData;
+        toInsert.denotationChar = tmpData.denotationChar;
+        this.insertItem(toInsert);
+      },
+    );
+    this.insertItem(data);
+  }
+
+  insertItem(data) {
+    const render = data;
+    if (render === null) {
+      return;
+    }
+    if (!this.options.showDenotationChar) {
+      render.denotationChar = '';
+    }
     this.quill
       .deleteText(this.mentionCharPos, this.cursorPos - this.mentionCharPos, Quill.sources.API);
-    this.quill.insertEmbed(this.mentionCharPos, 'mention', data, Quill.sources.API);
+    this.quill.insertEmbed(this.mentionCharPos, 'mention', render, Quill.sources.API);
     this.quill.insertText(this.mentionCharPos + 1, ' ', Quill.sources.API);
     this.quill.setSelection(this.mentionCharPos + 2, Quill.sources.API);
     this.hideMentionList();
@@ -215,9 +237,17 @@ class Mention {
     if (data && data.length > 0) {
       this.values = data;
       this.mentionList.innerHTML = '';
+
       for (let i = 0; i < data.length; i += 1) {
+        const { query } = data[i];
+        let className;
+        if (query === null || query === undefined) {
+          className = 'ql-mention-list-item';
+        } else {
+          className = 'ql-mention-list-item-action';
+        }
         const li = document.createElement('li');
-        li.className = 'ql-mention-list-item';
+        li.className = className;
         li.dataset.index = i;
         li.innerHTML = this.options.renderItem(data[i], searchTerm);
         li.onmouseenter = this.onItemMouseEnter.bind(this);