@codemirror/autocomplete 0.20.0 → 0.20.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.20.1 (2022-05-16)
+
+### New features
+
+The new `closeOnBlur` option determines whether the completion tooltip is closed when the editor loses focus.
+
+`CompletionResult` objects with `filter: false` may now have a `getMatch` property that determines the matched range in the options.
+
 ## 0.20.0 (2022-04-20)
 
 ### Breaking changes

package/dist/index.cjs

@@ -320,6 +320,7 @@ const completionConfig = state.Facet.define({
         return state.combineConfig(configs, {
             activateOnTyping: true,
             override: null,
+            closeOnBlur: true,
             maxRenderedOptions: 100,
             defaultKeymap: true,
             optionClass: () => "",
@@ -328,6 +329,7 @@ const completionConfig = state.Facet.define({
             addToOptions: []
         }, {
             defaultKeymap: (a, b) => a && b,
+            closeOnBlur: (a, b) => a && b,
             icons: (a, b) => a && b,
             optionClass: (a, b) => c => joinClass(a(c), b(c)),
             addToOptions: (a, b) => a.concat(b)
@@ -573,8 +575,14 @@ function sortOptions(active, state) {
     for (let a of active)
         if (a.hasResult()) {
             if (a.result.filter === false) {
-                for (let option of a.result.options)
-                    options.push(new Option(option, a, [1e9 - i++]));
+                let getMatch = a.result.getMatch;
+                for (let option of a.result.options) {
+                    let match = [1e9 - i++];
+                    if (getMatch)
+                        for (let n of getMatch(option))
+                            match.push(n);
+                    options.push(new Option(option, a, match));
+                }
             }
             else {
                 let matcher = new FuzzyMatcher(state.sliceDoc(a.from, a.to)), match;
@@ -982,6 +990,11 @@ const completionPlugin = view.ViewPlugin.fromClass(class {
     }
 }, {
     eventHandlers: {
+        blur() {
+            let state = this.view.state.field(completionState, false);
+            if (state && state.tooltip && this.view.state.facet(completionConfig).closeOnBlur)
+                this.view.dispatch({ effects: closeCompletionEffect.of(null) });
+        },
         compositionstart() {
             this.composing = 1 /* Started */;
         },

package/dist/index.d.ts

@@ -18,6 +18,11 @@ interface CompletionConfig {
     */
     override?: readonly CompletionSource[] | null;
     /**
+    Determines whether the completion tooltip is closed when the
+    editor loses focus. Defaults to true.
+    */
+    closeOnBlur?: boolean;
+    /**
     The maximum number of options to render to the DOM.
     */
     maxRenderedOptions?: number;
@@ -243,6 +248,14 @@ interface CompletionResult {
     */
     filter?: boolean;
     /**
+    When [`filter`](https://codemirror.net/6/docs/ref/#autocomplete.CompletionResult.filter) is set to
+    `false`, this may be provided to compute the ranges on the label
+    that match the input. Should return an array of numbers where
+    each pair of adjacent numbers provide the start and end of a
+    range.
+    */
+    getMatch?: (completion: Completion) => readonly number[];
+    /**
     Synchronously update the completion result after typing or
     deletion. If given, this should not do any expensive work, since
     it will be called during editor state updates. The function

package/dist/index.js

@@ -316,6 +316,7 @@ const completionConfig = /*@__PURE__*/Facet.define({
         return combineConfig(configs, {
             activateOnTyping: true,
             override: null,
+            closeOnBlur: true,
             maxRenderedOptions: 100,
             defaultKeymap: true,
             optionClass: () => "",
@@ -324,6 +325,7 @@ const completionConfig = /*@__PURE__*/Facet.define({
             addToOptions: []
         }, {
             defaultKeymap: (a, b) => a && b,
+            closeOnBlur: (a, b) => a && b,
             icons: (a, b) => a && b,
             optionClass: (a, b) => c => joinClass(a(c), b(c)),
             addToOptions: (a, b) => a.concat(b)
@@ -569,8 +571,14 @@ function sortOptions(active, state) {
     for (let a of active)
         if (a.hasResult()) {
             if (a.result.filter === false) {
-                for (let option of a.result.options)
-                    options.push(new Option(option, a, [1e9 - i++]));
+                let getMatch = a.result.getMatch;
+                for (let option of a.result.options) {
+                    let match = [1e9 - i++];
+                    if (getMatch)
+                        for (let n of getMatch(option))
+                            match.push(n);
+                    options.push(new Option(option, a, match));
+                }
             }
             else {
                 let matcher = new FuzzyMatcher(state.sliceDoc(a.from, a.to)), match;
@@ -978,6 +986,11 @@ const completionPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
     }
 }, {
     eventHandlers: {
+        blur() {
+            let state = this.view.state.field(completionState, false);
+            if (state && state.tooltip && this.view.state.facet(completionConfig).closeOnBlur)
+                this.view.dispatch({ effects: closeCompletionEffect.of(null) });
+        },
         compositionstart() {
             this.composing = 1 /* Started */;
         },

package/package.json

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