[FIX] LineBreak: List item empty with br are displayed as twice line

The mobile versions represent the <br> in li as making 2 lines and not
just one (unlike browsers). The implementation of linebreaks needs to
change. The invisible terminal BR must be an invisible character so that
the previous BR is displayed but respecting more the W3 rules.

Author: Gorash

examples/demo/demo.css

@@ -3,6 +3,11 @@ body {
     height:100vh;
 }
 
+* {
+    border-top: 3px black solid;
+    margin: 0;
+}
+
 jw-editor {
     display: block;
     height: 100vh;

examples/demo/demo.xml

@@ -17,37 +17,6 @@ neologisms such as "galumphing" and "chortle".
 
 <h1>Table examples</h1>
 
-<table class="mondrian" cellspacing=0>
-  <tbody>
-    <tr style="">
-      <td style="border: 4px solid black; margin: 0; background-color: #3c4681;" colspan="2" rowspan="2"><br></td>
-      <td width="50%" height="5%" style="border: 4px solid black; margin: 0; background-color: #d42627;" colspan="4"><br></td>
-      <td style="border: 4px solid black; margin: 0;" rowspan="4"><br></td>
-    </tr>
-    <tr>
-      <td style="border: 4px solid black; margin: 0; background-color: #fcd202;" colspan="2" rowspan="2"><br></td>
-      <td style="border: 4px solid black; margin: 0;" width="15%" colspan="2" rowspan="2"><br></td>
-    </tr>
-    <tr>
-      <td style="border: 4px solid black; margin: 0;" width="25%" rowspan="3"><br></td>
-      <td style="border: 4px solid black; margin: 0;" width="8%" height="40%"><br></td>
-    </tr>
-    <tr>
-      <td width="15%" style="border: 4px solid black; margin: 0; background-color: #3c4681;" colspan="2" rowspan="2"><br></td>
-      <td style="border: 4px solid black; margin: 0; background-color: #d42627;" colspan="3"><br></td>
-    </tr>
-    <tr>
-      <td style="border: 4px solid black; margin: 0;" colspan="2" rowspan="2"><br></td>
-      <td style="border: 4px solid black; margin: 0; background-color: #3c4681;
-      vertical-align: bottom; text-align: right; color: #7166ab;" colspan="2" rowspan="2"><sub><i>© Piet
-      Mondrian</i></sub></td>
-    </tr>
-    <tr>
-      <td height="5%" style="border: 4px solid black; margin: 0; background-color: #fcd202;" colspan="3"><br></td>
-    </tr>
-  </tbody>
-</table>
-
 <p><br></p>
 
 <table>
@@ -132,7 +101,14 @@ neologisms such as "galumphing" and "chortle".
       </li>
       <li style="list-style: none;">
         <ol>
-            <li>1.2.1</li>
+            <li>A 2 br<br><br></li>
+            <li>A br + char<br>&#8203;</li>
+            <li>B 3 br<br><br><br></li>
+            <li>B 2 br + char<br><br>&#8203;</li>
+            <li><p class="toto">P B 3 br<br><br><br></p></li>
+            <li><p class="toto">P B 2 br + char<br><br>&#8203;</p></li>
+            <li>B 4 br<br><br><br><br></li>
+            <li>B 3 br + char<br><br><br>&#8203;</li>
             <li>1.2.2</li>
             <li>1.2.3</li>
             <li style="list-style: none;">

packages/plugin-linebreak/src/LineBreakDomObjectRenderer.ts

@@ -22,10 +22,11 @@ export class LineBreakDomObjectRenderer extends NodeRenderer<DomObject> {
         worker.locate([node], br);
         if (!node.nextSibling()) {
             // If a LineBreakNode has no next sibling, it must be rendered
-            // as two BRs in order for it to be visible.
-            const br2 = { tag: 'BR' };
-            const domObject = { children: [br, br2] };
-            worker.locate([node], br2);
+            // as a BR and a placeholder invisible char in order for it to be
+            // visible.
+            const invisible: DomObject = { text: '\u200B' };
+            const domObject = { children: [br, invisible] };
+            worker.locate([node], invisible);
             return domObject;
         }
         return br;

packages/plugin-linebreak/src/LineBreakXmlDomParser.ts

@@ -10,7 +10,13 @@ export class LineBreakXmlDomParser extends AbstractParser<Node> {
     engine: XmlDomParsingEngine;
 
     predicate = (item: Node): boolean => {
-        return item instanceof Element && nodeName(item) === 'BR';
+        return (
+            (item instanceof Element && nodeName(item) === 'BR') ||
+            (item instanceof Text &&
+                item.textContent === '\u200B' &&
+                !item.nextSibling &&
+                (!item.previousSibling || nodeName(item.previousSibling) === 'BR'))
+        );
     };
 
     async parse(item: Element): Promise<LineBreakNode[]> {

packages/plugin-renderer-dom-object/src/DomObjectRenderingEngine.ts

@@ -270,7 +270,7 @@ export class DomObjectRenderingEngine extends RenderingEngine<DomObject> {
     async renderChildren(node: VNode): Promise<Array<DomObject | VNode>> {
         const children: Array<DomObject | VNode> = node.children();
         if (!children.length && this.editor.mode.is(node, RuleProperty.ALLOW_EMPTY) !== true) {
-            children.push({ tag: 'BR' });
+            children.push({ text: '\u200B' });
         }
         return children;
     }