Introducing Action Button for Dropdown

README.md

@@ -72,13 +72,14 @@ const quill = new Quill('#editor', {
 | `mentionDenotationChars` | `["@"]`    | Specifies which characters will cause the mention autocomplete to open
 | `isolateCharacter`   | `false`        | Whether or not the denotation character(s) should be isolated. For example, to avoid mentioning in an email.
 | `fixMentionsToQuill` | `false`        | When set to true, the mentions menu will be rendered above or below the quill container. Otherwise, the mentions menu will track the denotation character(s);
+|`showDenotationChar` | `true` | Whether to show the used denotation character in the mention item or not
 | `defaultMenuOrientation` | `'bottom'` | Options are `'bottom'` and `'top'`. Determines what the default orientation of the menu will be. Quill-mention will attempt to render the menu either above or below the editor. If `'top'` is provided as a value, and there is not enough space above the editor, the menu will be rendered below. Vice versa, if there is not enough space below the editor, and `'bottom'` is provided as a value (or no value is provided at all), the menu will be rendered above the editor.
-| `dataAttributes`     | `['id', 'value', 'denotationChar', 'link', 'target']`  | A list of data values you wish to be passed from your list data to the html node. (`id, value, denotationChar, link, target` are included by default).
+| `dataAttributes`     | `['id', 'value', 'denotationChar', 'link', 'target', 'query']`  | A list of data values you wish to be passed from your list data to the html node. (`id, value, denotationChar, link, target, query` are included by default).
 | `onOpen`             | `function`     | Callback when mention dropdown is open.
 | `onClose`            | `function`     | Callback when mention dropdown is closed.
+|`onSelect(item, insertItem)` | `function` | Callback for a selected item. When overriding this method, `insertItem` should be used to insert `item` to the editor. This makes async requests possible.
 | `linkTarget`         | `'_blank'`       | Link target for mentions with a link
 
-
 ## Authors
 
 **Fredrik Sundqvist** ([MadSpindel](https://github.com/MadSpindel))

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-onselect"></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>
@@ -30,6 +35,11 @@ <h1>Quill Mention Demo</h1>
       border-radius: 6px;
     }
 
+    .ql-editor-disabled {
+      border-radius: 6px;
+      background-color: #fafafa;
+    }
+
     .ql-editor:focus {
       border: 1px solid #025FAE;
     }
@@ -61,7 +71,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,19 +89,78 @@ <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);
+            } 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);
+            }
+          },
+        },
+      }
+    });
+
+    disable = function(id, value) {
+      const editor = document.getElementById(id);
+      if (value === false) {
+        quillAction.enable(true);
+        editor.classList.remove('ql-editor-disabled');
+      } else {
+        quillAction.enable(false);
+        editor.classList.add('ql-editor-disabled');
+      }
+    };
+
+    let quillAction = null;
+
+    quillAction = new Quill('#editor-onselect', {
+      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;
+          },
+          onSelect(data, insertItem) {
+            if (data.hasOwnProperty('query')) {
+              disable('editor-onselect', true);
+              document.getElementById('action-data').innerHTML = `<span>Creating: ${data.query}</span>`;
+              setTimeout(() => {
+                insertItem({"id": "fake-id", "value": data.query});
+                disable('editor-onselect', false);
+              }, 1000);
+            } else {
+              insertItem(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]);
+              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);
             }
+
           },
         },
       }

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}`;
       },
+      onSelect(item, insertItem) {
+        insertItem(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() {
@@ -170,9 +173,23 @@ class Mention {
 
   selectItem() {
     const data = this.getItemData();
+    this.options.onSelect(data, (asyncData) => {
+      this.insertItem(asyncData);
+    });
+    this.hideMentionList();
+  }
+
+  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 +232,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);