search

facebookarchive / draft-js

A React framework for building text editors.
https://draftjs.org/
MIT License
22.57k stars 2.64k forks source link

Caret focus position incorrect after pasting text in IE10/11 #612

Open Jamie-Matthews opened 8 years ago

Jamie-Matthews commented 8 years ago

Heya!

So we've encountered a problem getting the editor to work properly in IE (so far tested in IE10/11) with custom hashtag/mention plugins made using draft-js-plugins-editor.

We are using a span to wrap the inline hashtag/mention and then applying styles on top. The bug occurs when you paste text into the editor that contains these custom elements...

eg. "hello #hashtag this is a www.link.com"

In Chrome and other browsers it behaves exactly how you'd expect - pasting the text and moving the caret (cursor) to the end of that inserted text. In IE however, our caret gets positioned at the start of the first custom element, or rather at the end of the first block of plaintext. So in the above case it would be positioned just before '#hashtag'. Any help would be greatly appreciated!

We're running 0.7.0.

Thanks!

mindlink commented 8 years ago

Just to elaborate on this issue, it happens on the draft-js homepage.

Reproduction steps:

  1. Go to https://facebook.github.io/draft-js/
  2. Type a sentence e.g. hello bold goodbye
  3. Apply style to the middle of the sentence e.g. apply bold to "bold"
  4. Cut the entire text
  5. Paste the text

Expected result: The pasted text is the same and the cursor is at the end of the pasted text.

Actual results: In Chrome/Firefox it is as expected. In IE10/11 the pasted text is fine, but the cursor is positioned at the start of the first styled region i.e. just before the "b" of "bold"

mindlink commented 8 years ago

It seems to be that in IE the cursor position is always at the boundary of the first span in the pasted text. Thus if you have decorators that will apply to the pasted text or the pasted text has styles, the cursor position will be incorrect. e.g. with a decorator that decorates links:

"hi, see https://code.facebook.com for facebook code"

the cursor will be placed incorrectly when pasted, as below:

"hi, see [|]https://code.facebook.com for facebook code"

Mair commented 7 years ago

I'm having the same issue. I was wandering if anyone has a workaround