sqlui 0.1.67 → 0.1.69

data/client/resources/sqlui.js

@@ -3971,11 +3971,11 @@
      constructor(root) {
        if (!root.head && root.adoptedStyleSheets && typeof CSSStyleSheet != "undefined") {
          if (adoptedSet) {
-           root.adoptedStyleSheets = [adoptedSet.sheet].concat(root.adoptedStyleSheets);
+           root.adoptedStyleSheets = [adoptedSet.sheet, ...root.adoptedStyleSheets];
            return root[SET] = adoptedSet
          }
          this.sheet = new CSSStyleSheet;
-         root.adoptedStyleSheets = [this.sheet].concat(root.adoptedStyleSheets);
+         root.adoptedStyleSheets = [this.sheet, ...root.adoptedStyleSheets];
          adoptedSet = this;
        } else {
          this.styleTag = (root.ownerDocument || root).createElement("style");
@@ -4490,11 +4490,6 @@
            this.dom = null;
            this.dirty = 2 /* Dirty.Node */;
        }
-       get editorView() {
-           if (!this.parent)
-               throw new Error("Accessing view in orphan content view");
-           return this.parent.editorView;
-       }
        get overrideDOMText() { return null; }
        get posAtStart() {
            return this.parent ? this.parent.posBefore(this) : 0;
@@ -4518,7 +4513,7 @@
        // (side > 0) or directly on (when the browser supports it) the
        // given position.
        coordsAt(_pos, _side) { return null; }
-       sync(track) {
+       sync(view, track) {
            if (this.dirty & 2 /* Dirty.Node */) {
                let parent = this.dom;
                let prev = null, next;
@@ -4529,7 +4524,7 @@
                            if (!contentView || !contentView.parent && contentView.canReuseDOM(child))
                                child.reuseDOM(next);
                        }
-                       child.sync(track);
+                       child.sync(view, track);
                        child.dirty = 0 /* Dirty.Not */;
                    }
                    next = prev ? prev.nextSibling : parent.firstChild;
@@ -4553,7 +4548,7 @@
            else if (this.dirty & 1 /* Dirty.Child */) {
                for (let child of this.children)
                    if (child.dirty) {
-                       child.sync(track);
+                       child.sync(view, track);
                        child.dirty = 0 /* Dirty.Not */;
                    }
            }
@@ -4680,6 +4675,7 @@
        }
        static get(node) { return node.cmView; }
        get isEditable() { return true; }
+       get isWidget() { return false; }
        merge(from, to, source, hasStart, openStart, openEnd) {
            return false;
        }
@@ -4847,7 +4843,7 @@
        createDOM(textDOM) {
            this.setDOM(textDOM || document.createTextNode(this.text));
        }
-       sync(track) {
+       sync(view, track) {
            if (!this.dom)
                this.createDOM();
            if (this.dom.nodeValue != this.text) {
@@ -4908,12 +4904,12 @@
                this.dirty |= 4 /* Dirty.Attrs */ | 2 /* Dirty.Node */;
            }
        }
-       sync(track) {
+       sync(view, track) {
            if (!this.dom)
                this.setDOM(this.setAttrs(document.createElement(this.mark.tagName)));
            else if (this.dirty & 4 /* Dirty.Attrs */)
                this.setAttrs(this.dom);
-           super.sync(track);
+           super.sync(view, track);
        }
        merge(from, to, source, _hasStart, openStart, openEnd) {
            if (source && (!(source instanceof MarkView && source.mark.eq(this.mark)) ||
@@ -4997,12 +4993,12 @@
            this.length -= from;
            return result;
        }
-       sync() {
-           if (!this.dom || !this.widget.updateDOM(this.dom)) {
+       sync(view) {
+           if (!this.dom || !this.widget.updateDOM(this.dom, view)) {
                if (this.dom && this.prevWidget)
                    this.prevWidget.destroy(this.dom);
                this.prevWidget = null;
-               this.setDOM(this.widget.toDOM(this.editorView));
+               this.setDOM(this.widget.toDOM(view));
                this.dom.contentEditable = "false";
            }
        }
@@ -5035,7 +5031,7 @@
            let top = this;
            while (top.parent)
                top = top.parent;
-           let view = top.editorView, text = view && view.state.doc, start = this.posAtStart;
+           let { view } = top, text = view && view.state.doc, start = this.posAtStart;
            return text ? text.slice(start, start + this.length) : Text.empty;
        }
        domAtPos(pos) {
@@ -5054,6 +5050,7 @@
            return this.length ? rect : flattenRect(rect, this.side > 0);
        }
        get isEditable() { return false; }
+       get isWidget() { return true; }
        destroy() {
            super.destroy();
            if (this.dom)
@@ -5116,8 +5113,9 @@
    }
    function posFromDOMInCompositionTree(node, offset, view, text) {
        if (view instanceof MarkView) {
+           let pos = 0;
            for (let child of view.children) {
-               let pos = 0, hasComp = contains(child.dom, text);
+               let hasComp = contains(child.dom, text);
                if (contains(child.dom, node))
                    return pos + (hasComp ? posFromDOMInCompositionTree(node, offset, child, text) : child.localPosFromDOM(node, offset));
                pos += hasComp ? text.nodeValue.length : child.length;
@@ -5151,7 +5149,7 @@
            }
        }
        getSide() { return this.side; }
-       domAtPos(pos) { return DOMPos.before(this.dom); }
+       domAtPos(pos) { return this.side > 0 ? DOMPos.before(this.dom) : DOMPos.after(this.dom); }
        localPosFromDOM() { return 0; }
        domBoundsAround() { return null; }
        coordsAt(pos) {
@@ -5327,7 +5325,7 @@
        couldn't (in which case the widget will be redrawn). The default
        implementation just returns false.
        */
-       updateDOM(dom) { return false; }
+       updateDOM(dom, view) { return false; }
        /**
        @internal
        */
@@ -5642,7 +5640,7 @@
                this.dirty |= 4 /* Dirty.Attrs */ | 2 /* Dirty.Node */;
            }
        }
-       sync(track) {
+       sync(view, track) {
            var _a;
            if (!this.dom) {
                this.setDOM(document.createElement("div"));
@@ -5659,7 +5657,7 @@
                this.dom.classList.add("cm-line");
                this.prevAttrs = undefined;
            }
-           super.sync(track);
+           super.sync(view, track);
            let last = this.dom.lastChild;
            while (last && ContentView.get(last) instanceof MarkView)
                last = last.lastChild;
@@ -5674,7 +5672,7 @@
        measureTextSize() {
            if (this.children.length == 0 || this.length > 20)
                return null;
-           let totalWidth = 0;
+           let totalWidth = 0, textHeight;
            for (let child of this.children) {
                if (!(child instanceof TextView) || /[^ -~]/.test(child.text))
                    return null;
@@ -5682,14 +5680,26 @@
                if (rects.length != 1)
                    return null;
                totalWidth += rects[0].width;
+               textHeight = rects[0].height;
            }
            return !totalWidth ? null : {
                lineHeight: this.dom.getBoundingClientRect().height,
-               charWidth: totalWidth / this.length
+               charWidth: totalWidth / this.length,
+               textHeight
            };
        }
        coordsAt(pos, side) {
-           return coordsInChildren(this, pos, side);
+           let rect = coordsInChildren(this, pos, side);
+           // Correct rectangle height for empty lines when the returned
+           // height is larger than the text height.
+           if (!this.children.length && rect && this.parent) {
+               let { heightOracle } = this.parent.view.viewState, height = rect.bottom - rect.top;
+               if (Math.abs(height - heightOracle.lineHeight) < 2 && heightOracle.textHeight < height) {
+                   let dist = (height - heightOracle.textHeight) / 2;
+                   return { top: rect.top + dist, bottom: rect.bottom - dist, left: rect.left, right: rect.left };
+               }
+           }
+           return rect;
        }
        become(_other) { return false; }
        get type() { return BlockType.Text; }
@@ -5734,12 +5744,12 @@
            return end;
        }
        get children() { return noChildren; }
-       sync() {
-           if (!this.dom || !this.widget.updateDOM(this.dom)) {
+       sync(view) {
+           if (!this.dom || !this.widget.updateDOM(this.dom, view)) {
                if (this.dom && this.prevWidget)
                    this.prevWidget.destroy(this.dom);
                this.prevWidget = null;
-               this.setDOM(this.widget.toDOM(this.editorView));
+               this.setDOM(this.widget.toDOM(view));
                this.dom.contentEditable = "false";
            }
        }
@@ -5763,6 +5773,8 @@
        }
        ignoreMutation() { return true; }
        ignoreEvent(event) { return this.widget.ignoreEvent(event); }
+       get isEditable() { return false; }
+       get isWidget() { return true; }
        destroy() {
            super.destroy();
            if (this.dom)
@@ -5944,6 +5956,7 @@
    const exceptionSink = /*@__PURE__*/Facet.define();
    const updateListener = /*@__PURE__*/Facet.define();
    const inputHandler$1 = /*@__PURE__*/Facet.define();
+   const focusChangeEffect = /*@__PURE__*/Facet.define();
    const perLineTextDirection = /*@__PURE__*/Facet.define({
        combine: values => values.some(x => x)
    });
@@ -6186,11 +6199,6 @@
            let changedRanges = [];
            this.changes.iterChangedRanges((fromA, toA, fromB, toB) => changedRanges.push(new ChangedRange(fromA, toA, fromB, toB)));
            this.changedRanges = changedRanges;
-           let focus = view.hasFocus;
-           if (focus != view.inputState.notifiedFocused) {
-               view.inputState.notifiedFocused = focus;
-               this.flags |= 1 /* UpdateFlag.Focus */;
-           }
        }
        /**
        @internal
@@ -6693,7 +6701,6 @@
            this.updateDeco();
            this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], 0);
        }
-       get editorView() { return this.view; }
        get length() { return this.view.state.doc.length; }
        // Update the document view to a given state. scrollIntoView can be
        // used as a hint to compute a new viewport that includes that
@@ -6753,7 +6760,7 @@
                // selection from the one it displays (issue #218). This tries
                // to detect that situation.
                let track = browser.chrome || browser.ios ? { node: observer.selectionRange.focusNode, written: false } : undefined;
-               this.sync(track);
+               this.sync(this.view, track);
                this.dirty = 0 /* Dirty.Not */;
                if (track && (track.written || observer.selectionRange.focusNode != track.node))
                    this.forceSelection = true;
@@ -6972,7 +6979,7 @@
                }
            }
            // If no workable line exists, force a layout of a measurable element
-           let dummy = document.createElement("div"), lineHeight, charWidth;
+           let dummy = document.createElement("div"), lineHeight, charWidth, textHeight;
            dummy.className = "cm-line";
            dummy.style.width = "99999px";
            dummy.textContent = "abc def ghi jkl mno pqr stu";
@@ -6981,9 +6988,10 @@
                let rect = clientRectsFor(dummy.firstChild)[0];
                lineHeight = dummy.getBoundingClientRect().height;
                charWidth = rect ? rect.width / 27 : 7;
+               textHeight = rect ? rect.height : lineHeight;
                dummy.remove();
            });
-           return { lineHeight, charWidth };
+           return { lineHeight, charWidth, textHeight };
        }
        childCursor(pos = this.length) {
            // Move back to start of last element when possible, so that
@@ -7148,22 +7156,32 @@
        ignoreEvent() { return false; }
        get customView() { return CompositionView; }
    }
-   function nearbyTextNode(node, offset, side) {
-       for (;;) {
-           if (node.nodeType == 3)
-               return node;
-           if (node.nodeType == 1 && offset > 0 && side <= 0) {
-               node = node.childNodes[offset - 1];
-               offset = maxOffset(node);
-           }
-           else if (node.nodeType == 1 && offset < node.childNodes.length && side >= 0) {
-               node = node.childNodes[offset];
-               offset = 0;
+   function nearbyTextNode(startNode, startOffset, side) {
+       if (side <= 0)
+           for (let node = startNode, offset = startOffset;;) {
+               if (node.nodeType == 3)
+                   return node;
+               if (node.nodeType == 1 && offset > 0) {
+                   node = node.childNodes[offset - 1];
+                   offset = maxOffset(node);
+               }
+               else {
+                   break;
+               }
            }
-           else {
-               return null;
+       if (side >= 0)
+           for (let node = startNode, offset = startOffset;;) {
+               if (node.nodeType == 3)
+                   return node;
+               if (node.nodeType == 1 && offset < node.childNodes.length && side >= 0) {
+                   node = node.childNodes[offset];
+                   offset = 0;
+               }
+               else {
+                   break;
+               }
            }
-       }
+       return null;
    }
    function nextToUneditable(node, offset) {
        if (node.nodeType != 1)
@@ -7326,11 +7344,11 @@
        }
        return { node, offset: closestOffset > -1 ? closestOffset : generalSide > 0 ? node.nodeValue.length : 0 };
    }
-   function posAtCoords(view, { x, y }, precise, bias = -1) {
-       var _a;
+   function posAtCoords(view, coords, precise, bias = -1) {
+       var _a, _b;
        let content = view.contentDOM.getBoundingClientRect(), docTop = content.top + view.viewState.paddingTop;
        let block, { docHeight } = view.viewState;
-       let yOffset = y - docTop;
+       let { x, y } = coords, yOffset = y - docTop;
        if (yOffset < 0)
            return 0;
        if (yOffset > docHeight)
@@ -7401,7 +7419,17 @@
                return yOffset > block.top + block.height / 2 ? block.to : block.from;
            ({ node, offset } = domPosAtCoords(line.dom, x, y));
        }
-       return view.docView.posFromDOM(node, offset);
+       let nearest = view.docView.nearest(node);
+       if (!nearest)
+           return null;
+       if (nearest.isWidget && ((_b = nearest.dom) === null || _b === void 0 ? void 0 : _b.nodeType) == 1) {
+           let rect = nearest.dom.getBoundingClientRect();
+           return coords.y < rect.top || coords.y <= rect.bottom && coords.x <= (rect.left + rect.right) / 2
+               ? nearest.posAtStart : nearest.posAtEnd;
+       }
+       else {
+           return nearest.localPosFromDOM(node, offset) + nearest.posAtStart;
+       }
    }
    function posAtCoordsImprecise(view, contentRect, block, x, y) {
        let into = Math.round((x - contentRect.left) * view.defaultCharacterWidth);
@@ -7589,8 +7617,16 @@
                this.registeredEvents.push(type);
            }
            view.scrollDOM.addEventListener("mousedown", (event) => {
-               if (event.target == view.scrollDOM)
+               if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom) {
                    handleEvent(handlers.mousedown, event);
+                   if (!event.defaultPrevented && event.button == 2) {
+                       // Make sure the content covers the entire scroller height, in order
+                       // to catch a native context menu click below it
+                       let start = view.contentDOM.style.minHeight;
+                       view.contentDOM.style.minHeight = "100%";
+                       setTimeout(() => view.contentDOM.style.minHeight = start, 200);
+                   }
+               }
            });
            if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
                // On Chrome 102, viewport updates somehow stop wheel-based
@@ -7767,11 +7803,13 @@
            this.multiple = view.state.facet(EditorState.allowMultipleSelections) && addsSelectionRange(view, startEvent);
            this.dragMove = dragMovesSelection(view, startEvent);
            this.dragging = isInPrimarySelection(view, startEvent) && getClickType(startEvent) == 1 ? null : false;
+       }
+       start(event) {
            // When clicking outside of the selection, immediately apply the
            // effect of starting the selection
            if (this.dragging === false) {
-               startEvent.preventDefault();
-               this.select(startEvent);
+               event.preventDefault();
+               this.select(event);
            }
        }
        move(event) {
@@ -7963,9 +8001,11 @@
            style = basicMouseSelection(view, event);
        if (style) {
            let mustFocus = view.root.activeElement != view.contentDOM;
+           view.inputState.startMouseSelection(new MouseSelection(view, event, style, mustFocus));
            if (mustFocus)
                view.observer.ignore(() => focusPreventScroll(view.contentDOM));
-           view.inputState.startMouseSelection(new MouseSelection(view, event, style, mustFocus));
+           if (view.inputState.mouseSelection)
+               view.inputState.mouseSelection.start(event);
        }
    };
    function rangeForClick(view, pos, bias, type) {
@@ -8120,7 +8160,7 @@
        view.observer.flush();
        let data = brokenClipboardAPI ? null : event.clipboardData;
        if (data) {
-           doPaste(view, data.getData("text/plain"));
+           doPaste(view, data.getData("text/plain") || data.getData("text/uri-text"));
            event.preventDefault();
        }
        else {
@@ -8188,10 +8228,26 @@
                userEvent: "delete.cut"
            });
    };
+   const isFocusChange = /*@__PURE__*/Annotation.define();
+   function focusChangeTransaction(state, focus) {
+       let effects = [];
+       for (let getEffect of state.facet(focusChangeEffect)) {
+           let effect = getEffect(state, focus);
+           if (effect)
+               effects.push(effect);
+       }
+       return effects ? state.update({ effects, annotations: isFocusChange.of(true) }) : null;
+   }
    function updateForFocusChange(view) {
        setTimeout(() => {
-           if (view.hasFocus != view.inputState.notifiedFocused)
-               view.update([]);
+           let focus = view.hasFocus;
+           if (focus != view.inputState.notifiedFocused) {
+               let tr = focusChangeTransaction(view.state, focus);
+               if (tr)
+                   view.dispatch(tr);
+               else
+                   view.update([]);
+           }
        }, 10);
    }
    handlers.focus = view => {
@@ -8264,8 +8320,9 @@
            this.lineWrapping = lineWrapping;
            this.doc = Text.empty;
            this.heightSamples = {};
-           this.lineHeight = 14;
+           this.lineHeight = 14; // The height of an entire line (line-height)
            this.charWidth = 7;
+           this.textHeight = 14; // The height of the actual font (font-size)
            this.lineLength = 30;
            // Used to track, during updateHeight, if any actual heights changed
            this.heightChanged = false;
@@ -8273,7 +8330,7 @@
        heightForGap(from, to) {
            let lines = this.doc.lineAt(to).number - this.doc.lineAt(from).number + 1;
            if (this.lineWrapping)
-               lines += Math.ceil(((to - from) - (lines * this.lineLength * 0.5)) / this.lineLength);
+               lines += Math.max(0, Math.ceil(((to - from) - (lines * this.lineLength * 0.5)) / this.lineLength));
            return this.lineHeight * lines;
        }
        heightForLine(length) {
@@ -8300,12 +8357,13 @@
            }
            return newHeight;
        }
-       refresh(whiteSpace, lineHeight, charWidth, lineLength, knownHeights) {
+       refresh(whiteSpace, lineHeight, charWidth, textHeight, lineLength, knownHeights) {
            let lineWrapping = wrappingWhiteSpace.indexOf(whiteSpace) > -1;
            let changed = Math.round(lineHeight) != Math.round(this.lineHeight) || this.lineWrapping != lineWrapping;
            this.lineWrapping = lineWrapping;
            this.lineHeight = lineHeight;
            this.charWidth = charWidth;
+           this.textHeight = textHeight;
            this.lineLength = lineLength;
            if (changed) {
                this.heightSamples = {};
@@ -8418,11 +8476,11 @@
        decomposeLeft(_to, result) { result.push(this); }
        decomposeRight(_from, result) { result.push(this); }
        applyChanges(decorations, oldDoc, oracle, changes) {
-           let me = this;
+           let me = this, doc = oracle.doc;
            for (let i = changes.length - 1; i >= 0; i--) {
                let { fromA, toA, fromB, toB } = changes[i];
-               let start = me.lineAt(fromA, QueryType$1.ByPosNoHeight, oldDoc, 0, 0);
-               let end = start.to >= toA ? start : me.lineAt(toA, QueryType$1.ByPosNoHeight, oldDoc, 0, 0);
+               let start = me.lineAt(fromA, QueryType$1.ByPosNoHeight, oracle.setDoc(oldDoc), 0, 0);
+               let end = start.to >= toA ? start : me.lineAt(toA, QueryType$1.ByPosNoHeight, oracle, 0, 0);
                toB += end.to - toA;
                toA = end.to;
                while (i > 0 && start.from <= changes[i - 1].toA) {
@@ -8430,11 +8488,11 @@
                    fromB = changes[i - 1].fromB;
                    i--;
                    if (fromA < start.from)
-                       start = me.lineAt(fromA, QueryType$1.ByPosNoHeight, oldDoc, 0, 0);
+                       start = me.lineAt(fromA, QueryType$1.ByPosNoHeight, oracle, 0, 0);
                }
                fromB += start.from - fromA;
                fromA = start.from;
-               let nodes = NodeBuilder.build(oracle, decorations, fromB, toB);
+               let nodes = NodeBuilder.build(oracle.setDoc(doc), decorations, fromB, toB);
                me = me.replace(fromA, toA, nodes);
            }
            return me.updateHeight(oracle, 0);
@@ -8501,15 +8559,15 @@
            super(length, height);
            this.type = type;
        }
-       blockAt(_height, _doc, top, offset) {
+       blockAt(_height, _oracle, top, offset) {
            return new BlockInfo(offset, this.length, top, this.height, this.type);
        }
-       lineAt(_value, _type, doc, top, offset) {
-           return this.blockAt(0, doc, top, offset);
+       lineAt(_value, _type, oracle, top, offset) {
+           return this.blockAt(0, oracle, top, offset);
        }
-       forEachLine(from, to, doc, top, offset, f) {
+       forEachLine(from, to, oracle, top, offset, f) {
            if (from <= offset + this.length && to >= offset)
-               f(this.blockAt(0, doc, top, offset));
+               f(this.blockAt(0, oracle, top, offset));
        }
        updateHeight(oracle, offset = 0, _force = false, measured) {
            if (measured && measured.from <= offset && measured.more)
@@ -8555,35 +8613,60 @@
    }
    class HeightMapGap extends HeightMap {
        constructor(length) { super(length, 0); }
-       lines(doc, offset) {
-           let firstLine = doc.lineAt(offset).number, lastLine = doc.lineAt(offset + this.length).number;
-           return { firstLine, lastLine, lineHeight: this.height / (lastLine - firstLine + 1) };
+       heightMetrics(oracle, offset) {
+           let firstLine = oracle.doc.lineAt(offset).number, lastLine = oracle.doc.lineAt(offset + this.length).number;
+           let lines = lastLine - firstLine + 1;
+           let perLine, perChar = 0;
+           if (oracle.lineWrapping) {
+               let totalPerLine = Math.min(this.height, oracle.lineHeight * lines);
+               perLine = totalPerLine / lines;
+               perChar = (this.height - totalPerLine) / (this.length - lines - 1);
+           }
+           else {
+               perLine = this.height / lines;
+           }
+           return { firstLine, lastLine, perLine, perChar };
        }
-       blockAt(height, doc, top, offset) {
-           let { firstLine, lastLine, lineHeight } = this.lines(doc, offset);
-           let line = Math.max(0, Math.min(lastLine - firstLine, Math.floor((height - top) / lineHeight)));
-           let { from, length } = doc.line(firstLine + line);
-           return new BlockInfo(from, length, top + lineHeight * line, lineHeight, BlockType.Text);
+       blockAt(height, oracle, top, offset) {
+           let { firstLine, lastLine, perLine, perChar } = this.heightMetrics(oracle, offset);
+           if (oracle.lineWrapping) {
+               let guess = offset + Math.round(Math.max(0, Math.min(1, (height - top) / this.height)) * this.length);
+               let line = oracle.doc.lineAt(guess), lineHeight = perLine + line.length * perChar;
+               let lineTop = Math.max(top, height - lineHeight / 2);
+               return new BlockInfo(line.from, line.length, lineTop, lineHeight, BlockType.Text);
+           }
+           else {
+               let line = Math.max(0, Math.min(lastLine - firstLine, Math.floor((height - top) / perLine)));
+               let { from, length } = oracle.doc.line(firstLine + line);
+               return new BlockInfo(from, length, top + perLine * line, perLine, BlockType.Text);
+           }
        }
-       lineAt(value, type, doc, top, offset) {
+       lineAt(value, type, oracle, top, offset) {
            if (type == QueryType$1.ByHeight)
-               return this.blockAt(value, doc, top, offset);
+               return this.blockAt(value, oracle, top, offset);
            if (type == QueryType$1.ByPosNoHeight) {
-               let { from, to } = doc.lineAt(value);
+               let { from, to } = oracle.doc.lineAt(value);
                return new BlockInfo(from, to - from, 0, 0, BlockType.Text);
            }
-           let { firstLine, lineHeight } = this.lines(doc, offset);
-           let { from, length, number } = doc.lineAt(value);
-           return new BlockInfo(from, length, top + lineHeight * (number - firstLine), lineHeight, BlockType.Text);
-       }
-       forEachLine(from, to, doc, top, offset, f) {
-           let { firstLine, lineHeight } = this.lines(doc, offset);
-           for (let pos = Math.max(from, offset), end = Math.min(offset + this.length, to); pos <= end;) {
-               let line = doc.lineAt(pos);
-               if (pos == from)
-                   top += lineHeight * (line.number - firstLine);
-               f(new BlockInfo(line.from, line.length, top, lineHeight, BlockType.Text));
-               top += lineHeight;
+           let { firstLine, perLine, perChar } = this.heightMetrics(oracle, offset);
+           let line = oracle.doc.lineAt(value), lineHeight = perLine + line.length * perChar;
+           let linesAbove = line.number - firstLine;
+           let lineTop = top + perLine * linesAbove + perChar * (line.from - offset - linesAbove);
+           return new BlockInfo(line.from, line.length, Math.max(top, Math.min(lineTop, top + this.height - lineHeight)), lineHeight, BlockType.Text);
+       }
+       forEachLine(from, to, oracle, top, offset, f) {
+           from = Math.max(from, offset);
+           to = Math.min(to, offset + this.length);
+           let { firstLine, perLine, perChar } = this.heightMetrics(oracle, offset);
+           for (let pos = from, lineTop = top; pos <= to;) {
+               let line = oracle.doc.lineAt(pos);
+               if (pos == from) {
+                   let linesAbove = line.number - firstLine;
+                   lineTop += perLine * linesAbove + perChar * (from - offset - linesAbove);
+               }
+               let lineHeight = perLine + perChar * line.length;
+               f(new BlockInfo(line.from, line.length, lineTop, lineHeight, BlockType.Text));
+               lineTop += lineHeight;
                pos = line.to + 1;
            }
        }
@@ -8619,7 +8702,6 @@
                // they would already have been added to the heightmap (gaps
                // only contain plain text).
                let nodes = [], pos = Math.max(offset, measured.from), singleHeight = -1;
-               let wasChanged = oracle.heightChanged;
                if (measured.from > offset)
                    nodes.push(new HeightMapGap(measured.from - offset - 1).updateHeight(oracle, offset));
                while (pos <= end && measured.more) {
@@ -8639,8 +8721,9 @@
                if (pos <= end)
                    nodes.push(null, new HeightMapGap(end - pos).updateHeight(oracle, pos));
                let result = HeightMap.of(nodes);
-               oracle.heightChanged = wasChanged || singleHeight < 0 || Math.abs(result.height - this.height) >= Epsilon ||
-                   Math.abs(singleHeight - this.lines(oracle.doc, offset).lineHeight) >= Epsilon;
+               if (singleHeight < 0 || Math.abs(result.height - this.height) >= Epsilon ||
+                   Math.abs(singleHeight - this.heightMetrics(oracle, offset).perLine) >= Epsilon)
+                   oracle.heightChanged = true;
                return result;
            }
            else if (force || this.outdated) {
@@ -8659,40 +8742,40 @@
            this.size = left.size + right.size;
        }
        get break() { return this.flags & 1 /* Flag.Break */; }
-       blockAt(height, doc, top, offset) {
+       blockAt(height, oracle, top, offset) {
            let mid = top + this.left.height;
-           return height < mid ? this.left.blockAt(height, doc, top, offset)
-               : this.right.blockAt(height, doc, mid, offset + this.left.length + this.break);
+           return height < mid ? this.left.blockAt(height, oracle, top, offset)
+               : this.right.blockAt(height, oracle, mid, offset + this.left.length + this.break);
        }
-       lineAt(value, type, doc, top, offset) {
+       lineAt(value, type, oracle, top, offset) {
            let rightTop = top + this.left.height, rightOffset = offset + this.left.length + this.break;
            let left = type == QueryType$1.ByHeight ? value < rightTop : value < rightOffset;
-           let base = left ? this.left.lineAt(value, type, doc, top, offset)
-               : this.right.lineAt(value, type, doc, rightTop, rightOffset);
+           let base = left ? this.left.lineAt(value, type, oracle, top, offset)
+               : this.right.lineAt(value, type, oracle, rightTop, rightOffset);
            if (this.break || (left ? base.to < rightOffset : base.from > rightOffset))
                return base;
            let subQuery = type == QueryType$1.ByPosNoHeight ? QueryType$1.ByPosNoHeight : QueryType$1.ByPos;
            if (left)
-               return base.join(this.right.lineAt(rightOffset, subQuery, doc, rightTop, rightOffset));
+               return base.join(this.right.lineAt(rightOffset, subQuery, oracle, rightTop, rightOffset));
            else
-               return this.left.lineAt(rightOffset, subQuery, doc, top, offset).join(base);
+               return this.left.lineAt(rightOffset, subQuery, oracle, top, offset).join(base);
        }
-       forEachLine(from, to, doc, top, offset, f) {
+       forEachLine(from, to, oracle, top, offset, f) {
            let rightTop = top + this.left.height, rightOffset = offset + this.left.length + this.break;
            if (this.break) {
                if (from < rightOffset)
-                   this.left.forEachLine(from, to, doc, top, offset, f);
+                   this.left.forEachLine(from, to, oracle, top, offset, f);
                if (to >= rightOffset)
-                   this.right.forEachLine(from, to, doc, rightTop, rightOffset, f);
+                   this.right.forEachLine(from, to, oracle, rightTop, rightOffset, f);
            }
            else {
-               let mid = this.lineAt(rightOffset, QueryType$1.ByPos, doc, top, offset);
+               let mid = this.lineAt(rightOffset, QueryType$1.ByPos, oracle, top, offset);
                if (from < mid.from)
-                   this.left.forEachLine(from, mid.from - 1, doc, top, offset, f);
+                   this.left.forEachLine(from, mid.from - 1, oracle, top, offset, f);
                if (mid.to >= from && mid.from <= to)
                    f(mid);
                if (to > mid.to)
-                   this.right.forEachLine(mid.to + 1, to, doc, rightTop, rightOffset, f);
+                   this.right.forEachLine(mid.to + 1, to, oracle, rightTop, rightOffset, f);
            }
        }
        replace(from, to, nodes) {
@@ -9042,11 +9125,11 @@
            }
            this.viewports = viewports.sort((a, b) => a.from - b.from);
            this.scaler = this.heightMap.height <= 7000000 /* VP.MaxDOMHeight */ ? IdScaler :
-               new BigScaler(this.heightOracle.doc, this.heightMap, this.viewports);
+               new BigScaler(this.heightOracle, this.heightMap, this.viewports);
        }
        updateViewportLines() {
            this.viewportLines = [];
-           this.heightMap.forEachLine(this.viewport.from, this.viewport.to, this.state.doc, 0, 0, block => {
+           this.heightMap.forEachLine(this.viewport.from, this.viewport.to, this.heightOracle.setDoc(this.state.doc), 0, 0, block => {
                this.viewportLines.push(this.scaler.scale == 1 ? block : scaleBlock(block, this.scaler));
            });
        }
@@ -9086,8 +9169,9 @@
            let whiteSpace = style.whiteSpace;
            this.defaultTextDirection = style.direction == "rtl" ? Direction.RTL : Direction.LTR;
            let refresh = this.heightOracle.mustRefreshForWrapping(whiteSpace);
-           let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != dom.clientHeight;
-           this.contentDOMHeight = dom.clientHeight;
+           let domRect = dom.getBoundingClientRect();
+           let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != domRect.height;
+           this.contentDOMHeight = domRect.height;
            this.mustMeasureContent = false;
            let result = 0, bias = 0;
            // Vertical padding
@@ -9115,9 +9199,9 @@
            }
            if (!this.inView && !this.scrollTarget)
                return 0;
-           let contentWidth = dom.clientWidth;
+           let contentWidth = domRect.width;
            if (this.contentDOMWidth != contentWidth || this.editorHeight != view.scrollDOM.clientHeight) {
-               this.contentDOMWidth = contentWidth;
+               this.contentDOMWidth = domRect.width;
                this.editorHeight = view.scrollDOM.clientHeight;
                result |= 8 /* UpdateFlag.Geometry */;
            }
@@ -9126,8 +9210,8 @@
                if (oracle.mustRefreshForHeights(lineHeights))
                    refresh = true;
                if (refresh || oracle.lineWrapping && Math.abs(contentWidth - this.contentDOMWidth) > oracle.charWidth) {
-                   let { lineHeight, charWidth } = view.docView.measureTextSize();
-                   refresh = lineHeight > 0 && oracle.refresh(whiteSpace, lineHeight, charWidth, contentWidth / charWidth, lineHeights);
+                   let { lineHeight, charWidth, textHeight } = view.docView.measureTextSize();
+                   refresh = lineHeight > 0 && oracle.refresh(whiteSpace, lineHeight, charWidth, textHeight, contentWidth / charWidth, lineHeights);
                    if (refresh) {
                        view.docView.minWidth = 0;
                        result |= 8 /* UpdateFlag.Geometry */;
@@ -9146,7 +9230,8 @@
                    result |= 2 /* UpdateFlag.Height */;
            }
            let viewportChange = !this.viewportIsAppropriate(this.viewport, bias) ||
-               this.scrollTarget && (this.scrollTarget.range.head < this.viewport.from || this.scrollTarget.range.head > this.viewport.to);
+               this.scrollTarget && (this.scrollTarget.range.head < this.viewport.from ||
+                   this.scrollTarget.range.head > this.viewport.to);
            if (viewportChange)
                this.viewport = this.getViewport(bias, this.scrollTarget);
            this.updateForViewport();
@@ -9172,36 +9257,37 @@
            // bottom, depending on the bias (the change in viewport position
            // since the last update). It'll hold a number between 0 and 1
            let marginTop = 0.5 - Math.max(-0.5, Math.min(0.5, bias / 1000 /* VP.Margin */ / 2));
-           let map = this.heightMap, doc = this.state.doc, { visibleTop, visibleBottom } = this;
-           let viewport = new Viewport(map.lineAt(visibleTop - marginTop * 1000 /* VP.Margin */, QueryType$1.ByHeight, doc, 0, 0).from, map.lineAt(visibleBottom + (1 - marginTop) * 1000 /* VP.Margin */, QueryType$1.ByHeight, doc, 0, 0).to);
+           let map = this.heightMap, oracle = this.heightOracle;
+           let { visibleTop, visibleBottom } = this;
+           let viewport = new Viewport(map.lineAt(visibleTop - marginTop * 1000 /* VP.Margin */, QueryType$1.ByHeight, oracle, 0, 0).from, map.lineAt(visibleBottom + (1 - marginTop) * 1000 /* VP.Margin */, QueryType$1.ByHeight, oracle, 0, 0).to);
            // If scrollTarget is given, make sure the viewport includes that position
            if (scrollTarget) {
                let { head } = scrollTarget.range;
                if (head < viewport.from || head > viewport.to) {
                    let viewHeight = Math.min(this.editorHeight, this.pixelViewport.bottom - this.pixelViewport.top);
-                   let block = map.lineAt(head, QueryType$1.ByPos, doc, 0, 0), topPos;
+                   let block = map.lineAt(head, QueryType$1.ByPos, oracle, 0, 0), topPos;
                    if (scrollTarget.y == "center")
                        topPos = (block.top + block.bottom) / 2 - viewHeight / 2;
                    else if (scrollTarget.y == "start" || scrollTarget.y == "nearest" && head < viewport.from)
                        topPos = block.top;
                    else
                        topPos = block.bottom - viewHeight;
-                   viewport = new Viewport(map.lineAt(topPos - 1000 /* VP.Margin */ / 2, QueryType$1.ByHeight, doc, 0, 0).from, map.lineAt(topPos + viewHeight + 1000 /* VP.Margin */ / 2, QueryType$1.ByHeight, doc, 0, 0).to);
+                   viewport = new Viewport(map.lineAt(topPos - 1000 /* VP.Margin */ / 2, QueryType$1.ByHeight, oracle, 0, 0).from, map.lineAt(topPos + viewHeight + 1000 /* VP.Margin */ / 2, QueryType$1.ByHeight, oracle, 0, 0).to);
                }
            }
            return viewport;
        }
        mapViewport(viewport, changes) {
            let from = changes.mapPos(viewport.from, -1), to = changes.mapPos(viewport.to, 1);
-           return new Viewport(this.heightMap.lineAt(from, QueryType$1.ByPos, this.state.doc, 0, 0).from, this.heightMap.lineAt(to, QueryType$1.ByPos, this.state.doc, 0, 0).to);
+           return new Viewport(this.heightMap.lineAt(from, QueryType$1.ByPos, this.heightOracle, 0, 0).from, this.heightMap.lineAt(to, QueryType$1.ByPos, this.heightOracle, 0, 0).to);
        }
        // Checks if a given viewport covers the visible part of the
        // document and not too much beyond that.
        viewportIsAppropriate({ from, to }, bias = 0) {
            if (!this.inView)
                return true;
-           let { top } = this.heightMap.lineAt(from, QueryType$1.ByPos, this.state.doc, 0, 0);
-           let { bottom } = this.heightMap.lineAt(to, QueryType$1.ByPos, this.state.doc, 0, 0);
+           let { top } = this.heightMap.lineAt(from, QueryType$1.ByPos, this.heightOracle, 0, 0);
+           let { bottom } = this.heightMap.lineAt(to, QueryType$1.ByPos, this.heightOracle, 0, 0);
            let { visibleTop, visibleBottom } = this;
            return (from == 0 || top <= visibleTop - Math.max(10 /* VP.MinCoverMargin */, Math.min(-bias, 250 /* VP.MaxCoverMargin */))) &&
                (to == this.state.doc.length ||
@@ -9338,13 +9424,13 @@
        }
        lineBlockAt(pos) {
            return (pos >= this.viewport.from && pos <= this.viewport.to && this.viewportLines.find(b => b.from <= pos && b.to >= pos)) ||
-               scaleBlock(this.heightMap.lineAt(pos, QueryType$1.ByPos, this.state.doc, 0, 0), this.scaler);
+               scaleBlock(this.heightMap.lineAt(pos, QueryType$1.ByPos, this.heightOracle, 0, 0), this.scaler);
        }
        lineBlockAtHeight(height) {
-           return scaleBlock(this.heightMap.lineAt(this.scaler.fromDOM(height), QueryType$1.ByHeight, this.state.doc, 0, 0), this.scaler);
+           return scaleBlock(this.heightMap.lineAt(this.scaler.fromDOM(height), QueryType$1.ByHeight, this.heightOracle, 0, 0), this.scaler);
        }
        elementAtHeight(height) {
-           return scaleBlock(this.heightMap.blockAt(this.scaler.fromDOM(height), this.state.doc, 0, 0), this.scaler);
+           return scaleBlock(this.heightMap.blockAt(this.scaler.fromDOM(height), this.heightOracle, 0, 0), this.scaler);
        }
        get docHeight() {
            return this.scaler.toDOM(this.heightMap.height);
@@ -9418,11 +9504,11 @@
    // regions outside the viewports so that the total height is
    // VP.MaxDOMHeight.
    class BigScaler {
-       constructor(doc, heightMap, viewports) {
+       constructor(oracle, heightMap, viewports) {
            let vpHeight = 0, base = 0, domBase = 0;
            this.viewports = viewports.map(({ from, to }) => {
-               let top = heightMap.lineAt(from, QueryType$1.ByPos, doc, 0, 0).top;
-               let bottom = heightMap.lineAt(to, QueryType$1.ByPos, doc, 0, 0).bottom;
+               let top = heightMap.lineAt(from, QueryType$1.ByPos, oracle, 0, 0).top;
+               let bottom = heightMap.lineAt(to, QueryType$1.ByPos, oracle, 0, 0).bottom;
                vpHeight += bottom - top;
                return { from, to, top, bottom, domTop: 0, domBottom: 0 };
            });
@@ -9480,7 +9566,7 @@
            }
        });
    }
-   const baseTheme$1$3 = /*@__PURE__*/buildTheme("." + baseThemeID, {
+   const baseTheme$1$2 = /*@__PURE__*/buildTheme("." + baseThemeID, {
        "&": {
            position: "relative !important",
            boxSizing: "border-box",
@@ -9536,6 +9622,9 @@
            padding: "0 2px 0 6px"
        },
        ".cm-layer": {
+           position: "absolute",
+           left: 0,
+           top: 0,
            contain: "size style",
            "& > *": {
                position: "absolute"
@@ -9575,6 +9664,9 @@
        "&dark .cm-cursor": {
            borderLeftColor: "#444"
        },
+       ".cm-dropCursor": {
+           position: "absolute"
+       },
        "&.cm-focused .cm-cursor": {
            display: "block"
        },
@@ -9786,7 +9878,7 @@
            };
        }
        else if ((browser.mac || browser.android) && change && change.from == change.to && change.from == sel.head - 1 &&
-           /^\. ?$/.test(change.insert.toString())) {
+           /^\. ?$/.test(change.insert.toString()) && view.contentDOM.getAttribute("autocorrect") == "off") {
            // Detect insert-period-on-double-space Mac and Android behavior,
            // and transform it into a regular space insert.
            if (newSel && change.insert.length == 2)
@@ -10540,6 +10632,20 @@
                this.viewState.state = state;
                return;
            }
+           let focus = this.hasFocus, focusFlag = 0, dispatchFocus = null;
+           if (transactions.some(tr => tr.annotation(isFocusChange))) {
+               this.inputState.notifiedFocused = focus;
+               // If a focus-change transaction is being dispatched, set this update flag.
+               focusFlag = 1 /* UpdateFlag.Focus */;
+           }
+           else if (focus != this.inputState.notifiedFocused) {
+               this.inputState.notifiedFocused = focus;
+               // Schedule a separate focus transaction if necessary, otherwise
+               // add a flag to this update
+               dispatchFocus = focusChangeTransaction(state, focus);
+               if (!dispatchFocus)
+                   focusFlag = 1 /* UpdateFlag.Focus */;
+           }
            // If there was a pending DOM change, eagerly read it and try to
            // apply it after the given transactions.
            let pendingKey = this.observer.delayedAndroidKey, domChange = null;
@@ -10558,6 +10664,7 @@
            if (state.facet(EditorState.phrases) != this.state.facet(EditorState.phrases))
                return this.setState(state);
            update = ViewUpdate.create(this, state, transactions);
+           update.flags |= focusFlag;
            let scrollTarget = this.viewState.scrollTarget;
            try {
                this.updateState = 2 /* UpdateState.Updating */;
@@ -10595,10 +10702,15 @@
            if (!update.empty)
                for (let listener of this.state.facet(updateListener))
                    listener(update);
-           if (domChange) {
-               if (!applyDOMChange(this, domChange) && pendingKey.force)
-                   dispatchKey(this.contentDOM, pendingKey.key, pendingKey.keyCode);
-           }
+           if (dispatchFocus || domChange)
+               Promise.resolve().then(() => {
+                   if (dispatchFocus && this.state == dispatchFocus.startState)
+                       this.dispatch(dispatchFocus);
+                   if (domChange) {
+                       if (!applyDOMChange(this, domChange) && pendingKey.force)
+                           dispatchKey(this.contentDOM, pendingKey.key, pendingKey.keyCode);
+                   }
+               });
        }
        /**
        Reset the view to the given state. (This will cause the entire
@@ -10673,7 +10785,7 @@
            if (this.destroyed)
                return;
            if (this.measureScheduled > -1)
-               cancelAnimationFrame(this.measureScheduled);
+               this.win.cancelAnimationFrame(this.measureScheduled);
            this.measureScheduled = 0; // Prevent requestMeasure calls from scheduling another animation frame
            if (flush)
                this.observer.forceFlush();
@@ -10809,7 +10921,7 @@
        }
        mountStyles() {
            this.styleModules = this.state.facet(styleModule);
-           StyleModule.mount(this.root, this.styleModules.concat(baseTheme$1$3).reverse());
+           StyleModule.mount(this.root, this.styleModules.concat(baseTheme$1$2).reverse());
        }
        readMeasured() {
            if (this.updateState == 2 /* UpdateState.Updating */)
@@ -11111,7 +11223,7 @@
            this.dom.remove();
            this.observer.destroy();
            if (this.measureScheduled > -1)
-               cancelAnimationFrame(this.measureScheduled);
+               this.win.cancelAnimationFrame(this.measureScheduled);
            this.destroyed = true;
        }
        /**
@@ -11200,6 +11312,11 @@
    */
    EditorView.inputHandler = inputHandler$1;
    /**
+   This facet can be used to provide functions that create effects
+   to be dispatched when the editor's focus state changes.
+   */
+   EditorView.focusChangeEffect = focusChangeEffect;
+   /**
    By default, the editor assumes all its content has the same
    [text direction](https://codemirror.net/6/docs/ref/#view.Direction). Configure this with a `true`
    value to make it read the text direction of every (rendered)
@@ -11618,9 +11735,10 @@
        let from = Math.max(range.from, view.viewport.from), to = Math.min(range.to, view.viewport.to);
        let ltr = view.textDirection == Direction.LTR;
        let content = view.contentDOM, contentRect = content.getBoundingClientRect(), base = getBase(view);
-       let lineStyle = window.getComputedStyle(content.firstChild);
-       let leftSide = contentRect.left + parseInt(lineStyle.paddingLeft) + Math.min(0, parseInt(lineStyle.textIndent));
-       let rightSide = contentRect.right - parseInt(lineStyle.paddingRight);
+       let lineElt = content.querySelector(".cm-line"), lineStyle = lineElt && window.getComputedStyle(lineElt);
+       let leftSide = contentRect.left +
+           (lineStyle ? parseInt(lineStyle.paddingLeft) + Math.min(0, parseInt(lineStyle.textIndent)) : 0);
+       let rightSide = contentRect.right - (lineStyle ? parseInt(lineStyle.paddingRight) : 0);
        let startBlock = blockAt(view, from), endBlock = blockAt(view, to);
        let visualStart = startBlock.type == BlockType.Text ? startBlock : null;
        let visualEnd = endBlock.type == BlockType.Text ? endBlock : null;
@@ -12482,6 +12600,7 @@
            });
        }
    });
+   const knownHeight = /*@__PURE__*/new WeakMap();
    const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
        constructor(view) {
            this.view = view;
@@ -12597,6 +12716,7 @@
            };
        }
        writeMeasure(measured) {
+           var _a;
            let { editor, space } = measured;
            let others = [];
            for (let i = 0; i < this.manager.tooltips.length; i++) {
@@ -12612,7 +12732,7 @@
                }
                let arrow = tooltip.arrow ? tView.dom.querySelector(".cm-tooltip-arrow") : null;
                let arrowHeight = arrow ? 7 /* Arrow.Size */ : 0;
-               let width = size.right - size.left, height = size.bottom - size.top;
+               let width = size.right - size.left, height = (_a = knownHeight.get(tView)) !== null && _a !== void 0 ? _a : size.bottom - size.top;
                let offset = tView.offset || noOffset, ltr = this.view.textDirection == Direction.LTR;
                let left = size.width > space.right - space.left ? (ltr ? space.left : space.right - size.width)
                    : ltr ? Math.min(pos.left - (arrow ? 14 /* Arrow.Offset */ : 0) + offset.x, space.right - width)
@@ -12629,6 +12749,7 @@
                        dom.style.top = Outside;
                        continue;
                    }
+                   knownHeight.set(tView, height);
                    dom.style.height = (height = spaceVert) + "px";
                }
                else if (dom.style.height) {
@@ -12744,214 +12865,6 @@
    const showTooltip = /*@__PURE__*/Facet.define({
        enables: [tooltipPlugin, baseTheme$4]
    });
-   const showHoverTooltip = /*@__PURE__*/Facet.define();
-   class HoverTooltipHost {
-       constructor(view) {
-           this.view = view;
-           this.mounted = false;
-           this.dom = document.createElement("div");
-           this.dom.classList.add("cm-tooltip-hover");
-           this.manager = new TooltipViewManager(view, showHoverTooltip, t => this.createHostedView(t));
-       }
-       // Needs to be static so that host tooltip instances always match
-       static create(view) {
-           return new HoverTooltipHost(view);
-       }
-       createHostedView(tooltip) {
-           let hostedView = tooltip.create(this.view);
-           hostedView.dom.classList.add("cm-tooltip-section");
-           this.dom.appendChild(hostedView.dom);
-           if (this.mounted && hostedView.mount)
-               hostedView.mount(this.view);
-           return hostedView;
-       }
-       mount(view) {
-           for (let hostedView of this.manager.tooltipViews) {
-               if (hostedView.mount)
-                   hostedView.mount(view);
-           }
-           this.mounted = true;
-       }
-       positioned(space) {
-           for (let hostedView of this.manager.tooltipViews) {
-               if (hostedView.positioned)
-                   hostedView.positioned(space);
-           }
-       }
-       update(update) {
-           this.manager.update(update);
-       }
-   }
-   const showHoverTooltipHost = /*@__PURE__*/showTooltip.compute([showHoverTooltip], state => {
-       let tooltips = state.facet(showHoverTooltip).filter(t => t);
-       if (tooltips.length === 0)
-           return null;
-       return {
-           pos: Math.min(...tooltips.map(t => t.pos)),
-           end: Math.max(...tooltips.filter(t => t.end != null).map(t => t.end)),
-           create: HoverTooltipHost.create,
-           above: tooltips[0].above,
-           arrow: tooltips.some(t => t.arrow),
-       };
-   });
-   class HoverPlugin {
-       constructor(view, source, field, setHover, hoverTime) {
-           this.view = view;
-           this.source = source;
-           this.field = field;
-           this.setHover = setHover;
-           this.hoverTime = hoverTime;
-           this.hoverTimeout = -1;
-           this.restartTimeout = -1;
-           this.pending = null;
-           this.lastMove = { x: 0, y: 0, target: view.dom, time: 0 };
-           this.checkHover = this.checkHover.bind(this);
-           view.dom.addEventListener("mouseleave", this.mouseleave = this.mouseleave.bind(this));
-           view.dom.addEventListener("mousemove", this.mousemove = this.mousemove.bind(this));
-       }
-       update() {
-           if (this.pending) {
-               this.pending = null;
-               clearTimeout(this.restartTimeout);
-               this.restartTimeout = setTimeout(() => this.startHover(), 20);
-           }
-       }
-       get active() {
-           return this.view.state.field(this.field);
-       }
-       checkHover() {
-           this.hoverTimeout = -1;
-           if (this.active)
-               return;
-           let hovered = Date.now() - this.lastMove.time;
-           if (hovered < this.hoverTime)
-               this.hoverTimeout = setTimeout(this.checkHover, this.hoverTime - hovered);
-           else
-               this.startHover();
-       }
-       startHover() {
-           clearTimeout(this.restartTimeout);
-           let { lastMove } = this;
-           let pos = this.view.contentDOM.contains(lastMove.target) ? this.view.posAtCoords(lastMove) : null;
-           if (pos == null)
-               return;
-           let posCoords = this.view.coordsAtPos(pos);
-           if (posCoords == null || lastMove.y < posCoords.top || lastMove.y > posCoords.bottom ||
-               lastMove.x < posCoords.left - this.view.defaultCharacterWidth ||
-               lastMove.x > posCoords.right + this.view.defaultCharacterWidth)
-               return;
-           let bidi = this.view.bidiSpans(this.view.state.doc.lineAt(pos)).find(s => s.from <= pos && s.to >= pos);
-           let rtl = bidi && bidi.dir == Direction.RTL ? -1 : 1;
-           let open = this.source(this.view, pos, (lastMove.x < posCoords.left ? -rtl : rtl));
-           if (open === null || open === void 0 ? void 0 : open.then) {
-               let pending = this.pending = { pos };
-               open.then(result => {
-                   if (this.pending == pending) {
-                       this.pending = null;
-                       if (result)
-                           this.view.dispatch({ effects: this.setHover.of(result) });
-                   }
-               }, e => logException(this.view.state, e, "hover tooltip"));
-           }
-           else if (open) {
-               this.view.dispatch({ effects: this.setHover.of(open) });
-           }
-       }
-       mousemove(event) {
-           var _a;
-           this.lastMove = { x: event.clientX, y: event.clientY, target: event.target, time: Date.now() };
-           if (this.hoverTimeout < 0)
-               this.hoverTimeout = setTimeout(this.checkHover, this.hoverTime);
-           let tooltip = this.active;
-           if (tooltip && !isInTooltip(this.lastMove.target) || this.pending) {
-               let { pos } = tooltip || this.pending, end = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.end) !== null && _a !== void 0 ? _a : pos;
-               if ((pos == end ? this.view.posAtCoords(this.lastMove) != pos
-                   : !isOverRange(this.view, pos, end, event.clientX, event.clientY, 6 /* Hover.MaxDist */))) {
-                   this.view.dispatch({ effects: this.setHover.of(null) });
-                   this.pending = null;
-               }
-           }
-       }
-       mouseleave(e) {
-           clearTimeout(this.hoverTimeout);
-           this.hoverTimeout = -1;
-           if (this.active && !isInTooltip(e.relatedTarget))
-               this.view.dispatch({ effects: this.setHover.of(null) });
-       }
-       destroy() {
-           clearTimeout(this.hoverTimeout);
-           this.view.dom.removeEventListener("mouseleave", this.mouseleave);
-           this.view.dom.removeEventListener("mousemove", this.mousemove);
-       }
-   }
-   function isInTooltip(elt) {
-       for (let cur = elt; cur; cur = cur.parentNode)
-           if (cur.nodeType == 1 && cur.classList.contains("cm-tooltip"))
-               return true;
-       return false;
-   }
-   function isOverRange(view, from, to, x, y, margin) {
-       let range = document.createRange();
-       let fromDOM = view.domAtPos(from), toDOM = view.domAtPos(to);
-       range.setEnd(toDOM.node, toDOM.offset);
-       range.setStart(fromDOM.node, fromDOM.offset);
-       let rects = range.getClientRects();
-       range.detach();
-       for (let i = 0; i < rects.length; i++) {
-           let rect = rects[i];
-           let dist = Math.max(rect.top - y, y - rect.bottom, rect.left - x, x - rect.right);
-           if (dist <= margin)
-               return true;
-       }
-       return false;
-   }
-   /**
-   Set up a hover tooltip, which shows up when the pointer hovers
-   over ranges of text. The callback is called when the mouse hovers
-   over the document text. It should, if there is a tooltip
-   associated with position `pos`, return the tooltip description
-   (either directly or in a promise). The `side` argument indicates
-   on which side of the position the pointer is—it will be -1 if the
-   pointer is before the position, 1 if after the position.
-
-   Note that all hover tooltips are hosted within a single tooltip
-   container element. This allows multiple tooltips over the same
-   range to be "merged" together without overlapping.
-   */
-   function hoverTooltip(source, options = {}) {
-       let setHover = StateEffect.define();
-       let hoverState = StateField.define({
-           create() { return null; },
-           update(value, tr) {
-               if (value && (options.hideOnChange && (tr.docChanged || tr.selection) ||
-                   options.hideOn && options.hideOn(tr, value)))
-                   return null;
-               if (value && tr.docChanged) {
-                   let newPos = tr.changes.mapPos(value.pos, -1, MapMode.TrackDel);
-                   if (newPos == null)
-                       return null;
-                   let copy = Object.assign(Object.create(null), value);
-                   copy.pos = newPos;
-                   if (value.end != null)
-                       copy.end = tr.changes.mapPos(value.end);
-                   value = copy;
-               }
-               for (let effect of tr.effects) {
-                   if (effect.is(setHover))
-                       value = effect.value;
-                   if (effect.is(closeHoverTooltipEffect))
-                       value = null;
-               }
-               return value;
-           },
-           provide: f => showHoverTooltip.from(f)
-       });
-       return [
-           hoverState,
-           ViewPlugin.define(view => new HoverPlugin(view, source, hoverState, setHover, options.hoverTime || 300 /* Hover.Time */)),
-           showHoverTooltipHost
-       ];
-   }
    /**
    Get the active tooltip view for a given tooltip, if available.
    */
@@ -12962,7 +12875,6 @@
        let found = plugin.manager.tooltips.indexOf(tooltip);
        return found < 0 ? null : plugin.manager.tooltipViews[found];
    }
-   const closeHoverTooltipEffect = /*@__PURE__*/StateEffect.define();
 
    const panelConfig = /*@__PURE__*/Facet.define({
        combine(configs) {
@@ -14943,45 +14855,59 @@
    new NodeProp({ perNode: true });
 
    let nextTagID = 0;
-   /// Highlighting tags are markers that denote a highlighting category.
-   /// They are [associated](#highlight.styleTags) with parts of a syntax
-   /// tree by a language mode, and then mapped to an actual CSS style by
-   /// a [highlighter](#highlight.Highlighter).
-   ///
-   /// Because syntax tree node types and highlight styles have to be
-   /// able to talk the same language, CodeMirror uses a mostly _closed_
-   /// [vocabulary](#highlight.tags) of syntax tags (as opposed to
-   /// traditional open string-based systems, which make it hard for
-   /// highlighting themes to cover all the tokens produced by the
-   /// various languages).
-   ///
-   /// It _is_ possible to [define](#highlight.Tag^define) your own
-   /// highlighting tags for system-internal use (where you control both
-   /// the language package and the highlighter), but such tags will not
-   /// be picked up by regular highlighters (though you can derive them
-   /// from standard tags to allow highlighters to fall back to those).
+   /**
+   Highlighting tags are markers that denote a highlighting category.
+   They are [associated](#highlight.styleTags) with parts of a syntax
+   tree by a language mode, and then mapped to an actual CSS style by
+   a [highlighter](#highlight.Highlighter).
+
+   Because syntax tree node types and highlight styles have to be
+   able to talk the same language, CodeMirror uses a mostly _closed_
+   [vocabulary](#highlight.tags) of syntax tags (as opposed to
+   traditional open string-based systems, which make it hard for
+   highlighting themes to cover all the tokens produced by the
+   various languages).
+
+   It _is_ possible to [define](#highlight.Tag^define) your own
+   highlighting tags for system-internal use (where you control both
+   the language package and the highlighter), but such tags will not
+   be picked up by regular highlighters (though you can derive them
+   from standard tags to allow highlighters to fall back to those).
+   */
    class Tag {
-       /// @internal
+       /**
+       @internal
+       */
        constructor(
-       /// The set of this tag and all its parent tags, starting with
-       /// this one itself and sorted in order of decreasing specificity.
+       /**
+       The set of this tag and all its parent tags, starting with
+       this one itself and sorted in order of decreasing specificity.
+       */
        set, 
-       /// The base unmodified tag that this one is based on, if it's
-       /// modified @internal
+       /**
+       The base unmodified tag that this one is based on, if it's
+       modified @internal
+       */
        base, 
-       /// The modifiers applied to this.base @internal
+       /**
+       The modifiers applied to this.base @internal
+       */
        modified) {
            this.set = set;
            this.base = base;
            this.modified = modified;
-           /// @internal
+           /**
+           @internal
+           */
            this.id = nextTagID++;
        }
-       /// Define a new tag. If `parent` is given, the tag is treated as a
-       /// sub-tag of that parent, and
-       /// [highlighters](#highlight.tagHighlighter) that don't mention
-       /// this tag will try to fall back to the parent tag (or grandparent
-       /// tag, etc).
+       /**
+       Define a new tag. If `parent` is given, the tag is treated as a
+       sub-tag of that parent, and
+       [highlighters](#highlight.tagHighlighter) that don't mention
+       this tag will try to fall back to the parent tag (or grandparent
+       tag, etc).
+       */
        static define(parent) {
            if (parent === null || parent === void 0 ? void 0 : parent.base)
                throw new Error("Can not derive from a modified tag");
@@ -14992,16 +14918,18 @@
                    tag.set.push(t);
            return tag;
        }
-       /// Define a tag _modifier_, which is a function that, given a tag,
-       /// will return a tag that is a subtag of the original. Applying the
-       /// same modifier to a twice tag will return the same value (`m1(t1)
-       /// == m1(t1)`) and applying multiple modifiers will, regardless or
-       /// order, produce the same tag (`m1(m2(t1)) == m2(m1(t1))`).
-       ///
-       /// When multiple modifiers are applied to a given base tag, each
-       /// smaller set of modifiers is registered as a parent, so that for
-       /// example `m1(m2(m3(t1)))` is a subtype of `m1(m2(t1))`,
-       /// `m1(m3(t1)`, and so on.
+       /**
+       Define a tag _modifier_, which is a function that, given a tag,
+       will return a tag that is a subtag of the original. Applying the
+       same modifier to a twice tag will return the same value (`m1(t1)
+       == m1(t1)`) and applying multiple modifiers will, regardless or
+       order, produce the same tag (`m1(m2(t1)) == m2(m1(t1))`).
+       
+       When multiple modifiers are applied to a given base tag, each
+       smaller set of modifiers is registered as a parent, so that for
+       example `m1(m2(m3(t1)))` is a subtype of `m1(m2(t1))`,
+       `m1(m3(t1)`, and so on.
+       */
        static defineModifier() {
            let mod = new Modifier;
            return (tag) => {
@@ -15046,55 +14974,57 @@
        }
        return sets.sort((a, b) => b.length - a.length);
    }
-   /// This function is used to add a set of tags to a language syntax
-   /// via [`NodeSet.extend`](#common.NodeSet.extend) or
-   /// [`LRParser.configure`](#lr.LRParser.configure).
-   ///
-   /// The argument object maps node selectors to [highlighting
-   /// tags](#highlight.Tag) or arrays of tags.
-   ///
-   /// Node selectors may hold one or more (space-separated) node paths.
-   /// Such a path can be a [node name](#common.NodeType.name), or
-   /// multiple node names (or `*` wildcards) separated by slash
-   /// characters, as in `"Block/Declaration/VariableName"`. Such a path
-   /// matches the final node but only if its direct parent nodes are the
-   /// other nodes mentioned. A `*` in such a path matches any parent,
-   /// but only a single level—wildcards that match multiple parents
-   /// aren't supported, both for efficiency reasons and because Lezer
-   /// trees make it rather hard to reason about what they would match.)
-   ///
-   /// A path can be ended with `/...` to indicate that the tag assigned
-   /// to the node should also apply to all child nodes, even if they
-   /// match their own style (by default, only the innermost style is
-   /// used).
-   ///
-   /// When a path ends in `!`, as in `Attribute!`, no further matching
-   /// happens for the node's child nodes, and the entire node gets the
-   /// given style.
-   ///
-   /// In this notation, node names that contain `/`, `!`, `*`, or `...`
-   /// must be quoted as JSON strings.
-   ///
-   /// For example:
-   ///
-   /// ```javascript
-   /// parser.withProps(
-   ///   styleTags({
-   ///     // Style Number and BigNumber nodes
-   ///     "Number BigNumber": tags.number,
-   ///     // Style Escape nodes whose parent is String
-   ///     "String/Escape": tags.escape,
-   ///     // Style anything inside Attributes nodes
-   ///     "Attributes!": tags.meta,
-   ///     // Add a style to all content inside Italic nodes
-   ///     "Italic/...": tags.emphasis,
-   ///     // Style InvalidString nodes as both `string` and `invalid`
-   ///     "InvalidString": [tags.string, tags.invalid],
-   ///     // Style the node named "/" as punctuation
-   ///     '"/"': tags.punctuation
-   ///   })
-   /// )
-   /// ```
+   /**
+   This function is used to add a set of tags to a language syntax
+   via [`NodeSet.extend`](#common.NodeSet.extend) or
+   [`LRParser.configure`](#lr.LRParser.configure).
+
+   The argument object maps node selectors to [highlighting
+   tags](#highlight.Tag) or arrays of tags.
+
+   Node selectors may hold one or more (space-separated) node paths.
+   Such a path can be a [node name](#common.NodeType.name), or
+   multiple node names (or `*` wildcards) separated by slash
+   characters, as in `"Block/Declaration/VariableName"`. Such a path
+   matches the final node but only if its direct parent nodes are the
+   other nodes mentioned. A `*` in such a path matches any parent,
+   but only a single level—wildcards that match multiple parents
+   aren't supported, both for efficiency reasons and because Lezer
+   trees make it rather hard to reason about what they would match.)
+
+   A path can be ended with `/...` to indicate that the tag assigned
+   to the node should also apply to all child nodes, even if they
+   match their own style (by default, only the innermost style is
+   used).
+
+   When a path ends in `!`, as in `Attribute!`, no further matching
+   happens for the node's child nodes, and the entire node gets the
+   given style.
+
+   In this notation, node names that contain `/`, `!`, `*`, or `...`
+   must be quoted as JSON strings.
+
+   For example:
+
+   ```javascript
+   parser.withProps(
+     styleTags({
+       // Style Number and BigNumber nodes
+       "Number BigNumber": tags.number,
+       // Style Escape nodes whose parent is String
+       "String/Escape": tags.escape,
+       // Style anything inside Attributes nodes
+       "Attributes!": tags.meta,
+       // Add a style to all content inside Italic nodes
+       "Italic/...": tags.emphasis,
+       // Style InvalidString nodes as both `string` and `invalid`
+       "InvalidString": [tags.string, tags.invalid],
+       // Style the node named "/" as punctuation
+       '"/"': tags.punctuation
+     })
+   )
+   ```
+   */
    function styleTags(spec) {
        let byName = Object.create(null);
        for (let prop in spec) {
@@ -15103,10 +15033,10 @@
                tags = [tags];
            for (let part of prop.split(" "))
                if (part) {
-                   let pieces = [], mode = 2 /* Mode.Normal */, rest = part;
+                   let pieces = [], mode = 2 /* Normal */, rest = part;
                    for (let pos = 0;;) {
                        if (rest == "..." && pos > 0 && pos + 3 == part.length) {
-                           mode = 1 /* Mode.Inherit */;
+                           mode = 1 /* Inherit */;
                            break;
                        }
                        let m = /^"(?:[^"\\]|\\.)*?"|[^\/!]+/.exec(rest);
@@ -15118,7 +15048,7 @@
                            break;
                        let next = part[pos++];
                        if (pos == part.length && next == "!") {
-                           mode = 0 /* Mode.Opaque */;
+                           mode = 0 /* Opaque */;
                            break;
                        }
                        if (next != "/")
@@ -15142,8 +15072,8 @@
            this.context = context;
            this.next = next;
        }
-       get opaque() { return this.mode == 0 /* Mode.Opaque */; }
-       get inherit() { return this.mode == 1 /* Mode.Inherit */; }
+       get opaque() { return this.mode == 0 /* Opaque */; }
+       get inherit() { return this.mode == 1 /* Inherit */; }
        sort(other) {
            if (!other || other.depth < this.depth) {
                this.next = other;
@@ -15154,10 +15084,12 @@
        }
        get depth() { return this.context ? this.context.length : 0; }
    }
-   Rule.empty = new Rule([], 2 /* Mode.Normal */, null);
-   /// Define a [highlighter](#highlight.Highlighter) from an array of
-   /// tag/class pairs. Classes associated with more specific tags will
-   /// take precedence.
+   Rule.empty = new Rule([], 2 /* Normal */, null);
+   /**
+   Define a [highlighter](#highlight.Highlighter) from an array of
+   tag/class pairs. Classes associated with more specific tags will
+   take precedence.
+   */
    function tagHighlighter(tags, options) {
        let map = Object.create(null);
        for (let style of tags) {
@@ -15194,16 +15126,24 @@
        }
        return result;
    }
-   /// Highlight the given [tree](#common.Tree) with the given
-   /// [highlighter](#highlight.Highlighter).
+   /**
+   Highlight the given [tree](#common.Tree) with the given
+   [highlighter](#highlight.Highlighter).
+   */
    function highlightTree(tree, highlighter, 
-   /// Assign styling to a region of the text. Will be called, in order
-   /// of position, for any ranges where more than zero classes apply.
-   /// `classes` is a space separated string of CSS classes.
+   /**
+   Assign styling to a region of the text. Will be called, in order
+   of position, for any ranges where more than zero classes apply.
+   `classes` is a space separated string of CSS classes.
+   */
    putStyle, 
-   /// The start of the range to highlight.
+   /**
+   The start of the range to highlight.
+   */
    from = 0, 
-   /// The end of the range.
+   /**
+   The end of the range.
+   */
    to = tree.length) {
        let builder = new HighlightBuilder(from, Array.isArray(highlighter) ? highlighter : [highlighter], putStyle);
        builder.highlightRange(tree.cursor(), from, to, "", builder.highlighters);
@@ -15241,7 +15181,7 @@
                if (cls)
                    cls += " ";
                cls += tagCls;
-               if (rule.mode == 1 /* Mode.Inherit */)
+               if (rule.mode == 1 /* Inherit */)
                    inheritedClass += (inheritedClass ? " " : "") + tagCls;
            }
            this.startSpan(cursor.from, cls);
@@ -15288,9 +15228,11 @@
            }
        }
    }
-   /// Match a syntax node's [highlight rules](#highlight.styleTags). If
-   /// there's a match, return its set of tags, and whether it is
-   /// opaque (uses a `!`) or applies to all child nodes (`/...`).
+   /**
+   Match a syntax node's [highlight rules](#highlight.styleTags). If
+   there's a match, return its set of tags, and whether it is
+   opaque (uses a `!`) or applies to all child nodes (`/...`).
+   */
    function getStyleTags(node) {
        let rule = node.type.prop(ruleNodeProp);
        while (rule && rule.context && !node.matchContext(rule.context))
@@ -15299,268 +15241,440 @@
    }
    const t = Tag.define;
    const comment = t(), name = t(), typeName = t(name), propertyName = t(name), literal = t(), string = t(literal), number = t(literal), content = t(), heading = t(content), keyword = t(), operator = t(), punctuation = t(), bracket = t(punctuation), meta = t();
-   /// The default set of highlighting [tags](#highlight.Tag).
-   ///
-   /// This collection is heavily biased towards programming languages,
-   /// and necessarily incomplete. A full ontology of syntactic
-   /// constructs would fill a stack of books, and be impractical to
-   /// write themes for. So try to make do with this set. If all else
-   /// fails, [open an
-   /// issue](https://github.com/codemirror/codemirror.next) to propose a
-   /// new tag, or [define](#highlight.Tag^define) a local custom tag for
-   /// your use case.
-   ///
-   /// Note that it is not obligatory to always attach the most specific
-   /// tag possible to an element—if your grammar can't easily
-   /// distinguish a certain type of element (such as a local variable),
-   /// it is okay to style it as its more general variant (a variable).
-   /// 
-   /// For tags that extend some parent tag, the documentation links to
-   /// the parent.
+   /**
+   The default set of highlighting [tags](#highlight.Tag).
+
+   This collection is heavily biased towards programming languages,
+   and necessarily incomplete. A full ontology of syntactic
+   constructs would fill a stack of books, and be impractical to
+   write themes for. So try to make do with this set. If all else
+   fails, [open an
+   issue](https://github.com/codemirror/codemirror.next) to propose a
+   new tag, or [define](#highlight.Tag^define) a local custom tag for
+   your use case.
+
+   Note that it is not obligatory to always attach the most specific
+   tag possible to an element—if your grammar can't easily
+   distinguish a certain type of element (such as a local variable),
+   it is okay to style it as its more general variant (a variable).
+
+   For tags that extend some parent tag, the documentation links to
+   the parent.
+   */
    const tags = {
-       /// A comment.
+       /**
+       A comment.
+       */
        comment,
-       /// A line [comment](#highlight.tags.comment).
+       /**
+       A line [comment](#highlight.tags.comment).
+       */
        lineComment: t(comment),
-       /// A block [comment](#highlight.tags.comment).
+       /**
+       A block [comment](#highlight.tags.comment).
+       */
        blockComment: t(comment),
-       /// A documentation [comment](#highlight.tags.comment).
+       /**
+       A documentation [comment](#highlight.tags.comment).
+       */
        docComment: t(comment),
-       /// Any kind of identifier.
+       /**
+       Any kind of identifier.
+       */
        name,
-       /// The [name](#highlight.tags.name) of a variable.
+       /**
+       The [name](#highlight.tags.name) of a variable.
+       */
        variableName: t(name),
-       /// A type [name](#highlight.tags.name).
+       /**
+       A type [name](#highlight.tags.name).
+       */
        typeName: typeName,
-       /// A tag name (subtag of [`typeName`](#highlight.tags.typeName)).
+       /**
+       A tag name (subtag of [`typeName`](#highlight.tags.typeName)).
+       */
        tagName: t(typeName),
-       /// A property or field [name](#highlight.tags.name).
+       /**
+       A property or field [name](#highlight.tags.name).
+       */
        propertyName: propertyName,
-       /// An attribute name (subtag of [`propertyName`](#highlight.tags.propertyName)).
+       /**
+       An attribute name (subtag of [`propertyName`](#highlight.tags.propertyName)).
+       */
        attributeName: t(propertyName),
-       /// The [name](#highlight.tags.name) of a class.
+       /**
+       The [name](#highlight.tags.name) of a class.
+       */
        className: t(name),
-       /// A label [name](#highlight.tags.name).
+       /**
+       A label [name](#highlight.tags.name).
+       */
        labelName: t(name),
-       /// A namespace [name](#highlight.tags.name).
+       /**
+       A namespace [name](#highlight.tags.name).
+       */
        namespace: t(name),
-       /// The [name](#highlight.tags.name) of a macro.
+       /**
+       The [name](#highlight.tags.name) of a macro.
+       */
        macroName: t(name),
-       /// A literal value.
+       /**
+       A literal value.
+       */
        literal,
-       /// A string [literal](#highlight.tags.literal).
+       /**
+       A string [literal](#highlight.tags.literal).
+       */
        string,
-       /// A documentation [string](#highlight.tags.string).
+       /**
+       A documentation [string](#highlight.tags.string).
+       */
        docString: t(string),
-       /// A character literal (subtag of [string](#highlight.tags.string)).
+       /**
+       A character literal (subtag of [string](#highlight.tags.string)).
+       */
        character: t(string),
-       /// An attribute value (subtag of [string](#highlight.tags.string)).
+       /**
+       An attribute value (subtag of [string](#highlight.tags.string)).
+       */
        attributeValue: t(string),
-       /// A number [literal](#highlight.tags.literal).
+       /**
+       A number [literal](#highlight.tags.literal).
+       */
        number,
-       /// An integer [number](#highlight.tags.number) literal.
+       /**
+       An integer [number](#highlight.tags.number) literal.
+       */
        integer: t(number),
-       /// A floating-point [number](#highlight.tags.number) literal.
+       /**
+       A floating-point [number](#highlight.tags.number) literal.
+       */
        float: t(number),
-       /// A boolean [literal](#highlight.tags.literal).
+       /**
+       A boolean [literal](#highlight.tags.literal).
+       */
        bool: t(literal),
-       /// Regular expression [literal](#highlight.tags.literal).
+       /**
+       Regular expression [literal](#highlight.tags.literal).
+       */
        regexp: t(literal),
-       /// An escape [literal](#highlight.tags.literal), for example a
-       /// backslash escape in a string.
+       /**
+       An escape [literal](#highlight.tags.literal), for example a
+       backslash escape in a string.
+       */
        escape: t(literal),
-       /// A color [literal](#highlight.tags.literal).
+       /**
+       A color [literal](#highlight.tags.literal).
+       */
        color: t(literal),
-       /// A URL [literal](#highlight.tags.literal).
+       /**
+       A URL [literal](#highlight.tags.literal).
+       */
        url: t(literal),
-       /// A language keyword.
+       /**
+       A language keyword.
+       */
        keyword,
-       /// The [keyword](#highlight.tags.keyword) for the self or this
-       /// object.
+       /**
+       The [keyword](#highlight.tags.keyword) for the self or this
+       object.
+       */
        self: t(keyword),
-       /// The [keyword](#highlight.tags.keyword) for null.
+       /**
+       The [keyword](#highlight.tags.keyword) for null.
+       */
        null: t(keyword),
-       /// A [keyword](#highlight.tags.keyword) denoting some atomic value.
+       /**
+       A [keyword](#highlight.tags.keyword) denoting some atomic value.
+       */
        atom: t(keyword),
-       /// A [keyword](#highlight.tags.keyword) that represents a unit.
+       /**
+       A [keyword](#highlight.tags.keyword) that represents a unit.
+       */
        unit: t(keyword),
-       /// A modifier [keyword](#highlight.tags.keyword).
+       /**
+       A modifier [keyword](#highlight.tags.keyword).
+       */
        modifier: t(keyword),
-       /// A [keyword](#highlight.tags.keyword) that acts as an operator.
+       /**
+       A [keyword](#highlight.tags.keyword) that acts as an operator.
+       */
        operatorKeyword: t(keyword),
-       /// A control-flow related [keyword](#highlight.tags.keyword).
+       /**
+       A control-flow related [keyword](#highlight.tags.keyword).
+       */
        controlKeyword: t(keyword),
-       /// A [keyword](#highlight.tags.keyword) that defines something.
+       /**
+       A [keyword](#highlight.tags.keyword) that defines something.
+       */
        definitionKeyword: t(keyword),
-       /// A [keyword](#highlight.tags.keyword) related to defining or
-       /// interfacing with modules.
+       /**
+       A [keyword](#highlight.tags.keyword) related to defining or
+       interfacing with modules.
+       */
        moduleKeyword: t(keyword),
-       /// An operator.
+       /**
+       An operator.
+       */
        operator,
-       /// An [operator](#highlight.tags.operator) that dereferences something.
+       /**
+       An [operator](#highlight.tags.operator) that dereferences something.
+       */
        derefOperator: t(operator),
-       /// Arithmetic-related [operator](#highlight.tags.operator).
+       /**
+       Arithmetic-related [operator](#highlight.tags.operator).
+       */
        arithmeticOperator: t(operator),
-       /// Logical [operator](#highlight.tags.operator).
+       /**
+       Logical [operator](#highlight.tags.operator).
+       */
        logicOperator: t(operator),
-       /// Bit [operator](#highlight.tags.operator).
+       /**
+       Bit [operator](#highlight.tags.operator).
+       */
        bitwiseOperator: t(operator),
-       /// Comparison [operator](#highlight.tags.operator).
+       /**
+       Comparison [operator](#highlight.tags.operator).
+       */
        compareOperator: t(operator),
-       /// [Operator](#highlight.tags.operator) that updates its operand.
+       /**
+       [Operator](#highlight.tags.operator) that updates its operand.
+       */
        updateOperator: t(operator),
-       /// [Operator](#highlight.tags.operator) that defines something.
+       /**
+       [Operator](#highlight.tags.operator) that defines something.
+       */
        definitionOperator: t(operator),
-       /// Type-related [operator](#highlight.tags.operator).
+       /**
+       Type-related [operator](#highlight.tags.operator).
+       */
        typeOperator: t(operator),
-       /// Control-flow [operator](#highlight.tags.operator).
+       /**
+       Control-flow [operator](#highlight.tags.operator).
+       */
        controlOperator: t(operator),
-       /// Program or markup punctuation.
+       /**
+       Program or markup punctuation.
+       */
        punctuation,
-       /// [Punctuation](#highlight.tags.punctuation) that separates
-       /// things.
+       /**
+       [Punctuation](#highlight.tags.punctuation) that separates
+       things.
+       */
        separator: t(punctuation),
-       /// Bracket-style [punctuation](#highlight.tags.punctuation).
+       /**
+       Bracket-style [punctuation](#highlight.tags.punctuation).
+       */
        bracket,
-       /// Angle [brackets](#highlight.tags.bracket) (usually `<` and `>`
-       /// tokens).
+       /**
+       Angle [brackets](#highlight.tags.bracket) (usually `<` and `>`
+       tokens).
+       */
        angleBracket: t(bracket),
-       /// Square [brackets](#highlight.tags.bracket) (usually `[` and `]`
-       /// tokens).
+       /**
+       Square [brackets](#highlight.tags.bracket) (usually `[` and `]`
+       tokens).
+       */
        squareBracket: t(bracket),
-       /// Parentheses (usually `(` and `)` tokens). Subtag of
-       /// [bracket](#highlight.tags.bracket).
+       /**
+       Parentheses (usually `(` and `)` tokens). Subtag of
+       [bracket](#highlight.tags.bracket).
+       */
        paren: t(bracket),
-       /// Braces (usually `{` and `}` tokens). Subtag of
-       /// [bracket](#highlight.tags.bracket).
+       /**
+       Braces (usually `{` and `}` tokens). Subtag of
+       [bracket](#highlight.tags.bracket).
+       */
        brace: t(bracket),
-       /// Content, for example plain text in XML or markup documents.
+       /**
+       Content, for example plain text in XML or markup documents.
+       */
        content,
-       /// [Content](#highlight.tags.content) that represents a heading.
+       /**
+       [Content](#highlight.tags.content) that represents a heading.
+       */
        heading,
-       /// A level 1 [heading](#highlight.tags.heading).
+       /**
+       A level 1 [heading](#highlight.tags.heading).
+       */
        heading1: t(heading),
-       /// A level 2 [heading](#highlight.tags.heading).
+       /**
+       A level 2 [heading](#highlight.tags.heading).
+       */
        heading2: t(heading),
-       /// A level 3 [heading](#highlight.tags.heading).
+       /**
+       A level 3 [heading](#highlight.tags.heading).
+       */
        heading3: t(heading),
-       /// A level 4 [heading](#highlight.tags.heading).
+       /**
+       A level 4 [heading](#highlight.tags.heading).
+       */
        heading4: t(heading),
-       /// A level 5 [heading](#highlight.tags.heading).
+       /**
+       A level 5 [heading](#highlight.tags.heading).
+       */
        heading5: t(heading),
-       /// A level 6 [heading](#highlight.tags.heading).
+       /**
+       A level 6 [heading](#highlight.tags.heading).
+       */
        heading6: t(heading),
-       /// A prose separator (such as a horizontal rule).
+       /**
+       A prose separator (such as a horizontal rule).
+       */
        contentSeparator: t(content),
-       /// [Content](#highlight.tags.content) that represents a list.
+       /**
+       [Content](#highlight.tags.content) that represents a list.
+       */
        list: t(content),
-       /// [Content](#highlight.tags.content) that represents a quote.
+       /**
+       [Content](#highlight.tags.content) that represents a quote.
+       */
        quote: t(content),
-       /// [Content](#highlight.tags.content) that is emphasized.
+       /**
+       [Content](#highlight.tags.content) that is emphasized.
+       */
        emphasis: t(content),
-       /// [Content](#highlight.tags.content) that is styled strong.
+       /**
+       [Content](#highlight.tags.content) that is styled strong.
+       */
        strong: t(content),
-       /// [Content](#highlight.tags.content) that is part of a link.
+       /**
+       [Content](#highlight.tags.content) that is part of a link.
+       */
        link: t(content),
-       /// [Content](#highlight.tags.content) that is styled as code or
-       /// monospace.
+       /**
+       [Content](#highlight.tags.content) that is styled as code or
+       monospace.
+       */
        monospace: t(content),
-       /// [Content](#highlight.tags.content) that has a strike-through
-       /// style.
+       /**
+       [Content](#highlight.tags.content) that has a strike-through
+       style.
+       */
        strikethrough: t(content),
-       /// Inserted text in a change-tracking format.
+       /**
+       Inserted text in a change-tracking format.
+       */
        inserted: t(),
-       /// Deleted text.
+       /**
+       Deleted text.
+       */
        deleted: t(),
-       /// Changed text.
+       /**
+       Changed text.
+       */
        changed: t(),
-       /// An invalid or unsyntactic element.
+       /**
+       An invalid or unsyntactic element.
+       */
        invalid: t(),
-       /// Metadata or meta-instruction.
+       /**
+       Metadata or meta-instruction.
+       */
        meta,
-       /// [Metadata](#highlight.tags.meta) that applies to the entire
-       /// document.
+       /**
+       [Metadata](#highlight.tags.meta) that applies to the entire
+       document.
+       */
        documentMeta: t(meta),
-       /// [Metadata](#highlight.tags.meta) that annotates or adds
-       /// attributes to a given syntactic element.
+       /**
+       [Metadata](#highlight.tags.meta) that annotates or adds
+       attributes to a given syntactic element.
+       */
        annotation: t(meta),
-       /// Processing instruction or preprocessor directive. Subtag of
-       /// [meta](#highlight.tags.meta).
+       /**
+       Processing instruction or preprocessor directive. Subtag of
+       [meta](#highlight.tags.meta).
+       */
        processingInstruction: t(meta),
-       /// [Modifier](#highlight.Tag^defineModifier) that indicates that a
-       /// given element is being defined. Expected to be used with the
-       /// various [name](#highlight.tags.name) tags.
+       /**
+       [Modifier](#highlight.Tag^defineModifier) that indicates that a
+       given element is being defined. Expected to be used with the
+       various [name](#highlight.tags.name) tags.
+       */
        definition: Tag.defineModifier(),
-       /// [Modifier](#highlight.Tag^defineModifier) that indicates that
-       /// something is constant. Mostly expected to be used with
-       /// [variable names](#highlight.tags.variableName).
+       /**
+       [Modifier](#highlight.Tag^defineModifier) that indicates that
+       something is constant. Mostly expected to be used with
+       [variable names](#highlight.tags.variableName).
+       */
        constant: Tag.defineModifier(),
-       /// [Modifier](#highlight.Tag^defineModifier) used to indicate that
-       /// a [variable](#highlight.tags.variableName) or [property
-       /// name](#highlight.tags.propertyName) is being called or defined
-       /// as a function.
+       /**
+       [Modifier](#highlight.Tag^defineModifier) used to indicate that
+       a [variable](#highlight.tags.variableName) or [property
+       name](#highlight.tags.propertyName) is being called or defined
+       as a function.
+       */
        function: Tag.defineModifier(),
-       /// [Modifier](#highlight.Tag^defineModifier) that can be applied to
-       /// [names](#highlight.tags.name) to indicate that they belong to
-       /// the language's standard environment.
+       /**
+       [Modifier](#highlight.Tag^defineModifier) that can be applied to
+       [names](#highlight.tags.name) to indicate that they belong to
+       the language's standard environment.
+       */
        standard: Tag.defineModifier(),
-       /// [Modifier](#highlight.Tag^defineModifier) that indicates a given
-       /// [names](#highlight.tags.name) is local to some scope.
+       /**
+       [Modifier](#highlight.Tag^defineModifier) that indicates a given
+       [names](#highlight.tags.name) is local to some scope.
+       */
        local: Tag.defineModifier(),
-       /// A generic variant [modifier](#highlight.Tag^defineModifier) that
-       /// can be used to tag language-specific alternative variants of
-       /// some common tag. It is recommended for themes to define special
-       /// forms of at least the [string](#highlight.tags.string) and
-       /// [variable name](#highlight.tags.variableName) tags, since those
-       /// come up a lot.
+       /**
+       A generic variant [modifier](#highlight.Tag^defineModifier) that
+       can be used to tag language-specific alternative variants of
+       some common tag. It is recommended for themes to define special
+       forms of at least the [string](#highlight.tags.string) and
+       [variable name](#highlight.tags.variableName) tags, since those
+       come up a lot.
+       */
        special: Tag.defineModifier()
    };
-   /// This is a highlighter that adds stable, predictable classes to
-   /// tokens, for styling with external CSS.
-   ///
-   /// The following tags are mapped to their name prefixed with `"tok-"`
-   /// (for example `"tok-comment"`):
-   ///
-   /// * [`link`](#highlight.tags.link)
-   /// * [`heading`](#highlight.tags.heading)
-   /// * [`emphasis`](#highlight.tags.emphasis)
-   /// * [`strong`](#highlight.tags.strong)
-   /// * [`keyword`](#highlight.tags.keyword)
-   /// * [`atom`](#highlight.tags.atom)
-   /// * [`bool`](#highlight.tags.bool)
-   /// * [`url`](#highlight.tags.url)
-   /// * [`labelName`](#highlight.tags.labelName)
-   /// * [`inserted`](#highlight.tags.inserted)
-   /// * [`deleted`](#highlight.tags.deleted)
-   /// * [`literal`](#highlight.tags.literal)
-   /// * [`string`](#highlight.tags.string)
-   /// * [`number`](#highlight.tags.number)
-   /// * [`variableName`](#highlight.tags.variableName)
-   /// * [`typeName`](#highlight.tags.typeName)
-   /// * [`namespace`](#highlight.tags.namespace)
-   /// * [`className`](#highlight.tags.className)
-   /// * [`macroName`](#highlight.tags.macroName)
-   /// * [`propertyName`](#highlight.tags.propertyName)
-   /// * [`operator`](#highlight.tags.operator)
-   /// * [`comment`](#highlight.tags.comment)
-   /// * [`meta`](#highlight.tags.meta)
-   /// * [`punctuation`](#highlight.tags.punctuation)
-   /// * [`invalid`](#highlight.tags.invalid)
-   ///
-   /// In addition, these mappings are provided:
-   ///
-   /// * [`regexp`](#highlight.tags.regexp),
-   ///   [`escape`](#highlight.tags.escape), and
-   ///   [`special`](#highlight.tags.special)[`(string)`](#highlight.tags.string)
-   ///   are mapped to `"tok-string2"`
-   /// * [`special`](#highlight.tags.special)[`(variableName)`](#highlight.tags.variableName)
-   ///   to `"tok-variableName2"`
-   /// * [`local`](#highlight.tags.local)[`(variableName)`](#highlight.tags.variableName)
-   ///   to `"tok-variableName tok-local"`
-   /// * [`definition`](#highlight.tags.definition)[`(variableName)`](#highlight.tags.variableName)
-   ///   to `"tok-variableName tok-definition"`
-   /// * [`definition`](#highlight.tags.definition)[`(propertyName)`](#highlight.tags.propertyName)
-   ///   to `"tok-propertyName tok-definition"`
+   /**
+   This is a highlighter that adds stable, predictable classes to
+   tokens, for styling with external CSS.
+
+   The following tags are mapped to their name prefixed with `"tok-"`
+   (for example `"tok-comment"`):
+
+   * [`link`](#highlight.tags.link)
+   * [`heading`](#highlight.tags.heading)
+   * [`emphasis`](#highlight.tags.emphasis)
+   * [`strong`](#highlight.tags.strong)
+   * [`keyword`](#highlight.tags.keyword)
+   * [`atom`](#highlight.tags.atom)
+   * [`bool`](#highlight.tags.bool)
+   * [`url`](#highlight.tags.url)
+   * [`labelName`](#highlight.tags.labelName)
+   * [`inserted`](#highlight.tags.inserted)
+   * [`deleted`](#highlight.tags.deleted)
+   * [`literal`](#highlight.tags.literal)
+   * [`string`](#highlight.tags.string)
+   * [`number`](#highlight.tags.number)
+   * [`variableName`](#highlight.tags.variableName)
+   * [`typeName`](#highlight.tags.typeName)
+   * [`namespace`](#highlight.tags.namespace)
+   * [`className`](#highlight.tags.className)
+   * [`macroName`](#highlight.tags.macroName)
+   * [`propertyName`](#highlight.tags.propertyName)
+   * [`operator`](#highlight.tags.operator)
+   * [`comment`](#highlight.tags.comment)
+   * [`meta`](#highlight.tags.meta)
+   * [`punctuation`](#highlight.tags.punctuation)
+   * [`invalid`](#highlight.tags.invalid)
+
+   In addition, these mappings are provided:
+
+   * [`regexp`](#highlight.tags.regexp),
+     [`escape`](#highlight.tags.escape), and
+     [`special`](#highlight.tags.special)[`(string)`](#highlight.tags.string)
+     are mapped to `"tok-string2"`
+   * [`special`](#highlight.tags.special)[`(variableName)`](#highlight.tags.variableName)
+     to `"tok-variableName2"`
+   * [`local`](#highlight.tags.local)[`(variableName)`](#highlight.tags.variableName)
+     to `"tok-variableName tok-local"`
+   * [`definition`](#highlight.tags.definition)[`(variableName)`](#highlight.tags.variableName)
+     to `"tok-variableName tok-definition"`
+   * [`definition`](#highlight.tags.definition)[`(propertyName)`](#highlight.tags.propertyName)
+     to `"tok-propertyName tok-definition"`
+   */
    tagHighlighter([
        { tag: tags.link, class: "tok-link" },
        { tag: tags.heading, class: "tok-heading" },
@@ -15614,6 +15728,11 @@
        });
    }
    /**
+   Syntax node prop used to register sublangauges. Should be added to
+   the top level node type for the language.
+   */
+   const sublanguageProp = /*@__PURE__*/new NodeProp();
+   /**
    A language object manages parsing and per-language
    [metadata](https://codemirror.net/6/docs/ref/#state.EditorState.languageDataAt). Parse data is
    managed as a [Lezer](https://lezer.codemirror.net) tree. The class
@@ -15650,14 +15769,28 @@
            this.parser = parser;
            this.extension = [
                language.of(this),
-               EditorState.languageData.of((state, pos, side) => state.facet(languageDataFacetAt(state, pos, side)))
+               EditorState.languageData.of((state, pos, side) => {
+                   let top = topNodeAt(state, pos, side), data = top.type.prop(languageDataProp);
+                   if (!data)
+                       return [];
+                   let base = state.facet(data), sub = top.type.prop(sublanguageProp);
+                   if (sub) {
+                       let innerNode = top.resolve(pos - top.from, side);
+                       for (let sublang of sub)
+                           if (sublang.test(innerNode, state)) {
+                               let data = state.facet(sublang.facet);
+                               return sublang.type == "replace" ? data : data.concat(base);
+                           }
+                   }
+                   return base;
+               })
            ].concat(extraExtensions);
        }
        /**
        Query whether this language is active at the given position.
        */
        isActiveAt(state, pos, side = -1) {
-           return languageDataFacetAt(state, pos, side) == this.data;
+           return topNodeAt(state, pos, side).type.prop(languageDataProp) == this.data;
        }
        /**
        Find the document regions that were parsed using this language.
@@ -15712,16 +15845,14 @@
    @internal
    */
    Language.setState = /*@__PURE__*/StateEffect.define();
-   function languageDataFacetAt(state, pos, side) {
-       let topLang = state.facet(language);
-       if (!topLang)
-           return null;
-       let facet = topLang.data;
-       if (topLang.allowsNesting) {
-           for (let node = syntaxTree(state).topNode; node; node = node.enter(pos, side, IterMode.ExcludeBuffers))
-               facet = node.type.prop(languageDataProp) || facet;
+   function topNodeAt(state, pos, side) {
+       let topLang = state.facet(language), tree = syntaxTree(state).topNode;
+       if (!topLang || topLang.allowsNesting) {
+           for (let node = tree; node; node = node.enter(pos, side, IterMode.ExcludeBuffers))
+               if (node.type.isTop)
+                   tree = node;
        }
-       return facet;
+       return tree;
    }
    /**
    A subclass of [`Language`](https://codemirror.net/6/docs/ref/#language.Language) for use with Lezer
@@ -15763,13 +15894,13 @@
    }
    // Lezer-style Input object for a Text document.
    class DocInput {
-       constructor(doc, length = doc.length) {
+       constructor(doc) {
            this.doc = doc;
-           this.length = length;
            this.cursorPos = 0;
            this.string = "";
            this.cursor = doc.iter();
        }
+       get length() { return this.doc.length; }
        syncTo(pos) {
            this.string = this.cursor.next(pos - this.cursorPos).value;
            this.cursorPos = pos + this.string.length;
@@ -16217,17 +16348,18 @@
    */
    const indentService = /*@__PURE__*/Facet.define();
    /**
-   Facet for overriding the unit by which indentation happens.
-   Should be a string consisting either entirely of spaces or
-   entirely of tabs. When not set, this defaults to 2 spaces.
+   Facet for overriding the unit by which indentation happens. Should
+   be a string consisting either entirely of the same whitespace
+   character. When not set, this defaults to 2 spaces.
    */
    const indentUnit = /*@__PURE__*/Facet.define({
        combine: values => {
            if (!values.length)
                return "  ";
-           if (!/^(?: +|\t+)$/.test(values[0]))
+           let unit = values[0];
+           if (!unit || /\S/.test(unit) || Array.from(unit).some(e => e != unit[0]))
                throw new Error("Invalid indent unit: " + JSON.stringify(values[0]));
-           return values[0];
+           return unit;
        }
    });
    /**
@@ -16247,14 +16379,16 @@
    tabs.
    */
    function indentString(state, cols) {
-       let result = "", ts = state.tabSize;
-       if (state.facet(indentUnit).charCodeAt(0) == 9)
+       let result = "", ts = state.tabSize, ch = state.facet(indentUnit)[0];
+       if (ch == "\t") {
            while (cols >= ts) {
                result += "\t";
                cols -= ts;
            }
+           ch = " ";
+       }
        for (let i = 0; i < cols; i++)
-           result += " ";
+           result += ch;
        return result;
    }
    /**
@@ -16802,7 +16936,7 @@
    Create an extension that configures code folding.
    */
    function codeFolding(config) {
-       let result = [foldState, baseTheme$1$2];
+       let result = [foldState, baseTheme$1$1];
        if (config)
            result.push(foldConfig.of(config));
        return result;
@@ -16911,7 +17045,7 @@
            codeFolding()
        ];
    }
-   const baseTheme$1$2 = /*@__PURE__*/EditorView.baseTheme({
+   const baseTheme$1$1 = /*@__PURE__*/EditorView.baseTheme({
        ".cm-foldPlaceholder": {
            backgroundColor: "#eee",
            border: "1px solid #ddd",
@@ -17307,7 +17441,7 @@
    if available, otherwise falling back to block comments.
    */
    const toggleComment = target => {
-       let config = getConfig(target.state);
+       let { state } = target, line = state.doc.lineAt(state.selection.main.from), config = getConfig(target.state, line.from);
        return config.line ? toggleLineComment(target) : config.block ? toggleBlockCommentByLine(target) : false;
    };
    function command(f, option) {
@@ -17340,7 +17474,7 @@
    block comments.
    */
    const toggleBlockCommentByLine = /*@__PURE__*/command((o, s) => changeBlockComment(o, s, selectedLineRanges(s)), 0 /* CommentOption.Toggle */);
-   function getConfig(state, pos = state.selection.main.head) {
+   function getConfig(state, pos) {
        let data = state.languageDataAt("commentTokens", pos);
        return data.length ? data[0] : {};
    }
@@ -17422,13 +17556,13 @@
        let prevLine = -1;
        for (let { from, to } of ranges) {
            let startI = lines.length, minIndent = 1e9;
+           let token = getConfig(state, from).line;
+           if (!token)
+               continue;
            for (let pos = from; pos <= to;) {
                let line = state.doc.lineAt(pos);
                if (line.from > prevLine && (from == to || to > line.from)) {
                    prevLine = line.from;
-                   let token = getConfig(state, pos).line;
-                   if (!token)
-                       continue;
                    let indent = /^\s*/.exec(line.text)[0].length;
                    let empty = indent == line.length;
                    let comment = line.text.slice(indent, indent + token.length) == token ? indent : -1;
@@ -17910,21 +18044,41 @@
    Move the selection one line down.
    */
    const cursorLineDown = view => cursorByLine(view, true);
-   function pageHeight(view) {
-       return Math.max(view.defaultLineHeight, Math.min(view.dom.clientHeight, innerHeight) - 5);
+   function pageInfo(view) {
+       let selfScroll = view.scrollDOM.clientHeight < view.scrollDOM.scrollHeight - 2;
+       let marginTop = 0, marginBottom = 0, height;
+       if (selfScroll) {
+           for (let source of view.state.facet(EditorView.scrollMargins)) {
+               let margins = source(view);
+               if (margins === null || margins === void 0 ? void 0 : margins.top)
+                   marginTop = Math.max(margins === null || margins === void 0 ? void 0 : margins.top, marginTop);
+               if (margins === null || margins === void 0 ? void 0 : margins.bottom)
+                   marginBottom = Math.max(margins === null || margins === void 0 ? void 0 : margins.bottom, marginBottom);
+           }
+           height = view.scrollDOM.clientHeight - marginTop - marginBottom;
+       }
+       else {
+           height = (view.dom.ownerDocument.defaultView || window).innerHeight;
+       }
+       return { marginTop, marginBottom, selfScroll,
+           height: Math.max(view.defaultLineHeight, height - 5) };
    }
    function cursorByPage(view, forward) {
+       let page = pageInfo(view);
        let { state } = view, selection = updateSel(state.selection, range => {
-           return range.empty ? view.moveVertically(range, forward, pageHeight(view)) : rangeEnd(range, forward);
+           return range.empty ? view.moveVertically(range, forward, page.height)
+               : rangeEnd(range, forward);
        });
        if (selection.eq(state.selection))
            return false;
-       let startPos = view.coordsAtPos(state.selection.main.head);
-       let scrollRect = view.scrollDOM.getBoundingClientRect();
        let effect;
-       if (startPos && startPos.top > scrollRect.top && startPos.bottom < scrollRect.bottom &&
-           startPos.top - scrollRect.top <= view.scrollDOM.scrollHeight - view.scrollDOM.scrollTop - view.scrollDOM.clientHeight)
-           effect = EditorView.scrollIntoView(selection.main.head, { y: "start", yMargin: startPos.top - scrollRect.top });
+       if (page.selfScroll) {
+           let startPos = view.coordsAtPos(state.selection.main.head);
+           let scrollRect = view.scrollDOM.getBoundingClientRect();
+           let scrollTop = scrollRect.top + page.marginTop, scrollBottom = scrollRect.bottom - page.marginBottom;
+           if (startPos && startPos.top > scrollTop && startPos.bottom < scrollBottom)
+               effect = EditorView.scrollIntoView(selection.main.head, { y: "start", yMargin: startPos.top - scrollTop });
+       }
        view.dispatch(setSel(state, selection), { effects: effect });
        return true;
    }
@@ -18051,7 +18205,7 @@
    */
    const selectLineDown = view => selectByLine(view, true);
    function selectByPage(view, forward) {
-       return extendSel(view, range => view.moveVertically(range, forward, pageHeight(view)));
+       return extendSel(view, range => view.moveVertically(range, forward, pageInfo(view).height));
    }
    /**
    Move the selection head one page up.
@@ -19072,16 +19226,13 @@
    `-`, document percentages suffixed with `%`, and an optional
    column position by adding `:` and a second number after the line
    number.
-
-   The dialog can be styled with the `panel.gotoLine` theme
-   selector.
    */
    const gotoLine = view => {
        let panel = getPanel(view, createLineDialog);
        if (!panel) {
            let effects = [dialogEffect.of(true)];
            if (view.state.field(dialogField, false) == null)
-               effects.push(StateEffect.appendConfig.of([dialogField, baseTheme$1$1]));
+               effects.push(StateEffect.appendConfig.of([dialogField, baseTheme$1]));
            view.dispatch({ effects });
            panel = getPanel(view, createLineDialog);
        }
@@ -19089,7 +19240,7 @@
            panel.dom.querySelector("input").focus();
        return true;
    };
-   const baseTheme$1$1 = /*@__PURE__*/EditorView.baseTheme({
+   const baseTheme$1 = /*@__PURE__*/EditorView.baseTheme({
        ".cm-panel.cm-gotoLine": {
            padding: "2px 6px 4px",
            "& label": { fontSize: "80%" }
@@ -19261,7 +19412,8 @@
                caseSensitive: false,
                literal: false,
                wholeWord: false,
-               createPanel: view => new SearchPanel(view)
+               createPanel: view => new SearchPanel(view),
+               scrollToMatch: range => EditorView.scrollIntoView(range)
            });
        }
    });
@@ -19450,7 +19602,7 @@
    once).
    */
    const setSearchQuery = /*@__PURE__*/StateEffect.define();
-   const togglePanel$1 = /*@__PURE__*/StateEffect.define();
+   const togglePanel = /*@__PURE__*/StateEffect.define();
    const searchState = /*@__PURE__*/StateField.define({
        create(state) {
            return new SearchState(defaultQuery(state).create(), null);
@@ -19459,7 +19611,7 @@
            for (let effect of tr.effects) {
                if (effect.is(setSearchQuery))
                    value = new SearchState(effect.value.create(), value.panel);
-               else if (effect.is(togglePanel$1))
+               else if (effect.is(togglePanel))
                    value = new SearchState(value.query, effect.value ? createSearchPanel : null);
            }
            return value;
@@ -19519,10 +19671,11 @@
        let next = query.nextMatch(view.state, to, to);
        if (!next)
            return false;
+       let selection = EditorSelection.single(next.from, next.to);
+       let config = view.state.facet(searchConfigFacet);
        view.dispatch({
-           selection: { anchor: next.from, head: next.to },
-           scrollIntoView: true,
-           effects: announceMatch(view, next),
+           selection,
+           effects: [announceMatch(view, next), config.scrollToMatch(selection.main)],
            userEvent: "select.search"
        });
        return true;
@@ -19534,13 +19687,14 @@
    */
    const findPrevious = /*@__PURE__*/searchCommand((view, { query }) => {
        let { state } = view, { from } = state.selection.main;
-       let range = query.prevMatch(state, from, from);
-       if (!range)
+       let prev = query.prevMatch(state, from, from);
+       if (!prev)
            return false;
+       let selection = EditorSelection.single(prev.from, prev.to);
+       let config = view.state.facet(searchConfigFacet);
        view.dispatch({
-           selection: { anchor: range.from, head: range.to },
-           scrollIntoView: true,
-           effects: announceMatch(view, range),
+           selection,
+           effects: [announceMatch(view, prev), config.scrollToMatch(selection.main)],
            userEvent: "select.search"
        });
        return true;
@@ -19591,22 +19745,21 @@
        if (!next)
            return false;
        let changes = [], selection, replacement;
-       let announce = [];
+       let effects = [];
        if (next.from == from && next.to == to) {
            replacement = state.toText(query.getReplacement(next));
            changes.push({ from: next.from, to: next.to, insert: replacement });
            next = query.nextMatch(state, next.from, next.to);
-           announce.push(EditorView.announce.of(state.phrase("replaced match on line $", state.doc.lineAt(from).number) + "."));
+           effects.push(EditorView.announce.of(state.phrase("replaced match on line $", state.doc.lineAt(from).number) + "."));
        }
        if (next) {
            let off = changes.length == 0 || changes[0].from >= next.to ? 0 : next.to - next.from - replacement.length;
-           selection = { anchor: next.from - off, head: next.to - off };
-           announce.push(announceMatch(view, next));
+           selection = EditorSelection.single(next.from - off, next.to - off);
+           effects.push(announceMatch(view, next));
+           effects.push(state.facet(searchConfigFacet).scrollToMatch(selection.main));
        }
        view.dispatch({
-           changes, selection,
-           scrollIntoView: !!selection,
-           effects: announce,
+           changes, selection, effects,
            userEvent: "input.replace"
        });
        return true;
@@ -19669,7 +19822,7 @@
        }
        else {
            view.dispatch({ effects: [
-                   togglePanel$1.of(true),
+                   togglePanel.of(true),
                    state ? setSearchQuery.of(defaultQuery(view.state, state.query.spec)) : StateEffect.appendConfig.of(searchExtensions)
                ] });
        }
@@ -19685,7 +19838,7 @@
        let panel = getPanel(view, createSearchPanel);
        if (panel && panel.dom.contains(view.root.activeElement))
            view.focus();
-       view.dispatch({ effects: togglePanel$1.of(false) });
+       view.dispatch({ effects: togglePanel.of(false) });
        return true;
    };
    /**
@@ -19990,9 +20143,12 @@
    */
    function ifNotIn(nodes, source) {
        return (context) => {
-           for (let pos = syntaxTree(context.state).resolveInner(context.pos, -1); pos; pos = pos.parent)
+           for (let pos = syntaxTree(context.state).resolveInner(context.pos, -1); pos; pos = pos.parent) {
                if (nodes.indexOf(pos.name) > -1)
                    return null;
+               if (pos.type.isTop)
+                   break;
+           }
            return source(context);
        };
    }
@@ -20097,13 +20253,18 @@
            // For single-character queries, only match when they occur right
            // at the start
            if (chars.length == 1) {
-               let first = codePointAt(word, 0);
-               return first == chars[0] ? [0, 0, codePointSize(first)]
-                   : first == folded[0] ? [-200 /* Penalty.CaseFold */, 0, codePointSize(first)] : null;
+               let first = codePointAt(word, 0), firstSize = codePointSize(first);
+               let score = firstSize == word.length ? 0 : -100 /* Penalty.NotFull */;
+               if (first == chars[0]) ;
+               else if (first == folded[0])
+                   score += -200 /* Penalty.CaseFold */;
+               else
+                   return null;
+               return [score, 0, firstSize];
            }
            let direct = word.indexOf(this.pattern);
            if (direct == 0)
-               return [0, 0, this.pattern.length];
+               return [word.length == this.pattern.length ? 0 : -100 /* Penalty.NotFull */, 0, this.pattern.length];
            let len = chars.length, anyTo = 0;
            if (direct < 0) {
                for (let i = 0, e = Math.min(word.length, 200); i < e && anyTo < len;) {
@@ -20159,7 +20320,7 @@
            if (byWordTo == len && byWord[0] == 0 && wordAdjacent)
                return this.result(-100 /* Penalty.ByWord */ + (byWordFolded ? -200 /* Penalty.CaseFold */ : 0), byWord, word);
            if (adjacentTo == len && adjacentStart == 0)
-               return [-200 /* Penalty.CaseFold */ - word.length, 0, adjacentEnd];
+               return [-200 /* Penalty.CaseFold */ - word.length + (adjacentEnd == word.length ? 0 : -100 /* Penalty.NotFull */), 0, adjacentEnd];
            if (direct > -1)
                return [-700 /* Penalty.NotStart */ - word.length, direct, direct + this.pattern.length];
            if (adjacentTo == len)
@@ -20944,7 +21105,7 @@
        }
    });
 
-   const baseTheme$1 = /*@__PURE__*/EditorView.baseTheme({
+   const baseTheme = /*@__PURE__*/EditorView.baseTheme({
        ".cm-tooltip.cm-tooltip-autocomplete": {
            "& > ul": {
                fontFamily: "monospace",
@@ -21320,7 +21481,7 @@
            completionConfig.of(config),
            completionPlugin,
            completionKeymapExt,
-           baseTheme$1
+           baseTheme
        ];
    }
    /**
@@ -21345,560 +21506,6 @@
    ];
    const completionKeymapExt = /*@__PURE__*/Prec.highest(/*@__PURE__*/keymap.computeN([completionConfig], state => state.facet(completionConfig).defaultKeymap ? [completionKeymap] : []));
 
-   class SelectedDiagnostic {
-       constructor(from, to, diagnostic) {
-           this.from = from;
-           this.to = to;
-           this.diagnostic = diagnostic;
-       }
-   }
-   class LintState {
-       constructor(diagnostics, panel, selected) {
-           this.diagnostics = diagnostics;
-           this.panel = panel;
-           this.selected = selected;
-       }
-       static init(diagnostics, panel, state) {
-           // Filter the list of diagnostics for which to create markers
-           let markedDiagnostics = diagnostics;
-           let diagnosticFilter = state.facet(lintConfig).markerFilter;
-           if (diagnosticFilter)
-               markedDiagnostics = diagnosticFilter(markedDiagnostics);
-           let ranges = Decoration.set(markedDiagnostics.map((d) => {
-               // For zero-length ranges or ranges covering only a line break, create a widget
-               return d.from == d.to || (d.from == d.to - 1 && state.doc.lineAt(d.from).to == d.from)
-                   ? Decoration.widget({
-                       widget: new DiagnosticWidget(d),
-                       diagnostic: d
-                   }).range(d.from)
-                   : Decoration.mark({
-                       attributes: { class: "cm-lintRange cm-lintRange-" + d.severity },
-                       diagnostic: d
-                   }).range(d.from, d.to);
-           }), true);
-           return new LintState(ranges, panel, findDiagnostic(ranges));
-       }
-   }
-   function findDiagnostic(diagnostics, diagnostic = null, after = 0) {
-       let found = null;
-       diagnostics.between(after, 1e9, (from, to, { spec }) => {
-           if (diagnostic && spec.diagnostic != diagnostic)
-               return;
-           found = new SelectedDiagnostic(from, to, spec.diagnostic);
-           return false;
-       });
-       return found;
-   }
-   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(StateEffect.appendConfig.of([
-           lintState,
-           EditorView.decorations.compute([lintState], state => {
-               let { selected, panel } = state.field(lintState);
-               return !selected || !panel || selected.from == selected.to ? Decoration.none : Decoration.set([
-                   activeMark.range(selected.from, selected.to)
-               ]);
-           }),
-           hoverTooltip(lintTooltip, { hideOn: hideTooltip }),
-           baseTheme
-       ]));
-   }
-   /**
-   Returns a transaction spec which updates the current set of
-   diagnostics, and enables the lint extension if if wasn't already
-   active.
-   */
-   function setDiagnostics(state, diagnostics) {
-       return {
-           effects: maybeEnableLint(state, [setDiagnosticsEffect.of(diagnostics)])
-       };
-   }
-   /**
-   The state effect that updates the set of active diagnostics. Can
-   be useful when writing an extension that needs to track these.
-   */
-   const setDiagnosticsEffect = /*@__PURE__*/StateEffect.define();
-   const togglePanel = /*@__PURE__*/StateEffect.define();
-   const movePanelSelection = /*@__PURE__*/StateEffect.define();
-   const lintState = /*@__PURE__*/StateField.define({
-       create() {
-           return new LintState(Decoration.none, null, null);
-       },
-       update(value, tr) {
-           if (tr.docChanged) {
-               let mapped = value.diagnostics.map(tr.changes), selected = null;
-               if (value.selected) {
-                   let selPos = tr.changes.mapPos(value.selected.from, 1);
-                   selected = findDiagnostic(mapped, value.selected.diagnostic, selPos) || findDiagnostic(mapped, null, selPos);
-               }
-               value = new LintState(mapped, value.panel, selected);
-           }
-           for (let effect of tr.effects) {
-               if (effect.is(setDiagnosticsEffect)) {
-                   value = LintState.init(effect.value, value.panel, tr.state);
-               }
-               else if (effect.is(togglePanel)) {
-                   value = new LintState(value.diagnostics, effect.value ? LintPanel.open : null, value.selected);
-               }
-               else if (effect.is(movePanelSelection)) {
-                   value = new LintState(value.diagnostics, value.panel, effect.value);
-               }
-           }
-           return value;
-       },
-       provide: f => [showPanel.from(f, val => val.panel),
-           EditorView.decorations.from(f, s => s.diagnostics)]
-   });
-   const activeMark = /*@__PURE__*/Decoration.mark({ class: "cm-lintRange cm-lintRange-active" });
-   function lintTooltip(view, pos, side) {
-       let { diagnostics } = view.state.field(lintState);
-       let found = [], stackStart = 2e8, stackEnd = 0;
-       diagnostics.between(pos - (side < 0 ? 1 : 0), pos + (side > 0 ? 1 : 0), (from, to, { spec }) => {
-           if (pos >= from && pos <= to &&
-               (from == to || ((pos > from || side > 0) && (pos < to || side < 0)))) {
-               found.push(spec.diagnostic);
-               stackStart = Math.min(from, stackStart);
-               stackEnd = Math.max(to, stackEnd);
-           }
-       });
-       let diagnosticFilter = view.state.facet(lintConfig).tooltipFilter;
-       if (diagnosticFilter)
-           found = diagnosticFilter(found);
-       if (!found.length)
-           return null;
-       return {
-           pos: stackStart,
-           end: stackEnd,
-           above: view.state.doc.lineAt(stackStart).to < stackEnd,
-           create() {
-               return { dom: diagnosticsTooltip(view, found) };
-           }
-       };
-   }
-   function diagnosticsTooltip(view, diagnostics) {
-       return crelt("ul", { class: "cm-tooltip-lint" }, diagnostics.map(d => renderDiagnostic(view, d, false)));
-   }
-   /**
-   Command to open and focus the lint panel.
-   */
-   const openLintPanel = (view) => {
-       let field = view.state.field(lintState, false);
-       if (!field || !field.panel)
-           view.dispatch({ effects: maybeEnableLint(view.state, [togglePanel.of(true)]) });
-       let panel = getPanel(view, LintPanel.open);
-       if (panel)
-           panel.dom.querySelector(".cm-panel-lint ul").focus();
-       return true;
-   };
-   /**
-   Command to close the lint panel, when open.
-   */
-   const closeLintPanel = (view) => {
-       let field = view.state.field(lintState, false);
-       if (!field || !field.panel)
-           return false;
-       view.dispatch({ effects: togglePanel.of(false) });
-       return true;
-   };
-   /**
-   Move the selection to the next diagnostic.
-   */
-   const nextDiagnostic = (view) => {
-       let field = view.state.field(lintState, false);
-       if (!field)
-           return false;
-       let sel = view.state.selection.main, next = field.diagnostics.iter(sel.to + 1);
-       if (!next.value) {
-           next = field.diagnostics.iter(0);
-           if (!next.value || next.from == sel.from && next.to == sel.to)
-               return false;
-       }
-       view.dispatch({ selection: { anchor: next.from, head: next.to }, scrollIntoView: true });
-       return true;
-   };
-   /**
-   A set of default key bindings for the lint functionality.
-
-   - Ctrl-Shift-m (Cmd-Shift-m on macOS): [`openLintPanel`](https://codemirror.net/6/docs/ref/#lint.openLintPanel)
-   - F8: [`nextDiagnostic`](https://codemirror.net/6/docs/ref/#lint.nextDiagnostic)
-   */
-   const lintKeymap = [
-       { key: "Mod-Shift-m", run: openLintPanel, preventDefault: true },
-       { key: "F8", run: nextDiagnostic }
-   ];
-   const lintPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
-       constructor(view) {
-           this.view = view;
-           this.timeout = -1;
-           this.set = true;
-           let { delay } = view.state.facet(lintConfig);
-           this.lintTime = Date.now() + delay;
-           this.run = this.run.bind(this);
-           this.timeout = setTimeout(this.run, delay);
-       }
-       run() {
-           let now = Date.now();
-           if (now < this.lintTime - 10) {
-               setTimeout(this.run, this.lintTime - now);
-           }
-           else {
-               this.set = false;
-               let { state } = this.view, { sources } = state.facet(lintConfig);
-               Promise.all(sources.map(source => Promise.resolve(source(this.view)))).then(annotations => {
-                   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 => { logException(this.view.state, error); });
-           }
-       }
-       update(update) {
-           let config = update.state.facet(lintConfig);
-           if (update.docChanged || config != update.startState.facet(lintConfig)) {
-               this.lintTime = Date.now() + config.delay;
-               if (!this.set) {
-                   this.set = true;
-                   this.timeout = setTimeout(this.run, config.delay);
-               }
-           }
-       }
-       force() {
-           if (this.set) {
-               this.lintTime = Date.now();
-               this.run();
-           }
-       }
-       destroy() {
-           clearTimeout(this.timeout);
-       }
-   });
-   const lintConfig = /*@__PURE__*/Facet.define({
-       combine(input) {
-           return Object.assign({ sources: input.map(i => i.source) }, combineConfig(input.map(i => i.config), {
-               delay: 750,
-               markerFilter: null,
-               tooltipFilter: null
-           }));
-       },
-       enables: lintPlugin
-   });
-   function assignKeys(actions) {
-       let assigned = [];
-       if (actions)
-           actions: for (let { name } of actions) {
-               for (let i = 0; i < name.length; i++) {
-                   let ch = name[i];
-                   if (/[a-zA-Z]/.test(ch) && !assigned.some(c => c.toLowerCase() == ch.toLowerCase())) {
-                       assigned.push(ch);
-                       continue actions;
-                   }
-               }
-               assigned.push("");
-           }
-       return assigned;
-   }
-   function renderDiagnostic(view, diagnostic, inPanel) {
-       var _a;
-       let keys = inPanel ? assignKeys(diagnostic.actions) : [];
-       return crelt("li", { class: "cm-diagnostic cm-diagnostic-" + diagnostic.severity }, crelt("span", { class: "cm-diagnosticText" }, diagnostic.renderMessage ? diagnostic.renderMessage() : diagnostic.message), (_a = diagnostic.actions) === null || _a === void 0 ? void 0 : _a.map((action, i) => {
-           let click = (e) => {
-               e.preventDefault();
-               let found = findDiagnostic(view.state.field(lintState).diagnostics, diagnostic);
-               if (found)
-                   action.apply(view, found.from, found.to);
-           };
-           let { name } = action, keyIndex = keys[i] ? name.indexOf(keys[i]) : -1;
-           let nameElt = keyIndex < 0 ? name : [name.slice(0, keyIndex),
-               crelt("u", name.slice(keyIndex, keyIndex + 1)),
-               name.slice(keyIndex + 1)];
-           return crelt("button", {
-               type: "button",
-               class: "cm-diagnosticAction",
-               onclick: click,
-               onmousedown: click,
-               "aria-label": ` Action: ${name}${keyIndex < 0 ? "" : ` (access key "${keys[i]})"`}.`
-           }, nameElt);
-       }), diagnostic.source && crelt("div", { class: "cm-diagnosticSource" }, diagnostic.source));
-   }
-   class DiagnosticWidget extends WidgetType {
-       constructor(diagnostic) {
-           super();
-           this.diagnostic = diagnostic;
-       }
-       eq(other) { return other.diagnostic == this.diagnostic; }
-       toDOM() {
-           return crelt("span", { class: "cm-lintPoint cm-lintPoint-" + this.diagnostic.severity });
-       }
-   }
-   class PanelItem {
-       constructor(view, diagnostic) {
-           this.diagnostic = diagnostic;
-           this.id = "item_" + Math.floor(Math.random() * 0xffffffff).toString(16);
-           this.dom = renderDiagnostic(view, diagnostic, true);
-           this.dom.id = this.id;
-           this.dom.setAttribute("role", "option");
-       }
-   }
-   class LintPanel {
-       constructor(view) {
-           this.view = view;
-           this.items = [];
-           let onkeydown = (event) => {
-               if (event.keyCode == 27) { // Escape
-                   closeLintPanel(this.view);
-                   this.view.focus();
-               }
-               else if (event.keyCode == 38 || event.keyCode == 33) { // ArrowUp, PageUp
-                   this.moveSelection((this.selectedIndex - 1 + this.items.length) % this.items.length);
-               }
-               else if (event.keyCode == 40 || event.keyCode == 34) { // ArrowDown, PageDown
-                   this.moveSelection((this.selectedIndex + 1) % this.items.length);
-               }
-               else if (event.keyCode == 36) { // Home
-                   this.moveSelection(0);
-               }
-               else if (event.keyCode == 35) { // End
-                   this.moveSelection(this.items.length - 1);
-               }
-               else if (event.keyCode == 13) { // Enter
-                   this.view.focus();
-               }
-               else if (event.keyCode >= 65 && event.keyCode <= 90 && this.selectedIndex >= 0) { // A-Z
-                   let { diagnostic } = this.items[this.selectedIndex], keys = assignKeys(diagnostic.actions);
-                   for (let i = 0; i < keys.length; i++)
-                       if (keys[i].toUpperCase().charCodeAt(0) == event.keyCode) {
-                           let found = findDiagnostic(this.view.state.field(lintState).diagnostics, diagnostic);
-                           if (found)
-                               diagnostic.actions[i].apply(view, found.from, found.to);
-                       }
-               }
-               else {
-                   return;
-               }
-               event.preventDefault();
-           };
-           let onclick = (event) => {
-               for (let i = 0; i < this.items.length; i++) {
-                   if (this.items[i].dom.contains(event.target))
-                       this.moveSelection(i);
-               }
-           };
-           this.list = crelt("ul", {
-               tabIndex: 0,
-               role: "listbox",
-               "aria-label": this.view.state.phrase("Diagnostics"),
-               onkeydown,
-               onclick
-           });
-           this.dom = crelt("div", { class: "cm-panel-lint" }, this.list, crelt("button", {
-               type: "button",
-               name: "close",
-               "aria-label": this.view.state.phrase("close"),
-               onclick: () => closeLintPanel(this.view)
-           }, "×"));
-           this.update();
-       }
-       get selectedIndex() {
-           let selected = this.view.state.field(lintState).selected;
-           if (!selected)
-               return -1;
-           for (let i = 0; i < this.items.length; i++)
-               if (this.items[i].diagnostic == selected.diagnostic)
-                   return i;
-           return -1;
-       }
-       update() {
-           let { diagnostics, selected } = this.view.state.field(lintState);
-           let i = 0, needsSync = false, newSelectedItem = null;
-           diagnostics.between(0, this.view.state.doc.length, (_start, _end, { spec }) => {
-               let found = -1, item;
-               for (let j = i; j < this.items.length; j++)
-                   if (this.items[j].diagnostic == spec.diagnostic) {
-                       found = j;
-                       break;
-                   }
-               if (found < 0) {
-                   item = new PanelItem(this.view, spec.diagnostic);
-                   this.items.splice(i, 0, item);
-                   needsSync = true;
-               }
-               else {
-                   item = this.items[found];
-                   if (found > i) {
-                       this.items.splice(i, found - i);
-                       needsSync = true;
-                   }
-               }
-               if (selected && item.diagnostic == selected.diagnostic) {
-                   if (!item.dom.hasAttribute("aria-selected")) {
-                       item.dom.setAttribute("aria-selected", "true");
-                       newSelectedItem = item;
-                   }
-               }
-               else if (item.dom.hasAttribute("aria-selected")) {
-                   item.dom.removeAttribute("aria-selected");
-               }
-               i++;
-           });
-           while (i < this.items.length && !(this.items.length == 1 && this.items[0].diagnostic.from < 0)) {
-               needsSync = true;
-               this.items.pop();
-           }
-           if (this.items.length == 0) {
-               this.items.push(new PanelItem(this.view, {
-                   from: -1, to: -1,
-                   severity: "info",
-                   message: this.view.state.phrase("No diagnostics")
-               }));
-               needsSync = true;
-           }
-           if (newSelectedItem) {
-               this.list.setAttribute("aria-activedescendant", newSelectedItem.id);
-               this.view.requestMeasure({
-                   key: this,
-                   read: () => ({ sel: newSelectedItem.dom.getBoundingClientRect(), panel: this.list.getBoundingClientRect() }),
-                   write: ({ sel, panel }) => {
-                       if (sel.top < panel.top)
-                           this.list.scrollTop -= panel.top - sel.top;
-                       else if (sel.bottom > panel.bottom)
-                           this.list.scrollTop += sel.bottom - panel.bottom;
-                   }
-               });
-           }
-           else if (this.selectedIndex < 0) {
-               this.list.removeAttribute("aria-activedescendant");
-           }
-           if (needsSync)
-               this.sync();
-       }
-       sync() {
-           let domPos = this.list.firstChild;
-           function rm() {
-               let prev = domPos;
-               domPos = prev.nextSibling;
-               prev.remove();
-           }
-           for (let item of this.items) {
-               if (item.dom.parentNode == this.list) {
-                   while (domPos != item.dom)
-                       rm();
-                   domPos = item.dom.nextSibling;
-               }
-               else {
-                   this.list.insertBefore(item.dom, domPos);
-               }
-           }
-           while (domPos)
-               rm();
-       }
-       moveSelection(selectedIndex) {
-           if (this.selectedIndex < 0)
-               return;
-           let field = this.view.state.field(lintState);
-           let selection = findDiagnostic(field.diagnostics, this.items[selectedIndex].diagnostic);
-           if (!selection)
-               return;
-           this.view.dispatch({
-               selection: { anchor: selection.from, head: selection.to },
-               scrollIntoView: true,
-               effects: movePanelSelection.of(selection)
-           });
-       }
-       static open(view) { return new LintPanel(view); }
-   }
-   function svg(content, attrs = `viewBox="0 0 40 40"`) {
-       return `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" ${attrs}>${encodeURIComponent(content)}</svg>')`;
-   }
-   function underline(color) {
-       return svg(`<path d="m0 2.5 l2 -1.5 l1 0 l2 1.5 l1 0" stroke="${color}" fill="none" stroke-width=".7"/>`, `width="6" height="3"`);
-   }
-   const baseTheme = /*@__PURE__*/EditorView.baseTheme({
-       ".cm-diagnostic": {
-           padding: "3px 6px 3px 8px",
-           marginLeft: "-1px",
-           display: "block",
-           whiteSpace: "pre-wrap"
-       },
-       ".cm-diagnostic-error": { borderLeft: "5px solid #d11" },
-       ".cm-diagnostic-warning": { borderLeft: "5px solid orange" },
-       ".cm-diagnostic-info": { borderLeft: "5px solid #999" },
-       ".cm-diagnosticAction": {
-           font: "inherit",
-           border: "none",
-           padding: "2px 4px",
-           backgroundColor: "#444",
-           color: "white",
-           borderRadius: "3px",
-           marginLeft: "8px"
-       },
-       ".cm-diagnosticSource": {
-           fontSize: "70%",
-           opacity: .7
-       },
-       ".cm-lintRange": {
-           backgroundPosition: "left bottom",
-           backgroundRepeat: "repeat-x",
-           paddingBottom: "0.7px",
-       },
-       ".cm-lintRange-error": { backgroundImage: /*@__PURE__*/underline("#d11") },
-       ".cm-lintRange-warning": { backgroundImage: /*@__PURE__*/underline("orange") },
-       ".cm-lintRange-info": { backgroundImage: /*@__PURE__*/underline("#999") },
-       ".cm-lintRange-active": { backgroundColor: "#ffdd9980" },
-       ".cm-tooltip-lint": {
-           padding: 0,
-           margin: 0
-       },
-       ".cm-lintPoint": {
-           position: "relative",
-           "&:after": {
-               content: '""',
-               position: "absolute",
-               bottom: 0,
-               left: "-2px",
-               borderLeft: "3px solid transparent",
-               borderRight: "3px solid transparent",
-               borderBottom: "4px solid #d11"
-           }
-       },
-       ".cm-lintPoint-warning": {
-           "&:after": { borderBottomColor: "orange" }
-       },
-       ".cm-lintPoint-info": {
-           "&:after": { borderBottomColor: "#999" }
-       },
-       ".cm-panel.cm-panel-lint": {
-           position: "relative",
-           "& ul": {
-               maxHeight: "100px",
-               overflowY: "auto",
-               "& [aria-selected]": {
-                   backgroundColor: "#ddd",
-                   "& u": { textDecoration: "underline" }
-               },
-               "&:focus [aria-selected]": {
-                   background_fallback: "#bdf",
-                   backgroundColor: "Highlight",
-                   color_fallback: "white",
-                   color: "HighlightText"
-               },
-               "& u": { textDecoration: "none" },
-               padding: 0,
-               margin: 0
-           },
-           "& [name=close]": {
-               position: "absolute",
-               top: "0",
-               right: "2px",
-               background: "inherit",
-               border: "none",
-               font: "inherit",
-               padding: 0,
-               margin: 0
-           }
-       }
-   });
-
    function base64Encode (str) {
      // https://stackoverflow.com/questions/30106476/using-javascripts-atob-to-decode-base64-doesnt-properly-decode-utf-8-strings
      return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
@@ -24275,8 +23882,7 @@
        ...searchKeymap,
        ...historyKeymap,
        ...foldKeymap,
-       ...completionKeymap,
-       ...lintKeymap
+       ...completionKeymap
      ]);
      const sqlConfig = {
        dialect: MySQL,
@@ -24535,6 +24141,7 @@
        this.headerRenderer = headerRenderer;
        this.cellRenderer = cellRenderer;
 
+       this.classList.add('resize-table');
        this.style.tableLayout = 'auto';
        this.style.width = '100%';
 
@@ -24806,12 +24413,19 @@
      closeElement.focus();
    }
 
+   function closePopup () {
+     const wrapperElement = document.getElementById('popup-wrapper');
+     if (wrapperElement) {
+       document.body.removeChild(wrapperElement);
+       return true
+     }
+     return false
+   }
+
    document.addEventListener('keydown', (event) => {
      if (event.code === 'Escape') {
-       const wrapperElement = document.getElementById('popup-wrapper');
-       if (wrapperElement) {
+       if (closePopup()) {
          event.preventDefault();
-         document.body.removeChild(wrapperElement);
        }
      } else if (event.code === 'Tab') {
        const wrapperElement = document.getElementById('popup-wrapper');
@@ -24870,9 +24484,10 @@
 
    function init (parent, onSubmit, onShiftSubmit) {
      addEventListener('#query-tab-button', 'click', (event) => selectTab(event, 'query'));
+     addEventListener('#graph-tab-button', 'click', (event) => selectTab(event, 'graph'));
      addEventListener('#saved-tab-button', 'click', (event) => selectTab(event, 'saved'));
      addEventListener('#structure-tab-button', 'click', (event) => selectTab(event, 'structure'));
-     addEventListener('#graph-tab-button', 'click', (event) => selectTab(event, 'graph'));
+     addEventListener('#help-tab-button', 'click', (event) => selectTab(event, 'help'));
      addEventListener('#cancel-button', 'click', () => clearResult());
 
      addEventListener('#query-box', 'click', () => {
@@ -25023,14 +24638,24 @@
 
    function focus (selection = null) {
      window.editorView.focus();
-     if (selection) setSelection(selection);
+     if (selection) {
+       setSelection(selection);
+     }
    }
 
-   function getValue () {
+   function getEditorValue () {
      return window.editorView.state.doc.toString()
    }
 
-   function setValue (value) {
+   function isLastEditorValueSet (value) {
+     return window.lastEditorValueSet === value
+   }
+
+   function setEditorValue (value) {
+     window.lastEditorValueSet = value;
+     if (getEditorValue() === value) {
+       return
+     }
      window.editorView.dispatch({
        changes: {
          from: 0,
@@ -25046,7 +24671,7 @@
 
    function getTabFromUrl (url) {
      const match = url.pathname.match(/\/([^/]+)$/);
-     if (match && ['query', 'graph', 'structure', 'saved'].includes(match[1])) {
+     if (match && ['query', 'graph', 'saved', 'structure', 'help'].includes(match[1])) {
        return match[1]
      } else {
        throw new Error(`invalid tab: ${url.pathname}`)
@@ -25055,14 +24680,16 @@
 
    function updateTabs () {
      const url = new URL(window.location);
+     setActionInUrl(url, 'query');
+     document.getElementById('query-tab-button').href = url.pathname + url.search;
      setActionInUrl(url, 'graph');
      document.getElementById('graph-tab-button').href = url.pathname + url.search;
      setActionInUrl(url, 'saved');
      document.getElementById('saved-tab-button').href = url.pathname + url.search;
      setActionInUrl(url, 'structure');
      document.getElementById('structure-tab-button').href = url.pathname + url.search;
-     setActionInUrl(url, 'query');
-     document.getElementById('query-tab-button').href = url.pathname + url.search;
+     setActionInUrl(url, 'help');
+     document.getElementById('help-tab-button').href = url.pathname + url.search;
    }
 
    function selectTab (event, tab) {
@@ -25072,6 +24699,8 @@
    }
 
    function route (target = null, event = null, url = null, internal = false) {
+     closePopup();
+
      if (url) {
        if (event) {
          event.preventDefault();
@@ -25111,7 +24740,7 @@
 
      switch (window.tab) {
        case 'query':
-         selectResultTab(internal);
+         selectQueryTab(internal);
          break
        case 'graph':
          selectGraphTab(internal);
@@ -25122,6 +24751,9 @@
        case 'structure':
          selectStructureTab();
          break
+       case 'help':
+         selectHelpTab();
+         break
        default:
          throw new Error(`Unexpected tab: ${window.tab}`)
      }
@@ -25149,42 +24781,53 @@
        selected.style.display = 'flex';
      });
 
+     const schemaNames = Object.keys(window.metadata.schemas);
+     const schemasElement = document.getElementById('schemas');
+     const tablesElement = document.getElementById('tables');
+     if (schemaNames.length === 1) {
+       setTimeout(() => { tablesElement.focus(); }, 0);
+     } else {
+       setTimeout(() => { schemasElement.focus(); }, 0);
+     }
+
      if (window.structureLoaded) {
        return
      }
 
-     const schemasElement = document.getElementById('schemas');
-     const tablesElement = document.getElementById('tables');
      const statsElement = document.getElementById('stats');
      statsElement.innerHTML = statsHtml(null);
 
      const columnsElement = document.getElementById('columns');
      const indexesElement = document.getElementById('indexes');
 
-     const schemaNames = Object.keys(window.metadata.schemas);
      if (schemaNames.length === 1) {
        schemasElement.style.display = 'none';
        // TODO: duplicate code
-       while (tablesElement.firstChild) {
-         tablesElement.removeChild(tablesElement.firstChild);
-       }
        const schemaName = schemaNames[0];
        const schema = window.metadata.schemas[schemaName];
        const tableNames = Object.keys(schema.tables);
+
        tableNames.forEach(function (tableName) {
          const optionElement = document.createElement('option');
          optionElement.value = tableName;
          optionElement.innerText = tableName;
          tablesElement.appendChild(optionElement);
        });
+       if (tableNames.length > 0) {
+         tablesElement.value = tableNames[0];
+       }
      } else {
        schemasElement.style.display = 'flex';
+
        schemaNames.forEach(function (schemaName) {
          const optionElement = document.createElement('option');
          optionElement.value = schemaName;
          optionElement.innerText = schemaName;
          schemasElement.appendChild(optionElement);
        });
+       if (schemaNames.length > 0) {
+         schemasElement.value = schemaNames[0];
+       }
        schemasElement.addEventListener('change', function () {
          while (statsElement.firstChild) {
            statsElement.removeChild(statsElement.firstChild);
@@ -25202,12 +24845,16 @@
          const schemaName = schemasElement.value;
          const schema = window.metadata.schemas[schemaName];
          const tableNames = Object.keys(schema.tables);
+
          tableNames.forEach(function (tableName) {
            const optionElement = document.createElement('option');
            optionElement.value = tableName;
            optionElement.innerText = tableName;
            tablesElement.appendChild(optionElement);
          });
+         if (tableNames.length > 0) {
+           tablesElement.value = tableNames[0];
+         }
        });
      }
      tablesElement.addEventListener('change', function () {
@@ -25269,6 +24916,20 @@
        }
      });
      window.structureLoaded = true;
+
+     if (schemaNames.length === 1) {
+       setTimeout(() => { tablesElement.focus(); }, 0);
+     } else {
+       setTimeout(() => { schemasElement.focus(); }, 0);
+     }
+
+     tablesElement.dispatchEvent(new Event('change'));
+   }
+
+   function selectHelpTab () {
+     const helpBoxElement = document.getElementById('help-box');
+     helpBoxElement.style.display = 'block';
+     setTimeout(() => { helpBoxElement.focus(); }, 0);
    }
 
    function selectGraphTab (internal) {
@@ -25278,12 +24939,11 @@
      document.getElementById('fetch-sql-box').style.display = 'none';
      document.getElementById('cancel-button').style.visibility = 'hidden';
      updateDownloadButtons(window?.sqlFetch);
-     maybeFetchResult(internal);
-
      focus(getSelection());
+     maybeFetchResult(internal);
    }
 
-   function selectResultTab (internal) {
+   function selectQueryTab (internal) {
      document.getElementById('query-box').style.display = 'flex';
      document.getElementById('submit-box').style.display = 'flex';
      document.getElementById('result-box').style.display = 'flex';
@@ -25299,6 +24959,8 @@
      });
 
      const savedElement = document.getElementById('saved-box');
+     setTimeout(() => { savedElement.focus(); }, 0);
+
      const saved = window.metadata.saved;
      const numFiles = Object.keys(saved).length;
      setStatus(`${numFiles} file${numFiles === 1 ? '' : 's'}`);
@@ -25332,7 +24994,6 @@
        runLinkElement.href = runUrl.pathname + runUrl.search;
        addEventListener(runLinkElement, 'click', (event) => {
          clearResult();
-         route(event.target, event, viewUrl, true);
          route(event.target, event, runUrl, true);
        });
 
@@ -25375,15 +25036,18 @@
      if (!target || !event) {
        throw new Error('you must specify target and event')
      }
-     clearResult();
+
+     window.lastSetSelectionValueFromUrlParam = null;
+     window.lastEditorValueSet = null;
+
      const url = new URL(window.location);
-     let sql = getValue().trim();
+     let sql = getEditorValue().trim();
      sql = sql === '' ? null : sql;
 
      url.searchParams.set('run', 'true');
 
      if (url.searchParams.has('file')) {
-       if (window.metadata.saved[url.searchParams.get('file')].contents !== getValue()) {
+       if (window.metadata.saved[url.searchParams.get('file')].contents !== getEditorValue()) {
          url.searchParams.delete('file');
          url.searchParams.set('sql', sql);
        }
@@ -25563,18 +25227,36 @@
      const hasSqluiReferrer = document.referrer && new URL(document.referrer).origin === url.origin;
      const variables = parseSqlVariables(params);
 
+     if (params.has('file') && params.has('sql')) {
+       // TODO: show an error.
+       throw new Error('You can only specify a file or sql, not both.')
+     }
+
      // Only allow auto-run if coming from another SQLUI page. The idea here is to let the app link to URLs with run=true
      // but not other apps. This allows meta/shift-clicking to run a query.
-     let run = false;
      if (params.has('run')) {
-       run = (internal || hasSqluiReferrer) && ['1', 'true'].includes(params.get('run')?.toLowerCase());
        url.searchParams.delete('run');
        window.history.replaceState({}, '', url);
-     }
+       clearResult();
 
-     if (params.has('file') && params.has('sql')) {
-       // TODO: show an error.
-       throw new Error('You can only specify a file or sql, not both.')
+       if (!internal && !hasSqluiReferrer) {
+         throw new Error('run only allowed for internal usage')
+       }
+
+       if (params.has('sql') || params.has('file')) {
+         const sqlFetch = buildSqlFetch(sql, file, variables, selection);
+         setEditorValue(sqlFetch.sql);
+         if (params.has('selection')) {
+           window.lastSetSelectionValueFromUrlParam = selection;
+           focus(selection);
+         } else {
+           window.lastSetSelectionValueFromUrlParam = null;
+         }
+         fetchSql(sqlFetch);
+         return
+       } else {
+         throw new Error('run param specified without sql or file')
+       }
      }
 
      const existingRequest = window.sqlFetch;
@@ -25586,7 +25268,7 @@
        const queryMatches = sqlMatches || fileMatches;
        if (selectionMatches && queryMatches && variablesMatch) {
          displaySqlFetch(existingRequest);
-         if (params.has('selection')) {
+         if (params.has('selection') && window.lastSetSelectionValueFromUrlParam !== selection) {
            focus(selection);
          }
          return
@@ -25596,13 +25278,12 @@
      clearResult();
 
      const sqlFetch = buildSqlFetch(sql, file, variables, selection);
-     if (params.has('sql') || params.has('file')) {
-       setValue(sqlFetch.sql);
-       if (run) {
-         fetchSql(sqlFetch);
-       }
+     if ((params.has('sql') || params.has('file')) && !isLastEditorValueSet(sqlFetch.sql)) {
+       setEditorValue(sqlFetch.sql);
      }
-     if (params.has('selection')) {
+
+     if (params.has('selection') && window.lastSetSelectionValueFromUrlParam !== selection) {
+       window.lastSetSelectionValueFromUrlParam = selection;
        focus(selection);
      }
    }
@@ -25784,7 +25465,7 @@
              const row = parseInt(node.dataset.row);
              const column = parseInt(node.dataset.column);
              const title = window.sqlFetch.result.columns[column].replaceAll('\n', '¶');
-             if (event.metaKey) {
+             if (event.metaKey || event.ctrlKey) {
                createPopup(title, window.sqlFetch.result.rows[row][column]);
              } else if (event.altKey) {
                copyTextToClipboard(window.sqlFetch.result.rows[row][column]);
@@ -26009,8 +25690,38 @@
    });
 
    document.addEventListener('keydown', (event) => {
+     if (event.code === 'ControlLeft' || event.code === 'ControlRight') {
+       Array.prototype.forEach.call(document.getElementsByClassName('keyboard-shortcut-indicator'), function (selected) {
+         selected.style.visibility = 'visible';
+       });
+     }
+
      if (event.code === 'Escape') {
        focus();
+       return
+     }
+
+     const isMac = navigator.userAgent.includes('Mac');
+     if (isMac && event.code === 'Digit0' && event.ctrlKey) {
+       document.getElementById('header-link').click();
+     } else if (isMac && event.code === 'Digit1' && event.ctrlKey) {
+       selectTab(event, 'query');
+     } else if (isMac && event.code === 'Digit2' && event.ctrlKey) {
+       selectTab(event, 'graph');
+     } else if (isMac && event.code === 'Digit3' && event.ctrlKey) {
+       selectTab(event, 'saved');
+     } else if (isMac && event.code === 'Digit4' && event.ctrlKey) {
+       selectTab(event, 'structure');
+     } else if (isMac && event.code === 'Digit5' && event.ctrlKey) {
+       selectTab(event, 'help');
+     }
+   });
+
+   document.addEventListener('keyup', (event) => {
+     if ((event.code === 'ControlLeft' || event.code === 'ControlRight') && !event.ctrlKey) {
+       Array.prototype.forEach.call(document.getElementsByClassName('keyboard-shortcut-indicator'), function (selected) {
+         selected.style.visibility = 'hidden';
+       });
      }
    });