@codemirror/autocomplete 0.19.2 → 0.19.6

package/CHANGELOG.md

@@ -1,3 +1,45 @@
+## 0.19.6 (2021-11-12)
+
+### Bug fixes
+
+Fix an issue where parsing a snippet with a field that was labeled only by a number crashed.
+
+## 0.19.5 (2021-11-09)
+
+### Bug fixes
+
+Make sure info tooltips don't stick out of the bottom of the page.
+
+### New features
+
+The package exports a new function `selectedCompletion`, which can be used to find out which completion is currently selected.
+
+Transactions created by picking a completion now have an annotation (`pickedCompletion`) holding the original completion.
+
+## 0.19.4 (2021-10-24)
+
+### Bug fixes
+
+Don't rely on the platform's highlight colors for the active completion, since those are inconsistent and may not be appropriate for the theme.
+
+Fix incorrect match underline for some kinds of matched completions.
+
+## 0.19.3 (2021-08-31)
+
+### Bug fixes
+
+Improve the sorting of completions by using `localeCompare`.
+
+Fix reading of autocompletions in NVDA screen reader.
+
+### New features
+
+The new `icons` option can be used to turn off icons in the completion list.
+
+The `optionClass` option can now be used to add CSS classes to the options in the completion list.
+
+It is now possible to inject additional content into rendered completion options with the `addToOptions` configuration option.
+
 ## 0.19.2 (2021-08-25)
 
 ### Bug fixes

package/dist/index.cjs

@@ -150,6 +150,11 @@ function ensureAnchor(expr, start) {
         return expr;
     return new RegExp(`${addStart ? "^" : ""}(?:${source})${addEnd ? "$" : ""}`, (_a = expr.flags) !== null && _a !== void 0 ? _a : (expr.ignoreCase ? "i" : ""));
 }
+/**
+This annotation is added to transactions that are produced by
+picking a completion.
+*/
+const pickedCompletion = state.Annotation.define();
 function applyCompletion(view, option) {
     let apply = option.completion.apply || option.completion.label;
     let result = option.source;
@@ -157,7 +162,8 @@ function applyCompletion(view, option) {
         view.dispatch({
             changes: { from: result.from, to: result.to, insert: apply },
             selection: { anchor: result.from + apply.length },
-            userEvent: "input.complete"
+            userEvent: "input.complete",
+            annotations: pickedCompletion.of(option.completion)
         });
     }
     else {
@@ -251,7 +257,7 @@ class FuzzyMatcher {
                     if (next == chars[adjacentTo] || next == folded[adjacentTo]) {
                         if (adjacentTo == 0)
                             adjacentStart = i;
-                        adjacentEnd = i;
+                        adjacentEnd = i + 1;
                         adjacentTo++;
                     }
                     else {
@@ -301,152 +307,67 @@ const completionConfig = state.Facet.define({
             activateOnTyping: true,
             override: null,
             maxRenderedOptions: 100,
-            defaultKeymap: true
+            defaultKeymap: true,
+            optionClass: () => "",
+            icons: true,
+            addToOptions: []
         }, {
-            defaultKeymap: (a, b) => a && b
+            defaultKeymap: (a, b) => a && b,
+            icons: (a, b) => a && b,
+            optionClass: (a, b) => c => joinClass(a(c), b(c)),
+            addToOptions: (a, b) => a.concat(b)
         });
     }
 });
+function joinClass(a, b) {
+    return a ? b ? a + " " + b : a : b;
+}
 
-const MaxInfoWidth = 300;
-const baseTheme = view.EditorView.baseTheme({
-    ".cm-tooltip.cm-tooltip-autocomplete": {
-        "& > ul": {
-            fontFamily: "monospace",
-            whiteSpace: "nowrap",
-            overflow: "auto",
-            maxWidth_fallback: "700px",
-            maxWidth: "min(700px, 95vw)",
-            maxHeight: "10em",
-            listStyle: "none",
-            margin: 0,
-            padding: 0,
-            "& > li": {
-                cursor: "pointer",
-                padding: "1px 1em 1px 3px",
-                lineHeight: 1.2
+function optionContent(config) {
+    let content = config.addToOptions.slice();
+    if (config.icons)
+        content.push({
+            render(completion) {
+                let icon = document.createElement("div");
+                icon.classList.add("cm-completionIcon");
+                if (completion.type)
+                    icon.classList.add(...completion.type.split(/\s+/g).map(cls => "cm-completionIcon-" + cls));
+                icon.setAttribute("aria-hidden", "true");
+                return icon;
             },
-            "& > li[aria-selected]": {
-                background_fallback: "#bdf",
-                backgroundColor: "Highlight",
-                color_fallback: "white",
-                color: "HighlightText"
+            position: 20
+        });
+    content.push({
+        render(completion, _s, match) {
+            let labelElt = document.createElement("span");
+            labelElt.className = "cm-completionLabel";
+            let { label } = completion, off = 0;
+            for (let j = 1; j < match.length;) {
+                let from = match[j++], to = match[j++];
+                if (from > off)
+                    labelElt.appendChild(document.createTextNode(label.slice(off, from)));
+                let span = labelElt.appendChild(document.createElement("span"));
+                span.appendChild(document.createTextNode(label.slice(from, to)));
+                span.className = "cm-completionMatchedText";
+                off = to;
             }
-        }
-    },
-    ".cm-completionListIncompleteTop:before, .cm-completionListIncompleteBottom:after": {
-        content: '"···"',
-        opacity: 0.5,
-        display: "block",
-        textAlign: "center"
-    },
-    ".cm-tooltip.cm-completionInfo": {
-        position: "absolute",
-        padding: "3px 9px",
-        width: "max-content",
-        maxWidth: MaxInfoWidth + "px",
-    },
-    ".cm-completionInfo.cm-completionInfo-left": { right: "100%" },
-    ".cm-completionInfo.cm-completionInfo-right": { left: "100%" },
-    "&light .cm-snippetField": { backgroundColor: "#00000022" },
-    "&dark .cm-snippetField": { backgroundColor: "#ffffff22" },
-    ".cm-snippetFieldPosition": {
-        verticalAlign: "text-top",
-        width: 0,
-        height: "1.15em",
-        margin: "0 -0.7px -.7em",
-        borderLeft: "1.4px dotted #888"
-    },
-    ".cm-completionMatchedText": {
-        textDecoration: "underline"
-    },
-    ".cm-completionDetail": {
-        marginLeft: "0.5em",
-        fontStyle: "italic"
-    },
-    ".cm-completionIcon": {
-        fontSize: "90%",
-        width: ".8em",
-        display: "inline-block",
-        textAlign: "center",
-        paddingRight: ".6em",
-        opacity: "0.6"
-    },
-    ".cm-completionIcon-function, .cm-completionIcon-method": {
-        "&:after": { content: "'ƒ'" }
-    },
-    ".cm-completionIcon-class": {
-        "&:after": { content: "'○'" }
-    },
-    ".cm-completionIcon-interface": {
-        "&:after": { content: "'◌'" }
-    },
-    ".cm-completionIcon-variable": {
-        "&:after": { content: "'𝑥'" }
-    },
-    ".cm-completionIcon-constant": {
-        "&:after": { content: "'𝐶'" }
-    },
-    ".cm-completionIcon-type": {
-        "&:after": { content: "'𝑡'" }
-    },
-    ".cm-completionIcon-enum": {
-        "&:after": { content: "'∪'" }
-    },
-    ".cm-completionIcon-property": {
-        "&:after": { content: "'□'" }
-    },
-    ".cm-completionIcon-keyword": {
-        "&:after": { content: "'🔑\uFE0E'" } // Disable emoji rendering
-    },
-    ".cm-completionIcon-namespace": {
-        "&:after": { content: "'▢'" }
-    },
-    ".cm-completionIcon-text": {
-        "&:after": { content: "'abc'", fontSize: "50%", verticalAlign: "middle" }
-    }
-});
-
-function createListBox(options, id, range) {
-    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"));
-        li.id = id + "-" + i;
-        let icon = li.appendChild(document.createElement("div"));
-        icon.classList.add("cm-completionIcon");
-        if (completion.type)
-            icon.classList.add(...completion.type.split(/\s+/g).map(cls => "cm-completionIcon-" + cls));
-        icon.setAttribute("aria-hidden", "true");
-        let labelElt = li.appendChild(document.createElement("span"));
-        labelElt.className = "cm-completionLabel";
-        let { label, detail } = completion, off = 0;
-        for (let j = 1; j < match.length;) {
-            let from = match[j++], to = match[j++];
-            if (from > off)
-                labelElt.appendChild(document.createTextNode(label.slice(off, from)));
-            let span = labelElt.appendChild(document.createElement("span"));
-            span.appendChild(document.createTextNode(label.slice(from, to)));
-            span.className = "cm-completionMatchedText";
-            off = to;
-        }
-        if (off < label.length)
-            labelElt.appendChild(document.createTextNode(label.slice(off)));
-        if (detail) {
-            let detailElt = li.appendChild(document.createElement("span"));
+            if (off < label.length)
+                labelElt.appendChild(document.createTextNode(label.slice(off)));
+            return labelElt;
+        },
+        position: 50
+    }, {
+        render(completion) {
+            if (!completion.detail)
+                return null;
+            let detailElt = document.createElement("span");
             detailElt.className = "cm-completionDetail";
-            detailElt.textContent = detail;
-        }
-        li.setAttribute("role", "option");
-    }
-    if (range.from)
-        ul.classList.add("cm-completionListIncompleteTop");
-    if (range.to < options.length)
-        ul.classList.add("cm-completionListIncompleteBottom");
-    return ul;
+            detailElt.textContent = completion.detail;
+            return detailElt;
+        },
+        position: 80
+    });
+    return content.sort((a, b) => a.position - b.position).map(a => a.render);
 }
 function createInfoDialog(option, view$1) {
     let dom = document.createElement("div");
@@ -487,6 +408,8 @@ class CompletionTooltip {
         let cState = view.state.field(stateField);
         let { options, selected } = cState.open;
         let config = view.state.facet(completionConfig);
+        this.optionContent = optionContent(config);
+        this.optionClass = config.optionClass;
         this.range = rangeAroundSelected(options.length, selected, config.maxRenderedOptions);
         this.dom = document.createElement("div");
         this.dom.className = "cm-tooltip-autocomplete";
@@ -499,7 +422,7 @@ class CompletionTooltip {
                 }
             }
         });
-        this.list = this.dom.appendChild(createListBox(options, cState.id, this.range));
+        this.list = this.dom.appendChild(this.createListBox(options, cState.id, this.range));
         this.list.addEventListener("scroll", () => {
             if (this.info)
                 this.view.requestMeasure(this.placeInfo);
@@ -519,7 +442,7 @@ class CompletionTooltip {
         if (open.selected < this.range.from || open.selected >= this.range.to) {
             this.range = rangeAroundSelected(open.options.length, open.selected, this.view.state.facet(completionConfig).maxRenderedOptions);
             this.list.remove();
-            this.list = this.dom.appendChild(createListBox(open.options, cState.id, this.range));
+            this.list = this.dom.appendChild(this.createListBox(open.options, cState.id, this.range));
             this.list.addEventListener("scroll", () => {
                 if (this.info)
                     this.view.requestMeasure(this.placeInfo);
@@ -557,17 +480,17 @@ class CompletionTooltip {
     }
     measureInfo() {
         let sel = this.dom.querySelector("[aria-selected]");
-        if (!sel)
+        if (!sel || !this.info)
             return null;
-        let rect = this.dom.getBoundingClientRect();
-        let top = sel.getBoundingClientRect().top - rect.top;
+        let rect = this.dom.getBoundingClientRect(), infoRect = this.info.getBoundingClientRect();
+        let top = Math.min(sel.getBoundingClientRect().top, innerHeight - infoRect.height) - rect.top;
         if (top < 0 || top > this.list.clientHeight - 10)
             return null;
         let left = this.view.textDirection == view.Direction.RTL;
         let spaceLeft = rect.left, spaceRight = innerWidth - rect.right;
-        if (left && spaceLeft < Math.min(MaxInfoWidth, spaceRight))
+        if (left && spaceLeft < Math.min(infoRect.width, spaceRight))
             left = false;
-        else if (!left && spaceRight < Math.min(MaxInfoWidth, spaceLeft))
+        else if (!left && spaceRight < Math.min(infoRect.width, spaceLeft))
             left = true;
         return { top, left };
     }
@@ -578,6 +501,30 @@ class CompletionTooltip {
             this.info.classList.toggle("cm-completionInfo-right", !pos.left);
         }
     }
+    createListBox(options, id, range) {
+        const ul = document.createElement("ul");
+        ul.id = id;
+        ul.setAttribute("role", "listbox");
+        for (let i = range.from; i < range.to; i++) {
+            let { completion, match } = options[i];
+            const li = ul.appendChild(document.createElement("li"));
+            li.id = id + "-" + i;
+            li.setAttribute("role", "option");
+            let cls = this.optionClass(completion);
+            if (cls)
+                li.className = cls;
+            for (let source of this.optionContent) {
+                let node = source(completion, this.view.state, match);
+                if (node)
+                    li.appendChild(node);
+            }
+        }
+        if (range.from)
+            ul.classList.add("cm-completionListIncompleteTop");
+        if (range.to < options.length)
+            ul.classList.add("cm-completionListIncompleteBottom");
+        return ul;
+    }
 }
 // We allocate a new function instance every time the completion
 // changes to force redrawing/repositioning of the tooltip
@@ -712,20 +659,24 @@ function sameResults(a, b) {
             return false;
     }
 }
+const baseAttrs = {
+    "aria-autocomplete": "list",
+    "aria-expanded": "false"
+};
 function makeAttrs(id, selected) {
     return {
         "aria-autocomplete": "list",
+        "aria-expanded": "true",
         "aria-activedescendant": id + "-" + selected,
-        "aria-owns": id
+        "aria-controls": id
     };
 }
-const baseAttrs = { "aria-autocomplete": "list" }, none = [];
+const none = [];
 function cmpOption(a, b) {
     let dScore = b.match[0] - a.match[0];
     if (dScore)
         return dScore;
-    let lA = a.completion.label, lB = b.completion.label;
-    return lA < lB ? -1 : lA == lB ? 0 : 1;
+    return a.completion.label.localeCompare(b.completion.label);
 }
 function getUserEvent(tr) {
     return tr.isUserEvent("input.type") ? "input" : tr.isUserEvent("delete.backward") ? "delete" : null;
@@ -836,7 +787,7 @@ Accept the current completion.
 */
 const acceptCompletion = (view) => {
     let cState = view.state.field(completionState, false);
-    if (!cState || !cState.open || Date.now() - cState.open.timestamp < CompletionInteractMargin)
+    if (view.state.readOnly || !cState || !cState.open || Date.now() - cState.open.timestamp < CompletionInteractMargin)
         return false;
     applyCompletion(view, cState.open.options[cState.open.selected]);
     return true;
@@ -1012,6 +963,106 @@ const completionPlugin = view.ViewPlugin.fromClass(class {
     }
 });
 
+const baseTheme = view.EditorView.baseTheme({
+    ".cm-tooltip.cm-tooltip-autocomplete": {
+        "& > ul": {
+            fontFamily: "monospace",
+            whiteSpace: "nowrap",
+            overflow: "auto",
+            maxWidth_fallback: "700px",
+            maxWidth: "min(700px, 95vw)",
+            maxHeight: "10em",
+            listStyle: "none",
+            margin: 0,
+            padding: 0,
+            "& > li": {
+                cursor: "pointer",
+                padding: "1px 1em 1px 3px",
+                lineHeight: 1.2
+            },
+        }
+    },
+    "&light .cm-tooltip-autocomplete ul li[aria-selected]": {
+        background: "#39e",
+        color: "white",
+    },
+    "&dark .cm-tooltip-autocomplete ul li[aria-selected]": {
+        background: "#347",
+        color: "white",
+    },
+    ".cm-completionListIncompleteTop:before, .cm-completionListIncompleteBottom:after": {
+        content: '"···"',
+        opacity: 0.5,
+        display: "block",
+        textAlign: "center"
+    },
+    ".cm-tooltip.cm-completionInfo": {
+        position: "absolute",
+        padding: "3px 9px",
+        width: "max-content",
+        maxWidth: "300px",
+    },
+    ".cm-completionInfo.cm-completionInfo-left": { right: "100%" },
+    ".cm-completionInfo.cm-completionInfo-right": { left: "100%" },
+    "&light .cm-snippetField": { backgroundColor: "#00000022" },
+    "&dark .cm-snippetField": { backgroundColor: "#ffffff22" },
+    ".cm-snippetFieldPosition": {
+        verticalAlign: "text-top",
+        width: 0,
+        height: "1.15em",
+        margin: "0 -0.7px -.7em",
+        borderLeft: "1.4px dotted #888"
+    },
+    ".cm-completionMatchedText": {
+        textDecoration: "underline"
+    },
+    ".cm-completionDetail": {
+        marginLeft: "0.5em",
+        fontStyle: "italic"
+    },
+    ".cm-completionIcon": {
+        fontSize: "90%",
+        width: ".8em",
+        display: "inline-block",
+        textAlign: "center",
+        paddingRight: ".6em",
+        opacity: "0.6"
+    },
+    ".cm-completionIcon-function, .cm-completionIcon-method": {
+        "&:after": { content: "'ƒ'" }
+    },
+    ".cm-completionIcon-class": {
+        "&:after": { content: "'○'" }
+    },
+    ".cm-completionIcon-interface": {
+        "&:after": { content: "'◌'" }
+    },
+    ".cm-completionIcon-variable": {
+        "&:after": { content: "'𝑥'" }
+    },
+    ".cm-completionIcon-constant": {
+        "&:after": { content: "'𝐶'" }
+    },
+    ".cm-completionIcon-type": {
+        "&:after": { content: "'𝑡'" }
+    },
+    ".cm-completionIcon-enum": {
+        "&:after": { content: "'∪'" }
+    },
+    ".cm-completionIcon-property": {
+        "&:after": { content: "'□'" }
+    },
+    ".cm-completionIcon-keyword": {
+        "&:after": { content: "'🔑\uFE0E'" } // Disable emoji rendering
+    },
+    ".cm-completionIcon-namespace": {
+        "&:after": { content: "'▢'" }
+    },
+    ".cm-completionIcon-text": {
+        "&:after": { content: "'abc'", fontSize: "50%", verticalAlign: "middle" }
+    }
+});
+
 class FieldPos {
     constructor(field, line, from, to) {
         this.field = field;
@@ -1057,7 +1108,7 @@ class Snippet {
         let lines = [], positions = [], m;
         for (let line of template.split(/\r\n?|\n/)) {
             while (m = /[#$]\{(?:(\d+)(?::([^}]*))?|([^}]*))\}/.exec(line)) {
-                let seq = m[1] ? +m[1] : null, name = m[2] || m[3], found = -1;
+                let seq = m[1] ? +m[1] : null, name = m[2] || m[3] || "", found = -1;
                 for (let i = 0; i < fields.length; i++) {
                     if (seq != null ? fields[i].seq == seq : name ? fields[i].name == name : false)
                         found = i;
@@ -1066,7 +1117,7 @@ class Snippet {
                     let i = 0;
                     while (i < fields.length && (seq == null || (fields[i].seq != null && fields[i].seq < seq)))
                         i++;
-                    fields.splice(i, 0, { seq, name: name || null });
+                    fields.splice(i, 0, { seq, name });
                     found = i;
                     for (let pos of positions)
                         if (pos.field >= found)
@@ -1162,8 +1213,7 @@ function snippet(template) {
             let active = new ActiveSnippet(ranges, 0);
             let effects = spec.effects = [setActive.of(active)];
             if (editor.state.field(snippetState, false) === undefined)
-                effects.push(state.StateEffect.appendConfig.of([snippetState.init(() => active), addSnippetKeymap,
-                    snippetPointerHandler, baseTheme]));
+                effects.push(state.StateEffect.appendConfig.of([snippetState, addSnippetKeymap, snippetPointerHandler, baseTheme]));
         }
         editor.dispatch(editor.state.update(spec));
     };
@@ -1213,7 +1263,7 @@ to [`clearSnippet`](https://codemirror.net/6/docs/ref/#autocomplete.clearSnippet
 const snippetKeymap = state.Facet.define({
     combine(maps) { return maps.length ? maps[0] : defaultSnippetKeymap; }
 });
-const addSnippetKeymap = state.Prec.override(view.keymap.compute([snippetKeymap], state => state.facet(snippetKeymap)));
+const addSnippetKeymap = state.Prec.highest(view.keymap.compute([snippetKeymap], state => state.facet(snippetKeymap)));
 /**
 Create a completion from a snippet. Returns an object with the
 properties from `completion`, plus an `apply` function that
@@ -1347,7 +1397,7 @@ const completionKeymap = [
     { key: "PageUp", run: moveCompletionSelection(false, "page") },
     { key: "Enter", run: acceptCompletion }
 ];
-const completionKeymapExt = state.Prec.override(view.keymap.computeN([completionConfig], state => state.facet(completionConfig).defaultKeymap ? [completionKeymap] : []));
+const completionKeymapExt = state.Prec.highest(view.keymap.computeN([completionConfig], state => state.facet(completionConfig).defaultKeymap ? [completionKeymap] : []));
 /**
 Get the current completion status. When completions are available,
 this will return `"active"`. When completions are pending (in the
@@ -1367,6 +1417,14 @@ function currentCompletions(state) {
     let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
     return open ? open.options.map(o => o.completion) : [];
 }
+/**
+Return the currently selected completion, if any.
+*/
+function selectedCompletion(state) {
+    var _a;
+    let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
+    return open ? open.options[open.selected].completion : null;
+}
 
 exports.CompletionContext = CompletionContext;
 exports.acceptCompletion = acceptCompletion;
@@ -1382,7 +1440,9 @@ exports.ifIn = ifIn;
 exports.ifNotIn = ifNotIn;
 exports.moveCompletionSelection = moveCompletionSelection;
 exports.nextSnippetField = nextSnippetField;
+exports.pickedCompletion = pickedCompletion;
 exports.prevSnippetField = prevSnippetField;
+exports.selectedCompletion = selectedCompletion;
 exports.snippet = snippet;
 exports.snippetCompletion = snippetCompletion;
 exports.snippetKeymap = snippetKeymap;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import * as _codemirror_state from '@codemirror/state';
 import { EditorState, Transaction, StateCommand, Facet, Extension } from '@codemirror/state';
 import { EditorView, KeyBinding, Command } from '@codemirror/view';
 import * as _lezer_common from '@lezer/common';
@@ -12,7 +13,8 @@ interface CompletionConfig {
     Override the completion sources used. By default, they will be
     taken from the `"autocomplete"` [language
     data](https://codemirror.net/6/docs/ref/#state.EditorState.languageDataAt) (which should hold
-    [completion sources](https://codemirror.net/6/docs/ref/#autocomplete.CompletionSource)).
+    [completion sources](https://codemirror.net/6/docs/ref/#autocomplete.CompletionSource) or arrays
+    of [completions](https://codemirror.net/6/docs/ref/#autocomplete.Completion)).
     */
     override?: readonly CompletionSource[] | null;
     /**
@@ -27,6 +29,30 @@ interface CompletionConfig {
     same keys.)
     */
     defaultKeymap?: boolean;
+    /**
+    This can be used to add additional CSS classes to completion
+    options.
+    */
+    optionClass?: (completion: Completion) => string;
+    /**
+    By default, the library will render icons based on the
+    completion's [type](https://codemirror.net/6/docs/ref/#autocomplete.Completion.type) in front of
+    each option. Set this to false to turn that off.
+    */
+    icons?: boolean;
+    /**
+    This option can be used to inject additional content into
+    options. The `render` function will be called for each visible
+    completion, and should produce a DOM node to show. `position`
+    determines where in the DOM the result appears, relative to
+    other added widgets and the standard content. The default icons
+    have position 20, the label position 50, and the detail position
+    70.
+    */
+    addToOptions?: {
+        render: (completion: Completion, state: EditorState) => Node | null;
+        position: number;
+    }[];
 }
 
 /**
@@ -55,7 +81,9 @@ interface Completion {
     its [label](https://codemirror.net/6/docs/ref/#autocomplete.Completion.label). When this holds a
     string, the completion range is replaced by that string. When it
     is a function, that function is called to perform the
-    completion.
+    completion. If it fires a transaction, it is responsible for
+    adding the [`pickedCompletion`](https://codemirror.net/6/docs/ref/#autocomplete.pickedCompletion)
+    annotation to it.
     */
     apply?: string | ((view: EditorView, completion: Completion, from: number, to: number) => void);
     /**
@@ -210,6 +238,11 @@ interface CompletionResult {
     */
     filter?: boolean;
 }
+/**
+This annotation is added to transactions that are produced by
+picking a completion.
+*/
+declare const pickedCompletion: _codemirror_state.AnnotationType<Completion>;
 
 /**
 Convert a snippet template to a function that can apply it.
@@ -319,5 +352,9 @@ declare function completionStatus(state: EditorState): null | "active" | "pendin
 Returns the available completions as an array.
 */
 declare function currentCompletions(state: EditorState): readonly Completion[];
+/**
+Return the currently selected completion, if any.
+*/
+declare function selectedCompletion(state: EditorState): Completion | null;
 
-export { Completion, CompletionContext, CompletionResult, CompletionSource, acceptCompletion, autocompletion, clearSnippet, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, ifIn, ifNotIn, moveCompletionSelection, nextSnippetField, prevSnippetField, 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, snippet, snippetCompletion, snippetKeymap, startCompletion };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { Facet, combineConfig, StateEffect, StateField, Text, EditorSelection, Prec } from '@codemirror/state';
-import { EditorView, Direction, logException, ViewPlugin, Decoration, WidgetType, keymap } from '@codemirror/view';
+import { Annotation, Facet, combineConfig, StateEffect, StateField, Prec, EditorSelection, Text } from '@codemirror/state';
+import { Direction, logException, EditorView, ViewPlugin, Decoration, WidgetType, keymap } from '@codemirror/view';
 import { showTooltip } from '@codemirror/tooltip';
 import { syntaxTree, indentUnit } from '@codemirror/language';
 import { codePointAt, codePointSize, fromCodePoint } from '@codemirror/text';
@@ -146,6 +146,11 @@ function ensureAnchor(expr, start) {
         return expr;
     return new RegExp(`${addStart ? "^" : ""}(?:${source})${addEnd ? "$" : ""}`, (_a = expr.flags) !== null && _a !== void 0 ? _a : (expr.ignoreCase ? "i" : ""));
 }
+/**
+This annotation is added to transactions that are produced by
+picking a completion.
+*/
+const pickedCompletion = /*@__PURE__*/Annotation.define();
 function applyCompletion(view, option) {
     let apply = option.completion.apply || option.completion.label;
     let result = option.source;
@@ -153,7 +158,8 @@ function applyCompletion(view, option) {
         view.dispatch({
             changes: { from: result.from, to: result.to, insert: apply },
             selection: { anchor: result.from + apply.length },
-            userEvent: "input.complete"
+            userEvent: "input.complete",
+            annotations: pickedCompletion.of(option.completion)
         });
     }
     else {
@@ -247,7 +253,7 @@ class FuzzyMatcher {
                     if (next == chars[adjacentTo] || next == folded[adjacentTo]) {
                         if (adjacentTo == 0)
                             adjacentStart = i;
-                        adjacentEnd = i;
+                        adjacentEnd = i + 1;
                         adjacentTo++;
                     }
                     else {
@@ -297,152 +303,67 @@ const completionConfig = /*@__PURE__*/Facet.define({
             activateOnTyping: true,
             override: null,
             maxRenderedOptions: 100,
-            defaultKeymap: true
+            defaultKeymap: true,
+            optionClass: () => "",
+            icons: true,
+            addToOptions: []
         }, {
-            defaultKeymap: (a, b) => a && b
+            defaultKeymap: (a, b) => a && b,
+            icons: (a, b) => a && b,
+            optionClass: (a, b) => c => joinClass(a(c), b(c)),
+            addToOptions: (a, b) => a.concat(b)
         });
     }
 });
+function joinClass(a, b) {
+    return a ? b ? a + " " + b : a : b;
+}
 
-const MaxInfoWidth = 300;
-const baseTheme = /*@__PURE__*/EditorView.baseTheme({
-    ".cm-tooltip.cm-tooltip-autocomplete": {
-        "& > ul": {
-            fontFamily: "monospace",
-            whiteSpace: "nowrap",
-            overflow: "auto",
-            maxWidth_fallback: "700px",
-            maxWidth: "min(700px, 95vw)",
-            maxHeight: "10em",
-            listStyle: "none",
-            margin: 0,
-            padding: 0,
-            "& > li": {
-                cursor: "pointer",
-                padding: "1px 1em 1px 3px",
-                lineHeight: 1.2
+function optionContent(config) {
+    let content = config.addToOptions.slice();
+    if (config.icons)
+        content.push({
+            render(completion) {
+                let icon = document.createElement("div");
+                icon.classList.add("cm-completionIcon");
+                if (completion.type)
+                    icon.classList.add(...completion.type.split(/\s+/g).map(cls => "cm-completionIcon-" + cls));
+                icon.setAttribute("aria-hidden", "true");
+                return icon;
             },
-            "& > li[aria-selected]": {
-                background_fallback: "#bdf",
-                backgroundColor: "Highlight",
-                color_fallback: "white",
-                color: "HighlightText"
+            position: 20
+        });
+    content.push({
+        render(completion, _s, match) {
+            let labelElt = document.createElement("span");
+            labelElt.className = "cm-completionLabel";
+            let { label } = completion, off = 0;
+            for (let j = 1; j < match.length;) {
+                let from = match[j++], to = match[j++];
+                if (from > off)
+                    labelElt.appendChild(document.createTextNode(label.slice(off, from)));
+                let span = labelElt.appendChild(document.createElement("span"));
+                span.appendChild(document.createTextNode(label.slice(from, to)));
+                span.className = "cm-completionMatchedText";
+                off = to;
             }
-        }
-    },
-    ".cm-completionListIncompleteTop:before, .cm-completionListIncompleteBottom:after": {
-        content: '"···"',
-        opacity: 0.5,
-        display: "block",
-        textAlign: "center"
-    },
-    ".cm-tooltip.cm-completionInfo": {
-        position: "absolute",
-        padding: "3px 9px",
-        width: "max-content",
-        maxWidth: MaxInfoWidth + "px",
-    },
-    ".cm-completionInfo.cm-completionInfo-left": { right: "100%" },
-    ".cm-completionInfo.cm-completionInfo-right": { left: "100%" },
-    "&light .cm-snippetField": { backgroundColor: "#00000022" },
-    "&dark .cm-snippetField": { backgroundColor: "#ffffff22" },
-    ".cm-snippetFieldPosition": {
-        verticalAlign: "text-top",
-        width: 0,
-        height: "1.15em",
-        margin: "0 -0.7px -.7em",
-        borderLeft: "1.4px dotted #888"
-    },
-    ".cm-completionMatchedText": {
-        textDecoration: "underline"
-    },
-    ".cm-completionDetail": {
-        marginLeft: "0.5em",
-        fontStyle: "italic"
-    },
-    ".cm-completionIcon": {
-        fontSize: "90%",
-        width: ".8em",
-        display: "inline-block",
-        textAlign: "center",
-        paddingRight: ".6em",
-        opacity: "0.6"
-    },
-    ".cm-completionIcon-function, .cm-completionIcon-method": {
-        "&:after": { content: "'ƒ'" }
-    },
-    ".cm-completionIcon-class": {
-        "&:after": { content: "'○'" }
-    },
-    ".cm-completionIcon-interface": {
-        "&:after": { content: "'◌'" }
-    },
-    ".cm-completionIcon-variable": {
-        "&:after": { content: "'𝑥'" }
-    },
-    ".cm-completionIcon-constant": {
-        "&:after": { content: "'𝐶'" }
-    },
-    ".cm-completionIcon-type": {
-        "&:after": { content: "'𝑡'" }
-    },
-    ".cm-completionIcon-enum": {
-        "&:after": { content: "'∪'" }
-    },
-    ".cm-completionIcon-property": {
-        "&:after": { content: "'□'" }
-    },
-    ".cm-completionIcon-keyword": {
-        "&:after": { content: "'🔑\uFE0E'" } // Disable emoji rendering
-    },
-    ".cm-completionIcon-namespace": {
-        "&:after": { content: "'▢'" }
-    },
-    ".cm-completionIcon-text": {
-        "&:after": { content: "'abc'", fontSize: "50%", verticalAlign: "middle" }
-    }
-});
-
-function createListBox(options, id, range) {
-    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"));
-        li.id = id + "-" + i;
-        let icon = li.appendChild(document.createElement("div"));
-        icon.classList.add("cm-completionIcon");
-        if (completion.type)
-            icon.classList.add(...completion.type.split(/\s+/g).map(cls => "cm-completionIcon-" + cls));
-        icon.setAttribute("aria-hidden", "true");
-        let labelElt = li.appendChild(document.createElement("span"));
-        labelElt.className = "cm-completionLabel";
-        let { label, detail } = completion, off = 0;
-        for (let j = 1; j < match.length;) {
-            let from = match[j++], to = match[j++];
-            if (from > off)
-                labelElt.appendChild(document.createTextNode(label.slice(off, from)));
-            let span = labelElt.appendChild(document.createElement("span"));
-            span.appendChild(document.createTextNode(label.slice(from, to)));
-            span.className = "cm-completionMatchedText";
-            off = to;
-        }
-        if (off < label.length)
-            labelElt.appendChild(document.createTextNode(label.slice(off)));
-        if (detail) {
-            let detailElt = li.appendChild(document.createElement("span"));
+            if (off < label.length)
+                labelElt.appendChild(document.createTextNode(label.slice(off)));
+            return labelElt;
+        },
+        position: 50
+    }, {
+        render(completion) {
+            if (!completion.detail)
+                return null;
+            let detailElt = document.createElement("span");
             detailElt.className = "cm-completionDetail";
-            detailElt.textContent = detail;
-        }
-        li.setAttribute("role", "option");
-    }
-    if (range.from)
-        ul.classList.add("cm-completionListIncompleteTop");
-    if (range.to < options.length)
-        ul.classList.add("cm-completionListIncompleteBottom");
-    return ul;
+            detailElt.textContent = completion.detail;
+            return detailElt;
+        },
+        position: 80
+    });
+    return content.sort((a, b) => a.position - b.position).map(a => a.render);
 }
 function createInfoDialog(option, view) {
     let dom = document.createElement("div");
@@ -483,6 +404,8 @@ class CompletionTooltip {
         let cState = view.state.field(stateField);
         let { options, selected } = cState.open;
         let config = view.state.facet(completionConfig);
+        this.optionContent = optionContent(config);
+        this.optionClass = config.optionClass;
         this.range = rangeAroundSelected(options.length, selected, config.maxRenderedOptions);
         this.dom = document.createElement("div");
         this.dom.className = "cm-tooltip-autocomplete";
@@ -495,7 +418,7 @@ class CompletionTooltip {
                 }
             }
         });
-        this.list = this.dom.appendChild(createListBox(options, cState.id, this.range));
+        this.list = this.dom.appendChild(this.createListBox(options, cState.id, this.range));
         this.list.addEventListener("scroll", () => {
             if (this.info)
                 this.view.requestMeasure(this.placeInfo);
@@ -515,7 +438,7 @@ class CompletionTooltip {
         if (open.selected < this.range.from || open.selected >= this.range.to) {
             this.range = rangeAroundSelected(open.options.length, open.selected, this.view.state.facet(completionConfig).maxRenderedOptions);
             this.list.remove();
-            this.list = this.dom.appendChild(createListBox(open.options, cState.id, this.range));
+            this.list = this.dom.appendChild(this.createListBox(open.options, cState.id, this.range));
             this.list.addEventListener("scroll", () => {
                 if (this.info)
                     this.view.requestMeasure(this.placeInfo);
@@ -553,17 +476,17 @@ class CompletionTooltip {
     }
     measureInfo() {
         let sel = this.dom.querySelector("[aria-selected]");
-        if (!sel)
+        if (!sel || !this.info)
             return null;
-        let rect = this.dom.getBoundingClientRect();
-        let top = sel.getBoundingClientRect().top - rect.top;
+        let rect = this.dom.getBoundingClientRect(), infoRect = this.info.getBoundingClientRect();
+        let top = Math.min(sel.getBoundingClientRect().top, innerHeight - infoRect.height) - rect.top;
         if (top < 0 || top > this.list.clientHeight - 10)
             return null;
         let left = this.view.textDirection == Direction.RTL;
         let spaceLeft = rect.left, spaceRight = innerWidth - rect.right;
-        if (left && spaceLeft < Math.min(MaxInfoWidth, spaceRight))
+        if (left && spaceLeft < Math.min(infoRect.width, spaceRight))
             left = false;
-        else if (!left && spaceRight < Math.min(MaxInfoWidth, spaceLeft))
+        else if (!left && spaceRight < Math.min(infoRect.width, spaceLeft))
             left = true;
         return { top, left };
     }
@@ -574,6 +497,30 @@ class CompletionTooltip {
             this.info.classList.toggle("cm-completionInfo-right", !pos.left);
         }
     }
+    createListBox(options, id, range) {
+        const ul = document.createElement("ul");
+        ul.id = id;
+        ul.setAttribute("role", "listbox");
+        for (let i = range.from; i < range.to; i++) {
+            let { completion, match } = options[i];
+            const li = ul.appendChild(document.createElement("li"));
+            li.id = id + "-" + i;
+            li.setAttribute("role", "option");
+            let cls = this.optionClass(completion);
+            if (cls)
+                li.className = cls;
+            for (let source of this.optionContent) {
+                let node = source(completion, this.view.state, match);
+                if (node)
+                    li.appendChild(node);
+            }
+        }
+        if (range.from)
+            ul.classList.add("cm-completionListIncompleteTop");
+        if (range.to < options.length)
+            ul.classList.add("cm-completionListIncompleteBottom");
+        return ul;
+    }
 }
 // We allocate a new function instance every time the completion
 // changes to force redrawing/repositioning of the tooltip
@@ -708,20 +655,24 @@ function sameResults(a, b) {
             return false;
     }
 }
+const baseAttrs = {
+    "aria-autocomplete": "list",
+    "aria-expanded": "false"
+};
 function makeAttrs(id, selected) {
     return {
         "aria-autocomplete": "list",
+        "aria-expanded": "true",
         "aria-activedescendant": id + "-" + selected,
-        "aria-owns": id
+        "aria-controls": id
     };
 }
-const baseAttrs = { "aria-autocomplete": "list" }, none = [];
+const none = [];
 function cmpOption(a, b) {
     let dScore = b.match[0] - a.match[0];
     if (dScore)
         return dScore;
-    let lA = a.completion.label, lB = b.completion.label;
-    return lA < lB ? -1 : lA == lB ? 0 : 1;
+    return a.completion.label.localeCompare(b.completion.label);
 }
 function getUserEvent(tr) {
     return tr.isUserEvent("input.type") ? "input" : tr.isUserEvent("delete.backward") ? "delete" : null;
@@ -832,7 +783,7 @@ Accept the current completion.
 */
 const acceptCompletion = (view) => {
     let cState = view.state.field(completionState, false);
-    if (!cState || !cState.open || Date.now() - cState.open.timestamp < CompletionInteractMargin)
+    if (view.state.readOnly || !cState || !cState.open || Date.now() - cState.open.timestamp < CompletionInteractMargin)
         return false;
     applyCompletion(view, cState.open.options[cState.open.selected]);
     return true;
@@ -1008,6 +959,106 @@ const completionPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
     }
 });
 
+const baseTheme = /*@__PURE__*/EditorView.baseTheme({
+    ".cm-tooltip.cm-tooltip-autocomplete": {
+        "& > ul": {
+            fontFamily: "monospace",
+            whiteSpace: "nowrap",
+            overflow: "auto",
+            maxWidth_fallback: "700px",
+            maxWidth: "min(700px, 95vw)",
+            maxHeight: "10em",
+            listStyle: "none",
+            margin: 0,
+            padding: 0,
+            "& > li": {
+                cursor: "pointer",
+                padding: "1px 1em 1px 3px",
+                lineHeight: 1.2
+            },
+        }
+    },
+    "&light .cm-tooltip-autocomplete ul li[aria-selected]": {
+        background: "#39e",
+        color: "white",
+    },
+    "&dark .cm-tooltip-autocomplete ul li[aria-selected]": {
+        background: "#347",
+        color: "white",
+    },
+    ".cm-completionListIncompleteTop:before, .cm-completionListIncompleteBottom:after": {
+        content: '"···"',
+        opacity: 0.5,
+        display: "block",
+        textAlign: "center"
+    },
+    ".cm-tooltip.cm-completionInfo": {
+        position: "absolute",
+        padding: "3px 9px",
+        width: "max-content",
+        maxWidth: "300px",
+    },
+    ".cm-completionInfo.cm-completionInfo-left": { right: "100%" },
+    ".cm-completionInfo.cm-completionInfo-right": { left: "100%" },
+    "&light .cm-snippetField": { backgroundColor: "#00000022" },
+    "&dark .cm-snippetField": { backgroundColor: "#ffffff22" },
+    ".cm-snippetFieldPosition": {
+        verticalAlign: "text-top",
+        width: 0,
+        height: "1.15em",
+        margin: "0 -0.7px -.7em",
+        borderLeft: "1.4px dotted #888"
+    },
+    ".cm-completionMatchedText": {
+        textDecoration: "underline"
+    },
+    ".cm-completionDetail": {
+        marginLeft: "0.5em",
+        fontStyle: "italic"
+    },
+    ".cm-completionIcon": {
+        fontSize: "90%",
+        width: ".8em",
+        display: "inline-block",
+        textAlign: "center",
+        paddingRight: ".6em",
+        opacity: "0.6"
+    },
+    ".cm-completionIcon-function, .cm-completionIcon-method": {
+        "&:after": { content: "'ƒ'" }
+    },
+    ".cm-completionIcon-class": {
+        "&:after": { content: "'○'" }
+    },
+    ".cm-completionIcon-interface": {
+        "&:after": { content: "'◌'" }
+    },
+    ".cm-completionIcon-variable": {
+        "&:after": { content: "'𝑥'" }
+    },
+    ".cm-completionIcon-constant": {
+        "&:after": { content: "'𝐶'" }
+    },
+    ".cm-completionIcon-type": {
+        "&:after": { content: "'𝑡'" }
+    },
+    ".cm-completionIcon-enum": {
+        "&:after": { content: "'∪'" }
+    },
+    ".cm-completionIcon-property": {
+        "&:after": { content: "'□'" }
+    },
+    ".cm-completionIcon-keyword": {
+        "&:after": { content: "'🔑\uFE0E'" } // Disable emoji rendering
+    },
+    ".cm-completionIcon-namespace": {
+        "&:after": { content: "'▢'" }
+    },
+    ".cm-completionIcon-text": {
+        "&:after": { content: "'abc'", fontSize: "50%", verticalAlign: "middle" }
+    }
+});
+
 class FieldPos {
     constructor(field, line, from, to) {
         this.field = field;
@@ -1053,7 +1104,7 @@ class Snippet {
         let lines = [], positions = [], m;
         for (let line of template.split(/\r\n?|\n/)) {
             while (m = /[#$]\{(?:(\d+)(?::([^}]*))?|([^}]*))\}/.exec(line)) {
-                let seq = m[1] ? +m[1] : null, name = m[2] || m[3], found = -1;
+                let seq = m[1] ? +m[1] : null, name = m[2] || m[3] || "", found = -1;
                 for (let i = 0; i < fields.length; i++) {
                     if (seq != null ? fields[i].seq == seq : name ? fields[i].name == name : false)
                         found = i;
@@ -1062,7 +1113,7 @@ class Snippet {
                     let i = 0;
                     while (i < fields.length && (seq == null || (fields[i].seq != null && fields[i].seq < seq)))
                         i++;
-                    fields.splice(i, 0, { seq, name: name || null });
+                    fields.splice(i, 0, { seq, name });
                     found = i;
                     for (let pos of positions)
                         if (pos.field >= found)
@@ -1158,8 +1209,7 @@ function snippet(template) {
             let active = new ActiveSnippet(ranges, 0);
             let effects = spec.effects = [setActive.of(active)];
             if (editor.state.field(snippetState, false) === undefined)
-                effects.push(StateEffect.appendConfig.of([snippetState.init(() => active), addSnippetKeymap,
-                    snippetPointerHandler, baseTheme]));
+                effects.push(StateEffect.appendConfig.of([snippetState, addSnippetKeymap, snippetPointerHandler, baseTheme]));
         }
         editor.dispatch(editor.state.update(spec));
     };
@@ -1209,7 +1259,7 @@ to [`clearSnippet`](https://codemirror.net/6/docs/ref/#autocomplete.clearSnippet
 const snippetKeymap = /*@__PURE__*/Facet.define({
     combine(maps) { return maps.length ? maps[0] : defaultSnippetKeymap; }
 });
-const addSnippetKeymap = /*@__PURE__*/Prec.override(/*@__PURE__*/keymap.compute([snippetKeymap], state => state.facet(snippetKeymap)));
+const addSnippetKeymap = /*@__PURE__*/Prec.highest(/*@__PURE__*/keymap.compute([snippetKeymap], state => state.facet(snippetKeymap)));
 /**
 Create a completion from a snippet. Returns an object with the
 properties from `completion`, plus an `apply` function that
@@ -1343,7 +1393,7 @@ const completionKeymap = [
     { key: "PageUp", run: /*@__PURE__*/moveCompletionSelection(false, "page") },
     { key: "Enter", run: acceptCompletion }
 ];
-const completionKeymapExt = /*@__PURE__*/Prec.override(/*@__PURE__*/keymap.computeN([completionConfig], state => state.facet(completionConfig).defaultKeymap ? [completionKeymap] : []));
+const completionKeymapExt = /*@__PURE__*/Prec.highest(/*@__PURE__*/keymap.computeN([completionConfig], state => state.facet(completionConfig).defaultKeymap ? [completionKeymap] : []));
 /**
 Get the current completion status. When completions are available,
 this will return `"active"`. When completions are pending (in the
@@ -1363,5 +1413,13 @@ function currentCompletions(state) {
     let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
     return open ? open.options.map(o => o.completion) : [];
 }
+/**
+Return the currently selected completion, if any.
+*/
+function selectedCompletion(state) {
+    var _a;
+    let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
+    return open ? open.options[open.selected].completion : null;
+}
 
-export { CompletionContext, acceptCompletion, autocompletion, clearSnippet, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, ifIn, ifNotIn, moveCompletionSelection, nextSnippetField, prevSnippetField, snippet, snippetCompletion, snippetKeymap, startCompletion };
+export { CompletionContext, acceptCompletion, autocompletion, clearSnippet, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, ifIn, ifNotIn, moveCompletionSelection, nextSnippetField, pickedCompletion, prevSnippetField, selectedCompletion, snippet, snippetCompletion, snippetKeymap, startCompletion };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/autocomplete",
-  "version": "0.19.2",
+  "version": "0.19.6",
   "description": "Autocompletion for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -27,7 +27,7 @@
   "license": "MIT",
   "dependencies": {
     "@codemirror/language": "^0.19.0",
-    "@codemirror/state": "^0.19.0",
+    "@codemirror/state": "^0.19.4",
     "@codemirror/text": "^0.19.2",
     "@codemirror/tooltip": "^0.19.0",
     "@codemirror/view": "^0.19.0",