feat: Custom empty message when no completion found (#5158)

Empty message for no completion suggestions

Author: oykuyilmaz

ace.d.ts

@@ -1054,8 +1054,11 @@ export namespace Ace {
     constructor();
     autoInsert?: boolean;
     autoSelect?: boolean;
+    autoShown?: boolean;
     exactMatch?: boolean;
     inlineEnabled?: boolean;
+    parentNode?: HTMLElement;
+    emptyMessage?(prefix: String): String;
     getPopup(): AcePopup;
     showPopup(editor: Editor, options: CompletionOptions): void;
     detach(): void;

src/autocomplete.js

@@ -55,10 +55,12 @@ class Autocomplete {
     constructor() {
         this.autoInsert = false;
         this.autoSelect = true;
+        this.autoShown = false;
         this.exactMatch = false;
         this.inlineEnabled = false;
         this.keyboardHandler = new HashHandler();
         this.keyboardHandler.bindKeys(this.commands);
+        this.parentNode = null;
 
         this.blurListener = this.blurListener.bind(this);
         this.changeListener = this.changeListener.bind(this);
@@ -73,7 +75,7 @@ class Autocomplete {
     }
 
     $init() {
-        this.popup = new AcePopup(document.body || document.documentElement);
+        this.popup = new AcePopup(this.parentNode || document.body || document.documentElement); 
         this.popup.on("click", function(e) {
             this.insertMatch();
             e.stop();
@@ -255,6 +257,8 @@ class Autocomplete {
             data = this.popup.getData(this.popup.getRow());
         if (!data)
             return false;
+        if (data.value === "") // Explicitly given nothing to insert, e.g. "No suggestion state"
+            return this.detach();
         var completions = this.completions;
         var result = this.getCompletionProvider().insertMatch(this.editor, data, completions.filterText, options);
         // detach only if new popup was not opened while inserting match
@@ -341,15 +345,28 @@ class Autocomplete {
 
             if (finished) {
                 // No results
-                if (!filtered.length)
+                if (!filtered.length) {
+                    var emptyMessage = !this.autoShown && this.emptyMessage;
+                    if ( typeof emptyMessage == "function")
+                          emptyMessage = this.emptyMessage(prefix);
+                    if (emptyMessage) {
+                        var completionsForEmpty = [{
+                            caption: this.emptyMessage(prefix),
+                            value: ""
+                        }];
+                        this.completions = new FilteredList(completionsForEmpty);
+                        this.openPopup(this.editor, prefix, keepPopupPosition);
+                        return;
+                    }
                     return this.detach();
+                }
 
                 // One result equals to the prefix
                 if (filtered.length == 1 && filtered[0].value == prefix && !filtered[0].snippet)
                     return this.detach();
 
                 // Autoinsert if one result
-                if (this.autoInsert && filtered.length == 1)
+                if (this.autoInsert && !this.autoShown && filtered.length == 1)
                     return this.insertMatch(filtered[0]);
             }
             this.completions = completions;
@@ -408,7 +425,8 @@ class Autocomplete {
         }
 
         if (!tooltipNode.parentNode)
-            document.body.appendChild(tooltipNode);
+            this.popup.container.appendChild(this.tooltipNode);
+
         var popup = this.popup;
         var rect = popup.container.getBoundingClientRect();
         tooltipNode.style.top = popup.container.style.top;
@@ -525,6 +543,7 @@ Autocomplete.startCommand = {
         var completer = Autocomplete.for(editor);
         completer.autoInsert = false;
         completer.autoSelect = true;
+        completer.autoShown = false;
         completer.showPopup(editor, options);
         // prevent ctrl-space opening context menu on firefox on mac
         completer.cancelContextMenu();

src/autocomplete/popup.js

@@ -42,8 +42,9 @@ class AcePopup {
         var el = dom.createElement("div");
         var popup = new $singleLineEditor(el);
 
-        if (parentNode)
+        if (parentNode) {
             parentNode.appendChild(el);
+        }
         el.style.display = "none";
         popup.renderer.content.style.cursor = "default";
         popup.renderer.setStyle("ace_autocomplete");

src/autocomplete_test.js

@@ -7,8 +7,10 @@ if (typeof process !== "undefined") {
 var sendKey = require("./test/user").type;
 var ace = require("./ace");
 var assert = require("./test/assertions");
+var user = require("./test/user");
 var Range = require("./range").Range;
 require("./ext/language_tools");
+var Autocomplete = require("./autocomplete").Autocomplete;
 
 function initEditor(value) {
     var editor = ace.edit(null, {
@@ -174,16 +176,16 @@ module.exports = {
         var popup = editor.completer.popup;
         check(function () {
             assert.equal(popup.data.length, 4);
-            assert.equal(document.body.lastChild.innerHTML, firstDoc);
+            assert.equal(popup.container.lastChild.innerHTML, firstDoc);
             sendKey("Down");
             check(function () {
-                assert.equal(document.body.lastChild.innerHTML, secondDoc);
+                assert.equal(popup.container.lastChild.innerHTML, secondDoc);
                 sendKey("Down");
                 check(function () {
-                    assert.equal(document.body.lastChild.innerHTML, firstDoc);
+                    assert.equal(popup.container.lastChild.innerHTML, firstDoc);
                     sendKey("Down");
                     check(function () {
-                        assert.equal(document.body.lastChild.innerHTML, secondDoc);
+                        assert.equal(popup.container.lastChild.innerHTML, secondDoc);
                         editor.destroy();
                         editor.container.remove();
                         done();
@@ -246,6 +248,24 @@ module.exports = {
             editor.container.remove();
             done();
         }, 10);
+    },
+    "test: empty message if no suggestions available": function(done) {
+        var editor = initEditor("");
+        var emptyMessageText = "No suggestions.";
+        var autocomplete = Autocomplete.for(editor);
+        autocomplete.emptyMessage = () => emptyMessageText;
+
+        user.type("thereisnoautosuggestionforthisword");
+
+        // Open autocompletion via key-binding and verify empty message
+        user.type("Ctrl-Space");
+        assert.equal(editor.completer.popup.isOpen, true);
+        assert.equal(editor.completer.popup.data[0].caption, emptyMessageText);
+
+        user.type("Return");
+        assert.equal(editor.completer.popup.isOpen, false);
+
+        done();
     }
 };
 

src/ext/language_tools.js

@@ -146,8 +146,8 @@ var doLiveAutocomplete = function(e) {
         // Only autocomplete if there's a prefix that can be matched
         if (prefix && !hasCompleter) {
             var completer = Autocomplete.for(editor);
-            // Disable autoInsert
-            completer.autoInsert = false;
+            // Set a flag for auto shown
+            completer.autoShown = true;
             completer.showPopup(editor);
         }
     }