@codemirror/view 6.21.2 → 6.21.3

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 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]": {
@@ -6704,8 +6694,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
@@ -9049,7 +9041,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 +9051,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 +9063,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 +9079,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 +9113,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 +9162,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;
@@ -9277,12 +9278,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) {

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]": {
@@ -6699,8 +6689,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
@@ -9044,7 +9036,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 +9046,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 +9058,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 +9074,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 +9108,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 +9157,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;
@@ -9272,12 +9273,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) {

package/package.json

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