improve completion right alignment

ajaxorg · May 11, 2023 · 9373ddf · 9373ddf
1 parent f69c203
commit 9373ddf
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/autocomplete/popup.js b/src/autocomplete/popup.js
@@ -201,6 +201,7 @@ class AcePopup {
             }
             addToken(caption.slice(lastIndex, caption.length), "");
 
+            tokens.push({type: "completion-spacer", value: " "});
             if (data.meta)
                 tokens.push({type: "completion-meta", value: data.meta});
             if (data.message)
@@ -236,7 +237,7 @@ class AcePopup {
             return selectionMarker.start.row;
         };
         popup.setRow = function(line) {
-            line = Math.max(this.autoSelect ? 0 : -1, Math.min(this.data.length, line));
+            line = Math.max(this.autoSelect ? 0 : -1, Math.min(this.data.length - 1, line));
             if (selectionMarker.start.row != line) {
                 popup.selection.clearSelection();
                 selectionMarker.start.row = selectionMarker.end.row = line || 0;
@@ -441,9 +442,8 @@ dom.importCssString(`
 .ace_autocomplete_right .ace_line {
     display: flex;
 }
-.ace_autocomplete_right .ace_completion-meta {
+.ace_autocomplete_right .ace_completion-spacer {
     flex: 1;
-    text-align: right;
 }
 `, "autocompletion.css", false);
 

diff --git a/src/autocomplete_test.js b/src/autocomplete_test.js
@@ -5,6 +5,7 @@ if (typeof process !== "undefined") {
 "use strict";
 
 var sendKey = require("./test/user").type;
+var {buildDom} = require("./lib/dom");
 var ace = require("./ace");
 var assert = require("./test/assertions");
 var Range = require("./range").Range;
@@ -34,16 +35,16 @@ module.exports = {
         assert.ok(!editor.container.querySelector("style"));
 
         sendKey("a");
-        checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize="2" aria-posinset="0"><s "ace_completion-highlight">a</s><s "ace_">rraysort</s><s "ace_completion-meta">local</s></d><d "ace_line"><s "ace_completion-highlight">a</s><s "ace_">looooooooooooooooooooooooooooong_word</s><s "ace_completion-meta">local</s></d>', function() {
+        checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize="2" aria-posinset="0"><s "ace_completion-highlight">a</s><s "ace_">rraysort</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d><d "ace_line"><s "ace_completion-highlight">a</s><s "ace_">looooooooooooooooooooooooooooong_word</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
             sendKey("rr");
-            checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize="1" aria-posinset="0"><s "ace_completion-highlight">arr</s><s "ace_">aysort</s><s "ace_completion-meta">local</s></d>', function() {
+            checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize="1" aria-posinset="0"><s "ace_completion-highlight">arr</s><s "ace_">aysort</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
                 sendKey("r");
-                checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize="1" aria-posinset="0"><s "ace_completion-highlight">arr</s><s "ace_">ayso</s><s "ace_completion-highlight">r</s><s "ace_">t</s><s "ace_completion-meta">local</s></d>', function() {
+                checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize="1" aria-posinset="0"><s "ace_completion-highlight">arr</s><s "ace_">ayso</s><s "ace_completion-highlight">r</s><s "ace_">t</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
 
                     sendKey("Return");
                     assert.equal(editor.getValue(), "arraysort\narraysort alooooooooooooooooooooooooooooong_word");
                     editor.execCommand("insertstring", " looooooooooooooooooooooooooooong_");
-                    checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="alooooooooooooooooooooooooooooong_word" aria-setsize="1" aria-posinset="0"><s "ace_">a</s><s "ace_completion-highlight">looooooooooooooooooooooooooooong_</s><s "ace_">word</s><s "ace_completion-meta">local</s></d>', function() {
+                    checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="alooooooooooooooooooooooooooooong_word" aria-setsize="1" aria-posinset="0"><s "ace_">a</s><s "ace_completion-highlight">looooooooooooooooooooooooooooong_</s><s "ace_">word</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
                         sendKey("Return");
                         editor.destroy();
                         editor.container.remove();
@@ -230,7 +231,7 @@ module.exports = {
             assert.equal(editor.completer.popup.renderer.scrollTop, 0);
             editor.completer.popup.renderer.$loop._flush();
             assert.equal(editor.completer.popup.renderer.scrollTop, 0);
-            assert.equal(editor.completer.popup.renderer.scroller.textContent, "some");
+            assert.equal(editor.completer.popup.renderer.scroller.textContent, "some ");
             sendKey("Return");
             assert.equal(editor.getValue(), "some");
             sendKey(" ");