@uiw/react-codemirror 4.19.16 → 4.20.1

package/dist/codemirror.js

@@ -135,12 +135,12 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "basicSetup": () => (/* reexport */ basicSetup),
+  basicSetup: () => (/* reexport */ basicSetup),
   "default": () => (/* binding */ src),
-  "getDefaultExtensions": () => (/* reexport */ getDefaultExtensions),
-  "getStatistics": () => (/* reexport */ getStatistics),
-  "minimalSetup": () => (/* reexport */ minimalSetup),
-  "useCodeMirror": () => (/* reexport */ useCodeMirror)
+  getDefaultExtensions: () => (/* reexport */ getDefaultExtensions),
+  getStatistics: () => (/* reexport */ getStatistics),
+  minimalSetup: () => (/* reexport */ minimalSetup),
+  useCodeMirror: () => (/* reexport */ useCodeMirror)
 });
 
 ;// CONCATENATED MODULE: ../node_modules/@babel/runtime/helpers/esm/typeof.js
@@ -3092,20 +3092,22 @@ class StyleModule {
   }
 }
 
-let adoptedSet = null
+let adoptedSet = new Map //<Document, StyleSet>
 
 class StyleSet {
   constructor(root) {
-    if (!root.head && root.adoptedStyleSheets && typeof CSSStyleSheet != "undefined") {
-      if (adoptedSet) {
-        root.adoptedStyleSheets = [adoptedSet.sheet, ...root.adoptedStyleSheets]
-        return root[SET] = adoptedSet
+    let doc = root.ownerDocument || root, win = doc.defaultView
+    if (!root.head && root.adoptedStyleSheets && win.CSSStyleSheet) {
+      let adopted = adoptedSet.get(doc)
+      if (adopted) {
+        root.adoptedStyleSheets = [adopted.sheet, ...root.adoptedStyleSheets]
+        return root[SET] = adopted
       }
-      this.sheet = new CSSStyleSheet
+      this.sheet = new win.CSSStyleSheet
       root.adoptedStyleSheets = [this.sheet, ...root.adoptedStyleSheets]
-      adoptedSet = this
+      adoptedSet.set(doc, this)
     } else {
-      this.styleTag = (root.ownerDocument || root).createElement("style")
+      this.styleTag = doc.createElement("style")
       let target = root.head || root
       target.insertBefore(this.styleTag, target.firstChild)
     }
@@ -5757,7 +5759,7 @@ function selectedLineRanges(state) {
         if (last >= 0 && ranges[last].to > fromLine.from)
             ranges[last].to = toLine.to;
         else
-            ranges.push({ from: fromLine.from, to: toLine.to });
+            ranges.push({ from: fromLine.from + /^\s*/.exec(fromLine.text)[0].length, to: toLine.to });
     }
     return ranges;
 }
@@ -6280,6 +6282,8 @@ function moveBySubword(view, range, forward) {
                 return false;
             pos += forward ? next.length : -next.length;
             let nextCat = categorize(next), ahead;
+            if (nextCat == CharCategory.Word && next.charCodeAt(0) < 128 && /[\W_]/.test(next))
+                nextCat = -1; // Treat word punctuation specially
             if (cat == CharCategory.Space)
                 cat = nextCat;
             if (cat != nextCat)
@@ -7203,7 +7207,7 @@ The default keymap. Includes all bindings from
 - Shift-Alt-ArrowUp: [`copyLineUp`](https://codemirror.net/6/docs/ref/#commands.copyLineUp)
 - Shift-Alt-ArrowDown: [`copyLineDown`](https://codemirror.net/6/docs/ref/#commands.copyLineDown)
 - Escape: [`simplifySelection`](https://codemirror.net/6/docs/ref/#commands.simplifySelection)
-- Ctrl-Enter (Comd-Enter on macOS): [`insertBlankLine`](https://codemirror.net/6/docs/ref/#commands.insertBlankLine)
+- Ctrl-Enter (Cmd-Enter on macOS): [`insertBlankLine`](https://codemirror.net/6/docs/ref/#commands.insertBlankLine)
 - Alt-l (Ctrl-l on macOS): [`selectLine`](https://codemirror.net/6/docs/ref/#commands.selectLine)
 - Ctrl-i (Cmd-i on macOS): [`selectParentSyntax`](https://codemirror.net/6/docs/ref/#commands.selectParentSyntax)
 - Ctrl-[ (Cmd-[ on macOS): [`indentLess`](https://codemirror.net/6/docs/ref/#commands.indentLess)
@@ -7243,7 +7247,7 @@ const indentWithTab = { key: "Tab", run: indentMore, shift: indentLess };
 
 
 
-;// CONCATENATED MODULE: ../node_modules/crelt/index.es.js
+;// CONCATENATED MODULE: ../node_modules/crelt/index.js
 function crelt() {
   var elt = arguments[0]
   if (typeof elt == "string") elt = document.createElement(elt)
@@ -8118,9 +8122,10 @@ const findNext = /*@__PURE__*/searchCommand((view, { query }) => {
     let config = view.state.facet(searchConfigFacet);
     view.dispatch({
         selection,
-        effects: [announceMatch(view, next), config.scrollToMatch(selection.main)],
+        effects: [announceMatch(view, next), config.scrollToMatch(selection.main, view)],
         userEvent: "select.search"
     });
+    selectSearchInput(view);
     return true;
 });
 /**
@@ -8137,9 +8142,10 @@ const findPrevious = /*@__PURE__*/searchCommand((view, { query }) => {
     let config = view.state.facet(searchConfigFacet);
     view.dispatch({
         selection,
-        effects: [announceMatch(view, prev), config.scrollToMatch(selection.main)],
+        effects: [announceMatch(view, prev), config.scrollToMatch(selection.main, view)],
         userEvent: "select.search"
     });
+    selectSearchInput(view);
     return true;
 });
 /**
@@ -8199,7 +8205,7 @@ const replaceNext = /*@__PURE__*/searchCommand((view, { query }) => {
         let off = changes.length == 0 || changes[0].from >= next.to ? 0 : next.to - next.from - replacement.length;
         selection = state_.EditorSelection.single(next.from - off, next.to - off);
         effects.push(announceMatch(view, next));
-        effects.push(state.facet(searchConfigFacet).scrollToMatch(selection.main));
+        effects.push(state.facet(searchConfigFacet).scrollToMatch(selection.main, view));
     }
     view.dispatch({
         changes, selection, effects,
@@ -8245,16 +8251,22 @@ function defaultQuery(state, fallback) {
         wholeWord: (_d = fallback === null || fallback === void 0 ? void 0 : fallback.wholeWord) !== null && _d !== void 0 ? _d : config.wholeWord
     });
 }
+function getSearchInput(view) {
+    let panel = (0,view_.getPanel)(view, createSearchPanel);
+    return panel && panel.dom.querySelector("[main-field]");
+}
+function selectSearchInput(view) {
+    let input = getSearchInput(view);
+    if (input && input == view.root.activeElement)
+        input.select();
+}
 /**
 Make sure the search panel is open and focused.
 */
 const openSearchPanel = view => {
     let state = view.state.field(searchState, false);
     if (state && state.panel) {
-        let panel = (0,view_.getPanel)(view, createSearchPanel);
-        if (!panel)
-            return false;
-        let searchInput = panel.dom.querySelector("[main-field]");
+        let searchInput = getSearchInput(view);
         if (searchInput && searchInput != view.root.activeElement) {
             let query = defaultQuery(view.state, state.query.spec);
             if (query.valid)
@@ -8618,13 +8630,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) {
@@ -8646,30 +8659,17 @@ 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, fromOff = from - main.from, toOff = to - main.from;
     return Object.assign(Object.assign({}, state.changeByRange(range => {
-        if (range == state.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.sliceDoc(range.from - len, range.from) != state.sliceDoc(from, to))
+        if (range != main && from != to &&
+            state.sliceDoc(range.from + fromOff, range.from + toOff) != state.sliceDoc(from, to))
             return { range };
         return {
-            changes: { from: range.from - len, to: range.from, insert: text },
-            range: state_.EditorSelection.cursor(range.from - len + text.length)
+            changes: { from: range.from + fromOff, to: to == main.from ? range.to : range.from + toOff, insert: text },
+            range: state_.EditorSelection.cursor(range.from + fromOff + text.length)
         };
     })), { userEvent: "input.complete" });
 }
-function applyCompletion(view, option) {
-    const apply = option.completion.apply || option.completion.label;
-    let result = option.source;
-    if (typeof apply == "string")
-        view.dispatch(Object.assign(Object.assign({}, insertCompletionText(view.state, apply, result.from, result.to)), { annotations: pickedCompletion.of(option.completion) }));
-    else
-        apply(view, option.completion, result.from, result.to);
-}
 const SourceCache = /*@__PURE__*/new WeakMap();
 function asSource(source) {
     if (!Array.isArray(source))
@@ -8679,6 +8679,8 @@ function asSource(source) {
         SourceCache.set(source, known = completeFromList(source));
     return known;
 }
+const startCompletionEffect = /*@__PURE__*/state_.StateEffect.define();
+const closeCompletionEffect = /*@__PURE__*/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
@@ -8711,7 +8713,7 @@ class FuzzyMatcher {
     // is. See `Penalty` above.
     match(word) {
         if (this.pattern.length == 0)
-            return [0];
+            return [-100 /* Penalty.NotFull */];
         if (word.length < this.pattern.length)
             return null;
         let { chars, folded, any, precise, byWord } = this;
@@ -8824,6 +8826,7 @@ const completionConfig = /*@__PURE__*/state_.Facet.define({
             aboveCursor: false,
             icons: true,
             addToOptions: [],
+            positionInfo: defaultPositionInfo,
             compareCompletions: (a, b) => a.label.localeCompare(b.label),
             interactionDelay: 75
         }, {
@@ -8839,6 +8842,262 @@ const completionConfig = /*@__PURE__*/state_.Facet.define({
 function joinClass(a, b) {
     return a ? b ? a + " " + b : a : b;
 }
+function defaultPositionInfo(view, list, option, info, space) {
+    let rtl = view.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")
+    };
+}
+
+/**
+Returns a command that moves the completion selection forward or
+backward by the given amount.
+*/
+function moveCompletionSelection(forward, by = "option") {
+    return (view) => {
+        let cState = view.state.field(completionState, false);
+        if (!cState || !cState.open || cState.open.disabled ||
+            Date.now() - cState.open.timestamp < view.state.facet(completionConfig).interactionDelay)
+            return false;
+        let step = 1, tooltip;
+        if (by == "page" && (tooltip = (0,view_.getTooltip)(view, cState.open.tooltip)))
+            step = Math.max(2, Math.floor(tooltip.dom.offsetHeight /
+                tooltip.dom.querySelector("li").offsetHeight) - 1);
+        let { length } = cState.open.options;
+        let selected = cState.open.selected > -1 ? cState.open.selected + step * (forward ? 1 : -1) : forward ? 0 : length - 1;
+        if (selected < 0)
+            selected = by == "page" ? 0 : length - 1;
+        else if (selected >= length)
+            selected = by == "page" ? length - 1 : 0;
+        view.dispatch({ effects: setSelectedEffect.of(selected) });
+        return true;
+    };
+}
+/**
+Accept the current completion.
+*/
+const acceptCompletion = (view) => {
+    let cState = view.state.field(completionState, false);
+    if (view.state.readOnly || !cState || !cState.open || cState.open.selected < 0 ||
+        Date.now() - cState.open.timestamp < view.state.facet(completionConfig).interactionDelay)
+        return false;
+    if (!cState.open.disabled)
+        return applyCompletion(view, cState.open.options[cState.open.selected]);
+    return true;
+};
+/**
+Explicitly start autocompletion.
+*/
+const startCompletion = (view) => {
+    let cState = view.state.field(completionState, false);
+    if (!cState)
+        return false;
+    view.dispatch({ effects: startCompletionEffect.of(true) });
+    return true;
+};
+/**
+Close the currently active completion.
+*/
+const closeCompletion = (view) => {
+    let cState = view.state.field(completionState, false);
+    if (!cState || !cState.active.some(a => a.state != 0 /* State.Inactive */))
+        return false;
+    view.dispatch({ effects: closeCompletionEffect.of(null) });
+    return true;
+};
+class RunningQuery {
+    constructor(active, context) {
+        this.active = active;
+        this.context = context;
+        this.time = Date.now();
+        this.updates = [];
+        // Note that 'undefined' means 'not done yet', whereas 'null' means
+        // 'query returned null'.
+        this.done = undefined;
+    }
+}
+const DebounceTime = 50, MaxUpdateCount = 50, MinAbortTime = 1000;
+const completionPlugin = /*@__PURE__*/view_.ViewPlugin.fromClass(class {
+    constructor(view) {
+        this.view = view;
+        this.debounceUpdate = -1;
+        this.running = [];
+        this.debounceAccept = -1;
+        this.composing = 0 /* CompositionState.None */;
+        for (let active of view.state.field(completionState).active)
+            if (active.state == 1 /* State.Pending */)
+                this.startQuery(active);
+    }
+    update(update) {
+        let cState = update.state.field(completionState);
+        if (!update.selectionSet && !update.docChanged && update.startState.field(completionState) == cState)
+            return;
+        let doesReset = update.transactions.some(tr => {
+            return (tr.selection || tr.docChanged) && !getUserEvent(tr);
+        });
+        for (let i = 0; i < this.running.length; i++) {
+            let query = this.running[i];
+            if (doesReset ||
+                query.updates.length + update.transactions.length > MaxUpdateCount && Date.now() - query.time > MinAbortTime) {
+                for (let handler of query.context.abortListeners) {
+                    try {
+                        handler();
+                    }
+                    catch (e) {
+                        (0,view_.logException)(this.view.state, e);
+                    }
+                }
+                query.context.abortListeners = null;
+                this.running.splice(i--, 1);
+            }
+            else {
+                query.updates.push(...update.transactions);
+            }
+        }
+        if (this.debounceUpdate > -1)
+            clearTimeout(this.debounceUpdate);
+        this.debounceUpdate = cState.active.some(a => a.state == 1 /* State.Pending */ && !this.running.some(q => q.active.source == a.source))
+            ? setTimeout(() => this.startUpdate(), DebounceTime) : -1;
+        if (this.composing != 0 /* CompositionState.None */)
+            for (let tr of update.transactions) {
+                if (getUserEvent(tr) == "input")
+                    this.composing = 2 /* CompositionState.Changed */;
+                else if (this.composing == 2 /* CompositionState.Changed */ && tr.selection)
+                    this.composing = 3 /* CompositionState.ChangedAndMoved */;
+            }
+    }
+    startUpdate() {
+        this.debounceUpdate = -1;
+        let { state } = this.view, cState = state.field(completionState);
+        for (let active of cState.active) {
+            if (active.state == 1 /* State.Pending */ && !this.running.some(r => r.active.source == active.source))
+                this.startQuery(active);
+        }
+    }
+    startQuery(active) {
+        let { state } = this.view, pos = cur(state);
+        let context = new CompletionContext(state, pos, active.explicitPos == pos);
+        let pending = new RunningQuery(active, context);
+        this.running.push(pending);
+        Promise.resolve(active.source(context)).then(result => {
+            if (!pending.context.aborted) {
+                pending.done = result || null;
+                this.scheduleAccept();
+            }
+        }, err => {
+            this.view.dispatch({ effects: closeCompletionEffect.of(null) });
+            (0,view_.logException)(this.view.state, err);
+        });
+    }
+    scheduleAccept() {
+        if (this.running.every(q => q.done !== undefined))
+            this.accept();
+        else if (this.debounceAccept < 0)
+            this.debounceAccept = setTimeout(() => this.accept(), DebounceTime);
+    }
+    // For each finished query in this.running, try to create a result
+    // or, if appropriate, restart the query.
+    accept() {
+        var _a;
+        if (this.debounceAccept > -1)
+            clearTimeout(this.debounceAccept);
+        this.debounceAccept = -1;
+        let updated = [];
+        let conf = this.view.state.facet(completionConfig);
+        for (let i = 0; i < this.running.length; i++) {
+            let query = this.running[i];
+            if (query.done === undefined)
+                continue;
+            this.running.splice(i--, 1);
+            if (query.done) {
+                let active = new ActiveResult(query.active.source, query.active.explicitPos, query.done, query.done.from, (_a = query.done.to) !== null && _a !== void 0 ? _a : cur(query.updates.length ? query.updates[0].startState : this.view.state));
+                // Replay the transactions that happened since the start of
+                // the request and see if that preserves the result
+                for (let tr of query.updates)
+                    active = active.update(tr, conf);
+                if (active.hasResult()) {
+                    updated.push(active);
+                    continue;
+                }
+            }
+            let current = this.view.state.field(completionState).active.find(a => a.source == query.active.source);
+            if (current && current.state == 1 /* State.Pending */) {
+                if (query.done == null) {
+                    // Explicitly failed. Should clear the pending status if it
+                    // hasn't been re-set in the meantime.
+                    let active = new ActiveSource(query.active.source, 0 /* State.Inactive */);
+                    for (let tr of query.updates)
+                        active = active.update(tr, conf);
+                    if (active.state != 1 /* State.Pending */)
+                        updated.push(active);
+                }
+                else {
+                    // Cleared by subsequent transactions. Restart.
+                    this.startQuery(current);
+                }
+            }
+        }
+        if (updated.length)
+            this.view.dispatch({ effects: setActiveEffect.of(updated) });
+    }
+}, {
+    eventHandlers: {
+        blur(event) {
+            let state = this.view.state.field(completionState, false);
+            if (state && state.tooltip && this.view.state.facet(completionConfig).closeOnBlur) {
+                let dialog = state.open && (0,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 */;
+        },
+        compositionend() {
+            if (this.composing == 3 /* CompositionState.ChangedAndMoved */) {
+                // Safari fires compositionend events synchronously, possibly
+                // from inside an update, so dispatch asynchronously to avoid reentrancy
+                setTimeout(() => this.view.dispatch({ effects: startCompletionEffect.of(false) }), 20);
+            }
+            this.composing = 0 /* CompositionState.None */;
+        }
+    }
+});
+function applyCompletion(view, option) {
+    const apply = option.completion.apply || option.completion.label;
+    let result = view.state.field(completionState).active.find(a => a.source == option.source);
+    if (!(result instanceof ActiveResult))
+        return false;
+    if (typeof apply == "string")
+        view.dispatch(Object.assign(Object.assign({}, insertCompletionText(view.state, apply, result.from, result.to)), { annotations: pickedCompletion.of(option.completion) }));
+    else
+        apply(view, option.completion, result.from, result.to);
+    return true;
+}
 
 function optionContent(config) {
     let content = config.addToOptions.slice();
@@ -8903,9 +9162,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;
@@ -8929,10 +9188,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(); }
@@ -8962,7 +9227,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;
@@ -8972,7 +9237,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)) {
@@ -9003,12 +9268,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;
@@ -9038,41 +9306,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";
             }
         }
     }
@@ -9082,8 +9326,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");
@@ -9124,32 +9382,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.source, 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.source, 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)
@@ -9343,8 +9624,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__*/state_.StateEffect.define();
-const closeCompletionEffect = /*@__PURE__*/state_.StateEffect.define();
 const setActiveEffect = /*@__PURE__*/state_.StateEffect.define({
     map(sources, mapping) { return sources.map(s => s.map(mapping)); }
 });
@@ -9358,218 +9637,6 @@ const completionState = /*@__PURE__*/state_.StateField.define({
     ]
 });
 
-/**
-Returns a command that moves the completion selection forward or
-backward by the given amount.
-*/
-function moveCompletionSelection(forward, by = "option") {
-    return (view) => {
-        let cState = view.state.field(completionState, false);
-        if (!cState || !cState.open || cState.open.disabled ||
-            Date.now() - cState.open.timestamp < view.state.facet(completionConfig).interactionDelay)
-            return false;
-        let step = 1, tooltip;
-        if (by == "page" && (tooltip = (0,view_.getTooltip)(view, cState.open.tooltip)))
-            step = Math.max(2, Math.floor(tooltip.dom.offsetHeight /
-                tooltip.dom.querySelector("li").offsetHeight) - 1);
-        let { length } = cState.open.options;
-        let selected = cState.open.selected > -1 ? cState.open.selected + step * (forward ? 1 : -1) : forward ? 0 : length - 1;
-        if (selected < 0)
-            selected = by == "page" ? 0 : length - 1;
-        else if (selected >= length)
-            selected = by == "page" ? length - 1 : 0;
-        view.dispatch({ effects: setSelectedEffect.of(selected) });
-        return true;
-    };
-}
-/**
-Accept the current completion.
-*/
-const acceptCompletion = (view) => {
-    let cState = view.state.field(completionState, false);
-    if (view.state.readOnly || !cState || !cState.open || cState.open.selected < 0 ||
-        Date.now() - cState.open.timestamp < view.state.facet(completionConfig).interactionDelay)
-        return false;
-    if (!cState.open.disabled)
-        applyCompletion(view, cState.open.options[cState.open.selected]);
-    return true;
-};
-/**
-Explicitly start autocompletion.
-*/
-const startCompletion = (view) => {
-    let cState = view.state.field(completionState, false);
-    if (!cState)
-        return false;
-    view.dispatch({ effects: startCompletionEffect.of(true) });
-    return true;
-};
-/**
-Close the currently active completion.
-*/
-const closeCompletion = (view) => {
-    let cState = view.state.field(completionState, false);
-    if (!cState || !cState.active.some(a => a.state != 0 /* State.Inactive */))
-        return false;
-    view.dispatch({ effects: closeCompletionEffect.of(null) });
-    return true;
-};
-class RunningQuery {
-    constructor(active, context) {
-        this.active = active;
-        this.context = context;
-        this.time = Date.now();
-        this.updates = [];
-        // Note that 'undefined' means 'not done yet', whereas 'null' means
-        // 'query returned null'.
-        this.done = undefined;
-    }
-}
-const DebounceTime = 50, MaxUpdateCount = 50, MinAbortTime = 1000;
-const completionPlugin = /*@__PURE__*/view_.ViewPlugin.fromClass(class {
-    constructor(view) {
-        this.view = view;
-        this.debounceUpdate = -1;
-        this.running = [];
-        this.debounceAccept = -1;
-        this.composing = 0 /* CompositionState.None */;
-        for (let active of view.state.field(completionState).active)
-            if (active.state == 1 /* State.Pending */)
-                this.startQuery(active);
-    }
-    update(update) {
-        let cState = update.state.field(completionState);
-        if (!update.selectionSet && !update.docChanged && update.startState.field(completionState) == cState)
-            return;
-        let doesReset = update.transactions.some(tr => {
-            return (tr.selection || tr.docChanged) && !getUserEvent(tr);
-        });
-        for (let i = 0; i < this.running.length; i++) {
-            let query = this.running[i];
-            if (doesReset ||
-                query.updates.length + update.transactions.length > MaxUpdateCount && Date.now() - query.time > MinAbortTime) {
-                for (let handler of query.context.abortListeners) {
-                    try {
-                        handler();
-                    }
-                    catch (e) {
-                        (0,view_.logException)(this.view.state, e);
-                    }
-                }
-                query.context.abortListeners = null;
-                this.running.splice(i--, 1);
-            }
-            else {
-                query.updates.push(...update.transactions);
-            }
-        }
-        if (this.debounceUpdate > -1)
-            clearTimeout(this.debounceUpdate);
-        this.debounceUpdate = cState.active.some(a => a.state == 1 /* State.Pending */ && !this.running.some(q => q.active.source == a.source))
-            ? setTimeout(() => this.startUpdate(), DebounceTime) : -1;
-        if (this.composing != 0 /* CompositionState.None */)
-            for (let tr of update.transactions) {
-                if (getUserEvent(tr) == "input")
-                    this.composing = 2 /* CompositionState.Changed */;
-                else if (this.composing == 2 /* CompositionState.Changed */ && tr.selection)
-                    this.composing = 3 /* CompositionState.ChangedAndMoved */;
-            }
-    }
-    startUpdate() {
-        this.debounceUpdate = -1;
-        let { state } = this.view, cState = state.field(completionState);
-        for (let active of cState.active) {
-            if (active.state == 1 /* State.Pending */ && !this.running.some(r => r.active.source == active.source))
-                this.startQuery(active);
-        }
-    }
-    startQuery(active) {
-        let { state } = this.view, pos = cur(state);
-        let context = new CompletionContext(state, pos, active.explicitPos == pos);
-        let pending = new RunningQuery(active, context);
-        this.running.push(pending);
-        Promise.resolve(active.source(context)).then(result => {
-            if (!pending.context.aborted) {
-                pending.done = result || null;
-                this.scheduleAccept();
-            }
-        }, err => {
-            this.view.dispatch({ effects: closeCompletionEffect.of(null) });
-            (0,view_.logException)(this.view.state, err);
-        });
-    }
-    scheduleAccept() {
-        if (this.running.every(q => q.done !== undefined))
-            this.accept();
-        else if (this.debounceAccept < 0)
-            this.debounceAccept = setTimeout(() => this.accept(), DebounceTime);
-    }
-    // For each finished query in this.running, try to create a result
-    // or, if appropriate, restart the query.
-    accept() {
-        var _a;
-        if (this.debounceAccept > -1)
-            clearTimeout(this.debounceAccept);
-        this.debounceAccept = -1;
-        let updated = [];
-        let conf = this.view.state.facet(completionConfig);
-        for (let i = 0; i < this.running.length; i++) {
-            let query = this.running[i];
-            if (query.done === undefined)
-                continue;
-            this.running.splice(i--, 1);
-            if (query.done) {
-                let active = new ActiveResult(query.active.source, query.active.explicitPos, query.done, query.done.from, (_a = query.done.to) !== null && _a !== void 0 ? _a : cur(query.updates.length ? query.updates[0].startState : this.view.state));
-                // Replay the transactions that happened since the start of
-                // the request and see if that preserves the result
-                for (let tr of query.updates)
-                    active = active.update(tr, conf);
-                if (active.hasResult()) {
-                    updated.push(active);
-                    continue;
-                }
-            }
-            let current = this.view.state.field(completionState).active.find(a => a.source == query.active.source);
-            if (current && current.state == 1 /* State.Pending */) {
-                if (query.done == null) {
-                    // Explicitly failed. Should clear the pending status if it
-                    // hasn't been re-set in the meantime.
-                    let active = new ActiveSource(query.active.source, 0 /* State.Inactive */);
-                    for (let tr of query.updates)
-                        active = active.update(tr, conf);
-                    if (active.state != 1 /* State.Pending */)
-                        updated.push(active);
-                }
-                else {
-                    // Cleared by subsequent transactions. Restart.
-                    this.startQuery(current);
-                }
-            }
-        }
-        if (updated.length)
-            this.view.dispatch({ effects: setActiveEffect.of(updated) });
-    }
-}, {
-    eventHandlers: {
-        blur() {
-            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) });
-        },
-        compositionstart() {
-            this.composing = 1 /* CompositionState.Started */;
-        },
-        compositionend() {
-            if (this.composing == 3 /* CompositionState.ChangedAndMoved */) {
-                // Safari fires compositionend events synchronously, possibly
-                // from inside an update, so dispatch asynchronously to avoid reentrancy
-                setTimeout(() => this.view.dispatch({ effects: startCompletionEffect.of(false) }), 20);
-            }
-            this.composing = 0 /* CompositionState.None */;
-        }
-    }
-});
-
 const autocomplete_dist_baseTheme = /*@__PURE__*/view_.EditorView.baseTheme({
     ".cm-tooltip.cm-tooltip-autocomplete": {
         "& > ul": {
@@ -9584,13 +9651,21 @@ const autocomplete_dist_baseTheme = /*@__PURE__*/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]": {
@@ -9853,7 +9928,7 @@ function snippet(template) {
         let spec = {
             changes: { from, to, insert: Text.of(text) },
             scrollIntoView: true,
-            annotations: pickedCompletion.of(completion)
+            annotations: completion ? pickedCompletion.of(completion) : undefined
         };
         if (ranges.length)
             spec.selection = fieldSelection(ranges, 0);
@@ -9897,6 +9972,22 @@ const nextSnippetField = /*@__PURE__*/moveField(1);
 Move to the previous snippet field, if available.
 */
 const prevSnippetField = /*@__PURE__*/moveField(-1);
+/**
+Check if there is an active snippet with a next field for
+`nextSnippetField` to move to.
+*/
+function hasNextSnippetField(state) {
+    let active = state.field(snippetState, false);
+    return !!(active && active.ranges.some(r => r.field == active.active + 1));
+}
+/**
+Returns true if there is an active snippet and a previous field
+for `prevSnippetField` to move to.
+*/
+function hasPrevSnippetField(state) {
+    let active = state.field(snippetState, false);
+    return !!(active && active.active > 0);
+}
 const defaultSnippetKeymap = [
     { key: "Tab", run: nextSnippetField, shift: prevSnippetField },
     { key: "Escape", run: clearSnippet }
@@ -10024,9 +10115,6 @@ const closeBracketEffect = /*@__PURE__*/state_.StateEffect.define({
         return mapped == null ? undefined : mapped;
     }
 });
-const skipBracketEffect = /*@__PURE__*/state_.StateEffect.define({
-    map(value, mapping) { return mapping.mapPos(value); }
-});
 const closedBracket = /*@__PURE__*/new class extends state_.RangeValue {
 };
 closedBracket.startSide = 1;
@@ -10041,12 +10129,9 @@ const bracketState = /*@__PURE__*/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;
     }
 });
@@ -10174,15 +10259,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 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.update({
-        selection: state_.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
@@ -10203,8 +10288,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: 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.sliceDoc(pos - 2 * token.length, pos) == token + token &&
@@ -10403,17 +10489,7 @@ function hideTooltip(tr, tooltip) {
     return !!(tr.effects.some(e => e.is(setDiagnosticsEffect)) || tr.changes.touchesRange(tooltip.pos));
 }
 function maybeEnableLint(state, effects) {
-    return state.field(lintState, false) ? effects : effects.concat(state_.StateEffect.appendConfig.of([
-        lintState,
-        view_.EditorView.decorations.compute([lintState], state => {
-            let { selected, panel } = state.field(lintState);
-            return !selected || !panel || selected.from == selected.to ? view_.Decoration.none : view_.Decoration.set([
-                activeMark.range(selected.from, selected.to)
-            ]);
-        }),
-        (0,view_.hoverTooltip)(lintTooltip, { hideOn: hideTooltip }),
-        lint_dist_baseTheme
-    ]));
+    return state.field(lintState, false) ? effects : effects.concat(state_.StateEffect.appendConfig.of(lintExtensions));
 }
 /**
 Returns a transaction spec which updates the current set of
@@ -10545,7 +10621,7 @@ const lintKeymap = [
     { key: "Mod-Shift-m", run: openLintPanel, preventDefault: true },
     { key: "F8", run: nextDiagnostic }
 ];
-const lintPlugin = /*@__PURE__*/view_.ViewPlugin.fromClass(class {
+const lintPlugin = /*@__PURE__*/(/* unused pure expression or super */ null && (ViewPlugin.fromClass(class {
     constructor(view) {
         this.view = view;
         this.timeout = -1;
@@ -10567,7 +10643,7 @@ const lintPlugin = /*@__PURE__*/view_.ViewPlugin.fromClass(class {
                 let all = annotations.reduce((a, b) => a.concat(b));
                 if (this.view.state.doc == state.doc)
                     this.view.dispatch(setDiagnostics(this.view.state, all));
-            }, error => { (0,view_.logException)(this.view.state, error); });
+            }, error => { logException(this.view.state, error); });
         }
     }
     update(update) {
@@ -10590,7 +10666,7 @@ const lintPlugin = /*@__PURE__*/view_.ViewPlugin.fromClass(class {
     destroy() {
         clearTimeout(this.timeout);
     }
-});
+})));
 const lintConfig = /*@__PURE__*/state_.Facet.define({
     combine(input) {
         return Object.assign({ sources: input.map(i => i.source) }, (0,state_.combineConfig)(input.map(i => i.config), {
@@ -10601,8 +10677,7 @@ const lintConfig = /*@__PURE__*/state_.Facet.define({
         }, {
             needsRefresh: (a, b) => !a ? b : !b ? a : u => a(u) || b(u)
         }));
-    },
-    enables: lintPlugin
+    }
 });
 /**
 Given a diagnostic source, this function returns an extension that
@@ -10610,7 +10685,11 @@ enables linting with that source. It will be called whenever the
 editor is idle (after its content changed).
 */
 function linter(source, config = {}) {
-    return lintConfig.of({ source, config });
+    return [
+        lintConfig.of({ source, config }),
+        lintPlugin,
+        lintExtensions
+    ];
 }
 /**
 Forces any linters [configured](https://codemirror.net/6/docs/ref/#lint.linter) to run when the
@@ -11072,6 +11151,17 @@ const lintGutterTheme = /*@__PURE__*/view_.EditorView.baseTheme({
         content: /*@__PURE__*/svg(`<circle cx="20" cy="20" r="15" fill="#f87" stroke="#f43" stroke-width="6"/>`)
     },
 });
+const lintExtensions = [
+    lintState,
+    /*@__PURE__*/view_.EditorView.decorations.compute([lintState], state => {
+        let { selected, panel } = state.field(lintState);
+        return !selected || !panel || selected.from == selected.to ? view_.Decoration.none : view_.Decoration.set([
+            activeMark.range(selected.from, selected.to)
+        ]);
+    }),
+    /*@__PURE__*/(0,view_.hoverTooltip)(lintTooltip, { hideOn: hideTooltip }),
+    lint_dist_baseTheme
+];
 const lintGutterConfig = /*@__PURE__*/state_.Facet.define({
     combine(configs) {
         return (0,state_.combineConfig)(configs, {