Update converse-autocomplete to make it more flexible

* Accepts other triggers besides tab or @
* More finegrained control over whether the triggering char is
  included in the returned value or not.

dist/converse.js

@@ -47944,6 +47944,9 @@ const _converse$env = _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_
       _ = _converse$env._,
       Backbone = _converse$env.Backbone,
       u = _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].env.utils;
+const KEYCODES_MAP = {
+  '@': 50
+};
 _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins.add("converse-autocomplete", {
   initialize() {
     const _converse = this._converse;
@@ -48002,14 +48005,15 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins
         _.assignIn(this, {
           'match_current_word': false,
           // Match only the current word, otherwise all input is matched
-          'match_on_tab': false,
-          // Whether matching should only start when tab's pressed
-          'trigger_on_at': false,
-          // Whether @ should trigger autocomplete
+          'trigger_keycodes': [],
+          // Array of keycodes that will trigger auto-complete
+          'include_triggers': [],
+          // Array of trigger keycodes which should be included in the returned value
           'min_chars': 2,
           'max_items': 10,
           'auto_evaluate': true,
           'auto_first': false,
+          // Should the first element be automatically selected?
           'data': _.identity,
           'filter': _converse.FILTER_CONTAINS,
           'sort': config.sort === false ? false : SORT_BYLENGTH,
@@ -48241,10 +48245,11 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins
           return;
         }
 
-        if (this.match_on_tab && ev.keyCode === _converse.keycodes.TAB) {
-          ev.preventDefault();
-          this.auto_completing = true;
-        } else if (this.trigger_on_at && ev.keyCode === _converse.keycodes.AT) {
+        if (this.trigger_keycodes.includes(ev.keyCode)) {
+          if (ev.keyCode === _converse.keycodes.TAB) {
+            ev.preventDefault();
+          }
+
           this.auto_completing = true;
         }
       }
@@ -48265,7 +48270,7 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins
         let value = this.match_current_word ? u.getCurrentWord(this.input) : this.input.value;
         let ignore_min_chars = false;
 
-        if (this.trigger_on_at && value.startsWith('@')) {
+        if (this.trigger_keycodes.includes(KEYCODES_MAP[value[0]]) && !this.include_triggers.includes(ev.keyCode)) {
           ignore_min_chars = true;
           value = value.slice('1');
         }
@@ -53976,7 +53981,7 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
         this.renderHeading();
         this.renderChatArea();
         this.renderMessageForm();
-        this.initAutoComplete();
+        this.initMentionAutoComplete();
 
         if (this.model.get('connection_status') !== _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].ROOMSTATUS.ENTERED) {
           this.showSpinner();
@@ -54006,19 +54011,19 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
         return this;
       },
 
-      initAutoComplete() {
+      initMentionAutoComplete() {
         this.auto_complete = new _converse.AutoComplete(this.el, {
           'auto_first': true,
           'auto_evaluate': false,
           'min_chars': 1,
           'match_current_word': true,
-          'match_on_tab': true,
           'list': () => this.model.occupants.map(o => ({
             'label': o.getDisplayName(),
             'value': `@${o.getDisplayName()}`
           })),
           'filter': _converse.FILTER_STARTSWITH,
-          'trigger_on_at': true
+          'trigger_keycodes': [_converse.keycodes.AT, _converse.keycodes.TAB],
+          'include_triggers': []
         });
         this.auto_complete.on('suggestion-box-selectcomplete', () => this.auto_completing = false);
       },

src/converse-autocomplete.js

@@ -13,6 +13,9 @@ import converse from "@converse/headless/converse-core";
 const { _, Backbone } = converse.env,
       u = converse.env.utils;
 
+const KEYCODES_MAP = {
+    '@': 50
+}
 
 converse.plugins.add("converse-autocomplete", {
 
@@ -73,12 +76,12 @@ converse.plugins.add("converse-autocomplete", {
 
                 _.assignIn(this, {
                     'match_current_word': false, // Match only the current word, otherwise all input is matched
-                    'match_on_tab': false, // Whether matching should only start when tab's pressed
-                    'trigger_on_at': false, // Whether @ should trigger autocomplete
+                    'trigger_keycodes': [], // Array of keycodes that will trigger auto-complete
+                    'include_triggers': [], // Array of trigger keycodes which should be included in the returned value
                     'min_chars': 2,
                     'max_items': 10,
                     'auto_evaluate': true,
-                    'auto_first': false,
+                    'auto_first': false, // Should the first element be automatically selected?
                     'data': _.identity,
                     'filter': _converse.FILTER_CONTAINS,
                     'sort': config.sort === false ? false : SORT_BYLENGTH,
@@ -291,10 +294,11 @@ converse.plugins.add("converse-autocomplete", {
                         , ev.keyCode)) {
                     return;
                 }
-                if (this.match_on_tab && ev.keyCode === _converse.keycodes.TAB) {
-                    ev.preventDefault();
-                    this.auto_completing = true;
-                } else if (this.trigger_on_at && ev.keyCode === _converse.keycodes.AT) {
+
+                if (this.trigger_keycodes.includes(ev.keyCode)) {
+                    if (ev.keyCode === _converse.keycodes.TAB) {
+                        ev.preventDefault();
+                    }
                     this.auto_completing = true;
                 }
             }
@@ -316,7 +320,7 @@ converse.plugins.add("converse-autocomplete", {
                 let value = this.match_current_word ? u.getCurrentWord(this.input) : this.input.value;
 
                 let ignore_min_chars = false;
-                if (this.trigger_on_at && value.startsWith('@')) {
+                if (this.trigger_keycodes.includes(KEYCODES_MAP[value[0]]) && !this.include_triggers.includes(ev.keyCode)) {
                     ignore_min_chars = true;
                     value = value.slice('1');
                 }

src/converse-muc-views.js

@@ -560,7 +560,7 @@ converse.plugins.add('converse-muc-views', {
                 this.renderHeading();
                 this.renderChatArea();
                 this.renderMessageForm();
-                this.initAutoComplete();
+                this.initMentionAutoComplete();
                 if (this.model.get('connection_status') !== converse.ROOMSTATUS.ENTERED) {
                     this.showSpinner();
                 }
@@ -587,16 +587,16 @@ converse.plugins.add('converse-muc-views', {
                 return this;
             },
 
-            initAutoComplete () {
+            initMentionAutoComplete () {
                 this.auto_complete = new _converse.AutoComplete(this.el, {
                     'auto_first': true,
                     'auto_evaluate': false,
                     'min_chars': 1,
                     'match_current_word': true,
-                    'match_on_tab': true,
                     'list': () => this.model.occupants.map(o => ({'label': o.getDisplayName(), 'value': `@${o.getDisplayName()}`})),
                     'filter': _converse.FILTER_STARTSWITH,
-                    'trigger_on_at': true
+                    'trigger_keycodes': [_converse.keycodes.AT, _converse.keycodes.TAB],
+                    'include_triggers': []
                 });
                 this.auto_complete.on('suggestion-box-selectcomplete', () => (this.auto_completing = false));
             },