refactor: moving buttons into tabs.dart

example/lib/main.dart

@@ -12,18 +12,9 @@ class MyApp extends StatelessWidget {
     return MaterialApp(
       title: 'Flutter Demo',
       theme: ThemeData(
-        // This is the theme of your application.
-        //
-        // Try running your application with "flutter run". You'll see the
-        // application has a blue toolbar. Then, without quitting the app, try
-        // changing the primarySwatch below to Colors.green and then invoke
-        // "hot reload" (press "r" in the console where you ran "flutter run",
-        // or simply save your changes to "hot reload" in a Flutter IDE).
-        // Notice that the counter didn't reset back to zero; the application
-        // is not restarted.
         primarySwatch: Colors.blue,
       ),
-      home: MyHomePage(title: 'Flutter Demo Home Page'),
+      home: MyHomePage(title: 'Rich Editor Demo'),
     );
   }
 }

lib/src/models/button.dart

@@ -2,8 +2,9 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
 class Button {
+  String? slug;
   IconData? icon;
   Function? onTap;
 
-  Button({this.icon, this.onTap});
+  Button({this.slug, this.icon, this.onTap});
 }

lib/src/rendering/rich_editor.dart

@@ -1,5 +1,7 @@
 import 'dart:io';
 
+import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:rich_editor/src/services/local_server.dart';
 import 'package:rich_editor/src/widgets/tabs.dart';
@@ -65,7 +67,7 @@ class _RichEditorState extends State<RichEditor> {
     return Column(
       children: [
         GroupedTab(controller: _controller),
-        Flexible(
+        Expanded(
           child: WebView(
             key: _mapKey,
             // initialUrl:
@@ -82,6 +84,11 @@ class _RichEditorState extends State<RichEditor> {
               }
             },
             javascriptMode: JavascriptMode.unrestricted,
+            gestureNavigationEnabled: true,
+            gestureRecognizers: [
+              Factory(
+                      () => VerticalDragGestureRecognizer()..onUpdate = (_) {}),
+            ].toSet(),
             onWebResourceError: (e) {
               print("error ${e.description}");
             },

lib/src/utils/constants.dart

@@ -16,7 +16,7 @@ List<Button> buttons = [
   ),
   Button(
     icon: Icons.link,
-    onTap: (JavascriptExecutorBase javascriptExecutorBase) async {
+    onTap: (JavascriptExecutorBase javascriptExecutorBase, String link, String title) async {
       await javascriptExecutorBase.insertLink(
         'https://github.com/JideGuru',
         'Sample',
@@ -54,7 +54,11 @@ List<Button> buttons = [
     onTap: (JavascriptExecutorBase javascriptExecutorBase) async =>
         await javascriptExecutorBase.setSubscript(),
   ),
-  Button(icon: Icons.format_clear),
+  Button(
+    icon: Icons.format_clear,
+    onTap: (JavascriptExecutorBase javascriptExecutorBase) async =>
+        await javascriptExecutorBase.removeFormat(),
+  ),
   Button(
     icon: Icons.undo,
     onTap: (JavascriptExecutorBase javascriptExecutorBase) async =>
@@ -73,7 +77,7 @@ List<Button> buttons = [
   Button(
     icon: Icons.text_format,
     onTap: (JavascriptExecutorBase javascriptExecutorBase, String name) async =>
-        await javascriptExecutorBase.removeFormat(),
+        await javascriptExecutorBase.setPreformat(),
   ),
   Button(
     icon: Icons.font_download,

lib/src/widgets/insert_link_dialog.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+
+class InsertLinkDialog extends StatelessWidget {
+  TextEditingController link = TextEditingController();
+  TextEditingController label = TextEditingController();
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: Text('Insert Link'),
+      content: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text('Link'),
+          TextField(
+            controller: link,
+            decoration: InputDecoration(
+              hintText: 'type link here',
+            ),
+          ),
+          SizedBox(height: 20.0),
+          Text('Label'),
+          TextField(
+            controller: label,
+            decoration: InputDecoration(
+              hintText: 'type label text here',
+            ),
+          ),
+        ],
+      ),
+      actions: [
+        TextButton(
+          onPressed: () => Navigator.pop(context, [link.text, label.text]),
+          child: Text('Done'),
+        ),
+        TextButton(
+          onPressed: () => Navigator.pop(context),
+          child: Text('Cancel'),
+        ),
+      ],
+    );
+  }
+}

lib/src/widgets/tab_button.dart

@@ -29,7 +29,7 @@ class TabButton extends StatelessWidget {
                 padding: const EdgeInsets.all(5.0),
                 child: Icon(
                   icon,
-                  color: Theme.of(context).accentColor,
+                  // color: Theme.of(context).accentColor,
                 ),
               ),
             ),

lib/src/widgets/tabs.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:rich_editor/src/models/button.dart';
-import 'package:rich_editor/src/utils/constants.dart';
 import 'package:rich_editor/src/utils/javascript_executor_base.dart';
+import 'package:rich_editor/src/widgets/insert_link_dialog.dart';
 import 'package:rich_editor/src/widgets/tab_button.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 
@@ -28,13 +27,40 @@ class GroupedTab extends StatelessWidget {
               shrinkWrap: true,
               scrollDirection: Axis.horizontal,
               children: [
-                for (Button button in buttons)
+                TabButton(
-                  TabButton(
+                  icon: Icons.format_bold,
-                    icon: button.icon,
+                  onTap: () async {
-                    onTap: () async {
+                    await javascriptExecutorBase.setBold();
-                      button.onTap!(javascriptExecutorBase);
+                  },
-                    },
+                ),
-                  )
+                TabButton(
+                  icon: Icons.format_italic,
+                  onTap: () async {
+                    await javascriptExecutorBase.setItalic();
+                  },
+                ),
+                TabButton(
+                  icon: Icons.link,
+                  onTap: () async {
+                    var link = await showDialog(
+                      context: context,
+                      barrierDismissible: false,
+                      builder: (_) {
+                        return InsertLinkDialog();
+                      },
+                    );
+                    if(link != null)
+                      await javascriptExecutorBase.insertLink(link[0], link[1]);
+                  },
+                ),
+                TabButton(
+                  icon: Icons.image,
+                  onTap: () async {
+                    await javascriptExecutorBase.insertImage(
+                      'https://avatars.githubusercontent.com/u/24323581?v=4'
+                    );
+                  },
+                ),
               ],
             ),
           ),