@codemirror/autocomplete 0.19.7 → 0.19.11

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## 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
+
+Give the completion tooltip a minimal width, and show ellipsis when completions overflow the tooltip width.
+
+### New features
+
+`autocompletion` now accepts an `aboveCursor` option to make the completion tooltip show up above the cursor.
+
 ## 0.19.7 (2021-11-16)
 
 ### 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)
@@ -309,6 +313,7 @@ const completionConfig = state.Facet.define({
             maxRenderedOptions: 100,
             defaultKeymap: true,
             optionClass: () => "",
+            aboveCursor: false,
             icons: true,
             addToOptions: []
         }, {
@@ -482,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))
@@ -495,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) {
@@ -591,7 +600,7 @@ class CompletionDialog {
         return selected == this.selected || selected >= this.options.length ? this
             : new CompletionDialog(this.options, makeAttrs(id, selected), this.tooltip, this.timestamp, selected);
     }
-    static build(active, state, id, prev) {
+    static build(active, state, id, prev, conf) {
         let options = sortOptions(active, state);
         if (!options.length)
             return null;
@@ -605,7 +614,8 @@ class CompletionDialog {
         }
         return new CompletionDialog(options, makeAttrs(id, selected), {
             pos: active.reduce((a, b) => b.hasResult() ? Math.min(a, b.from) : a, 1e8),
-            create: completionTooltip(completionState)
+            create: completionTooltip(completionState),
+            above: conf.aboveCursor,
         }, prev ? prev.timestamp : Date.now(), selected);
     }
     map(changes) {
@@ -633,7 +643,7 @@ class CompletionState {
         if (active.length == this.active.length && active.every((a, i) => a == this.active[i]))
             active = this.active;
         let open = tr.selection || active.some(a => a.hasResult() && tr.changes.touchesRange(a.from, a.to)) ||
-            !sameResults(active, this.active) ? CompletionDialog.build(active, state, this.id, this.open)
+            !sameResults(active, this.active) ? CompletionDialog.build(active, state, this.id, this.open, conf)
             : this.open && tr.docChanged ? this.open.map(tr.changes) : this.open;
         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);
@@ -773,7 +783,7 @@ function moveCompletionSelection(forward, by = "option") {
             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));
+            step = Math.max(2, Math.floor(tooltip.offsetHeight / tooltip.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;
@@ -969,22 +979,25 @@ const baseTheme = view.EditorView.baseTheme({
         "& > ul": {
             fontFamily: "monospace",
             whiteSpace: "nowrap",
-            overflow: "auto",
+            overflow: "hidden auto",
             maxWidth_fallback: "700px",
             maxWidth: "min(700px, 95vw)",
+            minWidth: "250px",
             maxHeight: "10em",
             listStyle: "none",
             margin: 0,
             padding: 0,
             "& > li": {
+                overflowX: "hidden",
+                textOverflow: "ellipsis",
                 cursor: "pointer",
-                padding: "1px 1em 1px 3px",
+                padding: "1px 3px",
                 lineHeight: 1.2
             },
         }
     },
     "&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.d.ts

@@ -30,6 +30,12 @@ interface CompletionConfig {
     */
     defaultKeymap?: boolean;
     /**
+    By default, completions are shown below the cursor when there is
+    space. Setting this to true will make the extension put the
+    completions above the cursor when possible.
+    */
+    aboveCursor?: boolean;
+    /**
     This can be used to add additional CSS classes to completion
     options.
     */

package/dist/index.js

@@ -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)
@@ -305,6 +309,7 @@ const completionConfig = /*@__PURE__*/Facet.define({
             maxRenderedOptions: 100,
             defaultKeymap: true,
             optionClass: () => "",
+            aboveCursor: false,
             icons: true,
             addToOptions: []
         }, {
@@ -478,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))
@@ -491,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) {
@@ -587,7 +596,7 @@ class CompletionDialog {
         return selected == this.selected || selected >= this.options.length ? this
             : new CompletionDialog(this.options, makeAttrs(id, selected), this.tooltip, this.timestamp, selected);
     }
-    static build(active, state, id, prev) {
+    static build(active, state, id, prev, conf) {
         let options = sortOptions(active, state);
         if (!options.length)
             return null;
@@ -601,7 +610,8 @@ class CompletionDialog {
         }
         return new CompletionDialog(options, makeAttrs(id, selected), {
             pos: active.reduce((a, b) => b.hasResult() ? Math.min(a, b.from) : a, 1e8),
-            create: completionTooltip(completionState)
+            create: completionTooltip(completionState),
+            above: conf.aboveCursor,
         }, prev ? prev.timestamp : Date.now(), selected);
     }
     map(changes) {
@@ -629,7 +639,7 @@ class CompletionState {
         if (active.length == this.active.length && active.every((a, i) => a == this.active[i]))
             active = this.active;
         let open = tr.selection || active.some(a => a.hasResult() && tr.changes.touchesRange(a.from, a.to)) ||
-            !sameResults(active, this.active) ? CompletionDialog.build(active, state, this.id, this.open)
+            !sameResults(active, this.active) ? CompletionDialog.build(active, state, this.id, this.open, conf)
             : this.open && tr.docChanged ? this.open.map(tr.changes) : this.open;
         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);
@@ -769,7 +779,7 @@ function moveCompletionSelection(forward, by = "option") {
             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));
+            step = Math.max(2, Math.floor(tooltip.offsetHeight / tooltip.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;
@@ -965,22 +975,25 @@ const baseTheme = /*@__PURE__*/EditorView.baseTheme({
         "& > ul": {
             fontFamily: "monospace",
             whiteSpace: "nowrap",
-            overflow: "auto",
+            overflow: "hidden auto",
             maxWidth_fallback: "700px",
             maxWidth: "min(700px, 95vw)",
+            minWidth: "250px",
             maxHeight: "10em",
             listStyle: "none",
             margin: 0,
             padding: 0,
             "& > li": {
+                overflowX: "hidden",
+                textOverflow: "ellipsis",
                 cursor: "pointer",
-                padding: "1px 1em 1px 3px",
+                padding: "1px 3px",
                 lineHeight: 1.2
             },
         }
     },
     "&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.7",
+  "version": "0.19.11",
   "description": "Autocompletion for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",