prosemirror-view 1.41.7 → 1.41.9

package/src/input.ts

@@ -66,6 +66,7 @@ function setSelectionOrigin(view: EditorView, origin: string) {
 }
 
 export function destroyInput(view: EditorView) {
+  if (view.input.mouseDown) view.input.mouseDown.done()
   view.domObserver.stop()
   for (let type in view.input.eventHandlers)
     view.dom.removeEventListener(type, view.input.eventHandlers[type])
@@ -246,27 +247,28 @@ function handleTripleClick(view: EditorView, pos: number, inside: number, event:
 
 function defaultTripleClick(view: EditorView, inside: number, event: MouseEvent) {
   if (event.button != 0) return false
+  let selection = selectionForTripleClick(view, inside, true), doc = view.state.doc
+  if (!selection) return false
+  updateSelection(view, selection, "pointer")
+  if (selection instanceof TextSelection && doc.eq(view.state.doc))
+    view.input.mouseDown = new TripleClickDrag(view, selection)
+  return true
+}
+
+function selectionForTripleClick(view: EditorView, inside: number, selectNodes: boolean): Selection | null {
   let doc = view.state.doc
-  if (inside == -1) {
-    if (doc.inlineContent) {
-      updateSelection(view, TextSelection.create(doc, 0, doc.content.size), "pointer")
-      return true
-    }
-    return false
-  }
+  if (inside == -1) return doc.inlineContent ? TextSelection.create(doc, 0, doc.content.size) : null
 
   let $pos = doc.resolve(inside)
   for (let i = $pos.depth + 1; i > 0; i--) {
     let node = i > $pos.depth ? $pos.nodeAfter! : $pos.node(i)
     let nodePos = $pos.before(i)
     if (node.inlineContent)
-      updateSelection(view, TextSelection.create(doc, nodePos + 1, nodePos + 1 + node.content.size), "pointer")
-    else if (NodeSelection.isSelectable(node))
-      updateSelection(view, NodeSelection.create(doc, nodePos), "pointer")
-    else
-      continue
-    return true
+      return TextSelection.create(doc, nodePos + 1, nodePos + 1 + node.content.size)
+    else if (selectNodes && NodeSelection.isSelectable(node))
+      return NodeSelection.create(doc, nodePos)
   }
+  return null
 }
 
 function forceDOMFlush(view: EditorView) {
@@ -287,12 +289,13 @@ handlers.mousedown = (view, _event) => {
   }
   view.input.lastClick = {time: now, x: event.clientX, y: event.clientY, type, button: event.button}
 
+  if (view.input.mouseDown) view.input.mouseDown.done()
+
   let pos = view.posAtCoords(eventCoords(event))
   if (!pos) return
 
   if (type == "singleClick") {
-    if (view.input.mouseDown) view.input.mouseDown.done()
-    view.input.mouseDown = new MouseDown(view, pos, event, !!flushed)
+    view.input.mouseDown = new LeftMouseDown(view, pos, event, !!flushed)
   } else if ((type == "doubleClick" ? handleDoubleClick : handleTripleClick)(view, pos.pos, pos.inside, event)) {
     event.preventDefault()
   } else {
@@ -300,20 +303,46 @@ handlers.mousedown = (view, _event) => {
   }
 }
 
-class MouseDown {
+
+abstract class MouseDown {
+  mightDrag: {node: Node, pos: number, addAttr: boolean, setUneditable: boolean} | null = null
+
+  constructor(readonly view: EditorView) {
+    view.root.addEventListener("mouseup", this.up = this.up.bind(this) as any)
+    view.root.addEventListener("mousemove", this.move = this.move.bind(this) as any)
+  }
+
+  up(event: MouseEvent) {
+    this.done()
+  }
+
+  move(event: MouseEvent) {
+    if (event.buttons == 0) this.done()
+  }
+
+  done() {
+    this.view.root.removeEventListener("mouseup", this.up as any)
+    this.view.root.removeEventListener("mousemove", this.move as any)
+    if (this.view.input.mouseDown == this) this.view.input.mouseDown = null
+  }
+
+  delaySelUpdate() { return false }
+}
+
+class LeftMouseDown extends MouseDown {
   startDoc: Node
   selectNode: boolean
   allowDefault: boolean
   delayedSelectionSync = false
-  mightDrag: {node: Node, pos: number, addAttr: boolean, setUneditable: boolean} | null = null
   target: HTMLElement | null
 
   constructor(
-    readonly view: EditorView,
+    view: EditorView,
     readonly pos: {pos: number, inside: number},
     readonly event: MouseEvent,
     readonly flushed: boolean
   ) {
+    super(view)
     this.startDoc = view.state.doc
     this.selectNode = !!event[selectNodeModifier]
     this.allowDefault = event.shiftKey
@@ -334,8 +363,8 @@ class MouseDown {
 
     let {selection} = view.state
     if (event.button == 0 &&
-        targetNode.type.spec.draggable && targetNode.type.spec.selectable !== false ||
-        selection instanceof NodeSelection && selection.from <= targetPos && selection.to > targetPos)
+        (targetNode.type.spec.draggable && targetNode.type.spec.selectable !== false ||
+         selection instanceof NodeSelection && selection.from <= targetPos && selection.to > targetPos))
       this.mightDrag = {
         node: targetNode,
         pos: targetPos,
@@ -353,22 +382,20 @@ class MouseDown {
       this.view.domObserver.start()
     }
 
-    view.root.addEventListener("mouseup", this.up = this.up.bind(this) as any)
-    view.root.addEventListener("mousemove", this.move = this.move.bind(this) as any)
     setSelectionOrigin(view, "pointer")
   }
 
   done() {
-    this.view.root.removeEventListener("mouseup", this.up as any)
-    this.view.root.removeEventListener("mousemove", this.move as any)
+    super.done()
     if (this.mightDrag && this.target) {
       this.view.domObserver.stop()
       if (this.mightDrag.addAttr) this.target.removeAttribute("draggable")
       if (this.mightDrag.setUneditable) this.target.removeAttribute("contentEditable")
       this.view.domObserver.start()
     }
-    if (this.delayedSelectionSync) setTimeout(() => selectionToDOM(this.view))
-    this.view.input.mouseDown = null
+    if (this.delayedSelectionSync) setTimeout(() => {
+      if (!this.view.isDestroyed) selectionToDOM(this.view)
+    })
   }
 
   up(event: MouseEvent) {
@@ -409,7 +436,7 @@ class MouseDown {
   move(event: MouseEvent) {
     this.updateAllowDefault(event)
     setSelectionOrigin(this.view, "pointer")
-    if (event.buttons == 0) this.done()
+    super.move(event)
   }
 
   updateAllowDefault(event: MouseEvent) {
@@ -417,6 +444,39 @@ class MouseDown {
         Math.abs(this.event.y - event.clientY) > 4))
       this.allowDefault = true
   }
+
+  delaySelUpdate() {
+    if (!this.allowDefault) return false
+    this.delayedSelectionSync = true
+    return true
+  }
+}
+
+class TripleClickDrag extends MouseDown {
+  startDoc: Node
+
+  constructor(view: EditorView, readonly startSelection: TextSelection) {
+    super(view)
+    this.startDoc = view.state.doc
+  }
+
+  move(event: MouseEvent) {
+    if (event.buttons == 0 || this.view.isDestroyed || !this.view.state.doc.eq(this.startDoc)) {
+      this.done()
+      return
+    }
+
+    event.preventDefault()
+    setSelectionOrigin(this.view, "pointer")
+
+    let pos = this.view.posAtCoords(eventCoords(event))
+    let target = pos && selectionForTripleClick(this.view, pos.inside, false)
+    if (!target) return
+
+    let {doc} = this.view.state, start = this.startSelection
+    let [anchor, head] = target.from < start.from ? [start.to, target.from] : [start.from, target.to]
+    updateSelection(this.view, TextSelection.create(doc, anchor, head), "pointer")
+  }
 }
 
 handlers.touchstart = view => {
@@ -444,7 +504,7 @@ function inOrNearComposition(view: EditorView, event: Event) {
   // This guards against the case where compositionend is triggered without the keyboard
   // (e.g. character confirmation may be done with the mouse), and keydown is triggered
   // afterwards- we wouldn't want to ignore the keydown event in this case.
-  if (browser.safari && Math.abs(event.timeStamp - view.input.compositionEndedAt) < 500) {
+  if (browser.safari && Math.abs(Date.now() - view.input.compositionEndedAt) < 500) {
     view.input.compositionEndedAt = -2e8
     return true
   }
@@ -502,7 +562,7 @@ function selectionBeforeUneditable(view: EditorView) {
 editHandlers.compositionend = (view, event) => {
   if (view.composing) {
     view.input.composing = false
-    view.input.compositionEndedAt = event.timeStamp
+    view.input.compositionEndedAt = Date.now()
     view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0
     view.input.compositionNode = null
     if (view.input.badSafariComposition) view.domObserver.forceFlush()
@@ -520,7 +580,7 @@ function scheduleComposeEnd(view: EditorView, delay: number) {
 export function clearComposition(view: EditorView) {
   if (view.composing) {
     view.input.composing = false
-    view.input.compositionEndedAt = timestampFromCustomEvent()
+    view.input.compositionEndedAt = Date.now()
   }
   while (view.input.compositionNodes.length > 0) view.input.compositionNodes.pop()!.markParentsDirty()
 }
@@ -544,12 +604,6 @@ export function findCompositionNode(view: EditorView) {
   return textBefore || textAfter
 }
 
-function timestampFromCustomEvent() {
-  let event = document.createEvent("Event")
-  event.initEvent("event", true, true)
-  return event.timeStamp
-}
-
 /// @internal
 export function endComposition(view: EditorView, restarting = false) {
   if (browser.android && view.domObserver.flushingSoon >= 0) return
@@ -673,8 +727,9 @@ export class Dragging {
 const dragCopyModifier: keyof DragEvent = browser.mac ? "altKey" : "ctrlKey"
 
 function dragMoves(view: EditorView, event: DragEvent) {
-  let moves = view.someProp("dragCopies", test => !test(event))
-  return moves != null ? moves : !event[dragCopyModifier]
+  let copy: boolean | undefined
+  view.someProp("dragCopies", test => { copy = copy || test(event) })
+  return copy != null ? !copy : !event[dragCopyModifier]
 }
 
 handlers.dragstart = (view, _event) => {
@@ -701,7 +756,7 @@ handlers.dragstart = (view, _event) => {
   if (!event.dataTransfer.files.length || !browser.chrome || browser.chrome_version > 120)
     event.dataTransfer.clearData()
   event.dataTransfer.setData(brokenClipboardAPI ? "Text" : "text/html", dom.innerHTML)
-  // See https://github.com/ProseMirror/prosemirror/issues/1156
+  // See https://code.haverbeke.berlin/prosemirror/prosemirror/issues/1156
   event.dataTransfer.effectAllowed = "copyMove"
   if (!brokenClipboardAPI) event.dataTransfer.setData("text/plain", text)
   view.dragging = new Dragging(slice, dragMoves(view, event), node)

package/src/selection.ts

@@ -58,15 +58,15 @@ export function selectionToDOM(view: EditorView, force = false) {
 
   if (!editorOwnsSelection(view)) return
 
-  // The delayed drag selection causes issues with Cell Selections
-  // in Safari. And the drag selection delay is to workarond issues
-  // which only present in Chrome.
-  if (!force && view.input.mouseDown && view.input.mouseDown.allowDefault && browser.chrome) {
+  // Need to delay selection normalization during a native selection
+  // drag on Chrome, or it will cause further dragging to glitch.
+  let mouseDown = view.input.mouseDown
+  if (!force && browser.chrome && mouseDown) {
     let domSel = view.domSelectionRange(), curSel = view.domObserver.currentSelection
     if (domSel.anchorNode && curSel.anchorNode &&
         isEquivalentPosition(domSel.anchorNode, domSel.anchorOffset,
-                             curSel.anchorNode, curSel.anchorOffset)) {
-      view.input.mouseDown.delayedSelectionSync = true
+                             curSel.anchorNode, curSel.anchorOffset) &&
+        mouseDown.delaySelUpdate()) {
       view.domObserver.setCurSelection()
       return
     }

package/src/viewdesc.ts

@@ -30,7 +30,7 @@ export type ViewMutationRecord = MutationRecord | { type: "selection", target: D
 /// Objects returned as node views must conform to this interface.
 export interface NodeView {
   /// The outer DOM node that represents the document node.
-  dom: DOMNode
+  dom: HTMLElement
 
   /// The DOM node that should hold the node's content. Only meaningful
   /// if the node view also defines a `dom` property and if its node
@@ -99,7 +99,7 @@ export interface NodeView {
 /// Objects returned as mark views must conform to this interface.
 export interface MarkView {
   /// The outer DOM node that represents the document node.
-  dom: DOMNode
+  dom: HTMLElement
 
   /// The DOM node that should hold the mark's content. When this is not
   /// present, the `dom` property is used as the content DOM.
@@ -610,7 +610,7 @@ class CompositionViewDesc extends ViewDesc {
 // some cases they will be split more often than would appear
 // necessary.
 class MarkViewDesc extends ViewDesc {
-  constructor(parent: ViewDesc, readonly mark: Mark, dom: DOMNode, contentDOM: HTMLElement, readonly spec: MarkView) {
+  constructor(parent: ViewDesc, readonly mark: Mark, dom: HTMLElement, contentDOM: HTMLElement, readonly spec: MarkView) {
     super(parent, [], dom, contentDOM)
   }
 
@@ -697,13 +697,13 @@ export class NodeViewDesc extends ViewDesc {
       if (descObj.parent) return descObj.parent.posBeforeChild(descObj)
     }, outerDeco, innerDeco)
 
-    let dom = spec && spec.dom, contentDOM = spec && spec.contentDOM
+    let dom: DOMNode | undefined = spec && spec.dom, contentDOM = spec && spec.contentDOM
     if (node.isText) {
       if (!dom) dom = document.createTextNode(node.text!)
       else if (dom.nodeType != 3) throw new RangeError("Text must be rendered as a DOM text node")
     } else if (!dom) {
       let spec = (DOMSerializer.renderSpec as any)(document, node.type.spec.toDOM!(node), null, node.attrs)
-      ;({dom, contentDOM} = spec as {dom: DOMNode, contentDOM?: HTMLElement})
+      ;({dom, contentDOM} = spec as {dom: HTMLElement, contentDOM?: HTMLElement})
     }
     if (!contentDOM && !node.isText && dom.nodeName != "BR") { // Chrome gets confused by <br contenteditable=false>
       if (!(dom as HTMLElement).hasAttribute("contenteditable")) (dom as HTMLElement).contentEditable = "false"
@@ -714,8 +714,8 @@ export class NodeViewDesc extends ViewDesc {
     dom = applyOuterDeco(dom, outerDeco, node)
 
     if (spec)
-      return descObj = new CustomNodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM || null, nodeDOM,
-                                              spec, view, pos + 1)
+      return descObj = new CustomNodeViewDesc(parent, node, outerDeco, innerDeco, dom as HTMLElement, contentDOM || null,
+                                              nodeDOM as HTMLElement, spec, view, pos + 1)
     else if (node.isText)
       return new TextViewDesc(parent, node, outerDeco, innerDeco, dom, nodeDOM, view)
     else
@@ -985,7 +985,7 @@ class TrailingHackViewDesc extends ViewDesc {
 // customized.
 class CustomNodeViewDesc extends NodeViewDesc {
   constructor(parent: ViewDesc | undefined, node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource,
-              dom: DOMNode, contentDOM: HTMLElement | null, nodeDOM: DOMNode, readonly spec: NodeView,
+              dom: HTMLElement, contentDOM: HTMLElement | null, nodeDOM: HTMLElement, readonly spec: NodeView,
               view: EditorView, pos: number) {
     super(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, view, pos)
   }

package/style/prosemirror.css

@@ -23,7 +23,7 @@
 .ProseMirror-hideselection *::-moz-selection { background: transparent; }
 .ProseMirror-hideselection { caret-color: transparent; }
 
-/* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */
+/* See https://code.haverbeke.berlin/prosemirror/prosemirror/issues/1421#issuecomment-1759320191 */
 .ProseMirror [draggable][contenteditable=false] { user-select: text }
 
 .ProseMirror-selectednode {