prosemirror-view 1.41.3 → 1.41.4

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 1.41.4 (2025-12-01)
+
+### Bug fixes
+
+`EditorView.dragging` is now only cleared after the drop event has entirely been handled.
+
+Add a workaround for an issue where Chrome and Safari will, if you backspace out the last text before an inline-flex node, insert a bogus hard break.
+
+Fix a composition problem on Chrome Windows when starting a composition before an absolutely positioned widget.
+
 ## 1.41.3 (2025-10-09)
 
 ### Bug fixes

package/dist/index.cjs

@@ -360,18 +360,23 @@ function findOffsetInNode(node, coords) {
 }
 function findOffsetInText(node, coords) {
   var len = node.nodeValue.length;
-  var range = document.createRange();
+  var range = document.createRange(),
+    result;
   for (var i = 0; i < len; i++) {
     range.setEnd(node, i + 1);
     range.setStart(node, i);
     var rect = singleRect(range, 1);
     if (rect.top == rect.bottom) continue;
-    if (inRect(coords, rect)) return {
-      node: node,
-      offset: i + (coords.left >= (rect.left + rect.right) / 2 ? 1 : 0)
-    };
+    if (inRect(coords, rect)) {
+      result = {
+        node: node,
+        offset: i + (coords.left >= (rect.left + rect.right) / 2 ? 1 : 0)
+      };
+      break;
+    }
   }
-  return {
+  range.detach();
+  return result || {
     node: node,
     offset: 0
   };
@@ -3272,7 +3277,7 @@ editHandlers.compositionstart = editHandlers.compositionupdate = function (view)
       $pos = state.selection.$to;
     if (state.selection instanceof prosemirrorState.TextSelection && (state.storedMarks || !$pos.textOffset && $pos.parentOffset && $pos.nodeBefore.marks.some(function (m) {
       return m.type.spec.inclusive === false;
-    }))) {
+    }) || chrome && windows && selectionBeforeUneditable(view))) {
       view.markCursor = view.state.storedMarks || $pos.marks();
       endComposition(view, true);
       view.markCursor = null;
@@ -3298,6 +3303,14 @@ editHandlers.compositionstart = editHandlers.compositionupdate = function (view)
   }
   scheduleComposeEnd(view, timeoutComposition);
 };
+function selectionBeforeUneditable(view) {
+  var _view$domSelectionRan4 = view.domSelectionRange(),
+    focusNode = _view$domSelectionRan4.focusNode,
+    focusOffset = _view$domSelectionRan4.focusOffset;
+  if (!focusNode || focusNode.nodeType != 1 || focusOffset >= focusNode.childNodes.length) return false;
+  var next = focusNode.childNodes[focusOffset];
+  return next.nodeType == 1 && next.contentEditable == "false";
+}
 editHandlers.compositionend = function (view, event) {
   if (view.composing) {
     view.input.composing = false;
@@ -3485,10 +3498,14 @@ handlers.dragend = function (view) {
 editHandlers.dragover = editHandlers.dragenter = function (_, e) {
   return e.preventDefault();
 };
-editHandlers.drop = function (view, _event) {
-  var event = _event;
-  var dragging = view.dragging;
-  view.dragging = null;
+editHandlers.drop = function (view, event) {
+  try {
+    handleDrop(view, event, view.dragging);
+  } finally {
+    view.dragging = null;
+  }
+};
+function handleDrop(view, event, dragging) {
   if (!event.dataTransfer) return;
   var eventPos = view.posAtCoords(eventCoords(event));
   if (!eventPos) return;
@@ -3534,7 +3551,7 @@ editHandlers.drop = function (view, _event) {
   }
   view.focus();
   view.dispatch(tr.setMeta("uiEvent", "drop"));
-};
+}
 handlers.focus = function (view) {
   view.input.lastFocus = Date.now();
   if (!view.focused) {
@@ -4399,6 +4416,24 @@ var DOMObserver = function () {
             _iterator3.f();
           }
         }
+      } else if ((chrome || safari) && added.some(function (n) {
+        return n.nodeName == "BR";
+      }) && (view.input.lastKeyCode == 8 || view.input.lastKeyCode == 46)) {
+        var _iterator4 = _createForOfIteratorHelper(added),
+          _step4;
+        try {
+          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+            var node = _step4.value;
+            if (node.nodeName == "BR" && node.parentNode) {
+              var after = node.nextSibling;
+              if (after && after.nodeType == 1 && after.contentEditable == "false") node.parentNode.removeChild(node);
+            }
+          }
+        } catch (err) {
+          _iterator4.e(err);
+        } finally {
+          _iterator4.f();
+        }
       }
       var readSel = null;
       if (from < 0 && newSel && view.input.lastFocus > Date.now() - 200 && Math.max(view.input.lastTouch, view.input.lastClick.time) < Date.now() - 300 && selectionCollapsed(sel) && (readSel = selectionFromDOM(view)) && readSel.eq(prosemirrorState.Selection.near(view.state.doc.resolve(0), 1))) {

package/dist/index.js

@@ -367,17 +367,20 @@ function findOffsetInNode(node, coords) {
 }
 function findOffsetInText(node, coords) {
     let len = node.nodeValue.length;
-    let range = document.createRange();
+    let range = document.createRange(), result;
     for (let i = 0; i < len; i++) {
         range.setEnd(node, i + 1);
         range.setStart(node, i);
         let rect = singleRect(range, 1);
         if (rect.top == rect.bottom)
             continue;
-        if (inRect(coords, rect))
-            return { node, offset: i + (coords.left >= (rect.left + rect.right) / 2 ? 1 : 0) };
+        if (inRect(coords, rect)) {
+            result = { node, offset: i + (coords.left >= (rect.left + rect.right) / 2 ? 1 : 0) };
+            break;
+        }
     }
-    return { node, offset: 0 };
+    range.detach();
+    return result || { node, offset: 0 };
 }
 function inRect(coords, rect) {
     return coords.left >= rect.left - 1 && coords.left <= rect.right + 1 &&
@@ -3471,7 +3474,8 @@ editHandlers.compositionstart = editHandlers.compositionupdate = view => {
         let { state } = view, $pos = state.selection.$to;
         if (state.selection instanceof TextSelection &&
             (state.storedMarks ||
-                (!$pos.textOffset && $pos.parentOffset && $pos.nodeBefore.marks.some(m => m.type.spec.inclusive === false)))) {
+                (!$pos.textOffset && $pos.parentOffset && $pos.nodeBefore.marks.some(m => m.type.spec.inclusive === false)) ||
+                chrome && windows && selectionBeforeUneditable(view))) { // Issue #1500
             // Need to wrap the cursor in mark nodes different from the ones in the DOM context
             view.markCursor = view.state.storedMarks || $pos.marks();
             endComposition(view, true);
@@ -3505,6 +3509,13 @@ editHandlers.compositionstart = editHandlers.compositionupdate = view => {
     }
     scheduleComposeEnd(view, timeoutComposition);
 };
+function selectionBeforeUneditable(view) {
+    let { focusNode, focusOffset } = view.domSelectionRange();
+    if (!focusNode || focusNode.nodeType != 1 || focusOffset >= focusNode.childNodes.length)
+        return false;
+    let next = focusNode.childNodes[focusOffset];
+    return next.nodeType == 1 && next.contentEditable == "false";
+}
 editHandlers.compositionend = (view, event) => {
     if (view.composing) {
         view.input.composing = false;
@@ -3732,10 +3743,15 @@ handlers.dragend = view => {
     }, 50);
 };
 editHandlers.dragover = editHandlers.dragenter = (_, e) => e.preventDefault();
-editHandlers.drop = (view, _event) => {
-    let event = _event;
-    let dragging = view.dragging;
-    view.dragging = null;
+editHandlers.drop = (view, event) => {
+    try {
+        handleDrop(view, event, view.dragging);
+    }
+    finally {
+        view.dragging = null;
+    }
+};
+function handleDrop(view, event, dragging) {
     if (!event.dataTransfer)
         return;
     let eventPos = view.posAtCoords(eventCoords(event));
@@ -3789,7 +3805,7 @@ editHandlers.drop = (view, _event) => {
     }
     view.focus();
     view.dispatch(tr.setMeta("uiEvent", "drop"));
-};
+}
 handlers.focus = view => {
     view.input.lastFocus = Date.now();
     if (!view.focused) {
@@ -4715,6 +4731,17 @@ class DOMObserver {
                 }
             }
         }
+        else if ((chrome || safari) && added.some(n => n.nodeName == "BR") &&
+            (view.input.lastKeyCode == 8 || view.input.lastKeyCode == 46)) {
+            // Chrome/Safari sometimes insert a bogus break node if you
+            // backspace out the last bit of text before an inline-flex node (#1552)
+            for (let node of added)
+                if (node.nodeName == "BR" && node.parentNode) {
+                    let after = node.nextSibling;
+                    if (after && after.nodeType == 1 && after.contentEditable == "false")
+                        node.parentNode.removeChild(node);
+                }
+        }
         let readSel = null;
         // If it looks like the browser has reset the selection to the
         // start of the document after focus, restore the selection from

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prosemirror-view",
-  "version": "1.41.3",
+  "version": "1.41.4",
   "description": "ProseMirror's view component",
   "type": "module",
   "main": "dist/index.cjs",

package/src/dom.ts

@@ -30,7 +30,7 @@ export const textRange = function(node: Text, from?: number, to?: number) {
 }
 
 export const clearReusedRange = function() {
-  reusedRange = null;
+  reusedRange = null
 }
 
 // Scans forward and backward through DOM positions equivalent to the

package/src/domchange.ts

@@ -1,5 +1,5 @@
 import {Fragment, DOMParser, TagParseRule, Node, Mark, ResolvedPos} from "prosemirror-model"
-import {Selection, TextSelection, Transaction} from "prosemirror-state"
+import {TextSelection, Transaction} from "prosemirror-state"
 
 import {selectionBetween, selectionFromDOM, selectionToDOM} from "./selection"
 import {selectionCollapsed, keyEvent, DOMNode} from "./dom"

package/src/domcoords.ts

@@ -184,16 +184,19 @@ function findOffsetInNode(node: HTMLElement, coords: {top: number, left: number}
 
 function findOffsetInText(node: Text, coords: {top: number, left: number}) {
   let len = node.nodeValue!.length
-  let range = document.createRange()
+  let range = document.createRange(), result: {node: Node, offset: number} | undefined
   for (let i = 0; i < len; i++) {
     range.setEnd(node, i + 1)
     range.setStart(node, i)
     let rect = singleRect(range, 1)
     if (rect.top == rect.bottom) continue
-    if (inRect(coords, rect))
-      return {node, offset: i + (coords.left >= (rect.left + rect.right) / 2 ? 1 : 0)}
+    if (inRect(coords, rect)) {
+      result = {node, offset: i + (coords.left >= (rect.left + rect.right) / 2 ? 1 : 0)}
+      break
+    }
   }
-  return {node, offset: 0}
+  range.detach()
+  return result || {node, offset: 0}
 }
 
 function inRect(coords: {top: number, left: number}, rect: Rect) {

package/src/domobserver.ts

@@ -198,6 +198,15 @@ export class DOMObserver {
             br.remove()
         }
       }
+    } else if ((browser.chrome || browser.safari) && added.some(n => n.nodeName == "BR") &&
+               (view.input.lastKeyCode == 8 || view.input.lastKeyCode == 46)) {
+      // Chrome/Safari sometimes insert a bogus break node if you
+      // backspace out the last bit of text before an inline-flex node (#1552)
+      for (let node of added) if (node.nodeName == "BR" && node.parentNode) {
+        let after = node.nextSibling
+        if (after && after.nodeType == 1 && (after as HTMLElement).contentEditable == "false")
+          node.parentNode.removeChild(node)
+      }
     }
 
     let readSel: Selection | null = null

package/src/index.ts

@@ -469,7 +469,7 @@ export class EditorView {
     }
     this.docView.destroy()
     ;(this as any).docView = null
-    clearReusedRange();
+    clearReusedRange()
   }
 
   /// This is true when the view has been

package/src/input.ts

@@ -459,7 +459,8 @@ editHandlers.compositionstart = editHandlers.compositionupdate = view => {
     let {state} = view, $pos = state.selection.$to
     if (state.selection instanceof TextSelection &&
         (state.storedMarks ||
-         (!$pos.textOffset && $pos.parentOffset && $pos.nodeBefore!.marks.some(m => m.type.spec.inclusive === false)))) {
+         (!$pos.textOffset && $pos.parentOffset && $pos.nodeBefore!.marks.some(m => m.type.spec.inclusive === false)) ||
+         browser.chrome && browser.windows && selectionBeforeUneditable(view))) { // Issue #1500
       // Need to wrap the cursor in mark nodes different from the ones in the DOM context
       view.markCursor = view.state.storedMarks || $pos.marks()
       endComposition(view, true)
@@ -490,6 +491,13 @@ editHandlers.compositionstart = editHandlers.compositionupdate = view => {
   scheduleComposeEnd(view, timeoutComposition)
 }
 
+function selectionBeforeUneditable(view: EditorView) {
+  let {focusNode, focusOffset} = view.domSelectionRange()
+  if (!focusNode || focusNode.nodeType != 1 || focusOffset >= focusNode.childNodes.length) return false
+  let next = focusNode.childNodes[focusOffset]
+  return next.nodeType == 1 && (next as HTMLElement).contentEditable == "false"
+}
+
 editHandlers.compositionend = (view, event) => {
   if (view.composing) {
     view.input.composing = false
@@ -706,11 +714,15 @@ handlers.dragend = view => {
 
 editHandlers.dragover = editHandlers.dragenter = (_, e) => e.preventDefault()
 
-editHandlers.drop = (view, _event) => {
-  let event = _event as DragEvent
-  let dragging = view.dragging
-  view.dragging = null
+editHandlers.drop = (view, event) => {
+  try {
+    handleDrop(view, event as DragEvent, view.dragging)
+  } finally {
+    view.dragging = null
+  }
+}
 
+function handleDrop(view: EditorView, event: DragEvent, dragging: Dragging | null) {
   if (!event.dataTransfer) return
 
   let eventPos = view.posAtCoords(eventCoords(event))