Use of <p> to represent line breaks in message output

[jonnyandrew]

Problem

When a user types multiple lines of text in the editor, it is represented as multiple HTML paragraphs in the message output.

The default and correct way to display an HTML paragraph is to add a significant padding to visually separate it from the surrounding elements. Hence it's reasonable to expect that any client may render the message in this way. The problem is then that the user may compose a message that looks one way in the editor (compact spacing at line breaks) only for it to be displayed completely differently when rendered by a client.

• See for example: Rich text bubbles have massive paragraph breaks when authored with RTE. element-hq/element-x-ios#1673

Proposed solution

For context,<p> tags were only added to help manage the state of the editor internally but there shouldn't be any reason that this implementation detail needs to leak into the message output.

• For more details see Paragraphs re-work #472

Historically, some clients have adjusted the default style of paragraph tags to reduce the padding. However this shouldn't be necessary when we can use <br> tags to represent a line break as it appears in the editor.

So my proposed solution would be to

• continue using paragraphs for the internal representation of new lines;
• consider renaming the internal node type from paragraph to something more abstract (to avoid any confusion);
• strip paragraphs and replace with line breaks during the rendering of HTML message output;
• ensure any input containing line breaks is parsed into paragraphs.

[ara4n]

A slightly hacky but pragmatic alternative to backing out #472 (which looks fairly complex) might be to postprocess the output of the RTE to turn <p>foo</p> into foo<br/> and <p>foo</p><p> </p> into <p>foo</p>. I vaguely remember doing this in Element Web in the very original Draft.js based RTE to fix the same bug.

[aringenbach]

An additional point for the proposed solution is that it's also needed to replace line breaks back with paragraphs on edit/quote use case.