8

I have an editor that is supposed to have entities with the props name, color, start, end. In the editor the text in positions denoted by start and end will be subsistuted by name, and it will be rendered by a custom component with contentEditable=false.

This works great with draftjs in general but there are a couple of issues:

  • When moving the cursor with the keyboard arrows, the entities are skipped over, which is good. But when an entity is at the very end of the input and I try to move rightwards past it (either just with right arrow or with option or cmd + right) the cursor disappears and doesn't come back when I move left again.
  • If I go right to the left of an entity and push shift + option + right arrow, the entity is selected as expected. But if I then press left arrow the cursor is also lost.

I could fix this by making sure there is always a whitespace after such a last entity, but that seems hacky and probably has edge cases.

Another option is to not use contentEditable=false, but that creates other issues with my actual app, which has a more complicated entity component including a dropdown, and I will have to manually make sure the user can't change text inside the entities etc.

Here is a reproduction of the issue: https://codesandbox.io/s/competent-surf-st77i

Any ideas?

jorgen
  • 3,425
  • 4
  • 31
  • 53
  • Did you find a solution to this? – Momo Jul 11 '20 at 20:33
  • Nope. Any ideas? – jorgen Jul 19 '20 at 08:20
  • 1
    Nothing here. Ended up moving to slate-js instead because it doesn't seem to have the same issue (and I could afford it, since it's a new project) – Momo Jul 22 '20 at 05:38
  • Ok, thanks for the tip! – jorgen Jul 22 '20 at 14:11
  • 1
    JIC it's useful to someone else, I ran into this too trying to render some custom entities, the fix was to render the entity in such a way that the DOM structure matched the number of characters I wanted this entity to be. If you render an emoji for example, but using some funky image nested in a div, etc., I want this to be one character. So, render {child}, where child is the single character with the entity applied. spanA here is a span with `user-select: none`. You can make the child `color: transparent` too, and `caret-color: black` to fix selection bhvr. – Japser36 Nov 30 '21 at 00:53

0 Answers0