feat: added javascript text commands

lib/src/extensions/extensions.dart

@@ -0,0 +1,9 @@
+import 'package:flutter/material.dart';
+
+extension ColorX on Color {
+  String toHexColorString() => '#${value.toString().replaceAll('ColorSwatch(',
+      '').replaceAll('Color(0xff', '').replaceAll('MaterialColor(', '')
+      .replaceAll('MaterialAccentColor(', '').replaceAll('primary value: '
+      'Color(0xff', '').replaceAll('primary', '').replaceAll('value:', '')
+      .replaceAll(')', '').trim()}';
+}

lib/src/rendering/rich_editor.dart

@@ -27,14 +27,18 @@ class _RichEditorState extends State<RichEditor> {
   Widget build(BuildContext context) {
     return Column(
       children: [
-        GroupedTab(),
+        GroupedTab(
+          controller: _controller,
+        ),
         Flexible(
           child: WebView(
             initialUrl: 'file:///android_asset/flutter_assets/packages/rich_editor/assets/editor/editor.html',
             onWebViewCreated: (WebViewController controller) {
-              _controller = _controller;
+              _controller = controller;
+              // print();
               setState(() {});
             },
+            javascriptMode: JavascriptMode.unrestricted,
           ),
           // child: InAppWebView(
           //   initialFile: 'packages/rich_editor/assets/editor/index.html',

lib/src/utils/javascript_executor_base.dart

@@ -0,0 +1,133 @@
+import 'package:flutter/material.dart';
+import 'package:rich_editor/src/extensions/extensions.dart';
+import 'package:webview_flutter/webview_flutter.dart';
+
+class JavaScriptExecutorBase {
+  static executeJavascript(WebViewController controller, String command) async {
+    return await controller.evaluateJavascript('editor.$command');
+  }
+
+  static setHtml(WebViewController controller, String html) async {
+    String? baseUrl;
+    await executeJavascript(
+        controller, "setHtml('" + encodeHtml(html) + "', '$baseUrl');");
+  }
+
+  static getHtml(WebViewController controller) async {
+    String? html = await executeJavascript(controller, 'getEncodedHtml()');
+    String? decodedHtml = Uri.decodeFull(html!);
+    if (decodedHtml.startsWith('"') && decodedHtml.endsWith('"')) {
+      decodedHtml = decodedHtml.substring(1, decodedHtml.length - 1);
+    }
+    return decodedHtml;
+  }
+
+  // Text commands
+  static undo(WebViewController controller) async {
+    await executeJavascript(controller, "undo()");
+  }
+
+  static redo(WebViewController controller) async {
+    await executeJavascript(controller, "redo()");
+  }
+
+  static setBold(WebViewController controller) async {
+    await executeJavascript(controller, "setBold()");
+  }
+
+  static setItalic(WebViewController controller) async {
+    await executeJavascript(controller, "setItalic()");
+  }
+
+  static setUnderline(WebViewController controller) async {
+    await executeJavascript(controller, "setUnderline()");
+  }
+
+  static setSubscript(WebViewController controller) async {
+    await executeJavascript(controller, "setSubscript()");
+  }
+
+  static setSuperscript(WebViewController controller) async {
+    await executeJavascript(controller, "setSuperscript()");
+  }
+
+  static setStrikeThrough(WebViewController controller) async {
+    await executeJavascript(controller, "setStrikeThrough()");
+  }
+
+  static setTextColor(WebViewController controller, Color? color) async {
+    String? hex = color!.toHexColorString();
+    await executeJavascript(controller, "setTextColor('$hex')");
+  }
+
+  static setFontName(WebViewController controller, String fontName) async {
+    await executeJavascript(controller, "setFontName('$fontName')");
+  }
+
+  static setFontSize(WebViewController controller, int fontSize) async {
+    if (fontSize < 1 || fontSize > 7) {
+      throw ("Font size should have a value between 1-7");
+    }
+    await executeJavascript(controller, "setFontSize('$fontSize')");
+  }
+
+  static setHeading(WebViewController controller, int heading) async {
+    await executeJavascript(controller, "setHeading('$heading')");
+  }
+
+  static setFormattingToParagraph(WebViewController controller) async {
+    await executeJavascript(controller, "setFormattingToParagraph()");
+  }
+
+  static setPreformat(WebViewController controller) async {
+    await executeJavascript(controller, "setPreformat()");
+  }
+
+  static setBlockQuote(WebViewController controller) async {
+    await executeJavascript(controller, "setBlockQuote()");
+  }
+
+  static removeFormat(WebViewController controller) async {
+    await executeJavascript(controller, "removeFormat()");
+  }
+
+  static setJustifyLeft(WebViewController controller) async {
+    await executeJavascript(controller, "setJustifyLeft()");
+  }
+
+  static setJustifyCenter(WebViewController controller) async {
+    await executeJavascript(controller, "setJustifyCenter()");
+  }
+
+  static setJustifyRight(WebViewController controller) async {
+    await executeJavascript(controller, "setJustifyRight()");
+  }
+
+  static setJustifyFull(WebViewController controller) async {
+    await executeJavascript(controller, "setJustifyFull()");
+  }
+
+  static setIndent(WebViewController controller) async {
+    await executeJavascript(controller, "setIndent()");
+  }
+
+  static setOutdent(WebViewController controller) async {
+    await executeJavascript(controller, "setOutdent()");
+  }
+
+  static insertBulletList(WebViewController controller) async {
+    await executeJavascript(controller, "insertBulletList()");
+  }
+
+  static insertNumberedList(WebViewController controller) async {
+    await executeJavascript(controller, "insertNumberedList()");
+  }
+
+  static decodeHtml(String html) {
+    return Uri.decodeFull(html);
+  }
+
+  static encodeHtml(String html) {
+    return Uri.encodeFull(html);
+  }
+}

lib/src/widgets/tab_button.dart

@@ -1,9 +1,10 @@
 import 'package:flutter/material.dart';
 
 class TabButton extends StatelessWidget {
-  final IconData icon;
+  final IconData? icon;
+  final Function? onTap;
 
-  TabButton({this.icon = Icons.format_bold});
+  TabButton({this.icon, this.onTap});
 
   @override
   Widget build(BuildContext context) {
@@ -22,7 +23,7 @@ class TabButton extends StatelessWidget {
           type: MaterialType.transparency,
           child: InkWell(
             borderRadius: BorderRadius.all(Radius.circular(5.0)),
-            onTap: () {},
+            onTap: () => onTap!(),
             child: Center(
               child: Padding(
                 padding: const EdgeInsets.all(5.0),

lib/src/widgets/tabs.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:rich_editor/constants.dart';
+import 'package:rich_editor/src/utils/constants.dart';
 import 'package:rich_editor/src/models/button.dart';
 import 'package:rich_editor/src/widgets/tab_button.dart';
 import 'package:webview_flutter/webview_flutter.dart';
@@ -22,14 +22,15 @@ class GroupedTab extends StatelessWidget {
               scrollDirection: Axis.horizontal,
               children: [
                 for(Button button in buttons)
-                  InkWell(
+                  TabButton(
-                    onTap: () {
+                    icon: button.icon,
+                    onTap: () async {
                       print('BOLDDD');
-                      controller?.evaluateJavascript('setBold()');
+                      // await controller?.evaluateJavascript('editor.undo()');
+                      await controller?.evaluateJavascript('editor.setBold()');
+                      String? html = await controller?.evaluateJavascript('editor.getEncodedHtml()');
+                      print(Uri.decodeFull(html!));
                     },
-                    child: TabButton(
-                      icon: button.icon,
-                    ),
                   )
               ],
             ),