@codemirror/autocomplete 6.3.4 → 6.4.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 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/dist/index.cjs

@@ -327,6 +327,7 @@ const completionConfig = state.Facet.define({
             closeOnBlur: true,
             maxRenderedOptions: 100,
             defaultKeymap: true,
+            tooltipClass: () => "",
             optionClass: () => "",
             aboveCursor: false,
             icons: true,
@@ -337,6 +338,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 +417,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 +448,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 +727,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

@@ -323,6 +323,7 @@ const completionConfig = /*@__PURE__*/Facet.define({
             closeOnBlur: true,
             maxRenderedOptions: 100,
             defaultKeymap: true,
+            tooltipClass: () => "",
             optionClass: () => "",
             aboveCursor: false,
             icons: true,
@@ -333,6 +334,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 +413,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 +444,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 +723,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.0",
   "description": "Autocompletion for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",