@codemirror/autocomplete 6.9.1 → 6.10.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 6.10.0 (2023-10-11)
+
+### New features
+
+The new autocompletion configuration option `updateSyncTime` allows control over how long fast sources are held back waiting for slower completion sources.
+
+## 6.9.2 (2023-10-06)
+
+### Bug fixes
+
+Fix a bug in `completeAnyWord` that could cause it to generate invalid regular expressions and crash.
+
 ## 6.9.1 (2023-09-14)
 
 ### Bug fixes

package/dist/index.cjs

@@ -341,7 +341,8 @@ const completionConfig = state.Facet.define({
             addToOptions: [],
             positionInfo: defaultPositionInfo,
             compareCompletions: (a, b) => a.label.localeCompare(b.label),
-            interactionDelay: 75
+            interactionDelay: 75,
+            updateSyncTime: 100
         }, {
             defaultKeymap: (a, b) => a && b,
             closeOnBlur: (a, b) => a && b,
@@ -485,22 +486,32 @@ class CompletionTooltip {
                 e.relatedTarget != view.contentDOM)
                 view.dispatch({ effects: closeCompletionEffect.of(null) });
         });
-        this.list = this.dom.appendChild(this.createListBox(options, cState.id, this.range));
+        this.showOptions(options, cState.id);
+    }
+    mount() { this.updateSel(); }
+    showOptions(options, id) {
+        if (this.list)
+            this.list.remove();
+        this.list = this.dom.appendChild(this.createListBox(options, id, this.range));
         this.list.addEventListener("scroll", () => {
             if (this.info)
                 this.view.requestMeasure(this.placeInfoReq);
         });
     }
-    mount() { this.updateSel(); }
     update(update) {
-        var _a, _b, _c;
+        var _a;
         let cState = update.state.field(this.stateField);
         let prevState = update.startState.field(this.stateField);
         this.updateTooltipClass(update.state);
         if (cState != prevState) {
+            let { options, selected, disabled } = cState.open;
+            if (!prevState.open || prevState.open.options != options) {
+                this.range = rangeAroundSelected(options.length, selected, update.state.facet(completionConfig).maxRenderedOptions);
+                this.showOptions(options, cState.id);
+            }
             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));
+            if (disabled != ((_a = prevState.open) === null || _a === void 0 ? void 0 : _a.disabled))
+                this.dom.classList.toggle("cm-tooltip-autocomplete-disabled", !!disabled);
         }
     }
     updateTooltipClass(state) {
@@ -524,12 +535,7 @@ class CompletionTooltip {
         let cState = this.view.state.field(this.stateField), open = cState.open;
         if (open.selected > -1 && open.selected < this.range.from || open.selected >= this.range.to) {
             this.range = rangeAroundSelected(open.options.length, open.selected, this.view.state.facet(completionConfig).maxRenderedOptions);
-            this.list.remove();
-            this.list = this.dom.appendChild(this.createListBox(open.options, cState.id, this.range));
-            this.list.addEventListener("scroll", () => {
-                if (this.info)
-                    this.view.requestMeasure(this.placeInfoReq);
-            });
+            this.showOptions(open.options, cState.id);
         }
         if (this.updateSelectedOption(open.selected)) {
             this.destroyInfo();
@@ -669,8 +675,6 @@ class CompletionTooltip {
         this.destroyInfo();
     }
 }
-// We allocate a new function instance every time the completion
-// changes to force redrawing/repositioning of the tooltip
 function completionTooltip(stateField, applyCompletion) {
     return (view) => new CompletionTooltip(view, stateField, applyCompletion);
 }
@@ -778,7 +782,7 @@ 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, applyCompletion),
+            create: createTooltip,
             above: conf.aboveCursor,
         }, prev ? prev.timestamp : Date.now(), selected, false);
     }
@@ -954,6 +958,7 @@ function applyCompletion(view, option) {
         apply(view, option.completion, result.from, result.to);
     return true;
 }
+const createTooltip = completionTooltip(completionState, applyCompletion);
 
 /**
 Returns a command that moves the completion selection forward or
@@ -1020,7 +1025,7 @@ class RunningQuery {
         this.done = undefined;
     }
 }
-const DebounceTime = 50, MaxUpdateCount = 50, MinAbortTime = 1000;
+const MaxUpdateCount = 50, MinAbortTime = 1000;
 const completionPlugin = view.ViewPlugin.fromClass(class {
     constructor(view) {
         this.view = view;
@@ -1061,7 +1066,7 @@ const completionPlugin = view.ViewPlugin.fromClass(class {
         if (this.debounceUpdate > -1)
             clearTimeout(this.debounceUpdate);
         this.debounceUpdate = cState.active.some(a => a.state == 1 /* State.Pending */ && !this.running.some(q => q.active.source == a.source))
-            ? setTimeout(() => this.startUpdate(), DebounceTime) : -1;
+            ? setTimeout(() => this.startUpdate(), update.state.facet(completionConfig).updateSyncTime) : -1;
         if (this.composing != 0 /* CompositionState.None */)
             for (let tr of update.transactions) {
                 if (getUserEvent(tr) == "input")
@@ -1097,7 +1102,7 @@ const completionPlugin = view.ViewPlugin.fromClass(class {
         if (this.running.every(q => q.done !== undefined))
             this.accept();
         else if (this.debounceAccept < 0)
-            this.debounceAccept = setTimeout(() => this.accept(), DebounceTime);
+            this.debounceAccept = setTimeout(() => this.accept(), this.view.state.facet(completionConfig).updateSyncTime);
     }
     // For each finished query in this.running, try to create a result
     // or, if appropriate, restart the query.
@@ -1562,7 +1567,7 @@ const snippetPointerHandler = view.EditorView.domEventHandlers({
 });
 
 function wordRE(wordChars) {
-    let escaped = wordChars.replace(/[\\[.+*?(){|^$]/g, "\\$&");
+    let escaped = wordChars.replace(/[\]\-\\]/g, "\\$&");
     try {
         return new RegExp(`[\\p{Alphabetic}\\p{Number}_${escaped}]+`, "ug");
     }

package/dist/index.d.cts

@@ -369,6 +369,13 @@ interface CompletionConfig {
     the tooltip. This option can be used to configure that delay.
     */
     interactionDelay?: number;
+    /**
+    When there are multiple asynchronous completion sources, this
+    controls how long the extension waits for a slow source before
+    displaying results from faster sources. Defaults to 100
+    milliseconds.
+    */
+    updateSyncTime?: number;
 }
 
 /**

package/dist/index.d.ts

@@ -369,6 +369,13 @@ interface CompletionConfig {
     the tooltip. This option can be used to configure that delay.
     */
     interactionDelay?: number;
+    /**
+    When there are multiple asynchronous completion sources, this
+    controls how long the extension waits for a slow source before
+    displaying results from faster sources. Defaults to 100
+    milliseconds.
+    */
+    updateSyncTime?: number;
 }
 
 /**

package/dist/index.js

@@ -339,7 +339,8 @@ const completionConfig = /*@__PURE__*/Facet.define({
             addToOptions: [],
             positionInfo: defaultPositionInfo,
             compareCompletions: (a, b) => a.label.localeCompare(b.label),
-            interactionDelay: 75
+            interactionDelay: 75,
+            updateSyncTime: 100
         }, {
             defaultKeymap: (a, b) => a && b,
             closeOnBlur: (a, b) => a && b,
@@ -483,22 +484,32 @@ class CompletionTooltip {
                 e.relatedTarget != view.contentDOM)
                 view.dispatch({ effects: closeCompletionEffect.of(null) });
         });
-        this.list = this.dom.appendChild(this.createListBox(options, cState.id, this.range));
+        this.showOptions(options, cState.id);
+    }
+    mount() { this.updateSel(); }
+    showOptions(options, id) {
+        if (this.list)
+            this.list.remove();
+        this.list = this.dom.appendChild(this.createListBox(options, id, this.range));
         this.list.addEventListener("scroll", () => {
             if (this.info)
                 this.view.requestMeasure(this.placeInfoReq);
         });
     }
-    mount() { this.updateSel(); }
     update(update) {
-        var _a, _b, _c;
+        var _a;
         let cState = update.state.field(this.stateField);
         let prevState = update.startState.field(this.stateField);
         this.updateTooltipClass(update.state);
         if (cState != prevState) {
+            let { options, selected, disabled } = cState.open;
+            if (!prevState.open || prevState.open.options != options) {
+                this.range = rangeAroundSelected(options.length, selected, update.state.facet(completionConfig).maxRenderedOptions);
+                this.showOptions(options, cState.id);
+            }
             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));
+            if (disabled != ((_a = prevState.open) === null || _a === void 0 ? void 0 : _a.disabled))
+                this.dom.classList.toggle("cm-tooltip-autocomplete-disabled", !!disabled);
         }
     }
     updateTooltipClass(state) {
@@ -522,12 +533,7 @@ class CompletionTooltip {
         let cState = this.view.state.field(this.stateField), open = cState.open;
         if (open.selected > -1 && open.selected < this.range.from || open.selected >= this.range.to) {
             this.range = rangeAroundSelected(open.options.length, open.selected, this.view.state.facet(completionConfig).maxRenderedOptions);
-            this.list.remove();
-            this.list = this.dom.appendChild(this.createListBox(open.options, cState.id, this.range));
-            this.list.addEventListener("scroll", () => {
-                if (this.info)
-                    this.view.requestMeasure(this.placeInfoReq);
-            });
+            this.showOptions(open.options, cState.id);
         }
         if (this.updateSelectedOption(open.selected)) {
             this.destroyInfo();
@@ -667,8 +673,6 @@ class CompletionTooltip {
         this.destroyInfo();
     }
 }
-// We allocate a new function instance every time the completion
-// changes to force redrawing/repositioning of the tooltip
 function completionTooltip(stateField, applyCompletion) {
     return (view) => new CompletionTooltip(view, stateField, applyCompletion);
 }
@@ -776,7 +780,7 @@ 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, applyCompletion),
+            create: createTooltip,
             above: conf.aboveCursor,
         }, prev ? prev.timestamp : Date.now(), selected, false);
     }
@@ -952,6 +956,7 @@ function applyCompletion(view, option) {
         apply(view, option.completion, result.from, result.to);
     return true;
 }
+const createTooltip = /*@__PURE__*/completionTooltip(completionState, applyCompletion);
 
 /**
 Returns a command that moves the completion selection forward or
@@ -1018,7 +1023,7 @@ class RunningQuery {
         this.done = undefined;
     }
 }
-const DebounceTime = 50, MaxUpdateCount = 50, MinAbortTime = 1000;
+const MaxUpdateCount = 50, MinAbortTime = 1000;
 const completionPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
     constructor(view) {
         this.view = view;
@@ -1059,7 +1064,7 @@ const completionPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
         if (this.debounceUpdate > -1)
             clearTimeout(this.debounceUpdate);
         this.debounceUpdate = cState.active.some(a => a.state == 1 /* State.Pending */ && !this.running.some(q => q.active.source == a.source))
-            ? setTimeout(() => this.startUpdate(), DebounceTime) : -1;
+            ? setTimeout(() => this.startUpdate(), update.state.facet(completionConfig).updateSyncTime) : -1;
         if (this.composing != 0 /* CompositionState.None */)
             for (let tr of update.transactions) {
                 if (getUserEvent(tr) == "input")
@@ -1095,7 +1100,7 @@ const completionPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
         if (this.running.every(q => q.done !== undefined))
             this.accept();
         else if (this.debounceAccept < 0)
-            this.debounceAccept = setTimeout(() => this.accept(), DebounceTime);
+            this.debounceAccept = setTimeout(() => this.accept(), this.view.state.facet(completionConfig).updateSyncTime);
     }
     // For each finished query in this.running, try to create a result
     // or, if appropriate, restart the query.
@@ -1560,7 +1565,7 @@ const snippetPointerHandler = /*@__PURE__*/EditorView.domEventHandlers({
 });
 
 function wordRE(wordChars) {
-    let escaped = wordChars.replace(/[\\[.+*?(){|^$]/g, "\\$&");
+    let escaped = wordChars.replace(/[\]\-\\]/g, "\\$&");
     try {
         return new RegExp(`[\\p{Alphabetic}\\p{Number}_${escaped}]+`, "ug");
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/autocomplete",
-  "version": "6.9.1",
+  "version": "6.10.0",
   "description": "Autocompletion for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",