prosemirror-view 1.41.8 → 1.42.0

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
@@ -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

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

@@ -105,6 +105,13 @@ export interface MarkView {
   /// present, the `dom` property is used as the content DOM.
   contentDOM?: HTMLElement | null
 
+  /// When given, this is called when the view is updating itself. It
+  /// will be given a mark (of the same type as the current one). When it
+  /// returns true, the existing DOM is kept and reused (its content is
+  /// still managed by ProseMirror); when it returns false, the mark view
+  /// is rebuilt.
+  update?: (mark: Mark) => boolean
+
   /// Called when a [mutation](#view.ViewMutationRecord) happens within the
   /// view. Return false if the editor should re-read the selection or re-parse
   /// the range around the mutation, true if it can safely be ignored.
@@ -610,7 +617,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: HTMLElement, contentDOM: HTMLElement, readonly spec: MarkView) {
+  constructor(parent: ViewDesc, public mark: Mark, dom: HTMLElement, contentDOM: HTMLElement, readonly spec: MarkView) {
     super(parent, [], dom, contentDOM)
   }
 
@@ -672,8 +679,6 @@ export class NodeViewDesc extends ViewDesc {
     dom: DOMNode,
     contentDOM: HTMLElement | null,
     readonly nodeDOM: DOMNode,
-    view: EditorView,
-    pos: number
   ) {
     super(parent, [], dom, contentDOM)
   }
@@ -715,11 +720,11 @@ export class NodeViewDesc extends ViewDesc {
 
     if (spec)
       return descObj = new CustomNodeViewDesc(parent, node, outerDeco, innerDeco, dom as HTMLElement, contentDOM || null,
-                                              nodeDOM as HTMLElement, spec, view, pos + 1)
+                                              nodeDOM as HTMLElement, spec)
     else if (node.isText)
-      return new TextViewDesc(parent, node, outerDeco, innerDeco, dom, nodeDOM, view)
+      return new TextViewDesc(parent, node, outerDeco, innerDeco, dom, nodeDOM)
     else
-      return new NodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM || null, nodeDOM, view, pos + 1)
+      return new NodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM || null, nodeDOM)
   }
 
   parseRule() {
@@ -906,15 +911,15 @@ export class NodeViewDesc extends ViewDesc {
 export function docViewDesc(doc: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource,
                             dom: HTMLElement, view: EditorView): NodeViewDesc {
   applyOuterDeco(dom, outerDeco, doc)
-  let docView = new NodeViewDesc(undefined, doc, outerDeco, innerDeco, dom, dom, dom, view, 0)
+  let docView = new NodeViewDesc(undefined, doc, outerDeco, innerDeco, dom, dom, dom)
   if (docView.contentDOM) docView.updateChildren(view, 0)
   return docView
 }
 
 class TextViewDesc extends NodeViewDesc {
   constructor(parent: ViewDesc | undefined, node: Node, outerDeco: readonly Decoration[],
-              innerDeco: DecorationSource, dom: DOMNode, nodeDOM: DOMNode, view: EditorView) {
-    super(parent, node, outerDeco, innerDeco, dom, null, nodeDOM, view, 0)
+              innerDeco: DecorationSource, dom: DOMNode, nodeDOM: DOMNode) {
+    super(parent, node, outerDeco, innerDeco, dom, null, nodeDOM)
   }
 
   parseRule() {
@@ -955,9 +960,9 @@ class TextViewDesc extends NodeViewDesc {
     return mutation.type != "characterData" && mutation.type != "selection"
   }
 
-  slice(from: number, to: number, view: EditorView) {
+  slice(from: number, to: number, _view?: EditorView) {
     let node = this.node.cut(from, to), dom = document.createTextNode(node.text!)
-    return new TextViewDesc(this.parent, node, this.outerDeco, this.innerDeco, dom, dom, view)
+    return new TextViewDesc(this.parent, node, this.outerDeco, this.innerDeco, dom, dom)
   }
 
   markDirty(from: number, to: number) {
@@ -985,9 +990,8 @@ class TrailingHackViewDesc extends ViewDesc {
 // customized.
 class CustomNodeViewDesc extends NodeViewDesc {
   constructor(parent: ViewDesc | undefined, node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource,
-              dom: HTMLElement, contentDOM: HTMLElement | null, nodeDOM: HTMLElement, readonly spec: NodeView,
-              view: EditorView, pos: number) {
-    super(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, view, pos)
+              dom: HTMLElement, contentDOM: HTMLElement | null, nodeDOM: HTMLElement, readonly spec: NodeView) {
+    super(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM)
   }
 
   // A custom `update` method gets to decide whether the update goes
@@ -1220,6 +1224,19 @@ class ViewTreeUpdater {
         let next = this.top.children[i]
         if (next.matchesMark(marks[depth]) && !this.isLocked(next.dom)) { found = i; break }
       }
+      // When nothing matches, try to update the mark view at this position
+      // in place, so a custom mark view can adapt to a changed mark without
+      // re-creating its DOM.
+      if (found < 0 && this.index < this.top.children.length) {
+        let cur = this.top.children[this.index]
+        if (cur instanceof MarkViewDesc && cur.dirty != NODE_DIRTY &&
+            cur.mark.type == marks[depth].type && cur.spec.update &&
+            !this.isLocked(cur.dom) && cur.spec.update(marks[depth])) {
+          cur.mark = marks[depth]
+          found = this.index
+          this.changed = true
+        }
+      }
       if (found > -1) {
         if (found > this.index) {
           this.changed = true