pre tag and horizontal divider support

alihassan143 · alihassan143 · commit ddde18bc990d · 2025-01-18T22:39:41.000+05:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 1.0.9
+* added support for horizontal divider
+* code block and pre tag support
 ## 1.0.8
 * fix: Links get formatted but are not clickable in the PDF ([#35](https://github.com/alihassan143/htmltopdfwidgets/issues/35))
 ## 1.0.7
diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -87,7 +87,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "1.0.6"
+    version: "1.0.9"
   http:
     dependency: transitive
     description:
@@ -124,10 +124,10 @@ packages:
     dependency: transitive
     description:
       name: markdown
-      sha256: ef2a1298144e3f985cc736b22e0ccdaf188b5b3970648f2d9dc13efd1d9df051
+      sha256: "935e23e1ff3bc02d390bad4d4be001208ee92cc217cb5b5a6c19bc14aaa318c1"
       url: "https://pub.dev"
     source: hosted
-    version: "7.2.2"
+    version: "7.3.0"
   meta:
     dependency: transitive
     description:
diff --git a/lib/src/html_tags.dart b/lib/src/html_tags.dart
@@ -11,9 +11,11 @@ class HTMLTags {
   static const paragraph = 'p';
   static const image = 'img';
   static const anchor = 'a';
+  static const horizontalDivider = 'hr';
   static const italic = 'i';
   static const em = 'em';
   static const bold = 'b';
+  static const pre = 'pre';
   static const underline = 'u';
   static const strikethrough = 's';
   static const del = 'del';
diff --git a/lib/src/html_to_widgets.dart b/lib/src/html_to_widgets.dart
@@ -82,8 +82,9 @@ class WidgetsHTMLDecoder {
 
   Future<List<Widget>> _parseElement(
     Iterable<dom.Node> domNodes,
-    TextStyle baseTextStyle,
-  ) async {
+    TextStyle baseTextStyle, {
+    bool preTag = false,
+  }) async {
     final result = <Widget>[];
     final delta = <TextSpan>[];
     TextAlign? textAlign;
@@ -98,10 +99,22 @@ class WidgetsHTMLDecoder {
           delta.add(const TextSpan(
             text: "\n",
           ));
+        } else if (localName == HTMLTags.pre) {
+          final childrens =
+              await _parseElement(domNode.nodes, baseTextStyle, preTag: true);
+          delta.add(TextSpan(children: [
+            WidgetSpan(
+                child: Container(
+                    width: double.infinity,
+                    decoration: customStyles.codeDecoration ??
+                        BoxDecoration(color: customStyles.codeblockColor),
+                    child: Column(children: childrens)))
+          ]));
         } else if (HTMLTags.formattingElements.contains(localName)) {
           /// Check if the element is a simple formatting element like <span>, <bold>, or <italic>
-          final attributes =
-              await _parserFormattingElementAttributes(domNode, baseTextStyle);
+          final attributes = await _parserFormattingElementAttributes(
+              domNode, baseTextStyle,
+              preTag: preTag);
 
           textAlign = attributes.$1;
 
@@ -156,6 +169,12 @@ class WidgetsHTMLDecoder {
           }
 
           /// Handle special elements (e.g., headings, lists, images)
+        } else if (localName == HTMLTags.horizontalDivider) {
+          result.add(Divider(
+              color: customStyles.dividerColor,
+              thickness: customStyles.dividerthickness,
+              height: customStyles.dividerHight,
+              borderStyle: customStyles.dividerBorderStyle));
         }
       } else if (domNode is dom.Text) {
         if (delta.isNotEmpty && domNode.text.trim().isNotEmpty) {
@@ -270,7 +289,8 @@ class WidgetsHTMLDecoder {
 
   //// Parses the attributes of a formatting element and returns a TextStyle.
   Future<(TextAlign?, TextStyle, String?)> _parserFormattingElementAttributes(
-      dom.Element element, TextStyle baseTextStyle) async {
+      dom.Element element, TextStyle baseTextStyle,
+      {bool preTag = false}) async {
     final localName = element.localName;
     TextAlign? textAlign;
     String? link;
@@ -331,17 +351,23 @@ class WidgetsHTMLDecoder {
 
       /// Handle <code> element
       case HTMLTags.code:
-        attributes = attributes
-            .copyWith(background: const BoxDecoration(color: PdfColors.red))
-            .merge(customStyles.codeStyle);
+        if (!preTag) {
+          attributes = attributes
+              .copyWith(
+                  background: BoxDecoration(
+                      color: customStyles.codeBlockBackgroundColor))
+              .merge(customStyles.codeStyle);
+        }
+
         break;
       default:
         break;
     }
 
     for (final child in element.children) {
-      final nattributes =
-          await _parserFormattingElementAttributes(child, baseTextStyle);
+      final nattributes = await _parserFormattingElementAttributes(
+          child, baseTextStyle,
+          preTag: preTag);
       attributes = attributes.merge(nattributes.$2);
       if (nattributes.$2.decoration != null) {
         decoration.add(nattributes.$2.decoration!);
@@ -402,7 +428,7 @@ class WidgetsHTMLDecoder {
 
     ///iterate over <tr>children
     for (final data in element.children) {
-      if (data.children.isEmpty) {
+      if (data.nodes.isEmpty) {
         ///if single <th> or<td> tag found
         final node = paragraphNode(text: data.text);
 
@@ -423,18 +449,15 @@ class WidgetsHTMLDecoder {
 
   ///parse the nodes and handle theem accordingly
   Future<Iterable<Widget>> _parseTableSpecialNodes(
-      dom.Element element, TextStyle baseTextStyle) async {
+      dom.Element node, TextStyle baseTextStyle) async {
     final List<Widget> nodes = [];
 
     ///iterate over multiple childrens
-    if (element.children.isNotEmpty) {
-      for (final childrens in element.children) {
-        ///parse them according to their widget
-        nodes.addAll(
-            await _parseTableDataElementsData(childrens, baseTextStyle));
-      }
+    if (node.nodes.isNotEmpty) {
+      ///parse them according to their widget
+      nodes.addAll(await _parseElement(node.nodes, baseTextStyle));
     } else {
-      nodes.addAll(await _parseTableDataElementsData(element, baseTextStyle));
+      nodes.addAll(await _parseTableDataElementsData(node, baseTextStyle));
     }
     return nodes;
   }
@@ -452,6 +475,7 @@ class WidgetsHTMLDecoder {
 
     /// Check if the element is a simple formatting element like <span>, <bold>, or <italic>
     if (localName == HTMLTags.br) {
+      result.add(Text('\n'));
     } else if (HTMLTags.formattingElements.contains(localName)) {
       final attributes =
           await _parserFormattingElementAttributes(element, baseTextStyle);
@@ -519,9 +543,9 @@ class WidgetsHTMLDecoder {
             text: TextSpan(
                 children: delta,
                 style: baseTextStyle
-                    .merge(TextStyle(
+                    .copyWith(
                         fontSize: level.getHeadingSize,
-                        fontWeight: FontWeight.bold))
+                        fontWeight: FontWeight.bold)
                     .merge(level.getHeadingStyle(customStyles)))));
   }
 
@@ -669,6 +693,19 @@ class WidgetsHTMLDecoder {
             HTMLTags.formattingElements.contains(child.localName) == false) {
           childNodes.addAll(await _parseElement(child.nodes, baseTextStyle));
         } else {
+          if (child.localName == HTMLTags.pre) {
+            final childrens =
+                await _parseElement(child.nodes, baseTextStyle, preTag: true);
+            delta.add(TextSpan(children: [
+              WidgetSpan(
+                  child: Container(
+                      width: double.infinity,
+                      decoration: customStyles.codeDecoration ??
+                          BoxDecoration(color: customStyles.codeblockColor),
+                      child: Column(children: childrens)))
+            ]));
+          } else
+
           /// Handle special elements (e.g., headings, lists) within a paragraph
           if (HTMLTags.specialElements.contains(child.localName)) {
             childNodes.addAll(
@@ -678,6 +715,12 @@ class WidgetsHTMLDecoder {
                 type: BuiltInAttributeKey.bulletedList,
               ),
             );
+          } else if (child.localName == HTMLTags.horizontalDivider) {
+            childNodes.add(Divider(
+                color: customStyles.dividerColor,
+                thickness: customStyles.dividerthickness,
+                height: customStyles.dividerHight,
+                borderStyle: customStyles.dividerBorderStyle));
           } else {
             if (child.localName == HTMLTags.br) {
               delta.add(const TextSpan(
diff --git a/lib/src/htmltagstyles.dart b/lib/src/htmltagstyles.dart
@@ -36,24 +36,58 @@ class HtmlTagStyle {
   //quote bar style that will merge with default style
   final PdfColor? quoteBarColor;
   //bullet list style style that will merge with default style
+  /// The color of the bullet list icon in a PDF document.
   final PdfColor? bulletListIconColor;
-  const HtmlTagStyle({
-    this.boldStyle,
-    this.italicStyle,
-    this.h1Style,
-    this.h2Style,
-    this.h3Style,
-    this.imageAlignment = Alignment.center,
-    this.h4Style,
-    this.h5Style,
-    this.h6Style,
-    this.strikeThrough,
-    this.paragraphStyle,
-    this.codeStyle,
-    this.headingStyle,
-    this.listIndexStyle,
-    this.linkStyle,
-    this.quoteBarColor,
-    this.bulletListIconColor,
-  });
+
+  /// The color of the divider in a PDF document.
+  final PdfColor dividerColor;
+
+  /// The border style of the divider in a PDF document.
+  final BorderStyle? dividerBorderStyle;
+
+  /// The thickness of the divider in a PDF document.
+  /// The thickness of the divider line.
+  ///
+  /// This value determines how thick the divider line will be.
+  final double dividerthickness;
+
+  /// The background color of the code block.
+  ///
+  /// This color is used as the background for code blocks in the PDF.
+  final PdfColor codeBlockBackgroundColor;
+
+  /// The color of the code block text.
+  ///
+  /// This color is used for the text within code blocks in the PDF.
+  final PdfColor codeblockColor;
+  // The decoration style that will merge with default style
+  final BoxDecoration? codeDecoration;
+
+  /// The height of the divider in a PDF document.
+  final double dividerHight;
+  const HtmlTagStyle(
+      {this.boldStyle,
+      this.italicStyle,
+      this.h1Style,
+      this.h2Style,
+      this.h3Style,
+      this.imageAlignment = Alignment.center,
+      this.h4Style,
+      this.h5Style,
+      this.h6Style,
+      this.strikeThrough,
+      this.paragraphStyle,
+      this.codeStyle,
+      this.headingStyle,
+      this.listIndexStyle,
+      this.linkStyle,
+      this.quoteBarColor,
+      this.bulletListIconColor,
+      this.dividerBorderStyle,
+      this.dividerHight = 0.5,
+      this.codeBlockBackgroundColor = PdfColors.red,
+      this.codeblockColor = PdfColors.grey,
+      this.codeDecoration,
+      this.dividerthickness = 1.0,
+      this.dividerColor = PdfColors.grey});
 }
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: htmltopdfwidgets
 description: A Dart package that converts HTML and Markdown rich text content into high-quality PDF widgets. Simplify the creation of PDF documents by seamlessly transforming your structured text content into printable, professional PDFs. Perfect for generating reports, invoices, and more!
-version: 1.0.8
+version: 1.0.9
 homepage: https://github.com/alihassan143/htmltopdfwidgets
 
 environment:
@@ -10,7 +10,7 @@ dependencies:
   pdf: ">=3.11.1 <4.0.0"
   html: ">=0.15.5 <1.0.0"
   http: ">=1.2.2 <2.0.0"
-  markdown: ^7.2.2
+  markdown: ^7.3.0
 
 dev_dependencies:
   flutter_lints: ^4.0.0
