Drag select & cursor at the end of link not working properly on MS Edge / IE11

1

I can’t seem to drag-select text from the end of a link mark. This doesn’t happen with different marks, only happening for link specifically. I see that there’s an empty span & br attached to the end, perhaps that’s causing the issue, as I don’t see that behavior with other marks. This behavior happens both on Edge & IE 11.

I can’t also seem to use keyboard to move into the link (from right to left). This only happens on IE 11.

Gifs included:

MS Edge:

pm_edge_bug_edge

IE 11:

pm_edge_bug_ie

2

I suspect this is related to the wrapper node ProseMirror creates around the cursor when it is on a mark boundary—this involves moving the DOM selection, which I guess aborts drag-select on IE.

Could you see if this patch helps with the issue?

3

Thanks for the quick response & patch! I upgraded prosemirror-view to 1.3.0.

I do see that the issue is fixed if the cursor was somewhere else at mousedown for drag select. But I still see the issue persisting if you had your cursor at the end of a link either by using keyboard keys or at random times, by clicking there (span & br show up sporadically when you click at the end of the link). It seems like whenever there’s an empty span after <a>, this behavior happens.

The IE 11 issue with using keyboard to move cursor into the link from its right end is still existent as well.

Attached a gif to illustrate the sporadic span showing up & causing drag select to not start. This is in Edge.

pm_edge_bug_edge2

4

I was able to fix this issue by commenting out span.textContent in cursorWrapperDOM.

function cursorWrapperDOM(visible) {
  let span = document.createElement("span")
  //span.textContent = "\ufeff" // zero-width non-breaking space**
  if (!visible) {
    span.style.position = "absolute"
    span.style.left = "-100000px"
  }
  return span
}
5

(I’m working on a fix that gets rid of the cursor wrapper hack in the no-cursor-wrapper branch on github. You can help test it by installing the prosemirror-view@1.9.14-prerelease2 package version if you want.)

6

That’s a good news. I will definitely check and play around with that version in my dev editor…

7

no-cursor-wrapper branch did solve IE issue with cursor for me but there is still problem with backspace. When I try to delete text on the edge of inline element selection jumps to end of the document.

ie_backspace

8

Maybe we need something similar to below code for cases when we are approaching inline element from right using Backspace in IE.

// IE11 sometimes weirdly moves the DOM selection around after
// backspacing out the first element in a textblock
if (browser.ie && browser.ie_version <= 11 && $from.parentOffset == 0) {
	view.domObserver.suppressSelectionUpdates()
	setTimeout(() => selectionToDOM(view), 20)
}

Event though I still see cases when this workaround fails in IE. Looks like parent element is selected/focused right after Backspace deletes the character.