@codemirror/autocomplete 0.20.0 → 0.20.3

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 0.20.3 (2022-05-30)
+
+### Bug fixes
+
+Add an aria-label to the completion listbox.
+
+Fix a regression that caused transactions generated for completion to not have a `userEvent` annotation.
+
+## 0.20.2 (2022-05-24)
+
+### New features
+
+The package now exports an `insertCompletionText` helper that implements the default behavior for applying a completion.
+
+## 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

@@ -153,32 +153,35 @@ This annotation is added to transactions that are produced by
 picking a completion.
 */
 const pickedCompletion = state.Annotation.define();
+/**
+Helper function that returns a transaction spec which inserts a
+completion's text in the main selection range, and any other
+selection range that has the same text in front of it.
+*/
+function insertCompletionText(state$1, text, from, to) {
+    return Object.assign(Object.assign({}, state$1.changeByRange(range => {
+        if (range == state$1.selection.main)
+            return {
+                changes: { from: from, to: to, insert: text },
+                range: state.EditorSelection.cursor(from + text.length)
+            };
+        let len = to - from;
+        if (!range.empty ||
+            len && state$1.sliceDoc(range.from - len, range.from) != state$1.sliceDoc(from, to))
+            return { range };
+        return {
+            changes: { from: range.from - len, to: range.from, insert: text },
+            range: state.EditorSelection.cursor(range.from - len + text.length)
+        };
+    })), { userEvent: "input.complete" });
+}
 function applyCompletion(view, option) {
     const apply = option.completion.apply || option.completion.label;
     let result = option.source;
-    if (typeof apply == "string") {
-        view.dispatch(view.state.changeByRange(range => {
-            if (range == view.state.selection.main)
-                return {
-                    changes: { from: result.from, to: result.to, insert: apply },
-                    range: state.EditorSelection.cursor(result.from + apply.length)
-                };
-            let len = result.to - result.from;
-            if (!range.empty ||
-                len && view.state.sliceDoc(range.from - len, range.from) != view.state.sliceDoc(result.from, result.to))
-                return { range };
-            return {
-                changes: { from: range.from - len, to: range.from, insert: apply },
-                range: state.EditorSelection.cursor(range.from - len + apply.length)
-            };
-        }), {
-            userEvent: "input.complete",
-            annotations: pickedCompletion.of(option.completion)
-        });
-    }
-    else {
+    if (typeof apply == "string")
+        view.dispatch(insertCompletionText(view.state, apply, result.from, result.to));
+    else
         apply(view, option.completion, result.from, result.to);
-    }
 }
 const SourceCache = new WeakMap();
 function asSource(source) {
@@ -320,6 +323,7 @@ const completionConfig = state.Facet.define({
         return state.combineConfig(configs, {
             activateOnTyping: true,
             override: null,
+            closeOnBlur: true,
             maxRenderedOptions: 100,
             defaultKeymap: true,
             optionClass: () => "",
@@ -328,6 +332,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)
@@ -527,6 +532,7 @@ class CompletionTooltip {
         ul.id = id;
         ul.setAttribute("role", "listbox");
         ul.setAttribute("aria-expanded", "true");
+        ul.setAttribute("aria-label", this.view.state.phrase("Completions"));
         for (let i = range.from; i < range.to; i++) {
             let { completion, match } = options[i];
             const li = ul.appendChild(document.createElement("li"));
@@ -573,8 +579,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 +994,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 */;
         },
@@ -1740,6 +1757,7 @@ exports.deleteBracketPair = deleteBracketPair;
 exports.ifIn = ifIn;
 exports.ifNotIn = ifNotIn;
 exports.insertBracket = insertBracket;
+exports.insertCompletionText = insertCompletionText;
 exports.moveCompletionSelection = moveCompletionSelection;
 exports.nextSnippetField = nextSnippetField;
 exports.pickedCompletion = pickedCompletion;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _codemirror_state from '@codemirror/state';
-import { EditorState, Transaction, StateCommand, Facet, Extension, StateEffect } from '@codemirror/state';
+import { EditorState, TransactionSpec, Transaction, StateCommand, Facet, Extension, StateEffect } from '@codemirror/state';
 import { EditorView, KeyBinding, Command } from '@codemirror/view';
 import * as _lezer_common from '@lezer/common';
 
@@ -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
@@ -257,6 +270,12 @@ This annotation is added to transactions that are produced by
 picking a completion.
 */
 declare const pickedCompletion: _codemirror_state.AnnotationType<Completion>;
+/**
+Helper function that returns a transaction spec which inserts a
+completion's text in the main selection range, and any other
+selection range that has the same text in front of it.
+*/
+declare function insertCompletionText(state: EditorState, text: string, from: number, to: number): TransactionSpec;
 
 /**
 Convert a snippet template to a function that can
@@ -432,4 +451,4 @@ the currently selected completion.
 */
 declare function setSelectedCompletion(index: number): StateEffect<unknown>;
 
-export { CloseBracketConfig, Completion, CompletionContext, CompletionResult, CompletionSource, acceptCompletion, autocompletion, clearSnippet, closeBrackets, closeBracketsKeymap, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, deleteBracketPair, ifIn, ifNotIn, insertBracket, moveCompletionSelection, nextSnippetField, pickedCompletion, prevSnippetField, selectedCompletion, selectedCompletionIndex, setSelectedCompletion, snippet, snippetCompletion, snippetKeymap, startCompletion };
+export { CloseBracketConfig, Completion, CompletionContext, CompletionResult, CompletionSource, acceptCompletion, autocompletion, clearSnippet, closeBrackets, closeBracketsKeymap, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, deleteBracketPair, ifIn, ifNotIn, insertBracket, insertCompletionText, moveCompletionSelection, nextSnippetField, pickedCompletion, prevSnippetField, selectedCompletion, selectedCompletionIndex, setSelectedCompletion, snippet, snippetCompletion, snippetKeymap, startCompletion };

package/dist/index.js

@@ -149,32 +149,35 @@ This annotation is added to transactions that are produced by
 picking a completion.
 */
 const pickedCompletion = /*@__PURE__*/Annotation.define();
+/**
+Helper function that returns a transaction spec which inserts a
+completion's text in the main selection range, and any other
+selection range that has the same text in front of it.
+*/
+function insertCompletionText(state, text, from, to) {
+    return Object.assign(Object.assign({}, state.changeByRange(range => {
+        if (range == state.selection.main)
+            return {
+                changes: { from: from, to: to, insert: text },
+                range: EditorSelection.cursor(from + text.length)
+            };
+        let len = to - from;
+        if (!range.empty ||
+            len && state.sliceDoc(range.from - len, range.from) != state.sliceDoc(from, to))
+            return { range };
+        return {
+            changes: { from: range.from - len, to: range.from, insert: text },
+            range: EditorSelection.cursor(range.from - len + text.length)
+        };
+    })), { userEvent: "input.complete" });
+}
 function applyCompletion(view, option) {
     const apply = option.completion.apply || option.completion.label;
     let result = option.source;
-    if (typeof apply == "string") {
-        view.dispatch(view.state.changeByRange(range => {
-            if (range == view.state.selection.main)
-                return {
-                    changes: { from: result.from, to: result.to, insert: apply },
-                    range: EditorSelection.cursor(result.from + apply.length)
-                };
-            let len = result.to - result.from;
-            if (!range.empty ||
-                len && view.state.sliceDoc(range.from - len, range.from) != view.state.sliceDoc(result.from, result.to))
-                return { range };
-            return {
-                changes: { from: range.from - len, to: range.from, insert: apply },
-                range: EditorSelection.cursor(range.from - len + apply.length)
-            };
-        }), {
-            userEvent: "input.complete",
-            annotations: pickedCompletion.of(option.completion)
-        });
-    }
-    else {
+    if (typeof apply == "string")
+        view.dispatch(insertCompletionText(view.state, apply, result.from, result.to));
+    else
         apply(view, option.completion, result.from, result.to);
-    }
 }
 const SourceCache = /*@__PURE__*/new WeakMap();
 function asSource(source) {
@@ -316,6 +319,7 @@ const completionConfig = /*@__PURE__*/Facet.define({
         return combineConfig(configs, {
             activateOnTyping: true,
             override: null,
+            closeOnBlur: true,
             maxRenderedOptions: 100,
             defaultKeymap: true,
             optionClass: () => "",
@@ -324,6 +328,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)
@@ -523,6 +528,7 @@ class CompletionTooltip {
         ul.id = id;
         ul.setAttribute("role", "listbox");
         ul.setAttribute("aria-expanded", "true");
+        ul.setAttribute("aria-label", this.view.state.phrase("Completions"));
         for (let i = range.from; i < range.to; i++) {
             let { completion, match } = options[i];
             const li = ul.appendChild(document.createElement("li"));
@@ -569,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;
@@ -978,6 +990,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 */;
         },
@@ -1720,4 +1737,4 @@ function setSelectedCompletion(index) {
     return setSelectedEffect.of(index);
 }
 
-export { CompletionContext, acceptCompletion, autocompletion, clearSnippet, closeBrackets, closeBracketsKeymap, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, deleteBracketPair, ifIn, ifNotIn, insertBracket, moveCompletionSelection, nextSnippetField, pickedCompletion, prevSnippetField, selectedCompletion, selectedCompletionIndex, setSelectedCompletion, snippet, snippetCompletion, snippetKeymap, startCompletion };
+export { CompletionContext, acceptCompletion, autocompletion, clearSnippet, closeBrackets, closeBracketsKeymap, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, deleteBracketPair, ifIn, ifNotIn, insertBracket, insertCompletionText, moveCompletionSelection, nextSnippetField, pickedCompletion, prevSnippetField, selectedCompletion, selectedCompletionIndex, setSelectedCompletion, snippet, snippetCompletion, snippetKeymap, startCompletion };

package/package.json

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