what is the point of content-editable div?
The purpose of a
contenteditable element is to provide WYSIWYG capabilities for editing the content and structure of elements within a Web page.
Why does it then behave so differently to input element?
contenteditable element still has to render like a normal DOM element. To address your particular concern about line breaks, there is no way to express rendered line breaks in HTML without using an element like
<div> (since normal source-code HTML line breaks aren't rendered in the visual page).
You might ask, "Why, then, did the WHATWG (or Microsoft) not simply make
contenteditable elements play by different rules from 'normal' elements?" The answer is that a
contenteditable element might stop being
contenteditable at any time -- the status is toggleable. There is no obvious sensible way to make an element render its internal DOM differently depending on whether it is currently
contenteditable or not.
<br> visible line breaks were allowed when the element was in a
contenteditable state. When the element switches out of
contenteditable mode, should the non-
<br> line breaks then vanish? You might conceivably say, "Yes, that's fine!" to such a suggestion, but that flies in the face of the purpose of
contenteditable I stated in my first sentence. Having the element change appearance based on its
contenteditable state would spoil its usefulness as a WYSIWYG.