feat: initial support for check boxes

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 1.0.3
+* Intial support for checkboxes
+*([#25](https://github.com/alihassan143/htmltopdfwidgets/issues/25))
 ## 1.0.2
 * update readme
 *([#20](https://github.com/alihassan143/htmltopdfwidgets/issues/20))

example/lib/main.dart

@@ -40,7 +40,13 @@ const htmlText = '''<h1>AppFlowyEditor</h1>
 <img src="http://appflowy.io" alt="AppFlowy">
 <p>You can also use <strong><em>AppFlowy Editor</em></strong> 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>
+  <h3>Checked Boxes</h3>
+ <input type="checkbox" id="option2" checked> 
+  <label for="option2">Option 2</label>
+  <input type="checkbox" id="option3"> 
+  <label for="option3">Option 3</label>
   ''';
 
 createDocument() async {

lib/src/html_tags.dart

@@ -25,6 +25,7 @@ class HTMLTags {
   static const div = 'div';
   static const divider = 'hr';
   static const table = 'table';
+  static const label = 'label';
   static const tableRow = 'tr';
   static const br = 'br';
   static const tableheader = "th";
@@ -65,6 +66,7 @@ class HTMLTags {
     HTMLTags.checkbox,
     HTMLTags.image,
     HTMLTags.section,
+    HTMLTags.label,
   ];
 }
 

lib/src/html_to_widgets.dart

@@ -5,6 +5,7 @@ import 'package:html/dom.dart' as dom;
 import 'package:html/parser.dart' show parse;
 import 'package:htmltopdfwidgets/src/attributes.dart';
 import 'package:htmltopdfwidgets/src/extension/int_extensions.dart';
+import 'package:htmltopdfwidgets/src/utils/app_assets.dart';
 import 'package:http/http.dart';
 
 import '../htmltopdfwidgets.dart';
@@ -58,6 +59,8 @@ class WidgetsHTMLDecoder {
     final result = <Widget>[];
     final delta = <TextSpan>[];
     TextAlign? textAlign;
+    bool checkbox = false;
+    bool alreadyChecked = false;
 
     ///find dom node in and check if its element or not than convert it according to its specs
     for (final domNode in domNodes) {
@@ -87,14 +90,38 @@ class WidgetsHTMLDecoder {
 
             delta.clear();
           }
+          if (checkbox) {
+            checkbox = false;
+
+            result.add(Row(children: [
+              SvgImage(
+                  svg: alreadyChecked
+                      ? AppAssets.checkedIcon
+                      : AppAssets.unCheckedIcon),
+              ...await _parseSpecialElements(
+                domNode,
+                type: BuiltInAttributeKey.bulletedList,
+              ),
+            ]));
+            alreadyChecked = false;
+          } else {
+            if (localName == HTMLTags.checkbox) {
+              final checked = domNode.attributes["type"];
+              if (checked != null && checked == "checkbox") {
+                checkbox = true;
+
+                alreadyChecked = domNode.attributes.keys.contains("checked");
+              }
+            }
+            result.addAll(
+              await _parseSpecialElements(
+                domNode,
+                type: BuiltInAttributeKey.bulletedList,
+              ),
+            );
+          }
 
           /// Handle special elements (e.g., headings, lists, images)
-          result.addAll(
-            await _parseSpecialElements(
-              domNode,
-              type: BuiltInAttributeKey.bulletedList,
-            ),
-          );
         }
       } else if (domNode is dom.Text) {
         if (delta.isNotEmpty && domNode.text.trim().isNotEmpty) {

lib/src/utils/app_assets.dart

@@ -0,0 +1,6 @@
+class AppAssets {
+  static const String checkedIcon =
+      '''<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m424-312 282-282-56-56-226 226-114-114-56 56 170 170ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z"/></svg>''';
+  static const String unCheckedIcon =
+      '''<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Z"/></svg>''';
+}

pubspec.yaml

@@ -1,6 +1,6 @@
 name: htmltopdfwidgets
 description: Htmlt to pdf widgets library convert html text to pdf widgets
-version: 1.0.2
+version: 1.0.3
 homepage: https://github.com/alihassan143/htmltopdfwidgets
 
 environment: