Abstract the jquery-textcomplete integration with EscapeActions

We now can re-use this integration in multiple places, this will be
useful for #342 for instance.

3 files changed, 32 insertions, 26 deletions

diff --git a/.meteor/versions b/.meteor/versions
index 672a85e8..f9e968c1 100644
--- a/.meteor/versions
+++ b/.meteor/versions
@@ -89,7 +89,7 @@ mquandalle:autofocus@1.0.0
 mquandalle:collection-mutations@0.1.0
 mquandalle:jade@0.4.3_1
 mquandalle:jade-compiler@0.4.3
-mquandalle:jquery-textcomplete@0.3.9_1
+mquandalle:jquery-textcomplete@0.8.0_1
 mquandalle:jquery-ui-drag-drop-sort@0.1.0
 mquandalle:moment@1.0.0
 mquandalle:mousetrap-bindglobal@0.0.1
diff --git a/client/components/main/editor.js b/client/components/main/editor.js
index 1d88fe74..67b65bec 100644
--- a/client/components/main/editor.js
+++ b/client/components/main/editor.js
@@ -1,11 +1,9 @@
-let dropdownMenuIsOpened = false;
-
 Template.editor.onRendered(() => {
   const $textarea = this.$('textarea');
 
   autosize($textarea);
 
-  $textarea.textcomplete([
+  $textarea.escapeableTextComplete([
     // Emojies
     {
       match: /\B:([\-+\w]*)$/,
@@ -44,30 +42,8 @@ Template.editor.onRendered(() => {
       index: 1,
     },
   ]);
-
-  // Since commit d474017 jquery-textComplete automatically closes a potential
-  // opened dropdown menu when the user press Escape. This behavior conflicts
-  // with our EscapeActions system, but it's too complicated and hacky to
-  // monkey-pach textComplete to disable it -- I tried. Instead we listen to
-  // 'open' and 'hide' events, and create a ghost escapeAction when the dropdown
-  // is opened (and rely on textComplete to execute the actual action).
-  $textarea.on({
-    'textComplete:show'() {
-      dropdownMenuIsOpened = true;
-    },
-    'textComplete:hide'() {
-      Tracker.afterFlush(() => {
-        dropdownMenuIsOpened = false;
-      });
-    },
-  });
 });
 
-EscapeActions.register('textcomplete',
-  () => {},
-  () => dropdownMenuIsOpened
-);
-
 // XXX I believe we should compute a HTML rendered field on the server that
 // would handle markdown, emojies and user mentions. We can simply have two
 // fields, one source, and one compiled version (in HTML) and send only the
diff --git a/client/lib/textComplete.js b/client/lib/textComplete.js
new file mode 100644
index 00000000..e50d7cbc
--- /dev/null
+++ b/client/lib/textComplete.js
@@ -0,0 +1,30 @@
+// We “inherit” the jquery-textcomplete plugin to integrate with our
+// EscapeActions system. You should always use `escapeableTextComplete` instead
+// of the vanilla `textcomplete`.
+let dropdownMenuIsOpened = false;
+
+$.fn.escapeableTextComplete = function(...args) {
+  this.textcomplete(...args);
+
+  // Since commit d474017 jquery-textComplete automatically closes a potential
+  // opened dropdown menu when the user press Escape. This behavior conflicts
+  // with our EscapeActions system, but it's too complicated and hacky to
+  // monkey-pach textComplete to disable it -- I tried. Instead we listen to
+  // 'open' and 'hide' events, and create a ghost escapeAction when the dropdown
+  // is opened (and rely on textComplete to execute the actual action).
+  this.on({
+    'textComplete:show'() {
+      dropdownMenuIsOpened = true;
+    },
+    'textComplete:hide'() {
+      Tracker.afterFlush(() => {
+        dropdownMenuIsOpened = false;
+      });
+    },
+  });
+};
+
+EscapeActions.register('textcomplete',
+  () => {},
+  () => dropdownMenuIsOpened
+);