@codemirror/view 6.4.1 → 6.5.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 6.5.0 (2022-11-14)
+
+### Bug fixes
+
+Fix an issue where key bindings were activated for the wrong key in some situations with non-US keyboards.
+
+### New features
+
+A tooltip's `positioned` callback is now passed the available space for tooltips.
+
+## 6.4.2 (2022-11-10)
+
+### Bug fixes
+
+Typing into a read-only editor no longer moves the cursor.
+
+Fix an issue where hover tooltips were closed when the mouse was moved over them if they had a custom parent element.
+
+Fix an issue where the editor could end up displaying incorrect height measurements (typically after initializing).
+
 ## 6.4.1 (2022-11-07)
 
 ### Bug fixes

package/dist/index.cjs

@@ -4038,9 +4038,9 @@ handlers.beforeinput = (view, event) => {
 
 const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line", "break-spaces"];
 class HeightOracle {
-    constructor() {
+    constructor(lineWrapping) {
+        this.lineWrapping = lineWrapping;
         this.doc = state.Text.empty;
-        this.lineWrapping = false;
         this.heightSamples = {};
         this.lineHeight = 14;
         this.charWidth = 7;
@@ -4780,7 +4780,6 @@ class ViewState {
         this.contentDOMHeight = 0;
         this.editorHeight = 0;
         this.editorWidth = 0;
-        this.heightOracle = new HeightOracle;
         // See VP.MaxDOMHeight
         this.scaler = IdScaler;
         this.scrollTarget = null;
@@ -4800,6 +4799,8 @@ class ViewState {
         // boundary and, if so, reset it to make sure it is positioned in
         // the right place.
         this.mustEnforceCursorAssoc = false;
+        let guessWrapping = state$1.facet(contentAttributes).some(v => typeof v != "function" && v.class == "cm-lineWrapping");
+        this.heightOracle = new HeightOracle(guessWrapping);
         this.stateDeco = state$1.facet(decorations).filter(d => typeof d != "function");
         this.heightMap = HeightMap.empty().applyChanges(this.stateDeco, state.Text.empty, this.heightOracle.setDoc(state$1.doc), [new ChangedRange(0, 0, 0, state$1.doc.length)]);
         this.viewport = this.getViewport(0, null);
@@ -4918,9 +4919,7 @@ class ViewState {
             oracle.heightChanged = false;
             for (let vp of this.viewports) {
                 let heights = vp.from == this.viewport.from ? lineHeights : view.docView.measureVisibleLineHeights(vp);
-                this.heightMap = refresh
-                    ? HeightMap.empty().applyChanges(this.stateDeco, state.Text.empty, this.heightOracle, [new ChangedRange(0, 0, 0, view.state.doc.length)])
-                    : this.heightMap.updateHeight(oracle, 0, refresh, new MeasuredHeights(vp.from, heights));
+                this.heightMap = (refresh ? HeightMap.empty().applyChanges(this.stateDeco, state.Text.empty, this.heightOracle, [new ChangedRange(0, 0, 0, view.state.doc.length)]) : this.heightMap).updateHeight(oracle, 0, refresh, new MeasuredHeights(vp.from, heights));
             }
             if (oracle.heightChanged)
                 result |= 2 /* UpdateFlag.Height */;
@@ -5486,7 +5485,11 @@ class DOMChange {
         this.bounds = null;
         this.text = "";
         let { impreciseHead: iHead, impreciseAnchor: iAnchor } = view.docView;
-        if (start > -1 && !view.state.readOnly && (this.bounds = view.docView.domBoundsAround(start, end, 0))) {
+        if (view.state.readOnly && start > -1) {
+            // Ignore changes when the editor is read-only
+            this.newSel = null;
+        }
+        else if (start > -1 && (this.bounds = view.docView.domBoundsAround(start, end, 0))) {
             let selPoints = iHead || iAnchor ? [] : selectionPoints(view);
             let reader = new DOMReader(selPoints, view.state);
             reader.readRange(this.bounds.startDOM, this.bounds.endDOM);
@@ -7273,7 +7276,7 @@ function runHandlers(map, event, view, scope) {
     if (scopeObj) {
         if (runFor(scopeObj[prefix + modifiers(name, event, !isChar)]))
             return true;
-        if (isChar && (event.shiftKey || event.altKey || event.metaKey || charCode > 127) &&
+        if (isChar && (event.altKey || event.metaKey || event.ctrlKey) &&
             (baseName = w3cKeyname.base[event.keyCode]) && baseName != name) {
             if (runFor(scopeObj[prefix + modifiers(baseName, event, true)]))
                 return true;
@@ -8354,7 +8357,7 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
             dom.classList.toggle("cm-tooltip-above", above);
             dom.classList.toggle("cm-tooltip-below", !above);
             if (tView.positioned)
-                tView.positioned();
+                tView.positioned(measured.space);
         }
     }
     maybeMeasure() {
@@ -8470,10 +8473,10 @@ class HoverTooltipHost {
         }
         this.mounted = true;
     }
-    positioned() {
+    positioned(space) {
         for (let hostedView of this.manager.tooltipViews) {
             if (hostedView.positioned)
-                hostedView.positioned();
+                hostedView.positioned(space);
         }
     }
     update(update) {
@@ -8570,10 +8573,10 @@ class HoverPlugin {
             }
         }
     }
-    mouseleave() {
+    mouseleave(e) {
         clearTimeout(this.hoverTimeout);
         this.hoverTimeout = -1;
-        if (this.active)
+        if (this.active && !isInTooltip(e.relatedTarget))
             this.view.dispatch({ effects: this.setHover.of(null) });
     }
     destroy() {

package/dist/index.d.ts

@@ -1491,12 +1491,7 @@ declare function tooltips(config?: {
     for showing tooltips. You can provide a function here that
     returns an alternative rectangle.
     */
-    tooltipSpace?: (view: EditorView) => {
-        top: number;
-        left: number;
-        bottom: number;
-        right: number;
-    };
+    tooltipSpace?: (view: EditorView) => Rect;
 }): Extension;
 /**
 Describes a tooltip. Values of this type, when provided through
@@ -1584,9 +1579,11 @@ interface TooltipView {
     */
     destroy?(): void;
     /**
-    Called when the tooltip has been (re)positioned.
+    Called when the tooltip has been (re)positioned. The argument is
+    the [space](https://codemirror.net/6/docs/ref/#view.tooltips^config.tooltipSpace) available to the
+    tooltip.
     */
-    positioned?(): void;
+    positioned?(space: Rect): void;
 }
 /**
 Facet to which an extension can add a value to show a tooltip.

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, EditorState, findColumn, CharCategory, Prec, Transaction, codePointAt, codePointSize, combineConfig, StateField, RangeSetBuilder, countColumn } from '@codemirror/state';
+import { Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, EditorState, findColumn, CharCategory, Transaction, Prec, codePointAt, codePointSize, combineConfig, StateField, RangeSetBuilder, countColumn } from '@codemirror/state';
 import { StyleModule } from 'style-mod';
 import { keyName, base, shift } from 'w3c-keyname';
 
@@ -4032,9 +4032,9 @@ handlers.beforeinput = (view, event) => {
 
 const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line", "break-spaces"];
 class HeightOracle {
-    constructor() {
+    constructor(lineWrapping) {
+        this.lineWrapping = lineWrapping;
         this.doc = Text.empty;
-        this.lineWrapping = false;
         this.heightSamples = {};
         this.lineHeight = 14;
         this.charWidth = 7;
@@ -4773,7 +4773,6 @@ class ViewState {
         this.contentDOMHeight = 0;
         this.editorHeight = 0;
         this.editorWidth = 0;
-        this.heightOracle = new HeightOracle;
         // See VP.MaxDOMHeight
         this.scaler = IdScaler;
         this.scrollTarget = null;
@@ -4793,6 +4792,8 @@ class ViewState {
         // boundary and, if so, reset it to make sure it is positioned in
         // the right place.
         this.mustEnforceCursorAssoc = false;
+        let guessWrapping = state.facet(contentAttributes).some(v => typeof v != "function" && v.class == "cm-lineWrapping");
+        this.heightOracle = new HeightOracle(guessWrapping);
         this.stateDeco = state.facet(decorations).filter(d => typeof d != "function");
         this.heightMap = HeightMap.empty().applyChanges(this.stateDeco, Text.empty, this.heightOracle.setDoc(state.doc), [new ChangedRange(0, 0, 0, state.doc.length)]);
         this.viewport = this.getViewport(0, null);
@@ -4911,9 +4912,7 @@ class ViewState {
             oracle.heightChanged = false;
             for (let vp of this.viewports) {
                 let heights = vp.from == this.viewport.from ? lineHeights : view.docView.measureVisibleLineHeights(vp);
-                this.heightMap = refresh
-                    ? HeightMap.empty().applyChanges(this.stateDeco, Text.empty, this.heightOracle, [new ChangedRange(0, 0, 0, view.state.doc.length)])
-                    : this.heightMap.updateHeight(oracle, 0, refresh, new MeasuredHeights(vp.from, heights));
+                this.heightMap = (refresh ? HeightMap.empty().applyChanges(this.stateDeco, Text.empty, this.heightOracle, [new ChangedRange(0, 0, 0, view.state.doc.length)]) : this.heightMap).updateHeight(oracle, 0, refresh, new MeasuredHeights(vp.from, heights));
             }
             if (oracle.heightChanged)
                 result |= 2 /* UpdateFlag.Height */;
@@ -5479,7 +5478,11 @@ class DOMChange {
         this.bounds = null;
         this.text = "";
         let { impreciseHead: iHead, impreciseAnchor: iAnchor } = view.docView;
-        if (start > -1 && !view.state.readOnly && (this.bounds = view.docView.domBoundsAround(start, end, 0))) {
+        if (view.state.readOnly && start > -1) {
+            // Ignore changes when the editor is read-only
+            this.newSel = null;
+        }
+        else if (start > -1 && (this.bounds = view.docView.domBoundsAround(start, end, 0))) {
             let selPoints = iHead || iAnchor ? [] : selectionPoints(view);
             let reader = new DOMReader(selPoints, view.state);
             reader.readRange(this.bounds.startDOM, this.bounds.endDOM);
@@ -7266,7 +7269,7 @@ function runHandlers(map, event, view, scope) {
     if (scopeObj) {
         if (runFor(scopeObj[prefix + modifiers(name, event, !isChar)]))
             return true;
-        if (isChar && (event.shiftKey || event.altKey || event.metaKey || charCode > 127) &&
+        if (isChar && (event.altKey || event.metaKey || event.ctrlKey) &&
             (baseName = base[event.keyCode]) && baseName != name) {
             if (runFor(scopeObj[prefix + modifiers(baseName, event, true)]))
                 return true;
@@ -8347,7 +8350,7 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
             dom.classList.toggle("cm-tooltip-above", above);
             dom.classList.toggle("cm-tooltip-below", !above);
             if (tView.positioned)
-                tView.positioned();
+                tView.positioned(measured.space);
         }
     }
     maybeMeasure() {
@@ -8463,10 +8466,10 @@ class HoverTooltipHost {
         }
         this.mounted = true;
     }
-    positioned() {
+    positioned(space) {
         for (let hostedView of this.manager.tooltipViews) {
             if (hostedView.positioned)
-                hostedView.positioned();
+                hostedView.positioned(space);
         }
     }
     update(update) {
@@ -8563,10 +8566,10 @@ class HoverPlugin {
             }
         }
     }
-    mouseleave() {
+    mouseleave(e) {
         clearTimeout(this.hoverTimeout);
         this.hoverTimeout = -1;
-        if (this.active)
+        if (this.active && !isInTooltip(e.relatedTarget))
             this.view.dispatch({ effects: this.setHover.of(null) });
     }
     destroy() {

package/package.json

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