title: Contenteditable div: save and restore caret position when is positioned in empty new line
body: <p>I need to save and restore the caret position as the user types in a contenteditable div (the html written is edited and re-inserted with each key pressed).</p>
  
  <p>I've read and succesfully used this solution by Tim Down to a similar question: <a href="https://stackoverflow.com/a/13950376/2086428">https://stackoverflow.com/a/13950376/2086428</a>.</p>
  
  <p>The problem occurs when the caret is positioned in an empty line, it will be restored to the previous non-empty line (try it <a href="http://jsfiddle.net/WeWy7/3/" rel="nofollow noreferrer">here</a>, add a new line and save / restore the cursor).</p>
  
  <p>In the comments section of the solution proposed one user had the same problem, the author of the solution hinted to convert the <code>&lt;br&gt;</code>s into characters.</p>
  
  <p>How can I do this?
  Are there any simpler solutions?</p>
  
  <p>PS: I can't use rangy for this project.</p>