I'm implementing kind of a rich text editor based on HTML5 contenteditable features and now stuck on the following obstacle. Say we have several blocks with contenteditable attribute set to true. Whenever user edits text, it should detect the overflow somehow and move the rest of text to the next block (links are stored in the model). And if the actually changed text is moved, the focus and cursor should be moved too.
How this could be possibly achieved? The only idea I have now that partially solves the issue (at least rendering) is to render the complete piece of text in a separate hidden area and then use linked fields dimensions to detect pieces of text to be shown in each area.
The solution is built on top of Backbone + Marionette + Lodash + jQuery.