prosemirror-view 1.26.5 → 1.27.2

package/dist/index.js

@@ -458,7 +458,7 @@ function coordsAtPos(view, pos, side) {
             else {
                 to++;
             }
-            return flattenV(singleRect(textRange(node, from, to), takeSide), takeSide < 0);
+            return flattenV(singleRect(textRange(node, from, to), 1), takeSide < 0);
         }
     }
     let $dom = view.state.doc.resolve(pos - (atom || 0));
@@ -1242,7 +1242,7 @@ class NodeViewDesc extends ViewDesc {
         let composition = view.composing ? this.localCompositionInfo(view, pos) : null;
         let localComposition = composition && composition.pos > -1 ? composition : null;
         let compositionInChild = composition && composition.pos < 0;
-        let updater = new ViewTreeUpdater(this, localComposition && localComposition.node);
+        let updater = new ViewTreeUpdater(this, localComposition && localComposition.node, view);
         iterDeco(this.node, this.innerDeco, (widget, i, insideNode) => {
             if (widget.spec.marks)
                 updater.syncToMarks(widget.spec.marks, inline, view);
@@ -1624,8 +1624,9 @@ function rm(dom) {
 // Helper class for incrementally updating a tree of mark descs and
 // the widget and node descs inside of them.
 class ViewTreeUpdater {
-    constructor(top, lock) {
+    constructor(top, lock, view) {
         this.lock = lock;
+        this.view = view;
         // Index into `this.top`'s child array, represents the current
         // update position.
         this.index = 0;
@@ -1799,7 +1800,8 @@ class ViewTreeUpdater {
         }
         if (!lastChild || // Empty textblock
             !(lastChild instanceof TextViewDesc) ||
-            /\n$/.test(lastChild.node.text)) {
+            /\n$/.test(lastChild.node.text) ||
+            (this.view.requiresGeckoHackNode && /\s$/.test(lastChild.node.text))) {
             // Avoid bugs in Safari's cursor drawing (#1165) and Chrome's mouse selection (#1152)
             if ((safari || chrome) && lastChild && lastChild.dom.contentEditable == "false")
                 this.addHackNode("IMG", parent);
@@ -2772,7 +2774,8 @@ function addContext(slice, context) {
 // A collection of DOM events that occur within the editor, and callback functions
 // to invoke when the event fires.
 const handlers = {};
-let editHandlers = {};
+const editHandlers = {};
+const passiveHandlers = { touchstart: true, touchmove: true };
 class InputState {
     constructor() {
         this.shiftKey = false;
@@ -2784,6 +2787,8 @@ class InputState {
         this.lastSelectionTime = 0;
         this.lastIOSEnter = 0;
         this.lastIOSEnterFallbackTimeout = -1;
+        this.lastFocus = 0;
+        this.lastTouch = 0;
         this.lastAndroidDelete = 0;
         this.composing = false;
         this.composingTimeout = -1;
@@ -2801,7 +2806,7 @@ function initInput(view) {
             if (eventBelongsToView(view, event) && !runCustomHandler(view, event) &&
                 (view.editable || !(event.type in editHandlers)))
                 handler(view, event);
-        });
+        }, passiveHandlers[event] ? { passive: true } : undefined);
     }
     // On Safari, for reasons beyond my understanding, adding an input
     // event handler makes an issue where the composition vanishes when
@@ -3106,6 +3111,7 @@ class MouseDown {
         let pos = this.pos;
         if (this.view.state.doc != this.startDoc)
             pos = this.view.posAtCoords(eventCoords(event));
+        this.updateAllowDefault(event);
         if (this.allowDefault || !pos) {
             setSelectionOrigin(this.view, "pointer");
         }
@@ -3133,18 +3139,26 @@ class MouseDown {
         }
     }
     move(event) {
-        if (!this.allowDefault && (Math.abs(this.event.x - event.clientX) > 4 ||
-            Math.abs(this.event.y - event.clientY) > 4))
-            this.allowDefault = true;
+        this.updateAllowDefault(event);
         setSelectionOrigin(this.view, "pointer");
         if (event.buttons == 0)
             this.done();
     }
+    updateAllowDefault(event) {
+        if (!this.allowDefault && (Math.abs(this.event.x - event.clientX) > 4 ||
+            Math.abs(this.event.y - event.clientY) > 4))
+            this.allowDefault = true;
+    }
 }
-handlers.touchdown = view => {
+handlers.touchstart = view => {
+    view.input.lastTouch = Date.now();
     forceDOMFlush(view);
     setSelectionOrigin(view, "pointer");
 };
+handlers.touchmove = view => {
+    view.input.lastTouch = Date.now();
+    setSelectionOrigin(view, "pointer");
+};
 handlers.contextmenu = view => forceDOMFlush(view);
 function inOrNearComposition(view, event) {
     if (view.composing)
@@ -3396,8 +3410,6 @@ editHandlers.drop = (view, _event) => {
     if (!eventPos)
         return;
     let $mouse = view.state.doc.resolve(eventPos.pos);
-    if (!$mouse)
-        return;
     let slice = dragging && dragging.slice;
     if (slice) {
         view.someProp("transformPasted", f => { slice = f(slice); });
@@ -3442,6 +3454,7 @@ editHandlers.drop = (view, _event) => {
     view.dispatch(tr.setMeta("uiEvent", "drop"));
 };
 handlers.focus = view => {
+    view.input.lastFocus = Date.now();
     if (!view.focused) {
         view.domObserver.stop();
         view.dom.classList.add("ProseMirror-focused");
@@ -3956,23 +3969,27 @@ function mapChildren(oldChildren, newLocal, mapping, node, offset, oldOffset, op
     let children = oldChildren.slice();
     // Mark the children that are directly touched by changes, and
     // move those that are after the changes.
-    let shift = (oldStart, oldEnd, newStart, newEnd) => {
-        for (let i = 0; i < children.length; i += 3) {
-            let end = children[i + 1], dSize;
-            if (end < 0 || oldStart > end + oldOffset)
-                continue;
-            let start = children[i] + oldOffset;
-            if (oldEnd >= start) {
-                children[i + 1] = oldStart <= start ? -2 : -1;
-            }
-            else if (newStart >= offset && (dSize = (newEnd - newStart) - (oldEnd - oldStart))) {
-                children[i] += dSize;
-                children[i + 1] += dSize;
+    for (let i = 0, baseOffset = oldOffset; i < mapping.maps.length; i++) {
+        let moved = 0;
+        mapping.maps[i].forEach((oldStart, oldEnd, newStart, newEnd) => {
+            let dSize = (newEnd - newStart) - (oldEnd - oldStart);
+            for (let i = 0; i < children.length; i += 3) {
+                let end = children[i + 1];
+                if (end < 0 || oldStart > end + baseOffset - moved)
+                    continue;
+                let start = children[i] + baseOffset - moved;
+                if (oldEnd >= start) {
+                    children[i + 1] = oldStart <= start ? -2 : -1;
+                }
+                else if (newStart >= offset && dSize) {
+                    children[i] += dSize;
+                    children[i + 1] += dSize;
+                }
             }
-        }
-    };
-    for (let i = 0; i < mapping.maps.length; i++)
-        mapping.maps[i].forEach(shift);
+            moved += dSize;
+        });
+        baseOffset = mapping.maps[i].map(baseOffset, -1);
+    }
     // Find the child nodes that still correspond to a single node,
     // recursively call mapInner on them and update their positions.
     let mustRebuild = false;
@@ -4300,17 +4317,18 @@ class DOMObserver {
         }
     }
     flush() {
-        if (!this.view.docView || this.flushingSoon > -1)
+        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 sel = this.view.domSelection();
-        let newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(this.view) && !this.ignoreSelectionChange(sel);
+        let sel = view.domSelection();
+        let newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel);
         let from = -1, to = -1, typeOver = false, added = [];
-        if (this.view.editable) {
+        if (view.editable) {
             for (let i = 0; i < mutations.length; i++) {
                 let result = this.registerMutation(mutations[i], added);
                 if (result) {
@@ -4331,16 +4349,29 @@ class DOMObserver {
                     a.remove();
             }
         }
-        if (from > -1 || newSel) {
+        let readSel = null;
+        // If it looks like the browser has reset the selection to the
+        // start of the document after focus, restore the selection from
+        // the state
+        if (from < 0 && newSel && view.input.lastFocus > Date.now() - 200 &&
+            view.input.lastTouch < Date.now() - 300 &&
+            selectionCollapsed(sel) && (readSel = selectionFromDOM(view)) &&
+            readSel.eq(Selection.near(view.state.doc.resolve(0), 1))) {
+            view.input.lastFocus = 0;
+            selectionToDOM(view);
+            this.currentSelection.set(sel);
+            view.scrollToSelection();
+        }
+        else if (from > -1 || newSel) {
             if (from > -1) {
-                this.view.docView.markDirty(from, to);
-                checkCSS(this.view);
+                view.docView.markDirty(from, to);
+                checkCSS(view);
             }
             this.handleDOMChange(from, to, typeOver, added);
-            if (this.view.docView && this.view.docView.dirty)
-                this.view.updateState(this.view.state);
+            if (view.docView && view.docView.dirty)
+                view.updateState(view.state);
             else if (!this.currentSelection.eq(sel))
-                selectionToDOM(this.view);
+                selectionToDOM(view);
             this.currentSelection.set(sel);
         }
     }
@@ -4397,13 +4428,19 @@ class DOMObserver {
         }
     }
 }
-let cssChecked = false;
+let cssChecked = new WeakMap();
+let cssCheckWarned = false;
 function checkCSS(view) {
-    if (cssChecked)
+    if (cssChecked.has(view))
         return;
-    cssChecked = true;
-    if (getComputedStyle(view.dom).whiteSpace == "normal")
+    cssChecked.set(view, null);
+    if (['normal', 'nowrap', 'pre-line'].indexOf(getComputedStyle(view.dom).whiteSpace) !== -1) {
+        view.requiresGeckoHackNode = gecko;
+        if (cssCheckWarned)
+            return;
         console["warn"]("ProseMirror expects the CSS white-space property to be set, preferably to 'pre-wrap'. It is recommended to load style/prosemirror.css from the prosemirror-view package.");
+        cssCheckWarned = true;
+    }
 }
 
 // Note that all referencing and parsing is done with the
@@ -4499,13 +4536,6 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
     to = view.state.doc.resolve(to).after(shared + 1);
     let sel = view.state.selection;
     let parse = parseBetween(view, from, to);
-    // 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) {
-        let text = view.cursorWrapper.deco.type.toDOM.nextSibling;
-        let size = text && text.nodeValue ? text.nodeValue.length : 1;
-        parse.sel = { anchor: parse.sel.anchor + size, head: parse.sel.anchor + size };
-    }
     let doc = view.state.doc, compare = doc.slice(parse.from, parse.to);
     let preferredPos, preferredSide;
     // Prefer anchoring to end when Backspace is pressed
@@ -4540,6 +4570,13 @@ 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
@@ -4809,6 +4846,12 @@ class EditorView {
         this.prevDirectPlugins = [];
         this.pluginViews = [];
         /**
+        Holds `true` when a hack node is needed in Firefox to prevent the
+        [space is eaten issue](https://github.com/ProseMirror/prosemirror/issues/651)
+        @internal
+        */
+        this.requiresGeckoHackNode = false;
+        /**
         When editor content is being dragged, this object contains
         information about the dragged slice and whether it is being
         copied or moved. At any other time, it is null.
@@ -4959,21 +5002,27 @@ class EditorView {
             this.dom.scrollTop = 0;
         }
         else if (scroll == "to selection") {
-            let startDOM = this.domSelection().focusNode;
-            if (this.someProp("handleScrollToSelection", f => f(this))) ;
-            else if (state.selection instanceof NodeSelection) {
-                let target = this.docView.domAfterPos(state.selection.from);
-                if (target.nodeType == 1)
-                    scrollRectIntoView(this, target.getBoundingClientRect(), startDOM);
-            }
-            else {
-                scrollRectIntoView(this, this.coordsAtPos(state.selection.head, 1), startDOM);
-            }
+            this.scrollToSelection();
         }
         else if (oldScrollPos) {
             resetScrollPos(oldScrollPos);
         }
     }
+    /**
+    @internal
+    */
+    scrollToSelection() {
+        let startDOM = this.domSelection().focusNode;
+        if (this.someProp("handleScrollToSelection", f => f(this))) ;
+        else if (this.state.selection instanceof NodeSelection) {
+            let target = this.docView.domAfterPos(this.state.selection.from);
+            if (target.nodeType == 1)
+                scrollRectIntoView(this, target.getBoundingClientRect(), startDOM);
+        }
+        else {
+            scrollRectIntoView(this, this.coordsAtPos(this.state.selection.head, 1), startDOM);
+        }
+    }
     destroyPluginViews() {
         let view;
         while (view = this.pluginViews.pop())

package/package.json

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

package/src/decoration.ts

@@ -550,20 +550,25 @@ function mapChildren(
 
   // Mark the children that are directly touched by changes, and
   // move those that are after the changes.
-  let shift = (oldStart: number, oldEnd: number, newStart: number, newEnd: number) => {
-    for (let i = 0; i < children.length; i += 3) {
-      let end = children[i + 1] as number, dSize
-      if (end < 0 || oldStart > end + oldOffset) continue
-      let start = (children[i] as number) + oldOffset
-      if (oldEnd >= start) {
-        children[i + 1] = oldStart <= start ? -2 : -1
-      } else if (newStart >= offset && (dSize = (newEnd - newStart) - (oldEnd - oldStart))) {
-        ;(children[i] as number) += dSize
-        ;(children[i + 1] as number) += dSize
+  for (let i = 0, baseOffset = oldOffset; i < mapping.maps.length; i++) {
+    let moved = 0
+    mapping.maps[i].forEach((oldStart: number, oldEnd: number, newStart: number, newEnd: number) => {
+      let dSize = (newEnd - newStart) - (oldEnd - oldStart)
+      for (let i = 0; i < children.length; i += 3) {
+        let end = children[i + 1] as number
+        if (end < 0 || oldStart > end + baseOffset - moved) continue
+        let start = (children[i] as number) + baseOffset - moved
+        if (oldEnd >= start) {
+          children[i + 1] = oldStart <= start ? -2 : -1
+        } else if (newStart >= offset && dSize) {
+          ;(children[i] as number) += dSize
+          ;(children[i + 1] as number) += dSize
+        }
       }
-    }
+      moved += dSize
+    })
+    baseOffset = mapping.maps[i].map(baseOffset, -1)
   }
-  for (let i = 0; i < mapping.maps.length; i++) mapping.maps[i].forEach(shift)
 
   // Find the child nodes that still correspond to a single node,
   // recursively call mapInner on them and update their positions.

package/src/domchange.ts

@@ -97,14 +97,6 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
   let sel = view.state.selection
   let parse = parseBetween(view, from, to)
 
-  // 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) {
-    let text = (view.cursorWrapper.deco.type as any).toDOM.nextSibling as DOMNode
-    let size = text && text.nodeValue ? text.nodeValue.length : 1
-    parse.sel = {anchor: parse.sel.anchor + size, head: parse.sel.anchor + size}
-  }
-
   let doc = view.state.doc, compare = doc.slice(parse.from, parse.to)
   let preferredPos, preferredSide: "start" | "end"
   // Prefer anchoring to end when Backspace is pressed
@@ -137,6 +129,14 @@ 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
   // the start or end of the selected content, creating a change

package/src/domcoords.ts

@@ -341,7 +341,7 @@ export function coordsAtPos(view: EditorView, pos: number, side: number): Rect {
       else if (side >= 0 && offset == node.nodeValue!.length) { from--; takeSide = 1 }
       else if (side < 0) { from-- }
       else { to ++ }
-      return flattenV(singleRect(textRange(node as Text, from, to), takeSide), takeSide < 0)
+      return flattenV(singleRect(textRange(node as Text, from, to), 1), takeSide < 0)
     }
   }
 

package/src/domobserver.ts

@@ -1,6 +1,7 @@
+import {Selection} from "prosemirror-state"
 import * as browser from "./browser"
-import {domIndex, isEquivalentPosition} from "./dom"
-import {hasFocusAndSelection, selectionToDOM} from "./selection"
+import {domIndex, isEquivalentPosition, selectionCollapsed, DOMSelection} from "./dom"
+import {hasFocusAndSelection, selectionToDOM, selectionFromDOM} from "./selection"
 import {EditorView} from "./index"
 
 const observeOptions = {
@@ -20,7 +21,7 @@ class SelectionState {
   focusNode: Node | null = null
   focusOffset: number = 0
 
-  set(sel: Selection) {
+  set(sel: DOMSelection) {
     this.anchorNode = sel.anchorNode; this.anchorOffset = sel.anchorOffset
     this.focusNode = sel.focusNode; this.focusOffset = sel.focusOffset
   }
@@ -29,7 +30,7 @@ class SelectionState {
     this.anchorNode = this.focusNode = null
   }
 
-  eq(sel: Selection) {
+  eq(sel: DOMSelection) {
     return sel.anchorNode == this.anchorNode && sel.anchorOffset == this.anchorOffset &&
       sel.focusNode == this.focusNode && sel.focusOffset == this.focusOffset
   }
@@ -138,7 +139,7 @@ export class DOMObserver {
     this.currentSelection.set(this.view.domSelection())
   }
 
-  ignoreSelectionChange(sel: Selection) {
+  ignoreSelectionChange(sel: DOMSelection) {
     if (sel.rangeCount == 0) return true
     let container = sel.getRangeAt(0).commonAncestorContainer
     let desc = this.view.docView.nearestDesc(container)
@@ -152,18 +153,19 @@ export class DOMObserver {
   }
 
   flush() {
-    if (!this.view.docView || this.flushingSoon > -1) return
+    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 sel = this.view.domSelection()
-    let newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(this.view) && !this.ignoreSelectionChange(sel)
+    let sel = view.domSelection()
+    let newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel)
 
     let from = -1, to = -1, typeOver = false, added: Node[] = []
-    if (this.view.editable) {
+    if (view.editable) {
       for (let i = 0; i < mutations.length; i++) {
         let result = this.registerMutation(mutations[i], added)
         if (result) {
@@ -183,14 +185,26 @@ export class DOMObserver {
       }
     }
 
-    if (from > -1 || newSel) {
+    let readSel: Selection | null = null
+    // If it looks like the browser has reset the selection to the
+    // start of the document after focus, restore the selection from
+    // the state
+    if (from < 0 && newSel && view.input.lastFocus > Date.now() - 200 &&
+        view.input.lastTouch < Date.now() - 300 &&
+        selectionCollapsed(sel) && (readSel = selectionFromDOM(view)) &&
+        readSel.eq(Selection.near(view.state.doc.resolve(0), 1))) {
+      view.input.lastFocus = 0
+      selectionToDOM(view)
+      this.currentSelection.set(sel)
+      view.scrollToSelection()
+    } else if (from > -1 || newSel) {
       if (from > -1) {
-        this.view.docView.markDirty(from, to)
-        checkCSS(this.view)
+        view.docView.markDirty(from, to)
+        checkCSS(view)
       }
       this.handleDOMChange(from, to, typeOver, added)
-      if (this.view.docView && this.view.docView.dirty) this.view.updateState(this.view.state)
-      else if (!this.currentSelection.eq(sel)) selectionToDOM(this.view)
+      if (view.docView && view.docView.dirty) view.updateState(view.state)
+      else if (!this.currentSelection.eq(sel)) selectionToDOM(view)
       this.currentSelection.set(sel)
     }
   }
@@ -243,11 +257,16 @@ export class DOMObserver {
   }
 }
 
-let cssChecked = false
+let cssChecked: WeakMap<EditorView, null> = new WeakMap()
+let cssCheckWarned: boolean = false
 
 function checkCSS(view: EditorView) {
-  if (cssChecked) return
-  cssChecked = true
-  if (getComputedStyle(view.dom).whiteSpace == "normal")
+  if (cssChecked.has(view)) return
+  cssChecked.set(view, null)
+  if (['normal', 'nowrap', 'pre-line'].indexOf(getComputedStyle(view.dom).whiteSpace) !== -1) {
+    view.requiresGeckoHackNode = browser.gecko
+    if (cssCheckWarned) return
     console["warn"]("ProseMirror expects the CSS white-space property to be set, preferably to 'pre-wrap'. It is recommended to load style/prosemirror.css from the prosemirror-view package.")
+    cssCheckWarned = true
+  }
 }