search

facebookarchive / draft-js

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

Selection, cursor, backspace, full deletion broken for image/icon entities #558

Open omerts opened 8 years ago

omerts commented 8 years ago

Hello,

I have added two types of custom entities. One is a component of a font-icon, using the css pseudo selector ::before, and the second is a simple image.

When adding any one of them to the editor: selection, cursor, backspace, and select all & delete, are not working properly. The cursor jumps to weird locations, I can't use backspace to remove the entity, can't add text after the entity, and many other problems. Just see for yourself: Fiddle

Env:

gabriel-miranda commented 8 years ago

For you I'd try to use the AtomicBlockUtils is very much simple to add entities and stuff. If you don't want a block you can check de draft-js-plugins they have some stuff with pretty similar stuff. Now the issue: draft-js has some problems when you force the focus from outside its container, breaking entirely the selection and leaving your component unusable. Maybe its related:

538

485

And a few more.

omerts commented 8 years ago

@gabriel-miranda thanks for the response. Using AtomicBlockUtils inserts a block on a separate line (I guess this can be hacked by using css), we need it inline. I have looked at the draft-js-plugins while developing my code (especially since it is hard to understand draft.js from the docs), but couldn't find a good solution to our problems.

RnMss commented 8 years ago

Even inserting it as an Atomic Block doesn't make selecting, deleting or replacing work properly.

flarnie commented 7 years ago

Thanks for reporting this, and for the demo. We would love to see fixes for this. For some reason it has not been an issue with our internal use of Draft.js, which includes some similar use cases. I wonder if there is a work-around and will look to see if we have something I can recommend.

venkatesh-devale commented 5 years ago

Did anybody found solution to this problem. I am able to add entities to the draftjs but my backspace is broken. On hitting backspace entire entity is not removed and cursor delete any earlier emoji entity and not the current added one.