@codemirror/view 6.21.3 → 6.21.4

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 6.21.4 (2023-10-24)
+
+### Bug fixes
+
+Support the `offset`, `getCoords`, `overlap`, and `resize` properties on hover tooltips, as long as they aren't given conflicting values when there are multiple active hover tooltips.
+
+Fix a bug that caused tooltips in the default configuration to be positioned incorrectly on Chrome when the editor was transformed.
+
 ## 6.21.3 (2023-10-06)
 
 ### Bug fixes

package/dist/index.cjs

@@ -6371,7 +6371,6 @@ class DOMObserver {
         this.scrollTargets = [];
         this.intersection = null;
         this.resizeScroll = null;
-        this.resizeContent = null;
         this.intersecting = false;
         this.gapIntersection = null;
         this.gaps = [];
@@ -6415,8 +6414,6 @@ class DOMObserver {
                     this.onResize();
             });
             this.resizeScroll.observe(view.scrollDOM);
-            this.resizeContent = new ResizeObserver(() => this.view.requestMeasure());
-            this.resizeContent.observe(view.contentDOM);
         }
         this.addWindowListeners(this.win = view.win);
         this.start();
@@ -6745,12 +6742,11 @@ class DOMObserver {
         win.document.removeEventListener("selectionchange", this.onSelectionChange);
     }
     destroy() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         this.stop();
         (_a = this.intersection) === null || _a === void 0 ? void 0 : _a.disconnect();
         (_b = this.gapIntersection) === null || _b === void 0 ? void 0 : _b.disconnect();
         (_c = this.resizeScroll) === null || _c === void 0 ? void 0 : _c.disconnect();
-        (_d = this.resizeContent) === null || _d === void 0 ? void 0 : _d.disconnect();
         for (let dom of this.scrollTargets)
             dom.removeEventListener("scroll", this.onScroll);
         this.removeWindowListeners(this.win);
@@ -9198,6 +9194,7 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
         }
         tooltipView.dom.style.position = this.position;
         tooltipView.dom.style.top = Outside;
+        tooltipView.dom.style.left = "0px";
         this.container.appendChild(tooltipView.dom);
         if (tooltipView.mount)
             tooltipView.mount(this.view);
@@ -9219,12 +9216,24 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
         let editor = this.view.dom.getBoundingClientRect();
         let scaleX = 1, scaleY = 1, makeAbsolute = false;
         if (this.position == "fixed" && this.manager.tooltipViews.length) {
-            // When the dialog's offset parent isn't the body (Firefox) or
-            // null (Webkit), we are probably in a transformed container,
-            // and should use absolute positioning instead, since fixed
-            // positioning inside a transform works in a very broken way.
-            let { offsetParent } = this.manager.tooltipViews[0].dom;
-            makeAbsolute = !!(offsetParent && offsetParent != this.container.ownerDocument.body);
+            let { dom } = this.manager.tooltipViews[0];
+            if (browser.gecko) {
+                // Firefox sets the element's `offsetParent` to the
+                // transformed element when a transform interferes with fixed
+                // positioning.
+                makeAbsolute = dom.offsetParent != this.container.ownerDocument.body;
+            }
+            else {
+                // On other browsers, we have to awkwardly try and use other
+                // information to detect a transform.
+                if (this.view.scaleX != 1 || this.view.scaleY != 1) {
+                    makeAbsolute = true;
+                }
+                else if (dom.style.top == Outside && dom.style.left == "0px") {
+                    let rect = dom.getBoundingClientRect();
+                    makeAbsolute = Math.abs(rect.top + 10000) > 1 || Math.abs(rect.left) > 1;
+                }
+            }
         }
         if (makeAbsolute || this.position == "absolute") {
             if (this.parent) {
@@ -9450,6 +9459,23 @@ class HoverTooltipHost {
         for (let t of this.manager.tooltipViews)
             (_a = t.destroy) === null || _a === void 0 ? void 0 : _a.call(t);
     }
+    passProp(name) {
+        let value = undefined;
+        for (let view of this.manager.tooltipViews) {
+            let given = view[name];
+            if (given !== undefined) {
+                if (value === undefined)
+                    value = given;
+                else if (value !== given)
+                    return undefined;
+            }
+        }
+        return value;
+    }
+    get offset() { return this.passProp("offset"); }
+    get getCoords() { return this.passProp("getCoords"); }
+    get overlap() { return this.passProp("overlap"); }
+    get resize() { return this.passProp("resize"); }
 }
 const showHoverTooltipHost = showTooltip.compute([showHoverTooltip], state => {
     let tooltips = state.facet(showHoverTooltip).filter(t => t);

package/dist/index.js

@@ -6366,7 +6366,6 @@ class DOMObserver {
         this.scrollTargets = [];
         this.intersection = null;
         this.resizeScroll = null;
-        this.resizeContent = null;
         this.intersecting = false;
         this.gapIntersection = null;
         this.gaps = [];
@@ -6410,8 +6409,6 @@ class DOMObserver {
                     this.onResize();
             });
             this.resizeScroll.observe(view.scrollDOM);
-            this.resizeContent = new ResizeObserver(() => this.view.requestMeasure());
-            this.resizeContent.observe(view.contentDOM);
         }
         this.addWindowListeners(this.win = view.win);
         this.start();
@@ -6740,12 +6737,11 @@ class DOMObserver {
         win.document.removeEventListener("selectionchange", this.onSelectionChange);
     }
     destroy() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         this.stop();
         (_a = this.intersection) === null || _a === void 0 ? void 0 : _a.disconnect();
         (_b = this.gapIntersection) === null || _b === void 0 ? void 0 : _b.disconnect();
         (_c = this.resizeScroll) === null || _c === void 0 ? void 0 : _c.disconnect();
-        (_d = this.resizeContent) === null || _d === void 0 ? void 0 : _d.disconnect();
         for (let dom of this.scrollTargets)
             dom.removeEventListener("scroll", this.onScroll);
         this.removeWindowListeners(this.win);
@@ -9193,6 +9189,7 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
         }
         tooltipView.dom.style.position = this.position;
         tooltipView.dom.style.top = Outside;
+        tooltipView.dom.style.left = "0px";
         this.container.appendChild(tooltipView.dom);
         if (tooltipView.mount)
             tooltipView.mount(this.view);
@@ -9214,12 +9211,24 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
         let editor = this.view.dom.getBoundingClientRect();
         let scaleX = 1, scaleY = 1, makeAbsolute = false;
         if (this.position == "fixed" && this.manager.tooltipViews.length) {
-            // When the dialog's offset parent isn't the body (Firefox) or
-            // null (Webkit), we are probably in a transformed container,
-            // and should use absolute positioning instead, since fixed
-            // positioning inside a transform works in a very broken way.
-            let { offsetParent } = this.manager.tooltipViews[0].dom;
-            makeAbsolute = !!(offsetParent && offsetParent != this.container.ownerDocument.body);
+            let { dom } = this.manager.tooltipViews[0];
+            if (browser.gecko) {
+                // Firefox sets the element's `offsetParent` to the
+                // transformed element when a transform interferes with fixed
+                // positioning.
+                makeAbsolute = dom.offsetParent != this.container.ownerDocument.body;
+            }
+            else {
+                // On other browsers, we have to awkwardly try and use other
+                // information to detect a transform.
+                if (this.view.scaleX != 1 || this.view.scaleY != 1) {
+                    makeAbsolute = true;
+                }
+                else if (dom.style.top == Outside && dom.style.left == "0px") {
+                    let rect = dom.getBoundingClientRect();
+                    makeAbsolute = Math.abs(rect.top + 10000) > 1 || Math.abs(rect.left) > 1;
+                }
+            }
         }
         if (makeAbsolute || this.position == "absolute") {
             if (this.parent) {
@@ -9445,6 +9454,23 @@ class HoverTooltipHost {
         for (let t of this.manager.tooltipViews)
             (_a = t.destroy) === null || _a === void 0 ? void 0 : _a.call(t);
     }
+    passProp(name) {
+        let value = undefined;
+        for (let view of this.manager.tooltipViews) {
+            let given = view[name];
+            if (given !== undefined) {
+                if (value === undefined)
+                    value = given;
+                else if (value !== given)
+                    return undefined;
+            }
+        }
+        return value;
+    }
+    get offset() { return this.passProp("offset"); }
+    get getCoords() { return this.passProp("getCoords"); }
+    get overlap() { return this.passProp("overlap"); }
+    get resize() { return this.passProp("resize"); }
 }
 const showHoverTooltipHost = /*@__PURE__*/showTooltip.compute([showHoverTooltip], state => {
     let tooltips = state.facet(showHoverTooltip).filter(t => t);

package/package.json

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