Get selected word from cursor positionselectable-autocomplete-dropdown

2 files changed, 54 insertions, 0 deletions

diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
index bd3c4240f13..e690f91fade 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -23,6 +23,7 @@
 
     bindEvents() {
       this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);
+      this.getWordFromCursorPositionWrapper = this.getWordFromCursorPosition.bind(this);
       this.toggleClearSearchButtonWrapper = this.toggleClearSearchButton.bind(this);
       this.checkForEnterWrapper = this.checkForEnter.bind(this);
       this.clearSearchWrapper = this.clearSearch.bind(this);
@@ -32,6 +33,7 @@
       this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper);
       this.filteredSearchInput.addEventListener('keydown', this.checkForEnterWrapper);
       this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper);
+      this.filteredSearchInput.addEventListener('click', this.getWordFromCursorPositionWrapper);
       this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
     }
 
@@ -40,6 +42,7 @@
       this.filteredSearchInput.removeEventListener('input', this.toggleClearSearchButtonWrapper);
       this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper);
       this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper);
+      this.filteredSearchInput.removeEventListener('click', this.getWordFromCursorPositionWrapper);
       this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
     }
 
@@ -80,6 +83,35 @@
       this.dropdownManager.resetDropdowns();
     }
 
+    getWordFromCursorPosition() {
+      const value = this.filteredSearchInput.value;
+      const cursorPosition = gl.utils.getCursorPosition(this.filteredSearchInput);
+
+      const left = value.slice(0, cursorPosition);
+      const right = value.slice(cursorPosition);
+
+      // Extracts all the labels and search terms
+      const regex = /((\w+):([~%@]?)(?:('[^']*'{0,1})|("[^"]*"{0,1})|(\S+)))|(\S+)/g;
+      const leftTokens = left.match(regex) || [];
+      const rightTokens = right.match(regex) || [];
+      const tokens = value.match(regex);
+      let selectedToken = null;
+
+      // Clean split down the middle
+      if (leftTokens.concat(rightTokens).join() === tokens.join()) {
+        selectedToken = leftTokens.slice(-1)[0] || tokens[0];
+      } else {
+        let i = 0;
+        while (i < tokens.length && !selectedToken) {
+          if (leftTokens[i] !== tokens[i]) {
+            selectedToken = tokens[i];
+          }
+          i += 1;
+        }
+      }
+      console.log(selectedToken);
+    }
+
     loadSearchParamsFromURL() {
       const params = gl.utils.getUrlParamsArray();
       const inputValues = [];
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 27f2f4a41eb..0edf1dae165 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -145,6 +145,28 @@
       return decodeURIComponent(results[2].replace(/\+/g, ' '));
     };
 
+    gl.utils.getCursorPosition = function(input) {
+      var cursorPosition = 0;
+
+      // IE Support
+      if (document.selection) {
+        input.focus();
+
+        // To get cursor position, get empty selection range
+        var range = document.selection.createRange();
+
+        // Move selection start to 0 position
+        range.moveStart('character', -1 * input.value.length);
+
+        // The cursor position is selection length
+        cursorPosition = range.text.length;
+      } else if (input.selectionStart || input.selectionStart === '0') {
+        cursorPosition = input.selectionStart;
+      }
+
+      return cursorPosition;
+    };
+
     gl.utils.isMetaKey = function(e) {
       return e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
     };