From 2495204f6bbd0ee4a98f7c3e645389e94614148f Mon Sep 17 00:00:00 2001 From: Gorash Date: Mon, 26 Oct 2020 12:04:31 +0100 Subject: [PATCH] [FIX] LineBreak: List item empty with br are displayed as twice line The mobile versions represent the
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. --- examples/demo/demo.css | 5 +++ examples/demo/demo.xml | 40 ++++--------------- .../src/LineBreakDomObjectRenderer.ts | 9 +++-- .../src/LineBreakXmlDomParser.ts | 8 +++- .../src/DomObjectRenderingEngine.ts | 2 +- 5 files changed, 26 insertions(+), 38 deletions(-) diff --git a/examples/demo/demo.css b/examples/demo/demo.css index b72220f97..cc1e62705 100644 --- a/examples/demo/demo.css +++ b/examples/demo/demo.css @@ -3,6 +3,11 @@ body { height:100vh; } +* { + border-top: 3px black solid; + margin: 0; +} + jw-editor { display: block; height: 100vh; diff --git a/examples/demo/demo.xml b/examples/demo/demo.xml index a7eb03a9b..4b9b46e34 100644 --- a/examples/demo/demo.xml +++ b/examples/demo/demo.xml @@ -17,37 +17,6 @@ neologisms such as "galumphing" and "chortle".

Table examples

- - - - - - - - - - - - - - - - - - - - - - - - - - - -










© Piet - Mondrian

-


@@ -132,7 +101,14 @@ neologisms such as "galumphing" and "chortle".
    • -
    1. 1.2.1
      2. +
    2. A 2 br

      3. +
    3. A br + char
      ​
      4. +
    4. B 3 br


      5. +
    5. B 2 br + char

      ​
      6. +

    6. P B 3 br


      7. +

    7. P B 2 br + char

      ​

      8. +
    8. B 4 br



      9. +
    9. B 3 br + char


      ​
    10. 1.2.2
    11. 1.2.3
    12. diff --git a/packages/plugin-linebreak/src/LineBreakDomObjectRenderer.ts b/packages/plugin-linebreak/src/LineBreakDomObjectRenderer.ts index 12f57257b..6805960a3 100644 --- a/packages/plugin-linebreak/src/LineBreakDomObjectRenderer.ts +++ b/packages/plugin-linebreak/src/LineBreakDomObjectRenderer.ts @@ -22,10 +22,11 @@ export class LineBreakDomObjectRenderer extends NodeRenderer { 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; diff --git a/packages/plugin-linebreak/src/LineBreakXmlDomParser.ts b/packages/plugin-linebreak/src/LineBreakXmlDomParser.ts index 929609cd8..032dd3825 100644 --- a/packages/plugin-linebreak/src/LineBreakXmlDomParser.ts +++ b/packages/plugin-linebreak/src/LineBreakXmlDomParser.ts @@ -10,7 +10,13 @@ export class LineBreakXmlDomParser extends AbstractParser { 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 { diff --git a/packages/plugin-renderer-dom-object/src/DomObjectRenderingEngine.ts b/packages/plugin-renderer-dom-object/src/DomObjectRenderingEngine.ts index 2d1393ab9..da7d31da1 100644 --- a/packages/plugin-renderer-dom-object/src/DomObjectRenderingEngine.ts +++ b/packages/plugin-renderer-dom-object/src/DomObjectRenderingEngine.ts @@ -270,7 +270,7 @@ export class DomObjectRenderingEngine extends RenderingEngine { async renderChildren(node: VNode): Promise> { const children: Array = node.children(); if (!children.length && this.editor.mode.is(node, RuleProperty.ALLOW_EMPTY) !== true) { - children.push({ tag: 'BR' }); + children.push({ text: '\u200B' }); } return children; }