sqlui 0.1.66 → 0.1.68

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 };
            });
@@ -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();
@@ -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) {
@@ -14943,45 +15064,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 +15127,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 +15183,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 +15242,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 +15257,7 @@
                            break;
                        let next = part[pos++];
                        if (pos == part.length && next == "!") {
-                           mode = 0 /* Mode.Opaque */;
+                           mode = 0 /* Opaque */;
                            break;
                        }
                        if (next != "/")
@@ -15142,8 +15281,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 +15293,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 +15335,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 +15390,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 +15437,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 +15450,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 +15937,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 +15978,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 +16054,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 +16103,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 +16557,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 +16588,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;
    }
    /**
@@ -17307,7 +17650,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 +17683,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 +17765,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 +18253,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 +18414,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,9 +19435,6 @@
    `-`, 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);
@@ -19261,7 +19621,8 @@
                caseSensitive: false,
                literal: false,
                wholeWord: false,
-               createPanel: view => new SearchPanel(view)
+               createPanel: view => new SearchPanel(view),
+               scrollToMatch: range => EditorView.scrollIntoView(range)
            });
        }
    });
@@ -19519,10 +19880,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 +19896,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 +19954,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;
@@ -19990,9 +20352,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 +20462,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 +20529,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)
@@ -21555,7 +21925,8 @@
        }
        update(update) {
            let config = update.state.facet(lintConfig);
-           if (update.docChanged || config != update.startState.facet(lintConfig)) {
+           if (update.docChanged || config != update.startState.facet(lintConfig) ||
+               config.needsRefresh && config.needsRefresh(update)) {
                this.lintTime = Date.now() + config.delay;
                if (!this.set) {
                    this.set = true;
@@ -21578,7 +21949,10 @@
            return Object.assign({ sources: input.map(i => i.source) }, combineConfig(input.map(i => i.config), {
                delay: 750,
                markerFilter: null,
-               tooltipFilter: null
+               tooltipFilter: null,
+               needsRefresh: null
+           }, {
+               needsRefresh: (a, b) => !a ? b : !b ? a : u => a(u) || b(u)
            }));
        },
        enables: lintPlugin
@@ -21602,8 +21976,11 @@
        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) => {
+           let fired = false, click = (e) => {
                e.preventDefault();
+               if (fired)
+                   return;
+               fired = true;
                let found = findDiagnostic(view.state.field(lintState).diagnostics, diagnostic);
                if (found)
                    action.apply(view, found.from, found.to);
@@ -21830,7 +22207,8 @@
            backgroundColor: "#444",
            color: "white",
            borderRadius: "3px",
-           marginLeft: "8px"
+           marginLeft: "8px",
+           cursor: "pointer"
        },
        ".cm-diagnosticSource": {
            fontSize: "70%",
@@ -24535,6 +24913,7 @@
        this.headerRenderer = headerRenderer;
        this.cellRenderer = cellRenderer;
 
+       this.classList.add('resize-table');
        this.style.tableLayout = 'auto';
        this.style.width = '100%';
 
@@ -24870,9 +25249,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', () => {
@@ -25046,7 +25426,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 +25435,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) {
@@ -25122,11 +25504,31 @@
        case 'structure':
          selectStructureTab();
          break
+       case 'help':
+         selectHelpTab();
+         break
        default:
          throw new Error(`Unexpected tab: ${window.tab}`)
      }
    }
 
+   function statsHtml (info) {
+     const hidden = info == null;
+     info ||= {};
+     return `
+      <table ${hidden ? 'style="visibility: hidden;"' : ''}>
+        <tr><td>created:</td><td>${valueOrNullHtml(info.created_at)}</td></tr>
+        <tr><td>updated:</td><td>${valueOrNullHtml(info.updated_at)}</td></tr>
+        <tr><td>data size:</td><td>${valueOrNullHtml(info.data_size)}</td></tr>
+        <tr><td>index size:</td><td>${valueOrNullHtml(info.index_size)}</td></tr>
+        <tr><td>rows:</td><td>${valueOrNullHtml(info.rows)}</td></tr>
+        <tr><td>row size:</td><td>${valueOrNullHtml(info.average_row_size)}</td></tr>
+        <tr><td>encoding:</td><td>${valueOrNullHtml(info.encoding)}</td></tr>
+        <tr><td>auto increment:</td><td>${valueOrNullHtml(info.auto_increment)}</td></tr>
+      </table>
+    `
+   }
+
    function selectStructureTab () {
      Array.prototype.forEach.call(document.getElementsByClassName('structure-element'), function (selected) {
        selected.style.display = 'flex';
@@ -25138,6 +25540,9 @@
 
      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');
 
@@ -25166,6 +25571,10 @@
          schemasElement.appendChild(optionElement);
        });
        schemasElement.addEventListener('change', function () {
+         while (statsElement.firstChild) {
+           statsElement.removeChild(statsElement.firstChild);
+         }
+         statsElement.innerHTML = statsHtml(null);
          while (tablesElement.firstChild) {
            tablesElement.removeChild(tablesElement.firstChild);
          }
@@ -25187,6 +25596,9 @@
        });
      }
      tablesElement.addEventListener('change', function () {
+       while (statsElement.firstChild) {
+         statsElement.removeChild(statsElement.firstChild);
+       }
        while (columnsElement.firstChild) {
          columnsElement.removeChild(columnsElement.firstChild);
        }
@@ -25196,7 +25608,9 @@
        const schemaName = schemaNames.length === 1 ? schemaNames[0] : schemasElement.value;
        const tableName = tablesElement.value;
        const table = window.metadata.schemas[schemaName].tables[tableName];
+       const info = table.info;
 
+       statsElement.innerHTML = statsHtml(info);
        const columnEntries = Object.entries(table.columns);
        if (columnEntries.length > 0) {
          const columns = Object.keys(columnEntries[0][1]);
@@ -25242,6 +25656,10 @@
      window.structureLoaded = true;
    }
 
+   function selectHelpTab () {
+     document.getElementById('help-box').style.display = 'block';
+   }
+
    function selectGraphTab (internal) {
      document.getElementById('query-box').style.display = 'flex';
      document.getElementById('submit-box').style.display = 'flex';
@@ -25284,7 +25702,7 @@
        viewUrl.searchParams.set('file', file.filename);
 
        const viewLinkElement = document.createElement('a');
-       viewLinkElement.classList.add('view-link');
+       viewLinkElement.classList.add('link', 'view-link');
        viewLinkElement.innerText = 'view';
        viewLinkElement.href = viewUrl.pathname + viewUrl.search;
        addEventListener(viewLinkElement, 'click', (event) => {
@@ -25298,7 +25716,7 @@
        runUrl.searchParams.set('run', 'true');
 
        const runLinkElement = document.createElement('a');
-       runLinkElement.classList.add('run-link');
+       runLinkElement.classList.add('link', 'run-link');
        runLinkElement.innerText = 'run';
        runLinkElement.href = runUrl.pathname + runUrl.search;
        addEventListener(runLinkElement, 'click', (event) => {
@@ -25309,25 +25727,31 @@
 
        const nameElement = document.createElement('h2');
        nameElement.innerText = file.filename;
+       nameElement.classList.add('name');
 
-       const nameAndLinksElement = document.createElement('div');
-       nameAndLinksElement.classList.add('name-and-links');
-       nameAndLinksElement.appendChild(nameElement);
-       nameAndLinksElement.appendChild(viewLinkElement);
-       nameAndLinksElement.appendChild(runLinkElement);
+       const linksElement = document.createElement('div');
+       linksElement.classList.add('links');
+       linksElement.appendChild(viewLinkElement);
+       linksElement.appendChild(runLinkElement);
 
        const descriptionElement = document.createElement('p');
        descriptionElement.innerText = file.description;
+       descriptionElement.classList.add('description');
 
        const divElement = document.createElement('div');
        divElement.classList.add('saved-list-item');
-       divElement.appendChild(nameAndLinksElement);
+       divElement.appendChild(nameElement);
+       divElement.appendChild(linksElement);
        divElement.appendChild(descriptionElement);
 
        savedElement.appendChild(divElement);
      });
    }
 
+   function valueOrNullHtml (value) {
+     return value == null ? '<span style="color: #888">null</span>' : value
+   }
+
    function submitAll (target, event) {
      submit(target, event);
    }
@@ -25973,6 +26397,12 @@
      }
    });
 
+   document.addEventListener('keydown', (event) => {
+     if (event.code === 'Escape') {
+       focus();
+     }
+   });
+
    window.onload = function () {
      Promise.all([
        google.charts.load('current', { packages: ['corechart', 'line'] }),