ICE wraps changes and user-generated inserts and deletes inline in the DOM and stores a sufficient amount of data about each change in node attributes.
We went with the “inline” approach because other implementations, which use placeholders and store data (really metadata about a change or the content of deleted text) outside of the editor or in a reserved DOM element, had nasty bugs. With all of the data packed into each node, we used ranges, position markers in the DOM, to examine the change nodes and get an understanding of the current context — for example, are we in an insert or delete, and is it by the same user? — before adding more changes.
Where can ICE be used?
ICE can be initialized to listen for events and track changes on any HTML element that is content-editable. Since it is not a text editor itself, ICE has to be plugged into other text editors that provide the core text editing functionality. So far, we have developed plugins for TinyMCE and WordPress. Over the last several months, with great success, we have been piloting the TinyMCE plugin in our newsroom.