Delay cursor wrapper creation on IE until mouse is up again

To avoid aborting selection dragging when the drag starts at a
position that needs a cursor wrapper.

FIX: Fix mouse-selecting (in IE and Edge) from the end of links and
other positions that cause a cursor wrapper.

See https://discuss.prosemirror.net/t/drag-select-cursor-at-the-end-of-link-not-working-properly-on-ms-edge-ie11/1301

src/index.js

@@ -4,8 +4,9 @@ import {NodeSelection} from "prosemirror-state"
 import {scrollRectIntoView, posAtCoords, coordsAtPos, endOfTextblock, storeScrollPos, resetScrollPos} from "./domcoords"
 import {docViewDesc} from "./viewdesc"
 import {initInput, destroyInput, dispatchEvent, ensureListeners} from "./input"
-import {SelectionReader, selectionToDOM} from "./selection"
+import {SelectionReader, selectionToDOM, needsCursorWrapper} from "./selection"
 import {Decoration, viewDecorations} from "./decoration"
+import browser from "./browser"
 
 export {Decoration, DecorationSet} from "./decoration"
 
@@ -319,10 +320,6 @@ function computeDocDeco(view) {
   return [Decoration.node(0, view.state.doc.content.size, attrs)]
 }
 
-function nonInclusiveMark(mark) {
-  return mark.type.spec.inclusive === false
-}
-
 function cursorWrapperDOM(visible) {
   let span = document.createElement("span")
   span.textContent = "\ufeff" // zero-width non-breaking space
@@ -334,12 +331,11 @@ function cursorWrapperDOM(visible) {
 }
 
 function updateCursorWrapper(view) {
-  let {$head, $anchor, visible} = view.state.selection
-  let $pos = $head.pos == $anchor.pos && (!visible || $head.parent.inlineContent) ? $head : null
-  if ($pos && (!visible ||
-               view.state.storedMarks ||
-               $pos.parent.content.length == 0 ||
-               $pos.parentOffset && !$pos.textOffset && $pos.nodeBefore.marks.some(nonInclusiveMark))) {
+  let $pos = needsCursorWrapper(view.state)
+  // On IE/Edge, moving the DOM selection will abort a mouse drag, so
+  // there we delay the creation of the wrapper when the mouse is down.
+  if ($pos && !(browser.ie && view.mouseDown)) {
+    let visible = view.state.selection.visible
     // Needs a cursor wrapper
     let marks = view.state.storedMarks || $pos.marks()
     let spec = {isCursorWrapper: true, marks, raw: true, visible}

src/input.js

@@ -5,7 +5,7 @@ import {captureKeyDown} from "./capturekeys"
 import {DOMChange} from "./domchange"
 import {parseFromClipboard, serializeForClipboard} from "./clipboard"
 import {DOMObserver} from "./domobserver"
-import {selectionBetween} from "./selection"
+import {selectionBetween, needsCursorWrapper} from "./selection"
 
 // A collection of DOM events that occur within the editor, and callback functions
 // to invoke when the event fires.
@@ -294,6 +294,8 @@ class MouseDown {
       return
 
     if (this.allowDefault) {
+      // Force a cursor wrapper redraw if this was suppressed (to avoid an issue with IE drag-selection)
+      if (browser.ie && needsCursorWrapper(this.view.state)) this.view.updateState(this.view.state)
       this.view.selectionReader.poll("pointer")
     } else if (handleSingleClick(this.view, this.pos.pos, this.pos.inside, event, this.selectNode)) {
       event.preventDefault()

src/selection.js

@@ -309,3 +309,17 @@ function hasSelection(view) {
     return false
   }
 }
+
+function nonInclusiveMark(mark) {
+  return mark.type.spec.inclusive === false
+}
+
+export function needsCursorWrapper(state) {
+  let {$head, $anchor, visible} = state.selection
+  let $pos = $head.pos == $anchor.pos && (!visible || $head.parent.inlineContent) ? $head : null
+  if ($pos && (!visible || state.storedMarks || $pos.parent.content.length == 0 ||
+               $pos.parentOffset && !$pos.textOffset && $pos.nodeBefore.marks.some(nonInclusiveMark)))
+    return $pos
+  else
+    return null
+}