@codemirror/view 6.21.2 → 6.21.4

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 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
+
+Fix an issue that caused `coordsForChar` to return the wrong rectangle for characters after a line wrap in Safari.
+
+Make the context menu work when clicking below the content in a fixed-height editor.
+
+Tooltips that have been put below/above their target position because there is no room on their default side now stay there on further updates.
+
 ## 6.21.2 (2023-10-02)
 
 ### Bug fixes

package/dist/index.cjs

@@ -2981,7 +2981,12 @@ class DocView extends ContentView {
         if (end == off)
             return null;
         let rects = textRange(child.dom, off, end).getClientRects();
-        return !rects.length || rects[0].top >= rects[0].bottom ? null : rects[0];
+        for (let i = 0; i < rects.length; i++) {
+            let rect = rects[i];
+            if (i == rects.length - 1 || rect.top < rect.bottom && rect.left < rect.right)
+                return rect;
+        }
+        return null;
     }
     measureVisibleLineHeights(viewport) {
         let result = [], { from, to } = viewport;
@@ -3635,22 +3640,6 @@ class InputState {
         this.compositionPendingChange = false;
         this.mouseSelection = null;
         this.handleEvent = this.handleEvent.bind(this);
-        view.scrollDOM.addEventListener("mousedown", (event) => {
-            if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom) {
-                this.runHandlers("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);
-                }
-            }
-        });
-        view.scrollDOM.addEventListener("drop", (event) => {
-            if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom)
-                this.runHandlers("drop", event);
-        });
         this.notifiedFocused = view.hasFocus;
         // On Safari adding an input event handler somehow prevents an
         // issue where the composition vanishes when you press enter.
@@ -5786,6 +5775,7 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
         whiteSpace: "pre",
         wordWrap: "normal",
         boxSizing: "border-box",
+        minHeight: "100%",
         padding: "4px 0",
         outline: "none",
         "&[contenteditable=true]": {
@@ -6381,7 +6371,6 @@ class DOMObserver {
         this.scrollTargets = [];
         this.intersection = null;
         this.resizeScroll = null;
-        this.resizeContent = null;
         this.intersecting = false;
         this.gapIntersection = null;
         this.gaps = [];
@@ -6425,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();
@@ -6704,8 +6691,10 @@ class DOMObserver {
         if (readSelection)
             this.readSelectionRange();
         let domChange = this.readChange();
-        if (!domChange)
+        if (!domChange) {
+            this.view.requestMeasure();
             return false;
+        }
         let startState = this.view.state;
         let handled = applyDOMChange(this.view, domChange);
         // The view wasn't updated
@@ -6753,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);
@@ -9049,7 +9037,7 @@ class TooltipViewManager {
         this.tooltips = this.input.filter(t => t);
         this.tooltipViews = this.tooltips.map(createTooltipView);
     }
-    update(update) {
+    update(update, above) {
         var _a;
         let input = update.state.facet(this.facet);
         let tooltips = input.filter(x => x);
@@ -9059,7 +9047,7 @@ class TooltipViewManager {
                     t.update(update);
             return false;
         }
-        let tooltipViews = [];
+        let tooltipViews = [], newAbove = above ? [] : null;
         for (let i = 0; i < tooltips.length; i++) {
             let tip = tooltips[i], known = -1;
             if (!tip)
@@ -9071,9 +9059,13 @@ class TooltipViewManager {
             }
             if (known < 0) {
                 tooltipViews[i] = this.createTooltipView(tip);
+                if (newAbove)
+                    newAbove[i] = !!tip.above;
             }
             else {
                 let tooltipView = tooltipViews[i] = this.tooltipViews[known];
+                if (newAbove)
+                    newAbove[i] = above[known];
                 if (tooltipView.update)
                     tooltipView.update(update);
             }
@@ -9083,6 +9075,10 @@ class TooltipViewManager {
                 t.dom.remove();
                 (_a = t.destroy) === null || _a === void 0 ? void 0 : _a.call(t);
             }
+        if (above) {
+            newAbove.forEach((val, i) => above[i] = val);
+            above.length = newAbove.length;
+        }
         this.input = input;
         this.tooltips = tooltips;
         this.tooltipViews = tooltipViews;
@@ -9113,6 +9109,7 @@ const knownHeight = new WeakMap();
 const tooltipPlugin = ViewPlugin.fromClass(class {
     constructor(view) {
         this.view = view;
+        this.above = [];
         this.inView = true;
         this.madeAbsolute = false;
         this.lastTransaction = 0;
@@ -9161,7 +9158,7 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
     update(update) {
         if (update.transactions.length)
             this.lastTransaction = Date.now();
-        let updated = this.manager.update(update);
+        let updated = this.manager.update(update, this.above);
         if (updated)
             this.observeIntersection();
         let shouldMeasure = updated || update.geometryChanged;
@@ -9197,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);
@@ -9218,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) {
@@ -9277,12 +9287,12 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
             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)
                     : Math.max(space.left, pos.left - width + (arrow ? 14 /* Arrow.Offset */ : 0) - offset.x);
-            let above = !!tooltip.above;
+            let above = this.above[i];
             if (!tooltip.strictSide && (above
                 ? pos.top - (size.bottom - size.top) - offset.y < space.top
                 : pos.bottom + (size.bottom - size.top) + offset.y > space.bottom) &&
                 above == (space.bottom - pos.bottom > pos.top - space.top))
-                above = !above;
+                above = this.above[i] = !above;
             let spaceVert = (above ? pos.top - space.top : space.bottom - pos.bottom) - arrowHeight;
             if (spaceVert < height && tView.resize !== false) {
                 if (spaceVert < this.view.defaultLineHeight) {
@@ -9449,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

@@ -2977,7 +2977,12 @@ class DocView extends ContentView {
         if (end == off)
             return null;
         let rects = textRange(child.dom, off, end).getClientRects();
-        return !rects.length || rects[0].top >= rects[0].bottom ? null : rects[0];
+        for (let i = 0; i < rects.length; i++) {
+            let rect = rects[i];
+            if (i == rects.length - 1 || rect.top < rect.bottom && rect.left < rect.right)
+                return rect;
+        }
+        return null;
     }
     measureVisibleLineHeights(viewport) {
         let result = [], { from, to } = viewport;
@@ -3631,22 +3636,6 @@ class InputState {
         this.compositionPendingChange = false;
         this.mouseSelection = null;
         this.handleEvent = this.handleEvent.bind(this);
-        view.scrollDOM.addEventListener("mousedown", (event) => {
-            if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom) {
-                this.runHandlers("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);
-                }
-            }
-        });
-        view.scrollDOM.addEventListener("drop", (event) => {
-            if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom)
-                this.runHandlers("drop", event);
-        });
         this.notifiedFocused = view.hasFocus;
         // On Safari adding an input event handler somehow prevents an
         // issue where the composition vanishes when you press enter.
@@ -5781,6 +5770,7 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
         whiteSpace: "pre",
         wordWrap: "normal",
         boxSizing: "border-box",
+        minHeight: "100%",
         padding: "4px 0",
         outline: "none",
         "&[contenteditable=true]": {
@@ -6376,7 +6366,6 @@ class DOMObserver {
         this.scrollTargets = [];
         this.intersection = null;
         this.resizeScroll = null;
-        this.resizeContent = null;
         this.intersecting = false;
         this.gapIntersection = null;
         this.gaps = [];
@@ -6420,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();
@@ -6699,8 +6686,10 @@ class DOMObserver {
         if (readSelection)
             this.readSelectionRange();
         let domChange = this.readChange();
-        if (!domChange)
+        if (!domChange) {
+            this.view.requestMeasure();
             return false;
+        }
         let startState = this.view.state;
         let handled = applyDOMChange(this.view, domChange);
         // The view wasn't updated
@@ -6748,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);
@@ -9044,7 +9032,7 @@ class TooltipViewManager {
         this.tooltips = this.input.filter(t => t);
         this.tooltipViews = this.tooltips.map(createTooltipView);
     }
-    update(update) {
+    update(update, above) {
         var _a;
         let input = update.state.facet(this.facet);
         let tooltips = input.filter(x => x);
@@ -9054,7 +9042,7 @@ class TooltipViewManager {
                     t.update(update);
             return false;
         }
-        let tooltipViews = [];
+        let tooltipViews = [], newAbove = above ? [] : null;
         for (let i = 0; i < tooltips.length; i++) {
             let tip = tooltips[i], known = -1;
             if (!tip)
@@ -9066,9 +9054,13 @@ class TooltipViewManager {
             }
             if (known < 0) {
                 tooltipViews[i] = this.createTooltipView(tip);
+                if (newAbove)
+                    newAbove[i] = !!tip.above;
             }
             else {
                 let tooltipView = tooltipViews[i] = this.tooltipViews[known];
+                if (newAbove)
+                    newAbove[i] = above[known];
                 if (tooltipView.update)
                     tooltipView.update(update);
             }
@@ -9078,6 +9070,10 @@ class TooltipViewManager {
                 t.dom.remove();
                 (_a = t.destroy) === null || _a === void 0 ? void 0 : _a.call(t);
             }
+        if (above) {
+            newAbove.forEach((val, i) => above[i] = val);
+            above.length = newAbove.length;
+        }
         this.input = input;
         this.tooltips = tooltips;
         this.tooltipViews = tooltipViews;
@@ -9108,6 +9104,7 @@ const knownHeight = /*@__PURE__*/new WeakMap();
 const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
     constructor(view) {
         this.view = view;
+        this.above = [];
         this.inView = true;
         this.madeAbsolute = false;
         this.lastTransaction = 0;
@@ -9156,7 +9153,7 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
     update(update) {
         if (update.transactions.length)
             this.lastTransaction = Date.now();
-        let updated = this.manager.update(update);
+        let updated = this.manager.update(update, this.above);
         if (updated)
             this.observeIntersection();
         let shouldMeasure = updated || update.geometryChanged;
@@ -9192,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);
@@ -9213,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) {
@@ -9272,12 +9282,12 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
             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)
                     : Math.max(space.left, pos.left - width + (arrow ? 14 /* Arrow.Offset */ : 0) - offset.x);
-            let above = !!tooltip.above;
+            let above = this.above[i];
             if (!tooltip.strictSide && (above
                 ? pos.top - (size.bottom - size.top) - offset.y < space.top
                 : pos.bottom + (size.bottom - size.top) + offset.y > space.bottom) &&
                 above == (space.bottom - pos.bottom > pos.top - space.top))
-                above = !above;
+                above = this.above[i] = !above;
             let spaceVert = (above ? pos.top - space.top : space.bottom - pos.bottom) - arrowHeight;
             if (spaceVert < height && tView.resize !== false) {
                 if (spaceVert < this.view.defaultLineHeight) {
@@ -9444,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.2",
+  "version": "6.21.4",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",