Fortunately, we have recently added React into our stack, which when applied to a problem domain such as this made codifying a solution a breeze.
Instead of thinking of each intricate DOM event, I was able to reason about the problem on a higher level, alternatively thinking in the manner of state changes.
All the boilerplate required to handle
onChange events was already provided within the library, and instead, I was able to take advantage of how React handles components’ internal state for my own extra requirements.
The recording component documented below is really just logging each of the intermittent states that the component is in during its lifetime, in respect to its present value.
These state changes (‘events’) are stored along with their respective timestamp, so as to provide the possibility for later time-dependent processing.
Now that we had a log of the state the textarea was in throughout its lifetime, the next step was to be able to replay these events.
To achieve this a small amount of processing needed to occur in transforming the events timestamps into relative durations, which could be used within the implementation.
With this in place, playback of each sequential event could be achieved by a simple
setTimeout call which applied the associated state change to the playback value output.
Putting It All Together
So as to highlight how simple the implementation truly is, you can wire-up the two components using the following component (demoable in this JSBin) and experiment with how it works. This implementation is really a proof-of-concept in many regards, and further work could be done to make a more generic component that could handle all kinds of time-dependent state logging and eventual playback.