@codemirror/autocomplete 6.8.1 → 6.9.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 6.9.1 (2023-09-14)
+
+### Bug fixes
+
+Make sure the cursor is scrolled into view after inserting completion text.
+
+Make sure scrolling completions into view doesn't get confused when the tooltip is scaled.
+
+## 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

package/dist/index.cjs

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var state = require('@codemirror/state');
 var view = require('@codemirror/view');
 var language = require('@codemirror/language');
@@ -175,7 +173,7 @@ function insertCompletionText(state$1, text, from, to) {
             changes: { from: range.from + fromOff, to: to == main.from ? range.to : range.from + toOff, insert: text },
             range: state.EditorSelection.cursor(range.from + fromOff + text.length)
         };
-    })), { userEvent: "input.complete" });
+    })), { scrollIntoView: true, userEvent: "input.complete" });
 }
 const SourceCache = new WeakMap();
 function asSource(source) {
@@ -202,6 +200,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,34 +211,39 @@ 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 /* Penalty.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
         if (chars.length == 1) {
             let first = state.codePointAt(word, 0), firstSize = state.codePointSize(first);
-            let score = firstSize == word.length ? 0 : -100 /* NotFull */;
+            let score = firstSize == word.length ? 0 : -100 /* Penalty.NotFull */;
             if (first == chars[0]) ;
             else if (first == folded[0])
-                score += -200 /* CaseFold */;
+                score += -200 /* Penalty.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 /* Penalty.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 +254,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
@@ -262,7 +267,7 @@ class FuzzyMatcher {
         let adjacentTo = 0, adjacentStart = -1, adjacentEnd = -1;
         let hasLower = /[a-z]/.test(word), wordAdjacent = true;
         // Go over the option's text, scanning for the various kinds of matches
-        for (let i = 0, e = Math.min(word.length, 200), prevType = 0 /* NonWord */; i < e && byWordTo < len;) {
+        for (let i = 0, e = Math.min(word.length, 200), prevType = 0 /* Tp.NonWord */; i < e && byWordTo < len;) {
             let next = state.codePointAt(word, i);
             if (direct < 0) {
                 if (preciseTo < len && next == chars[preciseTo])
@@ -280,9 +285,9 @@ class FuzzyMatcher {
                 }
             }
             let ch, type = next < 0xff
-                ? (next >= 48 && next <= 57 || next >= 97 && next <= 122 ? 2 /* Lower */ : next >= 65 && next <= 90 ? 1 /* Upper */ : 0 /* NonWord */)
-                : ((ch = state.fromCodePoint(next)) != ch.toLowerCase() ? 1 /* Upper */ : ch != ch.toUpperCase() ? 2 /* Lower */ : 0 /* NonWord */);
-            if (!i || type == 1 /* Upper */ && hasLower || prevType == 0 /* NonWord */ && type != 0 /* NonWord */) {
+                ? (next >= 48 && next <= 57 || next >= 97 && next <= 122 ? 2 /* Tp.Lower */ : next >= 65 && next <= 90 ? 1 /* Tp.Upper */ : 0 /* Tp.NonWord */)
+                : ((ch = state.fromCodePoint(next)) != ch.toLowerCase() ? 1 /* Tp.Upper */ : ch != ch.toUpperCase() ? 2 /* Tp.Lower */ : 0 /* Tp.NonWord */);
+            if (!i || type == 1 /* Tp.Upper */ && hasLower || prevType == 0 /* Tp.NonWord */ && type != 0 /* Tp.NonWord */) {
                 if (chars[byWordTo] == next || (folded[byWordTo] == next && (byWordFolded = true)))
                     byWord[byWordTo++] = i;
                 else if (byWord.length)
@@ -292,30 +297,31 @@ class FuzzyMatcher {
             i += state.codePointSize(next);
         }
         if (byWordTo == len && byWord[0] == 0 && wordAdjacent)
-            return this.result(-100 /* ByWord */ + (byWordFolded ? -200 /* CaseFold */ : 0), byWord, word);
+            return this.result(-100 /* Penalty.ByWord */ + (byWordFolded ? -200 /* Penalty.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 /* Penalty.CaseFold */ - word.length + (adjacentEnd == word.length ? 0 : -100 /* Penalty.NotFull */), [0, adjacentEnd]);
         if (direct > -1)
-            return [-700 /* NotStart */ - word.length, direct, direct + this.pattern.length];
+            return this.ret(-700 /* Penalty.NotStart */ - word.length, [direct, direct + this.pattern.length]);
         if (adjacentTo == len)
-            return [-200 /* CaseFold */ + -700 /* NotStart */ - word.length, adjacentStart, adjacentEnd];
+            return this.ret(-200 /* Penalty.CaseFold */ + -700 /* Penalty.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 this.result(-100 /* Penalty.ByWord */ + (byWordFolded ? -200 /* Penalty.CaseFold */ : 0) + -700 /* Penalty.NotStart */ +
+                (wordAdjacent ? 0 : -1100 /* Penalty.Gap */), byWord, word);
+        return chars.length == 2 ? false
+            : this.result((any[0] ? -700 /* Penalty.NotStart */ : 0) + -200 /* Penalty.CaseFold */ + -1100 /* Penalty.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);
     }
 }
 
@@ -349,7 +355,7 @@ const completionConfig = state.Facet.define({
 function joinClass(a, b) {
     return a ? b ? a + " " + b : a : b;
 }
-function defaultPositionInfo(view$1, list, option, info, space) {
+function defaultPositionInfo(view$1, list, option, info, space, tooltip) {
     let rtl = view$1.textDirection == view.Direction.RTL, left = rtl, narrow = false;
     let side = "top", offset, maxWidth;
     let spaceLeft = list.left - space.left, spaceRight = space.right - list.right;
@@ -360,11 +366,11 @@ function defaultPositionInfo(view$1, list, option, info, space) {
         left = true;
     if (infoWidth <= (left ? spaceLeft : spaceRight)) {
         offset = Math.max(space.top, Math.min(option.top, space.bottom - infoHeight)) - list.top;
-        maxWidth = Math.min(400 /* Width */, left ? spaceLeft : spaceRight);
+        maxWidth = Math.min(400 /* Info.Width */, left ? spaceLeft : spaceRight);
     }
     else {
         narrow = true;
-        maxWidth = Math.min(400 /* Width */, (rtl ? list.right : space.right - list.left) - 30 /* Margin */);
+        maxWidth = Math.min(400 /* Info.Width */, (rtl ? list.right : space.right - list.left) - 30 /* Info.Margin */);
         let spaceBelow = space.bottom - list.bottom;
         if (spaceBelow >= infoHeight || spaceBelow > list.top) { // Below the completion
             offset = option.bottom - list.top;
@@ -374,8 +380,10 @@ function defaultPositionInfo(view$1, list, option, info, space) {
             offset = list.bottom - option.top;
         }
     }
+    let scaleY = (list.bottom - list.top) / tooltip.offsetHeight;
+    let scaleX = (list.right - list.left) / tooltip.offsetWidth;
     return {
-        style: `${side}: ${offset}px; max-width: ${maxWidth}px`,
+        style: `${side}: ${offset / scaleY}px; max-width: ${maxWidth / scaleX}px`,
         class: "cm-completionInfo-" + (narrow ? (rtl ? "left-narrow" : "right-narrow") : left ? "left" : "right")
     };
 }
@@ -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)));
@@ -595,7 +603,7 @@ class CompletionTooltip {
         if (selRect.top > Math.min(space.bottom, listRect.bottom) - 10 ||
             selRect.bottom < Math.max(space.top, listRect.top) + 10)
             return null;
-        return this.view.state.facet(completionConfig).positionInfo(this.view, listRect, selRect, infoRect, space);
+        return this.view.state.facet(completionConfig).positionInfo(this.view, listRect, selRect, infoRect, space, this.dom);
     }
     placeInfo(pos) {
         if (this.info) {
@@ -669,10 +677,11 @@ function completionTooltip(stateField, applyCompletion) {
 function scrollIntoView(container, element) {
     let parent = container.getBoundingClientRect();
     let self = element.getBoundingClientRect();
+    let scaleY = parent.height / container.offsetHeight;
     if (self.top < parent.top)
-        container.scrollTop -= parent.top - self.top;
+        container.scrollTop -= (parent.top - self.top) / scaleY;
     else if (self.bottom > parent.bottom)
-        container.scrollTop += self.bottom - parent.bottom;
+        container.scrollTop += (self.bottom - parent.bottom) / scaleY;
 }
 
 // Used to pick a preferred option when two options with the same
@@ -697,21 +706,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)));
                     }
             }
         }
@@ -758,7 +764,7 @@ class CompletionDialog {
     static build(active, state, id, prev, conf) {
         let options = sortOptions(active, state);
         if (!options.length) {
-            return prev && active.some(a => a.state == 1 /* Pending */) ?
+            return prev && active.some(a => a.state == 1 /* State.Pending */) ?
                 new CompletionDialog(prev.options, prev.attrs, prev.tooltip, prev.timestamp, prev.selected, true) : null;
         }
         let selected = state.facet(completionConfig).selectOnOpen ? 0 : -1;
@@ -795,7 +801,7 @@ class CompletionState {
             state.languageDataAt("autocomplete", cur(state)).map(asSource);
         let active = sources.map(source => {
             let value = this.active.find(s => s.source == source) ||
-                new ActiveSource(source, this.active.some(a => a.state != 0 /* Inactive */) ? 1 /* Pending */ : 0 /* Inactive */);
+                new ActiveSource(source, this.active.some(a => a.state != 0 /* State.Inactive */) ? 1 /* State.Pending */ : 0 /* State.Inactive */);
             return value.update(tr, conf);
         });
         if (active.length == this.active.length && active.every((a, i) => a == this.active[i]))
@@ -806,10 +812,10 @@ class CompletionState {
         if (tr.selection || active.some(a => a.hasResult() && tr.changes.touchesRange(a.from, a.to)) ||
             !sameResults(active, this.active))
             open = CompletionDialog.build(active, state, this.id, open, conf);
-        else if (open && open.disabled && !active.some(a => a.state == 1 /* Pending */))
+        else if (open && open.disabled && !active.some(a => a.state == 1 /* State.Pending */))
             open = null;
-        if (!open && active.every(a => a.state != 1 /* Pending */) && active.some(a => a.hasResult()))
-            active = active.map(a => a.hasResult() ? new ActiveSource(a.source, 0 /* Inactive */) : a);
+        if (!open && active.every(a => a.state != 1 /* State.Pending */) && active.some(a => a.hasResult()))
+            active = active.map(a => a.hasResult() ? new ActiveSource(a.source, 0 /* State.Inactive */) : a);
         for (let effect of tr.effects)
             if (effect.is(setSelectedEffect))
                 open = open && open.setSelected(effect.value, this.id);
@@ -863,13 +869,13 @@ class ActiveSource {
             value = value.handleUserEvent(tr, event, conf);
         else if (tr.docChanged)
             value = value.handleChange(tr);
-        else if (tr.selection && value.state != 0 /* Inactive */)
-            value = new ActiveSource(value.source, 0 /* Inactive */);
+        else if (tr.selection && value.state != 0 /* State.Inactive */)
+            value = new ActiveSource(value.source, 0 /* State.Inactive */);
         for (let effect of tr.effects) {
             if (effect.is(startCompletionEffect))
-                value = new ActiveSource(value.source, 1 /* Pending */, effect.value ? cur(tr.state) : -1);
+                value = new ActiveSource(value.source, 1 /* State.Pending */, effect.value ? cur(tr.state) : -1);
             else if (effect.is(closeCompletionEffect))
-                value = new ActiveSource(value.source, 0 /* Inactive */);
+                value = new ActiveSource(value.source, 0 /* State.Inactive */);
             else if (effect.is(setActiveEffect))
                 for (let active of effect.value)
                     if (active.source == value.source)
@@ -878,10 +884,10 @@ class ActiveSource {
         return value;
     }
     handleUserEvent(tr, type, conf) {
-        return type == "delete" || !conf.activateOnTyping ? this.map(tr.changes) : new ActiveSource(this.source, 1 /* Pending */);
+        return type == "delete" || !conf.activateOnTyping ? this.map(tr.changes) : new ActiveSource(this.source, 1 /* State.Pending */);
     }
     handleChange(tr) {
-        return tr.changes.touchesRange(cur(tr.startState)) ? new ActiveSource(this.source, 0 /* Inactive */) : this.map(tr.changes);
+        return tr.changes.touchesRange(cur(tr.startState)) ? new ActiveSource(this.source, 0 /* State.Inactive */) : this.map(tr.changes);
     }
     map(changes) {
         return changes.empty || this.explicitPos < 0 ? this : new ActiveSource(this.source, this.state, changes.mapPos(this.explicitPos));
@@ -889,7 +895,7 @@ class ActiveSource {
 }
 class ActiveResult extends ActiveSource {
     constructor(source, explicitPos, result, from, to) {
-        super(source, 2 /* Result */, explicitPos);
+        super(source, 2 /* State.Result */, explicitPos);
         this.result = result;
         this.from = from;
         this.to = to;
@@ -902,17 +908,17 @@ class ActiveResult extends ActiveSource {
         if ((this.explicitPos < 0 ? pos <= from : pos < this.from) ||
             pos > to ||
             type == "delete" && cur(tr.startState) == this.from)
-            return new ActiveSource(this.source, type == "input" && conf.activateOnTyping ? 1 /* Pending */ : 0 /* Inactive */);
+            return new ActiveSource(this.source, type == "input" && conf.activateOnTyping ? 1 /* State.Pending */ : 0 /* State.Inactive */);
         let explicitPos = this.explicitPos < 0 ? -1 : tr.changes.mapPos(this.explicitPos), updated;
         if (checkValid(this.result.validFor, tr.state, from, to))
             return new ActiveResult(this.source, explicitPos, this.result, from, to);
         if (this.result.update &&
             (updated = this.result.update(this.result, from, to, new CompletionContext(tr.state, pos, explicitPos >= 0))))
             return new ActiveResult(this.source, explicitPos, updated, updated.from, (_a = updated.to) !== null && _a !== void 0 ? _a : cur(tr.state));
-        return new ActiveSource(this.source, 1 /* Pending */, explicitPos);
+        return new ActiveSource(this.source, 1 /* State.Pending */, explicitPos);
     }
     handleChange(tr) {
-        return tr.changes.touchesRange(this.from, this.to) ? new ActiveSource(this.source, 0 /* Inactive */) : this.map(tr.changes);
+        return tr.changes.touchesRange(this.from, this.to) ? new ActiveSource(this.source, 0 /* State.Inactive */) : this.map(tr.changes);
     }
     map(mapping) {
         return mapping.empty ? this :
@@ -998,7 +1004,7 @@ Close the currently active completion.
 */
 const closeCompletion = (view) => {
     let cState = view.state.field(completionState, false);
-    if (!cState || !cState.active.some(a => a.state != 0 /* Inactive */))
+    if (!cState || !cState.active.some(a => a.state != 0 /* State.Inactive */))
         return false;
     view.dispatch({ effects: closeCompletionEffect.of(null) });
     return true;
@@ -1021,9 +1027,9 @@ const completionPlugin = view.ViewPlugin.fromClass(class {
         this.debounceUpdate = -1;
         this.running = [];
         this.debounceAccept = -1;
-        this.composing = 0 /* None */;
+        this.composing = 0 /* CompositionState.None */;
         for (let active of view.state.field(completionState).active)
-            if (active.state == 1 /* Pending */)
+            if (active.state == 1 /* State.Pending */)
                 this.startQuery(active);
     }
     update(update) {
@@ -1054,21 +1060,21 @@ const completionPlugin = view.ViewPlugin.fromClass(class {
         }
         if (this.debounceUpdate > -1)
             clearTimeout(this.debounceUpdate);
-        this.debounceUpdate = cState.active.some(a => a.state == 1 /* Pending */ && !this.running.some(q => q.active.source == a.source))
+        this.debounceUpdate = cState.active.some(a => a.state == 1 /* State.Pending */ && !this.running.some(q => q.active.source == a.source))
             ? setTimeout(() => this.startUpdate(), DebounceTime) : -1;
-        if (this.composing != 0 /* None */)
+        if (this.composing != 0 /* CompositionState.None */)
             for (let tr of update.transactions) {
                 if (getUserEvent(tr) == "input")
-                    this.composing = 2 /* Changed */;
-                else if (this.composing == 2 /* Changed */ && tr.selection)
-                    this.composing = 3 /* ChangedAndMoved */;
+                    this.composing = 2 /* CompositionState.Changed */;
+                else if (this.composing == 2 /* CompositionState.Changed */ && tr.selection)
+                    this.composing = 3 /* CompositionState.ChangedAndMoved */;
             }
     }
     startUpdate() {
         this.debounceUpdate = -1;
         let { state } = this.view, cState = state.field(completionState);
         for (let active of cState.active) {
-            if (active.state == 1 /* Pending */ && !this.running.some(r => r.active.source == active.source))
+            if (active.state == 1 /* State.Pending */ && !this.running.some(r => r.active.source == active.source))
                 this.startQuery(active);
         }
     }
@@ -1119,14 +1125,14 @@ const completionPlugin = view.ViewPlugin.fromClass(class {
                 }
             }
             let current = this.view.state.field(completionState).active.find(a => a.source == query.active.source);
-            if (current && current.state == 1 /* Pending */) {
+            if (current && current.state == 1 /* State.Pending */) {
                 if (query.done == null) {
                     // Explicitly failed. Should clear the pending status if it
                     // hasn't been re-set in the meantime.
-                    let active = new ActiveSource(query.active.source, 0 /* Inactive */);
+                    let active = new ActiveSource(query.active.source, 0 /* State.Inactive */);
                     for (let tr of query.updates)
                         active = active.update(tr, conf);
-                    if (active.state != 1 /* Pending */)
+                    if (active.state != 1 /* State.Pending */)
                         updated.push(active);
                 }
                 else {
@@ -1149,15 +1155,15 @@ const completionPlugin = view.ViewPlugin.fromClass(class {
             }
         },
         compositionstart() {
-            this.composing = 1 /* Started */;
+            this.composing = 1 /* CompositionState.Started */;
         },
         compositionend() {
-            if (this.composing == 3 /* ChangedAndMoved */) {
+            if (this.composing == 3 /* CompositionState.ChangedAndMoved */) {
                 // Safari fires compositionend events synchronously, possibly
                 // from inside an update, so dispatch asynchronously to avoid reentrancy
                 setTimeout(() => this.view.dispatch({ effects: startCompletionEffect.of(false) }), 20);
             }
-            this.composing = 0 /* None */;
+            this.composing = 0 /* CompositionState.None */;
         }
     }
 });
@@ -1217,13 +1223,13 @@ const baseTheme = view.EditorView.baseTheme({
         position: "absolute",
         padding: "3px 9px",
         width: "max-content",
-        maxWidth: `${400 /* Width */}px`,
+        maxWidth: `${400 /* Info.Width */}px`,
         boxSizing: "border-box"
     },
     ".cm-completionInfo.cm-completionInfo-left": { right: "100%" },
     ".cm-completionInfo.cm-completionInfo-right": { left: "100%" },
-    ".cm-completionInfo.cm-completionInfo-left-narrow": { right: `${30 /* Margin */}px` },
-    ".cm-completionInfo.cm-completionInfo-right-narrow": { left: `${30 /* Margin */}px` },
+    ".cm-completionInfo.cm-completionInfo-left-narrow": { right: `${30 /* Info.Margin */}px` },
+    ".cm-completionInfo.cm-completionInfo-right-narrow": { left: `${30 /* Info.Margin */}px` },
     "&light .cm-snippetField": { backgroundColor: "#00000022" },
     "&dark .cm-snippetField": { backgroundColor: "#ffffff22" },
     ".cm-snippetFieldPosition": {
@@ -1474,7 +1480,8 @@ function moveField(dir) {
         let next = active.active + dir, last = dir > 0 && !active.ranges.some(r => r.field == next + dir);
         dispatch(state.update({
             selection: fieldSelection(active.ranges, next),
-            effects: setActive.of(last ? null : new ActiveSnippet(active.ranges, next))
+            effects: setActive.of(last ? null : new ActiveSnippet(active.ranges, next)),
+            scrollIntoView: true
         }));
         return true;
     };
@@ -1546,7 +1553,9 @@ const snippetPointerHandler = view.EditorView.domEventHandlers({
             return false;
         view.dispatch({
             selection: fieldSelection(active.ranges, match.field),
-            effects: setActive.of(active.ranges.some(r => r.field > match.field) ? new ActiveSnippet(active.ranges, match.field) : null)
+            effects: setActive.of(active.ranges.some(r => r.field > match.field)
+                ? new ActiveSnippet(active.ranges, match.field) : null),
+            scrollIntoView: true
         });
         return true;
     }
@@ -1576,7 +1585,7 @@ function storeWords(doc, wordRE, result, seen, ignoreAt) {
             if (!seen[m[0]] && pos + m.index != ignoreAt) {
                 result.push({ type: "text", label: m[0] });
                 seen[m[0]] = true;
-                if (result.length >= 2000 /* MaxList */)
+                if (result.length >= 2000 /* C.MaxList */)
                     return;
             }
         }
@@ -1584,7 +1593,7 @@ function storeWords(doc, wordRE, result, seen, ignoreAt) {
     }
 }
 function collectWords(doc, cache, wordRE, to, ignoreAt) {
-    let big = doc.length >= 1000 /* MinCacheLen */;
+    let big = doc.length >= 1000 /* C.MinCacheLen */;
     let cached = big && cache.get(doc);
     if (cached)
         return cached;
@@ -1592,7 +1601,7 @@ function collectWords(doc, cache, wordRE, to, ignoreAt) {
     if (doc.children) {
         let pos = 0;
         for (let ch of doc.children) {
-            if (ch.length >= 1000 /* MinCacheLen */) {
+            if (ch.length >= 1000 /* C.MinCacheLen */) {
                 for (let c of collectWords(ch, cache, wordRE, to - pos, ignoreAt - pos)) {
                     if (!seen[c.label]) {
                         seen[c.label] = true;
@@ -1609,7 +1618,7 @@ function collectWords(doc, cache, wordRE, to, ignoreAt) {
     else {
         storeWords(doc, wordRE, result, seen, ignoreAt);
     }
-    if (big && result.length < 2000 /* MaxList */)
+    if (big && result.length < 2000 /* C.MaxList */)
         cache.set(doc, result);
     return result;
 }
@@ -1625,7 +1634,7 @@ const completeAnyWord = context => {
     if (!token && !context.explicit)
         return null;
     let from = token ? token.from : context.pos;
-    let options = collectWords(context.state.doc, wordCache(wordChars), re, 50000 /* Range */, from);
+    let options = collectWords(context.state.doc, wordCache(wordChars), re, 50000 /* C.Range */, from);
     return { from, options, validFor: mapRE(re, s => "^" + s) };
 };
 
@@ -1917,8 +1926,8 @@ returns `null`.
 */
 function completionStatus(state) {
     let cState = state.field(completionState, false);
-    return cState && cState.active.some(a => a.state == 1 /* Pending */) ? "pending"
-        : cState && cState.active.some(a => a.state != 0 /* Inactive */) ? "active" : null;
+    return cState && cState.active.some(a => a.state == 1 /* State.Pending */) ? "pending"
+        : cState && cState.active.some(a => a.state != 0 /* State.Inactive */) ? "active" : null;
 }
 const completionArrayCache = new WeakMap;
 /**

package/dist/index.d.cts

@@ -9,11 +9,18 @@ Objects type used to represent individual completions.
 interface Completion {
     /**
     The label to show in the completion picker. This is what input
-    is matched agains to determine whether a completion matches (and
+    is matched against to determine whether a completion matches (and
     how well it matches).
     */
     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.
     */
@@ -68,7 +75,7 @@ The type returned from
 node, null to indicate there is no info, or an object with an
 optional `destroy` method that cleans up the node.
 */
-declare type CompletionInfo = Node | null | {
+type CompletionInfo = Node | null | {
     dom: Node;
     destroy?(): void;
 };
@@ -189,7 +196,7 @@ may return its [result](https://codemirror.net/6/docs/ref/#autocomplete.Completi
 synchronously or as a promise. Returning null indicates no
 completions are available.
 */
-declare type CompletionSource = (context: CompletionContext) => CompletionResult | null | Promise<CompletionResult | null>;
+type CompletionSource = (context: CompletionContext) => CompletionResult | null | Promise<CompletionResult | null>;
 /**
 Interface for objects returned by completion sources.
 */
@@ -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.
+    `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) => readonly number[];
+    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
@@ -334,13 +344,13 @@ interface CompletionConfig {
         position: number;
     }[];
     /**
-    By default, [info](https://codemirror.net/6/docs/ref/#autocomplet.Completion.info) tooltips are
-    placed to the side of the selected. This option can be used to
-    override that. It will be given rectangles for the list of
-    completions, the selected option, the info element, and the
-    availble [tooltip space](https://codemirror.net/6/docs/ref/#view.tooltips^config.tooltipSpace),
-    and should return style and/or class strings for the info
-    element.
+    By default, [info](https://codemirror.net/6/docs/ref/#autocomplete.Completion.info) tooltips are
+    placed to the side of the selected completion. This option can
+    be used to override that. It will be given rectangles for the
+    list of completions, the selected option, the info element, and
+    the availble [tooltip
+    space](https://codemirror.net/6/docs/ref/#view.tooltips^config.tooltipSpace), and should return
+    style and/or class strings for the info element.
     */
     positionInfo?: (view: EditorView, list: Rect, option: Rect, info: Rect, space: Rect) => {
         style?: string;

package/dist/index.d.ts

@@ -9,11 +9,18 @@ Objects type used to represent individual completions.
 interface Completion {
     /**
     The label to show in the completion picker. This is what input
-    is matched agains to determine whether a completion matches (and
+    is matched against to determine whether a completion matches (and
     how well it matches).
     */
     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.
     */
@@ -68,7 +75,7 @@ The type returned from
 node, null to indicate there is no info, or an object with an
 optional `destroy` method that cleans up the node.
 */
-declare type CompletionInfo = Node | null | {
+type CompletionInfo = Node | null | {
     dom: Node;
     destroy?(): void;
 };
@@ -189,7 +196,7 @@ may return its [result](https://codemirror.net/6/docs/ref/#autocomplete.Completi
 synchronously or as a promise. Returning null indicates no
 completions are available.
 */
-declare type CompletionSource = (context: CompletionContext) => CompletionResult | null | Promise<CompletionResult | null>;
+type CompletionSource = (context: CompletionContext) => CompletionResult | null | Promise<CompletionResult | null>;
 /**
 Interface for objects returned by completion sources.
 */
@@ -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.
+    `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) => readonly number[];
+    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
@@ -334,13 +344,13 @@ interface CompletionConfig {
         position: number;
     }[];
     /**
-    By default, [info](https://codemirror.net/6/docs/ref/#autocomplet.Completion.info) tooltips are
-    placed to the side of the selected. This option can be used to
-    override that. It will be given rectangles for the list of
-    completions, the selected option, the info element, and the
-    availble [tooltip space](https://codemirror.net/6/docs/ref/#view.tooltips^config.tooltipSpace),
-    and should return style and/or class strings for the info
-    element.
+    By default, [info](https://codemirror.net/6/docs/ref/#autocomplete.Completion.info) tooltips are
+    placed to the side of the selected completion. This option can
+    be used to override that. It will be given rectangles for the
+    list of completions, the selected option, the info element, and
+    the availble [tooltip
+    space](https://codemirror.net/6/docs/ref/#view.tooltips^config.tooltipSpace), and should return
+    style and/or class strings for the info element.
     */
     positionInfo?: (view: EditorView, list: Rect, option: Rect, info: Rect, space: Rect) => {
         style?: string;

package/dist/index.js

@@ -171,7 +171,7 @@ function insertCompletionText(state, text, from, to) {
             changes: { from: range.from + fromOff, to: to == main.from ? range.to : range.from + toOff, insert: text },
             range: EditorSelection.cursor(range.from + fromOff + text.length)
         };
-    })), { userEvent: "input.complete" });
+    })), { scrollIntoView: true, userEvent: "input.complete" });
 }
 const SourceCache = /*@__PURE__*/new WeakMap();
 function asSource(source) {
@@ -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,34 +209,39 @@ 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 /* Penalty.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
         if (chars.length == 1) {
             let first = codePointAt(word, 0), firstSize = codePointSize(first);
-            let score = firstSize == word.length ? 0 : -100 /* NotFull */;
+            let score = firstSize == word.length ? 0 : -100 /* Penalty.NotFull */;
             if (first == chars[0]) ;
             else if (first == folded[0])
-                score += -200 /* CaseFold */;
+                score += -200 /* Penalty.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 /* Penalty.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
@@ -258,7 +265,7 @@ class FuzzyMatcher {
         let adjacentTo = 0, adjacentStart = -1, adjacentEnd = -1;
         let hasLower = /[a-z]/.test(word), wordAdjacent = true;
         // Go over the option's text, scanning for the various kinds of matches
-        for (let i = 0, e = Math.min(word.length, 200), prevType = 0 /* NonWord */; i < e && byWordTo < len;) {
+        for (let i = 0, e = Math.min(word.length, 200), prevType = 0 /* Tp.NonWord */; i < e && byWordTo < len;) {
             let next = codePointAt(word, i);
             if (direct < 0) {
                 if (preciseTo < len && next == chars[preciseTo])
@@ -276,9 +283,9 @@ class FuzzyMatcher {
                 }
             }
             let ch, type = next < 0xff
-                ? (next >= 48 && next <= 57 || next >= 97 && next <= 122 ? 2 /* Lower */ : next >= 65 && next <= 90 ? 1 /* Upper */ : 0 /* NonWord */)
-                : ((ch = fromCodePoint(next)) != ch.toLowerCase() ? 1 /* Upper */ : ch != ch.toUpperCase() ? 2 /* Lower */ : 0 /* NonWord */);
-            if (!i || type == 1 /* Upper */ && hasLower || prevType == 0 /* NonWord */ && type != 0 /* NonWord */) {
+                ? (next >= 48 && next <= 57 || next >= 97 && next <= 122 ? 2 /* Tp.Lower */ : next >= 65 && next <= 90 ? 1 /* Tp.Upper */ : 0 /* Tp.NonWord */)
+                : ((ch = fromCodePoint(next)) != ch.toLowerCase() ? 1 /* Tp.Upper */ : ch != ch.toUpperCase() ? 2 /* Tp.Lower */ : 0 /* Tp.NonWord */);
+            if (!i || type == 1 /* Tp.Upper */ && hasLower || prevType == 0 /* Tp.NonWord */ && type != 0 /* Tp.NonWord */) {
                 if (chars[byWordTo] == next || (folded[byWordTo] == next && (byWordFolded = true)))
                     byWord[byWordTo++] = i;
                 else if (byWord.length)
@@ -288,30 +295,31 @@ class FuzzyMatcher {
             i += codePointSize(next);
         }
         if (byWordTo == len && byWord[0] == 0 && wordAdjacent)
-            return this.result(-100 /* ByWord */ + (byWordFolded ? -200 /* CaseFold */ : 0), byWord, word);
+            return this.result(-100 /* Penalty.ByWord */ + (byWordFolded ? -200 /* Penalty.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 /* Penalty.CaseFold */ - word.length + (adjacentEnd == word.length ? 0 : -100 /* Penalty.NotFull */), [0, adjacentEnd]);
         if (direct > -1)
-            return [-700 /* NotStart */ - word.length, direct, direct + this.pattern.length];
+            return this.ret(-700 /* Penalty.NotStart */ - word.length, [direct, direct + this.pattern.length]);
         if (adjacentTo == len)
-            return [-200 /* CaseFold */ + -700 /* NotStart */ - word.length, adjacentStart, adjacentEnd];
+            return this.ret(-200 /* Penalty.CaseFold */ + -700 /* Penalty.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 this.result(-100 /* Penalty.ByWord */ + (byWordFolded ? -200 /* Penalty.CaseFold */ : 0) + -700 /* Penalty.NotStart */ +
+                (wordAdjacent ? 0 : -1100 /* Penalty.Gap */), byWord, word);
+        return chars.length == 2 ? false
+            : this.result((any[0] ? -700 /* Penalty.NotStart */ : 0) + -200 /* Penalty.CaseFold */ + -1100 /* Penalty.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);
     }
 }
 
@@ -345,7 +353,7 @@ const completionConfig = /*@__PURE__*/Facet.define({
 function joinClass(a, b) {
     return a ? b ? a + " " + b : a : b;
 }
-function defaultPositionInfo(view, list, option, info, space) {
+function defaultPositionInfo(view, list, option, info, space, tooltip) {
     let rtl = view.textDirection == Direction.RTL, left = rtl, narrow = false;
     let side = "top", offset, maxWidth;
     let spaceLeft = list.left - space.left, spaceRight = space.right - list.right;
@@ -356,11 +364,11 @@ function defaultPositionInfo(view, list, option, info, space) {
         left = true;
     if (infoWidth <= (left ? spaceLeft : spaceRight)) {
         offset = Math.max(space.top, Math.min(option.top, space.bottom - infoHeight)) - list.top;
-        maxWidth = Math.min(400 /* Width */, left ? spaceLeft : spaceRight);
+        maxWidth = Math.min(400 /* Info.Width */, left ? spaceLeft : spaceRight);
     }
     else {
         narrow = true;
-        maxWidth = Math.min(400 /* Width */, (rtl ? list.right : space.right - list.left) - 30 /* Margin */);
+        maxWidth = Math.min(400 /* Info.Width */, (rtl ? list.right : space.right - list.left) - 30 /* Info.Margin */);
         let spaceBelow = space.bottom - list.bottom;
         if (spaceBelow >= infoHeight || spaceBelow > list.top) { // Below the completion
             offset = option.bottom - list.top;
@@ -370,8 +378,10 @@ function defaultPositionInfo(view, list, option, info, space) {
             offset = list.bottom - option.top;
         }
     }
+    let scaleY = (list.bottom - list.top) / tooltip.offsetHeight;
+    let scaleX = (list.right - list.left) / tooltip.offsetWidth;
     return {
-        style: `${side}: ${offset}px; max-width: ${maxWidth}px`,
+        style: `${side}: ${offset / scaleY}px; max-width: ${maxWidth / scaleX}px`,
         class: "cm-completionInfo-" + (narrow ? (rtl ? "left-narrow" : "right-narrow") : left ? "left" : "right")
     };
 }
@@ -394,8 +404,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)));
@@ -591,7 +601,7 @@ class CompletionTooltip {
         if (selRect.top > Math.min(space.bottom, listRect.bottom) - 10 ||
             selRect.bottom < Math.max(space.top, listRect.top) + 10)
             return null;
-        return this.view.state.facet(completionConfig).positionInfo(this.view, listRect, selRect, infoRect, space);
+        return this.view.state.facet(completionConfig).positionInfo(this.view, listRect, selRect, infoRect, space, this.dom);
     }
     placeInfo(pos) {
         if (this.info) {
@@ -665,10 +675,11 @@ function completionTooltip(stateField, applyCompletion) {
 function scrollIntoView(container, element) {
     let parent = container.getBoundingClientRect();
     let self = element.getBoundingClientRect();
+    let scaleY = parent.height / container.offsetHeight;
     if (self.top < parent.top)
-        container.scrollTop -= parent.top - self.top;
+        container.scrollTop -= (parent.top - self.top) / scaleY;
     else if (self.bottom > parent.bottom)
-        container.scrollTop += self.bottom - parent.bottom;
+        container.scrollTop += (self.bottom - parent.bottom) / scaleY;
 }
 
 // Used to pick a preferred option when two options with the same
@@ -693,21 +704,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)));
                     }
             }
         }
@@ -754,7 +762,7 @@ class CompletionDialog {
     static build(active, state, id, prev, conf) {
         let options = sortOptions(active, state);
         if (!options.length) {
-            return prev && active.some(a => a.state == 1 /* Pending */) ?
+            return prev && active.some(a => a.state == 1 /* State.Pending */) ?
                 new CompletionDialog(prev.options, prev.attrs, prev.tooltip, prev.timestamp, prev.selected, true) : null;
         }
         let selected = state.facet(completionConfig).selectOnOpen ? 0 : -1;
@@ -791,7 +799,7 @@ class CompletionState {
             state.languageDataAt("autocomplete", cur(state)).map(asSource);
         let active = sources.map(source => {
             let value = this.active.find(s => s.source == source) ||
-                new ActiveSource(source, this.active.some(a => a.state != 0 /* Inactive */) ? 1 /* Pending */ : 0 /* Inactive */);
+                new ActiveSource(source, this.active.some(a => a.state != 0 /* State.Inactive */) ? 1 /* State.Pending */ : 0 /* State.Inactive */);
             return value.update(tr, conf);
         });
         if (active.length == this.active.length && active.every((a, i) => a == this.active[i]))
@@ -802,10 +810,10 @@ class CompletionState {
         if (tr.selection || active.some(a => a.hasResult() && tr.changes.touchesRange(a.from, a.to)) ||
             !sameResults(active, this.active))
             open = CompletionDialog.build(active, state, this.id, open, conf);
-        else if (open && open.disabled && !active.some(a => a.state == 1 /* Pending */))
+        else if (open && open.disabled && !active.some(a => a.state == 1 /* State.Pending */))
             open = null;
-        if (!open && active.every(a => a.state != 1 /* Pending */) && active.some(a => a.hasResult()))
-            active = active.map(a => a.hasResult() ? new ActiveSource(a.source, 0 /* Inactive */) : a);
+        if (!open && active.every(a => a.state != 1 /* State.Pending */) && active.some(a => a.hasResult()))
+            active = active.map(a => a.hasResult() ? new ActiveSource(a.source, 0 /* State.Inactive */) : a);
         for (let effect of tr.effects)
             if (effect.is(setSelectedEffect))
                 open = open && open.setSelected(effect.value, this.id);
@@ -859,13 +867,13 @@ class ActiveSource {
             value = value.handleUserEvent(tr, event, conf);
         else if (tr.docChanged)
             value = value.handleChange(tr);
-        else if (tr.selection && value.state != 0 /* Inactive */)
-            value = new ActiveSource(value.source, 0 /* Inactive */);
+        else if (tr.selection && value.state != 0 /* State.Inactive */)
+            value = new ActiveSource(value.source, 0 /* State.Inactive */);
         for (let effect of tr.effects) {
             if (effect.is(startCompletionEffect))
-                value = new ActiveSource(value.source, 1 /* Pending */, effect.value ? cur(tr.state) : -1);
+                value = new ActiveSource(value.source, 1 /* State.Pending */, effect.value ? cur(tr.state) : -1);
             else if (effect.is(closeCompletionEffect))
-                value = new ActiveSource(value.source, 0 /* Inactive */);
+                value = new ActiveSource(value.source, 0 /* State.Inactive */);
             else if (effect.is(setActiveEffect))
                 for (let active of effect.value)
                     if (active.source == value.source)
@@ -874,10 +882,10 @@ class ActiveSource {
         return value;
     }
     handleUserEvent(tr, type, conf) {
-        return type == "delete" || !conf.activateOnTyping ? this.map(tr.changes) : new ActiveSource(this.source, 1 /* Pending */);
+        return type == "delete" || !conf.activateOnTyping ? this.map(tr.changes) : new ActiveSource(this.source, 1 /* State.Pending */);
     }
     handleChange(tr) {
-        return tr.changes.touchesRange(cur(tr.startState)) ? new ActiveSource(this.source, 0 /* Inactive */) : this.map(tr.changes);
+        return tr.changes.touchesRange(cur(tr.startState)) ? new ActiveSource(this.source, 0 /* State.Inactive */) : this.map(tr.changes);
     }
     map(changes) {
         return changes.empty || this.explicitPos < 0 ? this : new ActiveSource(this.source, this.state, changes.mapPos(this.explicitPos));
@@ -885,7 +893,7 @@ class ActiveSource {
 }
 class ActiveResult extends ActiveSource {
     constructor(source, explicitPos, result, from, to) {
-        super(source, 2 /* Result */, explicitPos);
+        super(source, 2 /* State.Result */, explicitPos);
         this.result = result;
         this.from = from;
         this.to = to;
@@ -898,17 +906,17 @@ class ActiveResult extends ActiveSource {
         if ((this.explicitPos < 0 ? pos <= from : pos < this.from) ||
             pos > to ||
             type == "delete" && cur(tr.startState) == this.from)
-            return new ActiveSource(this.source, type == "input" && conf.activateOnTyping ? 1 /* Pending */ : 0 /* Inactive */);
+            return new ActiveSource(this.source, type == "input" && conf.activateOnTyping ? 1 /* State.Pending */ : 0 /* State.Inactive */);
         let explicitPos = this.explicitPos < 0 ? -1 : tr.changes.mapPos(this.explicitPos), updated;
         if (checkValid(this.result.validFor, tr.state, from, to))
             return new ActiveResult(this.source, explicitPos, this.result, from, to);
         if (this.result.update &&
             (updated = this.result.update(this.result, from, to, new CompletionContext(tr.state, pos, explicitPos >= 0))))
             return new ActiveResult(this.source, explicitPos, updated, updated.from, (_a = updated.to) !== null && _a !== void 0 ? _a : cur(tr.state));
-        return new ActiveSource(this.source, 1 /* Pending */, explicitPos);
+        return new ActiveSource(this.source, 1 /* State.Pending */, explicitPos);
     }
     handleChange(tr) {
-        return tr.changes.touchesRange(this.from, this.to) ? new ActiveSource(this.source, 0 /* Inactive */) : this.map(tr.changes);
+        return tr.changes.touchesRange(this.from, this.to) ? new ActiveSource(this.source, 0 /* State.Inactive */) : this.map(tr.changes);
     }
     map(mapping) {
         return mapping.empty ? this :
@@ -994,7 +1002,7 @@ Close the currently active completion.
 */
 const closeCompletion = (view) => {
     let cState = view.state.field(completionState, false);
-    if (!cState || !cState.active.some(a => a.state != 0 /* Inactive */))
+    if (!cState || !cState.active.some(a => a.state != 0 /* State.Inactive */))
         return false;
     view.dispatch({ effects: closeCompletionEffect.of(null) });
     return true;
@@ -1017,9 +1025,9 @@ const completionPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
         this.debounceUpdate = -1;
         this.running = [];
         this.debounceAccept = -1;
-        this.composing = 0 /* None */;
+        this.composing = 0 /* CompositionState.None */;
         for (let active of view.state.field(completionState).active)
-            if (active.state == 1 /* Pending */)
+            if (active.state == 1 /* State.Pending */)
                 this.startQuery(active);
     }
     update(update) {
@@ -1050,21 +1058,21 @@ const completionPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
         }
         if (this.debounceUpdate > -1)
             clearTimeout(this.debounceUpdate);
-        this.debounceUpdate = cState.active.some(a => a.state == 1 /* Pending */ && !this.running.some(q => q.active.source == a.source))
+        this.debounceUpdate = cState.active.some(a => a.state == 1 /* State.Pending */ && !this.running.some(q => q.active.source == a.source))
             ? setTimeout(() => this.startUpdate(), DebounceTime) : -1;
-        if (this.composing != 0 /* None */)
+        if (this.composing != 0 /* CompositionState.None */)
             for (let tr of update.transactions) {
                 if (getUserEvent(tr) == "input")
-                    this.composing = 2 /* Changed */;
-                else if (this.composing == 2 /* Changed */ && tr.selection)
-                    this.composing = 3 /* ChangedAndMoved */;
+                    this.composing = 2 /* CompositionState.Changed */;
+                else if (this.composing == 2 /* CompositionState.Changed */ && tr.selection)
+                    this.composing = 3 /* CompositionState.ChangedAndMoved */;
             }
     }
     startUpdate() {
         this.debounceUpdate = -1;
         let { state } = this.view, cState = state.field(completionState);
         for (let active of cState.active) {
-            if (active.state == 1 /* Pending */ && !this.running.some(r => r.active.source == active.source))
+            if (active.state == 1 /* State.Pending */ && !this.running.some(r => r.active.source == active.source))
                 this.startQuery(active);
         }
     }
@@ -1115,14 +1123,14 @@ const completionPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
                 }
             }
             let current = this.view.state.field(completionState).active.find(a => a.source == query.active.source);
-            if (current && current.state == 1 /* Pending */) {
+            if (current && current.state == 1 /* State.Pending */) {
                 if (query.done == null) {
                     // Explicitly failed. Should clear the pending status if it
                     // hasn't been re-set in the meantime.
-                    let active = new ActiveSource(query.active.source, 0 /* Inactive */);
+                    let active = new ActiveSource(query.active.source, 0 /* State.Inactive */);
                     for (let tr of query.updates)
                         active = active.update(tr, conf);
-                    if (active.state != 1 /* Pending */)
+                    if (active.state != 1 /* State.Pending */)
                         updated.push(active);
                 }
                 else {
@@ -1145,15 +1153,15 @@ const completionPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
             }
         },
         compositionstart() {
-            this.composing = 1 /* Started */;
+            this.composing = 1 /* CompositionState.Started */;
         },
         compositionend() {
-            if (this.composing == 3 /* ChangedAndMoved */) {
+            if (this.composing == 3 /* CompositionState.ChangedAndMoved */) {
                 // Safari fires compositionend events synchronously, possibly
                 // from inside an update, so dispatch asynchronously to avoid reentrancy
                 setTimeout(() => this.view.dispatch({ effects: startCompletionEffect.of(false) }), 20);
             }
-            this.composing = 0 /* None */;
+            this.composing = 0 /* CompositionState.None */;
         }
     }
 });
@@ -1213,13 +1221,13 @@ const baseTheme = /*@__PURE__*/EditorView.baseTheme({
         position: "absolute",
         padding: "3px 9px",
         width: "max-content",
-        maxWidth: `${400 /* Width */}px`,
+        maxWidth: `${400 /* Info.Width */}px`,
         boxSizing: "border-box"
     },
     ".cm-completionInfo.cm-completionInfo-left": { right: "100%" },
     ".cm-completionInfo.cm-completionInfo-right": { left: "100%" },
-    ".cm-completionInfo.cm-completionInfo-left-narrow": { right: `${30 /* Margin */}px` },
-    ".cm-completionInfo.cm-completionInfo-right-narrow": { left: `${30 /* Margin */}px` },
+    ".cm-completionInfo.cm-completionInfo-left-narrow": { right: `${30 /* Info.Margin */}px` },
+    ".cm-completionInfo.cm-completionInfo-right-narrow": { left: `${30 /* Info.Margin */}px` },
     "&light .cm-snippetField": { backgroundColor: "#00000022" },
     "&dark .cm-snippetField": { backgroundColor: "#ffffff22" },
     ".cm-snippetFieldPosition": {
@@ -1470,7 +1478,8 @@ function moveField(dir) {
         let next = active.active + dir, last = dir > 0 && !active.ranges.some(r => r.field == next + dir);
         dispatch(state.update({
             selection: fieldSelection(active.ranges, next),
-            effects: setActive.of(last ? null : new ActiveSnippet(active.ranges, next))
+            effects: setActive.of(last ? null : new ActiveSnippet(active.ranges, next)),
+            scrollIntoView: true
         }));
         return true;
     };
@@ -1542,7 +1551,9 @@ const snippetPointerHandler = /*@__PURE__*/EditorView.domEventHandlers({
             return false;
         view.dispatch({
             selection: fieldSelection(active.ranges, match.field),
-            effects: setActive.of(active.ranges.some(r => r.field > match.field) ? new ActiveSnippet(active.ranges, match.field) : null)
+            effects: setActive.of(active.ranges.some(r => r.field > match.field)
+                ? new ActiveSnippet(active.ranges, match.field) : null),
+            scrollIntoView: true
         });
         return true;
     }
@@ -1572,7 +1583,7 @@ function storeWords(doc, wordRE, result, seen, ignoreAt) {
             if (!seen[m[0]] && pos + m.index != ignoreAt) {
                 result.push({ type: "text", label: m[0] });
                 seen[m[0]] = true;
-                if (result.length >= 2000 /* MaxList */)
+                if (result.length >= 2000 /* C.MaxList */)
                     return;
             }
         }
@@ -1580,7 +1591,7 @@ function storeWords(doc, wordRE, result, seen, ignoreAt) {
     }
 }
 function collectWords(doc, cache, wordRE, to, ignoreAt) {
-    let big = doc.length >= 1000 /* MinCacheLen */;
+    let big = doc.length >= 1000 /* C.MinCacheLen */;
     let cached = big && cache.get(doc);
     if (cached)
         return cached;
@@ -1588,7 +1599,7 @@ function collectWords(doc, cache, wordRE, to, ignoreAt) {
     if (doc.children) {
         let pos = 0;
         for (let ch of doc.children) {
-            if (ch.length >= 1000 /* MinCacheLen */) {
+            if (ch.length >= 1000 /* C.MinCacheLen */) {
                 for (let c of collectWords(ch, cache, wordRE, to - pos, ignoreAt - pos)) {
                     if (!seen[c.label]) {
                         seen[c.label] = true;
@@ -1605,7 +1616,7 @@ function collectWords(doc, cache, wordRE, to, ignoreAt) {
     else {
         storeWords(doc, wordRE, result, seen, ignoreAt);
     }
-    if (big && result.length < 2000 /* MaxList */)
+    if (big && result.length < 2000 /* C.MaxList */)
         cache.set(doc, result);
     return result;
 }
@@ -1621,7 +1632,7 @@ const completeAnyWord = context => {
     if (!token && !context.explicit)
         return null;
     let from = token ? token.from : context.pos;
-    let options = collectWords(context.state.doc, wordCache(wordChars), re, 50000 /* Range */, from);
+    let options = collectWords(context.state.doc, wordCache(wordChars), re, 50000 /* C.Range */, from);
     return { from, options, validFor: mapRE(re, s => "^" + s) };
 };
 
@@ -1913,8 +1924,8 @@ returns `null`.
 */
 function completionStatus(state) {
     let cState = state.field(completionState, false);
-    return cState && cState.active.some(a => a.state == 1 /* Pending */) ? "pending"
-        : cState && cState.active.some(a => a.state != 0 /* Inactive */) ? "active" : null;
+    return cState && cState.active.some(a => a.state == 1 /* State.Pending */) ? "pending"
+        : cState && cState.active.some(a => a.state != 0 /* State.Inactive */) ? "active" : null;
 }
 const completionArrayCache = /*@__PURE__*/new WeakMap;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/autocomplete",
-  "version": "6.8.1",
+  "version": "6.9.1",
   "description": "Autocompletion for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -28,7 +28,7 @@
   "dependencies": {
     "@codemirror/language": "^6.0.0",
     "@codemirror/state": "^6.0.0",
-    "@codemirror/view": "^6.6.0",
+    "@codemirror/view": "^6.17.0",
     "@lezer/common": "^1.0.0"
   },
   "peerDependencies": {