@codemirror/autocomplete 6.18.3 → 6.18.5

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 6.18.5 (2025-02-11)
+
+### Bug fixes
+
+Fix an issue where clicking on the scrollbar for the completion list could move focus out of the editor.
+
+## 6.18.4 (2024-12-17)
+
+### Bug fixes
+
+Align the behavior of snippet completions with text completions in that they overwrite the selected text.
+
 ## 6.18.3 (2024-11-13)
 
 ### Bug fixes

package/README.md

@@ -16,3 +16,28 @@ We aim to be an inclusive, welcoming community. To make that explicit,
 we have a [code of
 conduct](http://contributor-covenant.org/version/1/1/0/) that applies
 to communication around the project.
+
+## Usage
+
+```javascript
+import {EditorView} from "@codemirror/view"
+import {autocompletion} from "@codemirror/autocomplete"
+import {jsonLanguage} from "@codemirror/lang-json"
+
+const view = new EditorView({
+  parent: document.body,
+  extensions: [
+    jsonLanguage,
+    autocompletion(),
+    jsonLanguage.data.of({
+      autocomplete: ["id", "name", "address"]
+    })
+  ]
+})
+```
+
+This configuration will just complete the given words anywhere in JSON
+context. Most language modules come with more refined autocompletion
+built-in, but you can also write your own custom autocompletion
+[sources](https://codemirror.net/docs/ref/#autocomplete.CompletionSource)
+and associate them with your language this way.

package/dist/index.cjs

@@ -652,8 +652,8 @@ class CompletionTooltip {
         let selRect = sel.getBoundingClientRect();
         let space = this.space;
         if (!space) {
-            let win = this.dom.ownerDocument.defaultView || window;
-            space = { left: 0, top: 0, right: win.innerWidth, bottom: win.innerHeight };
+            let docElt = this.dom.ownerDocument.documentElement;
+            space = { left: 0, top: 0, right: docElt.clientWidth, bottom: docElt.clientHeight };
         }
         if (selRect.top > Math.min(space.bottom, listRect.bottom) - 10 ||
             selRect.bottom < Math.max(space.top, listRect.top) + 10)
@@ -678,6 +678,11 @@ class CompletionTooltip {
         ul.setAttribute("role", "listbox");
         ul.setAttribute("aria-expanded", "true");
         ul.setAttribute("aria-label", this.view.state.phrase("Completions"));
+        ul.addEventListener("mousedown", e => {
+            // Prevent focus change when clicking the scrollbar
+            if (e.target == ul)
+                e.preventDefault();
+        });
         let curSection = null;
         for (let i = range.from; i < range.to; i++) {
             let { completion, match } = options[i], { section } = completion;
@@ -1560,8 +1565,9 @@ function snippet(template) {
     let snippet = Snippet.parse(template);
     return (editor, completion, from, to) => {
         let { text, ranges } = snippet.instantiate(editor.state, from);
+        let { main } = editor.state.selection;
         let spec = {
-            changes: { from, to, insert: state.Text.of(text) },
+            changes: { from, to: to == main.from ? main.to : to, insert: state.Text.of(text) },
             scrollIntoView: true,
             annotations: completion ? [pickedCompletion.of(completion), state.Transaction.userEvent.of("input.complete")] : undefined
         };

package/dist/index.js

@@ -650,8 +650,8 @@ class CompletionTooltip {
         let selRect = sel.getBoundingClientRect();
         let space = this.space;
         if (!space) {
-            let win = this.dom.ownerDocument.defaultView || window;
-            space = { left: 0, top: 0, right: win.innerWidth, bottom: win.innerHeight };
+            let docElt = this.dom.ownerDocument.documentElement;
+            space = { left: 0, top: 0, right: docElt.clientWidth, bottom: docElt.clientHeight };
         }
         if (selRect.top > Math.min(space.bottom, listRect.bottom) - 10 ||
             selRect.bottom < Math.max(space.top, listRect.top) + 10)
@@ -676,6 +676,11 @@ class CompletionTooltip {
         ul.setAttribute("role", "listbox");
         ul.setAttribute("aria-expanded", "true");
         ul.setAttribute("aria-label", this.view.state.phrase("Completions"));
+        ul.addEventListener("mousedown", e => {
+            // Prevent focus change when clicking the scrollbar
+            if (e.target == ul)
+                e.preventDefault();
+        });
         let curSection = null;
         for (let i = range.from; i < range.to; i++) {
             let { completion, match } = options[i], { section } = completion;
@@ -1558,8 +1563,9 @@ function snippet(template) {
     let snippet = Snippet.parse(template);
     return (editor, completion, from, to) => {
         let { text, ranges } = snippet.instantiate(editor.state, from);
+        let { main } = editor.state.selection;
         let spec = {
-            changes: { from, to, insert: Text.of(text) },
+            changes: { from, to: to == main.from ? main.to : to, insert: Text.of(text) },
             scrollIntoView: true,
             annotations: completion ? [pickedCompletion.of(completion), Transaction.userEvent.of("input.complete")] : undefined
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/autocomplete",
-  "version": "6.18.3",
+  "version": "6.18.5",
   "description": "Autocompletion for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -31,12 +31,6 @@
     "@codemirror/view": "^6.17.0",
     "@lezer/common": "^1.0.0"
   },
-  "peerDependencies": {
-    "@codemirror/language": "^6.0.0",
-    "@codemirror/state": "^6.0.0",
-    "@codemirror/view": "^6.0.0",
-    "@lezer/common": "^1.0.0"
-  },
   "devDependencies": {
     "@codemirror/buildhelper": "^1.0.0"
   },