@codemirror/autocomplete 6.8.0 → 6.9.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 6.9.0 (2023-07-18)
+
+### New features
+
+Completions may now provide a `displayLabel` property that overrides the way they are displayed in the completion list.
+
+## 6.8.1 (2023-06-23)
+
+### Bug fixes
+
+`acceptCompletion` now returns false (allowing other handlers to take effect) when the completion popup is open but disabled.
+
 ## 6.8.0 (2023-06-12)
 
 ### New features

package/dist/index.cjs

@@ -202,6 +202,8 @@ class FuzzyMatcher {
         this.any = [];
         this.precise = [];
         this.byWord = [];
+        this.score = 0;
+        this.matched = [];
         for (let p = 0; p < pattern.length;) {
             let char = state.codePointAt(pattern, p), size = state.codePointSize(char);
             this.chars.push(char);
@@ -211,18 +213,23 @@ class FuzzyMatcher {
         }
         this.astral = pattern.length != this.chars.length;
     }
+    ret(score, matched) {
+        this.score = score;
+        this.matched = matched;
+        return true;
+    }
     // Matches a given word (completion) against the pattern (input).
-    // Will return null for no match, and otherwise an array that starts
-    // with the match score, followed by any number of `from, to` pairs
-    // indicating the matched parts of `word`.
+    // Will return a boolean indicating whether there was a match and,
+    // on success, set `this.score` to the score, `this.matched` to an
+    // array of `from, to` pairs indicating the matched parts of `word`.
     //
     // The score is a number that is more negative the worse the match
     // is. See `Penalty` above.
     match(word) {
         if (this.pattern.length == 0)
-            return [-100 /* NotFull */];
+            return this.ret(-100 /* NotFull */, []);
         if (word.length < this.pattern.length)
-            return null;
+            return false;
         let { chars, folded, any, precise, byWord } = this;
         // For single-character queries, only match when they occur right
         // at the start
@@ -233,12 +240,12 @@ class FuzzyMatcher {
             else if (first == folded[0])
                 score += -200 /* CaseFold */;
             else
-                return null;
-            return [score, 0, firstSize];
+                return false;
+            return this.ret(score, [0, firstSize]);
         }
         let direct = word.indexOf(this.pattern);
         if (direct == 0)
-            return [word.length == this.pattern.length ? 0 : -100 /* NotFull */, 0, this.pattern.length];
+            return this.ret(word.length == this.pattern.length ? 0 : -100 /* NotFull */, [0, this.pattern.length]);
         let len = chars.length, anyTo = 0;
         if (direct < 0) {
             for (let i = 0, e = Math.min(word.length, 200); i < e && anyTo < len;) {
@@ -249,7 +256,7 @@ class FuzzyMatcher {
             }
             // No match, exit immediately
             if (anyTo < len)
-                return null;
+                return false;
         }
         // This tracks the extent of the precise (non-folded, not
         // necessarily adjacent) match
@@ -294,28 +301,29 @@ class FuzzyMatcher {
         if (byWordTo == len && byWord[0] == 0 && wordAdjacent)
             return this.result(-100 /* ByWord */ + (byWordFolded ? -200 /* CaseFold */ : 0), byWord, word);
         if (adjacentTo == len && adjacentStart == 0)
-            return [-200 /* CaseFold */ - word.length + (adjacentEnd == word.length ? 0 : -100 /* NotFull */), 0, adjacentEnd];
+            return this.ret(-200 /* CaseFold */ - word.length + (adjacentEnd == word.length ? 0 : -100 /* NotFull */), [0, adjacentEnd]);
         if (direct > -1)
-            return [-700 /* NotStart */ - word.length, direct, direct + this.pattern.length];
+            return this.ret(-700 /* NotStart */ - word.length, [direct, direct + this.pattern.length]);
         if (adjacentTo == len)
-            return [-200 /* CaseFold */ + -700 /* NotStart */ - word.length, adjacentStart, adjacentEnd];
+            return this.ret(-200 /* CaseFold */ + -700 /* NotStart */ - word.length, [adjacentStart, adjacentEnd]);
         if (byWordTo == len)
             return this.result(-100 /* ByWord */ + (byWordFolded ? -200 /* CaseFold */ : 0) + -700 /* NotStart */ +
                 (wordAdjacent ? 0 : -1100 /* Gap */), byWord, word);
-        return chars.length == 2 ? null : this.result((any[0] ? -700 /* NotStart */ : 0) + -200 /* CaseFold */ + -1100 /* Gap */, any, word);
+        return chars.length == 2 ? false
+            : this.result((any[0] ? -700 /* NotStart */ : 0) + -200 /* CaseFold */ + -1100 /* Gap */, any, word);
     }
     result(score, positions, word) {
-        let result = [score - word.length], i = 1;
+        let result = [], i = 0;
         for (let pos of positions) {
             let to = pos + (this.astral ? state.codePointSize(state.codePointAt(word, pos)) : 1);
-            if (i > 1 && result[i - 1] == pos)
+            if (i && result[i - 1] == pos)
                 result[i - 1] = to;
             else {
                 result[i++] = pos;
                 result[i++] = to;
             }
         }
-        return result;
+        return this.ret(score - word.length, result);
     }
 }
 
@@ -398,8 +406,8 @@ function optionContent(config) {
         render(completion, _s, match) {
             let labelElt = document.createElement("span");
             labelElt.className = "cm-completionLabel";
-            let { label } = completion, off = 0;
-            for (let j = 1; j < match.length;) {
+            let label = completion.displayLabel || completion.label, off = 0;
+            for (let j = 0; j < match.length;) {
                 let from = match[j++], to = match[j++];
                 if (from > off)
                     labelElt.appendChild(document.createTextNode(label.slice(off, from)));
@@ -697,21 +705,18 @@ function sortOptions(active, state) {
     };
     for (let a of active)
         if (a.hasResult()) {
+            let getMatch = a.result.getMatch;
             if (a.result.filter === false) {
-                let getMatch = a.result.getMatch;
                 for (let option of a.result.options) {
-                    let match = [1e9 - options.length];
-                    if (getMatch)
-                        for (let n of getMatch(option))
-                            match.push(n);
-                    addOption(new Option(option, a.source, match, match[0]));
+                    addOption(new Option(option, a.source, getMatch ? getMatch(option) : [], 1e9 - options.length));
                 }
             }
             else {
-                let matcher = new FuzzyMatcher(state.sliceDoc(a.from, a.to)), match;
+                let matcher = new FuzzyMatcher(state.sliceDoc(a.from, a.to));
                 for (let option of a.result.options)
-                    if (match = matcher.match(option.label)) {
-                        addOption(new Option(option, a.source, match, match[0] + (option.boost || 0)));
+                    if (matcher.match(option.label)) {
+                        let matched = !option.displayLabel ? matcher.matched : getMatch ? getMatch(option, matcher.matched) : [];
+                        addOption(new Option(option, a.source, matched, matcher.score + (option.boost || 0)));
                     }
             }
         }
@@ -731,9 +736,10 @@ function sortOptions(active, state) {
     let result = [], prev = null;
     let compare = state.facet(completionConfig).compareCompletions;
     for (let opt of options.sort((a, b) => (b.score - a.score) || compare(a.completion, b.completion))) {
-        if (!prev || prev.label != opt.completion.label || prev.detail != opt.completion.detail ||
-            (prev.type != null && opt.completion.type != null && prev.type != opt.completion.type) ||
-            prev.apply != opt.completion.apply)
+        let cur = opt.completion;
+        if (!prev || prev.label != cur.label || prev.detail != cur.detail ||
+            (prev.type != null && cur.type != null && prev.type != cur.type) ||
+            prev.apply != cur.apply || prev.boost != cur.boost)
             result.push(opt);
         else if (score(opt.completion) > score(prev))
             result[result.length - 1] = opt;
@@ -977,12 +983,10 @@ Accept the current completion.
 */
 const acceptCompletion = (view) => {
     let cState = view.state.field(completionState, false);
-    if (view.state.readOnly || !cState || !cState.open || cState.open.selected < 0 ||
+    if (view.state.readOnly || !cState || !cState.open || cState.open.selected < 0 || cState.open.disabled ||
         Date.now() - cState.open.timestamp < view.state.facet(completionConfig).interactionDelay)
         return false;
-    if (!cState.open.disabled)
-        return applyCompletion(view, cState.open.options[cState.open.selected]);
-    return true;
+    return applyCompletion(view, cState.open.options[cState.open.selected]);
 };
 /**
 Explicitly start autocompletion.

package/dist/index.d.cts

@@ -14,6 +14,13 @@ interface Completion {
     */
     label: string;
     /**
+    An optional override for the completion's visible label. When
+    using this, matched characters will only be highlighted if you
+    provide a [`getMatch`](https://codemirror.net/6/docs/ref/#autocomplete.CompletionResult.getMatch)
+    function.
+    */
+    displayLabel?: string;
+    /**
     An optional short piece of information to show (with a different
     style) after the label.
     */
@@ -230,12 +237,15 @@ interface CompletionResult {
     filter?: boolean;
     /**
     When [`filter`](https://codemirror.net/6/docs/ref/#autocomplete.CompletionResult.filter) is set to
-    `false`, this may be provided to compute the ranges on the label
-    that match the input. Should return an array of numbers where
-    each pair of adjacent numbers provide the start and end of a
-    range.
-    */
-    getMatch?: (completion: Completion) => readonly number[];
+    `false` or a completion has a
+    [`displayLabel`](https://codemirror.net/6/docs/ref/#autocomplete.Completion.displayLabel), this
+    may be provided to compute the ranges on the label that match
+    the input. Should return an array of numbers where each pair of
+    adjacent numbers provide the start and end of a range. The
+    second argument, the match found by the library, is only passed
+    when `filter` isn't `false`.
+    */
+    getMatch?: (completion: Completion, matched?: readonly number[]) => readonly number[];
     /**
     Synchronously update the completion result after typing or
     deletion. If given, this should not do any expensive work, since

package/dist/index.d.ts

@@ -14,6 +14,13 @@ interface Completion {
     */
     label: string;
     /**
+    An optional override for the completion's visible label. When
+    using this, matched characters will only be highlighted if you
+    provide a [`getMatch`](https://codemirror.net/6/docs/ref/#autocomplete.CompletionResult.getMatch)
+    function.
+    */
+    displayLabel?: string;
+    /**
     An optional short piece of information to show (with a different
     style) after the label.
     */
@@ -230,12 +237,15 @@ interface CompletionResult {
     filter?: boolean;
     /**
     When [`filter`](https://codemirror.net/6/docs/ref/#autocomplete.CompletionResult.filter) is set to
-    `false`, this may be provided to compute the ranges on the label
-    that match the input. Should return an array of numbers where
-    each pair of adjacent numbers provide the start and end of a
-    range.
-    */
-    getMatch?: (completion: Completion) => readonly number[];
+    `false` or a completion has a
+    [`displayLabel`](https://codemirror.net/6/docs/ref/#autocomplete.Completion.displayLabel), this
+    may be provided to compute the ranges on the label that match
+    the input. Should return an array of numbers where each pair of
+    adjacent numbers provide the start and end of a range. The
+    second argument, the match found by the library, is only passed
+    when `filter` isn't `false`.
+    */
+    getMatch?: (completion: Completion, matched?: readonly number[]) => readonly number[];
     /**
     Synchronously update the completion result after typing or
     deletion. If given, this should not do any expensive work, since

package/dist/index.js

@@ -198,6 +198,8 @@ class FuzzyMatcher {
         this.any = [];
         this.precise = [];
         this.byWord = [];
+        this.score = 0;
+        this.matched = [];
         for (let p = 0; p < pattern.length;) {
             let char = codePointAt(pattern, p), size = codePointSize(char);
             this.chars.push(char);
@@ -207,18 +209,23 @@ class FuzzyMatcher {
         }
         this.astral = pattern.length != this.chars.length;
     }
+    ret(score, matched) {
+        this.score = score;
+        this.matched = matched;
+        return true;
+    }
     // Matches a given word (completion) against the pattern (input).
-    // Will return null for no match, and otherwise an array that starts
-    // with the match score, followed by any number of `from, to` pairs
-    // indicating the matched parts of `word`.
+    // Will return a boolean indicating whether there was a match and,
+    // on success, set `this.score` to the score, `this.matched` to an
+    // array of `from, to` pairs indicating the matched parts of `word`.
     //
     // The score is a number that is more negative the worse the match
     // is. See `Penalty` above.
     match(word) {
         if (this.pattern.length == 0)
-            return [-100 /* NotFull */];
+            return this.ret(-100 /* NotFull */, []);
         if (word.length < this.pattern.length)
-            return null;
+            return false;
         let { chars, folded, any, precise, byWord } = this;
         // For single-character queries, only match when they occur right
         // at the start
@@ -229,12 +236,12 @@ class FuzzyMatcher {
             else if (first == folded[0])
                 score += -200 /* CaseFold */;
             else
-                return null;
-            return [score, 0, firstSize];
+                return false;
+            return this.ret(score, [0, firstSize]);
         }
         let direct = word.indexOf(this.pattern);
         if (direct == 0)
-            return [word.length == this.pattern.length ? 0 : -100 /* NotFull */, 0, this.pattern.length];
+            return this.ret(word.length == this.pattern.length ? 0 : -100 /* NotFull */, [0, this.pattern.length]);
         let len = chars.length, anyTo = 0;
         if (direct < 0) {
             for (let i = 0, e = Math.min(word.length, 200); i < e && anyTo < len;) {
@@ -245,7 +252,7 @@ class FuzzyMatcher {
             }
             // No match, exit immediately
             if (anyTo < len)
-                return null;
+                return false;
         }
         // This tracks the extent of the precise (non-folded, not
         // necessarily adjacent) match
@@ -290,28 +297,29 @@ class FuzzyMatcher {
         if (byWordTo == len && byWord[0] == 0 && wordAdjacent)
             return this.result(-100 /* ByWord */ + (byWordFolded ? -200 /* CaseFold */ : 0), byWord, word);
         if (adjacentTo == len && adjacentStart == 0)
-            return [-200 /* CaseFold */ - word.length + (adjacentEnd == word.length ? 0 : -100 /* NotFull */), 0, adjacentEnd];
+            return this.ret(-200 /* CaseFold */ - word.length + (adjacentEnd == word.length ? 0 : -100 /* NotFull */), [0, adjacentEnd]);
         if (direct > -1)
-            return [-700 /* NotStart */ - word.length, direct, direct + this.pattern.length];
+            return this.ret(-700 /* NotStart */ - word.length, [direct, direct + this.pattern.length]);
         if (adjacentTo == len)
-            return [-200 /* CaseFold */ + -700 /* NotStart */ - word.length, adjacentStart, adjacentEnd];
+            return this.ret(-200 /* CaseFold */ + -700 /* NotStart */ - word.length, [adjacentStart, adjacentEnd]);
         if (byWordTo == len)
             return this.result(-100 /* ByWord */ + (byWordFolded ? -200 /* CaseFold */ : 0) + -700 /* NotStart */ +
                 (wordAdjacent ? 0 : -1100 /* Gap */), byWord, word);
-        return chars.length == 2 ? null : this.result((any[0] ? -700 /* NotStart */ : 0) + -200 /* CaseFold */ + -1100 /* Gap */, any, word);
+        return chars.length == 2 ? false
+            : this.result((any[0] ? -700 /* NotStart */ : 0) + -200 /* CaseFold */ + -1100 /* Gap */, any, word);
     }
     result(score, positions, word) {
-        let result = [score - word.length], i = 1;
+        let result = [], i = 0;
         for (let pos of positions) {
             let to = pos + (this.astral ? codePointSize(codePointAt(word, pos)) : 1);
-            if (i > 1 && result[i - 1] == pos)
+            if (i && result[i - 1] == pos)
                 result[i - 1] = to;
             else {
                 result[i++] = pos;
                 result[i++] = to;
             }
         }
-        return result;
+        return this.ret(score - word.length, result);
     }
 }
 
@@ -394,8 +402,8 @@ function optionContent(config) {
         render(completion, _s, match) {
             let labelElt = document.createElement("span");
             labelElt.className = "cm-completionLabel";
-            let { label } = completion, off = 0;
-            for (let j = 1; j < match.length;) {
+            let label = completion.displayLabel || completion.label, off = 0;
+            for (let j = 0; j < match.length;) {
                 let from = match[j++], to = match[j++];
                 if (from > off)
                     labelElt.appendChild(document.createTextNode(label.slice(off, from)));
@@ -693,21 +701,18 @@ function sortOptions(active, state) {
     };
     for (let a of active)
         if (a.hasResult()) {
+            let getMatch = a.result.getMatch;
             if (a.result.filter === false) {
-                let getMatch = a.result.getMatch;
                 for (let option of a.result.options) {
-                    let match = [1e9 - options.length];
-                    if (getMatch)
-                        for (let n of getMatch(option))
-                            match.push(n);
-                    addOption(new Option(option, a.source, match, match[0]));
+                    addOption(new Option(option, a.source, getMatch ? getMatch(option) : [], 1e9 - options.length));
                 }
             }
             else {
-                let matcher = new FuzzyMatcher(state.sliceDoc(a.from, a.to)), match;
+                let matcher = new FuzzyMatcher(state.sliceDoc(a.from, a.to));
                 for (let option of a.result.options)
-                    if (match = matcher.match(option.label)) {
-                        addOption(new Option(option, a.source, match, match[0] + (option.boost || 0)));
+                    if (matcher.match(option.label)) {
+                        let matched = !option.displayLabel ? matcher.matched : getMatch ? getMatch(option, matcher.matched) : [];
+                        addOption(new Option(option, a.source, matched, matcher.score + (option.boost || 0)));
                     }
             }
         }
@@ -727,9 +732,10 @@ function sortOptions(active, state) {
     let result = [], prev = null;
     let compare = state.facet(completionConfig).compareCompletions;
     for (let opt of options.sort((a, b) => (b.score - a.score) || compare(a.completion, b.completion))) {
-        if (!prev || prev.label != opt.completion.label || prev.detail != opt.completion.detail ||
-            (prev.type != null && opt.completion.type != null && prev.type != opt.completion.type) ||
-            prev.apply != opt.completion.apply)
+        let cur = opt.completion;
+        if (!prev || prev.label != cur.label || prev.detail != cur.detail ||
+            (prev.type != null && cur.type != null && prev.type != cur.type) ||
+            prev.apply != cur.apply || prev.boost != cur.boost)
             result.push(opt);
         else if (score(opt.completion) > score(prev))
             result[result.length - 1] = opt;
@@ -973,12 +979,10 @@ Accept the current completion.
 */
 const acceptCompletion = (view) => {
     let cState = view.state.field(completionState, false);
-    if (view.state.readOnly || !cState || !cState.open || cState.open.selected < 0 ||
+    if (view.state.readOnly || !cState || !cState.open || cState.open.selected < 0 || cState.open.disabled ||
         Date.now() - cState.open.timestamp < view.state.facet(completionConfig).interactionDelay)
         return false;
-    if (!cState.open.disabled)
-        return applyCompletion(view, cState.open.options[cState.open.selected]);
-    return true;
+    return applyCompletion(view, cState.open.options[cState.open.selected]);
 };
 /**
 Explicitly start autocompletion.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/autocomplete",
-  "version": "6.8.0",
+  "version": "6.9.0",
   "description": "Autocompletion for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",