oyeanuj

Here is how I ended up making this work. For more context and background on the discussion, I recommend reading conversation in ReduxForm#2169 (and chiming in with your learnings, etc).

So, as per the conversation there, I tried the 'many little forms' approach. I am sharing both my approach, and a crude abstracted out gist that can hopefully help out y'all.

Essentially, with this approach:

1. You want to use each field as a little form which submits debounced onChange.
2. For each field as a little form, you want to abstract that into a component which can be provided an input, as much as possible.
3. Set autofocus for the first form.
4. For debounced onChange, I used react-debounced-input.

oyeanuj

# For example I will create a branch off of “next”:
git checkout next
git checkout -b feature/my-new-feature

# Then I have done some work on my new branch, whilst updates 
# happened to “next”. Before I do a rebase of my feature branch
# I do a fetch and check my branches: 
git fetch
git branch -vv

oyeanuj

Lets say, we currently have a component which renders a link embed like shown below. It shows the title, description, domain and author.

And now lets say, we want to make each of those editable as well.

Is it possible to still reuse the existing component or needs multiple Slate rendered components - one each for LinkEmbed, LinkTitle, LinkDescription, LinkAuthor.

oyeanuj

var React = require('react'),
    ClassNames = require('classnames');

var AnimatedPhrases = React.createClass({
    getInitialProps: function () {
        return {
            animateType: 'type'
        }
    },