prosemirror-view 1.26.2 → 1.26.5

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 1.26.5 (2022-07-07)
+
+### Bug fixes
+
+Fix an issue where a composition happening at the same time as widget insertion/removal could corrupt the rendered DOM.
+
+Fix a problem where `coordsAtPos` would look inside the DOM for atomic nodes, and sometimes return very odd positions that way.
+
+## 1.26.4 (2022-07-04)
+
+### Bug fixes
+
+Avoid spurious type errors on `handleDOMEvents` by widening the type for unknown event objects.
+
+## 1.26.3 (2022-06-29)
+
+### Bug fixes
+
+Work around a Safari bug where mutation records get delivered even though the observer wasn't observing when the mutations happened.
+
 ## 1.26.2 (2022-06-22)
 
 ### Bug fixes

package/dist/index.cjs

@@ -444,7 +444,7 @@ function _posAtCoords(view, coords) {
     }
   }
 
-  var elt = (view.root.elementFromPoint ? view.root : doc).elementFromPoint(coords.left, coords.top + 1);
+  var elt = (view.root.elementFromPoint ? view.root : doc).elementFromPoint(coords.left, coords.top);
   var pos;
 
   if (!elt || !view.dom.contains(elt.nodeType != 1 ? elt.parentNode : elt)) {
@@ -495,7 +495,8 @@ var BIDI = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
 function _coordsAtPos(view, pos, side) {
   var _view$docView$domFrom = view.docView.domFromPos(pos, side < 0 ? -1 : 1),
       node = _view$docView$domFrom.node,
-      offset = _view$docView$domFrom.offset;
+      offset = _view$docView$domFrom.offset,
+      atom = _view$docView$domFrom.atom;
 
   var supportEmptyRange = webkit || gecko;
 
@@ -534,13 +535,15 @@ function _coordsAtPos(view, pos, side) {
     }
   }
 
-  if (!view.state.doc.resolve(pos).parent.inlineContent) {
-    if (offset && (side < 0 || offset == nodeSize(node))) {
+  var $dom = view.state.doc.resolve(pos - (atom || 0));
+
+  if (!$dom.parent.inlineContent) {
+    if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
       var before = node.childNodes[offset - 1];
       if (before.nodeType == 1) return flattenH(before.getBoundingClientRect(), false);
     }
 
-    if (offset < nodeSize(node)) {
+    if (atom == null && offset < nodeSize(node)) {
       var after = node.childNodes[offset];
       if (after.nodeType == 1) return flattenH(after.getBoundingClientRect(), true);
     }
@@ -548,13 +551,13 @@ function _coordsAtPos(view, pos, side) {
     return flattenH(node.getBoundingClientRect(), side >= 0);
   }
 
-  if (offset && (side < 0 || offset == nodeSize(node))) {
+  if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
     var _before = node.childNodes[offset - 1];
     var target = _before.nodeType == 3 ? textRange(_before, nodeSize(_before) - (supportEmptyRange ? 0 : 1)) : _before.nodeType == 1 && (_before.nodeName != "BR" || !_before.nextSibling) ? _before : null;
     if (target) return flattenV(singleRect(target, 1), false);
   }
 
-  if (offset < nodeSize(node)) {
+  if (atom == null && offset < nodeSize(node)) {
     var _after = node.childNodes[offset];
 
     while (_after.pmViewDesc && _after.pmViewDesc.ignoreForCoords) {
@@ -905,7 +908,8 @@ var ViewDesc = function () {
     value: function domFromPos(pos, side) {
       if (!this.contentDOM) return {
         node: this.dom,
-        offset: 0
+        offset: 0,
+        atom: pos + 1
       };
       var i = 0,
           offset = 0;
@@ -2077,7 +2081,7 @@ var ViewTreeUpdater = function () {
       if (child.dirty == NODE_DIRTY && child.dom == child.contentDOM) child.dirty = CONTENT_DIRTY;
       if (!child.update(node, outerDeco, innerDeco, view)) return false;
       this.destroyBetween(this.index, index);
-      this.index = index + 1;
+      this.index++;
       return true;
     }
   }, {
@@ -4724,7 +4728,11 @@ var DOMObserver = function () {
   }, {
     key: "start",
     value: function start() {
-      if (this.observer) this.observer.observe(this.view.dom, observeOptions);
+      if (this.observer) {
+        this.observer.takeRecords();
+        this.observer.observe(this.view.dom, observeOptions);
+      }
+
       if (this.onCharData) this.view.dom.addEventListener("DOMCharacterDataModified", this.onCharData);
       this.connectSelection();
     }

package/dist/index.d.ts

@@ -326,6 +326,7 @@ declare class ViewDesc {
     domFromPos(pos: number, side: number): {
         node: DOMNode;
         offset: number;
+        atom?: number;
     };
     parseRange(from: number, to: number, base?: number): {
         node: DOMNode;
@@ -563,7 +564,7 @@ includes events that TypeScript's HTMLElementEventMap doesn't know
 about.
 */
 interface DOMEventMap extends HTMLElementEventMap {
-    [event: string]: Event;
+    [event: string]: any;
 }
 /**
 Props are configuration values that can be passed to an editor view

package/dist/index.js

@@ -367,7 +367,7 @@ function posAtCoords(view, coords) {
             ({ startContainer: node, startOffset: offset } = range);
     }
     let elt = (view.root.elementFromPoint ? view.root : doc)
-        .elementFromPoint(coords.left, coords.top + 1);
+        .elementFromPoint(coords.left, coords.top);
     let pos;
     if (!elt || !view.dom.contains(elt.nodeType != 1 ? elt.parentNode : elt)) {
         let box = view.dom.getBoundingClientRect();
@@ -422,7 +422,7 @@ const BIDI = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
 // Given a position in the document model, get a bounding box of the
 // character at that position, relative to the window.
 function coordsAtPos(view, pos, side) {
-    let { node, offset } = view.docView.domFromPos(pos, side < 0 ? -1 : 1);
+    let { node, offset, atom } = view.docView.domFromPos(pos, side < 0 ? -1 : 1);
     let supportEmptyRange = webkit || gecko;
     if (node.nodeType == 3) {
         // These browsers support querying empty text ranges. Prefer that in
@@ -461,14 +461,15 @@ function coordsAtPos(view, pos, side) {
             return flattenV(singleRect(textRange(node, from, to), takeSide), takeSide < 0);
         }
     }
+    let $dom = view.state.doc.resolve(pos - (atom || 0));
     // Return a horizontal line in block context
-    if (!view.state.doc.resolve(pos).parent.inlineContent) {
-        if (offset && (side < 0 || offset == nodeSize(node))) {
+    if (!$dom.parent.inlineContent) {
+        if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
             let before = node.childNodes[offset - 1];
             if (before.nodeType == 1)
                 return flattenH(before.getBoundingClientRect(), false);
         }
-        if (offset < nodeSize(node)) {
+        if (atom == null && offset < nodeSize(node)) {
             let after = node.childNodes[offset];
             if (after.nodeType == 1)
                 return flattenH(after.getBoundingClientRect(), true);
@@ -476,7 +477,7 @@ function coordsAtPos(view, pos, side) {
         return flattenH(node.getBoundingClientRect(), side >= 0);
     }
     // Inline, not in text node (this is not Bidi-safe)
-    if (offset && (side < 0 || offset == nodeSize(node))) {
+    if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
         let before = node.childNodes[offset - 1];
         let target = before.nodeType == 3 ? textRange(before, nodeSize(before) - (supportEmptyRange ? 0 : 1))
             // BR nodes tend to only return the rectangle before them.
@@ -485,7 +486,7 @@ function coordsAtPos(view, pos, side) {
         if (target)
             return flattenV(singleRect(target, 1), false);
     }
-    if (offset < nodeSize(node)) {
+    if (atom == null && offset < nodeSize(node)) {
         let after = node.childNodes[offset];
         while (after.pmViewDesc && after.pmViewDesc.ignoreForCoords)
             after = after.nextSibling;
@@ -797,7 +798,7 @@ class ViewDesc {
     }
     domFromPos(pos, side) {
         if (!this.contentDOM)
-            return { node: this.dom, offset: 0 };
+            return { node: this.dom, offset: 0, atom: pos + 1 };
         // First find the position in the child array
         let i = 0, offset = 0;
         for (let curPos = 0; i < this.children.length; i++) {
@@ -1723,7 +1724,7 @@ class ViewTreeUpdater {
         if (!child.update(node, outerDeco, innerDeco, view))
             return false;
         this.destroyBetween(this.index, index);
-        this.index = index + 1;
+        this.index++;
         return true;
     }
     findIndexWithChild(domNode) {
@@ -4234,8 +4235,10 @@ class DOMObserver {
         }
     }
     start() {
-        if (this.observer)
+        if (this.observer) {
+            this.observer.takeRecords();
             this.observer.observe(this.view.dom, observeOptions);
+        }
         if (this.onCharData)
             this.view.dom.addEventListener("DOMCharacterDataModified", this.onCharData);
         this.connectSelection();

package/package.json

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

package/src/domcoords.ts

@@ -260,7 +260,7 @@ export function posAtCoords(view: EditorView, coords: {top: number, left: number
   }
 
   let elt = ((view.root as any).elementFromPoint ? view.root : doc)
-              .elementFromPoint(coords.left, coords.top + 1) as HTMLElement
+              .elementFromPoint(coords.left, coords.top) as HTMLElement
   let pos
   if (!elt || !view.dom.contains(elt.nodeType != 1 ? elt.parentNode : elt)) {
     let box = view.dom.getBoundingClientRect()
@@ -315,7 +315,7 @@ const BIDI = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/
 // Given a position in the document model, get a bounding box of the
 // character at that position, relative to the window.
 export function coordsAtPos(view: EditorView, pos: number, side: number): Rect {
-  let {node, offset} = view.docView.domFromPos(pos, side < 0 ? -1 : 1)
+  let {node, offset, atom} = view.docView.domFromPos(pos, side < 0 ? -1 : 1)
 
   let supportEmptyRange = browser.webkit || browser.gecko
   if (node.nodeType == 3) {
@@ -345,13 +345,14 @@ export function coordsAtPos(view: EditorView, pos: number, side: number): Rect {
     }
   }
 
+  let $dom = view.state.doc.resolve(pos - (atom || 0))
   // Return a horizontal line in block context
-  if (!view.state.doc.resolve(pos).parent.inlineContent) {
-    if (offset && (side < 0 || offset == nodeSize(node))) {
+  if (!$dom.parent.inlineContent) {
+    if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
       let before = node.childNodes[offset - 1]
       if (before.nodeType == 1) return flattenH((before as HTMLElement).getBoundingClientRect(), false)
     }
-    if (offset < nodeSize(node)) {
+    if (atom == null && offset < nodeSize(node)) {
       let after = node.childNodes[offset]
       if (after.nodeType == 1) return flattenH((after as HTMLElement).getBoundingClientRect(), true)
     }
@@ -359,7 +360,7 @@ export function coordsAtPos(view: EditorView, pos: number, side: number): Rect {
   }
 
   // Inline, not in text node (this is not Bidi-safe)
-  if (offset && (side < 0 || offset == nodeSize(node))) {
+  if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
     let before = node.childNodes[offset - 1]
     let target = before.nodeType == 3 ? textRange(before as Text, nodeSize(before) - (supportEmptyRange ? 0 : 1))
         // BR nodes tend to only return the rectangle before them.
@@ -367,7 +368,7 @@ export function coordsAtPos(view: EditorView, pos: number, side: number): Rect {
         : before.nodeType == 1 && (before.nodeName != "BR" || !before.nextSibling) ? before : null
     if (target) return flattenV(singleRect(target as Range | HTMLElement, 1), false)
   }
-  if (offset < nodeSize(node)) {
+  if (atom == null && offset < nodeSize(node)) {
     let after = node.childNodes[offset]
     while (after.pmViewDesc && after.pmViewDesc.ignoreForCoords) after = after.nextSibling!
     let target = !after ? null : after.nodeType == 3 ? textRange(after as Text, 0, (supportEmptyRange ? 0 : 1))

package/src/domobserver.ts

@@ -84,8 +84,10 @@ export class DOMObserver {
   }
 
   start() {
-    if (this.observer)
+    if (this.observer) {
+      this.observer.takeRecords()
       this.observer.observe(this.view.dom, observeOptions)
+    }
     if (this.onCharData)
       this.view.dom.addEventListener("DOMCharacterDataModified", this.onCharData)
     this.connectSelection()

package/src/index.ts

@@ -512,7 +512,7 @@ type NodeViewSet = {[name: string]: NodeViewConstructor | MarkViewConstructor}
 /// includes events that TypeScript's HTMLElementEventMap doesn't know
 /// about.
 export interface DOMEventMap extends HTMLElementEventMap {
-  [event: string]: Event
+  [event: string]: any
 }
 
 /// Props are configuration values that can be passed to an editor view

package/src/viewdesc.ts

@@ -262,8 +262,8 @@ export class ViewDesc {
     }
   }
 
-  domFromPos(pos: number, side: number): {node: DOMNode, offset: number} {
-    if (!this.contentDOM) return {node: this.dom, offset: 0}
+  domFromPos(pos: number, side: number): {node: DOMNode, offset: number, atom?: number} {
+    if (!this.contentDOM) return {node: this.dom, offset: 0, atom: pos + 1}
     // First find the position in the child array
     let i = 0, offset = 0
     for (let curPos = 0; i < this.children.length; i++) {
@@ -1196,7 +1196,7 @@ class ViewTreeUpdater {
     if (child.dirty == NODE_DIRTY && child.dom == child.contentDOM) child.dirty = CONTENT_DIRTY
     if (!child.update(node, outerDeco, innerDeco, view)) return false
     this.destroyBetween(this.index, index)
-    this.index = index + 1
+    this.index++
     return true
   }