@codemirror/autocomplete 0.20.1 → 6.0.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 6.0.0 (2022-06-08)
+
+### Bug fixes
+
+Scroll the cursor into view when inserting a snippet.
+
+## 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

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) {
@@ -529,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"));
@@ -1265,7 +1269,10 @@ function snippet(template) {
     let snippet = Snippet.parse(template);
     return (editor, _completion, from, to) => {
         let { text, ranges } = snippet.instantiate(editor.state, from);
-        let spec = { changes: { from, to, insert: state.Text.of(text) } };
+        let spec = {
+            changes: { from, to, insert: state.Text.of(text) },
+            scrollIntoView: true
+        };
         if (ranges.length)
             spec.selection = fieldSelection(ranges, 0);
         if (ranges.length > 1) {
@@ -1753,6 +1760,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';
 
@@ -270,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
@@ -445,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) {
@@ -525,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"));
@@ -1261,7 +1265,10 @@ function snippet(template) {
     let snippet = Snippet.parse(template);
     return (editor, _completion, from, to) => {
         let { text, ranges } = snippet.instantiate(editor.state, from);
-        let spec = { changes: { from, to, insert: Text.of(text) } };
+        let spec = {
+            changes: { from, to, insert: Text.of(text) },
+            scrollIntoView: true
+        };
         if (ranges.length)
             spec.selection = fieldSelection(ranges, 0);
         if (ranges.length > 1) {
@@ -1733,4 +1740,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.1",
+  "version": "6.0.0",
   "description": "Autocompletion for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -26,10 +26,10 @@
   "sideEffects": false,
   "license": "MIT",
   "dependencies": {
-    "@codemirror/language": "^0.20.0",
-    "@codemirror/state": "^0.20.0",
-    "@codemirror/view": "^0.20.0",
-    "@lezer/common": "^0.16.0"
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0",
+    "@lezer/common": "^1.0.0"
   },
   "devDependencies": {
     "@codemirror/buildhelper": "^0.1.5"