@codemirror/autocomplete 6.3.4 → 6.4.1

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 6.4.1 (2023-02-14)
+
+### Bug fixes
+
+Don't consider node names in trees that aren't the same language as the one at the completion position in `ifIn` and `ifNotIn`.
+
+Make sure completions that exactly match the input get a higher score than those that don't (so that even if the latter has a score boost, it ends up lower in the list).
+
+## 6.4.0 (2022-12-14)
+
+### Bug fixes
+
+Fix an issue where the extension would sometimes try to draw a disabled dialog at an outdated position, leading to plugin crashes.
+
+### New features
+
+A `tooltipClass` option to autocompletion can now be used to add additional CSS classes to the completion tooltip.
+
 ## 6.3.4 (2022-11-24)
 
 ### Bug fixes

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (C) 2018-2021 by Marijn Haverbeke <marijnh@gmail.com> and others
+Copyright (C) 2018-2021 by Marijn Haverbeke <marijn@haverbeke.berlin> and others
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/index.cjs

@@ -112,9 +112,12 @@ cursor is in a syntax node with one of the given names.
 */
 function ifIn(nodes, source) {
     return (context) => {
-        for (let pos = language.syntaxTree(context.state).resolveInner(context.pos, -1); pos; pos = pos.parent)
+        for (let pos = language.syntaxTree(context.state).resolveInner(context.pos, -1); pos; pos = pos.parent) {
             if (nodes.indexOf(pos.name) > -1)
                 return source(context);
+            if (pos.type.isTop)
+                break;
+        }
         return null;
     };
 }
@@ -124,9 +127,12 @@ cursor is in a syntax node with one of the given names.
 */
 function ifNotIn(nodes, source) {
     return (context) => {
-        for (let pos = language.syntaxTree(context.state).resolveInner(context.pos, -1); pos; pos = pos.parent)
+        for (let pos = language.syntaxTree(context.state).resolveInner(context.pos, -1); pos; pos = pos.parent) {
             if (nodes.indexOf(pos.name) > -1)
                 return null;
+            if (pos.type.isTop)
+                break;
+        }
         return source(context);
     };
 }
@@ -231,13 +237,18 @@ class FuzzyMatcher {
         // For single-character queries, only match when they occur right
         // at the start
         if (chars.length == 1) {
-            let first = state.codePointAt(word, 0);
-            return first == chars[0] ? [0, 0, state.codePointSize(first)]
-                : first == folded[0] ? [-200 /* Penalty.CaseFold */, 0, state.codePointSize(first)] : null;
+            let first = state.codePointAt(word, 0), firstSize = state.codePointSize(first);
+            let score = firstSize == word.length ? 0 : -100 /* Penalty.NotFull */;
+            if (first == chars[0]) ;
+            else if (first == folded[0])
+                score += -200 /* Penalty.CaseFold */;
+            else
+                return null;
+            return [score, 0, firstSize];
         }
         let direct = word.indexOf(this.pattern);
         if (direct == 0)
-            return [0, 0, this.pattern.length];
+            return [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;) {
@@ -293,7 +304,7 @@ class FuzzyMatcher {
         if (byWordTo == len && byWord[0] == 0 && wordAdjacent)
             return this.result(-100 /* Penalty.ByWord */ + (byWordFolded ? -200 /* Penalty.CaseFold */ : 0), byWord, word);
         if (adjacentTo == len && adjacentStart == 0)
-            return [-200 /* Penalty.CaseFold */ - word.length, 0, adjacentEnd];
+            return [-200 /* Penalty.CaseFold */ - word.length + (adjacentEnd == word.length ? 0 : -100 /* Penalty.NotFull */), 0, adjacentEnd];
         if (direct > -1)
             return [-700 /* Penalty.NotStart */ - word.length, direct, direct + this.pattern.length];
         if (adjacentTo == len)
@@ -327,6 +338,7 @@ const completionConfig = state.Facet.define({
             closeOnBlur: true,
             maxRenderedOptions: 100,
             defaultKeymap: true,
+            tooltipClass: () => "",
             optionClass: () => "",
             aboveCursor: false,
             icons: true,
@@ -337,6 +349,7 @@ const completionConfig = state.Facet.define({
             defaultKeymap: (a, b) => a && b,
             closeOnBlur: (a, b) => a && b,
             icons: (a, b) => a && b,
+            tooltipClass: (a, b) => c => joinClass(a(c), b(c)),
             optionClass: (a, b) => c => joinClass(a(c), b(c)),
             addToOptions: (a, b) => a.concat(b)
         });
@@ -415,14 +428,17 @@ class CompletionTooltip {
             key: this
         };
         this.space = null;
+        this.currentClass = "";
         let cState = view.state.field(stateField);
         let { options, selected } = cState.open;
         let config = view.state.facet(completionConfig);
         this.optionContent = optionContent(config);
         this.optionClass = config.optionClass;
+        this.tooltipClass = config.tooltipClass;
         this.range = rangeAroundSelected(options.length, selected, config.maxRenderedOptions);
         this.dom = document.createElement("div");
         this.dom.className = "cm-tooltip-autocomplete";
+        this.updateTooltipClass(view.state);
         this.dom.addEventListener("mousedown", (e) => {
             for (let dom = e.target, match; dom && dom != this.dom; dom = dom.parentNode) {
                 if (dom.nodeName == "LI" && (match = /-(\d+)$/.exec(dom.id)) && +match[1] < options.length) {
@@ -443,12 +459,25 @@ class CompletionTooltip {
         var _a, _b, _c;
         let cState = update.state.field(this.stateField);
         let prevState = update.startState.field(this.stateField);
+        this.updateTooltipClass(update.state);
         if (cState != prevState) {
             this.updateSel();
             if (((_a = cState.open) === null || _a === void 0 ? void 0 : _a.disabled) != ((_b = prevState.open) === null || _b === void 0 ? void 0 : _b.disabled))
                 this.dom.classList.toggle("cm-tooltip-autocomplete-disabled", !!((_c = cState.open) === null || _c === void 0 ? void 0 : _c.disabled));
         }
     }
+    updateTooltipClass(state) {
+        let cls = this.tooltipClass(state);
+        if (cls != this.currentClass) {
+            for (let c of this.currentClass.split(" "))
+                if (c)
+                    this.dom.classList.remove(c);
+            for (let c of cls.split(" "))
+                if (c)
+                    this.dom.classList.add(c);
+            this.currentClass = cls;
+        }
+    }
     positioned(space) {
         this.space = space;
         if (this.info)
@@ -709,13 +738,13 @@ class CompletionState {
         if (active.length == this.active.length && active.every((a, i) => a == this.active[i]))
             active = this.active;
         let open = this.open;
+        if (open && tr.docChanged)
+            open = open.map(tr.changes);
         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, this.open, conf);
+            open = CompletionDialog.build(active, state, this.id, open, conf);
         else if (open && open.disabled && !active.some(a => a.state == 1 /* State.Pending */))
             open = null;
-        else if (open && tr.docChanged)
-            open = open.map(tr.changes);
         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)

package/dist/index.d.ts

@@ -50,6 +50,11 @@ interface CompletionConfig {
     */
     aboveCursor?: boolean;
     /**
+    When given, this may return an additional CSS class to add to
+    the completion dialog element.
+    */
+    tooltipClass?: (state: EditorState) => string;
+    /**
     This can be used to add additional CSS classes to completion
     options.
     */

package/dist/index.js

@@ -108,9 +108,12 @@ cursor is in a syntax node with one of the given names.
 */
 function ifIn(nodes, source) {
     return (context) => {
-        for (let pos = syntaxTree(context.state).resolveInner(context.pos, -1); pos; pos = pos.parent)
+        for (let pos = syntaxTree(context.state).resolveInner(context.pos, -1); pos; pos = pos.parent) {
             if (nodes.indexOf(pos.name) > -1)
                 return source(context);
+            if (pos.type.isTop)
+                break;
+        }
         return null;
     };
 }
@@ -120,9 +123,12 @@ cursor is in a syntax node with one of the given names.
 */
 function ifNotIn(nodes, source) {
     return (context) => {
-        for (let pos = syntaxTree(context.state).resolveInner(context.pos, -1); pos; pos = pos.parent)
+        for (let pos = syntaxTree(context.state).resolveInner(context.pos, -1); pos; pos = pos.parent) {
             if (nodes.indexOf(pos.name) > -1)
                 return null;
+            if (pos.type.isTop)
+                break;
+        }
         return source(context);
     };
 }
@@ -227,13 +233,18 @@ class FuzzyMatcher {
         // For single-character queries, only match when they occur right
         // at the start
         if (chars.length == 1) {
-            let first = codePointAt(word, 0);
-            return first == chars[0] ? [0, 0, codePointSize(first)]
-                : first == folded[0] ? [-200 /* Penalty.CaseFold */, 0, codePointSize(first)] : null;
+            let first = codePointAt(word, 0), firstSize = codePointSize(first);
+            let score = firstSize == word.length ? 0 : -100 /* Penalty.NotFull */;
+            if (first == chars[0]) ;
+            else if (first == folded[0])
+                score += -200 /* Penalty.CaseFold */;
+            else
+                return null;
+            return [score, 0, firstSize];
         }
         let direct = word.indexOf(this.pattern);
         if (direct == 0)
-            return [0, 0, this.pattern.length];
+            return [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;) {
@@ -289,7 +300,7 @@ class FuzzyMatcher {
         if (byWordTo == len && byWord[0] == 0 && wordAdjacent)
             return this.result(-100 /* Penalty.ByWord */ + (byWordFolded ? -200 /* Penalty.CaseFold */ : 0), byWord, word);
         if (adjacentTo == len && adjacentStart == 0)
-            return [-200 /* Penalty.CaseFold */ - word.length, 0, adjacentEnd];
+            return [-200 /* Penalty.CaseFold */ - word.length + (adjacentEnd == word.length ? 0 : -100 /* Penalty.NotFull */), 0, adjacentEnd];
         if (direct > -1)
             return [-700 /* Penalty.NotStart */ - word.length, direct, direct + this.pattern.length];
         if (adjacentTo == len)
@@ -323,6 +334,7 @@ const completionConfig = /*@__PURE__*/Facet.define({
             closeOnBlur: true,
             maxRenderedOptions: 100,
             defaultKeymap: true,
+            tooltipClass: () => "",
             optionClass: () => "",
             aboveCursor: false,
             icons: true,
@@ -333,6 +345,7 @@ const completionConfig = /*@__PURE__*/Facet.define({
             defaultKeymap: (a, b) => a && b,
             closeOnBlur: (a, b) => a && b,
             icons: (a, b) => a && b,
+            tooltipClass: (a, b) => c => joinClass(a(c), b(c)),
             optionClass: (a, b) => c => joinClass(a(c), b(c)),
             addToOptions: (a, b) => a.concat(b)
         });
@@ -411,14 +424,17 @@ class CompletionTooltip {
             key: this
         };
         this.space = null;
+        this.currentClass = "";
         let cState = view.state.field(stateField);
         let { options, selected } = cState.open;
         let config = view.state.facet(completionConfig);
         this.optionContent = optionContent(config);
         this.optionClass = config.optionClass;
+        this.tooltipClass = config.tooltipClass;
         this.range = rangeAroundSelected(options.length, selected, config.maxRenderedOptions);
         this.dom = document.createElement("div");
         this.dom.className = "cm-tooltip-autocomplete";
+        this.updateTooltipClass(view.state);
         this.dom.addEventListener("mousedown", (e) => {
             for (let dom = e.target, match; dom && dom != this.dom; dom = dom.parentNode) {
                 if (dom.nodeName == "LI" && (match = /-(\d+)$/.exec(dom.id)) && +match[1] < options.length) {
@@ -439,12 +455,25 @@ class CompletionTooltip {
         var _a, _b, _c;
         let cState = update.state.field(this.stateField);
         let prevState = update.startState.field(this.stateField);
+        this.updateTooltipClass(update.state);
         if (cState != prevState) {
             this.updateSel();
             if (((_a = cState.open) === null || _a === void 0 ? void 0 : _a.disabled) != ((_b = prevState.open) === null || _b === void 0 ? void 0 : _b.disabled))
                 this.dom.classList.toggle("cm-tooltip-autocomplete-disabled", !!((_c = cState.open) === null || _c === void 0 ? void 0 : _c.disabled));
         }
     }
+    updateTooltipClass(state) {
+        let cls = this.tooltipClass(state);
+        if (cls != this.currentClass) {
+            for (let c of this.currentClass.split(" "))
+                if (c)
+                    this.dom.classList.remove(c);
+            for (let c of cls.split(" "))
+                if (c)
+                    this.dom.classList.add(c);
+            this.currentClass = cls;
+        }
+    }
     positioned(space) {
         this.space = space;
         if (this.info)
@@ -705,13 +734,13 @@ class CompletionState {
         if (active.length == this.active.length && active.every((a, i) => a == this.active[i]))
             active = this.active;
         let open = this.open;
+        if (open && tr.docChanged)
+            open = open.map(tr.changes);
         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, this.open, conf);
+            open = CompletionDialog.build(active, state, this.id, open, conf);
         else if (open && open.disabled && !active.some(a => a.state == 1 /* State.Pending */))
             open = null;
-        else if (open && tr.docChanged)
-            open = open.map(tr.changes);
         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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/autocomplete",
-  "version": "6.3.4",
+  "version": "6.4.1",
   "description": "Autocompletion for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -12,7 +12,7 @@
   ],
   "author": {
     "name": "Marijn Haverbeke",
-    "email": "marijnh@gmail.com",
+    "email": "marijn@haverbeke.berlin",
     "url": "http://marijnhaverbeke.nl"
   },
   "type": "module",