prosemirror-view 1.27.0 → 1.28.0

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()
@@ -283,6 +292,21 @@ export class EditorView {
 
   /// Query whether the view has focus.
   hasFocus() {
+    // Work around IE not handling focus correctly if resize handles are shown.
+    // If the cursor is inside an element with resize handles, activeElement
+    // will be that element instead of this.dom.
+    if (browser.ie) {
+      // If activeElement is within this.dom, and there are no other elements
+      // setting `contenteditable` to false in between, treat it as focused.
+      let node = this.root.activeElement
+      if (node == this.dom) return true
+      if (!node || !this.dom.contains(node)) return false
+      while (node && this.dom != node && this.dom.contains(node)) {
+        if ((node as HTMLElement).contentEditable == 'false') return false
+        node = node.parentElement
+      }
+      return true
+    }
     return this.root.activeElement == this.dom
   }
 
@@ -623,10 +647,14 @@ 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
 
+  /// Can be used to transform copied or cut content before it is
+  /// serialized to the clipboard.
+  transformCopied?: (this: P, slice: Slice) => Slice
+
   /// Allows you to pass custom rendering and behavior logic for
   /// nodes. Should map node names to constructor functions that
   /// produce a [`NodeView`](#view.NodeView) object implementing the

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
@@ -369,6 +372,7 @@ class MouseDown {
     let pos: {pos: number, inside: number} | null = 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")
     } else if (handleSingleClick(this.view, pos.pos, pos.inside, event, this.selectNode)) {
@@ -384,7 +388,7 @@ class MouseDown {
                 // (hidden) cursor is doesn't change the selection, and
                 // thus doesn't get a reaction from ProseMirror. This
                 // works around that.
-                (browser.chrome && !(this.view.state.selection instanceof TextSelection) &&
+                (browser.chrome && !this.view.state.selection.visible &&
                  Math.min(Math.abs(pos.pos - this.view.state.selection.from),
                           Math.abs(pos.pos - this.view.state.selection.to)) <= 2))) {
       updateSelection(this.view, Selection.near(this.view.state.doc.resolve(pos.pos)), "pointer")
@@ -395,19 +399,29 @@ class MouseDown {
   }
 
   move(event: MouseEvent) {
-    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: MouseEvent) {
+    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: EditorView, event: Event) {
@@ -650,7 +664,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 +708,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/selection.ts

@@ -181,7 +181,7 @@ export function selectionBetween(view: EditorView, $anchor: ResolvedPos, $head:
 }
 
 export function hasFocusAndSelection(view: EditorView) {
-  if (view.editable && view.root.activeElement != view.dom) return false
+  if (view.editable && !view.hasFocus()) return false
   return hasSelection(view)
 }
 

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)