@codemirror/autocomplete 0.19.12 → 0.19.15

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 0.19.15 (2022-03-23)
+
+### New features
+
+The `selectedCompletionIndex` function tells you the position of the currently selected completion.
+
+The new `setSelectionCompletion` function creates a state effect that moves the selected completion to a given index.
+
+A completion's `info` method may now return null to indicate that no further info is available.
+
+## 0.19.14 (2022-03-10)
+
+### Bug fixes
+
+Make the ARIA attributes added to the editor during autocompletion spec-compliant.
+
+## 0.19.13 (2022-02-18)
+
+### Bug fixes
+
+Fix an issue where the completion tooltip stayed open if it was explicitly opened and the user backspaced past its start.
+
+Stop snippet filling when a change happens across one of the snippet fields' boundaries.
+
 ## 0.19.12 (2022-01-11)
 
 ### Bug fixes

package/dist/index.cjs

@@ -374,22 +374,6 @@ function optionContent(config) {
     });
     return content.sort((a, b) => a.position - b.position).map(a => a.render);
 }
-function createInfoDialog(option, view$1) {
-    let dom = document.createElement("div");
-    dom.className = "cm-tooltip cm-completionInfo";
-    let { info } = option.completion;
-    if (typeof info == "string") {
-        dom.textContent = info;
-    }
-    else {
-        let content = info(option.completion);
-        if (content.then)
-            content.then(node => dom.appendChild(node), e => view.logException(view$1.state, e, "completion info"));
-        else
-            dom.appendChild(content);
-    }
-    return dom;
-}
 function rangeAroundSelected(total, selected, max) {
     if (total <= max)
         return { from: 0, to: total };
@@ -458,13 +442,31 @@ class CompletionTooltip {
                 this.info.remove();
                 this.info = null;
             }
-            let option = open.options[open.selected];
-            if (option.completion.info) {
-                this.info = this.dom.appendChild(createInfoDialog(option, this.view));
-                this.view.requestMeasure(this.placeInfo);
+            let { completion } = open.options[open.selected];
+            let { info } = completion;
+            if (!info)
+                return;
+            let infoResult = typeof info === 'string' ? document.createTextNode(info) : info(completion);
+            if (!infoResult)
+                return;
+            if ('then' in infoResult) {
+                infoResult.then(node => {
+                    if (node && this.view.state.field(this.stateField, false) == cState)
+                        this.addInfoPane(node);
+                }).catch(e => view.logException(this.view.state, e, "completion info"));
+            }
+            else {
+                this.addInfoPane(infoResult);
             }
         }
     }
+    addInfoPane(content) {
+        let dom = this.info = document.createElement("div");
+        dom.className = "cm-tooltip cm-completionInfo";
+        dom.appendChild(content);
+        this.dom.appendChild(dom);
+        this.view.requestMeasure(this.placeInfo);
+    }
     updateSelectedOption(selected) {
         let set = null;
         for (let opt = this.list.firstChild, i = this.range.from; opt; opt = opt.nextSibling, i++) {
@@ -514,6 +516,7 @@ class CompletionTooltip {
         const ul = document.createElement("ul");
         ul.id = id;
         ul.setAttribute("role", "listbox");
+        ul.setAttribute("aria-expanded", "true");
         for (let i = range.from; i < range.to; i++) {
             let { completion, match } = options[i];
             const li = ul.appendChild(document.createElement("li"));
@@ -574,7 +577,6 @@ function sortOptions(active, state) {
                     }
             }
         }
-    options.sort(cmpOption);
     let result = [], prev = null;
     for (let opt of options.sort(cmpOption)) {
         if (result.length == MaxOptions)
@@ -607,10 +609,11 @@ class CompletionDialog {
         let selected = 0;
         if (prev && prev.selected) {
             let selectedValue = prev.options[prev.selected].completion;
-            for (let i = 0; i < options.length && !selected; i++) {
-                if (options[i].completion == selectedValue)
+            for (let i = 0; i < options.length; i++)
+                if (options[i].completion == selectedValue) {
                     selected = i;
-            }
+                    break;
+                }
         }
         return new CompletionDialog(options, makeAttrs(id, selected), {
             pos: active.reduce((a, b) => b.hasResult() ? Math.min(a, b.from) : a, 1e8),
@@ -671,13 +674,12 @@ function sameResults(a, b) {
     }
 }
 const baseAttrs = {
-    "aria-autocomplete": "list",
-    "aria-expanded": "false"
+    "aria-autocomplete": "list"
 };
 function makeAttrs(id, selected) {
     return {
         "aria-autocomplete": "list",
-        "aria-expanded": "true",
+        "aria-haspopup": "listbox",
         "aria-activedescendant": id + "-" + selected,
         "aria-controls": id
     };
@@ -741,7 +743,9 @@ class ActiveResult extends ActiveSource {
     handleUserEvent(tr, type, conf) {
         let from = tr.changes.mapPos(this.from), to = tr.changes.mapPos(this.to, 1);
         let pos = cur(tr.state);
-        if ((this.explicitPos > -1 ? pos < from : pos <= from) || pos > to)
+        if ((this.explicitPos < 0 ? pos <= from : pos < this.from) ||
+            pos > to ||
+            type == "delete" && cur(tr.startState) == this.from)
             return new ActiveSource(this.source, type == "input" && conf.activateOnTyping ? 1 /* Pending */ : 0 /* Inactive */);
         let explicitPos = this.explicitPos < 0 ? -1 : tr.changes.mapPos(this.explicitPos);
         if (this.span && (from == to || this.span.test(tr.state.sliceDoc(from, to))))
@@ -857,7 +861,7 @@ const completionPlugin = view.ViewPlugin.fromClass(class {
         for (let i = 0; i < this.running.length; i++) {
             let query = this.running[i];
             if (doesReset ||
-                query.updates.length + update.transactions.length > MaxUpdateCount && query.time - Date.now() > MinAbortTime) {
+                query.updates.length + update.transactions.length > MaxUpdateCount && Date.now() - query.time > MinAbortTime) {
                 for (let handler of query.context.abortListeners) {
                     try {
                         handler();
@@ -1093,7 +1097,9 @@ class FieldRange {
         this.to = to;
     }
     map(changes) {
-        return new FieldRange(this.field, changes.mapPos(this.from, -1), changes.mapPos(this.to, 1));
+        let from = changes.mapPos(this.from, -1, state.MapMode.TrackDel);
+        let to = changes.mapPos(this.to, 1, state.MapMode.TrackDel);
+        return from == null || to == null ? null : new FieldRange(this.field, from, to);
     }
 }
 class Snippet {
@@ -1162,7 +1168,14 @@ class ActiveSnippet {
         this.deco = view.Decoration.set(ranges.map(r => (r.from == r.to ? fieldMarker : fieldRange).range(r.from, r.to)));
     }
     map(changes) {
-        return new ActiveSnippet(this.ranges.map(r => r.map(changes)), this.active);
+        let ranges = [];
+        for (let r of this.ranges) {
+            let mapped = r.map(changes);
+            if (!mapped)
+                return null;
+            ranges.push(mapped);
+        }
+        return new ActiveSnippet(ranges, this.active);
     }
     selectionInsideField(sel) {
         return sel.ranges.every(range => this.ranges.some(r => r.field == this.active && r.from <= range.from && r.to >= range.to));
@@ -1424,13 +1437,19 @@ function completionStatus(state) {
     return cState && cState.active.some(a => a.state == 1 /* Pending */) ? "pending"
         : cState && cState.active.some(a => a.state != 0 /* Inactive */) ? "active" : null;
 }
+const completionArrayCache = new WeakMap;
 /**
 Returns the available completions as an array.
 */
 function currentCompletions(state) {
     var _a;
     let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
-    return open ? open.options.map(o => o.completion) : [];
+    if (!open)
+        return [];
+    let completions = completionArrayCache.get(open.options);
+    if (!completions)
+        completionArrayCache.set(open.options, completions = open.options.map(o => o.completion));
+    return completions;
 }
 /**
 Return the currently selected completion, if any.
@@ -1440,6 +1459,22 @@ function selectedCompletion(state) {
     let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
     return open ? open.options[open.selected].completion : null;
 }
+/**
+Returns the currently selected position in the active completion
+list, or null if no completions are active.
+*/
+function selectedCompletionIndex(state) {
+    var _a;
+    let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
+    return open ? open.selected : null;
+}
+/**
+Create an effect that can be attached to a transaction to change
+the currently selected completion.
+*/
+function setSelectedCompletion(index) {
+    return setSelectedEffect.of(index);
+}
 
 exports.CompletionContext = CompletionContext;
 exports.acceptCompletion = acceptCompletion;
@@ -1458,6 +1493,8 @@ exports.nextSnippetField = nextSnippetField;
 exports.pickedCompletion = pickedCompletion;
 exports.prevSnippetField = prevSnippetField;
 exports.selectedCompletion = selectedCompletion;
+exports.selectedCompletionIndex = selectedCompletionIndex;
+exports.setSelectedCompletion = setSelectedCompletion;
 exports.snippet = snippet;
 exports.snippetCompletion = snippetCompletion;
 exports.snippetKeymap = snippetKeymap;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _codemirror_state from '@codemirror/state';
-import { EditorState, Transaction, StateCommand, Facet, Extension } from '@codemirror/state';
+import { EditorState, Transaction, StateCommand, Facet, Extension, StateEffect } from '@codemirror/state';
 import { EditorView, KeyBinding, Command } from '@codemirror/view';
 import * as _lezer_common from '@lezer/common';
 
@@ -81,7 +81,7 @@ interface Completion {
     a plain string or a function that'll render the DOM structure to
     show when invoked.
     */
-    info?: string | ((completion: Completion) => (Node | Promise<Node>));
+    info?: string | ((completion: Completion) => (Node | null | Promise<Node | null>));
     /**
     How to apply the completion. The default is to replace it with
     its [label](https://codemirror.net/6/docs/ref/#autocomplete.Completion.label). When this holds a
@@ -362,5 +362,15 @@ declare function currentCompletions(state: EditorState): readonly Completion[];
 Return the currently selected completion, if any.
 */
 declare function selectedCompletion(state: EditorState): Completion | null;
+/**
+Returns the currently selected position in the active completion
+list, or null if no completions are active.
+*/
+declare function selectedCompletionIndex(state: EditorState): number | null;
+/**
+Create an effect that can be attached to a transaction to change
+the currently selected completion.
+*/
+declare function setSelectedCompletion(index: number): StateEffect<unknown>;
 
-export { Completion, CompletionContext, CompletionResult, CompletionSource, acceptCompletion, autocompletion, clearSnippet, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, ifIn, ifNotIn, moveCompletionSelection, nextSnippetField, pickedCompletion, prevSnippetField, selectedCompletion, snippet, snippetCompletion, snippetKeymap, startCompletion };
+export { Completion, CompletionContext, CompletionResult, CompletionSource, acceptCompletion, autocompletion, clearSnippet, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, ifIn, ifNotIn, moveCompletionSelection, nextSnippetField, pickedCompletion, prevSnippetField, selectedCompletion, selectedCompletionIndex, setSelectedCompletion, snippet, snippetCompletion, snippetKeymap, startCompletion };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { Annotation, Facet, combineConfig, StateEffect, StateField, Prec, EditorSelection, Text } from '@codemirror/state';
-import { Direction, logException, EditorView, ViewPlugin, Decoration, WidgetType, keymap } from '@codemirror/view';
+import { Annotation, Facet, combineConfig, StateEffect, StateField, Prec, EditorSelection, Text, MapMode } from '@codemirror/state';
+import { logException, Direction, EditorView, ViewPlugin, Decoration, WidgetType, keymap } from '@codemirror/view';
 import { showTooltip, getTooltip } from '@codemirror/tooltip';
 import { syntaxTree, indentUnit } from '@codemirror/language';
 import { codePointAt, codePointSize, fromCodePoint } from '@codemirror/text';
@@ -370,22 +370,6 @@ function optionContent(config) {
     });
     return content.sort((a, b) => a.position - b.position).map(a => a.render);
 }
-function createInfoDialog(option, view) {
-    let dom = document.createElement("div");
-    dom.className = "cm-tooltip cm-completionInfo";
-    let { info } = option.completion;
-    if (typeof info == "string") {
-        dom.textContent = info;
-    }
-    else {
-        let content = info(option.completion);
-        if (content.then)
-            content.then(node => dom.appendChild(node), e => logException(view.state, e, "completion info"));
-        else
-            dom.appendChild(content);
-    }
-    return dom;
-}
 function rangeAroundSelected(total, selected, max) {
     if (total <= max)
         return { from: 0, to: total };
@@ -454,13 +438,31 @@ class CompletionTooltip {
                 this.info.remove();
                 this.info = null;
             }
-            let option = open.options[open.selected];
-            if (option.completion.info) {
-                this.info = this.dom.appendChild(createInfoDialog(option, this.view));
-                this.view.requestMeasure(this.placeInfo);
+            let { completion } = open.options[open.selected];
+            let { info } = completion;
+            if (!info)
+                return;
+            let infoResult = typeof info === 'string' ? document.createTextNode(info) : info(completion);
+            if (!infoResult)
+                return;
+            if ('then' in infoResult) {
+                infoResult.then(node => {
+                    if (node && this.view.state.field(this.stateField, false) == cState)
+                        this.addInfoPane(node);
+                }).catch(e => logException(this.view.state, e, "completion info"));
+            }
+            else {
+                this.addInfoPane(infoResult);
             }
         }
     }
+    addInfoPane(content) {
+        let dom = this.info = document.createElement("div");
+        dom.className = "cm-tooltip cm-completionInfo";
+        dom.appendChild(content);
+        this.dom.appendChild(dom);
+        this.view.requestMeasure(this.placeInfo);
+    }
     updateSelectedOption(selected) {
         let set = null;
         for (let opt = this.list.firstChild, i = this.range.from; opt; opt = opt.nextSibling, i++) {
@@ -510,6 +512,7 @@ class CompletionTooltip {
         const ul = document.createElement("ul");
         ul.id = id;
         ul.setAttribute("role", "listbox");
+        ul.setAttribute("aria-expanded", "true");
         for (let i = range.from; i < range.to; i++) {
             let { completion, match } = options[i];
             const li = ul.appendChild(document.createElement("li"));
@@ -570,7 +573,6 @@ function sortOptions(active, state) {
                     }
             }
         }
-    options.sort(cmpOption);
     let result = [], prev = null;
     for (let opt of options.sort(cmpOption)) {
         if (result.length == MaxOptions)
@@ -603,10 +605,11 @@ class CompletionDialog {
         let selected = 0;
         if (prev && prev.selected) {
             let selectedValue = prev.options[prev.selected].completion;
-            for (let i = 0; i < options.length && !selected; i++) {
-                if (options[i].completion == selectedValue)
+            for (let i = 0; i < options.length; i++)
+                if (options[i].completion == selectedValue) {
                     selected = i;
-            }
+                    break;
+                }
         }
         return new CompletionDialog(options, makeAttrs(id, selected), {
             pos: active.reduce((a, b) => b.hasResult() ? Math.min(a, b.from) : a, 1e8),
@@ -667,13 +670,12 @@ function sameResults(a, b) {
     }
 }
 const baseAttrs = {
-    "aria-autocomplete": "list",
-    "aria-expanded": "false"
+    "aria-autocomplete": "list"
 };
 function makeAttrs(id, selected) {
     return {
         "aria-autocomplete": "list",
-        "aria-expanded": "true",
+        "aria-haspopup": "listbox",
         "aria-activedescendant": id + "-" + selected,
         "aria-controls": id
     };
@@ -737,7 +739,9 @@ class ActiveResult extends ActiveSource {
     handleUserEvent(tr, type, conf) {
         let from = tr.changes.mapPos(this.from), to = tr.changes.mapPos(this.to, 1);
         let pos = cur(tr.state);
-        if ((this.explicitPos > -1 ? pos < from : pos <= from) || pos > to)
+        if ((this.explicitPos < 0 ? pos <= from : pos < this.from) ||
+            pos > to ||
+            type == "delete" && cur(tr.startState) == this.from)
             return new ActiveSource(this.source, type == "input" && conf.activateOnTyping ? 1 /* Pending */ : 0 /* Inactive */);
         let explicitPos = this.explicitPos < 0 ? -1 : tr.changes.mapPos(this.explicitPos);
         if (this.span && (from == to || this.span.test(tr.state.sliceDoc(from, to))))
@@ -853,7 +857,7 @@ const completionPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
         for (let i = 0; i < this.running.length; i++) {
             let query = this.running[i];
             if (doesReset ||
-                query.updates.length + update.transactions.length > MaxUpdateCount && query.time - Date.now() > MinAbortTime) {
+                query.updates.length + update.transactions.length > MaxUpdateCount && Date.now() - query.time > MinAbortTime) {
                 for (let handler of query.context.abortListeners) {
                     try {
                         handler();
@@ -1089,7 +1093,9 @@ class FieldRange {
         this.to = to;
     }
     map(changes) {
-        return new FieldRange(this.field, changes.mapPos(this.from, -1), changes.mapPos(this.to, 1));
+        let from = changes.mapPos(this.from, -1, MapMode.TrackDel);
+        let to = changes.mapPos(this.to, 1, MapMode.TrackDel);
+        return from == null || to == null ? null : new FieldRange(this.field, from, to);
     }
 }
 class Snippet {
@@ -1158,7 +1164,14 @@ class ActiveSnippet {
         this.deco = Decoration.set(ranges.map(r => (r.from == r.to ? fieldMarker : fieldRange).range(r.from, r.to)));
     }
     map(changes) {
-        return new ActiveSnippet(this.ranges.map(r => r.map(changes)), this.active);
+        let ranges = [];
+        for (let r of this.ranges) {
+            let mapped = r.map(changes);
+            if (!mapped)
+                return null;
+            ranges.push(mapped);
+        }
+        return new ActiveSnippet(ranges, this.active);
     }
     selectionInsideField(sel) {
         return sel.ranges.every(range => this.ranges.some(r => r.field == this.active && r.from <= range.from && r.to >= range.to));
@@ -1420,13 +1433,19 @@ function completionStatus(state) {
     return cState && cState.active.some(a => a.state == 1 /* Pending */) ? "pending"
         : cState && cState.active.some(a => a.state != 0 /* Inactive */) ? "active" : null;
 }
+const completionArrayCache = /*@__PURE__*/new WeakMap;
 /**
 Returns the available completions as an array.
 */
 function currentCompletions(state) {
     var _a;
     let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
-    return open ? open.options.map(o => o.completion) : [];
+    if (!open)
+        return [];
+    let completions = completionArrayCache.get(open.options);
+    if (!completions)
+        completionArrayCache.set(open.options, completions = open.options.map(o => o.completion));
+    return completions;
 }
 /**
 Return the currently selected completion, if any.
@@ -1436,5 +1455,21 @@ function selectedCompletion(state) {
     let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
     return open ? open.options[open.selected].completion : null;
 }
+/**
+Returns the currently selected position in the active completion
+list, or null if no completions are active.
+*/
+function selectedCompletionIndex(state) {
+    var _a;
+    let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
+    return open ? open.selected : null;
+}
+/**
+Create an effect that can be attached to a transaction to change
+the currently selected completion.
+*/
+function setSelectedCompletion(index) {
+    return setSelectedEffect.of(index);
+}
 
-export { CompletionContext, acceptCompletion, autocompletion, clearSnippet, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, ifIn, ifNotIn, moveCompletionSelection, nextSnippetField, pickedCompletion, prevSnippetField, selectedCompletion, snippet, snippetCompletion, snippetKeymap, startCompletion };
+export { CompletionContext, acceptCompletion, autocompletion, clearSnippet, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, ifIn, ifNotIn, moveCompletionSelection, nextSnippetField, pickedCompletion, prevSnippetField, selectedCompletion, selectedCompletionIndex, setSelectedCompletion, snippet, snippetCompletion, snippetKeymap, startCompletion };

package/package.json

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