@codemirror/autocomplete 0.20.2 → 6.0.1

package/.github/workflows/dispatch.yml

@@ -11,6 +11,6 @@ jobs:
         with:
           # You should create a personal access token and store it in your repository
           token: ${{ secrets.DISPATCH_AUTH }}
-          repo: codemirror.next
+          repo: dev
           owner: codemirror
           event_type: push

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 6.0.1 (2022-06-09)
+
+### Bug fixes
+
+Support escaping `${` or `#{` in snippets.
+
+## 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

package/README.md

@@ -1,13 +1,13 @@
 # @codemirror/autocomplete [![NPM version](https://img.shields.io/npm/v/@codemirror/autocomplete.svg)](https://www.npmjs.org/package/@codemirror/autocomplete)
 
-[ [**WEBSITE**](https://codemirror.net/6/) | [**DOCS**](https://codemirror.net/6/docs/ref/#autocomplete) | [**ISSUES**](https://github.com/codemirror/codemirror.next/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/autocomplete/blob/main/CHANGELOG.md) ]
+[ [**WEBSITE**](https://codemirror.net/) | [**DOCS**](https://codemirror.net/docs/ref/#autocomplete) | [**ISSUES**](https://github.com/codemirror/dev/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/autocomplete/blob/main/CHANGELOG.md) ]
 
 This package implements autocompletion for the
-[CodeMirror](https://codemirror.net/6/) code editor.
+[CodeMirror](https://codemirror.net/) code editor.
 
-The [project page](https://codemirror.net/6/) has more information, a
-number of [examples](https://codemirror.net/6/examples/) and the
-[documentation](https://codemirror.net/6/docs/).
+The [project page](https://codemirror.net/) has more information, a
+number of [examples](https://codemirror.net/examples/) and the
+[documentation](https://codemirror.net/docs/).
 
 This code is released under an
 [MIT license](https://github.com/codemirror/autocomplete/tree/main/LICENSE).

package/dist/index.cjs

@@ -159,7 +159,7 @@ 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 state$1.changeByRange(range => {
+    return Object.assign(Object.assign({}, state$1.changeByRange(range => {
         if (range == state$1.selection.main)
             return {
                 changes: { from: from, to: to, insert: text },
@@ -173,7 +173,7 @@ function insertCompletionText(state$1, text, from, to) {
             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;
@@ -532,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"));
@@ -1180,6 +1181,14 @@ class Snippet {
                 positions.push(new FieldPos(found, lines.length, m.index, m.index + name.length));
                 line = line.slice(0, m.index) + name + line.slice(m.index + m[0].length);
             }
+            for (let esc; esc = /([$#])\\{/.exec(line);) {
+                line = line.slice(0, esc.index) + esc[1] + "{" + line.slice(esc.index + esc[0].length);
+                for (let pos of positions)
+                    if (pos.line == lines.length && pos.from > esc.index) {
+                        pos.from--;
+                        pos.to--;
+                    }
+            }
             lines.push(line);
         }
         return new Snippet(lines, positions);
@@ -1263,12 +1272,20 @@ cursor out of the current field deactivates the fields.
 The order of fields defaults to textual order, but you can add
 numbers to placeholders (`${1}` or `${1:defaultText}`) to provide
 a custom order.
+
+To include a literal `${` or `#{` in your template, put a
+backslash after the dollar or hash and before the brace (`$\\{`).
+This will be removed and the sequence will not be interpreted as a
+placeholder.
 */
 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) {

package/dist/index.d.ts

@@ -302,6 +302,11 @@ cursor out of the current field deactivates the fields.
 The order of fields defaults to textual order, but you can add
 numbers to placeholders (`${1}` or `${1:defaultText}`) to provide
 a custom order.
+
+To include a literal `${` or `#{` in your template, put a
+backslash after the dollar or hash and before the brace (`$\\{`).
+This will be removed and the sequence will not be interpreted as a
+placeholder.
 */
 declare function snippet(template: string): (editor: {
     state: EditorState;

package/dist/index.js

@@ -155,7 +155,7 @@ 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 state.changeByRange(range => {
+    return Object.assign(Object.assign({}, state.changeByRange(range => {
         if (range == state.selection.main)
             return {
                 changes: { from: from, to: to, insert: text },
@@ -169,7 +169,7 @@ function insertCompletionText(state, text, from, to) {
             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;
@@ -528,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"));
@@ -1176,6 +1177,14 @@ class Snippet {
                 positions.push(new FieldPos(found, lines.length, m.index, m.index + name.length));
                 line = line.slice(0, m.index) + name + line.slice(m.index + m[0].length);
             }
+            for (let esc; esc = /([$#])\\{/.exec(line);) {
+                line = line.slice(0, esc.index) + esc[1] + "{" + line.slice(esc.index + esc[0].length);
+                for (let pos of positions)
+                    if (pos.line == lines.length && pos.from > esc.index) {
+                        pos.from--;
+                        pos.to--;
+                    }
+            }
             lines.push(line);
         }
         return new Snippet(lines, positions);
@@ -1259,12 +1268,20 @@ cursor out of the current field deactivates the fields.
 The order of fields defaults to textual order, but you can add
 numbers to placeholders (`${1}` or `${1:defaultText}`) to provide
 a custom order.
+
+To include a literal `${` or `#{` in your template, put a
+backslash after the dollar or hash and before the brace (`$\\{`).
+This will be removed and the sequence will not be interpreted as a
+placeholder.
 */
 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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/autocomplete",
-  "version": "0.20.2",
+  "version": "6.0.1",
   "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"