prosemirror-view 1.27.0 → 1.27.1

package/src/decoration.ts

@@ -550,20 +550,24 @@ 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; 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 + oldOffset - moved) continue
+        let start = (children[i] as number) + oldOffset - 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
+    })
   }
-  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/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
+  }
 }

package/src/index.ts

@@ -53,6 +53,10 @@ export class EditorView {
   private pluginViews: PluginView[] = []
   /// @internal
   domObserver!: DOMObserver
+  /// 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
+  requiresGeckoHackNode: boolean = false
 
   /// The view's current [state](#state.EditorState).
   public state: EditorState
@@ -214,20 +218,25 @@ export class EditorView {
     if (scroll == "reset") {
       this.dom.scrollTop = 0
     } else if (scroll == "to selection") {
-      let startDOM = this.domSelection().focusNode!
-      if (this.someProp("handleScrollToSelection", f => f(this))) {
-        // Handled
-      } else if (state.selection instanceof NodeSelection) {
-        let target = this.docView.domAfterPos(state.selection.from)
-        if (target.nodeType == 1) scrollRectIntoView(this, (target as HTMLElement).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))) {
+      // Handled
+    } else if (this.state.selection instanceof NodeSelection) {
+      let target = this.docView.domAfterPos(this.state.selection.from)
+      if (target.nodeType == 1) scrollRectIntoView(this, (target as HTMLElement).getBoundingClientRect(), startDOM)
+    } else {
+      scrollRectIntoView(this, this.coordsAtPos(this.state.selection.head, 1), startDOM)
+    }
+  }
+
   private destroyPluginViews() {
     let view
     while (view = this.pluginViews.pop()) if (view.destroy) view.destroy()
@@ -623,8 +632,8 @@ export interface EditorProps<P = any> {
   /// The `plain` flag will be true when the text is pasted as plain text.
   clipboardTextParser?: (this: P, text: string, $context: ResolvedPos, plain: boolean) => Slice
 
-  /// Can be used to transform pasted content before it is applied to
-  /// the document.
+  /// Can be used to transform pasted or dragged-and-dropped content
+  /// before it is applied to the document.
   transformPasted?: (this: P, slice: Slice) => Slice
 
   /// Allows you to pass custom rendering and behavior logic for

package/src/input.ts

@@ -13,7 +13,8 @@ import {ViewDesc} from "./viewdesc"
 // A collection of DOM events that occur within the editor, and callback functions
 // to invoke when the event fires.
 const handlers: {[event: string]: (view: EditorView, event: Event) => void} = {}
-let editHandlers: {[event: string]: (view: EditorView, event: Event) => void} = {}
+const editHandlers: {[event: string]: (view: EditorView, event: Event) => void} = {}
+const passiveHandlers: Record<string, boolean> = {touchstart: true, touchmove: true}
 
 export class InputState {
   shiftKey = false
@@ -25,6 +26,8 @@ export class InputState {
   lastSelectionTime = 0
   lastIOSEnter = 0
   lastIOSEnterFallbackTimeout = -1
+  lastFocus = 0
+  lastTouch = 0
   lastAndroidDelete = 0
   composing = false
   composingTimeout = -1
@@ -42,7 +45,7 @@ export function initInput(view: EditorView) {
       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
@@ -403,11 +406,17 @@ class MouseDown {
   }
 }
 
-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: EditorView, event: Event) {
@@ -650,7 +659,6 @@ editHandlers.drop = (view, _event) => {
   let eventPos = view.posAtCoords(eventCoords(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!) })
@@ -695,6 +703,7 @@ editHandlers.drop = (view, _event) => {
 }
 
 handlers.focus = view => {
+  view.input.lastFocus = Date.now()
   if (!view.focused) {
     view.domObserver.stop()
     view.dom.classList.add("ProseMirror-focused")

package/src/viewdesc.ts

@@ -709,7 +709,7 @@ export 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)
@@ -1109,7 +1109,7 @@ class ViewTreeUpdater {
   preMatch: {index: number, matched: Map<ViewDesc, number>, matches: readonly ViewDesc[]}
   top: ViewDesc
 
-  constructor(top: NodeViewDesc, readonly lock: DOMNode | null) {
+  constructor(top: NodeViewDesc, readonly lock: DOMNode | null, private readonly view: EditorView) {
     this.top = top
     this.preMatch = preMatch(top.node.content, top)
   }
@@ -1273,7 +1273,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 ((browser.safari || browser.chrome) && lastChild && (lastChild.dom as HTMLElement).contentEditable == "false")
         this.addHackNode("IMG", parent)