@codemirror/view 6.5.0 → 6.6.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 6.6.0 (2022-11-24)
+
+### New features
+
+The `layer` function can now be used to define extensions that draw DOM elements over or below the document text.
+
+Tooltips that are bigger than the available vertical space for them will now have their height set so that they don't stick out of the window. The new `resize` property on `TooltipView` can be used to opt out of this behavior.
+
+## 6.5.1 (2022-11-15)
+
+### Bug fixes
+
+Fix a bug that caused marked unnecessary splitting of mark decoration DOM elements in some cases.
+
 ## 6.5.0 (2022-11-14)
 
 ### Bug fixes

package/dist/index.cjs

@@ -1669,7 +1669,7 @@ class ContentBuilder {
                 }
             }
             let take = Math.min(this.text.length - this.textOff, length, 512 /* T.Chunk */);
-            this.flushBuffer(active.slice(0, openStart));
+            this.flushBuffer(active.slice(active.length - openStart));
             this.getLine().append(wrapMarks(new TextView(this.text.slice(this.textOff, this.textOff + take)), active), openStart);
             this.atCursorPos = true;
             this.textOff += take;
@@ -5313,14 +5313,13 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
     "&dark .cm-content": { caretColor: "white" },
     ".cm-line": {
         display: "block",
-        padding: "0 2px 0 4px"
+        padding: "0 2px 0 6px"
     },
-    ".cm-selectionLayer": {
-        zIndex: -1,
-        contain: "size style"
-    },
-    ".cm-selectionBackground": {
-        position: "absolute",
+    ".cm-layer": {
+        contain: "size style",
+        "& > *": {
+            position: "absolute"
+        }
     },
     "&light .cm-selectionBackground": {
         background: "#d9d9d9"
@@ -5335,8 +5334,6 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
         background: "#233"
     },
     ".cm-cursorLayer": {
-        zIndex: 100,
-        contain: "size style",
         pointerEvents: "none"
     },
     "&.cm-focused .cm-cursorLayer": {
@@ -5348,7 +5345,6 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
     "@keyframes cm-blink": { "0%": {}, "50%": { opacity: 0 }, "100%": {} },
     "@keyframes cm-blink2": { "0%": {}, "50%": { opacity: 0 }, "100%": {} },
     ".cm-cursor, .cm-dropCursor": {
-        position: "absolute",
         borderLeft: "1.2px solid black",
         marginLeft: "-0.6px",
         pointerEvents: "none",
@@ -7294,6 +7290,117 @@ function runHandlers(map, event, view, scope) {
     return fallthrough;
 }
 
+/**
+Implementation of [`LayerMarker`](https://codemirror.net/6/docs/ref/#view.LayerMarker) that creates
+a rectangle at a given set of coordinates.
+*/
+class RectangleMarker {
+    /**
+    Create a marker with the given class and dimensions.
+    */
+    constructor(className, left, top, width, height) {
+        this.className = className;
+        this.left = left;
+        this.top = top;
+        this.width = width;
+        this.height = height;
+    }
+    draw() {
+        let elt = document.createElement("div");
+        elt.className = this.className;
+        this.adjust(elt);
+        return elt;
+    }
+    update(elt, prev) {
+        if (prev.className != this.className)
+            return false;
+        this.adjust(elt);
+        return true;
+    }
+    adjust(elt) {
+        elt.style.left = this.left + "px";
+        elt.style.top = this.top + "px";
+        if (this.width >= 0)
+            elt.style.width = this.width + "px";
+        elt.style.height = this.height + "px";
+    }
+    eq(p) {
+        return this.left == p.left && this.top == p.top && this.width == p.width && this.height == p.height &&
+            this.className == p.className;
+    }
+}
+function sameMarker(a, b) {
+    return a.constructor == b.constructor && a.eq(b);
+}
+class LayerView {
+    constructor(view, layer) {
+        this.view = view;
+        this.layer = layer;
+        this.drawn = [];
+        this.measureReq = { read: this.measure.bind(this), write: this.draw.bind(this) };
+        this.dom = view.scrollDOM.appendChild(document.createElement("div"));
+        this.dom.classList.add("cm-layer");
+        if (layer.above)
+            this.dom.classList.add("cm-layer-above");
+        if (layer.class)
+            this.dom.classList.add(layer.class);
+        this.dom.setAttribute("aria-hidden", "true");
+        this.setOrder(view.state);
+        view.requestMeasure(this.measureReq);
+        if (layer.mount)
+            layer.mount(this.dom, view);
+    }
+    update(update) {
+        if (update.startState.facet(layerOrder) != update.state.facet(layerOrder))
+            this.setOrder(update.state);
+        if (this.layer.update(update, this.dom) || update.geometryChanged)
+            update.view.requestMeasure(this.measureReq);
+    }
+    setOrder(state) {
+        let pos = 0, order = state.facet(layerOrder);
+        while (pos < order.length && order[pos] != this.layer)
+            pos++;
+        this.dom.style.zIndex = String((this.layer.above ? 150 : -1) - pos);
+    }
+    measure() {
+        return this.layer.markers(this.view);
+    }
+    draw(markers) {
+        if (markers.length != this.drawn.length || markers.some((p, i) => !sameMarker(p, this.drawn[i]))) {
+            let old = this.dom.firstChild, oldI = 0;
+            for (let marker of markers) {
+                if (marker.update && old && marker.constructor && this.drawn[oldI].constructor &&
+                    marker.update(old, this.drawn[oldI])) {
+                    old = old.nextSibling;
+                    oldI++;
+                }
+                else {
+                    this.dom.insertBefore(marker.draw(), old);
+                }
+            }
+            while (old) {
+                let next = old.nextSibling;
+                old.remove();
+                old = next;
+            }
+            this.drawn = markers;
+        }
+    }
+    destroy() {
+        this.dom.remove();
+    }
+}
+const layerOrder = state.Facet.define();
+/**
+Define a layer.
+*/
+function layer(config) {
+    return [
+        ViewPlugin.define(v => new LayerView(v, config)),
+        layerOrder.of(config)
+    ];
+}
+
 const CanHidePrimary = !browser.ios; // FIXME test IE
 const selectionConfig = state.Facet.define({
     combine(configs) {
@@ -7327,102 +7434,55 @@ content).
 function drawSelection(config = {}) {
     return [
         selectionConfig.of(config),
-        drawSelectionPlugin,
+        cursorLayer,
+        selectionLayer,
         hideNativeSelection,
         nativeSelectionHidden.of(true)
     ];
 }
-class Piece {
-    constructor(left, top, width, height, className) {
-        this.left = left;
-        this.top = top;
-        this.width = width;
-        this.height = height;
-        this.className = className;
-    }
-    draw() {
-        let elt = document.createElement("div");
-        elt.className = this.className;
-        this.adjust(elt);
-        return elt;
-    }
-    adjust(elt) {
-        elt.style.left = this.left + "px";
-        elt.style.top = this.top + "px";
-        if (this.width >= 0)
-            elt.style.width = this.width + "px";
-        elt.style.height = this.height + "px";
-    }
-    eq(p) {
-        return this.left == p.left && this.top == p.top && this.width == p.width && this.height == p.height &&
-            this.className == p.className;
-    }
+function configChanged(update) {
+    return update.startState.facet(selectionConfig) != update.startState.facet(selectionConfig);
 }
-const drawSelectionPlugin = ViewPlugin.fromClass(class {
-    constructor(view) {
-        this.view = view;
-        this.rangePieces = [];
-        this.cursors = [];
-        this.measureReq = { read: this.readPos.bind(this), write: this.drawSel.bind(this) };
-        this.selectionLayer = view.scrollDOM.appendChild(document.createElement("div"));
-        this.selectionLayer.className = "cm-selectionLayer";
-        this.selectionLayer.setAttribute("aria-hidden", "true");
-        this.cursorLayer = view.scrollDOM.appendChild(document.createElement("div"));
-        this.cursorLayer.className = "cm-cursorLayer";
-        this.cursorLayer.setAttribute("aria-hidden", "true");
-        view.requestMeasure(this.measureReq);
-        this.setBlinkRate();
-    }
-    setBlinkRate() {
-        this.cursorLayer.style.animationDuration = this.view.state.facet(selectionConfig).cursorBlinkRate + "ms";
-    }
-    update(update) {
-        let confChanged = update.startState.facet(selectionConfig) != update.state.facet(selectionConfig);
-        if (confChanged || update.selectionSet || update.geometryChanged || update.viewportChanged)
-            this.view.requestMeasure(this.measureReq);
-        if (update.transactions.some(tr => tr.scrollIntoView))
-            this.cursorLayer.style.animationName = this.cursorLayer.style.animationName == "cm-blink" ? "cm-blink2" : "cm-blink";
-        if (confChanged)
-            this.setBlinkRate();
-    }
-    readPos() {
-        let { state } = this.view, conf = state.facet(selectionConfig);
-        let rangePieces = state.selection.ranges.map(r => r.empty ? [] : measureRange(this.view, r)).reduce((a, b) => a.concat(b));
+const cursorLayer = layer({
+    above: true,
+    markers(view) {
+        let { state } = view, conf = state.facet(selectionConfig);
         let cursors = [];
         for (let r of state.selection.ranges) {
             let prim = r == state.selection.main;
             if (r.empty ? !prim || CanHidePrimary : conf.drawRangeCursor) {
-                let piece = measureCursor(this.view, r, prim);
+                let piece = measureCursor(view, r, prim);
                 if (piece)
                     cursors.push(piece);
             }
         }
-        return { rangePieces, cursors };
-    }
-    drawSel({ rangePieces, cursors }) {
-        if (rangePieces.length != this.rangePieces.length || rangePieces.some((p, i) => !p.eq(this.rangePieces[i]))) {
-            this.selectionLayer.textContent = "";
-            for (let p of rangePieces)
-                this.selectionLayer.appendChild(p.draw());
-            this.rangePieces = rangePieces;
-        }
-        if (cursors.length != this.cursors.length || cursors.some((c, i) => !c.eq(this.cursors[i]))) {
-            let oldCursors = this.cursorLayer.children;
-            if (oldCursors.length !== cursors.length) {
-                this.cursorLayer.textContent = "";
-                for (const c of cursors)
-                    this.cursorLayer.appendChild(c.draw());
-            }
-            else {
-                cursors.forEach((c, idx) => c.adjust(oldCursors[idx]));
-            }
-            this.cursors = cursors;
-        }
-    }
-    destroy() {
-        this.selectionLayer.remove();
-        this.cursorLayer.remove();
-    }
+        return cursors;
+    },
+    update(update, dom) {
+        if (update.transactions.some(tr => tr.scrollIntoView))
+            dom.style.animationName = dom.style.animationName == "cm-blink" ? "cm-blink2" : "cm-blink";
+        let confChange = configChanged(update);
+        if (confChange)
+            setBlinkRate(update.state, dom);
+        return update.docChanged || update.selectionSet || confChange;
+    },
+    mount(dom, view) {
+        setBlinkRate(view.state, dom);
+    },
+    class: "cm-cursorLayer"
+});
+function setBlinkRate(state, dom) {
+    dom.style.animationDuration = state.facet(selectionConfig).cursorBlinkRate + "ms";
+}
+const selectionLayer = layer({
+    above: false,
+    markers(view) {
+        return view.state.selection.ranges.map(r => r.empty ? [] : measureRange(view, r)).reduce((a, b) => a.concat(b));
+    },
+    update(update, dom) {
+        return update.docChanged || update.selectionSet || update.viewportChanged || configChanged(update);
+    },
+    class: "cm-selectionLayer"
 });
 const themeSpec = {
     ".cm-line": {
@@ -7485,7 +7545,7 @@ function measureRange(view, range) {
         return pieces(top).concat(between).concat(pieces(bottom));
     }
     function piece(left, top, right, bottom) {
-        return new Piece(left - base.left, top - base.top - 0.01 /* C.Epsilon */, right - left, bottom - top + 0.01 /* C.Epsilon */, "cm-selectionBackground");
+        return new RectangleMarker("cm-selectionBackground", left - base.left, top - base.top - 0.01 /* C.Epsilon */, right - left, bottom - top + 0.01 /* C.Epsilon */);
     }
     function pieces({ top, bottom, horizontal }) {
         let pieces = [];
@@ -7542,7 +7602,7 @@ function measureCursor(view, cursor, primary) {
     if (!pos)
         return null;
     let base = getBase(view);
-    return new Piece(pos.left - base.left, pos.top - base.top, -1, pos.bottom - pos.top, primary ? "cm-cursor cm-cursor-primary" : "cm-cursor cm-cursor-secondary");
+    return new RectangleMarker(primary ? "cm-cursor cm-cursor-primary" : "cm-cursor cm-cursor-secondary", pos.left - base.left, pos.top - base.top, -1, pos.bottom - pos.top);
 }
 
 const setDropCursorPos = state.StateEffect.define({
@@ -8336,6 +8396,17 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
                 : pos.bottom + (size.bottom - size.top) + offset.y > space.bottom) &&
                 above == (space.bottom - pos.bottom > pos.top - space.top))
                 above = !above;
+            let spaceVert = (above ? pos.top - space.top : space.bottom - pos.bottom) - arrowHeight;
+            if (spaceVert < height && tView.resize !== false) {
+                if (spaceVert < this.view.defaultLineHeight) {
+                    dom.style.top = Outside;
+                    continue;
+                }
+                dom.style.height = (height = spaceVert) + "px";
+            }
+            else if (dom.style.height) {
+                dom.style.height = "";
+            }
             let top = above ? pos.top - height - arrowHeight - offset.y : pos.bottom + arrowHeight + offset.y;
             let right = left + width;
             if (tView.overlap !== true)
@@ -8379,7 +8450,8 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
 });
 const baseTheme = EditorView.baseTheme({
     ".cm-tooltip": {
-        zIndex: 100
+        zIndex: 100,
+        boxSizing: "border-box"
     },
     "&light .cm-tooltip": {
         border: "1px solid #bbb",
@@ -9309,6 +9381,7 @@ exports.Decoration = Decoration;
 exports.EditorView = EditorView;
 exports.GutterMarker = GutterMarker;
 exports.MatchDecorator = MatchDecorator;
+exports.RectangleMarker = RectangleMarker;
 exports.ViewPlugin = ViewPlugin;
 exports.ViewUpdate = ViewUpdate;
 exports.WidgetType = WidgetType;
@@ -9328,6 +9401,7 @@ exports.highlightActiveLineGutter = highlightActiveLineGutter;
 exports.highlightSpecialChars = highlightSpecialChars;
 exports.hoverTooltip = hoverTooltip;
 exports.keymap = keymap;
+exports.layer = layer;
 exports.lineNumberMarkers = lineNumberMarkers;
 exports.lineNumbers = lineNumbers;
 exports.logException = logException;

package/dist/index.d.ts

@@ -1366,6 +1366,80 @@ to show when the editor is empty.
 */
 declare function placeholder(content: string | HTMLElement): Extension;
 
+/**
+Markers shown in a [layer](https://codemirror.net/6/docs/ref/#view.layer) must conform to this
+interface. They are created in a measuring phase, and have to
+contain all their positioning information, so that they can be
+drawn without further DOM layout reading.
+
+Markers are automatically absolutely positioned. Their parent
+element has the same top-left corner as the document, so they
+should be positioned relative to the document.
+*/
+interface LayerMarker {
+    /**
+    Compare this marker to a marker of the same type. Used to avoid
+    unnecessary redraws.
+    */
+    eq(other: LayerMarker): boolean;
+    /**
+    Draw the marker to the DOM.
+    */
+    draw(): HTMLElement;
+    /**
+    Update an existing marker of this type to this marker.
+    */
+    update?(dom: HTMLElement, oldMarker: LayerMarker): boolean;
+}
+/**
+Implementation of [`LayerMarker`](https://codemirror.net/6/docs/ref/#view.LayerMarker) that creates
+a rectangle at a given set of coordinates.
+*/
+declare class RectangleMarker implements LayerMarker {
+    private className;
+    private left;
+    private top;
+    private width;
+    private height;
+    /**
+    Create a marker with the given class and dimensions.
+    */
+    constructor(className: string, left: number, top: number, width: number, height: number);
+    draw(): HTMLDivElement;
+    update(elt: HTMLElement, prev: RectangleMarker): boolean;
+    private adjust;
+    eq(p: RectangleMarker): boolean;
+}
+interface LayerConfig {
+    /**
+    Determines whether this layer is shown above or below the text.
+    */
+    above: boolean;
+    /**
+    When given, this class is added to the DOM element that will
+    wrap the markers.
+    */
+    class?: string;
+    /**
+    Called on every view update. Returning true triggers a marker
+    update (a call to `markers` and drawing of those markers).
+    */
+    update(update: ViewUpdate, layer: HTMLElement): boolean;
+    /**
+    Build a set of markers for this layer, and measure their
+    dimensions.
+    */
+    markers(view: EditorView): readonly LayerMarker[];
+    /**
+    If given, this is called when the layer is created.
+    */
+    mount?(layer: HTMLElement, view: EditorView): void;
+}
+/**
+Define a layer.
+*/
+declare function layer(config: LayerConfig): Extension;
+
 /**
 Helper class used to make it easier to maintain decorations on
 visible code that matches a given regular expression. To be used
@@ -1584,6 +1658,12 @@ interface TooltipView {
     tooltip.
     */
     positioned?(space: Rect): void;
+    /**
+    By default, the library will restrict the size of tooltips so
+    that they don't stick out of the available space. Set this to
+    false to disable that.
+    */
+    resize?: boolean;
 }
 /**
 Facet to which an extension can add a value to show a tooltip.
@@ -1820,4 +1900,4 @@ line](https://codemirror.net/6/docs/ref/#view.highlightActiveLine).
 */
 declare function highlightActiveLineGutter(): Extension;
 
-export { BidiSpan, BlockInfo, BlockType, Command, DOMEventHandlers, DOMEventMap, Decoration, DecorationSet, Direction, EditorView, EditorViewConfig, GutterMarker, KeyBinding, MatchDecorator, MouseSelectionStyle, Panel, PanelConstructor, PluginSpec, PluginValue, Rect, Tooltip, TooltipView, ViewPlugin, ViewUpdate, WidgetType, closeHoverTooltips, crosshairCursor, drawSelection, dropCursor, getPanel, getTooltip, gutter, gutterLineClass, gutters, hasHoverTooltips, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, hoverTooltip, keymap, lineNumberMarkers, lineNumbers, logException, panels, placeholder, rectangularSelection, repositionTooltips, runScopeHandlers, scrollPastEnd, showPanel, showTooltip, tooltips };
+export { BidiSpan, BlockInfo, BlockType, Command, DOMEventHandlers, DOMEventMap, Decoration, DecorationSet, Direction, EditorView, EditorViewConfig, GutterMarker, KeyBinding, LayerMarker, MatchDecorator, MouseSelectionStyle, Panel, PanelConstructor, PluginSpec, PluginValue, Rect, RectangleMarker, Tooltip, TooltipView, ViewPlugin, ViewUpdate, WidgetType, closeHoverTooltips, crosshairCursor, drawSelection, dropCursor, getPanel, getTooltip, gutter, gutterLineClass, gutters, hasHoverTooltips, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, hoverTooltip, keymap, layer, lineNumberMarkers, lineNumbers, logException, panels, placeholder, rectangularSelection, repositionTooltips, runScopeHandlers, scrollPastEnd, showPanel, showTooltip, tooltips };

package/dist/index.js

@@ -1664,7 +1664,7 @@ class ContentBuilder {
                 }
             }
             let take = Math.min(this.text.length - this.textOff, length, 512 /* T.Chunk */);
-            this.flushBuffer(active.slice(0, openStart));
+            this.flushBuffer(active.slice(active.length - openStart));
             this.getLine().append(wrapMarks(new TextView(this.text.slice(this.textOff, this.textOff + take)), active), openStart);
             this.atCursorPos = true;
             this.textOff += take;
@@ -5306,14 +5306,13 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     "&dark .cm-content": { caretColor: "white" },
     ".cm-line": {
         display: "block",
-        padding: "0 2px 0 4px"
+        padding: "0 2px 0 6px"
     },
-    ".cm-selectionLayer": {
-        zIndex: -1,
-        contain: "size style"
-    },
-    ".cm-selectionBackground": {
-        position: "absolute",
+    ".cm-layer": {
+        contain: "size style",
+        "& > *": {
+            position: "absolute"
+        }
     },
     "&light .cm-selectionBackground": {
         background: "#d9d9d9"
@@ -5328,8 +5327,6 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
         background: "#233"
     },
     ".cm-cursorLayer": {
-        zIndex: 100,
-        contain: "size style",
         pointerEvents: "none"
     },
     "&.cm-focused .cm-cursorLayer": {
@@ -5341,7 +5338,6 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     "@keyframes cm-blink": { "0%": {}, "50%": { opacity: 0 }, "100%": {} },
     "@keyframes cm-blink2": { "0%": {}, "50%": { opacity: 0 }, "100%": {} },
     ".cm-cursor, .cm-dropCursor": {
-        position: "absolute",
         borderLeft: "1.2px solid black",
         marginLeft: "-0.6px",
         pointerEvents: "none",
@@ -7287,6 +7283,117 @@ function runHandlers(map, event, view, scope) {
     return fallthrough;
 }
 
+/**
+Implementation of [`LayerMarker`](https://codemirror.net/6/docs/ref/#view.LayerMarker) that creates
+a rectangle at a given set of coordinates.
+*/
+class RectangleMarker {
+    /**
+    Create a marker with the given class and dimensions.
+    */
+    constructor(className, left, top, width, height) {
+        this.className = className;
+        this.left = left;
+        this.top = top;
+        this.width = width;
+        this.height = height;
+    }
+    draw() {
+        let elt = document.createElement("div");
+        elt.className = this.className;
+        this.adjust(elt);
+        return elt;
+    }
+    update(elt, prev) {
+        if (prev.className != this.className)
+            return false;
+        this.adjust(elt);
+        return true;
+    }
+    adjust(elt) {
+        elt.style.left = this.left + "px";
+        elt.style.top = this.top + "px";
+        if (this.width >= 0)
+            elt.style.width = this.width + "px";
+        elt.style.height = this.height + "px";
+    }
+    eq(p) {
+        return this.left == p.left && this.top == p.top && this.width == p.width && this.height == p.height &&
+            this.className == p.className;
+    }
+}
+function sameMarker(a, b) {
+    return a.constructor == b.constructor && a.eq(b);
+}
+class LayerView {
+    constructor(view, layer) {
+        this.view = view;
+        this.layer = layer;
+        this.drawn = [];
+        this.measureReq = { read: this.measure.bind(this), write: this.draw.bind(this) };
+        this.dom = view.scrollDOM.appendChild(document.createElement("div"));
+        this.dom.classList.add("cm-layer");
+        if (layer.above)
+            this.dom.classList.add("cm-layer-above");
+        if (layer.class)
+            this.dom.classList.add(layer.class);
+        this.dom.setAttribute("aria-hidden", "true");
+        this.setOrder(view.state);
+        view.requestMeasure(this.measureReq);
+        if (layer.mount)
+            layer.mount(this.dom, view);
+    }
+    update(update) {
+        if (update.startState.facet(layerOrder) != update.state.facet(layerOrder))
+            this.setOrder(update.state);
+        if (this.layer.update(update, this.dom) || update.geometryChanged)
+            update.view.requestMeasure(this.measureReq);
+    }
+    setOrder(state) {
+        let pos = 0, order = state.facet(layerOrder);
+        while (pos < order.length && order[pos] != this.layer)
+            pos++;
+        this.dom.style.zIndex = String((this.layer.above ? 150 : -1) - pos);
+    }
+    measure() {
+        return this.layer.markers(this.view);
+    }
+    draw(markers) {
+        if (markers.length != this.drawn.length || markers.some((p, i) => !sameMarker(p, this.drawn[i]))) {
+            let old = this.dom.firstChild, oldI = 0;
+            for (let marker of markers) {
+                if (marker.update && old && marker.constructor && this.drawn[oldI].constructor &&
+                    marker.update(old, this.drawn[oldI])) {
+                    old = old.nextSibling;
+                    oldI++;
+                }
+                else {
+                    this.dom.insertBefore(marker.draw(), old);
+                }
+            }
+            while (old) {
+                let next = old.nextSibling;
+                old.remove();
+                old = next;
+            }
+            this.drawn = markers;
+        }
+    }
+    destroy() {
+        this.dom.remove();
+    }
+}
+const layerOrder = /*@__PURE__*/Facet.define();
+/**
+Define a layer.
+*/
+function layer(config) {
+    return [
+        ViewPlugin.define(v => new LayerView(v, config)),
+        layerOrder.of(config)
+    ];
+}
+
 const CanHidePrimary = !browser.ios; // FIXME test IE
 const selectionConfig = /*@__PURE__*/Facet.define({
     combine(configs) {
@@ -7320,102 +7427,55 @@ content).
 function drawSelection(config = {}) {
     return [
         selectionConfig.of(config),
-        drawSelectionPlugin,
+        cursorLayer,
+        selectionLayer,
         hideNativeSelection,
         nativeSelectionHidden.of(true)
     ];
 }
-class Piece {
-    constructor(left, top, width, height, className) {
-        this.left = left;
-        this.top = top;
-        this.width = width;
-        this.height = height;
-        this.className = className;
-    }
-    draw() {
-        let elt = document.createElement("div");
-        elt.className = this.className;
-        this.adjust(elt);
-        return elt;
-    }
-    adjust(elt) {
-        elt.style.left = this.left + "px";
-        elt.style.top = this.top + "px";
-        if (this.width >= 0)
-            elt.style.width = this.width + "px";
-        elt.style.height = this.height + "px";
-    }
-    eq(p) {
-        return this.left == p.left && this.top == p.top && this.width == p.width && this.height == p.height &&
-            this.className == p.className;
-    }
+function configChanged(update) {
+    return update.startState.facet(selectionConfig) != update.startState.facet(selectionConfig);
 }
-const drawSelectionPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
-    constructor(view) {
-        this.view = view;
-        this.rangePieces = [];
-        this.cursors = [];
-        this.measureReq = { read: this.readPos.bind(this), write: this.drawSel.bind(this) };
-        this.selectionLayer = view.scrollDOM.appendChild(document.createElement("div"));
-        this.selectionLayer.className = "cm-selectionLayer";
-        this.selectionLayer.setAttribute("aria-hidden", "true");
-        this.cursorLayer = view.scrollDOM.appendChild(document.createElement("div"));
-        this.cursorLayer.className = "cm-cursorLayer";
-        this.cursorLayer.setAttribute("aria-hidden", "true");
-        view.requestMeasure(this.measureReq);
-        this.setBlinkRate();
-    }
-    setBlinkRate() {
-        this.cursorLayer.style.animationDuration = this.view.state.facet(selectionConfig).cursorBlinkRate + "ms";
-    }
-    update(update) {
-        let confChanged = update.startState.facet(selectionConfig) != update.state.facet(selectionConfig);
-        if (confChanged || update.selectionSet || update.geometryChanged || update.viewportChanged)
-            this.view.requestMeasure(this.measureReq);
-        if (update.transactions.some(tr => tr.scrollIntoView))
-            this.cursorLayer.style.animationName = this.cursorLayer.style.animationName == "cm-blink" ? "cm-blink2" : "cm-blink";
-        if (confChanged)
-            this.setBlinkRate();
-    }
-    readPos() {
-        let { state } = this.view, conf = state.facet(selectionConfig);
-        let rangePieces = state.selection.ranges.map(r => r.empty ? [] : measureRange(this.view, r)).reduce((a, b) => a.concat(b));
+const cursorLayer = /*@__PURE__*/layer({
+    above: true,
+    markers(view) {
+        let { state } = view, conf = state.facet(selectionConfig);
         let cursors = [];
         for (let r of state.selection.ranges) {
             let prim = r == state.selection.main;
             if (r.empty ? !prim || CanHidePrimary : conf.drawRangeCursor) {
-                let piece = measureCursor(this.view, r, prim);
+                let piece = measureCursor(view, r, prim);
                 if (piece)
                     cursors.push(piece);
             }
         }
-        return { rangePieces, cursors };
-    }
-    drawSel({ rangePieces, cursors }) {
-        if (rangePieces.length != this.rangePieces.length || rangePieces.some((p, i) => !p.eq(this.rangePieces[i]))) {
-            this.selectionLayer.textContent = "";
-            for (let p of rangePieces)
-                this.selectionLayer.appendChild(p.draw());
-            this.rangePieces = rangePieces;
-        }
-        if (cursors.length != this.cursors.length || cursors.some((c, i) => !c.eq(this.cursors[i]))) {
-            let oldCursors = this.cursorLayer.children;
-            if (oldCursors.length !== cursors.length) {
-                this.cursorLayer.textContent = "";
-                for (const c of cursors)
-                    this.cursorLayer.appendChild(c.draw());
-            }
-            else {
-                cursors.forEach((c, idx) => c.adjust(oldCursors[idx]));
-            }
-            this.cursors = cursors;
-        }
-    }
-    destroy() {
-        this.selectionLayer.remove();
-        this.cursorLayer.remove();
-    }
+        return cursors;
+    },
+    update(update, dom) {
+        if (update.transactions.some(tr => tr.scrollIntoView))
+            dom.style.animationName = dom.style.animationName == "cm-blink" ? "cm-blink2" : "cm-blink";
+        let confChange = configChanged(update);
+        if (confChange)
+            setBlinkRate(update.state, dom);
+        return update.docChanged || update.selectionSet || confChange;
+    },
+    mount(dom, view) {
+        setBlinkRate(view.state, dom);
+    },
+    class: "cm-cursorLayer"
+});
+function setBlinkRate(state, dom) {
+    dom.style.animationDuration = state.facet(selectionConfig).cursorBlinkRate + "ms";
+}
+const selectionLayer = /*@__PURE__*/layer({
+    above: false,
+    markers(view) {
+        return view.state.selection.ranges.map(r => r.empty ? [] : measureRange(view, r)).reduce((a, b) => a.concat(b));
+    },
+    update(update, dom) {
+        return update.docChanged || update.selectionSet || update.viewportChanged || configChanged(update);
+    },
+    class: "cm-selectionLayer"
 });
 const themeSpec = {
     ".cm-line": {
@@ -7478,7 +7538,7 @@ function measureRange(view, range) {
         return pieces(top).concat(between).concat(pieces(bottom));
     }
     function piece(left, top, right, bottom) {
-        return new Piece(left - base.left, top - base.top - 0.01 /* C.Epsilon */, right - left, bottom - top + 0.01 /* C.Epsilon */, "cm-selectionBackground");
+        return new RectangleMarker("cm-selectionBackground", left - base.left, top - base.top - 0.01 /* C.Epsilon */, right - left, bottom - top + 0.01 /* C.Epsilon */);
     }
     function pieces({ top, bottom, horizontal }) {
         let pieces = [];
@@ -7535,7 +7595,7 @@ function measureCursor(view, cursor, primary) {
     if (!pos)
         return null;
     let base = getBase(view);
-    return new Piece(pos.left - base.left, pos.top - base.top, -1, pos.bottom - pos.top, primary ? "cm-cursor cm-cursor-primary" : "cm-cursor cm-cursor-secondary");
+    return new RectangleMarker(primary ? "cm-cursor cm-cursor-primary" : "cm-cursor cm-cursor-secondary", pos.left - base.left, pos.top - base.top, -1, pos.bottom - pos.top);
 }
 
 const setDropCursorPos = /*@__PURE__*/StateEffect.define({
@@ -8329,6 +8389,17 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
                 : pos.bottom + (size.bottom - size.top) + offset.y > space.bottom) &&
                 above == (space.bottom - pos.bottom > pos.top - space.top))
                 above = !above;
+            let spaceVert = (above ? pos.top - space.top : space.bottom - pos.bottom) - arrowHeight;
+            if (spaceVert < height && tView.resize !== false) {
+                if (spaceVert < this.view.defaultLineHeight) {
+                    dom.style.top = Outside;
+                    continue;
+                }
+                dom.style.height = (height = spaceVert) + "px";
+            }
+            else if (dom.style.height) {
+                dom.style.height = "";
+            }
             let top = above ? pos.top - height - arrowHeight - offset.y : pos.bottom + arrowHeight + offset.y;
             let right = left + width;
             if (tView.overlap !== true)
@@ -8372,7 +8443,8 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
 });
 const baseTheme = /*@__PURE__*/EditorView.baseTheme({
     ".cm-tooltip": {
-        zIndex: 100
+        zIndex: 100,
+        boxSizing: "border-box"
     },
     "&light .cm-tooltip": {
         border: "1px solid #bbb",
@@ -9296,4 +9368,4 @@ function highlightActiveLineGutter() {
 */
 const __test = { HeightMap, HeightOracle, MeasuredHeights, QueryType, ChangedRange, computeOrder, moveVisually };
 
-export { BidiSpan, BlockInfo, BlockType, Decoration, Direction, EditorView, GutterMarker, MatchDecorator, ViewPlugin, ViewUpdate, WidgetType, __test, closeHoverTooltips, crosshairCursor, drawSelection, dropCursor, getPanel, getTooltip, gutter, gutterLineClass, gutters, hasHoverTooltips, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, hoverTooltip, keymap, lineNumberMarkers, lineNumbers, logException, panels, placeholder, rectangularSelection, repositionTooltips, runScopeHandlers, scrollPastEnd, showPanel, showTooltip, tooltips };
+export { BidiSpan, BlockInfo, BlockType, Decoration, Direction, EditorView, GutterMarker, MatchDecorator, RectangleMarker, ViewPlugin, ViewUpdate, WidgetType, __test, closeHoverTooltips, crosshairCursor, drawSelection, dropCursor, getPanel, getTooltip, gutter, gutterLineClass, gutters, hasHoverTooltips, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, hoverTooltip, keymap, layer, lineNumberMarkers, lineNumbers, logException, panels, placeholder, rectangularSelection, repositionTooltips, runScopeHandlers, scrollPastEnd, showPanel, showTooltip, tooltips };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "6.5.0",
+  "version": "6.6.0",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -26,7 +26,7 @@
   "sideEffects": false,
   "license": "MIT",
   "dependencies": {
-    "@codemirror/state": "^6.0.0",
+    "@codemirror/state": "^6.1.4",
     "style-mod": "^4.0.0",
     "w3c-keyname": "^2.2.4"
   },