fix: add support for breakline and divider (#690)

* add support for breakline

* add test for br tag parse

* fix test failure case.

* feat: add  html support

lib/src/plugins/html/encoder/parser/divider_node_parser.dart

@@ -0,0 +1,27 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:html/dom.dart' as dom;
+
+class HTMLDividerNodeParser extends HTMLNodeParser {
+  const HTMLDividerNodeParser();
+
+  @override
+  String get id => DividerBlockKeys.type;
+
+  @override
+  String transformNodeToHTMLString(
+    Node node, {
+    required List<HTMLNodeParser> encodeParsers,
+  }) {
+    return toHTMLString(
+      transformNodeToDomNodes(node, encodeParsers: encodeParsers),
+    );
+  }
+
+  @override
+  List<dom.Node> transformNodeToDomNodes(
+    Node node, {
+    required List<HTMLNodeParser> encodeParsers,
+  }) {
+    return [dom.Element.tag(HTMLTags.divider)];
+  }
+}

lib/src/plugins/html/encoder/parser/text_node_parser.dart

@@ -30,7 +30,9 @@ class HTMLTextNodeParser extends HTMLNodeParser {
         encodeParsers: encodeParsers,
       ),
     );
-
+    if (domNodes.isEmpty) {
+      return [dom.Element.tag(HTMLTags.br)];
+    }
     final element =
         wrapChildrenNodesWithTagName(HTMLTags.paragraph, childNodes: domNodes);
     return [element];

lib/src/plugins/html/html_document.dart

@@ -3,6 +3,7 @@ library delta_markdown;
 import 'dart:convert';
 
 import 'package:appflowy_editor/src/core/document/document.dart';
+import 'package:appflowy_editor/src/plugins/html/encoder/parser/divider_node_parser.dart';
 import 'package:appflowy_editor/src/plugins/html/html_document_decoder.dart';
 import 'package:appflowy_editor/src/plugins/html/html_document_encoder.dart';
 
@@ -29,6 +30,7 @@ String documentToHTML(
       const HTMLHeadingNodeParser(),
       const HTMLImageNodeParser(),
       const HtmlTableNodeParser(),
+      const HTMLDividerNodeParser(),
     ],
   ).encode(document);
 }

lib/src/plugins/html/html_document_decoder.dart

@@ -473,6 +473,7 @@ class HTMLTags {
   static const h1 = 'h1';
   static const h2 = 'h2';
   static const h3 = 'h3';
+  static const br = 'br';
   static const orderedList = 'ol';
   static const unorderedList = 'ul';
   static const list = 'li';

test/plugins/html/encoder/document_html_encoder_test.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor/src/plugins/html/encoder/parser/divider_node_parser.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 void main() async {
@@ -11,6 +12,7 @@ void main() async {
     const HTMLHeadingNodeParser(),
     const HTMLImageNodeParser(),
     const HtmlTableNodeParser(),
+    const HTMLDividerNodeParser(),
   ];
   group('document_html_encoder_test.dart', () {
     setUpAll(() {
@@ -34,7 +36,7 @@ void main() async {
 }
 
 const example =
-    '''<h1>AppFlowyEditor</h1><h2>👋 <strong>Welcome to</strong>   <span style="font-weight: bold; font-style: italic">AppFlowy Editor</span></h2><p>AppFlowy Editor is a <strong>highly customizable</strong>   <i>rich-text editor</i></p><p>   <u>Here</u> is an example <del>your</del> you can give a try</p><p>   <span style="font-weight: bold; font-style: italic">Span element</span></p><p>   <u>Span element two</u></p><p>   <span style="font-weight: bold; text-decoration: line-through">Span element three</span></p><p>   <a href="https://appflowy.io">This is an anchor tag!</a></p><h3>Features!</h3><ul><li>[x] Customizable</li></ul><ul><li>[x] Test-covered</li></ul><ul><li>[ ] more to come!</li></ul><ul><li>First item</li></ul><ul><li>Second item</li></ul><ul><li>List element</li></ul><blockquote>This is a quote!</blockquote><p><code> Code block</code></p><p>   <i>Italic one</i></p><p>   <i>Italic two</i></p><p>   <strong>Bold tag</strong></p><p>You can also use <span style="font-weight: bold; font-style: italic">AppFlowy Editor</span> as a component to build your own app. </p><h3>Awesome features</h3><p>If you have questions or feedback, please submit an issue on Github or join the community along with 1000+ builders!</p><p></p><p></p>''';
+    '''<h1>AppFlowyEditor</h1><h2>👋 <strong>Welcome to</strong>   <span style="font-weight: bold; font-style: italic">AppFlowy Editor</span></h2><p>AppFlowy Editor is a <strong>highly customizable</strong>   <i>rich-text editor</i></p><p>   <u>Here</u> is an example <del>your</del> you can give a try</p><p>   <span style="font-weight: bold; font-style: italic">Span element</span></p><p>   <u>Span element two</u></p><p>   <span style="font-weight: bold; text-decoration: line-through">Span element three</span></p><p>   <a href="https://appflowy.io">This is an anchor tag!</a></p><h3>Features!</h3><ul><li>[x] Customizable</li></ul><ul><li>[x] Test-covered</li></ul><ul><li>[ ] more to come!</li></ul><ul><li>First item</li></ul><ul><li>Second item</li></ul><ul><li>List element</li></ul><blockquote>This is a quote!</blockquote><p><code> Code block</code></p><p>   <i>Italic one</i></p><p>   <i>Italic two</i></p><p>   <strong>Bold tag</strong></p><p>You can also use <span style="font-weight: bold; font-style: italic">AppFlowy Editor</span> as a component to build your own app. </p><hr><h3>Awesome features</h3><p>If you have questions or feedback, please submit an issue on Github or join the community along with 1000+ builders!</p><br><br>''';
 
 const delta = {
   'document': {
@@ -275,6 +277,7 @@ const delta = {
           ],
         },
       },
+      {'type': 'divider'},
       {
         'type': 'heading',
         'data': {
@@ -307,7 +310,7 @@ const delta = {
   },
 };
 const nestedHTML =
-    '''<h1>Welcome to the playground</h1><blockquote>In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting. The playground is a demo environment built with <code>@lexical/react</code>. Try typing in <a href="https://appflowy.io"><i><strong>some text</strong></i></a> with <i>different</i> formats.</blockquote><img src="https://richtexteditor.com/images/editor-image.png" align="center"><p>Make sure to check out the various plugins in the toolbar. You can also use #hashtags or @-mentions too!</p><p></p><p>If you'd like to find out more about Lexical, you can:</p><ul><li>Visit the <a href="https://lexical.dev/">Lexical website</a> for documentation and more information.</li></ul><ul><li><img src="https://richtexteditor.com/images/editor-image.png" align="center"></li></ul><ul><li>Check out the code on our <a href="https://github.com/facebook/lexical">GitHub repository</a>.</li></ul><ul><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li></ul><ul><li>Join our <a href="https://discord.com/invite/KmG4wQnnD9">Discord Server</a> and chat with the team.</li></ul><ul><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li></ul><p>Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 🙂.</p><p></p>''';
+    '''<h1>Welcome to the playground</h1><blockquote>In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting. The playground is a demo environment built with <code>@lexical/react</code>. Try typing in <a href="https://appflowy.io"><i><strong>some text</strong></i></a> with <i>different</i> formats.</blockquote><img src="https://richtexteditor.com/images/editor-image.png" align="center"><p>Make sure to check out the various plugins in the toolbar. You can also use #hashtags or @-mentions too!</p><br><p>If you'd like to find out more about Lexical, you can:</p><ul><li>Visit the <a href="https://lexical.dev/">Lexical website</a> for documentation and more information.</li></ul><ul><li><img src="https://richtexteditor.com/images/editor-image.png" align="center"></li></ul><ul><li>Check out the code on our <a href="https://github.com/facebook/lexical">GitHub repository</a>.</li></ul><ul><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li></ul><ul><li>Join our <a href="https://discord.com/invite/KmG4wQnnD9">Discord Server</a> and chat with the team.</li></ul><ul><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li></ul><p>Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 🙂.</p><br>''';
 const nestedDelta = {
   'document': {
     'type': 'page',

test/plugins/html/encoder/parser/text_node_parser_test.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor/src/plugins/html/encoder/parser/divider_node_parser.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 void main() async {
@@ -11,8 +12,9 @@ void main() async {
     const HTMLHeadingNodeParser(),
     const HTMLImageNodeParser(),
     const HtmlTableNodeParser(),
+    const HTMLDividerNodeParser(),
   ];
-  group('html_text_node_parser.dart', () {
+  group('text_node_parser.dart', () {
     const text = 'Welcome to AppFlowy';
 
     test('heading style', () {
@@ -44,6 +46,19 @@ void main() async {
       );
     });
 
+    test('empty line', () {
+      final node = paragraphNode(
+        attributes: {
+          'delta': [],
+        },
+      );
+      expect(
+        const HTMLTextNodeParser()
+            .transformNodeToHTMLString(node, encodeParsers: parser),
+        '<br>',
+      );
+    });
+
     test('numbered list style', () {
       final node = numberedListNode(
         attributes: {
@@ -95,6 +110,15 @@ void main() async {
       );
     });
 
+    test('divider', () {
+      final node = dividerNode();
+      expect(
+        const HTMLDividerNodeParser()
+            .transformNodeToHTMLString(node, encodeParsers: parser),
+        '<hr>',
+      );
+    });
+
     test('fallback', () {
       final node = paragraphNode(
         attributes: {