prosemirror-view 1.33.1 → 1.33.3

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 1.33.3 (2024-03-22)
+
+### Bug fixes
+
+Further improve preserving of compositions for IME systems that keep the cursor before the composed text.
+
+## 1.33.2 (2024-03-21)
+
+### Bug fixes
+
+Improve Android backspace detection when the native effect is to delete an entire block element.
+
+Fix a bug where reconfiguring node views caused the editor to lose focus.
+
+Fix an issue where some commands didn't properly scroll the cursor into view on Mobile Safari.
+
+Fix a bug where starting a composition with stored marks or after a noninclusive mark, with an IME that keeps the cursor at the start of the composed text (like many Chinese IMEs) disrupted composition on Chrome.
+
+Fix a memory leak where a (single) destroyed editor could be kept alive through a reused `Range` object.
+
 ## 1.33.1 (2024-02-15)
 
 ### Bug fixes

package/dist/index.cjs

@@ -38,6 +38,9 @@ var textRange = function textRange(node, from, to) {
   range.setStart(node, from || 0);
   return range;
 };
+var clearReusedRange = function clearReusedRange() {
+  reusedRange = null;
+};
 var isEquivalentPosition = function isEquivalentPosition(node, off, targetNode, targetOff) {
   return targetNode && (scanFor(node, off, targetNode, targetOff, -1) || scanFor(node, off, targetNode, targetOff, 1));
 };
@@ -62,6 +65,36 @@ function scanFor(node, off, targetNode, targetOff, dir) {
 function nodeSize(node) {
   return node.nodeType == 3 ? node.nodeValue.length : node.childNodes.length;
 }
+function textNodeBefore$1(node, offset) {
+  for (;;) {
+    if (node.nodeType == 3 && offset) return node;
+    if (node.nodeType == 1 && offset > 0) {
+      if (node.contentEditable == "false") return null;
+      node = node.childNodes[offset - 1];
+      offset = nodeSize(node);
+    } else if (node.parentNode && !hasBlockDesc(node)) {
+      offset = domIndex(node);
+      node = node.parentNode;
+    } else {
+      return null;
+    }
+  }
+}
+function textNodeAfter$1(node, offset) {
+  for (;;) {
+    if (node.nodeType == 3 && offset < node.nodeValue.length) return node;
+    if (node.nodeType == 1 && offset < node.childNodes.length) {
+      if (node.contentEditable == "false") return null;
+      node = node.childNodes[offset];
+      offset = 0;
+    } else if (node.parentNode && !hasBlockDesc(node)) {
+      offset = domIndex(node) + 1;
+      node = node.parentNode;
+    } else {
+      return null;
+    }
+  }
+}
 function isOnEdge(node, offset, parent) {
   for (var atStart = offset == 0, atEnd = offset == nodeSize(node); atStart || atEnd;) {
     if (node == parent) return true;
@@ -131,6 +164,13 @@ 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;
 function windowRect(doc) {
+  var vp = doc.defaultView && doc.defaultView.visualViewport;
+  if (vp) return {
+    left: 0,
+    right: vp.width,
+    top: 0,
+    bottom: vp.height
+  };
   return {
     left: 0,
     right: doc.documentElement.clientWidth,
@@ -1004,6 +1044,11 @@ var ViewDesc = function () {
     get: function get() {
       return false;
     }
+  }, {
+    key: "isText",
+    value: function isText(text) {
+      return false;
+    }
   }]);
   return ViewDesc;
 }();
@@ -1268,8 +1313,7 @@ var NodeViewDesc = function (_ViewDesc4) {
         from = _view$state$selection.from,
         to = _view$state$selection.to;
       if (!(view.state.selection instanceof prosemirrorState.TextSelection) || from < pos || to > pos + this.node.content.size) return null;
-      var sel = view.domSelectionRange();
-      var textNode = nearbyTextNode(sel.focusNode, sel.focusOffset);
+      var textNode = view.input.compositionNode;
       if (!textNode || !this.dom.contains(textNode.parentNode)) return null;
       if (this.node.inlineContent) {
         var text = textNode.nodeValue;
@@ -1459,6 +1503,11 @@ var TextViewDesc = function (_NodeViewDesc) {
     get: function get() {
       return false;
     }
+  }, {
+    key: "isText",
+    value: function isText(text) {
+      return this.node.text == text;
+    }
   }]);
   return TextViewDesc;
 }(NodeViewDesc);
@@ -1998,21 +2047,6 @@ function iosHacks(dom) {
     dom.style.cssText = oldCSS;
   }
 }
-function nearbyTextNode(node, offset) {
-  for (;;) {
-    if (node.nodeType == 3) return node;
-    if (node.nodeType == 1 && offset > 0) {
-      if (node.childNodes.length > offset && node.childNodes[offset].nodeType == 3) return node.childNodes[offset];
-      node = node.childNodes[offset - 1];
-      offset = nodeSize(node);
-    } else if (node.nodeType == 1 && offset < node.childNodes.length) {
-      node = node.childNodes[offset];
-      offset = 0;
-    } else {
-      return null;
-    }
-  }
-}
 function findTextInFragment(frag, text, from, to) {
   for (var i = 0, pos = 0; i < frag.childCount && pos <= to;) {
     var child = frag.child(i++),
@@ -2791,6 +2825,7 @@ var InputState = _createClass(function InputState() {
   this.lastTouch = 0;
   this.lastAndroidDelete = 0;
   this.composing = false;
+  this.compositionNode = null;
   this.composingTimeout = -1;
   this.compositionNodes = [];
   this.compositionEndedAt = -2e8;
@@ -3178,6 +3213,7 @@ editHandlers.compositionend = function (view, event) {
     view.input.composing = false;
     view.input.compositionEndedAt = event.timeStamp;
     view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0;
+    view.input.compositionNode = null;
     if (view.input.compositionPendingChanges) Promise.resolve().then(function () {
       return view.domObserver.flush();
     });
@@ -3198,6 +3234,22 @@ function clearComposition(view) {
   }
   while (view.input.compositionNodes.length > 0) view.input.compositionNodes.pop().markParentsDirty();
 }
+function findCompositionNode(view) {
+  var sel = view.domSelectionRange();
+  if (!sel.focusNode) return null;
+  var textBefore = textNodeBefore$1(sel.focusNode, sel.focusOffset);
+  var textAfter = textNodeAfter$1(sel.focusNode, sel.focusOffset);
+  if (textBefore && textAfter && textBefore != textAfter) {
+    var descAfter = textAfter.pmViewDesc;
+    if (!descAfter || !descAfter.isText(textAfter.nodeValue)) {
+      return textAfter;
+    } else if (view.input.compositionNode == textAfter) {
+      var descBefore = textBefore.pmViewDesc;
+      if (!(!descBefore || !descBefore.isText(textBefore.nodeValue))) return textAfter;
+    }
+  }
+  return textBefore;
+}
 function timestampFromCustomEvent() {
   var event = document.createEvent("Event");
   event.initEvent("event", true, true);
@@ -4474,13 +4526,6 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
       return;
     }
   }
-  if (chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from && parse.sel.head == parse.sel.anchor) {
-    var size = change.endB - change.start;
-    parse.sel = {
-      anchor: parse.sel.anchor + size,
-      head: parse.sel.anchor + size
-    };
-  }
   view.input.domChangeCount++;
   if (view.state.selection.from < view.state.selection.to && change.start == change.endB && view.state.selection instanceof prosemirrorState.TextSelection) {
     if (change.start > view.state.selection.from && change.start <= view.state.selection.from + 2 && view.state.selection.from >= parse.from) {
@@ -4508,7 +4553,7 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
     view.input.lastIOSEnter = 0;
     return;
   }
-  if (view.state.selection.anchor > change.start && looksLikeJoin(doc, change.start, change.endA, $from, $to) && view.someProp("handleKeyDown", function (f) {
+  if (view.state.selection.anchor > change.start && looksLikeBackspace(doc, change.start, change.endA, $from, $to) && view.someProp("handleKeyDown", function (f) {
     return f(view, keyEvent(8, "Backspace"));
   })) {
     if (android && chrome) view.domObserver.suppressSelectionUpdates();
@@ -4593,9 +4638,13 @@ function isMarkChange(cur, prev) {
     type: type
   };
 }
-function looksLikeJoin(old, start, end, $newStart, $newEnd) {
-  if (!$newStart.parent.isTextblock || end - start <= $newEnd.pos - $newStart.pos || skipClosingAndOpening($newStart, true, false) < $newEnd.pos) return false;
+function looksLikeBackspace(old, start, end, $newStart, $newEnd) {
+  if (end - start <= $newEnd.pos - $newStart.pos || skipClosingAndOpening($newStart, true, false) < $newEnd.pos) return false;
   var $start = old.resolve(start);
+  if (!$newStart.parent.isTextblock) {
+    var after = $start.nodeAfter;
+    return after != null && end == start + after.nodeSize;
+  }
   if ($start.parentOffset < $start.parent.content.size || !$start.parent.isTextblock) return false;
   var $next = old.resolve(skipClosingAndOpening($start, true, true));
   if (!$next.parent.isTextblock || $next.pos > end || skipClosingAndOpening($next, true, false) < end) return false;
@@ -4770,8 +4819,9 @@ var EditorView = function () {
         var forceSelUpdate = updateDoc && (ie || chrome) && !this.composing && !prev.selection.empty && !state.selection.empty && selectionContextChanged(prev.selection, state.selection);
         if (updateDoc) {
           var chromeKludge = chrome ? this.trackWrites = this.domSelectionRange().focusNode : null;
+          if (this.composing) this.input.compositionNode = findCompositionNode(this);
           if (redraw || !this.docView.update(state.doc, outerDeco, innerDeco, this)) {
-            this.docView.updateOuterDeco([]);
+            this.docView.updateOuterDeco(outerDeco);
             this.docView.destroy();
             this.docView = docViewDesc(state.doc, outerDeco, innerDeco, this.dom, this);
           }
@@ -4978,6 +5028,7 @@ var EditorView = function () {
       }
       this.docView.destroy();
       this.docView = null;
+      clearReusedRange();
     }
   }, {
     key: "isDestroyed",

package/dist/index.d.cts

@@ -361,6 +361,7 @@ declare class ViewDesc {
     markParentsDirty(): void;
     get domAtom(): boolean;
     get ignoreForCoords(): boolean;
+    isText(text: string): boolean;
 }
 declare class NodeViewDesc extends ViewDesc {
     node: Node;
@@ -405,6 +406,7 @@ declare class TextViewDesc extends NodeViewDesc {
     slice(from: number, to: number, view: EditorView): TextViewDesc;
     markDirty(from: number, to: number): void;
     get domAtom(): boolean;
+    isText(text: string): boolean;
 }
 
 /**

package/dist/index.d.ts

@@ -361,6 +361,7 @@ declare class ViewDesc {
     markParentsDirty(): void;
     get domAtom(): boolean;
     get ignoreForCoords(): boolean;
+    isText(text: string): boolean;
 }
 declare class NodeViewDesc extends ViewDesc {
     node: Node;
@@ -405,6 +406,7 @@ declare class TextViewDesc extends NodeViewDesc {
     slice(from: number, to: number, view: EditorView): TextViewDesc;
     markDirty(from: number, to: number): void;
     get domAtom(): boolean;
+    isText(text: string): boolean;
 }
 
 /**

package/dist/index.js

@@ -23,6 +23,9 @@ const textRange = function (node, from, to) {
     range.setStart(node, from || 0);
     return range;
 };
+const clearReusedRange = function () {
+    reusedRange = null;
+};
 // Scans forward and backward through DOM positions equivalent to the
 // given one to see if the two are in the same place (i.e. after a
 // text node vs at the end of that text node)
@@ -57,6 +60,44 @@ function scanFor(node, off, targetNode, targetOff, dir) {
 function nodeSize(node) {
     return node.nodeType == 3 ? node.nodeValue.length : node.childNodes.length;
 }
+function textNodeBefore$1(node, offset) {
+    for (;;) {
+        if (node.nodeType == 3 && offset)
+            return node;
+        if (node.nodeType == 1 && offset > 0) {
+            if (node.contentEditable == "false")
+                return null;
+            node = node.childNodes[offset - 1];
+            offset = nodeSize(node);
+        }
+        else if (node.parentNode && !hasBlockDesc(node)) {
+            offset = domIndex(node);
+            node = node.parentNode;
+        }
+        else {
+            return null;
+        }
+    }
+}
+function textNodeAfter$1(node, offset) {
+    for (;;) {
+        if (node.nodeType == 3 && offset < node.nodeValue.length)
+            return node;
+        if (node.nodeType == 1 && offset < node.childNodes.length) {
+            if (node.contentEditable == "false")
+                return null;
+            node = node.childNodes[offset];
+            offset = 0;
+        }
+        else if (node.parentNode && !hasBlockDesc(node)) {
+            offset = domIndex(node) + 1;
+            node = node.parentNode;
+        }
+        else {
+            return null;
+        }
+    }
+}
 function isOnEdge(node, offset, parent) {
     for (let atStart = offset == 0, atEnd = offset == nodeSize(node); atStart || atEnd;) {
         if (node == parent)
@@ -133,6 +174,12 @@ const webkit = !!doc && "webkitFontSmoothing" in doc.documentElement.style;
 const webkit_version = webkit ? +(/\bAppleWebKit\/(\d+)/.exec(navigator.userAgent) || [0, 0])[1] : 0;
 
 function windowRect(doc) {
+    let vp = doc.defaultView && doc.defaultView.visualViewport;
+    if (vp)
+        return {
+            left: 0, right: vp.width,
+            top: 0, bottom: vp.height
+        };
     return { left: 0, right: doc.documentElement.clientWidth,
         top: 0, bottom: doc.documentElement.clientHeight };
 }
@@ -1068,6 +1115,7 @@ class ViewDesc {
     }
     get domAtom() { return false; }
     get ignoreForCoords() { return false; }
+    isText(text) { return false; }
 }
 // A widget desc represents a widget decoration, which is a DOM node
 // drawn between the document nodes.
@@ -1330,8 +1378,7 @@ class NodeViewDesc extends ViewDesc {
         let { from, to } = view.state.selection;
         if (!(view.state.selection instanceof TextSelection) || from < pos || to > pos + this.node.content.size)
             return null;
-        let sel = view.domSelectionRange();
-        let textNode = nearbyTextNode(sel.focusNode, sel.focusOffset);
+        let textNode = view.input.compositionNode;
         if (!textNode || !this.dom.contains(textNode.parentNode))
             return null;
         if (this.node.inlineContent) {
@@ -1473,6 +1520,7 @@ class TextViewDesc extends NodeViewDesc {
             this.dirty = NODE_DIRTY;
     }
     get domAtom() { return false; }
+    isText(text) { return this.node.text == text; }
 }
 // A dummy desc used to tag trailing BR or IMG nodes created to work
 // around contentEditable terribleness.
@@ -2042,25 +2090,6 @@ function iosHacks(dom) {
         dom.style.cssText = oldCSS;
     }
 }
-function nearbyTextNode(node, offset) {
-    for (;;) {
-        if (node.nodeType == 3)
-            return node;
-        if (node.nodeType == 1 && offset > 0) {
-            if (node.childNodes.length > offset && node.childNodes[offset].nodeType == 3)
-                return node.childNodes[offset];
-            node = node.childNodes[offset - 1];
-            offset = nodeSize(node);
-        }
-        else if (node.nodeType == 1 && offset < node.childNodes.length) {
-            node = node.childNodes[offset];
-            offset = 0;
-        }
-        else {
-            return null;
-        }
-    }
-}
 // Find a piece of text in an inline fragment, overlapping from-to
 function findTextInFragment(frag, text, from, to) {
     for (let i = 0, pos = 0; i < frag.childCount && pos <= to;) {
@@ -2965,6 +2994,7 @@ class InputState {
         this.lastTouch = 0;
         this.lastAndroidDelete = 0;
         this.composing = false;
+        this.compositionNode = null;
         this.composingTimeout = -1;
         this.compositionNodes = [];
         this.compositionEndedAt = -2e8;
@@ -3401,6 +3431,7 @@ editHandlers.compositionend = (view, event) => {
         view.input.composing = false;
         view.input.compositionEndedAt = event.timeStamp;
         view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0;
+        view.input.compositionNode = null;
         if (view.input.compositionPendingChanges)
             Promise.resolve().then(() => view.domObserver.flush());
         view.input.compositionID++;
@@ -3420,6 +3451,25 @@ function clearComposition(view) {
     while (view.input.compositionNodes.length > 0)
         view.input.compositionNodes.pop().markParentsDirty();
 }
+function findCompositionNode(view) {
+    let sel = view.domSelectionRange();
+    if (!sel.focusNode)
+        return null;
+    let textBefore = textNodeBefore$1(sel.focusNode, sel.focusOffset);
+    let textAfter = textNodeAfter$1(sel.focusNode, sel.focusOffset);
+    if (textBefore && textAfter && textBefore != textAfter) {
+        let descAfter = textAfter.pmViewDesc;
+        if (!descAfter || !descAfter.isText(textAfter.nodeValue)) {
+            return textAfter;
+        }
+        else if (view.input.compositionNode == textAfter) {
+            let descBefore = textBefore.pmViewDesc;
+            if (!(!descBefore || !descBefore.isText(textBefore.nodeValue)))
+                return textAfter;
+        }
+    }
+    return textBefore;
+}
 function timestampFromCustomEvent() {
     let event = document.createEvent("Event");
     event.initEvent("event", true, true);
@@ -4822,13 +4872,6 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
             return;
         }
     }
-    // Chrome sometimes leaves the cursor before the inserted text when
-    // composing after a cursor wrapper. This moves it forward.
-    if (chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from &&
-        parse.sel.head == parse.sel.anchor) {
-        let size = change.endB - change.start;
-        parse.sel = { anchor: parse.sel.anchor + size, head: parse.sel.anchor + size };
-    }
     view.input.domChangeCount++;
     // Handle the case where overwriting a selection by typing matches
     // the start or end of the selected content, creating a change
@@ -4874,7 +4917,7 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
     }
     // Same for backspace
     if (view.state.selection.anchor > change.start &&
-        looksLikeJoin(doc, change.start, change.endA, $from, $to) &&
+        looksLikeBackspace(doc, change.start, change.endA, $from, $to) &&
         view.someProp("handleKeyDown", f => f(view, keyEvent(8, "Backspace")))) {
         if (android && chrome)
             view.domObserver.suppressSelectionUpdates(); // #820
@@ -4986,14 +5029,18 @@ function isMarkChange(cur, prev) {
     if (Fragment.from(updated).eq(cur))
         return { mark, type };
 }
-function looksLikeJoin(old, start, end, $newStart, $newEnd) {
-    if (!$newStart.parent.isTextblock ||
-        // The content must have shrunk
-        end - start <= $newEnd.pos - $newStart.pos ||
+function looksLikeBackspace(old, start, end, $newStart, $newEnd) {
+    if ( // The content must have shrunk
+    end - start <= $newEnd.pos - $newStart.pos ||
         // newEnd must point directly at or after the end of the block that newStart points into
         skipClosingAndOpening($newStart, true, false) < $newEnd.pos)
         return false;
     let $start = old.resolve(start);
+    // Handle the case where, rather than joining blocks, the change just removed an entire block
+    if (!$newStart.parent.isTextblock) {
+        let after = $start.nodeAfter;
+        return after != null && end == start + after.nodeSize;
+    }
     // Start must be at the end of a block
     if ($start.parentOffset < $start.parent.content.size || !$start.parent.isTextblock)
         return false;
@@ -5244,8 +5291,10 @@ class EditorView {
                 // tracks that and forces a selection reset when our update
                 // did write to the node.
                 let chromeKludge = chrome ? (this.trackWrites = this.domSelectionRange().focusNode) : null;
+                if (this.composing)
+                    this.input.compositionNode = findCompositionNode(this);
                 if (redraw || !this.docView.update(state.doc, outerDeco, innerDeco, this)) {
-                    this.docView.updateOuterDeco([]);
+                    this.docView.updateOuterDeco(outerDeco);
                     this.docView.destroy();
                     this.docView = docViewDesc(state.doc, outerDeco, innerDeco, this.dom, this);
                 }
@@ -5522,6 +5571,7 @@ class EditorView {
         }
         this.docView.destroy();
         this.docView = null;
+        clearReusedRange();
     }
     /**
     This is true when the view has been

package/package.json

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

package/src/dom.ts

@@ -29,6 +29,10 @@ export const textRange = function(node: Text, from?: number, to?: number) {
   return range
 }
 
+export const clearReusedRange = function() {
+  reusedRange = null;
+}
+
 // Scans forward and backward through DOM positions equivalent to the
 // given one to see if the two are in the same place (i.e. after a
 // text node vs at the end of that text node)
@@ -63,6 +67,38 @@ export function nodeSize(node: Node) {
   return node.nodeType == 3 ? node.nodeValue!.length : node.childNodes.length
 }
 
+export function textNodeBefore(node: Node, offset: number) {
+  for (;;) {
+    if (node.nodeType == 3 && offset) return node as Text
+    if (node.nodeType == 1 && offset > 0) {
+      if ((node as HTMLElement).contentEditable == "false") return null
+      node = node.childNodes[offset - 1]
+      offset = nodeSize(node)
+    } else if (node.parentNode && !hasBlockDesc(node)) {
+      offset = domIndex(node)
+      node = node.parentNode
+    } else {
+      return null
+    }
+  }
+}
+
+export function textNodeAfter(node: Node, offset: number) {
+  for (;;) {
+    if (node.nodeType == 3 && offset < node.nodeValue!.length) return node as Text
+    if (node.nodeType == 1 && offset < node.childNodes.length) {
+      if ((node as HTMLElement).contentEditable == "false") return null
+      node = node.childNodes[offset]
+      offset = 0
+    } else if (node.parentNode && !hasBlockDesc(node)) {
+      offset = domIndex(node) + 1
+      node = node.parentNode
+    } else {
+      return null
+    }
+  }
+}
+
 export function isOnEdge(node: Node, offset: number, parent: Node) {
   for (let atStart = offset == 0, atEnd = offset == nodeSize(node); atStart || atEnd;) {
     if (node == parent) return true

package/src/domchange.ts

@@ -143,13 +143,6 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
       return
     }
   }
-  // Chrome sometimes leaves the cursor before the inserted text when
-  // composing after a cursor wrapper. This moves it forward.
-  if (browser.chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from &&
-      parse.sel.head == parse.sel.anchor) {
-    let size = change.endB - change.start
-    parse.sel = {anchor: parse.sel.anchor + size, head: parse.sel.anchor + size}
-  }
 
   view.input.domChangeCount++
   // Handle the case where overwriting a selection by typing matches
@@ -197,7 +190,7 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
   }
   // Same for backspace
   if (view.state.selection.anchor > change.start &&
-      looksLikeJoin(doc, change.start, change.endA, $from, $to) &&
+      looksLikeBackspace(doc, change.start, change.endA, $from, $to) &&
       view.someProp("handleKeyDown", f => f(view, keyEvent(8, "Backspace")))) {
     if (browser.android && browser.chrome) view.domObserver.suppressSelectionUpdates() // #820
     return
@@ -304,15 +297,21 @@ function isMarkChange(cur: Fragment, prev: Fragment) {
   if (Fragment.from(updated).eq(cur)) return {mark, type}
 }
 
-function looksLikeJoin(old: Node, start: number, end: number, $newStart: ResolvedPos, $newEnd: ResolvedPos) {
-  if (!$newStart.parent.isTextblock ||
-      // The content must have shrunk
+function looksLikeBackspace(old: Node, start: number, end: number, $newStart: ResolvedPos, $newEnd: ResolvedPos) {
+  if (// The content must have shrunk
       end - start <= $newEnd.pos - $newStart.pos ||
       // newEnd must point directly at or after the end of the block that newStart points into
       skipClosingAndOpening($newStart, true, false) < $newEnd.pos)
     return false
 
   let $start = old.resolve(start)
+
+  // Handle the case where, rather than joining blocks, the change just removed an entire block
+  if (!$newStart.parent.isTextblock) {
+    let after = $start.nodeAfter
+    return after != null && end == start + after.nodeSize
+  }
+
   // Start must be at the end of a block
   if ($start.parentOffset < $start.parent.content.size || !$start.parent.isTextblock)
     return false

package/src/domcoords.ts

@@ -6,6 +6,11 @@ import {EditorView} from "./index"
 export type Rect = {left: number, right: number, top: number, bottom: number}
 
 function windowRect(doc: Document): Rect {
+  let vp = doc.defaultView && doc.defaultView.visualViewport
+  if (vp) return {
+    left: 0, right: vp.width,
+    top: 0, bottom: vp.height
+  }
   return {left: 0, right: doc.documentElement.clientWidth,
           top: 0, bottom: doc.documentElement.clientHeight}
 }

package/src/index.ts

@@ -5,12 +5,12 @@ import {scrollRectIntoView, posAtCoords, coordsAtPos, endOfTextblock, storeScrol
         resetScrollPos, focusPreventScroll} from "./domcoords"
 import {docViewDesc, ViewDesc, NodeView, NodeViewDesc} from "./viewdesc"
 import {initInput, destroyInput, dispatchEvent, ensureListeners, clearComposition,
-        InputState, doPaste, Dragging} from "./input"
+        InputState, doPaste, Dragging, findCompositionNode} from "./input"
 import {selectionToDOM, anchorInRightPlace, syncNodeSelection} from "./selection"
 import {Decoration, viewDecorations, DecorationSource} from "./decoration"
 import {DOMObserver, safariShadowSelectionRange} from "./domobserver"
 import {readDOMChange} from "./domchange"
-import {DOMSelection, DOMNode, DOMSelectionRange, deepActiveElement} from "./dom"
+import {DOMSelection, DOMNode, DOMSelectionRange, deepActiveElement, clearReusedRange} from "./dom"
 import * as browser from "./browser"
 
 export {Decoration, DecorationSet, DecorationAttrs, DecorationSource} from "./decoration"
@@ -197,8 +197,9 @@ export class EditorView {
         // tracks that and forces a selection reset when our update
         // did write to the node.
         let chromeKludge = browser.chrome ? (this.trackWrites = this.domSelectionRange().focusNode) : null
+        if (this.composing) this.input.compositionNode = findCompositionNode(this)
         if (redraw || !this.docView.update(state.doc, outerDeco, innerDeco, this)) {
-          this.docView.updateOuterDeco([])
+          this.docView.updateOuterDeco(outerDeco)
           this.docView.destroy()
           this.docView = docViewDesc(state.doc, outerDeco, innerDeco, this.dom, this)
         }
@@ -457,6 +458,7 @@ export class EditorView {
     }
     this.docView.destroy()
     ;(this as any).docView = null
+    clearReusedRange();
   }
 
   /// This is true when the view has been

package/src/input.ts

@@ -6,7 +6,7 @@ import * as browser from "./browser"
 import {captureKeyDown} from "./capturekeys"
 import {parseFromClipboard, serializeForClipboard} from "./clipboard"
 import {selectionBetween, selectionToDOM, selectionFromDOM} from "./selection"
-import {keyEvent, DOMNode} from "./dom"
+import {keyEvent, DOMNode, textNodeBefore, textNodeAfter} from "./dom"
 import {EditorView} from "./index"
 import {ViewDesc} from "./viewdesc"
 
@@ -30,6 +30,7 @@ export class InputState {
   lastTouch = 0
   lastAndroidDelete = 0
   composing = false
+  compositionNode: Text | null = null
   composingTimeout = -1
   compositionNodes: ViewDesc[] = []
   compositionEndedAt = -2e8
@@ -490,6 +491,7 @@ editHandlers.compositionend = (view, event) => {
     view.input.composing = false
     view.input.compositionEndedAt = event.timeStamp
     view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0
+    view.input.compositionNode = null
     if (view.input.compositionPendingChanges) Promise.resolve().then(() => view.domObserver.flush())
     view.input.compositionID++
     scheduleComposeEnd(view, 20)
@@ -509,6 +511,24 @@ export function clearComposition(view: EditorView) {
   while (view.input.compositionNodes.length > 0) view.input.compositionNodes.pop()!.markParentsDirty()
 }
 
+export function findCompositionNode(view: EditorView) {
+  let sel = view.domSelectionRange()
+  if (!sel.focusNode) return null
+  let textBefore = textNodeBefore(sel.focusNode, sel.focusOffset)
+  let textAfter = textNodeAfter(sel.focusNode, sel.focusOffset)
+  if (textBefore && textAfter && textBefore != textAfter) {
+    let descAfter = textAfter.pmViewDesc
+    if (!descAfter || !descAfter.isText(textAfter.nodeValue!)) {
+      return textAfter
+    } else if (view.input.compositionNode == textAfter) {
+      let descBefore = textBefore.pmViewDesc
+      if (!(!descBefore || !descBefore.isText(textBefore.nodeValue!)))
+        return textAfter
+    }
+  }
+  return textBefore
+}
+
 function timestampFromCustomEvent() {
   let event = document.createEvent("Event")
   event.initEvent("event", true, true)

package/src/viewdesc.ts

@@ -1,7 +1,7 @@
 import {DOMSerializer, Fragment, Mark, Node, ParseRule} from "prosemirror-model"
 import {TextSelection} from "prosemirror-state"
 
-import {domIndex, isEquivalentPosition, nodeSize, DOMNode} from "./dom"
+import {domIndex, isEquivalentPosition, DOMNode} from "./dom"
 import * as browser from "./browser"
 import {Decoration, DecorationSource, WidgetConstructor, WidgetType, NodeType} from "./decoration"
 import {EditorView} from "./index"
@@ -485,6 +485,8 @@ export class ViewDesc {
   get domAtom() { return false }
 
   get ignoreForCoords() { return false }
+
+  isText(text: string) { return false }
 }
 
 // A widget desc represents a widget decoration, which is a DOM node
@@ -759,8 +761,7 @@ export class NodeViewDesc extends ViewDesc {
     // are inside of this node
     let {from, to} = view.state.selection
     if (!(view.state.selection instanceof TextSelection) || from < pos || to > pos + this.node.content.size) return null
-    let sel = view.domSelectionRange()
-    let textNode = nearbyTextNode(sel.focusNode!, sel.focusOffset)
+    let textNode = view.input.compositionNode
     if (!textNode || !this.dom.contains(textNode.parentNode)) return null
 
     if (this.node.inlineContent) {
@@ -906,6 +907,8 @@ class TextViewDesc extends NodeViewDesc {
   }
 
   get domAtom() { return false }
+
+  isText(text: string) { return this.node.text == text }
 }
 
 // A dummy desc used to tag trailing BR or IMG nodes created to work
@@ -1470,23 +1473,6 @@ function iosHacks(dom: HTMLElement) {
   }
 }
 
-function nearbyTextNode(node: DOMNode, offset: number): Text | null {
-  for (;;) {
-    if (node.nodeType == 3) return node as Text
-    if (node.nodeType == 1 && offset > 0) {
-      if (node.childNodes.length > offset && node.childNodes[offset].nodeType == 3)
-        return node.childNodes[offset] as Text
-      node = node.childNodes[offset - 1]
-      offset = nodeSize(node)
-    } else if (node.nodeType == 1 && offset < node.childNodes.length) {
-      node = node.childNodes[offset]
-      offset = 0
-    } else {
-      return null
-    }
-  }
-}
-
 // Find a piece of text in an inline fragment, overlapping from-to
 function findTextInFragment(frag: Fragment, text: string, from: number, to: number) {
   for (let i = 0, pos = 0; i < frag.childCount && pos <= to;) {