prosemirror-view 1.30.2 → 1.31.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 1.31.0 (2023-04-26)
+
+### Bug fixes
+
+Fix an issue where, when the browser failed to return a cursor for a set of coordinates (as in a shadow root in Chrome) the library's own algorithm worked poorly for coordinates between lines in a textblock.
+
+Improve performance of changing a parent node (by type or attributes) without modifying its children by reusing the DOM of the child nodes.
+
+Fix an issue where, in right-to-left context, the left and right arrow keys could get stuck on a selectable leaf node because the editor was moving the selection in the wrong direction.
+
+Fix a regression in `coordsAtPos` when querying the position of a line wrap.
+
+### New features
+
+Attach a `"composition"` meta field to transactions generated from DOM changes.
+
 ## 1.30.2 (2023-03-13)
 
 ### Bug fixes

package/dist/index.cjs

@@ -2,6 +2,12 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
 
 function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
@@ -129,6 +135,26 @@ function deepActiveElement(doc) {
   return elt;
 }
 
+function caretFromPoint(doc, x, y) {
+  if (doc.caretPositionFromPoint) {
+    try {
+      var pos = doc.caretPositionFromPoint(x, y);
+      if (pos) return {
+        node: pos.offsetNode,
+        offset: pos.offset
+      };
+    } catch (_) {}
+  }
+
+  if (doc.caretRangeFromPoint) {
+    var range = doc.caretRangeFromPoint(x, y);
+    if (range) return {
+      node: range.startContainer,
+      offset: range.startOffset
+    };
+  }
+}
+
 var nav = typeof navigator != "undefined" ? navigator : null;
 var doc = typeof document != "undefined" ? document : null;
 var agent = nav && nav.userAgent || "";
@@ -147,6 +173,7 @@ var chrome_version = _chrome ? +_chrome[1] : 0;
 var safari = !ie && !!nav && /Apple Computer/.test(nav.vendor);
 var ios = safari && (/Mobile\/\w+/.test(agent) || !!nav && nav.maxTouchPoints > 2);
 var mac = ios || (nav ? /Mac/.test(nav.platform) : false);
+var windows = nav ? /Win/.test(nav.platform) : false;
 var android = /Android \d/.test(agent);
 var webkit = !!doc && "webkitFontSmoothing" in doc.documentElement.style;
 var webkit_version = webkit ? +(/\bAppleWebKit\/(\d+)/.exec(navigator.userAgent) || [0, 0])[1] : 0;
@@ -303,6 +330,7 @@ function findOffsetInNode(node, coords) {
       offset = 0;
   var rowBot = coords.top,
       rowTop = coords.top;
+  var firstBelow, coordsBelow;
 
   for (var child = node.firstChild, childIndex = 0; child; child = child.nextSibling, childIndex++) {
     var rects = void 0;
@@ -326,12 +354,24 @@ function findOffsetInNode(node, coords) {
           if (child.nodeType == 1 && dx) offset = childIndex + (coords.left >= (rect.left + rect.right) / 2 ? 1 : 0);
           continue;
         }
+      } else if (rect.top > coords.top && !firstBelow && rect.left <= coords.left && rect.right >= coords.left) {
+        firstBelow = child;
+        coordsBelow = {
+          left: Math.max(rect.left, Math.min(rect.right, coords.left)),
+          top: rect.top
+        };
       }
 
       if (!closest && (coords.left >= rect.right && coords.top >= rect.top || coords.left >= rect.left && coords.top >= rect.bottom)) offset = childIndex + 1;
     }
   }
 
+  if (!closest && firstBelow) {
+    closest = firstBelow;
+    coordsClosest = coordsBelow;
+    dxClosest = 0;
+  }
+
   if (closest && closest.nodeType == 3) return findOffsetInText(closest, coordsClosest);
   if (!closest || dxClosest && closest.nodeType == 1) return {
     node: node,
@@ -440,25 +480,11 @@ function _posAtCoords(view, coords) {
   var doc = view.dom.ownerDocument,
       node,
       offset = 0;
+  var caret = caretFromPoint(doc, coords.left, coords.top);
 
-  if (doc.caretPositionFromPoint) {
-    try {
-      var _pos = doc.caretPositionFromPoint(coords.left, coords.top);
-
-      if (_pos) {
-        node = _pos.offsetNode;
-        offset = _pos.offset;
-      }
-    } catch (_) {}
-  }
-
-  if (!node && doc.caretRangeFromPoint) {
-    var range = doc.caretRangeFromPoint(coords.left, coords.top);
-
-    if (range) {
-      node = range.startContainer;
-      offset = range.startOffset;
-    }
+  if (caret) {
+    node = caret.node;
+    offset = caret.offset;
   }
 
   var elt = (view.root.elementFromPoint ? view.root : doc).elementFromPoint(coords.left, coords.top);
@@ -502,9 +528,19 @@ function _posAtCoords(view, coords) {
   };
 }
 
+function nonZero(rect) {
+  return rect.top < rect.bottom || rect.left < rect.right;
+}
+
 function singleRect(target, bias) {
   var rects = target.getClientRects();
-  return !rects.length ? target.getBoundingClientRect() : rects[bias < 0 ? 0 : rects.length - 1];
+
+  if (rects.length) {
+    var first = rects[bias < 0 ? 0 : rects.length - 1];
+    if (nonZero(first)) return first;
+  }
+
+  return Array.prototype.find.call(rects, nonZero) || target.getBoundingClientRect();
 }
 
 var BIDI = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
@@ -548,7 +584,7 @@ function _coordsAtPos(view, pos, side) {
         to++;
       }
 
-      return flattenV(singleRect(textRange(node, from, to), 1), takeSide < 0);
+      return flattenV(singleRect(textRange(node, from, to), takeSide), takeSide < 0);
     }
   }
 
@@ -1425,7 +1461,6 @@ var NodeViewDesc = function (_ViewDesc4) {
     _this4.outerDeco = outerDeco;
     _this4.innerDeco = innerDeco;
     _this4.nodeDOM = nodeDOM;
-    if (contentDOM) _this4.updateChildren(view, pos);
     return _this4;
   }
 
@@ -1496,7 +1531,7 @@ var NodeViewDesc = function (_ViewDesc4) {
       }, function (child, outerDeco, innerDeco, i) {
         updater.syncToMarks(child.marks, inline, view);
         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)) ;else {
+        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;
@@ -1650,7 +1685,9 @@ var NodeViewDesc = function (_ViewDesc4) {
 
 function docViewDesc(doc, outerDeco, innerDeco, dom, view) {
   applyOuterDeco(dom, outerDeco, doc);
-  return new NodeViewDesc(undefined, doc, outerDeco, innerDeco, dom, dom, dom, view, 0);
+  var docView = new NodeViewDesc(undefined, doc, outerDeco, innerDeco, dom, dom, dom, view, 0);
+  if (docView.contentDOM) docView.updateChildren(view, 0);
+  return docView;
 }
 
 var TextViewDesc = function (_NodeViewDesc) {
@@ -2134,7 +2171,7 @@ var ViewTreeUpdater = function () {
     }
   }, {
     key: "updateNextNode",
-    value: function updateNextNode(node, outerDeco, innerDeco, view, index) {
+    value: function updateNextNode(node, outerDeco, innerDeco, view, index, pos) {
       for (var i = this.index; i < this.top.children.length; i++) {
         var next = this.top.children[i];
 
@@ -2142,7 +2179,8 @@ var ViewTreeUpdater = function () {
           var _preMatch = this.preMatch.matched.get(next);
 
           if (_preMatch != null && _preMatch != index) return false;
-          var nextDOM = next.dom;
+          var nextDOM = next.dom,
+              updated = void 0;
           var locked = this.isLocked(nextDOM) && !(node.isText && next.node && next.node.isText && next.nodeDOM.nodeValue == node.text && next.dirty != NODE_DIRTY && sameOuterDeco(outerDeco, next.outerDeco));
 
           if (!locked && next.update(node, outerDeco, innerDeco, view)) {
@@ -2150,6 +2188,11 @@ var ViewTreeUpdater = function () {
             if (next.dom != nextDOM) this.changed = true;
             this.index++;
             return true;
+          } else if (!locked && (updated = this.recreateWrapper(next, node, outerDeco, innerDeco, view, pos))) {
+            this.top.children[this.index] = updated;
+            this.changed = true;
+            this.index++;
+            return true;
           }
 
           break;
@@ -2158,10 +2201,40 @@ var ViewTreeUpdater = function () {
 
       return false;
     }
+  }, {
+    key: "recreateWrapper",
+    value: function recreateWrapper(next, node, outerDeco, innerDeco, view, pos) {
+      if (next.dirty || node.isAtom || !next.children.length || !next.node.content.eq(node.content)) return null;
+      var wrapper = NodeViewDesc.create(this.top, node, outerDeco, innerDeco, view, pos);
+      if (!wrapper.contentDOM) return null;
+      wrapper.children = next.children;
+      next.children = [];
+
+      var _iterator = _createForOfIteratorHelper(wrapper.children),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var ch = _step.value;
+          ch.parent = wrapper;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      wrapper.dirty = CONTENT_DIRTY;
+      wrapper.updateChildren(view, pos + 1);
+      wrapper.dirty = NOT_DIRTY;
+      return wrapper;
+    }
   }, {
     key: "addNode",
     value: function addNode(node, outerDeco, innerDeco, view, pos) {
-      this.top.children.splice(this.index++, 0, NodeViewDesc.create(this.top, node, outerDeco, innerDeco, view, pos));
+      var desc = NodeViewDesc.create(this.top, node, outerDeco, innerDeco, view, pos);
+      if (desc.contentDOM) desc.updateChildren(view, pos + 1);
+      this.top.children.splice(this.index++, 0, desc);
       this.changed = true;
     }
   }, {
@@ -2665,7 +2738,7 @@ function selectHorizontally(view, dir, mods) {
   if (sel instanceof prosemirrorState.TextSelection) {
     if (!sel.empty || mods.indexOf("s") > -1) {
       return false;
-    } else if (view.endOfTextblock(dir > 0 ? "right" : "left")) {
+    } else if (view.endOfTextblock(dir > 0 ? "forward" : "backward")) {
       var next = moveSelectionBlock(view.state, dir);
       if (next && next instanceof prosemirrorState.NodeSelection) return apply(view, next);
       return false;
@@ -2704,7 +2777,11 @@ function isIgnorable(dom) {
   return desc && desc.size == 0 && (dom.nextSibling || dom.nodeName != "BR");
 }
 
-function skipIgnoredNodesLeft(view) {
+function skipIgnoredNodes(view, dir) {
+  return dir < 0 ? skipIgnoredNodesBefore(view) : skipIgnoredNodesAfter(view);
+}
+
+function skipIgnoredNodesBefore(view) {
   var sel = view.domSelectionRange();
   var node = sel.focusNode,
       offset = sel.focusOffset;
@@ -2754,7 +2831,7 @@ function skipIgnoredNodesLeft(view) {
   if (force) setSelFocus(view, node, offset);else if (moveNode) setSelFocus(view, moveNode, moveOffset);
 }
 
-function skipIgnoredNodesRight(view) {
+function skipIgnoredNodesAfter(view) {
   var sel = view.domSelectionRange();
   var node = sel.focusNode,
       offset = sel.focusOffset;
@@ -2822,6 +2899,31 @@ function setSelFocus(view, node, offset) {
   }, 50);
 }
 
+function findDirection(view, pos) {
+  var $pos = view.state.doc.resolve(pos);
+
+  if (!(chrome || windows) && $pos.parent.inlineContent) {
+    var coords = view.coordsAtPos(pos);
+
+    if (pos > $pos.start()) {
+      var before = view.coordsAtPos(pos - 1);
+      var mid = (before.top + before.bottom) / 2;
+      if (mid > coords.top && mid < coords.bottom && Math.abs(before.left - coords.left) > 1) return before.left < coords.left ? "ltr" : "rtl";
+    }
+
+    if (pos < $pos.end()) {
+      var after = view.coordsAtPos(pos + 1);
+
+      var _mid = (after.top + after.bottom) / 2;
+
+      if (_mid > coords.top && _mid < coords.bottom && Math.abs(after.left - coords.left) > 1) return after.left > coords.left ? "ltr" : "rtl";
+    }
+  }
+
+  var computed = getComputedStyle(view.dom).direction;
+  return computed == "rtl" ? "rtl" : "ltr";
+}
+
 function selectVertically(view, dir, mods) {
   var sel = view.state.selection;
   if (sel instanceof prosemirrorState.TextSelection && !sel.empty || mods.indexOf("s") > -1) return false;
@@ -2902,19 +3004,22 @@ function captureKeyDown(view, event) {
       mods = getMods(event);
 
   if (code == 8 || mac && code == 72 && mods == "c") {
-    return stopNativeHorizontalDelete(view, -1) || skipIgnoredNodesLeft(view);
+    return stopNativeHorizontalDelete(view, -1) || skipIgnoredNodes(view, -1);
   } else if (code == 46 || mac && code == 68 && mods == "c") {
-    return stopNativeHorizontalDelete(view, 1) || skipIgnoredNodesRight(view);
+    return stopNativeHorizontalDelete(view, 1) || skipIgnoredNodes(view, 1);
   } else if (code == 13 || code == 27) {
     return true;
   } else if (code == 37 || mac && code == 66 && mods == "c") {
-    return selectHorizontally(view, -1, mods) || skipIgnoredNodesLeft(view);
+    var dir = code == 37 ? findDirection(view, view.state.selection.from) == "ltr" ? -1 : 1 : -1;
+    return selectHorizontally(view, dir, mods) || skipIgnoredNodes(view, dir);
   } else if (code == 39 || mac && code == 70 && mods == "c") {
-    return selectHorizontally(view, 1, mods) || skipIgnoredNodesRight(view);
+    var _dir = code == 39 ? findDirection(view, view.state.selection.from) == "ltr" ? 1 : -1 : 1;
+
+    return selectHorizontally(view, _dir, mods) || skipIgnoredNodes(view, _dir);
   } else if (code == 38 || mac && code == 80 && mods == "c") {
-    return selectVertically(view, -1, mods) || skipIgnoredNodesLeft(view);
+    return selectVertically(view, -1, mods) || skipIgnoredNodes(view, -1);
   } else if (code == 40 || mac && code == 78 && mods == "c") {
-    return safariDownArrowBug(view) || selectVertically(view, 1, mods) || skipIgnoredNodesRight(view);
+    return safariDownArrowBug(view) || selectVertically(view, 1, mods) || skipIgnoredNodesAfter(view);
   } else if (mods == (mac ? "m" : "c") && (code == 66 || code == 73 || code == 89 || code == 90)) {
     return true;
   }
@@ -3241,6 +3346,7 @@ var InputState = _createClass(function InputState() {
   this.composingTimeout = -1;
   this.compositionNodes = [];
   this.compositionEndedAt = -2e8;
+  this.compositionID = 1;
   this.domChangeCount = 0;
   this.eventHandlers = Object.create(null);
   this.hideSelectionGuard = null;
@@ -3704,6 +3810,7 @@ editHandlers.compositionend = function (view, event) {
   if (view.composing) {
     view.input.composing = false;
     view.input.compositionEndedAt = event.timeStamp;
+    view.input.compositionID++;
     scheduleComposeEnd(view, 20);
   }
 };
@@ -5185,6 +5292,7 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
       var _tr = view.state.tr.setSelection(newSel);
 
       if (origin == "pointer") _tr.setMeta("pointer", true);else if (origin == "key") _tr.scrollIntoView();
+      if (view.composing) _tr.setMeta("composition", view.input.compositionID);
       view.dispatch(_tr);
     }
 
@@ -5232,7 +5340,12 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
       if (parse.sel) {
         var _sel = resolveSelection(view, view.state.doc, parse.sel);
 
-        if (_sel && !_sel.eq(view.state.selection)) view.dispatch(view.state.tr.setSelection(_sel));
+        if (_sel && !_sel.eq(view.state.selection)) {
+          var _tr2 = view.state.tr.setSelection(_sel);
+
+          if (view.composing) _tr2.setMeta("composition", view.input.compositionID);
+          view.dispatch(_tr2);
+        }
       }
 
       return;
@@ -5334,6 +5447,7 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
   }
 
   if (storedMarks) tr.ensureMarks(storedMarks);
+  if (view.composing) tr.setMeta("composition", view.input.compositionID);
   view.dispatch(tr.scrollIntoView());
 }
 

package/dist/index.js

@@ -94,6 +94,21 @@ function deepActiveElement(doc) {
         elt = elt.shadowRoot.activeElement;
     return elt;
 }
+function caretFromPoint(doc, x, y) {
+    if (doc.caretPositionFromPoint) {
+        try { // Firefox throws for this call in hard-to-predict circumstances (#994)
+            let pos = doc.caretPositionFromPoint(x, y);
+            if (pos)
+                return { node: pos.offsetNode, offset: pos.offset };
+        }
+        catch (_) { }
+    }
+    if (doc.caretRangeFromPoint) {
+        let range = doc.caretRangeFromPoint(x, y);
+        if (range)
+            return { node: range.startContainer, offset: range.startOffset };
+    }
+}
 
 const nav = typeof navigator != "undefined" ? navigator : null;
 const doc = typeof document != "undefined" ? document : null;
@@ -112,6 +127,7 @@ const safari = !ie && !!nav && /Apple Computer/.test(nav.vendor);
 // Is true for both iOS and iPadOS for convenience
 const ios = safari && (/Mobile\/\w+/.test(agent) || !!nav && nav.maxTouchPoints > 2);
 const mac = ios || (nav ? /Mac/.test(nav.platform) : false);
+const windows = nav ? /Win/.test(nav.platform) : false;
 const android = /Android \d/.test(agent);
 const webkit = !!doc && "webkitFontSmoothing" in doc.documentElement.style;
 const webkit_version = webkit ? +(/\bAppleWebKit\/(\d+)/.exec(navigator.userAgent) || [0, 0])[1] : 0;
@@ -237,6 +253,7 @@ function focusPreventScroll(dom) {
 function findOffsetInNode(node, coords) {
     let closest, dxClosest = 2e8, coordsClosest, offset = 0;
     let rowBot = coords.top, rowTop = coords.top;
+    let firstBelow, coordsBelow;
     for (let child = node.firstChild, childIndex = 0; child; child = child.nextSibling, childIndex++) {
         let rects;
         if (child.nodeType == 1)
@@ -264,11 +281,20 @@ function findOffsetInNode(node, coords) {
                     continue;
                 }
             }
+            else if (rect.top > coords.top && !firstBelow && rect.left <= coords.left && rect.right >= coords.left) {
+                firstBelow = child;
+                coordsBelow = { left: Math.max(rect.left, Math.min(rect.right, coords.left)), top: rect.top };
+            }
             if (!closest && (coords.left >= rect.right && coords.top >= rect.top ||
                 coords.left >= rect.left && coords.top >= rect.bottom))
                 offset = childIndex + 1;
         }
     }
+    if (!closest && firstBelow) {
+        closest = firstBelow;
+        coordsClosest = coordsBelow;
+        dxClosest = 0;
+    }
     if (closest && closest.nodeType == 3)
         return findOffsetInText(closest, coordsClosest);
     if (!closest || (dxClosest && closest.nodeType == 1))
@@ -363,19 +389,9 @@ function elementFromPoint(element, coords, box) {
 // Given an x,y position on the editor, get the position in the document.
 function posAtCoords(view, coords) {
     let doc = view.dom.ownerDocument, node, offset = 0;
-    if (doc.caretPositionFromPoint) {
-        try { // Firefox throws for this call in hard-to-predict circumstances (#994)
-            let pos = doc.caretPositionFromPoint(coords.left, coords.top);
-            if (pos)
-                ({ offsetNode: node, offset } = pos);
-        }
-        catch (_) { }
-    }
-    if (!node && doc.caretRangeFromPoint) {
-        let range = doc.caretRangeFromPoint(coords.left, coords.top);
-        if (range)
-            ({ startContainer: node, startOffset: offset } = range);
-    }
+    let caret = caretFromPoint(doc, coords.left, coords.top);
+    if (caret)
+        ({ node, offset } = caret);
     let elt = (view.root.elementFromPoint ? view.root : doc)
         .elementFromPoint(coords.left, coords.top);
     let pos;
@@ -424,9 +440,17 @@ function posAtCoords(view, coords) {
     let desc = view.docView.nearestDesc(elt, true);
     return { pos, inside: desc ? desc.posAtStart - desc.border : -1 };
 }
+function nonZero(rect) {
+    return rect.top < rect.bottom || rect.left < rect.right;
+}
 function singleRect(target, bias) {
     let rects = target.getClientRects();
-    return !rects.length ? target.getBoundingClientRect() : rects[bias < 0 ? 0 : rects.length - 1];
+    if (rects.length) {
+        let first = rects[bias < 0 ? 0 : rects.length - 1];
+        if (nonZero(first))
+            return first;
+    }
+    return Array.prototype.find.call(rects, nonZero) || target.getBoundingClientRect();
 }
 const BIDI = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
 // Given a position in the document model, get a bounding box of the
@@ -468,7 +492,7 @@ function coordsAtPos(view, pos, side) {
             else {
                 to++;
             }
-            return flattenV(singleRect(textRange(node, from, to), 1), takeSide < 0);
+            return flattenV(singleRect(textRange(node, from, to), takeSide), takeSide < 0);
         }
     }
     let $dom = view.state.doc.resolve(pos - (atom || 0));
@@ -1159,8 +1183,6 @@ class NodeViewDesc extends ViewDesc {
         this.outerDeco = outerDeco;
         this.innerDeco = innerDeco;
         this.nodeDOM = nodeDOM;
-        if (contentDOM)
-            this.updateChildren(view, pos);
     }
     // By default, a node is rendered using the `toDOM` method from the
     // node type spec. But client code can use the `nodeViews` spec to
@@ -1273,7 +1295,7 @@ class NodeViewDesc extends ViewDesc {
                 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)) ;
+            else if (updater.updateNextNode(child, outerDeco, innerDeco, view, i, off)) ;
             else {
                 // Add it as a new view
                 updater.addNode(child, outerDeco, innerDeco, view, off);
@@ -1387,7 +1409,10 @@ class NodeViewDesc extends ViewDesc {
 // and used by the view class.
 function docViewDesc(doc, outerDeco, innerDeco, dom, view) {
     applyOuterDeco(dom, outerDeco, doc);
-    return new NodeViewDesc(undefined, doc, outerDeco, innerDeco, dom, dom, dom, view, 0);
+    let docView = new NodeViewDesc(undefined, doc, outerDeco, innerDeco, dom, dom, dom, view, 0);
+    if (docView.contentDOM)
+        docView.updateChildren(view, 0);
+    return docView;
 }
 class TextViewDesc extends NodeViewDesc {
     constructor(parent, node, outerDeco, innerDeco, dom, nodeDOM, view) {
@@ -1760,14 +1785,14 @@ class ViewTreeUpdater {
     }
     // Try to update the next node, if any, to the given data. Checks
     // pre-matches to avoid overwriting nodes that could still be used.
-    updateNextNode(node, outerDeco, innerDeco, view, index) {
+    updateNextNode(node, outerDeco, innerDeco, view, index, pos) {
         for (let i = this.index; i < this.top.children.length; i++) {
             let next = this.top.children[i];
             if (next instanceof NodeViewDesc) {
                 let preMatch = this.preMatch.matched.get(next);
                 if (preMatch != null && preMatch != index)
                     return false;
-                let nextDOM = next.dom;
+                let nextDOM = next.dom, updated;
                 // Can't update if nextDOM is or contains this.lock, except if
                 // it's a text node whose content already matches the new text
                 // and whose decorations match the new ones.
@@ -1781,14 +1806,41 @@ class ViewTreeUpdater {
                     this.index++;
                     return true;
                 }
+                else if (!locked && (updated = this.recreateWrapper(next, node, outerDeco, innerDeco, view, pos))) {
+                    this.top.children[this.index] = updated;
+                    this.changed = true;
+                    this.index++;
+                    return true;
+                }
                 break;
             }
         }
         return false;
     }
+    // When a node with content is replaced by a different node with
+    // identical content, move over its children.
+    recreateWrapper(next, node, outerDeco, innerDeco, view, pos) {
+        if (next.dirty || node.isAtom || !next.children.length ||
+            !next.node.content.eq(node.content))
+            return null;
+        let wrapper = NodeViewDesc.create(this.top, node, outerDeco, innerDeco, view, pos);
+        if (!wrapper.contentDOM)
+            return null;
+        wrapper.children = next.children;
+        next.children = [];
+        for (let ch of wrapper.children)
+            ch.parent = wrapper;
+        wrapper.dirty = CONTENT_DIRTY;
+        wrapper.updateChildren(view, pos + 1);
+        wrapper.dirty = NOT_DIRTY;
+        return wrapper;
+    }
     // Insert the node as a newly created node desc.
     addNode(node, outerDeco, innerDeco, view, pos) {
-        this.top.children.splice(this.index++, 0, NodeViewDesc.create(this.top, node, outerDeco, innerDeco, view, pos));
+        let desc = NodeViewDesc.create(this.top, node, outerDeco, innerDeco, view, pos);
+        if (desc.contentDOM)
+            desc.updateChildren(view, pos + 1);
+        this.top.children.splice(this.index++, 0, desc);
         this.changed = true;
     }
     placeWidget(widget, view, pos) {
@@ -2260,7 +2312,7 @@ function selectHorizontally(view, dir, mods) {
         if (!sel.empty || mods.indexOf("s") > -1) {
             return false;
         }
-        else if (view.endOfTextblock(dir > 0 ? "right" : "left")) {
+        else if (view.endOfTextblock(dir > 0 ? "forward" : "backward")) {
             let next = moveSelectionBlock(view.state, dir);
             if (next && (next instanceof NodeSelection))
                 return apply(view, next);
@@ -2304,9 +2356,12 @@ function isIgnorable(dom) {
     let desc = dom.pmViewDesc;
     return desc && desc.size == 0 && (dom.nextSibling || dom.nodeName != "BR");
 }
+function skipIgnoredNodes(view, dir) {
+    return dir < 0 ? skipIgnoredNodesBefore(view) : skipIgnoredNodesAfter(view);
+}
 // Make sure the cursor isn't directly after one or more ignored
 // nodes, which will confuse the browser's cursor motion logic.
-function skipIgnoredNodesLeft(view) {
+function skipIgnoredNodesBefore(view) {
     let sel = view.domSelectionRange();
     let node = sel.focusNode, offset = sel.focusOffset;
     if (!node)
@@ -2365,7 +2420,7 @@ function skipIgnoredNodesLeft(view) {
 }
 // Make sure the cursor isn't directly before one or more ignored
 // nodes.
-function skipIgnoredNodesRight(view) {
+function skipIgnoredNodesAfter(view) {
     let sel = view.domSelectionRange();
     let node = sel.focusNode, offset = sel.focusOffset;
     if (!node)
@@ -2434,6 +2489,26 @@ function setSelFocus(view, node, offset) {
             selectionToDOM(view);
     }, 50);
 }
+function findDirection(view, pos) {
+    let $pos = view.state.doc.resolve(pos);
+    if (!(chrome || windows) && $pos.parent.inlineContent) {
+        let coords = view.coordsAtPos(pos);
+        if (pos > $pos.start()) {
+            let before = view.coordsAtPos(pos - 1);
+            let mid = (before.top + before.bottom) / 2;
+            if (mid > coords.top && mid < coords.bottom && Math.abs(before.left - coords.left) > 1)
+                return before.left < coords.left ? "ltr" : "rtl";
+        }
+        if (pos < $pos.end()) {
+            let after = view.coordsAtPos(pos + 1);
+            let mid = (after.top + after.bottom) / 2;
+            if (mid > coords.top && mid < coords.bottom && Math.abs(after.left - coords.left) > 1)
+                return after.left > coords.left ? "ltr" : "rtl";
+        }
+    }
+    let computed = getComputedStyle(view.dom).direction;
+    return computed == "rtl" ? "rtl" : "ltr";
+}
 // Check whether vertical selection motion would involve node
 // selections. If so, apply it (if not, the result is left to the
 // browser)
@@ -2521,25 +2596,27 @@ function getMods(event) {
 function captureKeyDown(view, event) {
     let code = event.keyCode, mods = getMods(event);
     if (code == 8 || (mac && code == 72 && mods == "c")) { // Backspace, Ctrl-h on Mac
-        return stopNativeHorizontalDelete(view, -1) || skipIgnoredNodesLeft(view);
+        return stopNativeHorizontalDelete(view, -1) || skipIgnoredNodes(view, -1);
     }
     else if (code == 46 || (mac && code == 68 && mods == "c")) { // Delete, Ctrl-d on Mac
-        return stopNativeHorizontalDelete(view, 1) || skipIgnoredNodesRight(view);
+        return stopNativeHorizontalDelete(view, 1) || skipIgnoredNodes(view, 1);
     }
     else if (code == 13 || code == 27) { // Enter, Esc
         return true;
     }
     else if (code == 37 || (mac && code == 66 && mods == "c")) { // Left arrow, Ctrl-b on Mac
-        return selectHorizontally(view, -1, mods) || skipIgnoredNodesLeft(view);
+        let dir = code == 37 ? (findDirection(view, view.state.selection.from) == "ltr" ? -1 : 1) : -1;
+        return selectHorizontally(view, dir, mods) || skipIgnoredNodes(view, dir);
     }
     else if (code == 39 || (mac && code == 70 && mods == "c")) { // Right arrow, Ctrl-f on Mac
-        return selectHorizontally(view, 1, mods) || skipIgnoredNodesRight(view);
+        let dir = code == 39 ? (findDirection(view, view.state.selection.from) == "ltr" ? 1 : -1) : 1;
+        return selectHorizontally(view, dir, mods) || skipIgnoredNodes(view, dir);
     }
     else if (code == 38 || (mac && code == 80 && mods == "c")) { // Up arrow, Ctrl-p on Mac
-        return selectVertically(view, -1, mods) || skipIgnoredNodesLeft(view);
+        return selectVertically(view, -1, mods) || skipIgnoredNodes(view, -1);
     }
     else if (code == 40 || (mac && code == 78 && mods == "c")) { // Down arrow, Ctrl-n on Mac
-        return safariDownArrowBug(view) || selectVertically(view, 1, mods) || skipIgnoredNodesRight(view);
+        return safariDownArrowBug(view) || selectVertically(view, 1, mods) || skipIgnoredNodesAfter(view);
     }
     else if (mods == (mac ? "m" : "c") &&
         (code == 66 || code == 73 || code == 89 || code == 90)) { // Mod-[biyz]
@@ -2818,6 +2895,7 @@ class InputState {
         this.composingTimeout = -1;
         this.compositionNodes = [];
         this.compositionEndedAt = -2e8;
+        this.compositionID = 1;
         this.domChangeCount = 0;
         this.eventHandlers = Object.create(null);
         this.hideSelectionGuard = null;
@@ -3247,6 +3325,7 @@ editHandlers.compositionend = (view, event) => {
     if (view.composing) {
         view.input.composing = false;
         view.input.compositionEndedAt = event.timeStamp;
+        view.input.compositionID++;
         scheduleComposeEnd(view, 20);
     }
 };
@@ -4590,6 +4669,8 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
                 tr.setMeta("pointer", true);
             else if (origin == "key")
                 tr.scrollIntoView();
+            if (view.composing)
+                tr.setMeta("composition", view.input.compositionID);
             view.dispatch(tr);
         }
         return;
@@ -4628,8 +4709,12 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
         else {
             if (parse.sel) {
                 let sel = resolveSelection(view, view.state.doc, parse.sel);
-                if (sel && !sel.eq(view.state.selection))
-                    view.dispatch(view.state.tr.setSelection(sel));
+                if (sel && !sel.eq(view.state.selection)) {
+                    let tr = view.state.tr.setSelection(sel);
+                    if (view.composing)
+                        tr.setMeta("composition", view.input.compositionID);
+                    view.dispatch(tr);
+                }
             }
             return;
         }
@@ -4760,6 +4845,8 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
     }
     if (storedMarks)
         tr.ensureMarks(storedMarks);
+    if (view.composing)
+        tr.setMeta("composition", view.input.compositionID);
     view.dispatch(tr.scrollIntoView());
 }
 function resolveSelection(view, doc, parsedSel) {

package/package.json

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

package/src/browser.ts

@@ -18,6 +18,7 @@ export const safari = !ie && !!nav && /Apple Computer/.test(nav.vendor)
 // Is true for both iOS and iPadOS for convenience
 export const ios = safari && (/Mobile\/\w+/.test(agent) || !!nav && nav.maxTouchPoints > 2)
 export const mac = ios || (nav ? /Mac/.test(nav.platform) : false)
+export const windows = nav ? /Win/.test(nav.platform) : false
 export const android = /Android \d/.test(agent)
 export const webkit = !!doc && "webkitFontSmoothing" in doc.documentElement.style
 export const webkit_version = webkit ? +(/\bAppleWebKit\/(\d+)/.exec(navigator.userAgent) || [0, 0])[1] : 0

package/src/capturekeys.ts

@@ -21,7 +21,7 @@ function selectHorizontally(view: EditorView, dir: number, mods: string) {
   if (sel instanceof TextSelection) {
     if (!sel.empty || mods.indexOf("s") > -1) {
       return false
-    } else if (view.endOfTextblock(dir > 0 ? "right" : "left")) {
+    } else if (view.endOfTextblock(dir > 0 ? "forward" : "backward")) {
       let next = moveSelectionBlock(view.state, dir)
       if (next && (next instanceof NodeSelection)) return apply(view, next)
       return false
@@ -59,9 +59,13 @@ function isIgnorable(dom: Node) {
   return desc && desc.size == 0 && (dom.nextSibling || dom.nodeName != "BR")
 }
 
+function skipIgnoredNodes(view: EditorView, dir: number) {
+  return dir < 0 ? skipIgnoredNodesBefore(view) : skipIgnoredNodesAfter(view)
+}
+
 // Make sure the cursor isn't directly after one or more ignored
 // nodes, which will confuse the browser's cursor motion logic.
-function skipIgnoredNodesLeft(view: EditorView) {
+function skipIgnoredNodesBefore(view: EditorView) {
   let sel = view.domSelectionRange()
   let node = sel.focusNode!, offset = sel.focusOffset
   if (!node) return
@@ -109,7 +113,7 @@ function skipIgnoredNodesLeft(view: EditorView) {
 
 // Make sure the cursor isn't directly before one or more ignored
 // nodes.
-function skipIgnoredNodesRight(view: EditorView) {
+function skipIgnoredNodesAfter(view: EditorView) {
   let sel = view.domSelectionRange()
   let node = sel.focusNode!, offset = sel.focusOffset
   if (!node) return
@@ -171,6 +175,27 @@ function setSelFocus(view: EditorView, node: Node, offset: number) {
   }, 50)
 }
 
+function findDirection(view: EditorView, pos: number): "rtl" | "ltr" {
+  let $pos = view.state.doc.resolve(pos)
+  if (!(browser.chrome || browser.windows) && $pos.parent.inlineContent) {
+    let coords = view.coordsAtPos(pos)
+    if (pos > $pos.start()) {
+      let before = view.coordsAtPos(pos - 1)
+      let mid = (before.top + before.bottom) / 2
+      if (mid > coords.top && mid < coords.bottom && Math.abs(before.left - coords.left) > 1)
+        return before.left < coords.left ? "ltr" : "rtl"
+    }
+    if (pos < $pos.end()) {
+      let after = view.coordsAtPos(pos + 1)
+      let mid = (after.top + after.bottom) / 2
+      if (mid > coords.top && mid < coords.bottom && Math.abs(after.left - coords.left) > 1)
+        return after.left > coords.left ? "ltr" : "rtl"
+    }
+  }
+  let computed = getComputedStyle(view.dom).direction
+  return computed == "rtl" ? "rtl" : "ltr"
+}
+
 // Check whether vertical selection motion would involve node
 // selections. If so, apply it (if not, the result is left to the
 // browser)
@@ -252,19 +277,21 @@ function getMods(event: KeyboardEvent) {
 export function captureKeyDown(view: EditorView, event: KeyboardEvent) {
   let code = event.keyCode, mods = getMods(event)
   if (code == 8 || (browser.mac && code == 72 && mods == "c")) { // Backspace, Ctrl-h on Mac
-    return stopNativeHorizontalDelete(view, -1) || skipIgnoredNodesLeft(view)
+    return stopNativeHorizontalDelete(view, -1) || skipIgnoredNodes(view, -1)
   } else if (code == 46 || (browser.mac && code == 68 && mods == "c")) { // Delete, Ctrl-d on Mac
-    return stopNativeHorizontalDelete(view, 1) || skipIgnoredNodesRight(view)
+    return stopNativeHorizontalDelete(view, 1) || skipIgnoredNodes(view, 1)
   } else if (code == 13 || code == 27) { // Enter, Esc
     return true
   } else if (code == 37 || (browser.mac && code == 66 && mods == "c")) { // Left arrow, Ctrl-b on Mac
-    return selectHorizontally(view, -1, mods) || skipIgnoredNodesLeft(view)
+    let dir = code == 37 ? (findDirection(view, view.state.selection.from) == "ltr" ? -1 : 1) : -1
+    return selectHorizontally(view, dir, mods) || skipIgnoredNodes(view, dir)
   } else if (code == 39 || (browser.mac && code == 70 && mods == "c")) { // Right arrow, Ctrl-f on Mac
-    return selectHorizontally(view, 1, mods) || skipIgnoredNodesRight(view)
+    let dir = code == 39 ? (findDirection(view, view.state.selection.from) == "ltr" ? 1 : -1) : 1
+    return selectHorizontally(view, dir, mods) || skipIgnoredNodes(view, dir)
   } else if (code == 38 || (browser.mac && code == 80 && mods == "c")) { // Up arrow, Ctrl-p on Mac
-    return selectVertically(view, -1, mods) || skipIgnoredNodesLeft(view)
+    return selectVertically(view, -1, mods) || skipIgnoredNodes(view, -1)
   } else if (code == 40 || (browser.mac && code == 78 && mods == "c")) { // Down arrow, Ctrl-n on Mac
-    return safariDownArrowBug(view) || selectVertically(view, 1, mods) || skipIgnoredNodesRight(view)
+    return safariDownArrowBug(view) || selectVertically(view, 1, mods) || skipIgnoredNodesAfter(view)
   } else if (mods == (browser.mac ? "m" : "c") &&
              (code == 66 || code == 73 || code == 89 || code == 90)) { // Mod-[biyz]
     return true

package/src/dom.ts

@@ -100,3 +100,16 @@ export function deepActiveElement(doc: Document) {
   while (elt && elt.shadowRoot) elt = elt.shadowRoot.activeElement
   return elt
 }
+
+export function caretFromPoint(doc: Document, x: number, y: number): {node: Node, offset: number} | undefined {
+  if ((doc as any).caretPositionFromPoint) {
+    try { // Firefox throws for this call in hard-to-predict circumstances (#994)
+      let pos = (doc as any).caretPositionFromPoint(x, y)
+      if (pos) return {node: pos.offsetNode, offset: pos.offset}
+    } catch (_) {}
+  }
+  if (doc.caretRangeFromPoint) {
+    let range = doc.caretRangeFromPoint(x, y)
+    if (range) return {node: range.startContainer, offset: range.startOffset}
+  }
+}

package/src/domchange.ts

@@ -90,6 +90,7 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
       let tr = view.state.tr.setSelection(newSel)
       if (origin == "pointer") tr.setMeta("pointer", true)
       else if (origin == "key") tr.scrollIntoView()
+      if (view.composing) tr.setMeta("composition", view.input.compositionID)
       view.dispatch(tr)
     }
     return
@@ -130,7 +131,11 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
     } else {
       if (parse.sel) {
         let sel = resolveSelection(view, view.state.doc, parse.sel)
-        if (sel && !sel.eq(view.state.selection)) view.dispatch(view.state.tr.setSelection(sel))
+        if (sel && !sel.eq(view.state.selection)) {
+          let tr = view.state.tr.setSelection(sel)
+          if (view.composing) tr.setMeta("composition", view.input.compositionID)
+          view.dispatch(tr)
+        }
       }
       return
     }
@@ -263,6 +268,7 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
       tr.setSelection(sel)
   }
   if (storedMarks) tr.ensureMarks(storedMarks)
+  if (view.composing) tr.setMeta("composition", view.input.compositionID)
   view.dispatch(tr.scrollIntoView())
 }
 

package/src/domcoords.ts

@@ -1,5 +1,5 @@
 import {EditorState} from "prosemirror-state"
-import {nodeSize, textRange, parentNode} from "./dom"
+import {nodeSize, textRange, parentNode, caretFromPoint} from "./dom"
 import * as browser from "./browser"
 import {EditorView} from "./index"
 
@@ -133,6 +133,7 @@ export function focusPreventScroll(dom: HTMLElement) {
 function findOffsetInNode(node: HTMLElement, coords: {top: number, left: number}): {node: Node, offset: number} {
   let closest, dxClosest = 2e8, coordsClosest: {left: number, top: number} | undefined, offset = 0
   let rowBot = coords.top, rowTop = coords.top
+  let firstBelow: Node | undefined, coordsBelow: {left: number, top: number} | undefined
   for (let child = node.firstChild, childIndex = 0; child; child = child.nextSibling, childIndex++) {
     let rects
     if (child.nodeType == 1) rects = (child as HTMLElement).getClientRects()
@@ -157,12 +158,16 @@ function findOffsetInNode(node: HTMLElement, coords: {top: number, left: number}
             offset = childIndex + (coords.left >= (rect.left + rect.right) / 2 ? 1 : 0)
           continue
         }
+      } else if (rect.top > coords.top && !firstBelow && rect.left <= coords.left && rect.right >= coords.left) {
+        firstBelow = child
+        coordsBelow = {left: Math.max(rect.left, Math.min(rect.right, coords.left)), top: rect.top}
       }
       if (!closest && (coords.left >= rect.right && coords.top >= rect.top ||
                        coords.left >= rect.left && coords.top >= rect.bottom))
         offset = childIndex + 1
     }
   }
+  if (!closest && firstBelow) { closest = firstBelow; coordsClosest = coordsBelow; dxClosest = 0 }
   if (closest && closest.nodeType == 3) return findOffsetInText(closest as Text, coordsClosest!)
   if (!closest || (dxClosest && closest.nodeType == 1)) return {node, offset}
   return findOffsetInNode(closest as HTMLElement, coordsClosest!)
@@ -255,16 +260,8 @@ function elementFromPoint(element: HTMLElement, coords: {top: number, left: numb
 // Given an x,y position on the editor, get the position in the document.
 export function posAtCoords(view: EditorView, coords: {top: number, left: number}) {
   let doc = view.dom.ownerDocument, node: Node | undefined, offset = 0
-  if ((doc as any).caretPositionFromPoint) {
-    try { // Firefox throws for this call in hard-to-predict circumstances (#994)
-      let pos = (doc as any).caretPositionFromPoint(coords.left, coords.top)
-      if (pos) ({offsetNode: node, offset} = pos)
-    } catch (_) {}
-  }
-  if (!node && doc.caretRangeFromPoint) {
-    let range = doc.caretRangeFromPoint(coords.left, coords.top)
-    if (range) ({startContainer: node, startOffset: offset} = range)
-  }
+  let caret = caretFromPoint(doc, coords.left, coords.top)
+  if (caret) ({node, offset} = caret)
 
   let elt = ((view.root as any).elementFromPoint ? view.root : doc)
               .elementFromPoint(coords.left, coords.top) as HTMLElement
@@ -312,9 +309,17 @@ export function posAtCoords(view: EditorView, coords: {top: number, left: number
   return {pos, inside: desc ? desc.posAtStart - desc.border : -1}
 }
 
+function nonZero(rect: DOMRect) {
+  return rect.top < rect.bottom || rect.left < rect.right
+}
+
 function singleRect(target: HTMLElement | Range, bias: number): DOMRect {
   let rects = target.getClientRects()
-  return !rects.length ? target.getBoundingClientRect() : rects[bias < 0 ? 0 : rects.length - 1]
+  if (rects.length) {
+    let first = rects[bias < 0 ? 0 : rects.length - 1]
+    if (nonZero(first)) return first
+  }
+  return Array.prototype.find.call(rects, nonZero) || target.getBoundingClientRect()
 }
 
 const BIDI = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/
@@ -348,7 +353,7 @@ export function coordsAtPos(view: EditorView, pos: number, side: number): Rect {
       else if (side >= 0 && offset == node.nodeValue!.length) { from--; takeSide = 1 }
       else if (side < 0) { from-- }
       else { to ++ }
-      return flattenV(singleRect(textRange(node as Text, from, to), 1), takeSide < 0)
+      return flattenV(singleRect(textRange(node as Text, from, to), takeSide), takeSide < 0)
     }
   }
 

package/src/input.ts

@@ -33,6 +33,7 @@ export class InputState {
   composingTimeout = -1
   compositionNodes: ViewDesc[] = []
   compositionEndedAt = -2e8
+  compositionID = 1
   domChangeCount = 0
   eventHandlers: {[event: string]: (event: Event) => void} = Object.create(null)
   hideSelectionGuard: (() => void) | null = null
@@ -486,6 +487,7 @@ editHandlers.compositionend = (view, event) => {
   if (view.composing) {
     view.input.composing = false
     view.input.compositionEndedAt = event.timeStamp
+    view.input.compositionID++
     scheduleComposeEnd(view, 20)
   }
 }

package/src/viewdesc.ts

@@ -619,7 +619,6 @@ export class NodeViewDesc extends ViewDesc {
     pos: number
   ) {
     super(parent, [], dom, contentDOM)
-    if (contentDOM) this.updateChildren(view, pos)
   }
 
   // By default, a node is rendered using the `toDOM` method from the
@@ -733,7 +732,7 @@ export class NodeViewDesc extends ViewDesc {
                  (compIndex = updater.findIndexWithChild(composition!.node)) > -1 &&
                  updater.updateNodeAt(child, outerDeco, innerDeco, compIndex, view)) {
         // Updated the specific node that holds the composition
-      } else if (updater.updateNextNode(child, outerDeco, innerDeco, view, i)) {
+      } else if (updater.updateNextNode(child, outerDeco, innerDeco, view, i, off)) {
         // Could update an existing node to reflect this node
       } else {
         // Add it as a new view
@@ -846,7 +845,9 @@ export class NodeViewDesc extends ViewDesc {
 export function docViewDesc(doc: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource,
                             dom: HTMLElement, view: EditorView): NodeViewDesc {
   applyOuterDeco(dom, outerDeco, doc)
-  return new NodeViewDesc(undefined, doc, outerDeco, innerDeco, dom, dom, dom, view, 0)
+  let docView = new NodeViewDesc(undefined, doc, outerDeco, innerDeco, dom, dom, dom, view, 0)
+  if (docView.contentDOM) docView.updateChildren(view, 0)
+  return docView
 }
 
 class TextViewDesc extends NodeViewDesc {
@@ -1222,13 +1223,13 @@ class ViewTreeUpdater {
   // Try to update the next node, if any, to the given data. Checks
   // pre-matches to avoid overwriting nodes that could still be used.
   updateNextNode(node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource,
-                 view: EditorView, index: number): boolean {
+                 view: EditorView, index: number, pos: number): boolean {
     for (let i = this.index; i < this.top.children.length; i++) {
       let next = this.top.children[i]
       if (next instanceof NodeViewDesc) {
         let preMatch = this.preMatch.matched.get(next)
         if (preMatch != null && preMatch != index) return false
-        let nextDOM = next.dom
+        let nextDOM = next.dom, updated
 
         // Can't update if nextDOM is or contains this.lock, except if
         // it's a text node whose content already matches the new text
@@ -1241,6 +1242,11 @@ class ViewTreeUpdater {
           if (next.dom != nextDOM) this.changed = true
           this.index++
           return true
+        } else if (!locked && (updated = this.recreateWrapper(next, node, outerDeco, innerDeco, view, pos))) {
+          this.top.children[this.index] = updated
+          this.changed = true
+          this.index++
+          return true
         }
         break
       }
@@ -1248,9 +1254,28 @@ class ViewTreeUpdater {
     return false
   }
 
+  // When a node with content is replaced by a different node with
+  // identical content, move over its children.
+  recreateWrapper(next: NodeViewDesc, node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource,
+                  view: EditorView, pos: number) {
+    if (next.dirty || node.isAtom || !next.children.length ||
+        !next.node.content.eq(node.content)) return null
+    let wrapper = NodeViewDesc.create(this.top, node, outerDeco, innerDeco, view, pos)
+    if (!wrapper.contentDOM) return null
+    wrapper.children = next.children
+    next.children = []
+    for (let ch of wrapper.children) ch.parent = wrapper
+    wrapper.dirty = CONTENT_DIRTY
+    wrapper.updateChildren(view, pos + 1)
+    wrapper.dirty = NOT_DIRTY
+    return wrapper
+  }
+
   // Insert the node as a newly created node desc.
   addNode(node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource, view: EditorView, pos: number) {
-    this.top.children.splice(this.index++, 0, NodeViewDesc.create(this.top, node, outerDeco, innerDeco, view, pos))
+    let desc = NodeViewDesc.create(this.top, node, outerDeco, innerDeco, view, pos)
+    if (desc.contentDOM) desc.updateChildren(view, pos + 1)
+    this.top.children.splice(this.index++, 0, desc)
     this.changed = true
   }