@codemirror/view 6.38.5 → 6.38.7

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 6.38.7 (2025-11-14)
+
+### Bug fixes
+
+Make detection of transformed tooltip parent elements (forcing absolute positioning) more robust on current browsers.
+
+Avoid an issue where on Chrome and Safari, typing over a cross-line selection can replace widgets on the line after the selection with their plain text content.
+
+Fix a bug that broke insertion of composed input at multiple cursors when the IME keeps the selection at the start of the composed text.
+
+## 6.38.6 (2025-10-13)
+
+### Bug fixes
+
+Work around a regression in Safari 26 that causes fragments of old selections to remain visible.
+
 ## 6.38.5 (2025-10-07)
 
 ### Bug fixes

package/dist/index.cjs

@@ -3324,6 +3324,13 @@ class DocView extends ContentView {
         let { offsetWidth, offsetHeight } = this.view.scrollDOM;
         scrollRectIntoView(this.view.scrollDOM, targetRect, range.head < range.anchor ? -1 : 1, target.x, target.y, Math.max(Math.min(target.xMargin, offsetWidth), -offsetWidth), Math.max(Math.min(target.yMargin, offsetHeight), -offsetHeight), this.view.textDirection == exports.Direction.LTR);
     }
+    lineHasWidget(pos) {
+        let { i } = this.childCursor().findPos(pos);
+        if (i == this.children.length)
+            return false;
+        let scan = (child) => child instanceof WidgetView || child.children.some(scan);
+        return scan(this.children[i]);
+    }
 }
 function betweenUneditable(pos) {
     return pos.node.nodeType == 1 && pos.node.firstChild &&
@@ -4069,6 +4076,18 @@ function applyDOMChange(view, domChange) {
             insert: view.state.doc.slice(sel.from, change.from).append(change.insert).append(view.state.doc.slice(change.to, sel.to))
         };
     }
+    else if (view.state.doc.lineAt(sel.from).to < sel.to && view.docView.lineHasWidget(sel.to) &&
+        view.inputState.insertingTextAt > Date.now() - 50) {
+        // For a cross-line insertion, Chrome and Safari will crudely take
+        // the text of the line after the selection, flattening any
+        // widgets, and move it into the joined line. This tries to detect
+        // such a situation, and replaces the change with a selection
+        // replace of the text provided by the beforeinput event.
+        change = {
+            from: sel.from, to: sel.to,
+            insert: view.state.toText(view.inputState.insertingText)
+        };
+    }
     else if (browser.chrome && change && change.from == change.to && change.from == sel.head &&
         change.insert.toString() == "\n " && view.lineWrapping) {
         // In Chrome, if you insert a space at the start of a wrapped
@@ -4155,7 +4174,7 @@ function applyDefaultInsert(view, change, newSel) {
         let mainSel = newSel && newSel.main.to <= changes.newLength ? newSel.main : undefined;
         // Try to apply a composition change to all cursors
         if (startState.selection.ranges.length > 1 && view.inputState.composing >= 0 &&
-            change.to <= sel.to && change.to >= sel.to - 10) {
+            change.to <= sel.to + 10 && change.to >= sel.to - 10) {
             let replaced = view.state.sliceDoc(change.from, change.to);
             let compositionRange, composition = newSel && findCompositionNode(view, newSel.main.head);
             if (composition) {
@@ -4302,6 +4321,9 @@ class InputState {
         // Used to categorize changes as part of a composition, even when
         // the mutation events fire shortly after the compositionend event
         this.compositionPendingChange = false;
+        // Set by beforeinput, used in DOM change reader
+        this.insertingText = "";
+        this.insertingTextAt = 0;
         this.mouseSelection = null;
         // When a drag from the editor is active, this points at the range
         // being dragged.
@@ -5056,6 +5078,10 @@ observers.contextmenu = view => {
 };
 handlers.beforeinput = (view, event) => {
     var _a, _b;
+    if (event.inputType == "insertText" || event.inputType == "insertCompositionText") {
+        view.inputState.insertingText = event.data;
+        view.inputState.insertingTextAt = Date.now();
+    }
     // In EditContext mode, we must handle insertReplacementText events
     // directly, to make spell checking corrections work
     if (event.inputType == "insertReplacementText" && view.observer.editContext) {
@@ -8562,7 +8588,7 @@ Facet that works much like
 [`decorations`](https://codemirror.net/6/docs/ref/#view.EditorView^decorations), but puts its
 inputs at the very bottom of the precedence stack, meaning mark
 decorations provided here will only be split by other, partially
-overlapping \`outerDecorations\` ranges, and wrap around all
+overlapping `outerDecorations` ranges, and wrap around all
 regular decorations. Use this for mark elements that should, as
 much as possible, remain in one piece.
 */
@@ -9130,7 +9156,7 @@ class LayerView {
                 old = next;
             }
             this.drawn = markers;
-            if (browser.ios) // Issue #1600
+            if (browser.safari && browser.safari_version >= 26) // Issue #1600, 1627
                 this.dom.style.display = this.dom.firstChild ? "" : "none";
         }
     }
@@ -10060,18 +10086,18 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
         let scaleX = 1, scaleY = 1, makeAbsolute = false;
         if (this.position == "fixed" && this.manager.tooltipViews.length) {
             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 if (dom.style.top == Outside && dom.style.left == "0px") {
-                // On other browsers, we have to awkwardly try and use other
-                // information to detect a transform.
+            if (browser.safari) {
+                // Safari always sets offsetParent to null, even if a fixed
+                // element is positioned relative to a transformed parent. So
+                // we use this kludge to try and detect this.
                 let rect = dom.getBoundingClientRect();
                 makeAbsolute = Math.abs(rect.top + 10000) > 1 || Math.abs(rect.left) > 1;
             }
+            else {
+                // More conforming browsers will set offsetParent to the
+                // transformed element.
+                makeAbsolute = !!dom.offsetParent && dom.offsetParent != this.container.ownerDocument.body;
+            }
         }
         if (makeAbsolute || this.position == "absolute") {
             if (this.parent) {

package/dist/index.d.cts

@@ -1265,7 +1265,7 @@ declare class EditorView {
     [`decorations`](https://codemirror.net/6/docs/ref/#view.EditorView^decorations), but puts its
     inputs at the very bottom of the precedence stack, meaning mark
     decorations provided here will only be split by other, partially
-    overlapping \`outerDecorations\` ranges, and wrap around all
+    overlapping `outerDecorations` ranges, and wrap around all
     regular decorations. Use this for mark elements that should, as
     much as possible, remain in one piece.
     */
@@ -2091,8 +2091,8 @@ declare const showPanel: Facet<PanelConstructor | null, readonly (PanelConstruct
 type DialogConfig = {
     /**
     A function to render the content of the dialog. The result
-    should contain at least one `<form>` element. Submit handlers a
-    handler for the Escape key will be added to the form.
+    should contain at least one `<form>` element. Submit handlers
+    and a handler for the Escape key will be added to the form.
     
     If this is not given, the `label`, `input`, and `submitLabel`
     fields will be used to create a simple form for you.

package/dist/index.d.ts

@@ -1265,7 +1265,7 @@ declare class EditorView {
     [`decorations`](https://codemirror.net/6/docs/ref/#view.EditorView^decorations), but puts its
     inputs at the very bottom of the precedence stack, meaning mark
     decorations provided here will only be split by other, partially
-    overlapping \`outerDecorations\` ranges, and wrap around all
+    overlapping `outerDecorations` ranges, and wrap around all
     regular decorations. Use this for mark elements that should, as
     much as possible, remain in one piece.
     */
@@ -2091,8 +2091,8 @@ declare const showPanel: Facet<PanelConstructor | null, readonly (PanelConstruct
 type DialogConfig = {
     /**
     A function to render the content of the dialog. The result
-    should contain at least one `<form>` element. Submit handlers a
-    handler for the Escape key will be added to the form.
+    should contain at least one `<form>` element. Submit handlers
+    and a handler for the Escape key will be added to the form.
     
     If this is not given, the `label`, `input`, and `submitLabel`
     fields will be used to create a simple form for you.

package/dist/index.js

@@ -3320,6 +3320,13 @@ class DocView extends ContentView {
         let { offsetWidth, offsetHeight } = this.view.scrollDOM;
         scrollRectIntoView(this.view.scrollDOM, targetRect, range.head < range.anchor ? -1 : 1, target.x, target.y, Math.max(Math.min(target.xMargin, offsetWidth), -offsetWidth), Math.max(Math.min(target.yMargin, offsetHeight), -offsetHeight), this.view.textDirection == Direction.LTR);
     }
+    lineHasWidget(pos) {
+        let { i } = this.childCursor().findPos(pos);
+        if (i == this.children.length)
+            return false;
+        let scan = (child) => child instanceof WidgetView || child.children.some(scan);
+        return scan(this.children[i]);
+    }
 }
 function betweenUneditable(pos) {
     return pos.node.nodeType == 1 && pos.node.firstChild &&
@@ -4065,6 +4072,18 @@ function applyDOMChange(view, domChange) {
             insert: view.state.doc.slice(sel.from, change.from).append(change.insert).append(view.state.doc.slice(change.to, sel.to))
         };
     }
+    else if (view.state.doc.lineAt(sel.from).to < sel.to && view.docView.lineHasWidget(sel.to) &&
+        view.inputState.insertingTextAt > Date.now() - 50) {
+        // For a cross-line insertion, Chrome and Safari will crudely take
+        // the text of the line after the selection, flattening any
+        // widgets, and move it into the joined line. This tries to detect
+        // such a situation, and replaces the change with a selection
+        // replace of the text provided by the beforeinput event.
+        change = {
+            from: sel.from, to: sel.to,
+            insert: view.state.toText(view.inputState.insertingText)
+        };
+    }
     else if (browser.chrome && change && change.from == change.to && change.from == sel.head &&
         change.insert.toString() == "\n " && view.lineWrapping) {
         // In Chrome, if you insert a space at the start of a wrapped
@@ -4151,7 +4170,7 @@ function applyDefaultInsert(view, change, newSel) {
         let mainSel = newSel && newSel.main.to <= changes.newLength ? newSel.main : undefined;
         // Try to apply a composition change to all cursors
         if (startState.selection.ranges.length > 1 && view.inputState.composing >= 0 &&
-            change.to <= sel.to && change.to >= sel.to - 10) {
+            change.to <= sel.to + 10 && change.to >= sel.to - 10) {
             let replaced = view.state.sliceDoc(change.from, change.to);
             let compositionRange, composition = newSel && findCompositionNode(view, newSel.main.head);
             if (composition) {
@@ -4298,6 +4317,9 @@ class InputState {
         // Used to categorize changes as part of a composition, even when
         // the mutation events fire shortly after the compositionend event
         this.compositionPendingChange = false;
+        // Set by beforeinput, used in DOM change reader
+        this.insertingText = "";
+        this.insertingTextAt = 0;
         this.mouseSelection = null;
         // When a drag from the editor is active, this points at the range
         // being dragged.
@@ -5052,6 +5074,10 @@ observers.contextmenu = view => {
 };
 handlers.beforeinput = (view, event) => {
     var _a, _b;
+    if (event.inputType == "insertText" || event.inputType == "insertCompositionText") {
+        view.inputState.insertingText = event.data;
+        view.inputState.insertingTextAt = Date.now();
+    }
     // In EditContext mode, we must handle insertReplacementText events
     // directly, to make spell checking corrections work
     if (event.inputType == "insertReplacementText" && view.observer.editContext) {
@@ -8557,7 +8583,7 @@ Facet that works much like
 [`decorations`](https://codemirror.net/6/docs/ref/#view.EditorView^decorations), but puts its
 inputs at the very bottom of the precedence stack, meaning mark
 decorations provided here will only be split by other, partially
-overlapping \`outerDecorations\` ranges, and wrap around all
+overlapping `outerDecorations` ranges, and wrap around all
 regular decorations. Use this for mark elements that should, as
 much as possible, remain in one piece.
 */
@@ -9125,7 +9151,7 @@ class LayerView {
                 old = next;
             }
             this.drawn = markers;
-            if (browser.ios) // Issue #1600
+            if (browser.safari && browser.safari_version >= 26) // Issue #1600, 1627
                 this.dom.style.display = this.dom.firstChild ? "" : "none";
         }
     }
@@ -10055,18 +10081,18 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
         let scaleX = 1, scaleY = 1, makeAbsolute = false;
         if (this.position == "fixed" && this.manager.tooltipViews.length) {
             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 if (dom.style.top == Outside && dom.style.left == "0px") {
-                // On other browsers, we have to awkwardly try and use other
-                // information to detect a transform.
+            if (browser.safari) {
+                // Safari always sets offsetParent to null, even if a fixed
+                // element is positioned relative to a transformed parent. So
+                // we use this kludge to try and detect this.
                 let rect = dom.getBoundingClientRect();
                 makeAbsolute = Math.abs(rect.top + 10000) > 1 || Math.abs(rect.left) > 1;
             }
+            else {
+                // More conforming browsers will set offsetParent to the
+                // transformed element.
+                makeAbsolute = !!dom.offsetParent && dom.offsetParent != this.container.ownerDocument.body;
+            }
         }
         if (makeAbsolute || this.position == "absolute") {
             if (this.parent) {

package/package.json

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