@codemirror/view 6.22.0 → 6.22.2

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 6.22.2 (2023-12-08)
+
+### Bug fixes
+
+Fix an issue in the bidirectional motion that could cause the cursor to get stuck in a loop when a zero-width non-joiner char was placed on a direction boundary.
+
+Fix a bug that corrupts the editor's internal view tree data structure on some types of edits, putting the editor in a broken state.
+
+## 6.22.1 (2023-11-27)
+
+### Bug fixes
+
+Call widget `destroy` methods when the entire editor is destroyed or reset.
+
+Work around an issue on Safari on macOS Sonoma that made the native cursor visible even when `drawSelection` is enabled.
+
+Fix an issue where, on some browsers, the screenreader announced text ended up in the printed document.
+
+Fix a bug where a hover tooltip could stick around even though the pointer was no longer on the editor when it was moved out over the tooltip.
+
+Fix an issue where hover tooltips could close when moving the mouse onto them due to mouse position rounding issues.
+
 ## 6.22.0 (2023-11-03)
 
 ### Bug fixes

package/dist/index.cjs

@@ -96,6 +96,15 @@ function windowRect(win) {
     return { left: 0, right: win.innerWidth,
         top: 0, bottom: win.innerHeight };
 }
+function getScale(elt, rect) {
+    let scaleX = rect.width / elt.offsetWidth;
+    let scaleY = rect.height / elt.offsetHeight;
+    if (scaleX > 0.995 && scaleX < 1.005 || !isFinite(scaleX) || Math.abs(rect.width - elt.offsetWidth) < 1)
+        scaleX = 1;
+    if (scaleY > 0.995 && scaleY < 1.005 || !isFinite(scaleY) || Math.abs(rect.height - elt.offsetHeight) < 1)
+        scaleY = 1;
+    return { scaleX, scaleY };
+}
 function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
     let doc = dom.ownerDocument, win = doc.defaultView || window;
     for (let cur = dom, stop = false; cur && !stop;) {
@@ -113,8 +122,7 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
                     continue;
                 }
                 let rect = cur.getBoundingClientRect();
-                scaleX = rect.width / cur.offsetWidth;
-                scaleY = rect.height / cur.offsetHeight;
+                ({ scaleX, scaleY } = getScale(cur, rect));
                 // Make sure scrollbar width isn't included in the rectangle
                 bounding = { left: rect.left, right: rect.left + cur.clientWidth * scaleX,
                     top: rect.top, bottom: rect.top + cur.clientHeight * scaleY };
@@ -503,7 +511,7 @@ class ContentView {
         this.markDirty();
         for (let i = from; i < to; i++) {
             let child = this.children[i];
-            if (child.parent == this)
+            if (child.parent == this && children.indexOf(child) < 0)
                 child.destroy();
         }
         this.children.splice(from, to - from, ...children);
@@ -540,6 +548,9 @@ class ContentView {
     // number > 0 when after its position.
     getSide() { return 0; }
     destroy() {
+        for (let child of this.children)
+            if (child.parent == this)
+                child.destroy();
         this.parent = null;
     }
 }
@@ -776,7 +787,7 @@ class MarkView extends ContentView {
         if (source && (!(source instanceof MarkView && source.mark.eq(this.mark)) ||
             (from && openStart <= 0) || (to < this.length && openEnd <= 0)))
             return false;
-        mergeChildrenInto(this, from, to, source ? source.children : [], openStart - 1, openEnd - 1);
+        mergeChildrenInto(this, from, to, source ? source.children.slice() : [], openStart - 1, openEnd - 1);
         this.markDirty();
         return true;
     }
@@ -1112,7 +1123,7 @@ class LineView extends ContentView {
         }
         if (hasStart)
             this.setDeco(source ? source.attrs : null);
-        mergeChildrenInto(this, from, to, source ? source.children : [], openStart, openEnd);
+        mergeChildrenInto(this, from, to, source ? source.children.slice() : [], openStart, openEnd);
         return true;
     }
     split(at) {
@@ -2183,9 +2194,8 @@ function charType(ch) {
         0x590 <= ch && ch <= 0x5f4 ? 2 /* T.R */ :
             0x600 <= ch && ch <= 0x6f9 ? ArabicTypes[ch - 0x600] :
                 0x6ee <= ch && ch <= 0x8ac ? 4 /* T.AL */ :
-                    0x2000 <= ch && ch <= 0x200b ? 256 /* T.NI */ :
-                        0xfb50 <= ch && ch <= 0xfdff ? 4 /* T.AL */ :
-                            ch == 0x200c ? 256 /* T.NI */ : 1 /* T.L */;
+                    0x2000 <= ch && ch <= 0x200c ? 256 /* T.NI */ :
+                        0xfb50 <= ch && ch <= 0xfdff ? 4 /* T.AL */ : 1 /* T.L */;
 }
 const BidiRE = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac\ufb50-\ufdff]/;
 /**
@@ -2606,7 +2616,7 @@ function moveVisually(line, order, dir, start, forward) {
     let indexForward = forward == (span.dir == dir);
     let nextIndex = state.findClusterBreak(line.text, startIndex, indexForward);
     movedOver = line.text.slice(Math.min(startIndex, nextIndex), Math.max(startIndex, nextIndex));
-    if (nextIndex != span.side(forward, dir))
+    if (nextIndex > span.from && nextIndex < span.to)
         return state.EditorSelection.cursor(nextIndex + line.from, indexForward ? -1 : 1, span.level);
     let nextSpan = spanI == (forward ? order.length - 1 : 0) ? null : order[spanI + (forward ? 1 : -1)];
     if (!nextSpan && span.level != dir)
@@ -5360,12 +5370,7 @@ class ViewState {
         this.mustMeasureContent = false;
         let result = 0, bias = 0;
         if (domRect.width && domRect.height) {
-            let scaleX = domRect.width / dom.offsetWidth;
-            let scaleY = domRect.height / dom.offsetHeight;
-            if (scaleX > 0.995 && scaleX < 1.005 || !isFinite(scaleX) || Math.abs(domRect.width - dom.offsetWidth) < 1)
-                scaleX = 1;
-            if (scaleY > 0.995 && scaleY < 1.005 || !isFinite(scaleY) || Math.abs(domRect.height - dom.offsetHeight) < 1)
-                scaleY = 1;
+            let { scaleX, scaleY } = getScale(dom, domRect);
             if (this.scaleX != scaleX || this.scaleY != scaleY) {
                 this.scaleX = scaleX;
                 this.scaleY = scaleY;
@@ -5881,6 +5886,13 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
     "&.cm-focused > .cm-scroller > .cm-cursorLayer .cm-cursor": {
         display: "block"
     },
+    ".cm-announced": {
+        position: "fixed",
+        top: "-10000px"
+    },
+    "@media print": {
+        ".cm-announced": { display: "none" }
+    },
     "&light .cm-activeLine": { backgroundColor: "#cceeff44" },
     "&dark .cm-activeLine": { backgroundColor: "#99eeff33" },
     "&light .cm-specialChar": { color: "red" },
@@ -6929,7 +6941,7 @@ class EditorView {
         this.scrollDOM.className = "cm-scroller";
         this.scrollDOM.appendChild(this.contentDOM);
         this.announceDOM = document.createElement("div");
-        this.announceDOM.style.cssText = "position: fixed; top: -10000px";
+        this.announceDOM.className = "cm-announced";
         this.announceDOM.setAttribute("aria-live", "polite");
         this.dom = document.createElement("div");
         this.dom.appendChild(this.announceDOM);
@@ -7095,6 +7107,7 @@ class EditorView {
             this.pluginMap.clear();
             for (let plugin of this.plugins)
                 plugin.update(this);
+            this.docView.destroy();
             this.docView = new DocView(this);
             this.inputState.ensureHandlers(this.plugins);
             this.mountStyles();
@@ -7227,6 +7240,7 @@ class EditorView {
                         if (this.viewState.scrollTarget) {
                             this.docView.scrollIntoView(this.viewState.scrollTarget);
                             this.viewState.scrollTarget = null;
+                            scrollAnchorHeight = -1;
                             continue;
                         }
                         else {
@@ -7627,6 +7641,7 @@ class EditorView {
             plugin.destroy(this);
         this.plugins = [];
         this.inputState.destroy();
+        this.docView.destroy();
         this.dom.remove();
         this.observer.destroy();
         if (this.measureScheduled > -1)
@@ -8487,8 +8502,10 @@ const themeSpec = {
         "&::selection": { backgroundColor: "transparent !important" }
     }
 };
-if (CanHidePrimary)
+if (CanHidePrimary) {
     themeSpec[".cm-line"].caretColor = "transparent !important";
+    themeSpec[".cm-content"] = { caretColor: "transparent !important" };
+}
 const hideNativeSelection = state.Prec.highest(EditorView.theme(themeSpec));
 
 const setDropCursorPos = state.StateEffect.define({
@@ -9545,7 +9562,7 @@ const showHoverTooltipHost = showTooltip.compute([showHoverTooltip], state => {
         return null;
     return {
         pos: Math.min(...tooltips.map(t => t.pos)),
-        end: Math.max(...tooltips.filter(t => t.end != null).map(t => t.end)),
+        end: Math.max(...tooltips.map(t => { var _a; return (_a = t.end) !== null && _a !== void 0 ? _a : t.pos; })),
         create: HoverTooltipHost.create,
         above: tooltips[0].above,
         arrow: tooltips.some(t => t.arrow),
@@ -9625,14 +9642,19 @@ class HoverPlugin {
             view.dispatch({ effects: this.setHover.of(open) });
         }
     }
+    get tooltip() {
+        let plugin = this.view.plugin(tooltipPlugin);
+        let index = plugin ? plugin.manager.tooltips.findIndex(t => t.create == HoverTooltipHost.create) : -1;
+        return index > -1 ? plugin.manager.tooltipViews[index] : null;
+    }
     mousemove(event) {
         var _a;
         this.lastMove = { x: event.clientX, y: event.clientY, target: event.target, time: Date.now() };
         if (this.hoverTimeout < 0)
             this.hoverTimeout = setTimeout(this.checkHover, this.hoverTime);
-        let tooltip = this.active;
-        if (tooltip && !isInTooltip(this.lastMove.target) || this.pending) {
-            let { pos } = tooltip || this.pending, end = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.end) !== null && _a !== void 0 ? _a : pos;
+        let { active, tooltip } = this;
+        if (active && tooltip && !isInTooltip(tooltip.dom, event) || this.pending) {
+            let { pos } = active || this.pending, end = (_a = active === null || active === void 0 ? void 0 : active.end) !== null && _a !== void 0 ? _a : pos;
             if ((pos == end ? this.view.posAtCoords(this.lastMove) != pos
                 : !isOverRange(this.view, pos, end, event.clientX, event.clientY))) {
                 this.view.dispatch({ effects: this.setHover.of(null) });
@@ -9640,11 +9662,26 @@ class HoverPlugin {
             }
         }
     }
-    mouseleave(e) {
+    mouseleave(event) {
         clearTimeout(this.hoverTimeout);
         this.hoverTimeout = -1;
-        if (this.active && !isInTooltip(e.relatedTarget))
-            this.view.dispatch({ effects: this.setHover.of(null) });
+        let { active } = this;
+        if (active) {
+            let { tooltip } = this;
+            let inTooltip = tooltip && tooltip.dom.contains(event.relatedTarget);
+            if (!inTooltip)
+                this.view.dispatch({ effects: this.setHover.of(null) });
+            else
+                this.watchTooltipLeave(tooltip.dom);
+        }
+    }
+    watchTooltipLeave(tooltip) {
+        let watch = (event) => {
+            tooltip.removeEventListener("mouseleave", watch);
+            if (this.active && !this.view.dom.contains(event.relatedTarget))
+                this.view.dispatch({ effects: this.setHover.of(null) });
+        };
+        tooltip.addEventListener("mouseleave", watch);
     }
     destroy() {
         clearTimeout(this.hoverTimeout);
@@ -9652,11 +9689,11 @@ class HoverPlugin {
         this.view.dom.removeEventListener("mousemove", this.mousemove);
     }
 }
-function isInTooltip(elt) {
-    for (let cur = elt; cur; cur = cur.parentNode)
-        if (cur.nodeType == 1 && cur.classList.contains("cm-tooltip"))
-            return true;
-    return false;
+const tooltipMargin = 4;
+function isInTooltip(tooltip, event) {
+    let rect = tooltip.getBoundingClientRect();
+    return event.clientX >= rect.left - tooltipMargin && event.clientX <= rect.right + tooltipMargin &&
+        event.clientY >= rect.top - tooltipMargin && event.clientY <= rect.bottom + tooltipMargin;
 }
 function isOverRange(view, from, to, x, y, margin) {
     let rect = view.scrollDOM.getBoundingClientRect();

package/dist/index.js

@@ -94,6 +94,15 @@ function windowRect(win) {
     return { left: 0, right: win.innerWidth,
         top: 0, bottom: win.innerHeight };
 }
+function getScale(elt, rect) {
+    let scaleX = rect.width / elt.offsetWidth;
+    let scaleY = rect.height / elt.offsetHeight;
+    if (scaleX > 0.995 && scaleX < 1.005 || !isFinite(scaleX) || Math.abs(rect.width - elt.offsetWidth) < 1)
+        scaleX = 1;
+    if (scaleY > 0.995 && scaleY < 1.005 || !isFinite(scaleY) || Math.abs(rect.height - elt.offsetHeight) < 1)
+        scaleY = 1;
+    return { scaleX, scaleY };
+}
 function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
     let doc = dom.ownerDocument, win = doc.defaultView || window;
     for (let cur = dom, stop = false; cur && !stop;) {
@@ -111,8 +120,7 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
                     continue;
                 }
                 let rect = cur.getBoundingClientRect();
-                scaleX = rect.width / cur.offsetWidth;
-                scaleY = rect.height / cur.offsetHeight;
+                ({ scaleX, scaleY } = getScale(cur, rect));
                 // Make sure scrollbar width isn't included in the rectangle
                 bounding = { left: rect.left, right: rect.left + cur.clientWidth * scaleX,
                     top: rect.top, bottom: rect.top + cur.clientHeight * scaleY };
@@ -501,7 +509,7 @@ class ContentView {
         this.markDirty();
         for (let i = from; i < to; i++) {
             let child = this.children[i];
-            if (child.parent == this)
+            if (child.parent == this && children.indexOf(child) < 0)
                 child.destroy();
         }
         this.children.splice(from, to - from, ...children);
@@ -538,6 +546,9 @@ class ContentView {
     // number > 0 when after its position.
     getSide() { return 0; }
     destroy() {
+        for (let child of this.children)
+            if (child.parent == this)
+                child.destroy();
         this.parent = null;
     }
 }
@@ -774,7 +785,7 @@ class MarkView extends ContentView {
         if (source && (!(source instanceof MarkView && source.mark.eq(this.mark)) ||
             (from && openStart <= 0) || (to < this.length && openEnd <= 0)))
             return false;
-        mergeChildrenInto(this, from, to, source ? source.children : [], openStart - 1, openEnd - 1);
+        mergeChildrenInto(this, from, to, source ? source.children.slice() : [], openStart - 1, openEnd - 1);
         this.markDirty();
         return true;
     }
@@ -1110,7 +1121,7 @@ class LineView extends ContentView {
         }
         if (hasStart)
             this.setDeco(source ? source.attrs : null);
-        mergeChildrenInto(this, from, to, source ? source.children : [], openStart, openEnd);
+        mergeChildrenInto(this, from, to, source ? source.children.slice() : [], openStart, openEnd);
         return true;
     }
     split(at) {
@@ -2179,9 +2190,8 @@ function charType(ch) {
         0x590 <= ch && ch <= 0x5f4 ? 2 /* T.R */ :
             0x600 <= ch && ch <= 0x6f9 ? ArabicTypes[ch - 0x600] :
                 0x6ee <= ch && ch <= 0x8ac ? 4 /* T.AL */ :
-                    0x2000 <= ch && ch <= 0x200b ? 256 /* T.NI */ :
-                        0xfb50 <= ch && ch <= 0xfdff ? 4 /* T.AL */ :
-                            ch == 0x200c ? 256 /* T.NI */ : 1 /* T.L */;
+                    0x2000 <= ch && ch <= 0x200c ? 256 /* T.NI */ :
+                        0xfb50 <= ch && ch <= 0xfdff ? 4 /* T.AL */ : 1 /* T.L */;
 }
 const BidiRE = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac\ufb50-\ufdff]/;
 /**
@@ -2602,7 +2612,7 @@ function moveVisually(line, order, dir, start, forward) {
     let indexForward = forward == (span.dir == dir);
     let nextIndex = findClusterBreak(line.text, startIndex, indexForward);
     movedOver = line.text.slice(Math.min(startIndex, nextIndex), Math.max(startIndex, nextIndex));
-    if (nextIndex != span.side(forward, dir))
+    if (nextIndex > span.from && nextIndex < span.to)
         return EditorSelection.cursor(nextIndex + line.from, indexForward ? -1 : 1, span.level);
     let nextSpan = spanI == (forward ? order.length - 1 : 0) ? null : order[spanI + (forward ? 1 : -1)];
     if (!nextSpan && span.level != dir)
@@ -5355,12 +5365,7 @@ class ViewState {
         this.mustMeasureContent = false;
         let result = 0, bias = 0;
         if (domRect.width && domRect.height) {
-            let scaleX = domRect.width / dom.offsetWidth;
-            let scaleY = domRect.height / dom.offsetHeight;
-            if (scaleX > 0.995 && scaleX < 1.005 || !isFinite(scaleX) || Math.abs(domRect.width - dom.offsetWidth) < 1)
-                scaleX = 1;
-            if (scaleY > 0.995 && scaleY < 1.005 || !isFinite(scaleY) || Math.abs(domRect.height - dom.offsetHeight) < 1)
-                scaleY = 1;
+            let { scaleX, scaleY } = getScale(dom, domRect);
             if (this.scaleX != scaleX || this.scaleY != scaleY) {
                 this.scaleX = scaleX;
                 this.scaleY = scaleY;
@@ -5876,6 +5881,13 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     "&.cm-focused > .cm-scroller > .cm-cursorLayer .cm-cursor": {
         display: "block"
     },
+    ".cm-announced": {
+        position: "fixed",
+        top: "-10000px"
+    },
+    "@media print": {
+        ".cm-announced": { display: "none" }
+    },
     "&light .cm-activeLine": { backgroundColor: "#cceeff44" },
     "&dark .cm-activeLine": { backgroundColor: "#99eeff33" },
     "&light .cm-specialChar": { color: "red" },
@@ -6924,7 +6936,7 @@ class EditorView {
         this.scrollDOM.className = "cm-scroller";
         this.scrollDOM.appendChild(this.contentDOM);
         this.announceDOM = document.createElement("div");
-        this.announceDOM.style.cssText = "position: fixed; top: -10000px";
+        this.announceDOM.className = "cm-announced";
         this.announceDOM.setAttribute("aria-live", "polite");
         this.dom = document.createElement("div");
         this.dom.appendChild(this.announceDOM);
@@ -7090,6 +7102,7 @@ class EditorView {
             this.pluginMap.clear();
             for (let plugin of this.plugins)
                 plugin.update(this);
+            this.docView.destroy();
             this.docView = new DocView(this);
             this.inputState.ensureHandlers(this.plugins);
             this.mountStyles();
@@ -7222,6 +7235,7 @@ class EditorView {
                         if (this.viewState.scrollTarget) {
                             this.docView.scrollIntoView(this.viewState.scrollTarget);
                             this.viewState.scrollTarget = null;
+                            scrollAnchorHeight = -1;
                             continue;
                         }
                         else {
@@ -7622,6 +7636,7 @@ class EditorView {
             plugin.destroy(this);
         this.plugins = [];
         this.inputState.destroy();
+        this.docView.destroy();
         this.dom.remove();
         this.observer.destroy();
         if (this.measureScheduled > -1)
@@ -8482,8 +8497,10 @@ const themeSpec = {
         "&::selection": { backgroundColor: "transparent !important" }
     }
 };
-if (CanHidePrimary)
+if (CanHidePrimary) {
     themeSpec[".cm-line"].caretColor = "transparent !important";
+    themeSpec[".cm-content"] = { caretColor: "transparent !important" };
+}
 const hideNativeSelection = /*@__PURE__*/Prec.highest(/*@__PURE__*/EditorView.theme(themeSpec));
 
 const setDropCursorPos = /*@__PURE__*/StateEffect.define({
@@ -9540,7 +9557,7 @@ const showHoverTooltipHost = /*@__PURE__*/showTooltip.compute([showHoverTooltip]
         return null;
     return {
         pos: Math.min(...tooltips.map(t => t.pos)),
-        end: Math.max(...tooltips.filter(t => t.end != null).map(t => t.end)),
+        end: Math.max(...tooltips.map(t => { var _a; return (_a = t.end) !== null && _a !== void 0 ? _a : t.pos; })),
         create: HoverTooltipHost.create,
         above: tooltips[0].above,
         arrow: tooltips.some(t => t.arrow),
@@ -9620,14 +9637,19 @@ class HoverPlugin {
             view.dispatch({ effects: this.setHover.of(open) });
         }
     }
+    get tooltip() {
+        let plugin = this.view.plugin(tooltipPlugin);
+        let index = plugin ? plugin.manager.tooltips.findIndex(t => t.create == HoverTooltipHost.create) : -1;
+        return index > -1 ? plugin.manager.tooltipViews[index] : null;
+    }
     mousemove(event) {
         var _a;
         this.lastMove = { x: event.clientX, y: event.clientY, target: event.target, time: Date.now() };
         if (this.hoverTimeout < 0)
             this.hoverTimeout = setTimeout(this.checkHover, this.hoverTime);
-        let tooltip = this.active;
-        if (tooltip && !isInTooltip(this.lastMove.target) || this.pending) {
-            let { pos } = tooltip || this.pending, end = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.end) !== null && _a !== void 0 ? _a : pos;
+        let { active, tooltip } = this;
+        if (active && tooltip && !isInTooltip(tooltip.dom, event) || this.pending) {
+            let { pos } = active || this.pending, end = (_a = active === null || active === void 0 ? void 0 : active.end) !== null && _a !== void 0 ? _a : pos;
             if ((pos == end ? this.view.posAtCoords(this.lastMove) != pos
                 : !isOverRange(this.view, pos, end, event.clientX, event.clientY))) {
                 this.view.dispatch({ effects: this.setHover.of(null) });
@@ -9635,11 +9657,26 @@ class HoverPlugin {
             }
         }
     }
-    mouseleave(e) {
+    mouseleave(event) {
         clearTimeout(this.hoverTimeout);
         this.hoverTimeout = -1;
-        if (this.active && !isInTooltip(e.relatedTarget))
-            this.view.dispatch({ effects: this.setHover.of(null) });
+        let { active } = this;
+        if (active) {
+            let { tooltip } = this;
+            let inTooltip = tooltip && tooltip.dom.contains(event.relatedTarget);
+            if (!inTooltip)
+                this.view.dispatch({ effects: this.setHover.of(null) });
+            else
+                this.watchTooltipLeave(tooltip.dom);
+        }
+    }
+    watchTooltipLeave(tooltip) {
+        let watch = (event) => {
+            tooltip.removeEventListener("mouseleave", watch);
+            if (this.active && !this.view.dom.contains(event.relatedTarget))
+                this.view.dispatch({ effects: this.setHover.of(null) });
+        };
+        tooltip.addEventListener("mouseleave", watch);
     }
     destroy() {
         clearTimeout(this.hoverTimeout);
@@ -9647,11 +9684,11 @@ class HoverPlugin {
         this.view.dom.removeEventListener("mousemove", this.mousemove);
     }
 }
-function isInTooltip(elt) {
-    for (let cur = elt; cur; cur = cur.parentNode)
-        if (cur.nodeType == 1 && cur.classList.contains("cm-tooltip"))
-            return true;
-    return false;
+const tooltipMargin = 4;
+function isInTooltip(tooltip, event) {
+    let rect = tooltip.getBoundingClientRect();
+    return event.clientX >= rect.left - tooltipMargin && event.clientX <= rect.right + tooltipMargin &&
+        event.clientY >= rect.top - tooltipMargin && event.clientY <= rect.bottom + tooltipMargin;
 }
 function isOverRange(view, from, to, x, y, margin) {
     let rect = view.scrollDOM.getBoundingClientRect();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "6.22.0",
+  "version": "6.22.2",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",