prosemirror-view 1.33.6 → 1.33.8

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 1.33.8 (2024-06-11)
+
+### Bug fixes
+
+When composition happens with the cursor between two text nodes, use the last mutated one to guess which one is being changed.
+
+## 1.33.7 (2024-05-31)
+
+### Bug fixes
+
+Ignore stray `<br>` nodes added to parent list elements when backspacing near uneditable content in Firefox.
+
+Fix a crash where the editor tried to call `removeAttribute` on a text node.
+
+Fix an issue where coordinates near nested blocks could inappropriately be assigned to be inside those blocks.
+
 ## 1.33.6 (2024-04-30)
 
 ### Bug fixes

package/dist/index.cjs

@@ -1,5 +1,9 @@
 'use strict';
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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; }
@@ -387,11 +391,11 @@ function posFromCaret(view, node, offset, coords) {
     if (cur == view.dom) break;
     var desc = view.docView.nearestDesc(cur, true);
     if (!desc) return null;
-    if (desc.dom.nodeType == 1 && (desc.node.isBlock && desc.parent && !sawBlock || !desc.contentDOM)) {
+    if (desc.dom.nodeType == 1 && (desc.node.isBlock && desc.parent || !desc.contentDOM)) {
       var rect = desc.dom.getBoundingClientRect();
-      if (desc.node.isBlock && desc.parent && !sawBlock) {
+      if (desc.node.isBlock && desc.parent) {
+        if (!sawBlock && rect.left > coords.left || rect.top > coords.top) outsideBlock = desc.posBefore;else if (!sawBlock && rect.right < coords.left || rect.bottom < coords.top) outsideBlock = desc.posAfter;
         sawBlock = true;
-        if (rect.left > coords.left || rect.top > coords.top) outsideBlock = desc.posBefore;else if (rect.right < coords.left || rect.bottom < coords.top) outsideBlock = desc.posAfter;
       }
       if (!desc.contentDOM && outsideBlock < 0 && !desc.node.isText) {
         var before = desc.node.isBlock ? coords.top < (rect.top + rect.bottom) / 2 : coords.left < (rect.left + rect.right) / 2;
@@ -1387,8 +1391,10 @@ var NodeViewDesc = function (_ViewDesc4) {
   }, {
     key: "deselectNode",
     value: function deselectNode() {
-      if (this.nodeDOM.nodeType == 1) this.nodeDOM.classList.remove("ProseMirror-selectednode");
-      if (this.contentDOM || !this.node.type.spec.draggable) this.dom.removeAttribute("draggable");
+      if (this.nodeDOM.nodeType == 1) {
+        this.nodeDOM.classList.remove("ProseMirror-selectednode");
+        if (this.contentDOM || !this.node.type.spec.draggable) this.dom.removeAttribute("draggable");
+      }
     }
   }, {
     key: "domAtom",
@@ -3085,7 +3091,7 @@ var MouseDown = function () {
     }
     var target = flushed ? null : event.target;
     var targetDesc = target ? view.docView.nearestDesc(target, true) : null;
-    this.target = targetDesc ? targetDesc.dom : null;
+    this.target = targetDesc && targetDesc.dom.nodeType == 1 ? targetDesc.dom : null;
     var selection = view.state.selection;
     if (event.button == 0 && targetNode.type.spec.draggable && targetNode.type.spec.selectable !== false || selection instanceof prosemirrorState.NodeSelection && selection.from <= targetPos && selection.to > targetPos) this.mightDrag = {
       node: targetNode,
@@ -3241,7 +3247,9 @@ function findCompositionNode(view) {
   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;
+    var descAfter = textAfter.pmViewDesc,
+      lastChanged = view.domObserver.lastChangedTextNode;
+    if (textBefore == lastChanged || textAfter == lastChanged) return lastChanged;
     if (!descAfter || !descAfter.isText(textAfter.nodeValue)) {
       return textAfter;
     } else if (view.input.compositionNode == textAfter) {
@@ -4105,6 +4113,7 @@ var DOMObserver = function () {
     this.currentSelection = new SelectionState();
     this.onCharData = null;
     this.suppressingSelectionUpdates = false;
+    this.lastChangedTextNode = null;
     this.observer = window.MutationObserver && new window.MutationObserver(function (mutations) {
       for (var i = 0; i < mutations.length; i++) _this11.queue.push(mutations[i]);
       if (ie && ie_version <= 11 && mutations.some(function (m) {
@@ -4265,14 +4274,30 @@ var DOMObserver = function () {
           }
         }
       }
-      if (gecko && added.length > 1) {
+      if (gecko && added.length) {
         var brs = added.filter(function (n) {
           return n.nodeName == "BR";
         });
         if (brs.length == 2) {
-          var a = brs[0],
-            b = brs[1];
+          var _brs = _slicedToArray(brs, 2),
+            a = _brs[0],
+            b = _brs[1];
           if (a.parentNode && a.parentNode.parentNode == b.parentNode) b.remove();else a.remove();
+        } else {
+          var focusNode = this.currentSelection.focusNode;
+          var _iterator3 = _createForOfIteratorHelper(brs),
+            _step3;
+          try {
+            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+              var br = _step3.value;
+              var parent = br.parentNode;
+              if (parent && parent.nodeName == "LI" && (!focusNode || blockParent(view, focusNode) != parent)) br.remove();
+            }
+          } catch (err) {
+            _iterator3.e(err);
+          } finally {
+            _iterator3.f();
+          }
         }
       }
       var readSel = null;
@@ -4299,7 +4324,11 @@ var DOMObserver = function () {
       if (mut.type == "attributes" && (desc == this.view.docView || mut.attributeName == "contenteditable" || mut.attributeName == "style" && !mut.oldValue && !mut.target.getAttribute("style"))) return null;
       if (!desc || desc.ignoreMutation(mut)) return null;
       if (mut.type == "childList") {
-        for (var i = 0; i < mut.addedNodes.length; i++) added.push(mut.addedNodes[i]);
+        for (var i = 0; i < mut.addedNodes.length; i++) {
+          var node = mut.addedNodes[i];
+          added.push(node);
+          if (node.nodeType == 3) this.lastChangedTextNode = node;
+        }
         if (desc.contentDOM && desc.contentDOM != desc.dom && !desc.contentDOM.contains(mut.target)) return {
           from: desc.posBefore,
           to: desc.posAfter
@@ -4329,6 +4358,7 @@ var DOMObserver = function () {
           to: desc.posAtEnd + desc.border
         };
       } else {
+        this.lastChangedTextNode = mut.target;
         return {
           from: desc.posAtStart,
           to: desc.posAtEnd,
@@ -4387,6 +4417,13 @@ function safariShadowSelectionRange(view, selection) {
   view.dom.removeEventListener("beforeinput", read, true);
   return found ? rangeToSelectionRange(view, found) : null;
 }
+function blockParent(view, node) {
+  for (var p = node.parentNode; p && p != view.dom; p = p.parentNode) {
+    var desc = view.docView.nearestDesc(p, true);
+    if (desc && desc.node.isBlock) return p;
+  }
+  return null;
+}
 function parseBetween(view, from_, to_) {
   var _view$docView$parseRa = view.docView.parseRange(from_, to_),
     parent = _view$docView$parseRa.node,

package/dist/index.js

@@ -396,14 +396,15 @@ function posFromCaret(view, node, offset, coords) {
         let desc = view.docView.nearestDesc(cur, true);
         if (!desc)
             return null;
-        if (desc.dom.nodeType == 1 && (desc.node.isBlock && desc.parent && !sawBlock || !desc.contentDOM)) {
+        if (desc.dom.nodeType == 1 && (desc.node.isBlock && desc.parent || !desc.contentDOM)) {
             let rect = desc.dom.getBoundingClientRect();
-            if (desc.node.isBlock && desc.parent && !sawBlock) {
-                sawBlock = true;
-                if (rect.left > coords.left || rect.top > coords.top)
+            if (desc.node.isBlock && desc.parent) {
+                // Only apply the horizontal test to the innermost block. Vertical for any parent.
+                if (!sawBlock && rect.left > coords.left || rect.top > coords.top)
                     outsideBlock = desc.posBefore;
-                else if (rect.right < coords.left || rect.bottom < coords.top)
+                else if (!sawBlock && rect.right < coords.left || rect.bottom < coords.top)
                     outsideBlock = desc.posAfter;
+                sawBlock = true;
             }
             if (!desc.contentDOM && outsideBlock < 0 && !desc.node.isText) {
                 // If we are inside a leaf, return the side of the leaf closer to the coords
@@ -1452,10 +1453,11 @@ class NodeViewDesc extends ViewDesc {
     }
     // Remove selected node marking from this node.
     deselectNode() {
-        if (this.nodeDOM.nodeType == 1)
+        if (this.nodeDOM.nodeType == 1) {
             this.nodeDOM.classList.remove("ProseMirror-selectednode");
-        if (this.contentDOM || !this.node.type.spec.draggable)
-            this.dom.removeAttribute("draggable");
+            if (this.contentDOM || !this.node.type.spec.draggable)
+                this.dom.removeAttribute("draggable");
+        }
     }
     get domAtom() { return this.node.isAtom; }
 }
@@ -3270,7 +3272,7 @@ class MouseDown {
         }
         const target = flushed ? null : event.target;
         const targetDesc = target ? view.docView.nearestDesc(target, true) : null;
-        this.target = targetDesc ? targetDesc.dom : null;
+        this.target = targetDesc && targetDesc.dom.nodeType == 1 ? targetDesc.dom : null;
         let { selection } = view.state;
         if (event.button == 0 &&
             targetNode.type.spec.draggable && targetNode.type.spec.selectable !== false ||
@@ -3458,7 +3460,9 @@ function findCompositionNode(view) {
     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;
+        let descAfter = textAfter.pmViewDesc, lastChanged = view.domObserver.lastChangedTextNode;
+        if (textBefore == lastChanged || textAfter == lastChanged)
+            return lastChanged;
         if (!descAfter || !descAfter.isText(textAfter.nodeValue)) {
             return textAfter;
         }
@@ -4470,6 +4474,7 @@ class DOMObserver {
         this.currentSelection = new SelectionState;
         this.onCharData = null;
         this.suppressingSelectionUpdates = false;
+        this.lastChangedTextNode = null;
         this.observer = window.MutationObserver &&
             new window.MutationObserver(mutations => {
                 for (let i = 0; i < mutations.length; i++)
@@ -4602,15 +4607,23 @@ class DOMObserver {
                 }
             }
         }
-        if (gecko && added.length > 1) {
+        if (gecko && added.length) {
             let brs = added.filter(n => n.nodeName == "BR");
             if (brs.length == 2) {
-                let a = brs[0], b = brs[1];
+                let [a, b] = brs;
                 if (a.parentNode && a.parentNode.parentNode == b.parentNode)
                     b.remove();
                 else
                     a.remove();
             }
+            else {
+                let { focusNode } = this.currentSelection;
+                for (let br of brs) {
+                    let parent = br.parentNode;
+                    if (parent && parent.nodeName == "LI" && (!focusNode || blockParent(view, focusNode) != parent))
+                        br.remove();
+                }
+            }
         }
         let readSel = null;
         // If it looks like the browser has reset the selection to the
@@ -4651,8 +4664,12 @@ class DOMObserver {
         if (!desc || desc.ignoreMutation(mut))
             return null;
         if (mut.type == "childList") {
-            for (let i = 0; i < mut.addedNodes.length; i++)
-                added.push(mut.addedNodes[i]);
+            for (let i = 0; i < mut.addedNodes.length; i++) {
+                let node = mut.addedNodes[i];
+                added.push(node);
+                if (node.nodeType == 3)
+                    this.lastChangedTextNode = node;
+            }
             if (desc.contentDOM && desc.contentDOM != desc.dom && !desc.contentDOM.contains(mut.target))
                 return { from: desc.posBefore, to: desc.posAfter };
             let prev = mut.previousSibling, next = mut.nextSibling;
@@ -4679,6 +4696,7 @@ class DOMObserver {
             return { from: desc.posAtStart - desc.border, to: desc.posAtEnd + desc.border };
         }
         else { // "characterData"
+            this.lastChangedTextNode = mut.target;
             return {
                 from: desc.posAtStart,
                 to: desc.posAtEnd,
@@ -4740,6 +4758,14 @@ function safariShadowSelectionRange(view, selection) {
     view.dom.removeEventListener("beforeinput", read, true);
     return found ? rangeToSelectionRange(view, found) : null;
 }
+function blockParent(view, node) {
+    for (let p = node.parentNode; p && p != view.dom; p = p.parentNode) {
+        let desc = view.docView.nearestDesc(p, true);
+        if (desc && desc.node.isBlock)
+            return p;
+    }
+    return null;
+}
 
 // Note that all referencing and parsing is done with the
 // start-of-operation selection and document, since that's the one

package/package.json

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

package/src/domcoords.ts

@@ -227,12 +227,13 @@ function posFromCaret(view: EditorView, node: Node, offset: number, coords: {top
     if (cur == view.dom) break
     let desc = view.docView.nearestDesc(cur, true)
     if (!desc) return null
-    if (desc.dom.nodeType == 1 && (desc.node.isBlock && desc.parent && !sawBlock || !desc.contentDOM)) {
+    if (desc.dom.nodeType == 1 && (desc.node.isBlock && desc.parent || !desc.contentDOM)) {
       let rect = (desc.dom as HTMLElement).getBoundingClientRect()
-      if (desc.node.isBlock && desc.parent && !sawBlock) {
+      if (desc.node.isBlock && desc.parent) {
+        // Only apply the horizontal test to the innermost block. Vertical for any parent.
+        if (!sawBlock && rect.left > coords.left || rect.top > coords.top) outsideBlock = desc.posBefore
+        else if (!sawBlock && rect.right < coords.left || rect.bottom < coords.top) outsideBlock = desc.posAfter
         sawBlock = true
-        if (rect.left > coords.left || rect.top > coords.top) outsideBlock = desc.posBefore
-        else if (rect.right < coords.left || rect.bottom < coords.top) outsideBlock = desc.posAfter
       }
       if (!desc.contentDOM && outsideBlock < 0 && !desc.node.isText) {
         // If we are inside a leaf, return the side of the leaf closer to the coords

package/src/domobserver.ts

@@ -43,6 +43,7 @@ export class DOMObserver {
   currentSelection = new SelectionState
   onCharData: ((e: Event) => void) | null = null
   suppressingSelectionUpdates = false
+  lastChangedTextNode: Text | null = null
 
   constructor(
     readonly view: EditorView,
@@ -183,12 +184,19 @@ export class DOMObserver {
       }
     }
 
-    if (browser.gecko && added.length > 1) {
-      let brs = added.filter(n => n.nodeName == "BR")
+    if (browser.gecko && added.length) {
+      let brs = added.filter(n => n.nodeName == "BR") as HTMLElement[]
       if (brs.length == 2) {
-        let a = brs[0] as HTMLElement, b = brs[1] as HTMLElement
+        let [a, b] = brs
         if (a.parentNode && a.parentNode.parentNode == b.parentNode) b.remove()
         else a.remove()
+      } else {
+        let {focusNode} = this.currentSelection
+        for (let br of brs) {
+          let parent = br.parentNode
+          if (parent && parent.nodeName == "LI" && (!focusNode || blockParent(view, focusNode) != parent))
+            br.remove()
+        }
       }
     }
 
@@ -228,7 +236,11 @@ export class DOMObserver {
     if (!desc || desc.ignoreMutation(mut)) return null
 
     if (mut.type == "childList") {
-      for (let i = 0; i < mut.addedNodes.length; i++) added.push(mut.addedNodes[i])
+      for (let i = 0; i < mut.addedNodes.length; i++) {
+        let node = mut.addedNodes[i]
+        added.push(node)
+        if (node.nodeType == 3) this.lastChangedTextNode = node as Text
+      }
       if (desc.contentDOM && desc.contentDOM != desc.dom && !desc.contentDOM.contains(mut.target))
         return {from: desc.posBefore, to: desc.posAfter}
       let prev = mut.previousSibling, next = mut.nextSibling
@@ -251,6 +263,7 @@ export class DOMObserver {
     } else if (mut.type == "attributes") {
       return {from: desc.posAtStart - desc.border, to: desc.posAtEnd + desc.border}
     } else { // "characterData"
+      this.lastChangedTextNode = mut.target as Text
       return {
         from: desc.posAtStart,
         to: desc.posAtEnd,
@@ -317,3 +330,11 @@ export function safariShadowSelectionRange(view: EditorView, selection: DOMSelec
 
   return found ? rangeToSelectionRange(view, found) : null
 }
+
+function blockParent(view: EditorView, node: DOMNode): Node | null {
+  for (let p = node.parentNode; p && p != view.dom; p = p.parentNode) {
+    let desc = view.docView.nearestDesc(p, true)
+    if (desc && desc.node.isBlock) return p
+  }
+  return null
+}

package/src/input.ts

@@ -326,7 +326,7 @@ class MouseDown {
 
     const target = flushed ? null : event.target as HTMLElement
     const targetDesc = target ? view.docView.nearestDesc(target, true) : null
-    this.target = targetDesc ? targetDesc.dom as HTMLElement : null
+    this.target = targetDesc && targetDesc.dom.nodeType == 1 ? targetDesc.dom as HTMLElement : null
 
     let {selection} = view.state
     if (event.button == 0 &&
@@ -517,7 +517,8 @@ export function findCompositionNode(view: EditorView) {
   let textBefore = textNodeBefore(sel.focusNode, sel.focusOffset)
   let textAfter = textNodeAfter(sel.focusNode, sel.focusOffset)
   if (textBefore && textAfter && textBefore != textAfter) {
-    let descAfter = textAfter.pmViewDesc
+    let descAfter = textAfter.pmViewDesc, lastChanged = view.domObserver.lastChangedTextNode
+    if (textBefore == lastChanged || textAfter == lastChanged) return lastChanged
     if (!descAfter || !descAfter.isText(textAfter.nodeValue!)) {
       return textAfter
     } else if (view.input.compositionNode == textAfter) {

package/src/viewdesc.ts

@@ -834,8 +834,10 @@ export class NodeViewDesc extends ViewDesc {
 
   // Remove selected node marking from this node.
   deselectNode() {
-    if (this.nodeDOM.nodeType == 1) (this.nodeDOM as HTMLElement).classList.remove("ProseMirror-selectednode")
-    if (this.contentDOM || !this.node.type.spec.draggable) (this.dom as HTMLElement).removeAttribute("draggable")
+    if (this.nodeDOM.nodeType == 1) {
+      ;(this.nodeDOM as HTMLElement).classList.remove("ProseMirror-selectednode")
+      if (this.contentDOM || !this.node.type.spec.draggable) (this.dom as HTMLElement).removeAttribute("draggable")
+    }
   }
 
   get domAtom() { return this.node.isAtom }