@codemirror/autocomplete 6.19.1 → 6.20.1

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 6.20.1 (2026-03-02)
+
+### Bug fixes
+
+Clicking the horizontal dots at the top/bottom of a list of completion options now moves the selection there, so that more completions become visible.
+## 6.20.0 (2025-11-20)
+
+### New features
+
+Completions now support a `sortText` property to influence sort order.
+
 ## 6.19.1 (2025-10-23)
 
 ### Bug fixes

package/dist/index.cjs

@@ -391,7 +391,7 @@ const completionConfig = state.Facet.define({
             addToOptions: [],
             positionInfo: defaultPositionInfo,
             filterStrict: false,
-            compareCompletions: (a, b) => a.label.localeCompare(b.label),
+            compareCompletions: (a, b) => (a.sortText || a.label).localeCompare(b.sortText || b.label),
             interactionDelay: 75,
             updateSyncTime: 100
         }, {
@@ -441,6 +441,7 @@ function defaultPositionInfo(view$1, list, option, info, space, tooltip) {
     };
 }
 
+const setSelectedEffect = state.StateEffect.define();
 function optionContent(config) {
     let content = config.addToOptions.slice();
     if (config.icons)
@@ -532,6 +533,16 @@ class CompletionTooltip {
                     return;
                 }
             }
+            if (e.target == this.list) {
+                let move = this.list.classList.contains("cm-completionListIncompleteTop") &&
+                    e.clientY < this.list.firstChild.getBoundingClientRect().top ? this.range.from - 1 :
+                    this.list.classList.contains("cm-completionListIncompleteBottom") &&
+                        e.clientY > this.list.lastChild.getBoundingClientRect().bottom ? this.range.to : null;
+                if (move != null) {
+                    view.dispatch({ effects: setSelectedEffect.of(move) });
+                    e.preventDefault();
+                }
+            }
         });
         this.dom.addEventListener("focusout", (e) => {
             let state = view.state.field(this.stateField, false);
@@ -1033,7 +1044,6 @@ function checkValid(validFor, state, from, to) {
 const setActiveEffect = state.StateEffect.define({
     map(sources, mapping) { return sources.map(s => s.map(mapping)); }
 });
-const setSelectedEffect = state.StateEffect.define();
 const completionState = state.StateField.define({
     create() { return CompletionState.start(); },
     update(value, tr) { return value.update(tr); },
@@ -1767,7 +1777,8 @@ A completion source that will scan the document for words (using a
 return those as completions.
 */
 const completeAnyWord = context => {
-    let wordChars = context.state.languageDataAt("wordChars", context.pos).join("");
+    var _a;
+    let wordChars = (_a = context.state.languageDataAt("wordChars", context.pos)[0]) !== null && _a !== void 0 ? _a : "";
     let re = wordRE(wordChars);
     let token = context.matchBefore(mapRE(re, s => s + "$"));
     if (!token && !context.explicit)

package/dist/index.d.cts

@@ -21,6 +21,11 @@ interface Completion {
     */
     displayLabel?: string;
     /**
+    Overrides the text that is used to sort completions. Will
+    default to `label` if not given.
+    */
+    sortText?: string;
+    /**
     An optional short piece of information to show (with a different
     style) after the label.
     */

package/dist/index.d.ts

@@ -21,6 +21,11 @@ interface Completion {
     */
     displayLabel?: string;
     /**
+    Overrides the text that is used to sort completions. Will
+    default to `label` if not given.
+    */
+    sortText?: string;
+    /**
     An optional short piece of information to show (with a different
     style) after the label.
     */

package/dist/index.js

@@ -389,7 +389,7 @@ const completionConfig = /*@__PURE__*/Facet.define({
             addToOptions: [],
             positionInfo: defaultPositionInfo,
             filterStrict: false,
-            compareCompletions: (a, b) => a.label.localeCompare(b.label),
+            compareCompletions: (a, b) => (a.sortText || a.label).localeCompare(b.sortText || b.label),
             interactionDelay: 75,
             updateSyncTime: 100
         }, {
@@ -439,6 +439,7 @@ function defaultPositionInfo(view, list, option, info, space, tooltip) {
     };
 }
 
+const setSelectedEffect = /*@__PURE__*/StateEffect.define();
 function optionContent(config) {
     let content = config.addToOptions.slice();
     if (config.icons)
@@ -530,6 +531,16 @@ class CompletionTooltip {
                     return;
                 }
             }
+            if (e.target == this.list) {
+                let move = this.list.classList.contains("cm-completionListIncompleteTop") &&
+                    e.clientY < this.list.firstChild.getBoundingClientRect().top ? this.range.from - 1 :
+                    this.list.classList.contains("cm-completionListIncompleteBottom") &&
+                        e.clientY > this.list.lastChild.getBoundingClientRect().bottom ? this.range.to : null;
+                if (move != null) {
+                    view.dispatch({ effects: setSelectedEffect.of(move) });
+                    e.preventDefault();
+                }
+            }
         });
         this.dom.addEventListener("focusout", (e) => {
             let state = view.state.field(this.stateField, false);
@@ -1031,7 +1042,6 @@ function checkValid(validFor, state, from, to) {
 const setActiveEffect = /*@__PURE__*/StateEffect.define({
     map(sources, mapping) { return sources.map(s => s.map(mapping)); }
 });
-const setSelectedEffect = /*@__PURE__*/StateEffect.define();
 const completionState = /*@__PURE__*/StateField.define({
     create() { return CompletionState.start(); },
     update(value, tr) { return value.update(tr); },
@@ -1765,7 +1775,8 @@ A completion source that will scan the document for words (using a
 return those as completions.
 */
 const completeAnyWord = context => {
-    let wordChars = context.state.languageDataAt("wordChars", context.pos).join("");
+    var _a;
+    let wordChars = (_a = context.state.languageDataAt("wordChars", context.pos)[0]) !== null && _a !== void 0 ? _a : "";
     let re = wordRE(wordChars);
     let token = context.matchBefore(mapRE(re, s => s + "$"));
     if (!token && !context.explicit)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/autocomplete",
-  "version": "6.19.1",
+  "version": "6.20.1",
   "description": "Autocompletion for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -36,6 +36,6 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/codemirror/autocomplete.git"
+    "url": "git+https://github.com/codemirror/autocomplete.git"
   }
 }