@codemirror/autocomplete 6.4.2 → 6.5.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 6.5.1 (2023-04-13)
+
+### Bug fixes
+
+Keep completions open when interaction with an info tooltip moves focus out of the editor.
+
+## 6.5.0 (2023-04-13)
+
+### Bug fixes
+
+When `closeBrackets` skips a bracket, it now generates a change that overwrites the bracket.
+
+Replace the entire selected range when picking a completion with a non-cursor selection active.
+
+### New features
+
+Completions can now provide a `section` field that is used to group them into sections.
+
+The new `positionInfo` option can be used to provide custom logic for positioning the info tooltips.
+
 ## 6.4.2 (2023-02-17)
 
 ### Bug fixes

package/dist/index.cjs

@@ -137,13 +137,14 @@ function ifNotIn(nodes, source) {
     };
 }
 class Option {
-    constructor(completion, source, match) {
+    constructor(completion, source, match, score) {
         this.completion = completion;
         this.source = source;
         this.match = match;
+        this.score = score;
     }
 }
-function cur(state) { return state.selection.main.head; }
+function cur(state) { return state.selection.main.from; }
 // Make sure the given regexp has a $ at its end and, if `start` is
 // true, a ^ at its start.
 function ensureAnchor(expr, start) {
@@ -165,18 +166,13 @@ 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) {
+    let { main } = state$1.selection, len = to - from;
     return Object.assign(Object.assign({}, state$1.changeByRange(range => {
-        if (range == state$1.selection.main)
-            return {
-                changes: { from: from, to: to, insert: text },
-                range: state.EditorSelection.cursor(from + text.length)
-            };
-        let len = to - from;
-        if (!range.empty ||
-            len && state$1.sliceDoc(range.from - len, range.from) != state$1.sliceDoc(from, to))
+        if (range != main && len &&
+            state$1.sliceDoc(range.from - len, range.from + to - main.from) != state$1.sliceDoc(from, to))
             return { range };
         return {
-            changes: { from: range.from - len, to: range.from, insert: text },
+            changes: { from: range.from - len, to: to == main.from ? range.to : range.from + to - main.from, insert: text },
             range: state.EditorSelection.cursor(range.from - len + text.length)
         };
     })), { userEvent: "input.complete" });
@@ -198,6 +194,8 @@ function asSource(source) {
         SourceCache.set(source, known = completeFromList(source));
     return known;
 }
+const startCompletionEffect = state.StateEffect.define();
+const closeCompletionEffect = state.StateEffect.define();
 
 // A pattern matcher for fuzzy completion matching. Create an instance
 // once for a pattern, and then use that to match any number of
@@ -343,6 +341,7 @@ const completionConfig = state.Facet.define({
             aboveCursor: false,
             icons: true,
             addToOptions: [],
+            positionInfo: defaultPositionInfo,
             compareCompletions: (a, b) => a.label.localeCompare(b.label),
             interactionDelay: 75
         }, {
@@ -358,6 +357,36 @@ const completionConfig = state.Facet.define({
 function joinClass(a, b) {
     return a ? b ? a + " " + b : a : b;
 }
+function defaultPositionInfo(view$1, list, option, info, space) {
+    let rtl = view$1.textDirection == view.Direction.RTL, left = rtl, narrow = false;
+    let side = "top", offset, maxWidth;
+    let spaceLeft = list.left - space.left, spaceRight = space.right - list.right;
+    let infoWidth = info.right - info.left, infoHeight = info.bottom - info.top;
+    if (left && spaceLeft < Math.min(infoWidth, spaceRight))
+        left = false;
+    else if (!left && spaceRight < Math.min(infoWidth, spaceLeft))
+        left = true;
+    if (infoWidth <= (left ? spaceLeft : spaceRight)) {
+        offset = Math.max(space.top, Math.min(option.top, space.bottom - infoHeight)) - list.top;
+        maxWidth = Math.min(400 /* Info.Width */, left ? spaceLeft : spaceRight);
+    }
+    else {
+        narrow = true;
+        maxWidth = Math.min(400 /* Info.Width */, (rtl ? list.right : space.right - list.left) - 30 /* Info.Margin */);
+        let spaceBelow = space.bottom - list.bottom;
+        if (spaceBelow >= infoHeight || spaceBelow > list.top) { // Below the completion
+            offset = option.bottom - list.top;
+        }
+        else { // Above it
+            side = "bottom";
+            offset = list.bottom - option.top;
+        }
+    }
+    return {
+        style: `${side}: ${offset}px; max-width: ${maxWidth}px`,
+        class: "cm-completionInfo-" + (narrow ? (rtl ? "left-narrow" : "right-narrow") : left ? "left" : "right")
+    };
+}
 
 function optionContent(config) {
     let content = config.addToOptions.slice();
@@ -422,9 +451,9 @@ class CompletionTooltip {
         this.view = view;
         this.stateField = stateField;
         this.info = null;
-        this.placeInfo = {
+        this.placeInfoReq = {
             read: () => this.measureInfo(),
-            write: (pos) => this.positionInfo(pos),
+            write: (pos) => this.placeInfo(pos),
             key: this
         };
         this.space = null;
@@ -448,10 +477,16 @@ class CompletionTooltip {
                 }
             }
         });
+        this.dom.addEventListener("focusout", (e) => {
+            let state = view.state.field(this.stateField, false);
+            if (state && state.tooltip && view.state.facet(completionConfig).closeOnBlur &&
+                e.relatedTarget != view.contentDOM)
+                view.dispatch({ effects: closeCompletionEffect.of(null) });
+        });
         this.list = this.dom.appendChild(this.createListBox(options, cState.id, this.range));
         this.list.addEventListener("scroll", () => {
             if (this.info)
-                this.view.requestMeasure(this.placeInfo);
+                this.view.requestMeasure(this.placeInfoReq);
         });
     }
     mount() { this.updateSel(); }
@@ -481,7 +516,7 @@ class CompletionTooltip {
     positioned(space) {
         this.space = space;
         if (this.info)
-            this.view.requestMeasure(this.placeInfo);
+            this.view.requestMeasure(this.placeInfoReq);
     }
     updateSel() {
         let cState = this.view.state.field(this.stateField), open = cState.open;
@@ -491,7 +526,7 @@ class CompletionTooltip {
             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);
+                    this.view.requestMeasure(this.placeInfoReq);
             });
         }
         if (this.updateSelectedOption(open.selected)) {
@@ -522,12 +557,15 @@ class CompletionTooltip {
         dom.className = "cm-tooltip cm-completionInfo";
         dom.appendChild(content);
         this.dom.appendChild(dom);
-        this.view.requestMeasure(this.placeInfo);
+        this.view.requestMeasure(this.placeInfoReq);
     }
     updateSelectedOption(selected) {
         let set = null;
         for (let opt = this.list.firstChild, i = this.range.from; opt; opt = opt.nextSibling, i++) {
-            if (i == selected) {
+            if (opt.nodeName != "LI" || !opt.id) {
+                i--; // A section header
+            }
+            else if (i == selected) {
                 if (!opt.hasAttribute("aria-selected")) {
                     opt.setAttribute("aria-selected", "true");
                     set = opt;
@@ -557,41 +595,17 @@ class CompletionTooltip {
         if (selRect.top > Math.min(space.bottom, listRect.bottom) - 10 ||
             selRect.bottom < Math.max(space.top, listRect.top) + 10)
             return null;
-        let rtl = this.view.textDirection == view.Direction.RTL, left = rtl, narrow = false, maxWidth;
-        let top = "", bottom = "";
-        let spaceLeft = listRect.left - space.left, spaceRight = space.right - listRect.right;
-        if (left && spaceLeft < Math.min(infoRect.width, spaceRight))
-            left = false;
-        else if (!left && spaceRight < Math.min(infoRect.width, spaceLeft))
-            left = true;
-        if (infoRect.width <= (left ? spaceLeft : spaceRight)) {
-            top = (Math.max(space.top, Math.min(selRect.top, space.bottom - infoRect.height)) - listRect.top) + "px";
-            maxWidth = Math.min(400 /* Info.Width */, left ? spaceLeft : spaceRight) + "px";
-        }
-        else {
-            narrow = true;
-            maxWidth = Math.min(400 /* Info.Width */, (rtl ? listRect.right : space.right - listRect.left) - 30 /* Info.Margin */) + "px";
-            let spaceBelow = space.bottom - listRect.bottom;
-            if (spaceBelow >= infoRect.height || spaceBelow > listRect.top) // Below the completion
-                top = (selRect.bottom - listRect.top) + "px";
-            else // Above it
-                bottom = (listRect.bottom - selRect.top) + "px";
-        }
-        return {
-            top, bottom, maxWidth,
-            class: narrow ? (rtl ? "left-narrow" : "right-narrow") : left ? "left" : "right",
-        };
+        return this.view.state.facet(completionConfig).positionInfo(this.view, listRect, selRect, infoRect, space);
     }
-    positionInfo(pos) {
+    placeInfo(pos) {
         if (this.info) {
             if (pos) {
-                this.info.style.top = pos.top;
-                this.info.style.bottom = pos.bottom;
-                this.info.style.maxWidth = pos.maxWidth;
-                this.info.className = "cm-tooltip cm-completionInfo cm-completionInfo-" + pos.class;
+                if (pos.style)
+                    this.info.style.cssText = pos.style;
+                this.info.className = "cm-tooltip cm-completionInfo " + (pos.class || "");
             }
             else {
-                this.info.style.top = "-1e6px";
+                this.info.style.cssText = "top: -1e6px";
             }
         }
     }
@@ -601,8 +615,22 @@ class CompletionTooltip {
         ul.setAttribute("role", "listbox");
         ul.setAttribute("aria-expanded", "true");
         ul.setAttribute("aria-label", this.view.state.phrase("Completions"));
+        let curSection = null;
         for (let i = range.from; i < range.to; i++) {
-            let { completion, match } = options[i];
+            let { completion, match } = options[i], { section } = completion;
+            if (section) {
+                let name = typeof section == "string" ? section : section.name;
+                if (name != curSection && (i > range.from || range.from == 0)) {
+                    curSection = name;
+                    if (typeof section != "string" && section.header) {
+                        ul.appendChild(section.header(section));
+                    }
+                    else {
+                        let header = ul.appendChild(document.createElement("completion-section"));
+                        header.textContent = name;
+                    }
+                }
+            }
             const li = ul.appendChild(document.createElement("li"));
             li.id = id + "-" + i;
             li.setAttribute("role", "option");
@@ -643,32 +671,55 @@ function score(option) {
         (option.type ? 1 : 0);
 }
 function sortOptions(active, state) {
-    let options = [], i = 0;
+    let options = [];
+    let sections = null;
+    let addOption = (option) => {
+        options.push(option);
+        let { section } = option.completion;
+        if (section) {
+            if (!sections)
+                sections = [];
+            let name = typeof section == "string" ? section : section.name;
+            if (!sections.some(s => s.name == name))
+                sections.push(typeof section == "string" ? { name } : section);
+        }
+    };
     for (let a of active)
         if (a.hasResult()) {
             if (a.result.filter === false) {
                 let getMatch = a.result.getMatch;
                 for (let option of a.result.options) {
-                    let match = [1e9 - i++];
+                    let match = [1e9 - options.length];
                     if (getMatch)
                         for (let n of getMatch(option))
                             match.push(n);
-                    options.push(new Option(option, a, match));
+                    addOption(new Option(option, a, match, match[0]));
                 }
             }
             else {
                 let matcher = new FuzzyMatcher(state.sliceDoc(a.from, a.to)), match;
                 for (let option of a.result.options)
                     if (match = matcher.match(option.label)) {
-                        if (option.boost != null)
-                            match[0] += option.boost;
-                        options.push(new Option(option, a, match));
+                        addOption(new Option(option, a, match, match[0] + (option.boost || 0)));
                     }
             }
         }
+    if (sections) {
+        let sectionOrder = Object.create(null), pos = 0;
+        let cmp = (a, b) => { var _a, _b; return ((_a = a.rank) !== null && _a !== void 0 ? _a : 1e9) - ((_b = b.rank) !== null && _b !== void 0 ? _b : 1e9) || (a.name < b.name ? -1 : 1); };
+        for (let s of sections.sort(cmp)) {
+            pos -= 1e5;
+            sectionOrder[s.name] = pos;
+        }
+        for (let option of options) {
+            let { section } = option.completion;
+            if (section)
+                option.score += sectionOrder[typeof section == "string" ? section : section.name];
+        }
+    }
     let result = [], prev = null;
     let compare = state.facet(completionConfig).compareCompletions;
-    for (let opt of options.sort((a, b) => (b.match[0] - a.match[0]) || compare(a.completion, b.completion))) {
+    for (let opt of options.sort((a, b) => (b.score - a.score) || compare(a.completion, b.completion))) {
         if (!prev || prev.label != opt.completion.label || prev.detail != opt.completion.detail ||
             (prev.type != null && opt.completion.type != null && prev.type != opt.completion.type) ||
             prev.apply != opt.completion.apply)
@@ -862,8 +913,6 @@ function checkValid(validFor, state, from, to) {
     let text = state.sliceDoc(from, to);
     return typeof validFor == "function" ? validFor(text, from, to, state) : ensureAnchor(validFor, true).test(text);
 }
-const startCompletionEffect = state.StateEffect.define();
-const closeCompletionEffect = state.StateEffect.define();
 const setActiveEffect = state.StateEffect.define({
     map(sources, mapping) { return sources.map(s => s.map(mapping)); }
 });
@@ -1070,10 +1119,13 @@ const completionPlugin = view.ViewPlugin.fromClass(class {
     }
 }, {
     eventHandlers: {
-        blur() {
+        blur(event) {
             let state = this.view.state.field(completionState, false);
-            if (state && state.tooltip && this.view.state.facet(completionConfig).closeOnBlur)
-                this.view.dispatch({ effects: closeCompletionEffect.of(null) });
+            if (state && state.tooltip && this.view.state.facet(completionConfig).closeOnBlur) {
+                let dialog = state.open && view.getTooltip(this.view, state.open.tooltip);
+                if (!dialog || !dialog.dom.contains(event.relatedTarget))
+                    this.view.dispatch({ effects: closeCompletionEffect.of(null) });
+            }
         },
         compositionstart() {
             this.composing = 1 /* CompositionState.Started */;
@@ -1103,13 +1155,21 @@ const baseTheme = view.EditorView.baseTheme({
             listStyle: "none",
             margin: 0,
             padding: 0,
+            "& > li, & > completion-section": {
+                padding: "1px 3px",
+                lineHeight: 1.2
+            },
             "& > li": {
                 overflowX: "hidden",
                 textOverflow: "ellipsis",
-                cursor: "pointer",
-                padding: "1px 3px",
-                lineHeight: 1.2
+                cursor: "pointer"
             },
+            "& > completion-section": {
+                display: "list-item",
+                borderBottom: "1px solid silver",
+                paddingLeft: "0.5em",
+                opacity: 0.7
+            }
         }
     },
     "&light .cm-tooltip-autocomplete ul li[aria-selected]": {
@@ -1543,9 +1603,6 @@ const closeBracketEffect = state.StateEffect.define({
         return mapped == null ? undefined : mapped;
     }
 });
-const skipBracketEffect = state.StateEffect.define({
-    map(value, mapping) { return mapping.mapPos(value); }
-});
 const closedBracket = new class extends state.RangeValue {
 };
 closedBracket.startSide = 1;
@@ -1560,12 +1617,9 @@ const bracketState = state.StateField.define({
                 value = state.RangeSet.empty;
         }
         value = value.map(tr.changes);
-        for (let effect of tr.effects) {
+        for (let effect of tr.effects)
             if (effect.is(closeBracketEffect))
                 value = value.update({ add: [closedBracket.range(effect.value, effect.value + 1)] });
-            else if (effect.is(skipBracketEffect))
-                value = value.update({ filter: from => from != effect.value });
-        }
         return value;
     }
 });
@@ -1693,15 +1747,15 @@ function handleOpen(state$1, open, close, closeBefore) {
     });
 }
 function handleClose(state$1, _open, close) {
-    let dont = null, moved = state$1.selection.ranges.map(range => {
+    let dont = null, changes = state$1.changeByRange(range => {
         if (range.empty && nextChar(state$1.doc, range.head) == close)
-            return state.EditorSelection.cursor(range.head + close.length);
-        return dont = range;
+            return { changes: { from: range.head, to: range.head + close.length, insert: close },
+                range: state.EditorSelection.cursor(range.head + close.length) };
+        return dont = { range };
     });
-    return dont ? null : state$1.update({
-        selection: state.EditorSelection.create(moved, state$1.selection.mainIndex),
+    return dont ? null : state$1.update(changes, {
         scrollIntoView: true,
-        effects: state$1.selection.ranges.map(({ from }) => skipBracketEffect.of(from))
+        userEvent: "input.type"
     });
 }
 // Handles cases where the open and close token are the same, and
@@ -1722,8 +1776,9 @@ function handleSame(state$1, token, allowTriple, config) {
             }
             else if (closedBracketAt(state$1, pos)) {
                 let isTriple = allowTriple && state$1.sliceDoc(pos, pos + token.length * 3) == token + token + token;
-                return { range: state.EditorSelection.cursor(pos + token.length * (isTriple ? 3 : 1)),
-                    effects: skipBracketEffect.of(pos) };
+                let content = isTriple ? token + token + token : token;
+                return { changes: { from: pos, to: pos + content.length, insert: content },
+                    range: state.EditorSelection.cursor(pos + content.length) };
             }
         }
         else if (allowTriple && state$1.sliceDoc(pos - 2 * token.length, pos) == token + token &&

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _codemirror_state from '@codemirror/state';
 import { EditorState, TransactionSpec, Transaction, StateCommand, Facet, Extension, StateEffect } from '@codemirror/state';
-import { EditorView, KeyBinding, Command } from '@codemirror/view';
+import { EditorView, Rect, KeyBinding, Command } from '@codemirror/view';
 import * as _lezer_common from '@lezer/common';
 
 interface CompletionConfig {
@@ -79,6 +79,19 @@ interface CompletionConfig {
         position: number;
     }[];
     /**
+    By default, [info](https://codemirror.net/6/docs/ref/#autocomplet.Completion.info) tooltips are
+    placed to the side of the selected. This option can be used to
+    override that. It will be given rectangles for the list of
+    completions, the selected option, the info element, and the
+    availble [tooltip space](https://codemirror.net/6/docs/ref/#view.tooltips^config.tooltipSpace),
+    and should return style and/or class strings for the info
+    element.
+    */
+    positionInfo?: (view: EditorView, list: Rect, option: Rect, info: Rect, space: Rect) => {
+        style?: string;
+        class?: string;
+    };
+    /**
     The comparison function to use when sorting completions with the same
     match score. Defaults to using
     [`localeCompare`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare).
@@ -143,6 +156,39 @@ interface Completion {
     down the list, a positive number moves it up.
     */
     boost?: number;
+    /**
+    Can be used to divide the completion list into sections.
+    Completions in a given section (matched by name) will be grouped
+    together, with a heading above them. Options without section
+    will appear above all sections. A string value is equivalent to
+    a `{name}` object.
+    */
+    section?: string | CompletionSection;
+}
+/**
+Object used to describe a completion
+[section](https://codemirror.net/6/docs/ref/#autocomplete.Completion.section). It is recommended to
+create a shared object used by all the completions in a given
+section.
+*/
+interface CompletionSection {
+    /**
+    The name of the section. If no `render` method is present, this
+    will be displayed above the options.
+    */
+    name: string;
+    /**
+    An optional function that renders the section header. Since the
+    headers are shown inside a list, you should make sure the
+    resulting element has a `display: list-item` style.
+    */
+    header?: (section: CompletionSection) => HTMLElement;
+    /**
+    By default, sections are ordered alphabetically by name. To
+    specify an explicit order, `rank` can be used. Sections with a
+    lower rank will be shown above sections with a higher rank.
+    */
+    rank?: number;
 }
 /**
 An instance of this is passed to completion source functions.
@@ -488,4 +534,4 @@ the currently selected completion.
 */
 declare function setSelectedCompletion(index: number): StateEffect<unknown>;
 
-export { CloseBracketConfig, Completion, CompletionContext, CompletionResult, CompletionSource, acceptCompletion, autocompletion, clearSnippet, closeBrackets, closeBracketsKeymap, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, deleteBracketPair, ifIn, ifNotIn, insertBracket, insertCompletionText, moveCompletionSelection, nextSnippetField, pickedCompletion, prevSnippetField, selectedCompletion, selectedCompletionIndex, setSelectedCompletion, snippet, snippetCompletion, snippetKeymap, startCompletion };
+export { CloseBracketConfig, Completion, CompletionContext, CompletionResult, CompletionSection, CompletionSource, acceptCompletion, autocompletion, clearSnippet, closeBrackets, closeBracketsKeymap, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, deleteBracketPair, ifIn, ifNotIn, insertBracket, insertCompletionText, moveCompletionSelection, nextSnippetField, pickedCompletion, prevSnippetField, selectedCompletion, selectedCompletionIndex, setSelectedCompletion, snippet, snippetCompletion, snippetKeymap, startCompletion };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { Annotation, EditorSelection, codePointAt, codePointSize, fromCodePoint, Facet, combineConfig, StateEffect, StateField, Prec, Text, MapMode, RangeValue, RangeSet, CharCategory } from '@codemirror/state';
-import { logException, Direction, showTooltip, EditorView, ViewPlugin, getTooltip, Decoration, WidgetType, keymap } from '@codemirror/view';
+import { Annotation, StateEffect, EditorSelection, codePointAt, codePointSize, fromCodePoint, Facet, combineConfig, StateField, Prec, Text, MapMode, RangeValue, RangeSet, CharCategory } from '@codemirror/state';
+import { Direction, logException, showTooltip, EditorView, ViewPlugin, getTooltip, Decoration, WidgetType, keymap } from '@codemirror/view';
 import { syntaxTree, indentUnit } from '@codemirror/language';
 
 /**
@@ -133,13 +133,14 @@ function ifNotIn(nodes, source) {
     };
 }
 class Option {
-    constructor(completion, source, match) {
+    constructor(completion, source, match, score) {
         this.completion = completion;
         this.source = source;
         this.match = match;
+        this.score = score;
     }
 }
-function cur(state) { return state.selection.main.head; }
+function cur(state) { return state.selection.main.from; }
 // Make sure the given regexp has a $ at its end and, if `start` is
 // true, a ^ at its start.
 function ensureAnchor(expr, start) {
@@ -161,18 +162,13 @@ 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) {
+    let { main } = state.selection, len = to - from;
     return Object.assign(Object.assign({}, state.changeByRange(range => {
-        if (range == state.selection.main)
-            return {
-                changes: { from: from, to: to, insert: text },
-                range: EditorSelection.cursor(from + text.length)
-            };
-        let len = to - from;
-        if (!range.empty ||
-            len && state.sliceDoc(range.from - len, range.from) != state.sliceDoc(from, to))
+        if (range != main && len &&
+            state.sliceDoc(range.from - len, range.from + to - main.from) != state.sliceDoc(from, to))
             return { range };
         return {
-            changes: { from: range.from - len, to: range.from, insert: text },
+            changes: { from: range.from - len, to: to == main.from ? range.to : range.from + to - main.from, insert: text },
             range: EditorSelection.cursor(range.from - len + text.length)
         };
     })), { userEvent: "input.complete" });
@@ -194,6 +190,8 @@ function asSource(source) {
         SourceCache.set(source, known = completeFromList(source));
     return known;
 }
+const startCompletionEffect = /*@__PURE__*/StateEffect.define();
+const closeCompletionEffect = /*@__PURE__*/StateEffect.define();
 
 // A pattern matcher for fuzzy completion matching. Create an instance
 // once for a pattern, and then use that to match any number of
@@ -339,6 +337,7 @@ const completionConfig = /*@__PURE__*/Facet.define({
             aboveCursor: false,
             icons: true,
             addToOptions: [],
+            positionInfo: defaultPositionInfo,
             compareCompletions: (a, b) => a.label.localeCompare(b.label),
             interactionDelay: 75
         }, {
@@ -354,6 +353,36 @@ const completionConfig = /*@__PURE__*/Facet.define({
 function joinClass(a, b) {
     return a ? b ? a + " " + b : a : b;
 }
+function defaultPositionInfo(view, list, option, info, space) {
+    let rtl = view.textDirection == Direction.RTL, left = rtl, narrow = false;
+    let side = "top", offset, maxWidth;
+    let spaceLeft = list.left - space.left, spaceRight = space.right - list.right;
+    let infoWidth = info.right - info.left, infoHeight = info.bottom - info.top;
+    if (left && spaceLeft < Math.min(infoWidth, spaceRight))
+        left = false;
+    else if (!left && spaceRight < Math.min(infoWidth, spaceLeft))
+        left = true;
+    if (infoWidth <= (left ? spaceLeft : spaceRight)) {
+        offset = Math.max(space.top, Math.min(option.top, space.bottom - infoHeight)) - list.top;
+        maxWidth = Math.min(400 /* Info.Width */, left ? spaceLeft : spaceRight);
+    }
+    else {
+        narrow = true;
+        maxWidth = Math.min(400 /* Info.Width */, (rtl ? list.right : space.right - list.left) - 30 /* Info.Margin */);
+        let spaceBelow = space.bottom - list.bottom;
+        if (spaceBelow >= infoHeight || spaceBelow > list.top) { // Below the completion
+            offset = option.bottom - list.top;
+        }
+        else { // Above it
+            side = "bottom";
+            offset = list.bottom - option.top;
+        }
+    }
+    return {
+        style: `${side}: ${offset}px; max-width: ${maxWidth}px`,
+        class: "cm-completionInfo-" + (narrow ? (rtl ? "left-narrow" : "right-narrow") : left ? "left" : "right")
+    };
+}
 
 function optionContent(config) {
     let content = config.addToOptions.slice();
@@ -418,9 +447,9 @@ class CompletionTooltip {
         this.view = view;
         this.stateField = stateField;
         this.info = null;
-        this.placeInfo = {
+        this.placeInfoReq = {
             read: () => this.measureInfo(),
-            write: (pos) => this.positionInfo(pos),
+            write: (pos) => this.placeInfo(pos),
             key: this
         };
         this.space = null;
@@ -444,10 +473,16 @@ class CompletionTooltip {
                 }
             }
         });
+        this.dom.addEventListener("focusout", (e) => {
+            let state = view.state.field(this.stateField, false);
+            if (state && state.tooltip && view.state.facet(completionConfig).closeOnBlur &&
+                e.relatedTarget != view.contentDOM)
+                view.dispatch({ effects: closeCompletionEffect.of(null) });
+        });
         this.list = this.dom.appendChild(this.createListBox(options, cState.id, this.range));
         this.list.addEventListener("scroll", () => {
             if (this.info)
-                this.view.requestMeasure(this.placeInfo);
+                this.view.requestMeasure(this.placeInfoReq);
         });
     }
     mount() { this.updateSel(); }
@@ -477,7 +512,7 @@ class CompletionTooltip {
     positioned(space) {
         this.space = space;
         if (this.info)
-            this.view.requestMeasure(this.placeInfo);
+            this.view.requestMeasure(this.placeInfoReq);
     }
     updateSel() {
         let cState = this.view.state.field(this.stateField), open = cState.open;
@@ -487,7 +522,7 @@ class CompletionTooltip {
             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);
+                    this.view.requestMeasure(this.placeInfoReq);
             });
         }
         if (this.updateSelectedOption(open.selected)) {
@@ -518,12 +553,15 @@ class CompletionTooltip {
         dom.className = "cm-tooltip cm-completionInfo";
         dom.appendChild(content);
         this.dom.appendChild(dom);
-        this.view.requestMeasure(this.placeInfo);
+        this.view.requestMeasure(this.placeInfoReq);
     }
     updateSelectedOption(selected) {
         let set = null;
         for (let opt = this.list.firstChild, i = this.range.from; opt; opt = opt.nextSibling, i++) {
-            if (i == selected) {
+            if (opt.nodeName != "LI" || !opt.id) {
+                i--; // A section header
+            }
+            else if (i == selected) {
                 if (!opt.hasAttribute("aria-selected")) {
                     opt.setAttribute("aria-selected", "true");
                     set = opt;
@@ -553,41 +591,17 @@ class CompletionTooltip {
         if (selRect.top > Math.min(space.bottom, listRect.bottom) - 10 ||
             selRect.bottom < Math.max(space.top, listRect.top) + 10)
             return null;
-        let rtl = this.view.textDirection == Direction.RTL, left = rtl, narrow = false, maxWidth;
-        let top = "", bottom = "";
-        let spaceLeft = listRect.left - space.left, spaceRight = space.right - listRect.right;
-        if (left && spaceLeft < Math.min(infoRect.width, spaceRight))
-            left = false;
-        else if (!left && spaceRight < Math.min(infoRect.width, spaceLeft))
-            left = true;
-        if (infoRect.width <= (left ? spaceLeft : spaceRight)) {
-            top = (Math.max(space.top, Math.min(selRect.top, space.bottom - infoRect.height)) - listRect.top) + "px";
-            maxWidth = Math.min(400 /* Info.Width */, left ? spaceLeft : spaceRight) + "px";
-        }
-        else {
-            narrow = true;
-            maxWidth = Math.min(400 /* Info.Width */, (rtl ? listRect.right : space.right - listRect.left) - 30 /* Info.Margin */) + "px";
-            let spaceBelow = space.bottom - listRect.bottom;
-            if (spaceBelow >= infoRect.height || spaceBelow > listRect.top) // Below the completion
-                top = (selRect.bottom - listRect.top) + "px";
-            else // Above it
-                bottom = (listRect.bottom - selRect.top) + "px";
-        }
-        return {
-            top, bottom, maxWidth,
-            class: narrow ? (rtl ? "left-narrow" : "right-narrow") : left ? "left" : "right",
-        };
+        return this.view.state.facet(completionConfig).positionInfo(this.view, listRect, selRect, infoRect, space);
     }
-    positionInfo(pos) {
+    placeInfo(pos) {
         if (this.info) {
             if (pos) {
-                this.info.style.top = pos.top;
-                this.info.style.bottom = pos.bottom;
-                this.info.style.maxWidth = pos.maxWidth;
-                this.info.className = "cm-tooltip cm-completionInfo cm-completionInfo-" + pos.class;
+                if (pos.style)
+                    this.info.style.cssText = pos.style;
+                this.info.className = "cm-tooltip cm-completionInfo " + (pos.class || "");
             }
             else {
-                this.info.style.top = "-1e6px";
+                this.info.style.cssText = "top: -1e6px";
             }
         }
     }
@@ -597,8 +611,22 @@ class CompletionTooltip {
         ul.setAttribute("role", "listbox");
         ul.setAttribute("aria-expanded", "true");
         ul.setAttribute("aria-label", this.view.state.phrase("Completions"));
+        let curSection = null;
         for (let i = range.from; i < range.to; i++) {
-            let { completion, match } = options[i];
+            let { completion, match } = options[i], { section } = completion;
+            if (section) {
+                let name = typeof section == "string" ? section : section.name;
+                if (name != curSection && (i > range.from || range.from == 0)) {
+                    curSection = name;
+                    if (typeof section != "string" && section.header) {
+                        ul.appendChild(section.header(section));
+                    }
+                    else {
+                        let header = ul.appendChild(document.createElement("completion-section"));
+                        header.textContent = name;
+                    }
+                }
+            }
             const li = ul.appendChild(document.createElement("li"));
             li.id = id + "-" + i;
             li.setAttribute("role", "option");
@@ -639,32 +667,55 @@ function score(option) {
         (option.type ? 1 : 0);
 }
 function sortOptions(active, state) {
-    let options = [], i = 0;
+    let options = [];
+    let sections = null;
+    let addOption = (option) => {
+        options.push(option);
+        let { section } = option.completion;
+        if (section) {
+            if (!sections)
+                sections = [];
+            let name = typeof section == "string" ? section : section.name;
+            if (!sections.some(s => s.name == name))
+                sections.push(typeof section == "string" ? { name } : section);
+        }
+    };
     for (let a of active)
         if (a.hasResult()) {
             if (a.result.filter === false) {
                 let getMatch = a.result.getMatch;
                 for (let option of a.result.options) {
-                    let match = [1e9 - i++];
+                    let match = [1e9 - options.length];
                     if (getMatch)
                         for (let n of getMatch(option))
                             match.push(n);
-                    options.push(new Option(option, a, match));
+                    addOption(new Option(option, a, match, match[0]));
                 }
             }
             else {
                 let matcher = new FuzzyMatcher(state.sliceDoc(a.from, a.to)), match;
                 for (let option of a.result.options)
                     if (match = matcher.match(option.label)) {
-                        if (option.boost != null)
-                            match[0] += option.boost;
-                        options.push(new Option(option, a, match));
+                        addOption(new Option(option, a, match, match[0] + (option.boost || 0)));
                     }
             }
         }
+    if (sections) {
+        let sectionOrder = Object.create(null), pos = 0;
+        let cmp = (a, b) => { var _a, _b; return ((_a = a.rank) !== null && _a !== void 0 ? _a : 1e9) - ((_b = b.rank) !== null && _b !== void 0 ? _b : 1e9) || (a.name < b.name ? -1 : 1); };
+        for (let s of sections.sort(cmp)) {
+            pos -= 1e5;
+            sectionOrder[s.name] = pos;
+        }
+        for (let option of options) {
+            let { section } = option.completion;
+            if (section)
+                option.score += sectionOrder[typeof section == "string" ? section : section.name];
+        }
+    }
     let result = [], prev = null;
     let compare = state.facet(completionConfig).compareCompletions;
-    for (let opt of options.sort((a, b) => (b.match[0] - a.match[0]) || compare(a.completion, b.completion))) {
+    for (let opt of options.sort((a, b) => (b.score - a.score) || compare(a.completion, b.completion))) {
         if (!prev || prev.label != opt.completion.label || prev.detail != opt.completion.detail ||
             (prev.type != null && opt.completion.type != null && prev.type != opt.completion.type) ||
             prev.apply != opt.completion.apply)
@@ -858,8 +909,6 @@ function checkValid(validFor, state, from, to) {
     let text = state.sliceDoc(from, to);
     return typeof validFor == "function" ? validFor(text, from, to, state) : ensureAnchor(validFor, true).test(text);
 }
-const startCompletionEffect = /*@__PURE__*/StateEffect.define();
-const closeCompletionEffect = /*@__PURE__*/StateEffect.define();
 const setActiveEffect = /*@__PURE__*/StateEffect.define({
     map(sources, mapping) { return sources.map(s => s.map(mapping)); }
 });
@@ -1066,10 +1115,13 @@ const completionPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
     }
 }, {
     eventHandlers: {
-        blur() {
+        blur(event) {
             let state = this.view.state.field(completionState, false);
-            if (state && state.tooltip && this.view.state.facet(completionConfig).closeOnBlur)
-                this.view.dispatch({ effects: closeCompletionEffect.of(null) });
+            if (state && state.tooltip && this.view.state.facet(completionConfig).closeOnBlur) {
+                let dialog = state.open && getTooltip(this.view, state.open.tooltip);
+                if (!dialog || !dialog.dom.contains(event.relatedTarget))
+                    this.view.dispatch({ effects: closeCompletionEffect.of(null) });
+            }
         },
         compositionstart() {
             this.composing = 1 /* CompositionState.Started */;
@@ -1099,13 +1151,21 @@ const baseTheme = /*@__PURE__*/EditorView.baseTheme({
             listStyle: "none",
             margin: 0,
             padding: 0,
+            "& > li, & > completion-section": {
+                padding: "1px 3px",
+                lineHeight: 1.2
+            },
             "& > li": {
                 overflowX: "hidden",
                 textOverflow: "ellipsis",
-                cursor: "pointer",
-                padding: "1px 3px",
-                lineHeight: 1.2
+                cursor: "pointer"
             },
+            "& > completion-section": {
+                display: "list-item",
+                borderBottom: "1px solid silver",
+                paddingLeft: "0.5em",
+                opacity: 0.7
+            }
         }
     },
     "&light .cm-tooltip-autocomplete ul li[aria-selected]": {
@@ -1539,9 +1599,6 @@ const closeBracketEffect = /*@__PURE__*/StateEffect.define({
         return mapped == null ? undefined : mapped;
     }
 });
-const skipBracketEffect = /*@__PURE__*/StateEffect.define({
-    map(value, mapping) { return mapping.mapPos(value); }
-});
 const closedBracket = /*@__PURE__*/new class extends RangeValue {
 };
 closedBracket.startSide = 1;
@@ -1556,12 +1613,9 @@ const bracketState = /*@__PURE__*/StateField.define({
                 value = RangeSet.empty;
         }
         value = value.map(tr.changes);
-        for (let effect of tr.effects) {
+        for (let effect of tr.effects)
             if (effect.is(closeBracketEffect))
                 value = value.update({ add: [closedBracket.range(effect.value, effect.value + 1)] });
-            else if (effect.is(skipBracketEffect))
-                value = value.update({ filter: from => from != effect.value });
-        }
         return value;
     }
 });
@@ -1689,15 +1743,15 @@ function handleOpen(state, open, close, closeBefore) {
     });
 }
 function handleClose(state, _open, close) {
-    let dont = null, moved = state.selection.ranges.map(range => {
+    let dont = null, changes = state.changeByRange(range => {
         if (range.empty && nextChar(state.doc, range.head) == close)
-            return EditorSelection.cursor(range.head + close.length);
-        return dont = range;
+            return { changes: { from: range.head, to: range.head + close.length, insert: close },
+                range: EditorSelection.cursor(range.head + close.length) };
+        return dont = { range };
     });
-    return dont ? null : state.update({
-        selection: EditorSelection.create(moved, state.selection.mainIndex),
+    return dont ? null : state.update(changes, {
         scrollIntoView: true,
-        effects: state.selection.ranges.map(({ from }) => skipBracketEffect.of(from))
+        userEvent: "input.type"
     });
 }
 // Handles cases where the open and close token are the same, and
@@ -1718,8 +1772,9 @@ function handleSame(state, token, allowTriple, config) {
             }
             else if (closedBracketAt(state, pos)) {
                 let isTriple = allowTriple && state.sliceDoc(pos, pos + token.length * 3) == token + token + token;
-                return { range: EditorSelection.cursor(pos + token.length * (isTriple ? 3 : 1)),
-                    effects: skipBracketEffect.of(pos) };
+                let content = isTriple ? token + token + token : token;
+                return { changes: { from: pos, to: pos + content.length, insert: content },
+                    range: EditorSelection.cursor(pos + content.length) };
             }
         }
         else if (allowTriple && state.sliceDoc(pos - 2 * token.length, pos) == token + token &&

package/package.json

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