prosemirror-view 1.41.9 → 1.42.1

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 1.42.1 (2026-07-11)
+
+### Bug fixes
+
+Don't scroll to a bogus position when trying to scroll an element that has no layout into view.
+
+## 1.42.0 (2026-07-01)
+
+### Bug fixes
+
+The clipboard content parser now inlines simple styles defined in the pasted HTML before parsing it, since some applications output their styling that way.
+
+### New features
+
+Mark views now also support an `update` method.
+
 ## 1.41.9 (2026-06-10)
 
 ### Bug fixes

package/dist/index.cjs

@@ -202,6 +202,7 @@ function clientRect(node) {
   };
 }
 function scrollRectIntoView(view, rect, startDOM) {
+  if (!nonZero(rect) && rect.left == 0) return;
   var scrollThreshold = view.someProp("scrollThreshold") || 0,
     scrollMargin = view.someProp("scrollMargin") || 5;
   var doc = view.dom.ownerDocument;
@@ -1272,7 +1273,7 @@ var MarkViewDesc = function (_ViewDesc3) {
 var NodeViewDesc = function (_ViewDesc4) {
   _inherits(NodeViewDesc, _ViewDesc4);
   var _super4 = _createSuper(NodeViewDesc);
-  function NodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, view, pos) {
+  function NodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM) {
     var _this4;
     _classCallCheck(this, NodeViewDesc);
     _this4 = _super4.call(this, parent, [], dom, contentDOM);
@@ -1474,23 +1475,23 @@ var NodeViewDesc = function (_ViewDesc4) {
       }
       var nodeDOM = dom;
       dom = applyOuterDeco(dom, outerDeco, node);
-      if (spec) return descObj = new CustomNodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM || null, nodeDOM, spec, view, pos + 1);else if (node.isText) return new TextViewDesc(parent, node, outerDeco, innerDeco, dom, nodeDOM, view);else return new NodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM || null, nodeDOM, view, pos + 1);
+      if (spec) return descObj = new CustomNodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM || null, nodeDOM, spec);else if (node.isText) return new TextViewDesc(parent, node, outerDeco, innerDeco, dom, nodeDOM);else return new NodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM || null, nodeDOM);
     }
   }]);
   return NodeViewDesc;
 }(ViewDesc);
 function docViewDesc(doc, outerDeco, innerDeco, dom, view) {
   applyOuterDeco(dom, outerDeco, doc);
-  var docView = new NodeViewDesc(undefined, doc, outerDeco, innerDeco, dom, dom, dom, view, 0);
+  var docView = new NodeViewDesc(undefined, doc, outerDeco, innerDeco, dom, dom, dom);
   if (docView.contentDOM) docView.updateChildren(view, 0);
   return docView;
 }
 var TextViewDesc = function (_NodeViewDesc) {
   _inherits(TextViewDesc, _NodeViewDesc);
   var _super5 = _createSuper(TextViewDesc);
-  function TextViewDesc(parent, node, outerDeco, innerDeco, dom, nodeDOM, view) {
+  function TextViewDesc(parent, node, outerDeco, innerDeco, dom, nodeDOM) {
     _classCallCheck(this, TextViewDesc);
-    return _super5.call(this, parent, node, outerDeco, innerDeco, dom, null, nodeDOM, view, 0);
+    return _super5.call(this, parent, node, outerDeco, innerDeco, dom, null, nodeDOM);
   }
   _createClass(TextViewDesc, [{
     key: "parseRule",
@@ -1542,10 +1543,10 @@ var TextViewDesc = function (_NodeViewDesc) {
     }
   }, {
     key: "slice",
-    value: function slice(from, to, view) {
+    value: function slice(from, to, _view) {
       var node = this.node.cut(from, to),
         dom = document.createTextNode(node.text);
-      return new TextViewDesc(this.parent, node, this.outerDeco, this.innerDeco, dom, dom, view);
+      return new TextViewDesc(this.parent, node, this.outerDeco, this.innerDeco, dom, dom);
     }
   }, {
     key: "markDirty",
@@ -1601,10 +1602,10 @@ var TrailingHackViewDesc = function (_ViewDesc5) {
 var CustomNodeViewDesc = function (_NodeViewDesc2) {
   _inherits(CustomNodeViewDesc, _NodeViewDesc2);
   var _super7 = _createSuper(CustomNodeViewDesc);
-  function CustomNodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, spec, view, pos) {
+  function CustomNodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, spec) {
     var _this7;
     _classCallCheck(this, CustomNodeViewDesc);
-    _this7 = _super7.call(this, parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, view, pos);
+    _this7 = _super7.call(this, parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM);
     _this7.spec = spec;
     return _this7;
   }
@@ -1810,6 +1811,14 @@ var ViewTreeUpdater = function () {
             break;
           }
         }
+        if (found < 0 && this.index < this.top.children.length) {
+          var cur = this.top.children[this.index];
+          if (cur instanceof MarkViewDesc && cur.dirty != NODE_DIRTY && cur.mark.type == marks[depth].type && cur.spec.update && !this.isLocked(cur.dom) && cur.spec.update(marks[depth])) {
+            cur.mark = marks[depth];
+            found = this.index;
+            this.changed = true;
+          }
+        }
         if (found > -1) {
           if (found > this.index) {
             this.changed = true;
@@ -2831,9 +2840,8 @@ var wrapMap = {
   td: ["table", "tbody", "tr"],
   th: ["table", "tbody", "tr"]
 };
-var _detachedDoc = null;
 function detachedDoc() {
-  return _detachedDoc || (_detachedDoc = document.implementation.createHTMLDocument("title"));
+  return document.implementation.createHTMLDocument("title");
 }
 var _policy = null;
 function maybeWrapTrusted(html) {
@@ -2849,7 +2857,8 @@ function maybeWrapTrusted(html) {
 function readHTML(html) {
   var metas = /^(\s*<meta [^>]*>)*/.exec(html);
   if (metas) html = html.slice(metas[0].length);
-  var elt = detachedDoc().createElement("div");
+  var doc = detachedDoc(),
+    elt = doc.body;
   var firstTag = /<([a-z][^>\s]+)/i.exec(html),
     wrap;
   if (wrap = firstTag && wrapMap[firstTag[1].toLowerCase()]) html = wrap.map(function (n) {
@@ -2859,6 +2868,16 @@ function readHTML(html) {
   }).reverse().join("");
   elt.innerHTML = maybeWrapTrusted(html);
   if (wrap) for (var i = 0; i < wrap.length; i++) elt = elt.querySelector(wrap[i]) || elt;
+  for (var _i6 = 0; _i6 < doc.styleSheets.length; _i6++) {
+    var style = doc.styleSheets[_i6];
+    for (var j = 0; j < style.rules.length; j++) {
+      var rule = style.rules[j];
+      if (rule instanceof CSSStyleRule) {
+        var matches = elt.querySelectorAll(rule.selectorText);
+        for (var k = 0; k < matches.length; k++) matches[k].style.cssText += rule.style.cssText;
+      }
+    }
+  }
   return elt;
 }
 function restoreReplacedSpaces(dom) {
@@ -3852,10 +3871,10 @@ var DecorationSet = function () {
         var span = this.local[i];
         if (span.from <= end && span.to >= start && (!predicate || predicate(span.spec))) result.push(span.copy(span.from + offset, span.to + offset));
       }
-      for (var _i6 = 0; _i6 < this.children.length; _i6 += 3) {
-        if (this.children[_i6] < end && this.children[_i6 + 1] > start) {
-          var childOff = this.children[_i6] + 1;
-          this.children[_i6 + 2].findInner(start - childOff, end - childOff, result, offset + childOff, predicate);
+      for (var _i7 = 0; _i7 < this.children.length; _i7 += 3) {
+        if (this.children[_i7] < end && this.children[_i7 + 1] > start) {
+          var childOff = this.children[_i7] + 1;
+          this.children[_i7 + 2].findInner(start - childOff, end - childOff, result, offset + childOff, predicate);
         }
       }
     }
@@ -3932,7 +3951,7 @@ var DecorationSet = function () {
           i -= 3;
         }
       }
-      if (local.length) for (var _i7 = 0, _span; _i7 < decorations.length; _i7++) if (_span = decorations[_i7]) {
+      if (local.length) for (var _i8 = 0, _span; _i8 < decorations.length; _i8++) if (_span = decorations[_i8]) {
         for (var _j2 = 0; _j2 < local.length; _j2++) if (local[_j2].eq(_span, offset)) {
           if (local == this.local) local = this.local.slice();
           local.splice(_j2--, 1);
@@ -3953,8 +3972,8 @@ var DecorationSet = function () {
       }
       var start = offset + 1,
         end = start + node.content.size;
-      for (var _i8 = 0; _i8 < this.local.length; _i8++) {
-        var dec = this.local[_i8];
+      for (var _i9 = 0; _i9 < this.local.length; _i9++) {
+        var dec = this.local[_i9];
         if (dec.from < end && dec.to > start && dec.type instanceof InlineType) {
           var from = Math.max(start, dec.from) - start,
             to = Math.min(end, dec.to) - start;
@@ -3973,7 +3992,7 @@ var DecorationSet = function () {
       if (this == other) return true;
       if (!(other instanceof DecorationSet) || this.local.length != other.local.length || this.children.length != other.children.length) return false;
       for (var i = 0; i < this.local.length; i++) if (!this.local[i].eq(other.local[i])) return false;
-      for (var _i9 = 0; _i9 < this.children.length; _i9 += 3) if (this.children[_i9] != other.children[_i9] || this.children[_i9 + 1] != other.children[_i9 + 1] || !this.children[_i9 + 2].eq(other.children[_i9 + 2])) return false;
+      for (var _i10 = 0; _i10 < this.children.length; _i10 += 3) if (this.children[_i10] != other.children[_i10] || this.children[_i10 + 1] != other.children[_i10 + 1] || !this.children[_i10 + 2].eq(other.children[_i10 + 2])) return false;
       return true;
     }
   }, {
@@ -4090,15 +4109,15 @@ function mapChildren(oldChildren, newLocal, mapping, node, offset, oldOffset, op
     var moved = 0;
     mapping.maps[i].forEach(function (oldStart, oldEnd, newStart, newEnd) {
       var dSize = newEnd - newStart - (oldEnd - oldStart);
-      for (var _i13 = 0; _i13 < children.length; _i13 += 3) {
-        var end = children[_i13 + 1];
+      for (var _i14 = 0; _i14 < children.length; _i14 += 3) {
+        var end = children[_i14 + 1];
         if (end < 0 || oldStart > end + _baseOffset - moved) continue;
-        var start = children[_i13] + _baseOffset - moved;
+        var start = children[_i14] + _baseOffset - moved;
         if (oldEnd >= start) {
-          children[_i13 + 1] = oldStart <= start ? -2 : -1;
+          children[_i14 + 1] = oldStart <= start ? -2 : -1;
         } else if (oldStart >= _baseOffset && dSize) {
-          children[_i13] += dSize;
-          children[_i13 + 1] += dSize;
+          children[_i14] += dSize;
+          children[_i14 + 1] += dSize;
         }
       }
       moved += dSize;
@@ -4110,32 +4129,32 @@ function mapChildren(oldChildren, newLocal, mapping, node, offset, oldOffset, op
     _loop4(baseOffset);
   }
   var mustRebuild = false;
-  for (var _i10 = 0; _i10 < children.length; _i10 += 3) if (children[_i10 + 1] < 0) {
-    if (children[_i10 + 1] == -2) {
+  for (var _i11 = 0; _i11 < children.length; _i11 += 3) if (children[_i11 + 1] < 0) {
+    if (children[_i11 + 1] == -2) {
       mustRebuild = true;
-      children[_i10 + 1] = -1;
+      children[_i11 + 1] = -1;
       continue;
     }
-    var from = mapping.map(oldChildren[_i10] + oldOffset),
+    var from = mapping.map(oldChildren[_i11] + oldOffset),
       fromLocal = from - offset;
     if (fromLocal < 0 || fromLocal >= node.content.size) {
       mustRebuild = true;
       continue;
     }
-    var to = mapping.map(oldChildren[_i10 + 1] + oldOffset, -1),
+    var to = mapping.map(oldChildren[_i11 + 1] + oldOffset, -1),
       toLocal = to - offset;
     var _node$content$findInd2 = node.content.findIndex(fromLocal),
       index = _node$content$findInd2.index,
       childOffset = _node$content$findInd2.offset;
     var childNode = node.maybeChild(index);
     if (childNode && childOffset == fromLocal && childOffset + childNode.nodeSize == toLocal) {
-      var mapped = children[_i10 + 2].mapInner(mapping, childNode, from + 1, oldChildren[_i10] + oldOffset + 1, options);
+      var mapped = children[_i11 + 2].mapInner(mapping, childNode, from + 1, oldChildren[_i11] + oldOffset + 1, options);
       if (mapped != empty) {
-        children[_i10] = fromLocal;
-        children[_i10 + 1] = toLocal;
-        children[_i10 + 2] = mapped;
+        children[_i11] = fromLocal;
+        children[_i11 + 1] = toLocal;
+        children[_i11 + 2] = mapped;
       } else {
-        children[_i10 + 1] = -2;
+        children[_i11 + 1] = -2;
         mustRebuild = true;
       }
     } else {
@@ -4146,14 +4165,14 @@ function mapChildren(oldChildren, newLocal, mapping, node, offset, oldOffset, op
     var decorations = mapAndGatherRemainingDecorations(children, oldChildren, newLocal, mapping, offset, oldOffset, options);
     var built = buildTree(decorations, node, 0, options);
     newLocal = built.local;
-    for (var _i11 = 0; _i11 < children.length; _i11 += 3) if (children[_i11 + 1] < 0) {
-      children.splice(_i11, 3);
-      _i11 -= 3;
+    for (var _i12 = 0; _i12 < children.length; _i12 += 3) if (children[_i12 + 1] < 0) {
+      children.splice(_i12, 3);
+      _i12 -= 3;
     }
-    for (var _i12 = 0, j = 0; _i12 < built.children.length; _i12 += 3) {
-      var _from2 = built.children[_i12];
+    for (var _i13 = 0, j = 0; _i13 < built.children.length; _i13 += 3) {
+      var _from2 = built.children[_i13];
       while (j < children.length && children[j] < _from2) j += 3;
-      children.splice(j, 0, built.children[_i12], built.children[_i12 + 1], built.children[_i12 + 2]);
+      children.splice(j, 0, built.children[_i13], built.children[_i13 + 1], built.children[_i13 + 2]);
     }
   }
   return new DecorationSet(newLocal.sort(byPos), children);
@@ -4173,7 +4192,7 @@ function mapAndGatherRemainingDecorations(children, oldChildren, decorations, ma
       var mapped = set.local[i].map(mapping, offset, oldOffset);
       if (mapped) decorations.push(mapped);else if (options.onRemove) options.onRemove(set.local[i].spec);
     }
-    for (var _i14 = 0; _i14 < set.children.length; _i14 += 3) gather(set.children[_i14 + 2], set.children[_i14] + oldOffset + 1);
+    for (var _i15 = 0; _i15 < set.children.length; _i15 += 3) gather(set.children[_i15 + 2], set.children[_i15] + oldOffset + 1);
   }
   for (var i = 0; i < children.length; i += 3) if (children[i + 1] == -1) gather(children[i + 2], oldChildren[i] + oldOffset + 1);
   return decorations;
@@ -4566,8 +4585,8 @@ var DOMObserver = function () {
         var prev = mut.previousSibling,
           next = mut.nextSibling;
         if (ie && ie_version <= 11 && mut.addedNodes.length) {
-          for (var _i15 = 0; _i15 < mut.addedNodes.length; _i15++) {
-            var _mut$addedNodes$_i = mut.addedNodes[_i15],
+          for (var _i16 = 0; _i16 < mut.addedNodes.length; _i16++) {
+            var _mut$addedNodes$_i = mut.addedNodes[_i16],
               previousSibling = _mut$addedNodes$_i.previousSibling,
               nextSibling = _mut$addedNodes$_i.nextSibling;
             if (!previousSibling || Array.prototype.indexOf.call(mut.addedNodes, previousSibling) < 0) prev = previousSibling;
@@ -4933,7 +4952,7 @@ function isMarkChange(cur, prev) {
     mark,
     update;
   for (var i = 0; i < prevMarks.length; i++) added = prevMarks[i].removeFromSet(added);
-  for (var _i16 = 0; _i16 < curMarks.length; _i16++) removed = curMarks[_i16].removeFromSet(removed);
+  for (var _i17 = 0; _i17 < curMarks.length; _i17++) removed = curMarks[_i17].removeFromSet(removed);
   if (added.length == 1 && removed.length == 0) {
     mark = added[0];
     type = "add";
@@ -4950,7 +4969,7 @@ function isMarkChange(cur, prev) {
     return null;
   }
   var updated = [];
-  for (var _i17 = 0; _i17 < prev.childCount; _i17++) updated.push(update(prev.child(_i17)));
+  for (var _i18 = 0; _i18 < prev.childCount; _i18++) updated.push(update(prev.child(_i18)));
   if (prosemirrorModel.Fragment.from(updated).eq(cur)) return {
     mark: mark,
     type: type
@@ -5187,13 +5206,13 @@ var EditorView = function () {
           var plugin = this.directPlugins[i];
           if (plugin.spec.view) this.pluginViews.push(plugin.spec.view(this));
         }
-        for (var _i18 = 0; _i18 < this.state.plugins.length; _i18++) {
-          var _plugin = this.state.plugins[_i18];
+        for (var _i19 = 0; _i19 < this.state.plugins.length; _i19++) {
+          var _plugin = this.state.plugins[_i19];
           if (_plugin.spec.view) this.pluginViews.push(_plugin.spec.view(this));
         }
       } else {
-        for (var _i19 = 0; _i19 < this.pluginViews.length; _i19++) {
-          var pluginView = this.pluginViews[_i19];
+        for (var _i20 = 0; _i20 < this.pluginViews.length; _i20++) {
+          var pluginView = this.pluginViews[_i20];
           if (pluginView.update) pluginView.update(this, prevState);
         }
       }
@@ -5223,8 +5242,8 @@ var EditorView = function () {
         if (_prop != null && (value = f ? f(_prop) : _prop)) return value;
       }
       var plugins = this.state.plugins;
-      if (plugins) for (var _i20 = 0; _i20 < plugins.length; _i20++) {
-        var _prop2 = plugins[_i20].props[propName];
+      if (plugins) for (var _i21 = 0; _i21 < plugins.length; _i21++) {
+        var _prop2 = plugins[_i21].props[propName];
         if (_prop2 != null && (value = f ? f(_prop2) : _prop2)) return value;
       }
     }

package/dist/index.d.cts

@@ -363,6 +363,14 @@ interface MarkView {
     */
     contentDOM?: HTMLElement | null;
     /**
+    When given, this is called when the view is updating itself. It
+    will be given a mark (of the same type as the current one). When it
+    returns true, the existing DOM is kept and reused (its content is
+    still managed by ProseMirror); when it returns false, the mark view
+    is rebuilt.
+    */
+    update?: (mark: Mark) => boolean;
+    /**
     Called when a [mutation](https://prosemirror.net/docs/ref/#view.ViewMutationRecord) happens within the
     view. Return false if the editor should re-read the selection or re-parse
     the range around the mutation, true if it can safely be ignored.

package/dist/index.d.ts

@@ -363,6 +363,14 @@ interface MarkView {
     */
     contentDOM?: HTMLElement | null;
     /**
+    When given, this is called when the view is updating itself. It
+    will be given a mark (of the same type as the current one). When it
+    returns true, the existing DOM is kept and reused (its content is
+    still managed by ProseMirror); when it returns false, the mark view
+    is rebuilt.
+    */
+    update?: (mark: Mark) => boolean;
+    /**
     Called when a [mutation](https://prosemirror.net/docs/ref/#view.ViewMutationRecord) happens within the
     view. Return false if the editor should re-read the selection or re-parse
     the range around the mutation, true if it can safely be ignored.

package/dist/index.js

@@ -207,6 +207,9 @@ function clientRect(node) {
         top: rect.top, bottom: rect.top + node.clientHeight * scaleY };
 }
 function scrollRectIntoView(view, rect, startDOM) {
+    // Skip empty rects with all sides at 0, for example, when the element has no CSS box (display: none)
+    if (!nonZero(rect) && rect.left == 0)
+        return;
     let scrollThreshold = view.someProp("scrollThreshold") || 0, scrollMargin = view.someProp("scrollMargin") || 5;
     let doc = view.dom.ownerDocument;
     for (let parent = startDOM || view.dom;;) {
@@ -1273,7 +1276,7 @@ class MarkViewDesc extends ViewDesc {
 // correspond to an actual node in the document. Unlike mark descs,
 // they populate their child array themselves.
 class NodeViewDesc extends ViewDesc {
-    constructor(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, view, pos) {
+    constructor(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM) {
         super(parent, [], dom, contentDOM);
         this.node = node;
         this.outerDeco = outerDeco;
@@ -1319,11 +1322,11 @@ class NodeViewDesc extends ViewDesc {
         let nodeDOM = dom;
         dom = applyOuterDeco(dom, outerDeco, node);
         if (spec)
-            return descObj = new CustomNodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM || null, nodeDOM, spec, view, pos + 1);
+            return descObj = new CustomNodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM || null, nodeDOM, spec);
         else if (node.isText)
-            return new TextViewDesc(parent, node, outerDeco, innerDeco, dom, nodeDOM, view);
+            return new TextViewDesc(parent, node, outerDeco, innerDeco, dom, nodeDOM);
         else
-            return new NodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM || null, nodeDOM, view, pos + 1);
+            return new NodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM || null, nodeDOM);
     }
     parseRule() {
         // Experimental kludge to allow opt-in re-parsing of nodes
@@ -1507,14 +1510,14 @@ class NodeViewDesc extends ViewDesc {
 // and used by the view class.
 function docViewDesc(doc, outerDeco, innerDeco, dom, view) {
     applyOuterDeco(dom, outerDeco, doc);
-    let docView = new NodeViewDesc(undefined, doc, outerDeco, innerDeco, dom, dom, dom, view, 0);
+    let docView = new NodeViewDesc(undefined, doc, outerDeco, innerDeco, dom, dom, dom);
     if (docView.contentDOM)
         docView.updateChildren(view, 0);
     return docView;
 }
 class TextViewDesc extends NodeViewDesc {
-    constructor(parent, node, outerDeco, innerDeco, dom, nodeDOM, view) {
-        super(parent, node, outerDeco, innerDeco, dom, null, nodeDOM, view, 0);
+    constructor(parent, node, outerDeco, innerDeco, dom, nodeDOM) {
+        super(parent, node, outerDeco, innerDeco, dom, null, nodeDOM);
     }
     parseRule() {
         let skip = this.nodeDOM.parentNode;
@@ -1554,9 +1557,9 @@ class TextViewDesc extends NodeViewDesc {
     ignoreMutation(mutation) {
         return mutation.type != "characterData" && mutation.type != "selection";
     }
-    slice(from, to, view) {
+    slice(from, to, _view) {
         let node = this.node.cut(from, to), dom = document.createTextNode(node.text);
-        return new TextViewDesc(this.parent, node, this.outerDeco, this.innerDeco, dom, dom, view);
+        return new TextViewDesc(this.parent, node, this.outerDeco, this.innerDeco, dom, dom);
     }
     markDirty(from, to) {
         super.markDirty(from, to);
@@ -1578,8 +1581,8 @@ class TrailingHackViewDesc extends ViewDesc {
 // extra checks only have to be made for nodes that are actually
 // customized.
 class CustomNodeViewDesc extends NodeViewDesc {
-    constructor(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, spec, view, pos) {
-        super(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, view, pos);
+    constructor(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, spec) {
+        super(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM);
         this.spec = spec;
     }
     // A custom `update` method gets to decide whether the update goes
@@ -1816,6 +1819,19 @@ class ViewTreeUpdater {
                     break;
                 }
             }
+            // When nothing matches, try to update the mark view at this position
+            // in place, so a custom mark view can adapt to a changed mark without
+            // re-creating its DOM.
+            if (found < 0 && this.index < this.top.children.length) {
+                let cur = this.top.children[this.index];
+                if (cur instanceof MarkViewDesc && cur.dirty != NODE_DIRTY &&
+                    cur.mark.type == marks[depth].type && cur.spec.update &&
+                    !this.isLocked(cur.dom) && cur.spec.update(marks[depth])) {
+                    cur.mark = marks[depth];
+                    found = this.index;
+                    this.changed = true;
+                }
+            }
             if (found > -1) {
                 if (found > this.index) {
                     this.changed = true;
@@ -2984,9 +3000,8 @@ const wrapMap = {
     td: ["table", "tbody", "tr"],
     th: ["table", "tbody", "tr"]
 };
-let _detachedDoc = null;
 function detachedDoc() {
-    return _detachedDoc || (_detachedDoc = document.implementation.createHTMLDocument("title"));
+    return document.implementation.createHTMLDocument("title");
 }
 let _policy = null;
 function maybeWrapTrusted(html) {
@@ -3004,7 +3019,7 @@ function readHTML(html) {
     let metas = /^(\s*<meta [^>]*>)*/.exec(html);
     if (metas)
         html = html.slice(metas[0].length);
-    let elt = detachedDoc().createElement("div");
+    let doc = detachedDoc(), elt = doc.body;
     let firstTag = /<([a-z][^>\s]+)/i.exec(html), wrap;
     if (wrap = firstTag && wrapMap[firstTag[1].toLowerCase()])
         html = wrap.map(n => "<" + n + ">").join("") + html + wrap.map(n => "</" + n + ">").reverse().join("");
@@ -3012,6 +3027,18 @@ function readHTML(html) {
     if (wrap)
         for (let i = 0; i < wrap.length; i++)
             elt = elt.querySelector(wrap[i]) || elt;
+    // Inline styles defined in the pasted content, so that parse rules pick them up
+    for (let i = 0; i < doc.styleSheets.length; i++) {
+        let style = doc.styleSheets[i];
+        for (let j = 0; j < style.rules.length; j++) {
+            let rule = style.rules[j];
+            if (rule instanceof CSSStyleRule) {
+                let matches = elt.querySelectorAll(rule.selectorText);
+                for (let k = 0; k < matches.length; k++)
+                    matches[k].style.cssText += rule.style.cssText;
+            }
+        }
+    }
     return elt;
 }
 // Webkit browsers do some hard-to-predict replacement of regular

package/package.json

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

package/src/#clipboard.ts#

@@ -0,0 +1,275 @@
+import {Slice, Fragment, DOMParser, DOMSerializer, ResolvedPos, NodeType, Node} from "prosemirror-model"
+import * as browser from "./browser"
+import {EditorView} from "./index"
+
+export function serializeForClipboard(view: EditorView, slice: Slice) {
+  view.someProp("transformCopied", f => { slice = f(slice!, view) })
+
+  let context = [], {content, openStart, openEnd} = slice
+  while (openStart > 1 && openEnd > 1 && content.childCount == 1 && content.firstChild!.childCount == 1) {
+    openStart--
+    openEnd--
+    let node = content.firstChild!
+    context.push(node.type.name, node.attrs != node.type.defaultAttrs ? node.attrs : null)
+    content = node.content
+  }
+
+  let serializer = view.someProp("clipboardSerializer") || DOMSerializer.fromSchema(view.state.schema)
+  let doc = detachedDoc(), wrap = doc.createElement("div")
+  wrap.appendChild(serializer.serializeFragment(content, {document: doc}))
+
+  let firstChild = wrap.firstChild, needsWrap, wrappers = 0
+  while (firstChild && firstChild.nodeType == 1 && (needsWrap = wrapMap[firstChild.nodeName.toLowerCase()])) {
+    for (let i = needsWrap.length - 1; i >= 0; i--) {
+      let wrapper = doc.createElement(needsWrap[i])
+      while (wrap.firstChild) wrapper.appendChild(wrap.firstChild)
+      wrap.appendChild(wrapper)
+      wrappers++
+    }
+    firstChild = wrap.firstChild
+  }
+
+  if (firstChild && firstChild.nodeType == 1)
+    (firstChild as HTMLElement).setAttribute(
+      "data-pm-slice", `${openStart} ${openEnd}${wrappers ? ` -${wrappers}` : ""} ${JSON.stringify(context)}`)
+
+  let text = view.someProp("clipboardTextSerializer", f => f(slice, view)) ||
+      slice.content.textBetween(0, slice.content.size, "\n\n")
+
+  return {dom: wrap, text, slice}
+}
+
+// Read a slice of content from the clipboard (or drop data).
+export function parseFromClipboard(view: EditorView, text: string, html: string | null, plainText: boolean, $context: ResolvedPos) {
+  let inCode = $context.parent.type.spec.code
+  let dom: HTMLElement | undefined, slice: Slice | undefined
+  if (!html && !text) return null
+  let asText = !!text && (plainText || inCode || !html)
+  if (asText) {
+    view.someProp("transformPastedText", f => { text = f(text, inCode || plainText, view) })
+    if (inCode) {
+      slice = new Slice(Fragment.from(view.state.schema.text(text.replace(/\r\n?/g, "\n"))), 0, 0)
+      view.someProp("transformPasted", f => { slice = f(slice!, view, true) })
+      return slice
+    }
+    let parsed = view.someProp("clipboardTextParser", f => f(text, $context, plainText, view))
+    if (parsed) {
+      slice = parsed
+    } else {
+      let marks = $context.marks()
+      let {schema} = view.state, serializer = DOMSerializer.fromSchema(schema)
+      dom = document.createElement("div")
+      text.split(/(?:\r\n?|\n)+/).forEach(block => {
+        let p = dom!.appendChild(document.createElement("p"))
+        if (block) p.appendChild(serializer.serializeNode(schema.text(block, marks)))
+      })
+    }
+  } else {
+    view.someProp("transformPastedHTML", f => { html = f(html!, view) })
+    dom = readHTML(html!)
+    if (browser.webkit) restoreReplacedSpaces(dom)
+  }
+
+  let contextNode = dom && dom.querySelector("[data-pm-slice]")
+  let sliceData = contextNode && /^(\d+) (\d+)(?: -(\d+))? (.*)/.exec(contextNode.getAttribute("data-pm-slice") || "")
+  if (sliceData && sliceData[3]) for (let i = +sliceData[3]; i > 0; i--) {
+    let child = dom!.firstChild
+    while (child && child.nodeType != 1) child = child.nextSibling
+    if (!child) break
+    dom = child as HTMLElement
+  }
+
+  if (!slice) {
+    let parser = view.someProp("clipboardParser") || view.someProp("domParser") || DOMParser.fromSchema(view.state.schema)
+    slice = parser.parseSlice(dom!, {
+      preserveWhitespace: !!(asText || sliceData),
+      context: $context,
+      ruleFromNode(dom) {
+        if (dom.nodeName == "BR" && !dom.nextSibling &&
+            dom.parentNode && !inlineParents.test(dom.parentNode.nodeName)) return {ignore: true}
+        return null
+      }
+    })
+  }
+  if (sliceData) {
+    slice = addContext(closeSlice(slice, +sliceData[1], +sliceData[2]), sliceData[4])
+  } else { // HTML wasn't created by ProseMirror. Make sure top-level siblings are coherent
+    slice = Slice.maxOpen(normalizeSiblings(slice.content, $context), true)
+    if (slice.openStart || slice.openEnd) {
+      let openStart = 0, openEnd = 0
+      for (let node = slice.content.firstChild; openStart < slice.openStart && !node!.type.spec.isolating;
+           openStart++, node = node!.firstChild) {}
+      for (let node = slice.content.lastChild; openEnd < slice.openEnd && !node!.type.spec.isolating;
+           openEnd++, node = node!.lastChild) {}
+      slice = closeSlice(slice, openStart, openEnd)
+    }
+  }
+
+  view.someProp("transformPasted", f => { slice = f(slice!, view, asText) })
+  return slice
+}
+
+const inlineParents = /^(a|abbr|acronym|b|cite|code|del|em|i|ins|kbd|label|output|q|ruby|s|samp|span|strong|sub|sup|time|u|tt|var)$/i
+
+// Takes a slice parsed with parseSlice, which means there hasn't been
+// any content-expression checking done on the top nodes, tries to
+// find a parent node in the current context that might fit the nodes,
+// and if successful, rebuilds the slice so that it fits into that parent.
+//
+// This addresses the problem that Transform.replace expects a
+// coherent slice, and will fail to place a set of siblings that don't
+// fit anywhere in the schema.
+function normalizeSiblings(fragment: Fragment, $context: ResolvedPos) {
+  if (fragment.childCount < 2) return fragment
+  for (let d = $context.depth; d >= 0; d--) {
+    let parent = $context.node(d)
+    let match = parent.contentMatchAt($context.index(d))
+    let lastWrap: readonly NodeType[] | undefined, result: Node[] | null = []
+    fragment.forEach(node => {
+      if (!result) return
+      let wrap = match.findWrapping(node.type), inLast
+      if (!wrap) return result = null
+      if (inLast = result.length && lastWrap!.length && addToSibling(wrap, lastWrap!, node, result[result.length - 1], 0)) {
+        result[result.length - 1] = inLast
+      } else {
+        if (result.length) result[result.length - 1] = closeRight(result[result.length - 1], lastWrap!.length)
+        let wrapped = withWrappers(node, wrap)
+        result.push(wrapped)
+        match = match.matchType(wrapped.type)!
+        lastWrap = wrap
+      }
+    })
+    if (result) return Fragment.from(result)
+  }
+  return fragment
+}
+
+function withWrappers(node: Node, wrap: readonly NodeType[], from = 0) {
+  for (let i = wrap.length - 1; i >= from; i--)
+    node = wrap[i].create(null, Fragment.from(node))
+  return node
+}
+
+// Used to group adjacent nodes wrapped in similar parents by
+// normalizeSiblings into the same parent node
+function addToSibling(wrap: readonly NodeType[], lastWrap: readonly NodeType[],
+                      node: Node, sibling: Node, depth: number): Node | undefined {
+  if (depth < wrap.length && depth < lastWrap.length && wrap[depth] == lastWrap[depth]) {
+    let inner = addToSibling(wrap, lastWrap, node, sibling.lastChild!, depth + 1)
+    if (inner) return sibling.copy(sibling.content.replaceChild(sibling.childCount - 1, inner))
+    let match = sibling.contentMatchAt(sibling.childCount)
+    if (match.matchType(depth == wrap.length - 1 ? node.type : wrap[depth + 1]))
+      return sibling.copy(sibling.content.append(Fragment.from(withWrappers(node, wrap, depth + 1))))
+  }
+}
+
+function closeRight(node: Node, depth: number) {
+  if (depth == 0) return node
+  let fragment = node.content.replaceChild(node.childCount - 1, closeRight(node.lastChild!, depth - 1))
+  let fill = node.contentMatchAt(node.childCount).fillBefore(Fragment.empty, true)!
+  return node.copy(fragment.append(fill))
+}
+
+function closeRange(fragment: Fragment, side: number, from: number, to: number, depth: number, openEnd: number) {
+  let node = side < 0 ? fragment.firstChild! : fragment.lastChild!, inner = node.content
+  if (fragment.childCount > 1) openEnd = 0
+  if (depth < to - 1) inner = closeRange(inner, side, from, to, depth + 1, openEnd)
+  if (depth >= from)
+    inner = side < 0 ? node.contentMatchAt(0)!.fillBefore(inner, openEnd <= depth)!.append(inner)
+      : inner.append(node.contentMatchAt(node.childCount)!.fillBefore(Fragment.empty, true)!)
+  return fragment.replaceChild(side < 0 ? 0 : fragment.childCount - 1, node.copy(inner))
+}
+
+function closeSlice(slice: Slice, openStart: number, openEnd: number) {
+  if (openStart < slice.openStart)
+    slice = new Slice(closeRange(slice.content, -1, openStart, slice.openStart, 0, slice.openEnd), openStart, slice.openEnd)
+  if (openEnd < slice.openEnd)
+    slice = new Slice(closeRange(slice.content, 1, openEnd, slice.openEnd, 0, 0), slice.openStart, openEnd)
+  return slice
+}
+
+// Trick from jQuery -- some elements must be wrapped in other
+// elements for innerHTML to work. I.e. if you do `div.innerHTML =
+// "<td>..</td>"` the table cells are ignored.
+const wrapMap: {[node: string]: string[]} = {
+  thead: ["table"],
+  tbody: ["table"],
+  tfoot: ["table"],
+  caption: ["table"],
+  colgroup: ["table"],
+  col: ["table", "colgroup"],
+  tr: ["table", "tbody"],
+  td: ["table", "tbody", "tr"],
+  th: ["table", "tbody", "tr"]
+}
+
+function detachedDoc() {
+  return document.implementation.createHTMLDocument("title")
+}
+
+let _policy: any = null
+
+function maybeWrapTrusted(html: string): string {
+  let trustedTypes = (window as any).trustedTypes
+  if (!trustedTypes) return html
+  // With the require-trusted-types-for CSP, Chrome will block
+  // innerHTML, even on a detached document. This wraps the string in
+  // a way that makes the browser allow us to use its parser again.
+  if (!_policy)
+    _policy = trustedTypes.defaultPolicy || trustedTypes.createPolicy("ProseMirrorClipboard", {createHTML: (s: string) => s})
+  return _policy.createHTML(html)
+}
+
+function readHTML(html: string) {
+  html = "\n\n" + html + "\n\n"
+  let metas = /^(\s*<meta [^>]*>)*/.exec(html)
+  if (metas) html = html.slice(metas[0].length)
+  let doc = detachedDoc(), elt = doc.createElement("div")
+  let firstTag = /<([a-z][^>\s]+)/i.exec(html), wrap
+  if (wrap = firstTag && wrapMap[firstTag[1].toLowerCase()])
+    html = wrap.map(n => "<" + n + ">").join("") + html + wrap.map(n => "</" + n + ">").reverse().join("")
+  elt.innerHTML = maybeWrapTrusted(html)
+  if (wrap) for (let i = 0; i < wrap.length; i++) elt = elt.querySelector(wrap[i]) || elt
+  // Inline styles defined in the pasted content, so that parse rules pick them up
+  for (let i = 0; i < doc.styleSheets.length; i++) {
+    let style = doc.styleSheets[i]
+    for (let j = 0; j < style.rules.length; j++) {
+      let rule = style.rules[j]
+      if (rule instanceof CSSStyleRule) {
+        let matches = elt.querySelectorAll(rule.selectorText)
+        for (let k = 0; k < matches.length; k++)
+          (matches[k] as HTMLElement).style.cssText += rule.style.cssText
+      }
+    }
+  }
+  return elt
+}
+
+// Webkit browsers do some hard-to-predict replacement of regular
+// spaces with non-breaking spaces when putting content on the
+// clipboard. This tries to convert such non-breaking spaces (which
+// will be wrapped in a plain span on Chrome, a span with class
+// Apple-converted-space on Safari) back to regular spaces.
+function restoreReplacedSpaces(dom: HTMLElement) {
+  let nodes = dom.querySelectorAll(browser.chrome ? "span:not([class]):not([style])" : "span.Apple-converted-space")
+  for (let i = 0; i < nodes.length; i++) {
+    let node = nodes[i]
+    if (node.childNodes.length == 1 && node.textContent == "\u00a0" && node.parentNode)
+      node.parentNode.replaceChild(dom.ownerDocument.createTextNode(" "), node)
+  }
+}
+
+function addContext(slice: Slice, context: string) {
+  if (!slice.size) return slice
+  let schema = slice.content.firstChild!.type.schema, array
+  try { array = JSON.parse(context) }
+  catch(e) { return slice }
+  let {content, openStart, openEnd} = slice
+  for (let i = array.length - 2; i >= 0; i -= 2) {
+    let type = schema.nodes[array[i]]
+    if (!type || type.hasRequiredAttrs()) break
+    content = Fragment.from(type.create(array[i + 1], content))
+    openStart++; openEnd++
+  }
+  return new Slice(content, openStart, openEnd)
+}

package/src/clipboard.ts

@@ -203,9 +203,8 @@ const wrapMap: {[node: string]: string[]} = {
   th: ["table", "tbody", "tr"]
 }
 
-let _detachedDoc: Document | null = null
 function detachedDoc() {
-  return _detachedDoc || (_detachedDoc = document.implementation.createHTMLDocument("title"))
+  return document.implementation.createHTMLDocument("title")
 }
 
 let _policy: any = null
@@ -224,12 +223,24 @@ function maybeWrapTrusted(html: string): string {
 function readHTML(html: string) {
   let metas = /^(\s*<meta [^>]*>)*/.exec(html)
   if (metas) html = html.slice(metas[0].length)
-  let elt = detachedDoc().createElement("div")
+  let doc = detachedDoc(), elt = doc.body
   let firstTag = /<([a-z][^>\s]+)/i.exec(html), wrap
   if (wrap = firstTag && wrapMap[firstTag[1].toLowerCase()])
     html = wrap.map(n => "<" + n + ">").join("") + html + wrap.map(n => "</" + n + ">").reverse().join("")
   elt.innerHTML = maybeWrapTrusted(html)
   if (wrap) for (let i = 0; i < wrap.length; i++) elt = elt.querySelector(wrap[i]) || elt
+  // Inline styles defined in the pasted content, so that parse rules pick them up
+  for (let i = 0; i < doc.styleSheets.length; i++) {
+    let style = doc.styleSheets[i]
+    for (let j = 0; j < style.rules.length; j++) {
+      let rule = style.rules[j]
+      if (rule instanceof CSSStyleRule) {
+        let matches = elt.querySelectorAll(rule.selectorText)
+        for (let k = 0; k < matches.length; k++)
+          (matches[k] as HTMLElement).style.cssText += rule.style.cssText
+      }
+    }
+  }
   return elt
 }
 

package/src/domcoords.ts

@@ -30,6 +30,9 @@ function clientRect(node: HTMLElement): Rect {
 }
 
 export function scrollRectIntoView(view: EditorView, rect: Rect, startDOM: Node) {
+  // Skip empty rects with all sides at 0, for example, when the element has no CSS box (display: none)
+  if (!nonZero(rect) && rect.left == 0) return
+
   let scrollThreshold = view.someProp("scrollThreshold") || 0, scrollMargin = view.someProp("scrollMargin") || 5
   let doc = view.dom.ownerDocument
   for (let parent: Node | null = startDOM || view.dom;;) {
@@ -328,7 +331,7 @@ export function posAtCoords(view: EditorView, coords: {top: number, left: number
   return {pos, inside: desc ? desc.posAtStart - desc.border : -1}
 }
 
-function nonZero(rect: DOMRect) {
+function nonZero(rect: Rect) {
   return rect.top < rect.bottom || rect.left < rect.right
 }
 

package/src/viewdesc.ts

@@ -105,6 +105,13 @@ export interface MarkView {
   /// present, the `dom` property is used as the content DOM.
   contentDOM?: HTMLElement | null
 
+  /// When given, this is called when the view is updating itself. It
+  /// will be given a mark (of the same type as the current one). When it
+  /// returns true, the existing DOM is kept and reused (its content is
+  /// still managed by ProseMirror); when it returns false, the mark view
+  /// is rebuilt.
+  update?: (mark: Mark) => boolean
+
   /// Called when a [mutation](#view.ViewMutationRecord) happens within the
   /// view. Return false if the editor should re-read the selection or re-parse
   /// the range around the mutation, true if it can safely be ignored.
@@ -610,7 +617,7 @@ class CompositionViewDesc extends ViewDesc {
 // some cases they will be split more often than would appear
 // necessary.
 class MarkViewDesc extends ViewDesc {
-  constructor(parent: ViewDesc, readonly mark: Mark, dom: HTMLElement, contentDOM: HTMLElement, readonly spec: MarkView) {
+  constructor(parent: ViewDesc, public mark: Mark, dom: HTMLElement, contentDOM: HTMLElement, readonly spec: MarkView) {
     super(parent, [], dom, contentDOM)
   }
 
@@ -672,8 +679,6 @@ export class NodeViewDesc extends ViewDesc {
     dom: DOMNode,
     contentDOM: HTMLElement | null,
     readonly nodeDOM: DOMNode,
-    view: EditorView,
-    pos: number
   ) {
     super(parent, [], dom, contentDOM)
   }
@@ -715,11 +720,11 @@ export class NodeViewDesc extends ViewDesc {
 
     if (spec)
       return descObj = new CustomNodeViewDesc(parent, node, outerDeco, innerDeco, dom as HTMLElement, contentDOM || null,
-                                              nodeDOM as HTMLElement, spec, view, pos + 1)
+                                              nodeDOM as HTMLElement, spec)
     else if (node.isText)
-      return new TextViewDesc(parent, node, outerDeco, innerDeco, dom, nodeDOM, view)
+      return new TextViewDesc(parent, node, outerDeco, innerDeco, dom, nodeDOM)
     else
-      return new NodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM || null, nodeDOM, view, pos + 1)
+      return new NodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM || null, nodeDOM)
   }
 
   parseRule() {
@@ -906,15 +911,15 @@ export class NodeViewDesc extends ViewDesc {
 export function docViewDesc(doc: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource,
                             dom: HTMLElement, view: EditorView): NodeViewDesc {
   applyOuterDeco(dom, outerDeco, doc)
-  let docView = new NodeViewDesc(undefined, doc, outerDeco, innerDeco, dom, dom, dom, view, 0)
+  let docView = new NodeViewDesc(undefined, doc, outerDeco, innerDeco, dom, dom, dom)
   if (docView.contentDOM) docView.updateChildren(view, 0)
   return docView
 }
 
 class TextViewDesc extends NodeViewDesc {
   constructor(parent: ViewDesc | undefined, node: Node, outerDeco: readonly Decoration[],
-              innerDeco: DecorationSource, dom: DOMNode, nodeDOM: DOMNode, view: EditorView) {
-    super(parent, node, outerDeco, innerDeco, dom, null, nodeDOM, view, 0)
+              innerDeco: DecorationSource, dom: DOMNode, nodeDOM: DOMNode) {
+    super(parent, node, outerDeco, innerDeco, dom, null, nodeDOM)
   }
 
   parseRule() {
@@ -955,9 +960,9 @@ class TextViewDesc extends NodeViewDesc {
     return mutation.type != "characterData" && mutation.type != "selection"
   }
 
-  slice(from: number, to: number, view: EditorView) {
+  slice(from: number, to: number, _view?: EditorView) {
     let node = this.node.cut(from, to), dom = document.createTextNode(node.text!)
-    return new TextViewDesc(this.parent, node, this.outerDeco, this.innerDeco, dom, dom, view)
+    return new TextViewDesc(this.parent, node, this.outerDeco, this.innerDeco, dom, dom)
   }
 
   markDirty(from: number, to: number) {
@@ -985,9 +990,8 @@ class TrailingHackViewDesc extends ViewDesc {
 // customized.
 class CustomNodeViewDesc extends NodeViewDesc {
   constructor(parent: ViewDesc | undefined, node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource,
-              dom: HTMLElement, contentDOM: HTMLElement | null, nodeDOM: HTMLElement, readonly spec: NodeView,
-              view: EditorView, pos: number) {
-    super(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, view, pos)
+              dom: HTMLElement, contentDOM: HTMLElement | null, nodeDOM: HTMLElement, readonly spec: NodeView) {
+    super(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM)
   }
 
   // A custom `update` method gets to decide whether the update goes
@@ -1220,6 +1224,19 @@ class ViewTreeUpdater {
         let next = this.top.children[i]
         if (next.matchesMark(marks[depth]) && !this.isLocked(next.dom)) { found = i; break }
       }
+      // When nothing matches, try to update the mark view at this position
+      // in place, so a custom mark view can adapt to a changed mark without
+      // re-creating its DOM.
+      if (found < 0 && this.index < this.top.children.length) {
+        let cur = this.top.children[this.index]
+        if (cur instanceof MarkViewDesc && cur.dirty != NODE_DIRTY &&
+            cur.mark.type == marks[depth].type && cur.spec.update &&
+            !this.isLocked(cur.dom) && cur.spec.update(marks[depth])) {
+          cur.mark = marks[depth]
+          found = this.index
+          this.changed = true
+        }
+      }
       if (found > -1) {
         if (found > this.index) {
           this.changed = true