@codemirror/autocomplete 0.19.9 → 0.19.13

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## 0.19.13 (2022-02-18)
+
+### Bug fixes
+
+Fix an issue where the completion tooltip stayed open if it was explicitly opened and the user backspaced past its start.
+
+Stop snippet filling when a change happens across one of the snippet fields' boundaries.
+
+## 0.19.12 (2022-01-11)
+
+### Bug fixes
+
+Fix completion navigation with PageUp/Down when the completion tooltip isn't part of the view DOM.
+
+## 0.19.11 (2022-01-11)
+
+### Bug fixes
+
+Fix a bug that caused page up/down to only move the selection by two options in the completion tooltip.
+
+## 0.19.10 (2022-01-05)
+
+### Bug fixes
+
+Make sure the info tooltip is hidden when the selected option is scrolled out of view.
+
+Fix a bug in the completion ranking that would sometimes give options that match the input by word start chars higher scores than appropriate.
+
+Options are now sorted (ascending) by length when their match score is otherwise identical.
+
 ## 0.19.9 (2021-11-26)
 
 ### Bug fixes

package/dist/index.cjs

@@ -246,7 +246,7 @@ class FuzzyMatcher {
         let byWordTo = 0, byWordFolded = false;
         // If we've found a partial adjacent match, these track its state
         let adjacentTo = 0, adjacentStart = -1, adjacentEnd = -1;
-        let hasLower = /[a-z]/.test(word);
+        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;) {
             let next = text.codePointAt(word, i);
@@ -268,26 +268,30 @@ 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 = text.fromCodePoint(next)) != ch.toLowerCase() ? 1 /* Upper */ : ch != ch.toUpperCase() ? 2 /* Lower */ : 0 /* NonWord */);
-            if ((type == 1 /* Upper */ && hasLower || prevType == 0 /* NonWord */ && type != 0 /* NonWord */) &&
-                (chars[byWordTo] == next || (folded[byWordTo] == next && (byWordFolded = true))))
-                byWord[byWordTo++] = i;
+            if (!i || type == 1 /* Upper */ && hasLower || prevType == 0 /* NonWord */ && type != 0 /* NonWord */) {
+                if (chars[byWordTo] == next || (folded[byWordTo] == next && (byWordFolded = true)))
+                    byWord[byWordTo++] = i;
+                else if (byWord.length)
+                    wordAdjacent = false;
+            }
             prevType = type;
             i += text.codePointSize(next);
         }
-        if (byWordTo == len && byWord[0] == 0)
+        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 */, 0, adjacentEnd];
+            return [-200 /* CaseFold */ - word.length, 0, adjacentEnd];
         if (direct > -1)
-            return [-700 /* NotStart */, direct, direct + this.pattern.length];
+            return [-700 /* NotStart */ - word.length, direct, direct + this.pattern.length];
         if (adjacentTo == len)
-            return [-200 /* CaseFold */ + -700 /* NotStart */, adjacentStart, adjacentEnd];
+            return [-200 /* CaseFold */ + -700 /* NotStart */ - word.length, adjacentStart, adjacentEnd];
         if (byWordTo == len)
-            return this.result(-100 /* ByWord */ + (byWordFolded ? -200 /* CaseFold */ : 0) + -700 /* NotStart */, byWord, word);
+            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);
     }
     result(score, positions, word) {
-        let result = [score], i = 1;
+        let result = [score - word.length], i = 1;
         for (let pos of positions) {
             let to = pos + (this.astral ? text.codePointSize(text.codePointAt(word, pos)) : 1);
             if (i > 1 && result[i - 1] == pos)
@@ -483,12 +487,14 @@ class CompletionTooltip {
         let sel = this.dom.querySelector("[aria-selected]");
         if (!sel || !this.info)
             return null;
-        let rect = this.dom.getBoundingClientRect(), infoRect = this.info.getBoundingClientRect();
-        if (rect.top > innerHeight - 10 || rect.bottom < 10)
+        let listRect = this.dom.getBoundingClientRect();
+        let infoRect = this.info.getBoundingClientRect();
+        let selRect = sel.getBoundingClientRect();
+        if (selRect.top > Math.min(innerHeight, listRect.bottom) - 10 || selRect.bottom < Math.max(0, listRect.top) + 10)
             return null;
-        let top = Math.max(0, Math.min(sel.getBoundingClientRect().top, innerHeight - infoRect.height)) - rect.top;
+        let top = Math.max(0, Math.min(selRect.top, innerHeight - infoRect.height)) - listRect.top;
         let left = this.view.textDirection == view.Direction.RTL;
-        let spaceLeft = rect.left, spaceRight = innerWidth - rect.right;
+        let spaceLeft = listRect.left, spaceRight = innerWidth - listRect.right;
         if (left && spaceLeft < Math.min(infoRect.width, spaceRight))
             left = false;
         else if (!left && spaceRight < Math.min(infoRect.width, spaceLeft))
@@ -735,7 +741,9 @@ class ActiveResult extends ActiveSource {
     handleUserEvent(tr, type, conf) {
         let from = tr.changes.mapPos(this.from), to = tr.changes.mapPos(this.to, 1);
         let pos = cur(tr.state);
-        if ((this.explicitPos > -1 ? pos < from : pos <= from) || pos > to)
+        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 */);
         let explicitPos = this.explicitPos < 0 ? -1 : tr.changes.mapPos(this.explicitPos);
         if (this.span && (from == to || this.span.test(tr.state.sliceDoc(from, to))))
@@ -775,9 +783,10 @@ function moveCompletionSelection(forward, by = "option") {
         let cState = view.state.field(completionState, false);
         if (!cState || !cState.open || Date.now() - cState.open.timestamp < CompletionInteractMargin)
             return false;
-        let step = 1, tooltip;
-        if (by == "page" && (tooltip = view.dom.querySelector(".cm-tooltip-autocomplete")))
-            step = Math.max(2, Math.floor(tooltip.offsetHeight / tooltip.firstChild.offsetHeight));
+        let step = 1, tooltip$1;
+        if (by == "page" && (tooltip$1 = tooltip.getTooltip(view, cState.open.tooltip)))
+            step = Math.max(2, Math.floor(tooltip$1.dom.offsetHeight /
+                tooltip$1.dom.querySelector("li").offsetHeight) - 1);
         let selected = cState.open.selected + step * (forward ? 1 : -1), { length } = cState.open.options;
         if (selected < 0)
             selected = by == "page" ? 0 : length - 1;
@@ -991,7 +1000,7 @@ const baseTheme = view.EditorView.baseTheme({
         }
     },
     "&light .cm-tooltip-autocomplete ul li[aria-selected]": {
-        background: "#39e",
+        background: "#17c",
         color: "white",
     },
     "&dark .cm-tooltip-autocomplete ul li[aria-selected]": {
@@ -1086,7 +1095,9 @@ class FieldRange {
         this.to = to;
     }
     map(changes) {
-        return new FieldRange(this.field, changes.mapPos(this.from, -1), changes.mapPos(this.to, 1));
+        let from = changes.mapPos(this.from, -1, state.MapMode.TrackDel);
+        let to = changes.mapPos(this.to, 1, state.MapMode.TrackDel);
+        return from == null || to == null ? null : new FieldRange(this.field, from, to);
     }
 }
 class Snippet {
@@ -1155,7 +1166,14 @@ class ActiveSnippet {
         this.deco = view.Decoration.set(ranges.map(r => (r.from == r.to ? fieldMarker : fieldRange).range(r.from, r.to)));
     }
     map(changes) {
-        return new ActiveSnippet(this.ranges.map(r => r.map(changes)), this.active);
+        let ranges = [];
+        for (let r of this.ranges) {
+            let mapped = r.map(changes);
+            if (!mapped)
+                return null;
+            ranges.push(mapped);
+        }
+        return new ActiveSnippet(ranges, this.active);
     }
     selectionInsideField(sel) {
         return sel.ranges.every(range => this.ranges.some(r => r.field == this.active && r.from <= range.from && r.to >= range.to));

package/dist/index.js

@@ -1,6 +1,6 @@
-import { Annotation, Facet, combineConfig, StateEffect, StateField, Prec, EditorSelection, Text } from '@codemirror/state';
+import { Annotation, Facet, combineConfig, StateEffect, StateField, Prec, EditorSelection, Text, MapMode } from '@codemirror/state';
 import { Direction, logException, EditorView, ViewPlugin, Decoration, WidgetType, keymap } from '@codemirror/view';
-import { showTooltip } from '@codemirror/tooltip';
+import { showTooltip, getTooltip } from '@codemirror/tooltip';
 import { syntaxTree, indentUnit } from '@codemirror/language';
 import { codePointAt, codePointSize, fromCodePoint } from '@codemirror/text';
 
@@ -242,7 +242,7 @@ class FuzzyMatcher {
         let byWordTo = 0, byWordFolded = false;
         // If we've found a partial adjacent match, these track its state
         let adjacentTo = 0, adjacentStart = -1, adjacentEnd = -1;
-        let hasLower = /[a-z]/.test(word);
+        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;) {
             let next = codePointAt(word, i);
@@ -264,26 +264,30 @@ 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 ((type == 1 /* Upper */ && hasLower || prevType == 0 /* NonWord */ && type != 0 /* NonWord */) &&
-                (chars[byWordTo] == next || (folded[byWordTo] == next && (byWordFolded = true))))
-                byWord[byWordTo++] = i;
+            if (!i || type == 1 /* Upper */ && hasLower || prevType == 0 /* NonWord */ && type != 0 /* NonWord */) {
+                if (chars[byWordTo] == next || (folded[byWordTo] == next && (byWordFolded = true)))
+                    byWord[byWordTo++] = i;
+                else if (byWord.length)
+                    wordAdjacent = false;
+            }
             prevType = type;
             i += codePointSize(next);
         }
-        if (byWordTo == len && byWord[0] == 0)
+        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 */, 0, adjacentEnd];
+            return [-200 /* CaseFold */ - word.length, 0, adjacentEnd];
         if (direct > -1)
-            return [-700 /* NotStart */, direct, direct + this.pattern.length];
+            return [-700 /* NotStart */ - word.length, direct, direct + this.pattern.length];
         if (adjacentTo == len)
-            return [-200 /* CaseFold */ + -700 /* NotStart */, adjacentStart, adjacentEnd];
+            return [-200 /* CaseFold */ + -700 /* NotStart */ - word.length, adjacentStart, adjacentEnd];
         if (byWordTo == len)
-            return this.result(-100 /* ByWord */ + (byWordFolded ? -200 /* CaseFold */ : 0) + -700 /* NotStart */, byWord, word);
+            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);
     }
     result(score, positions, word) {
-        let result = [score], i = 1;
+        let result = [score - word.length], i = 1;
         for (let pos of positions) {
             let to = pos + (this.astral ? codePointSize(codePointAt(word, pos)) : 1);
             if (i > 1 && result[i - 1] == pos)
@@ -479,12 +483,14 @@ class CompletionTooltip {
         let sel = this.dom.querySelector("[aria-selected]");
         if (!sel || !this.info)
             return null;
-        let rect = this.dom.getBoundingClientRect(), infoRect = this.info.getBoundingClientRect();
-        if (rect.top > innerHeight - 10 || rect.bottom < 10)
+        let listRect = this.dom.getBoundingClientRect();
+        let infoRect = this.info.getBoundingClientRect();
+        let selRect = sel.getBoundingClientRect();
+        if (selRect.top > Math.min(innerHeight, listRect.bottom) - 10 || selRect.bottom < Math.max(0, listRect.top) + 10)
             return null;
-        let top = Math.max(0, Math.min(sel.getBoundingClientRect().top, innerHeight - infoRect.height)) - rect.top;
+        let top = Math.max(0, Math.min(selRect.top, innerHeight - infoRect.height)) - listRect.top;
         let left = this.view.textDirection == Direction.RTL;
-        let spaceLeft = rect.left, spaceRight = innerWidth - rect.right;
+        let spaceLeft = listRect.left, spaceRight = innerWidth - listRect.right;
         if (left && spaceLeft < Math.min(infoRect.width, spaceRight))
             left = false;
         else if (!left && spaceRight < Math.min(infoRect.width, spaceLeft))
@@ -731,7 +737,9 @@ class ActiveResult extends ActiveSource {
     handleUserEvent(tr, type, conf) {
         let from = tr.changes.mapPos(this.from), to = tr.changes.mapPos(this.to, 1);
         let pos = cur(tr.state);
-        if ((this.explicitPos > -1 ? pos < from : pos <= from) || pos > to)
+        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 */);
         let explicitPos = this.explicitPos < 0 ? -1 : tr.changes.mapPos(this.explicitPos);
         if (this.span && (from == to || this.span.test(tr.state.sliceDoc(from, to))))
@@ -772,8 +780,9 @@ function moveCompletionSelection(forward, by = "option") {
         if (!cState || !cState.open || Date.now() - cState.open.timestamp < CompletionInteractMargin)
             return false;
         let step = 1, tooltip;
-        if (by == "page" && (tooltip = view.dom.querySelector(".cm-tooltip-autocomplete")))
-            step = Math.max(2, Math.floor(tooltip.offsetHeight / tooltip.firstChild.offsetHeight));
+        if (by == "page" && (tooltip = getTooltip(view, cState.open.tooltip)))
+            step = Math.max(2, Math.floor(tooltip.dom.offsetHeight /
+                tooltip.dom.querySelector("li").offsetHeight) - 1);
         let selected = cState.open.selected + step * (forward ? 1 : -1), { length } = cState.open.options;
         if (selected < 0)
             selected = by == "page" ? 0 : length - 1;
@@ -987,7 +996,7 @@ const baseTheme = /*@__PURE__*/EditorView.baseTheme({
         }
     },
     "&light .cm-tooltip-autocomplete ul li[aria-selected]": {
-        background: "#39e",
+        background: "#17c",
         color: "white",
     },
     "&dark .cm-tooltip-autocomplete ul li[aria-selected]": {
@@ -1082,7 +1091,9 @@ class FieldRange {
         this.to = to;
     }
     map(changes) {
-        return new FieldRange(this.field, changes.mapPos(this.from, -1), changes.mapPos(this.to, 1));
+        let from = changes.mapPos(this.from, -1, MapMode.TrackDel);
+        let to = changes.mapPos(this.to, 1, MapMode.TrackDel);
+        return from == null || to == null ? null : new FieldRange(this.field, from, to);
     }
 }
 class Snippet {
@@ -1151,7 +1162,14 @@ class ActiveSnippet {
         this.deco = Decoration.set(ranges.map(r => (r.from == r.to ? fieldMarker : fieldRange).range(r.from, r.to)));
     }
     map(changes) {
-        return new ActiveSnippet(this.ranges.map(r => r.map(changes)), this.active);
+        let ranges = [];
+        for (let r of this.ranges) {
+            let mapped = r.map(changes);
+            if (!mapped)
+                return null;
+            ranges.push(mapped);
+        }
+        return new ActiveSnippet(ranges, this.active);
     }
     selectionInsideField(sel) {
         return sel.ranges.every(range => this.ranges.some(r => r.field == this.active && r.from <= range.from && r.to >= range.to));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/autocomplete",
-  "version": "0.19.9",
+  "version": "0.19.13",
   "description": "Autocompletion for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -29,7 +29,7 @@
     "@codemirror/language": "^0.19.0",
     "@codemirror/state": "^0.19.4",
     "@codemirror/text": "^0.19.2",
-    "@codemirror/tooltip": "^0.19.0",
+    "@codemirror/tooltip": "^0.19.12",
     "@codemirror/view": "^0.19.0",
     "@lezer/common": "^0.15.0"
   },