@codemirror/autocomplete 0.19.8 → 0.19.12

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## 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
+
+Fix an issue where info tooltips would be visible in an inappropriate position when there was no room to place them properly.
+
 ## 0.19.8 (2021-11-17)
 
 ### 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();
-        let top = Math.min(sel.getBoundingClientRect().top, innerHeight - infoRect.height) - rect.top;
-        if (top < 0 || top > this.list.clientHeight - 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(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))
@@ -496,10 +502,12 @@ class CompletionTooltip {
         return { top, left };
     }
     positionInfo(pos) {
-        if (this.info && pos) {
-            this.info.style.top = pos.top + "px";
-            this.info.classList.toggle("cm-completionInfo-left", pos.left);
-            this.info.classList.toggle("cm-completionInfo-right", !pos.left);
+        if (this.info) {
+            this.info.style.top = (pos ? pos.top : -1e6) + "px";
+            if (pos) {
+                this.info.classList.toggle("cm-completionInfo-left", pos.left);
+                this.info.classList.toggle("cm-completionInfo-right", !pos.left);
+            }
         }
     }
     createListBox(options, id, range) {
@@ -773,9 +781,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;
@@ -989,7 +998,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]": {

package/dist/index.js

@@ -1,6 +1,6 @@
 import { Annotation, Facet, combineConfig, StateEffect, StateField, Prec, EditorSelection, Text } 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();
-        let top = Math.min(sel.getBoundingClientRect().top, innerHeight - infoRect.height) - rect.top;
-        if (top < 0 || top > this.list.clientHeight - 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(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))
@@ -492,10 +498,12 @@ class CompletionTooltip {
         return { top, left };
     }
     positionInfo(pos) {
-        if (this.info && pos) {
-            this.info.style.top = pos.top + "px";
-            this.info.classList.toggle("cm-completionInfo-left", pos.left);
-            this.info.classList.toggle("cm-completionInfo-right", !pos.left);
+        if (this.info) {
+            this.info.style.top = (pos ? pos.top : -1e6) + "px";
+            if (pos) {
+                this.info.classList.toggle("cm-completionInfo-left", pos.left);
+                this.info.classList.toggle("cm-completionInfo-right", !pos.left);
+            }
         }
     }
     createListBox(options, id, range) {
@@ -770,8 +778,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;
@@ -985,7 +994,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]": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/autocomplete",
-  "version": "0.19.8",
+  "version": "0.19.12",
   "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"
   },