@codemirror/autocomplete 0.19.11 → 0.19.14

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 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
+
+Fix completion navigation with PageUp/Down when the completion tooltip isn't part of the view DOM.
+
 ## 0.19.11 (2022-01-11)
 
 ### Bug fixes

package/dist/index.cjs

@@ -514,6 +514,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 +575,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 +607,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 +672,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 +741,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))))
@@ -781,9 +783,10 @@ function moveCompletionSelection(forward, by = "option") {
         let cState = view.state.field(completionState, false);
         if (!cState || !cState.open || Date.now() - cState.open.timestamp < CompletionInteractMargin)
             return false;
-        let step = 1, tooltip;
-        if (by == "page" && (tooltip = view.dom.querySelector(".cm-tooltip-autocomplete")))
-            step = Math.max(2, Math.floor(tooltip.offsetHeight / tooltip.querySelector("li").offsetHeight) - 1);
+        let step = 1, tooltip$1;
+        if (by == "page" && (tooltip$1 = tooltip.getTooltip(view, cState.open.tooltip)))
+            step = Math.max(2, Math.floor(tooltip$1.dom.offsetHeight /
+                tooltip$1.dom.querySelector("li").offsetHeight) - 1);
         let selected = cState.open.selected + step * (forward ? 1 : -1), { length } = cState.open.options;
         if (selected < 0)
             selected = by == "page" ? 0 : length - 1;
@@ -856,7 +859,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();
@@ -1092,7 +1095,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 {
@@ -1161,7 +1166,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));

package/dist/index.js

@@ -1,6 +1,6 @@
-import { Annotation, Facet, combineConfig, StateEffect, StateField, Prec, EditorSelection, Text } from '@codemirror/state';
+import { Annotation, Facet, combineConfig, StateEffect, StateField, Prec, EditorSelection, Text, MapMode } from '@codemirror/state';
 import { Direction, logException, EditorView, ViewPlugin, Decoration, WidgetType, keymap } from '@codemirror/view';
-import { showTooltip } from '@codemirror/tooltip';
+import { showTooltip, getTooltip } from '@codemirror/tooltip';
 import { syntaxTree, indentUnit } from '@codemirror/language';
 import { codePointAt, codePointSize, fromCodePoint } from '@codemirror/text';
 
@@ -510,6 +510,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 +571,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 +603,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 +668,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 +737,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))))
@@ -778,8 +780,9 @@ function moveCompletionSelection(forward, by = "option") {
         if (!cState || !cState.open || Date.now() - cState.open.timestamp < CompletionInteractMargin)
             return false;
         let step = 1, tooltip;
-        if (by == "page" && (tooltip = view.dom.querySelector(".cm-tooltip-autocomplete")))
-            step = Math.max(2, Math.floor(tooltip.offsetHeight / tooltip.querySelector("li").offsetHeight) - 1);
+        if (by == "page" && (tooltip = getTooltip(view, cState.open.tooltip)))
+            step = Math.max(2, Math.floor(tooltip.dom.offsetHeight /
+                tooltip.dom.querySelector("li").offsetHeight) - 1);
         let selected = cState.open.selected + step * (forward ? 1 : -1), { length } = cState.open.options;
         if (selected < 0)
             selected = by == "page" ? 0 : length - 1;
@@ -852,7 +855,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();
@@ -1088,7 +1091,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 {
@@ -1157,7 +1162,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));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/autocomplete",
-  "version": "0.19.11",
+  "version": "0.19.14",
   "description": "Autocompletion for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -29,7 +29,7 @@
     "@codemirror/language": "^0.19.0",
     "@codemirror/state": "^0.19.4",
     "@codemirror/text": "^0.19.2",
-    "@codemirror/tooltip": "^0.19.0",
+    "@codemirror/tooltip": "^0.19.12",
     "@codemirror/view": "^0.19.0",
     "@lezer/common": "^0.15.0"
   },