Experiment with contenteditable

[gaearon]

This relies on fix for #7 getting merged, but I just figured I might share this anyway in case somebody wants to play and make a full-fledged implementation.

This PR adds App4 in which there is a contentEditable that we intercept. The goal is to animate both insertions and deletions anywhere but right now it's really stupid and can only add or remove letters at the end. I think I saw this as one of the "stress tests" in your gist.

Obviously index is a very bad key, but it works for typing/deleting at the end. I wonder what kind of data structure is appropriate here..

Live demo (see "Click on me and start typing" at the very bottom)

[gaearon]

Updated to also delete letters at the end with Backspace.

[gaearon]

BTW I started implementing caret handling but got stuck because (apart from the useless index-based keys) I can't figure out when I should update caret position.

This is one of my attempts but there seem to be race conditions:

https://gist.github.com/gaearon/c6e22eced767b39d70c0

[gaearon]

IMO one of the hard parts here is that parent needs a way to know when children have been updated. In the parent App4, I need to know when Container update is flushed to its state and the DOM, so that I can safely change the caret position. Or we can do something like componentWillEnter to mirror ReactTransitionGroup and let children know about this. In our example, they will probably report to parent.

[gaearon]

I updated my experiment with contenteditable: now you can edit right in the middle of contenteditable, and animations just work. Also Backspace key works, including selections.

Demo (Don't forget to Ctrl+R)

Exit while entering:

[chenglou]

Woah I totally forgot you submitted these PRs! Sorry...

[gaearon]

Haha, no big deal :-)