prosemirror-view 1.41.3 → 1.41.5

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 1.41.5 (2026-01-14)
+
+### Bug fixes
+
+Work around an issue where, after some kinds of changes, Chrome misreports the cursor position and breaks composition.
+
+Improve DOM update behavior when deleting three or more nodes right before a mark, which would unnecessarily re-render the entire mark.
+
+Work around a newly introduced bug in Safari where composition in an empty table cell causes it to move the text out of the cell into the row element.
+
+## 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
   };
@@ -1333,17 +1338,17 @@ var NodeViewDesc = function (_ViewDesc4) {
       var compositionInChild = composition && composition.pos < 0;
       var updater = new ViewTreeUpdater(this, localComposition && localComposition.node, view);
       iterDeco(this.node, this.innerDeco, function (widget, i, insideNode) {
-        if (widget.spec.marks) updater.syncToMarks(widget.spec.marks, inline, view);else if (widget.type.side >= 0 && !insideNode) updater.syncToMarks(i == _this6.node.childCount ? prosemirrorModel.Mark.none : _this6.node.child(i).marks, inline, view);
+        if (widget.spec.marks) updater.syncToMarks(widget.spec.marks, inline, view, i);else if (widget.type.side >= 0 && !insideNode) updater.syncToMarks(i == _this6.node.childCount ? prosemirrorModel.Mark.none : _this6.node.child(i).marks, inline, view, i);
         updater.placeWidget(widget, view, off);
       }, function (child, outerDeco, innerDeco, i) {
-        updater.syncToMarks(child.marks, inline, view);
+        updater.syncToMarks(child.marks, inline, view, i);
         var compIndex;
         if (updater.findNodeMatch(child, outerDeco, innerDeco, i)) ;else if (compositionInChild && view.state.selection.from > off && view.state.selection.to < off + child.nodeSize && (compIndex = updater.findIndexWithChild(composition.node)) > -1 && updater.updateNodeAt(child, outerDeco, innerDeco, compIndex, view)) ;else if (updater.updateNextNode(child, outerDeco, innerDeco, view, i, off)) ;else {
           updater.addNode(child, outerDeco, innerDeco, view, off);
         }
         off += child.nodeSize;
       });
-      updater.syncToMarks([], inline, view);
+      updater.syncToMarks([], inline, view, 0);
       if (this.node.isTextblock) updater.addTextblockHacks();
       updater.destroyRest();
       if (updater.changed || this.dirty == CONTENT_DIRTY) {
@@ -1781,7 +1786,7 @@ var ViewTreeUpdater = function () {
     }
   }, {
     key: "syncToMarks",
-    value: function syncToMarks(marks, inline, view) {
+    value: function syncToMarks(marks, inline, view, parentIndex) {
       var keep = 0,
         depth = this.stack.length >> 1;
       var maxKeep = Math.min(depth, marks.length);
@@ -1795,8 +1800,10 @@ var ViewTreeUpdater = function () {
       }
       while (depth < marks.length) {
         this.stack.push(this.top, this.index + 1);
-        var found = -1;
-        for (var i = this.index; i < Math.min(this.index + 3, this.top.children.length); i++) {
+        var found = -1,
+          scanTo = this.top.children.length;
+        if (parentIndex < this.preMatch.index) scanTo = Math.min(this.index + 3, scanTo);
+        for (var i = this.index; i < scanTo; i++) {
           var next = this.top.children[i];
           if (next.matchesMark(marks[depth]) && !this.isLocked(next.dom)) {
             found = i;
@@ -2914,6 +2921,7 @@ var InputState = _createClass(function InputState() {
   this.compositionNodes = [];
   this.compositionEndedAt = -2e8;
   this.compositionID = 1;
+  this.badSafariComposition = false;
   this.compositionPendingChanges = 0;
   this.domChangeCount = 0;
   this.eventHandlers = Object.create(null);
@@ -3272,7 +3280,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,13 +3306,21 @@ 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;
     view.input.compositionEndedAt = event.timeStamp;
     view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0;
     view.input.compositionNode = null;
-    if (view.input.compositionPendingChanges) Promise.resolve().then(function () {
+    if (view.input.badSafariComposition) view.domObserver.forceFlush();else if (view.input.compositionPendingChanges) Promise.resolve().then(function () {
       return view.domObserver.flush();
     });
     view.input.compositionID++;
@@ -3485,10 +3501,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 +3554,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) {
@@ -4218,7 +4238,16 @@ var DOMObserver = function () {
       for (var i = 0; i < mutations.length; i++) _this11.queue.push(mutations[i]);
       if (ie && ie_version <= 11 && mutations.some(function (m) {
         return m.type == "childList" && m.removedNodes.length || m.type == "characterData" && m.oldValue.length > m.target.nodeValue.length;
-      })) _this11.flushSoon();else _this11.flush();
+      })) {
+        _this11.flushSoon();
+      } else if (safari && view.composing && mutations.some(function (m) {
+        return m.type == "childList" && m.target.nodeName == "TR";
+      })) {
+        view.input.badSafariComposition = true;
+        _this11.flushSoon();
+      } else {
+        _this11.flush();
+      }
     });
     if (useCharData) {
       this.onCharData = function (e) {
@@ -4399,6 +4428,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))) {
@@ -4411,6 +4458,10 @@ var DOMObserver = function () {
           view.docView.markDirty(from, to);
           checkCSS(view);
         }
+        if (view.input.badSafariComposition) {
+          view.input.badSafariComposition = false;
+          fixUpBadSafariComposition(view, added);
+        }
         this.handleDOMChange(from, to, typeOver, added);
         if (view.docView && view.docView.dirty) view.updateState(view.state);else if (!this.currentSelection.eq(sel)) selectionToDOM(view);
         this.currentSelection.set(sel);
@@ -4524,6 +4575,39 @@ function blockParent(view, node) {
   }
   return null;
 }
+function fixUpBadSafariComposition(view, addedNodes) {
+  var _a;
+  var _view$domSelectionRan5 = view.domSelectionRange(),
+    focusNode = _view$domSelectionRan5.focusNode,
+    focusOffset = _view$domSelectionRan5.focusOffset;
+  var _iterator5 = _createForOfIteratorHelper(addedNodes),
+    _step5;
+  try {
+    for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+      var node = _step5.value;
+      if (((_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.nodeName) == "TR") {
+        var nextCell = node.nextSibling;
+        while (nextCell && nextCell.nodeName != "TD" && nextCell.nodeName != "TH") nextCell = nextCell.nextSibling;
+        if (nextCell) {
+          var parent = nextCell;
+          for (;;) {
+            var first = parent.firstChild;
+            if (!first || first.nodeType != 1 || first.contentEditable == "false" || /^(BR|IMG)$/.test(first.nodeName)) break;
+            parent = first;
+          }
+          parent.insertBefore(node, parent.firstChild);
+          if (focusNode == node) view.domSelection().collapse(node, focusOffset);
+        } else {
+          node.parentNode.removeChild(node);
+        }
+      }
+    }
+  } catch (err) {
+    _iterator5.e(err);
+  } finally {
+    _iterator5.f();
+  }
+}
 function parseBetween(view, from_, to_) {
   var _view$docView$parseRa = view.docView.parseRange(from_, to_),
     parent = _view$docView$parseRa.node,
@@ -4979,7 +5063,7 @@ var EditorView = function () {
             this.docView.destroy();
             this.docView = docViewDesc(state.doc, outerDeco, innerDeco, this.dom, this);
           }
-          if (chromeKludge && !this.trackWrites) forceSelUpdate = true;
+          if (chromeKludge && (!this.trackWrites || !this.dom.contains(this.trackWrites))) forceSelUpdate = true;
         }
         if (forceSelUpdate || !(this.input.mouseDown && this.domObserver.currentSelection.eq(this.domSelectionRange()) && anchorInRightPlace(this))) {
           selectionToDOM(this, forceSelUpdate);

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 &&
@@ -1373,15 +1376,15 @@ class NodeViewDesc extends ViewDesc {
         let updater = new ViewTreeUpdater(this, localComposition && localComposition.node, view);
         iterDeco(this.node, this.innerDeco, (widget, i, insideNode) => {
             if (widget.spec.marks)
-                updater.syncToMarks(widget.spec.marks, inline, view);
+                updater.syncToMarks(widget.spec.marks, inline, view, i);
             else if (widget.type.side >= 0 && !insideNode)
-                updater.syncToMarks(i == this.node.childCount ? Mark.none : this.node.child(i).marks, inline, view);
+                updater.syncToMarks(i == this.node.childCount ? Mark.none : this.node.child(i).marks, inline, view, i);
             // If the next node is a desc matching this widget, reuse it,
             // otherwise insert the widget as a new view desc.
             updater.placeWidget(widget, view, off);
         }, (child, outerDeco, innerDeco, i) => {
             // Make sure the wrapping mark descs match the node's marks.
-            updater.syncToMarks(child.marks, inline, view);
+            updater.syncToMarks(child.marks, inline, view, i);
             // Try several strategies for drawing this node
             let compIndex;
             if (updater.findNodeMatch(child, outerDeco, innerDeco, i)) ;
@@ -1397,7 +1400,7 @@ class NodeViewDesc extends ViewDesc {
             off += child.nodeSize;
         });
         // Drop all remaining descs after the current position.
-        updater.syncToMarks([], inline, view);
+        updater.syncToMarks([], inline, view, 0);
         if (this.node.isTextblock)
             updater.addTextblockHacks();
         updater.destroyRest();
@@ -1787,7 +1790,7 @@ class ViewTreeUpdater {
     }
     // Sync the current stack of mark descs with the given array of
     // marks, reusing existing mark descs when possible.
-    syncToMarks(marks, inline, view) {
+    syncToMarks(marks, inline, view, parentIndex) {
         let keep = 0, depth = this.stack.length >> 1;
         let maxKeep = Math.min(depth, marks.length);
         while (keep < maxKeep &&
@@ -1803,8 +1806,10 @@ class ViewTreeUpdater {
         }
         while (depth < marks.length) {
             this.stack.push(this.top, this.index + 1);
-            let found = -1;
-            for (let i = this.index; i < Math.min(this.index + 3, this.top.children.length); i++) {
+            let found = -1, scanTo = this.top.children.length;
+            if (parentIndex < this.preMatch.index)
+                scanTo = Math.min(this.index + 3, scanTo);
+            for (let i = this.index; i < scanTo; i++) {
                 let next = this.top.children[i];
                 if (next.matchesMark(marks[depth]) && !this.isLocked(next.dom)) {
                     found = i;
@@ -2000,9 +2005,7 @@ class ViewTreeUpdater {
 }
 // Iterate from the end of the fragment and array of descs to find
 // directly matching ones, in order to avoid overeagerly reusing those
-// for other nodes. Returns the fragment index of the first node that
-// is part of the sequence of matched nodes at the end of the
-// fragment.
+// for other nodes.
 function preMatch(frag, parentDesc) {
     let curDesc = parentDesc, descI = curDesc.children.length;
     let fI = frag.childCount, matched = new Map, matches = [];
@@ -2025,7 +2028,6 @@ function preMatch(frag, parentDesc) {
                 break outer;
             }
             else {
-                // FIXME
                 descI = curDesc.parent.children.indexOf(curDesc);
                 curDesc = curDesc.parent;
             }
@@ -3072,6 +3074,7 @@ class InputState {
         this.compositionNodes = [];
         this.compositionEndedAt = -2e8;
         this.compositionID = 1;
+        this.badSafariComposition = false;
         // Set to a composition ID when there are pending changes at compositionend
         this.compositionPendingChanges = 0;
         this.domChangeCount = 0;
@@ -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,13 +3509,22 @@ 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;
         view.input.compositionEndedAt = event.timeStamp;
         view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0;
         view.input.compositionNode = null;
-        if (view.input.compositionPendingChanges)
+        if (view.input.badSafariComposition)
+            view.domObserver.forceFlush();
+        else if (view.input.compositionPendingChanges)
             Promise.resolve().then(() => view.domObserver.flush());
         view.input.compositionID++;
         scheduleComposeEnd(view, 20);
@@ -3732,10 +3745,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 +3807,7 @@ editHandlers.drop = (view, _event) => {
     }
     view.focus();
     view.dispatch(tr.setMeta("uiEvent", "drop"));
-};
+}
 handlers.focus = view => {
     view.input.lastFocus = Date.now();
     if (!view.focused) {
@@ -4569,15 +4587,24 @@ class DOMObserver {
             new window.MutationObserver(mutations => {
                 for (let i = 0; i < mutations.length; i++)
                     this.queue.push(mutations[i]);
-                // IE11 will sometimes (on backspacing out a single character
-                // text node after a BR node) call the observer callback
-                // before actually updating the DOM, which will cause
-                // ProseMirror to miss the change (see #930)
                 if (ie && ie_version <= 11 && mutations.some(m => m.type == "childList" && m.removedNodes.length ||
-                    m.type == "characterData" && m.oldValue.length > m.target.nodeValue.length))
+                    m.type == "characterData" && m.oldValue.length > m.target.nodeValue.length)) {
+                    // IE11 will sometimes (on backspacing out a single character
+                    // text node after a BR node) call the observer callback
+                    // before actually updating the DOM, which will cause
+                    // ProseMirror to miss the change (see #930)
                     this.flushSoon();
-                else
+                }
+                else if (safari && view.composing && mutations.some(m => m.type == "childList" && m.target.nodeName == "TR")) {
+                    // Safari does weird stuff when finishing a composition in a
+                    // table cell, which tends to involve inserting inappropriate
+                    // nodes in the table row.
+                    view.input.badSafariComposition = true;
+                    this.flushSoon();
+                }
+                else {
                     this.flush();
+                }
             });
         if (useCharData) {
             this.onCharData = e => {
@@ -4715,6 +4742,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
@@ -4733,6 +4771,10 @@ class DOMObserver {
                 view.docView.markDirty(from, to);
                 checkCSS(view);
             }
+            if (view.input.badSafariComposition) {
+                view.input.badSafariComposition = false;
+                fixUpBadSafariComposition(view, added);
+            }
             this.handleDOMChange(from, to, typeOver, added);
             if (view.docView && view.docView.dirty)
                 view.updateState(view.state);
@@ -4856,6 +4898,37 @@ function blockParent(view, node) {
     }
     return null;
 }
+// Kludge for a Safari bug where, on ending a composition in an
+// otherwise empty table cell, it randomly moves the composed text
+// into the table row around that cell, greatly confusing everything
+// (#188).
+function fixUpBadSafariComposition(view, addedNodes) {
+    var _a;
+    let { focusNode, focusOffset } = view.domSelectionRange();
+    for (let node of addedNodes) {
+        if (((_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.nodeName) == "TR") {
+            let nextCell = node.nextSibling;
+            while (nextCell && (nextCell.nodeName != "TD" && nextCell.nodeName != "TH"))
+                nextCell = nextCell.nextSibling;
+            if (nextCell) {
+                let parent = nextCell;
+                for (;;) {
+                    let first = parent.firstChild;
+                    if (!first || first.nodeType != 1 || first.contentEditable == "false" ||
+                        /^(BR|IMG)$/.test(first.nodeName))
+                        break;
+                    parent = first;
+                }
+                parent.insertBefore(node, parent.firstChild);
+                if (focusNode == node)
+                    view.domSelection().collapse(node, focusOffset);
+            }
+            else {
+                node.parentNode.removeChild(node);
+            }
+        }
+    }
+}
 
 // Note that all referencing and parsing is done with the
 // start-of-operation selection and document, since that's the one
@@ -5428,7 +5501,7 @@ class EditorView {
                     this.docView.destroy();
                     this.docView = docViewDesc(state.doc, outerDeco, innerDeco, this.dom, this);
                 }
-                if (chromeKludge && !this.trackWrites)
+                if (chromeKludge && (!this.trackWrites || !this.dom.contains(this.trackWrites)))
                     forceSelUpdate = true;
             }
             // Work around for an issue where an update arriving right between

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prosemirror-view",
-  "version": "1.41.3",
+  "version": "1.41.5",
   "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"
@@ -81,7 +81,7 @@ const isInline = /^(a|abbr|acronym|b|bd[io]|big|br|button|cite|code|data(list)?|
 export function readDOMChange(view: EditorView, from: number, to: number, typeOver: boolean, addedNodes: readonly DOMNode[]) {
   let compositionID = view.input.compositionPendingChanges || (view.composing ? view.input.compositionID : 0)
   view.input.compositionPendingChanges = 0
-  
+
   if (from < 0) {
     let origin = view.input.lastSelectionTime > Date.now() - 50 ? view.input.lastSelectionOrigin : null
     let newSel = selectionFromDOM(view, origin)

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

@@ -52,16 +52,24 @@ export class DOMObserver {
     this.observer = window.MutationObserver &&
       new window.MutationObserver(mutations => {
         for (let i = 0; i < mutations.length; i++) this.queue.push(mutations[i])
-        // IE11 will sometimes (on backspacing out a single character
-        // text node after a BR node) call the observer callback
-        // before actually updating the DOM, which will cause
-        // ProseMirror to miss the change (see #930)
         if (browser.ie && browser.ie_version <= 11 && mutations.some(
           m => m.type == "childList" && m.removedNodes.length ||
-               m.type == "characterData" && m.oldValue!.length > m.target.nodeValue!.length))
+               m.type == "characterData" && m.oldValue!.length > m.target.nodeValue!.length)) {
+          // IE11 will sometimes (on backspacing out a single character
+          // text node after a BR node) call the observer callback
+          // before actually updating the DOM, which will cause
+          // ProseMirror to miss the change (see #930)
           this.flushSoon()
-        else
+        } else if (browser.safari && view.composing && mutations.some(
+          m => m.type == "childList" && m.target.nodeName == "TR")) {
+          // Safari does weird stuff when finishing a composition in a
+          // table cell, which tends to involve inserting inappropriate
+          // nodes in the table row.
+          view.input.badSafariComposition = true
+          this.flushSoon()
+        } else {
           this.flush()
+        }
       })
     if (useCharData) {
       this.onCharData = e => {
@@ -198,6 +206,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
@@ -217,6 +234,10 @@ export class DOMObserver {
         view.docView.markDirty(from, to)
         checkCSS(view)
       }
+      if (view.input.badSafariComposition) {
+        view.input.badSafariComposition = false
+        fixUpBadSafariComposition(view, added)
+      }
       this.handleDOMChange(from, to, typeOver, added)
       if (view.docView && view.docView.dirty) view.updateState(view.state)
       else if (!this.currentSelection.eq(sel)) selectionToDOM(view)
@@ -338,3 +359,30 @@ function blockParent(view: EditorView, node: DOMNode): Node | null {
   }
   return null
 }
+
+// Kludge for a Safari bug where, on ending a composition in an
+// otherwise empty table cell, it randomly moves the composed text
+// into the table row around that cell, greatly confusing everything
+// (#188).
+function fixUpBadSafariComposition(view: EditorView, addedNodes: readonly DOMNode[]) {
+  let {focusNode, focusOffset} = view.domSelectionRange()
+  for (let node of addedNodes) {
+    if (node.parentNode?.nodeName == "TR") {
+      let nextCell = node.nextSibling
+      while (nextCell && (nextCell.nodeName != "TD" && nextCell.nodeName != "TH")) nextCell = nextCell.nextSibling
+      if (nextCell) {
+        let parent = nextCell
+        for (;;) {
+          let first = parent.firstChild
+          if (!first || first.nodeType != 1 || (first as HTMLElement).contentEditable == "false" ||
+              /^(BR|IMG)$/.test(first.nodeName)) break
+          parent = first
+        }
+        parent.insertBefore(node, parent.firstChild)
+        if (focusNode == node) view.domSelection()!.collapse(node, focusOffset)
+      } else {
+        node.parentNode.removeChild(node)
+      }
+    }
+  }
+}

package/src/index.ts

@@ -202,7 +202,7 @@ export class EditorView {
           this.docView.destroy()
           this.docView = docViewDesc(state.doc, outerDeco, innerDeco, this.dom, this)
         }
-        if (chromeKludge && !this.trackWrites) forceSelUpdate = true
+        if (chromeKludge && (!this.trackWrites || !this.dom.contains(this.trackWrites))) forceSelUpdate = true
       }
       // Work around for an issue where an update arriving right between
       // a DOM selection change and the "selectionchange" event for it
@@ -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

@@ -35,6 +35,7 @@ export class InputState {
   compositionNodes: ViewDesc[] = []
   compositionEndedAt = -2e8
   compositionID = 1
+  badSafariComposition = false
   // Set to a composition ID when there are pending changes at compositionend
   compositionPendingChanges = 0
   domChangeCount = 0
@@ -459,7 +460,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,13 +492,21 @@ 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
     view.input.compositionEndedAt = event.timeStamp
     view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0
     view.input.compositionNode = null
-    if (view.input.compositionPendingChanges) Promise.resolve().then(() => view.domObserver.flush())
+    if (view.input.badSafariComposition) view.domObserver.forceFlush()
+    else if (view.input.compositionPendingChanges) Promise.resolve().then(() => view.domObserver.flush())
     view.input.compositionID++
     scheduleComposeEnd(view, 20)
   }
@@ -706,11 +716,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))

package/src/viewdesc.ts

@@ -772,15 +772,15 @@ export class NodeViewDesc extends ViewDesc {
     let updater = new ViewTreeUpdater(this, localComposition && localComposition.node, view)
     iterDeco(this.node, this.innerDeco, (widget, i, insideNode) => {
       if (widget.spec.marks)
-        updater.syncToMarks(widget.spec.marks, inline, view)
+        updater.syncToMarks(widget.spec.marks, inline, view, i)
       else if ((widget.type as WidgetType).side >= 0 && !insideNode)
-        updater.syncToMarks(i == this.node.childCount ? Mark.none : this.node.child(i).marks, inline, view)
+        updater.syncToMarks(i == this.node.childCount ? Mark.none : this.node.child(i).marks, inline, view, i)
       // If the next node is a desc matching this widget, reuse it,
       // otherwise insert the widget as a new view desc.
       updater.placeWidget(widget, view, off)
     }, (child, outerDeco, innerDeco, i) => {
       // Make sure the wrapping mark descs match the node's marks.
-      updater.syncToMarks(child.marks, inline, view)
+      updater.syncToMarks(child.marks, inline, view, i)
       // Try several strategies for drawing this node
       let compIndex
       if (updater.findNodeMatch(child, outerDeco, innerDeco, i)) {
@@ -799,7 +799,7 @@ export class NodeViewDesc extends ViewDesc {
       off += child.nodeSize
     })
     // Drop all remaining descs after the current position.
-    updater.syncToMarks([], inline, view)
+    updater.syncToMarks([], inline, view, 0)
     if (this.node.isTextblock) updater.addTextblockHacks()
     updater.destroyRest()
 
@@ -1197,7 +1197,7 @@ class ViewTreeUpdater {
 
   // Sync the current stack of mark descs with the given array of
   // marks, reusing existing mark descs when possible.
-  syncToMarks(marks: readonly Mark[], inline: boolean, view: EditorView) {
+  syncToMarks(marks: readonly Mark[], inline: boolean, view: EditorView, parentIndex: number) {
     let keep = 0, depth = this.stack.length >> 1
     let maxKeep = Math.min(depth, marks.length)
     while (keep < maxKeep &&
@@ -1214,8 +1214,9 @@ class ViewTreeUpdater {
     }
     while (depth < marks.length) {
       this.stack.push(this.top, this.index + 1)
-      let found = -1
-      for (let i = this.index; i < Math.min(this.index + 3, this.top.children.length); i++) {
+      let found = -1, scanTo = this.top.children.length
+      if (parentIndex < this.preMatch.index) scanTo = Math.min(this.index + 3, scanTo)
+      for (let i = this.index; i < scanTo; i++) {
         let next = this.top.children[i]
         if (next.matchesMark(marks[depth]) && !this.isLocked(next.dom)) { found = i; break }
       }
@@ -1404,12 +1405,16 @@ class ViewTreeUpdater {
 
 // Iterate from the end of the fragment and array of descs to find
 // directly matching ones, in order to avoid overeagerly reusing those
-// for other nodes. Returns the fragment index of the first node that
-// is part of the sequence of matched nodes at the end of the
-// fragment.
-function preMatch(
-  frag: Fragment, parentDesc: ViewDesc
-): {index: number, matched: Map<ViewDesc, number>, matches: readonly ViewDesc[]} {
+// for other nodes.
+function preMatch(frag: Fragment, parentDesc: ViewDesc): {
+  // The fragment index of the first node that is part of the sequence
+  // of matched nodes at the end of the fragment.
+  index: number,
+  // A map from matched descs to fragment indices.
+  matched: Map<ViewDesc, number>,
+  // The matched descs.
+  matches: readonly ViewDesc[]
+} {
   let curDesc = parentDesc, descI = curDesc.children.length
   let fI = frag.childCount, matched = new Map, matches = []
   outer: while (fI > 0) {
@@ -1428,7 +1433,6 @@ function preMatch(
       } else if (curDesc == parentDesc) {
         break outer
       } else {
-        // FIXME
         descI = curDesc.parent!.children.indexOf(curDesc)
         curDesc = curDesc.parent!
       }