prosemirror-view 1.31.6 → 1.31.7

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 1.31.7 (2023-07-28)
+
+### Bug fixes
+
+Fix a bug where, when a compositionend event was received before the composition's final changes were processed, the resulting transaction didn't have its composition metadata set.
+
+Fix an issue that caused cursor motion to stop at uneditable nodes that aren't widget decorations.
+
+When scrolling an element higher than the viewport into view, make sure its top is visible.
+
 ## 1.31.6 (2023-07-14)
 
 ### Bug fixes

package/dist/index.cjs

@@ -216,7 +216,7 @@ function scrollRectIntoView(view, rect, startDOM) {
     var bounding = atTop ? windowRect(doc) : clientRect(elt);
     var moveX = 0,
         moveY = 0;
-    if (rect.top < bounding.top + getSide(scrollThreshold, "top")) moveY = -(bounding.top - rect.top + getSide(scrollMargin, "top"));else if (rect.bottom > bounding.bottom - getSide(scrollThreshold, "bottom")) moveY = rect.bottom - bounding.bottom + getSide(scrollMargin, "bottom");
+    if (rect.top < bounding.top + getSide(scrollThreshold, "top")) moveY = -(bounding.top - rect.top + getSide(scrollMargin, "top"));else if (rect.bottom > bounding.bottom - getSide(scrollThreshold, "bottom")) moveY = rect.bottom - rect.top > bounding.bottom - bounding.top ? rect.top + getSide(scrollMargin, "top") - bounding.top : rect.bottom - bounding.bottom + getSide(scrollMargin, "bottom");
     if (rect.left < bounding.left + getSide(scrollThreshold, "left")) moveX = -(bounding.left - rect.left + getSide(scrollMargin, "left"));else if (rect.right > bounding.right - getSide(scrollThreshold, "right")) moveX = rect.right - bounding.right + getSide(scrollMargin, "right");
 
     if (moveX || moveY) {
@@ -2774,6 +2774,7 @@ function nodeLen(node) {
 }
 
 function isIgnorable(dom) {
+  if (dom.contentEditable == "false") return true;
   var desc = dom.pmViewDesc;
   return desc && desc.size == 0 && (dom.nextSibling || dom.nodeName != "BR");
 }
@@ -2880,7 +2881,45 @@ function isBlockNode(dom) {
   return desc && desc.node && desc.node.isBlock;
 }
 
+function textNodeAfter(node, offset) {
+  while (node && offset == node.childNodes.length && !hasBlockDesc(node)) {
+    offset = domIndex(node) + 1;
+    node = node.parentNode;
+  }
+
+  while (node && offset < node.childNodes.length) {
+    node = node.childNodes[offset];
+    if (node.nodeType == 3) return node;
+    offset = 0;
+  }
+}
+
+function textNodeBefore(node, offset) {
+  while (node && !offset && !hasBlockDesc(node)) {
+    offset = domIndex(node);
+    node = node.parentNode;
+  }
+
+  while (node && offset) {
+    node = node.childNodes[offset - 1];
+    if (node.nodeType == 3) return node;
+    offset = node.childNodes.length;
+  }
+}
+
 function setSelFocus(view, node, offset) {
+  if (node.nodeType != 3) {
+    var before, after;
+
+    if (after = textNodeAfter(node, offset)) {
+      node = after;
+      offset = 0;
+    } else if (before = textNodeBefore(node, offset)) {
+      node = before;
+      offset = before.nodeValue.length;
+    }
+  }
+
   var sel = view.domSelection();
 
   if (selectionCollapsed(sel)) {
@@ -3349,6 +3388,7 @@ var InputState = _createClass(function InputState() {
   this.compositionNodes = [];
   this.compositionEndedAt = -2e8;
   this.compositionID = 1;
+  this.compositionPendingChanges = 0;
   this.domChangeCount = 0;
   this.eventHandlers = Object.create(null);
   this.hideSelectionGuard = null;
@@ -3812,6 +3852,10 @@ editHandlers.compositionend = function (view, event) {
   if (view.composing) {
     view.input.composing = false;
     view.input.compositionEndedAt = event.timeStamp;
+    view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0;
+    if (view.input.compositionPendingChanges) Promise.resolve().then(function () {
+      return view.domObserver.flush();
+    });
     view.input.compositionID++;
     scheduleComposeEnd(view, 20);
   }
@@ -5018,18 +5062,34 @@ var DOMObserver = function () {
         return true;
       }
     }
+  }, {
+    key: "pendingRecords",
+    value: function pendingRecords() {
+      if (this.observer) {
+        var _iterator2 = _createForOfIteratorHelper(this.observer.takeRecords()),
+            _step2;
+
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var mut = _step2.value;
+            this.queue.push(mut);
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      }
+
+      return this.queue;
+    }
   }, {
     key: "flush",
     value: function flush() {
       var view = this.view;
       if (!view.docView || this.flushingSoon > -1) return;
-      var mutations = this.observer ? this.observer.takeRecords() : [];
-
-      if (this.queue.length) {
-        mutations = this.queue.concat(mutations);
-        this.queue.length = 0;
-      }
-
+      var mutations = this.pendingRecords();
+      if (mutations.length) this.queue = [];
       var sel = view.domSelectionRange();
       var newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel);
       var from = -1,
@@ -5284,6 +5344,9 @@ function ruleFromNode(dom) {
 var isInline = /^(a|abbr|acronym|b|bd[io]|big|br|button|cite|code|data(list)?|del|dfn|em|i|ins|kbd|label|map|mark|meter|output|q|ruby|s|samp|small|span|strong|su[bp]|time|u|tt|var)$/i;
 
 function readDOMChange(view, from, to, typeOver, addedNodes) {
+  var compositionID = view.input.compositionPendingChanges || (view.composing ? view.input.compositionID : 0);
+  view.input.compositionPendingChanges = 0;
+
   if (from < 0) {
     var origin = view.input.lastSelectionTime > Date.now() - 50 ? view.input.lastSelectionOrigin : null;
     var newSel = selectionFromDOM(view, origin);
@@ -5296,7 +5359,7 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
       var _tr = view.state.tr.setSelection(newSel);
 
       if (origin == "pointer") _tr.setMeta("pointer", true);else if (origin == "key") _tr.scrollIntoView();
-      if (view.composing) _tr.setMeta("composition", view.input.compositionID);
+      if (compositionID) _tr.setMeta("composition", compositionID);
       view.dispatch(_tr);
     }
 
@@ -5347,7 +5410,7 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
         if (_sel && !_sel.eq(view.state.selection)) {
           var _tr2 = view.state.tr.setSelection(_sel);
 
-          if (view.composing) _tr2.setMeta("composition", view.input.compositionID);
+          if (compositionID) _tr2.setMeta("composition", compositionID);
           view.dispatch(_tr2);
         }
       }
@@ -5451,7 +5514,7 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
   }
 
   if (storedMarks) tr.ensureMarks(storedMarks);
-  if (view.composing) tr.setMeta("composition", view.input.compositionID);
+  if (compositionID) tr.setMeta("composition", compositionID);
   view.dispatch(tr.scrollIntoView());
 }
 

package/dist/index.js

@@ -163,7 +163,9 @@ function scrollRectIntoView(view, rect, startDOM) {
         if (rect.top < bounding.top + getSide(scrollThreshold, "top"))
             moveY = -(bounding.top - rect.top + getSide(scrollMargin, "top"));
         else if (rect.bottom > bounding.bottom - getSide(scrollThreshold, "bottom"))
-            moveY = rect.bottom - bounding.bottom + getSide(scrollMargin, "bottom");
+            moveY = rect.bottom - rect.top > bounding.bottom - bounding.top
+                ? rect.top + getSide(scrollMargin, "top") - bounding.top
+                : rect.bottom - bounding.bottom + getSide(scrollMargin, "bottom");
         if (rect.left < bounding.left + getSide(scrollThreshold, "left"))
             moveX = -(bounding.left - rect.left + getSide(scrollMargin, "left"));
         else if (rect.right > bounding.right - getSide(scrollThreshold, "right"))
@@ -2354,6 +2356,8 @@ function nodeLen(node) {
     return node.nodeType == 3 ? node.nodeValue.length : node.childNodes.length;
 }
 function isIgnorable(dom) {
+    if (dom.contentEditable == "false")
+        return true;
     let desc = dom.pmViewDesc;
     return desc && desc.size == 0 && (dom.nextSibling || dom.nodeName != "BR");
 }
@@ -2470,7 +2474,42 @@ function isBlockNode(dom) {
     let desc = dom.pmViewDesc;
     return desc && desc.node && desc.node.isBlock;
 }
+function textNodeAfter(node, offset) {
+    while (node && offset == node.childNodes.length && !hasBlockDesc(node)) {
+        offset = domIndex(node) + 1;
+        node = node.parentNode;
+    }
+    while (node && offset < node.childNodes.length) {
+        node = node.childNodes[offset];
+        if (node.nodeType == 3)
+            return node;
+        offset = 0;
+    }
+}
+function textNodeBefore(node, offset) {
+    while (node && !offset && !hasBlockDesc(node)) {
+        offset = domIndex(node);
+        node = node.parentNode;
+    }
+    while (node && offset) {
+        node = node.childNodes[offset - 1];
+        if (node.nodeType == 3)
+            return node;
+        offset = node.childNodes.length;
+    }
+}
 function setSelFocus(view, node, offset) {
+    if (node.nodeType != 3) {
+        let before, after;
+        if (after = textNodeAfter(node, offset)) {
+            node = after;
+            offset = 0;
+        }
+        else if (before = textNodeBefore(node, offset)) {
+            node = before;
+            offset = before.nodeValue.length;
+        }
+    }
     let sel = view.domSelection();
     if (selectionCollapsed(sel)) {
         let range = document.createRange();
@@ -2899,6 +2938,8 @@ class InputState {
         this.compositionNodes = [];
         this.compositionEndedAt = -2e8;
         this.compositionID = 1;
+        // Set to a composition ID when there are pending changes at compositionend
+        this.compositionPendingChanges = 0;
         this.domChangeCount = 0;
         this.eventHandlers = Object.create(null);
         this.hideSelectionGuard = null;
@@ -3328,6 +3369,9 @@ editHandlers.compositionend = (view, event) => {
     if (view.composing) {
         view.input.composing = false;
         view.input.compositionEndedAt = event.timeStamp;
+        view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0;
+        if (view.input.compositionPendingChanges)
+            Promise.resolve().then(() => view.domObserver.flush());
         view.input.compositionID++;
         scheduleComposeEnd(view, 20);
     }
@@ -4432,15 +4476,19 @@ class DOMObserver {
             return true;
         }
     }
+    pendingRecords() {
+        if (this.observer)
+            for (let mut of this.observer.takeRecords())
+                this.queue.push(mut);
+        return this.queue;
+    }
     flush() {
         let { view } = this;
         if (!view.docView || this.flushingSoon > -1)
             return;
-        let mutations = this.observer ? this.observer.takeRecords() : [];
-        if (this.queue.length) {
-            mutations = this.queue.concat(mutations);
-            this.queue.length = 0;
-        }
+        let mutations = this.pendingRecords();
+        if (mutations.length)
+            this.queue = [];
         let sel = view.domSelectionRange();
         let newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel);
         let from = -1, to = -1, typeOver = false, added = [];
@@ -4661,6 +4709,8 @@ function ruleFromNode(dom) {
 }
 const isInline = /^(a|abbr|acronym|b|bd[io]|big|br|button|cite|code|data(list)?|del|dfn|em|i|ins|kbd|label|map|mark|meter|output|q|ruby|s|samp|small|span|strong|su[bp]|time|u|tt|var)$/i;
 function readDOMChange(view, from, to, typeOver, addedNodes) {
+    let compositionID = view.input.compositionPendingChanges || (view.composing ? view.input.compositionID : 0);
+    view.input.compositionPendingChanges = 0;
     if (from < 0) {
         let origin = view.input.lastSelectionTime > Date.now() - 50 ? view.input.lastSelectionOrigin : null;
         let newSel = selectionFromDOM(view, origin);
@@ -4674,8 +4724,8 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
                 tr.setMeta("pointer", true);
             else if (origin == "key")
                 tr.scrollIntoView();
-            if (view.composing)
-                tr.setMeta("composition", view.input.compositionID);
+            if (compositionID)
+                tr.setMeta("composition", compositionID);
             view.dispatch(tr);
         }
         return;
@@ -4716,8 +4766,8 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
                 let sel = resolveSelection(view, view.state.doc, parse.sel);
                 if (sel && !sel.eq(view.state.selection)) {
                     let tr = view.state.tr.setSelection(sel);
-                    if (view.composing)
-                        tr.setMeta("composition", view.input.compositionID);
+                    if (compositionID)
+                        tr.setMeta("composition", compositionID);
                     view.dispatch(tr);
                 }
             }
@@ -4850,8 +4900,8 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
     }
     if (storedMarks)
         tr.ensureMarks(storedMarks);
-    if (view.composing)
-        tr.setMeta("composition", view.input.compositionID);
+    if (compositionID)
+        tr.setMeta("composition", compositionID);
     view.dispatch(tr.scrollIntoView());
 }
 function resolveSelection(view, doc, parsedSel) {

package/package.json

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

package/src/capturekeys.ts

@@ -1,7 +1,7 @@
 import {Selection, NodeSelection, TextSelection, AllSelection, EditorState} from "prosemirror-state"
 import {EditorView} from "./index"
 import * as browser from "./browser"
-import {domIndex, selectionCollapsed} from "./dom"
+import {domIndex, selectionCollapsed, hasBlockDesc} from "./dom"
 import {selectionToDOM} from "./selection"
 
 function moveSelectionBlock(state: EditorState, dir: number) {
@@ -55,6 +55,7 @@ function nodeLen(node: Node) {
 }
 
 function isIgnorable(dom: Node) {
+  if ((dom as HTMLElement).contentEditable == "false") return true
   let desc = dom.pmViewDesc
   return desc && desc.size == 0 && (dom.nextSibling || dom.nodeName != "BR")
 }
@@ -156,7 +157,42 @@ function isBlockNode(dom: Node) {
   return desc && desc.node && desc.node.isBlock
 }
 
+function textNodeAfter(node: Node | null, offset: number): Text | undefined {
+  while (node && offset == node.childNodes.length && !hasBlockDesc(node)) {
+    offset = domIndex(node) + 1
+    node = node.parentNode
+  }
+  while (node && offset < node.childNodes.length) {
+    node = node.childNodes[offset]
+    if (node.nodeType == 3) return node as Text
+    offset = 0
+  }
+}
+
+function textNodeBefore(node: Node | null, offset: number): Text | undefined {
+  while (node && !offset && !hasBlockDesc(node)) {
+    offset = domIndex(node)
+    node = node.parentNode
+  }
+  while (node && offset) {
+    node = node.childNodes[offset - 1]
+    if (node.nodeType == 3) return node as Text
+    offset = node.childNodes.length
+  }
+}
+
 function setSelFocus(view: EditorView, node: Node, offset: number) {
+  if (node.nodeType != 3) {
+    let before, after
+    if (after = textNodeAfter(node, offset)) {
+      node = after
+      offset = 0
+    } else if (before = textNodeBefore(node, offset)) {
+      node = before
+      offset = before.nodeValue!.length
+    }
+  }
+
   let sel = view.domSelection()
   if (selectionCollapsed(sel)) {
     let range = document.createRange()

package/src/dom.ts

@@ -74,7 +74,7 @@ export function isOnEdge(node: Node, offset: number, parent: Node) {
   }
 }
 
-function hasBlockDesc(dom: Node) {
+export function hasBlockDesc(dom: Node) {
   let desc
   for (let cur: Node | null = dom; cur; cur = cur.parentNode) if (desc = cur.pmViewDesc) break
   return desc && desc.node && desc.node.isBlock && (desc.dom == dom || desc.contentDOM == dom)

package/src/domchange.ts

@@ -79,6 +79,9 @@ function ruleFromNode(dom: DOMNode): ParseRule | null {
 const isInline = /^(a|abbr|acronym|b|bd[io]|big|br|button|cite|code|data(list)?|del|dfn|em|i|ins|kbd|label|map|mark|meter|output|q|ruby|s|samp|small|span|strong|su[bp]|time|u|tt|var)$/i
 
 export function readDOMChange(view: EditorView, from: number, to: number, typeOver: boolean, addedNodes: readonly DOMNode[]) {
+  let compositionID = view.input.compositionPendingChanges || (view.composing ? view.input.compositionID : 0)
+  view.input.compositionPendingChanges = 0
+  
   if (from < 0) {
     let origin = view.input.lastSelectionTime > Date.now() - 50 ? view.input.lastSelectionOrigin : null
     let newSel = selectionFromDOM(view, origin)
@@ -90,7 +93,7 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
       let tr = view.state.tr.setSelection(newSel)
       if (origin == "pointer") tr.setMeta("pointer", true)
       else if (origin == "key") tr.scrollIntoView()
-      if (view.composing) tr.setMeta("composition", view.input.compositionID)
+      if (compositionID) tr.setMeta("composition", compositionID)
       view.dispatch(tr)
     }
     return
@@ -133,7 +136,7 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
         let sel = resolveSelection(view, view.state.doc, parse.sel)
         if (sel && !sel.eq(view.state.selection)) {
           let tr = view.state.tr.setSelection(sel)
-          if (view.composing) tr.setMeta("composition", view.input.compositionID)
+          if (compositionID) tr.setMeta("composition", compositionID)
           view.dispatch(tr)
         }
       }
@@ -268,7 +271,7 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
       tr.setSelection(sel)
   }
   if (storedMarks) tr.ensureMarks(storedMarks)
-  if (view.composing) tr.setMeta("composition", view.input.compositionID)
+  if (compositionID) tr.setMeta("composition", compositionID)
   view.dispatch(tr.scrollIntoView())
 }
 

package/src/domcoords.ts

@@ -37,7 +37,9 @@ export function scrollRectIntoView(view: EditorView, rect: Rect, startDOM: Node)
     if (rect.top < bounding.top + getSide(scrollThreshold, "top"))
       moveY = -(bounding.top - rect.top + getSide(scrollMargin, "top"))
     else if (rect.bottom > bounding.bottom - getSide(scrollThreshold, "bottom"))
-      moveY = rect.bottom - bounding.bottom + getSide(scrollMargin, "bottom")
+      moveY = rect.bottom - rect.top > bounding.bottom - bounding.top
+        ? rect.top + getSide(scrollMargin, "top") - bounding.top
+        : rect.bottom - bounding.bottom + getSide(scrollMargin, "bottom")
     if (rect.left < bounding.left + getSide(scrollThreshold, "left"))
       moveX = -(bounding.left - rect.left + getSide(scrollMargin, "left"))
     else if (rect.right > bounding.right - getSide(scrollThreshold, "right"))

package/src/domobserver.ts

@@ -157,14 +157,16 @@ export class DOMObserver {
     }
   }
 
+  pendingRecords() {
+    if (this.observer) for (let mut of this.observer.takeRecords()) this.queue.push(mut)
+    return this.queue
+  }
+
   flush() {
     let {view} = this
     if (!view.docView || this.flushingSoon > -1) return
-    let mutations = this.observer ? this.observer.takeRecords() : []
-    if (this.queue.length) {
-      mutations = this.queue.concat(mutations)
-      this.queue.length = 0
-    }
+    let mutations = this.pendingRecords()
+    if (mutations.length) this.queue = []
 
     let sel = view.domSelectionRange()
     let newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel)

package/src/input.ts

@@ -34,6 +34,8 @@ export class InputState {
   compositionNodes: ViewDesc[] = []
   compositionEndedAt = -2e8
   compositionID = 1
+  // Set to a composition ID when there are pending changes at compositionend
+  compositionPendingChanges = 0
   domChangeCount = 0
   eventHandlers: {[event: string]: (event: Event) => void} = Object.create(null)
   hideSelectionGuard: (() => void) | null = null
@@ -487,6 +489,8 @@ editHandlers.compositionend = (view, event) => {
   if (view.composing) {
     view.input.composing = false
     view.input.compositionEndedAt = event.timeStamp
+    view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0
+    if (view.input.compositionPendingChanges) Promise.resolve().then(() => view.domObserver.flush())
     view.input.compositionID++
     scheduleComposeEnd(view, 20)
   }