@codemirror/view 6.28.5 → 6.29.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 6.29.0 (2024-07-25)
+
+### Bug fixes
+
+Fix an issue that caused typing into an editor marked read-only to cause document changes when using `EditContext`.
+
+Associate a cursor created by clicking above the end of the text on a wrap point with the line before it.
+
+### New features
+
+The package now exports the type of hover tooltip sources as `HoverTooltipSource`.
+
+## 6.28.6 (2024-07-19)
+
+### Bug fixes
+
+Fix an issue where the editor got confused about the position of inserted text when using Chrome's `EditContext` and canceling transactions for typed text.
+
 ## 6.28.5 (2024-07-17)
 
 ### Bug fixes

package/dist/index.cjs

@@ -4252,8 +4252,7 @@ function rangeForClick(view, pos, bias, type) {
         return state.EditorSelection.range(from, to);
     }
 }
-let insideY = (y, rect) => y >= rect.top && y <= rect.bottom;
-let inside = (x, y, rect) => insideY(y, rect) && x >= rect.left && x <= rect.right;
+let inside = (x, y, rect) => y >= rect.top && y <= rect.bottom && x >= rect.left && x <= rect.right;
 // Try to determine, for the given coordinates, associated with the
 // given position, whether they are related to the element before or
 // the element after the position.
@@ -4275,8 +4274,8 @@ function findPositionSide(view, pos, x, y) {
     if (after && inside(x, y, after))
         return 1;
     // This is probably a line wrap point. Pick before if the point is
-    // beside it.
-    return before && insideY(y, before) ? -1 : 1;
+    // above its bottom.
+    return before && before.bottom >= y ? -1 : 1;
 }
 function queryPos(view, event) {
     let pos = view.posAtCoords({ x: event.clientX, y: event.clientY }, false);
@@ -7123,11 +7122,14 @@ class EditContextManager {
             if (change.from == change.to && !change.insert.length)
                 return;
             this.pendingContextChange = change;
-            applyDOMChangeInner(view, change, state.EditorSelection.single(this.toEditorPos(e.selectionStart), this.toEditorPos(e.selectionEnd)));
+            if (!view.state.readOnly)
+                applyDOMChangeInner(view, change, state.EditorSelection.single(this.toEditorPos(e.selectionStart), this.toEditorPos(e.selectionEnd)));
             // If the transaction didn't flush our change, revert it so
             // that the context is in sync with the editor state again.
-            if (this.pendingContextChange)
+            if (this.pendingContextChange) {
                 this.revertPending(view.state);
+                this.setSelection(view.state);
+            }
         };
         this.handlers.characterboundsupdate = e => {
             let rects = [], prev = null;
@@ -7209,13 +7211,14 @@ class EditContextManager {
         return !abort;
     }
     update(update) {
+        let reverted = this.pendingContextChange;
         if (!this.applyEdits(update) || !this.rangeIsValid(update.state)) {
             this.pendingContextChange = null;
             this.resetRange(update.state);
             this.editContext.updateText(0, this.editContext.text.length, update.state.doc.sliceString(this.from, this.to));
             this.setSelection(update.state);
         }
-        else if (update.docChanged || update.selectionSet) {
+        else if (update.docChanged || update.selectionSet || reverted) {
             this.setSelection(update.state);
         }
         if (update.geometryChanged || update.docChanged || update.selectionSet)
@@ -7229,7 +7232,7 @@ class EditContextManager {
     revertPending(state) {
         let pending = this.pendingContextChange;
         this.pendingContextChange = null;
-        this.editContext.updateText(this.toContextPos(pending.from), this.toContextPos(pending.to + pending.insert.length), state.doc.sliceString(pending.from, pending.to));
+        this.editContext.updateText(this.toContextPos(pending.from), this.toContextPos(pending.from + pending.insert.length), state.doc.sliceString(pending.from, pending.to));
     }
     setSelection(state) {
         let { main } = state.selection;
@@ -9863,9 +9866,10 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
             let arrowHeight = arrow ? 7 /* Arrow.Size */ : 0;
             let width = size.right - size.left, height = (_a = knownHeight.get(tView)) !== null && _a !== void 0 ? _a : size.bottom - size.top;
             let offset = tView.offset || noOffset, ltr = this.view.textDirection == exports.Direction.LTR;
-            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 left = size.width > space.right - space.left
+                ? (ltr ? space.left : space.right - size.width)
+                : ltr ? Math.max(space.left, Math.min(pos.left - (arrow ? 14 /* Arrow.Offset */ : 0) + offset.x, space.right - width))
+                    : Math.min(Math.max(space.left, pos.left - width + (arrow ? 14 /* Arrow.Offset */ : 0) - offset.x), space.right - width);
             let above = this.above[i];
             if (!tooltip.strictSide && (above
                 ? pos.top - (size.bottom - size.top) - offset.y < space.top

package/dist/index.d.cts

@@ -1931,7 +1931,11 @@ interface TooltipView {
 Facet to which an extension can add a value to show a tooltip.
 */
 declare const showTooltip: Facet<Tooltip | null, readonly (Tooltip | null)[]>;
-type HoverSource = (view: EditorView, pos: number, side: -1 | 1) => Tooltip | readonly Tooltip[] | null | Promise<Tooltip | readonly Tooltip[] | null>;
+/**
+The type of function that can be used as a [hover tooltip
+source](https://codemirror.net/6/docs/ref/#view.hoverTooltip^source).
+*/
+type HoverTooltipSource = (view: EditorView, pos: number, side: -1 | 1) => Tooltip | readonly Tooltip[] | null | Promise<Tooltip | readonly Tooltip[] | null>;
 /**
 Set up a hover tooltip, which shows up when the pointer hovers
 over ranges of text. The callback is called when the mouse hovers
@@ -1945,7 +1949,7 @@ Note that all hover tooltips are hosted within a single tooltip
 container element. This allows multiple tooltips over the same
 range to be "merged" together without overlapping.
 */
-declare function hoverTooltip(source: HoverSource, options?: {
+declare function hoverTooltip(source: HoverTooltipSource, options?: {
     /**
     Controls whether a transaction hides the tooltip. The default
     is to not hide.
@@ -2180,4 +2184,4 @@ trailing whitespace.
 */
 declare function highlightTrailingWhitespace(): Extension;
 
-export { BidiSpan, BlockInfo, BlockType, type Command, type DOMEventHandlers, type DOMEventMap, Decoration, type DecorationSet, Direction, EditorView, type EditorViewConfig, GutterMarker, type KeyBinding, type LayerMarker, MatchDecorator, type MouseSelectionStyle, type Panel, type PanelConstructor, type PluginSpec, type PluginValue, type Rect, RectangleMarker, type Tooltip, type TooltipView, ViewPlugin, ViewUpdate, WidgetType, closeHoverTooltips, crosshairCursor, drawSelection, dropCursor, getDrawSelectionConfig, getPanel, getTooltip, gutter, gutterLineClass, gutters, hasHoverTooltips, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, highlightTrailingWhitespace, highlightWhitespace, hoverTooltip, keymap, layer, lineNumberMarkers, lineNumbers, logException, panels, placeholder, rectangularSelection, repositionTooltips, runScopeHandlers, scrollPastEnd, showPanel, showTooltip, tooltips };
+export { BidiSpan, BlockInfo, BlockType, type Command, type DOMEventHandlers, type DOMEventMap, Decoration, type DecorationSet, Direction, EditorView, type EditorViewConfig, GutterMarker, type HoverTooltipSource, type KeyBinding, type LayerMarker, MatchDecorator, type MouseSelectionStyle, type Panel, type PanelConstructor, type PluginSpec, type PluginValue, type Rect, RectangleMarker, type Tooltip, type TooltipView, ViewPlugin, ViewUpdate, WidgetType, closeHoverTooltips, crosshairCursor, drawSelection, dropCursor, getDrawSelectionConfig, getPanel, getTooltip, gutter, gutterLineClass, gutters, hasHoverTooltips, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, highlightTrailingWhitespace, highlightWhitespace, hoverTooltip, keymap, layer, lineNumberMarkers, lineNumbers, logException, panels, placeholder, rectangularSelection, repositionTooltips, runScopeHandlers, scrollPastEnd, showPanel, showTooltip, tooltips };

package/dist/index.d.ts

@@ -1931,7 +1931,11 @@ interface TooltipView {
 Facet to which an extension can add a value to show a tooltip.
 */
 declare const showTooltip: Facet<Tooltip | null, readonly (Tooltip | null)[]>;
-type HoverSource = (view: EditorView, pos: number, side: -1 | 1) => Tooltip | readonly Tooltip[] | null | Promise<Tooltip | readonly Tooltip[] | null>;
+/**
+The type of function that can be used as a [hover tooltip
+source](https://codemirror.net/6/docs/ref/#view.hoverTooltip^source).
+*/
+type HoverTooltipSource = (view: EditorView, pos: number, side: -1 | 1) => Tooltip | readonly Tooltip[] | null | Promise<Tooltip | readonly Tooltip[] | null>;
 /**
 Set up a hover tooltip, which shows up when the pointer hovers
 over ranges of text. The callback is called when the mouse hovers
@@ -1945,7 +1949,7 @@ Note that all hover tooltips are hosted within a single tooltip
 container element. This allows multiple tooltips over the same
 range to be "merged" together without overlapping.
 */
-declare function hoverTooltip(source: HoverSource, options?: {
+declare function hoverTooltip(source: HoverTooltipSource, options?: {
     /**
     Controls whether a transaction hides the tooltip. The default
     is to not hide.
@@ -2180,4 +2184,4 @@ trailing whitespace.
 */
 declare function highlightTrailingWhitespace(): Extension;
 
-export { BidiSpan, BlockInfo, BlockType, type Command, type DOMEventHandlers, type DOMEventMap, Decoration, type DecorationSet, Direction, EditorView, type EditorViewConfig, GutterMarker, type KeyBinding, type LayerMarker, MatchDecorator, type MouseSelectionStyle, type Panel, type PanelConstructor, type PluginSpec, type PluginValue, type Rect, RectangleMarker, type Tooltip, type TooltipView, ViewPlugin, ViewUpdate, WidgetType, closeHoverTooltips, crosshairCursor, drawSelection, dropCursor, getDrawSelectionConfig, getPanel, getTooltip, gutter, gutterLineClass, gutters, hasHoverTooltips, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, highlightTrailingWhitespace, highlightWhitespace, hoverTooltip, keymap, layer, lineNumberMarkers, lineNumbers, logException, panels, placeholder, rectangularSelection, repositionTooltips, runScopeHandlers, scrollPastEnd, showPanel, showTooltip, tooltips };
+export { BidiSpan, BlockInfo, BlockType, type Command, type DOMEventHandlers, type DOMEventMap, Decoration, type DecorationSet, Direction, EditorView, type EditorViewConfig, GutterMarker, type HoverTooltipSource, type KeyBinding, type LayerMarker, MatchDecorator, type MouseSelectionStyle, type Panel, type PanelConstructor, type PluginSpec, type PluginValue, type Rect, RectangleMarker, type Tooltip, type TooltipView, ViewPlugin, ViewUpdate, WidgetType, closeHoverTooltips, crosshairCursor, drawSelection, dropCursor, getDrawSelectionConfig, getPanel, getTooltip, gutter, gutterLineClass, gutters, hasHoverTooltips, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, highlightTrailingWhitespace, highlightWhitespace, hoverTooltip, keymap, layer, lineNumberMarkers, lineNumbers, logException, panels, placeholder, rectangularSelection, repositionTooltips, runScopeHandlers, scrollPastEnd, showPanel, showTooltip, tooltips };

package/dist/index.js

@@ -4248,8 +4248,7 @@ function rangeForClick(view, pos, bias, type) {
         return EditorSelection.range(from, to);
     }
 }
-let insideY = (y, rect) => y >= rect.top && y <= rect.bottom;
-let inside = (x, y, rect) => insideY(y, rect) && x >= rect.left && x <= rect.right;
+let inside = (x, y, rect) => y >= rect.top && y <= rect.bottom && x >= rect.left && x <= rect.right;
 // Try to determine, for the given coordinates, associated with the
 // given position, whether they are related to the element before or
 // the element after the position.
@@ -4271,8 +4270,8 @@ function findPositionSide(view, pos, x, y) {
     if (after && inside(x, y, after))
         return 1;
     // This is probably a line wrap point. Pick before if the point is
-    // beside it.
-    return before && insideY(y, before) ? -1 : 1;
+    // above its bottom.
+    return before && before.bottom >= y ? -1 : 1;
 }
 function queryPos(view, event) {
     let pos = view.posAtCoords({ x: event.clientX, y: event.clientY }, false);
@@ -7118,11 +7117,14 @@ class EditContextManager {
             if (change.from == change.to && !change.insert.length)
                 return;
             this.pendingContextChange = change;
-            applyDOMChangeInner(view, change, EditorSelection.single(this.toEditorPos(e.selectionStart), this.toEditorPos(e.selectionEnd)));
+            if (!view.state.readOnly)
+                applyDOMChangeInner(view, change, EditorSelection.single(this.toEditorPos(e.selectionStart), this.toEditorPos(e.selectionEnd)));
             // If the transaction didn't flush our change, revert it so
             // that the context is in sync with the editor state again.
-            if (this.pendingContextChange)
+            if (this.pendingContextChange) {
                 this.revertPending(view.state);
+                this.setSelection(view.state);
+            }
         };
         this.handlers.characterboundsupdate = e => {
             let rects = [], prev = null;
@@ -7204,13 +7206,14 @@ class EditContextManager {
         return !abort;
     }
     update(update) {
+        let reverted = this.pendingContextChange;
         if (!this.applyEdits(update) || !this.rangeIsValid(update.state)) {
             this.pendingContextChange = null;
             this.resetRange(update.state);
             this.editContext.updateText(0, this.editContext.text.length, update.state.doc.sliceString(this.from, this.to));
             this.setSelection(update.state);
         }
-        else if (update.docChanged || update.selectionSet) {
+        else if (update.docChanged || update.selectionSet || reverted) {
             this.setSelection(update.state);
         }
         if (update.geometryChanged || update.docChanged || update.selectionSet)
@@ -7224,7 +7227,7 @@ class EditContextManager {
     revertPending(state) {
         let pending = this.pendingContextChange;
         this.pendingContextChange = null;
-        this.editContext.updateText(this.toContextPos(pending.from), this.toContextPos(pending.to + pending.insert.length), state.doc.sliceString(pending.from, pending.to));
+        this.editContext.updateText(this.toContextPos(pending.from), this.toContextPos(pending.from + pending.insert.length), state.doc.sliceString(pending.from, pending.to));
     }
     setSelection(state) {
         let { main } = state.selection;
@@ -9858,9 +9861,10 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
             let arrowHeight = arrow ? 7 /* Arrow.Size */ : 0;
             let width = size.right - size.left, height = (_a = knownHeight.get(tView)) !== null && _a !== void 0 ? _a : size.bottom - size.top;
             let offset = tView.offset || noOffset, ltr = this.view.textDirection == Direction.LTR;
-            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 left = size.width > space.right - space.left
+                ? (ltr ? space.left : space.right - size.width)
+                : ltr ? Math.max(space.left, Math.min(pos.left - (arrow ? 14 /* Arrow.Offset */ : 0) + offset.x, space.right - width))
+                    : Math.min(Math.max(space.left, pos.left - width + (arrow ? 14 /* Arrow.Offset */ : 0) - offset.x), space.right - width);
             let above = this.above[i];
             if (!tooltip.strictSide && (above
                 ? pos.top - (size.bottom - size.top) - offset.y < space.top

package/package.json

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