@codemirror/view 6.22.0 → 6.22.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 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

@@ -503,7 +503,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 +540,8 @@ class ContentView {
     // number > 0 when after its position.
     getSide() { return 0; }
     destroy() {
+        for (let child of this.children)
+            child.destroy();
         this.parent = null;
     }
 }
@@ -5881,6 +5883,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 +6938,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 +7104,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();
@@ -7627,6 +7637,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 +8498,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 +9558,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 +9638,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 +9658,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 +9685,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

@@ -501,7 +501,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 +538,8 @@ class ContentView {
     // number > 0 when after its position.
     getSide() { return 0; }
     destroy() {
+        for (let child of this.children)
+            child.destroy();
         this.parent = null;
     }
 }
@@ -5876,6 +5878,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 +6933,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 +7099,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();
@@ -7622,6 +7632,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 +8493,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 +9553,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 +9633,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 +9653,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 +9680,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.1",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",