From 813793100b2d1baeba78ed3bb8f2efcbbbac8be1 Mon Sep 17 00:00:00 2001
From: the-airbender <57312080+the-airbender@users.noreply.github.com>
Date: Fri, 28 Apr 2023 14:54:00 +0530
Subject: [PATCH] ### 2.1.9 - Added a customisable option to make toolbar
 scrollable horizontally or vertically - Fixed `onFocusChanged` method not
 returning focus on iOS properly - Fixed text-change method is not returning
 text properly on Android - Fixed moving cursor to end after `setDelta` - Fix
 the white space in theme dark mode after adding minHeight property, thanks to
 `cabbagelol` for PR - Fix Mobile Web -  Clicking on toolbar icon does not
 toggle highlight color, and keyboard loses focus - Updated
 `webview_flutter_android`, `webview_flutter_wkwebview` to latest versions -
 Fix customToolBarList: ToolBarStyle.background adds table items #63 -
 Improved `onEditorCreated` callback functionality

---
 example/lib/main.dart                     |  85 ++++++-----
 example/pubspec.lock                      |  10 +-
 lib/src/quill_editor_wrapper.dart         | 163 ++++++++++++++++------
 lib/src/tool_bar.dart                     | 162 +++++++++++++++++++--
 lib/src/widgets/edit_table_drop_down.dart |  10 +-
 pubspec.yaml                              |   4 +-
 6 files changed, 327 insertions(+), 107 deletions(-)

diff --git a/example/lib/main.dart b/example/lib/main.dart
index 64c3ee0..e754123 100644
--- a/example/lib/main.dart
+++ b/example/lib/main.dart
@@ -26,15 +26,21 @@ class _MyAppState extends State<MyApp> {
     ToolBarStyle.italic,
     ToolBarStyle.align,
     ToolBarStyle.color,
+    ToolBarStyle.background,
+    ToolBarStyle.listBullet,
+    ToolBarStyle.listOrdered,
+    ToolBarStyle.clean,
+    ToolBarStyle.addTable,
+    ToolBarStyle.editTable,
   ];
 
-  final _toolbarColor = Colors.greenAccent.shade100;
+  final _toolbarColor = Colors.grey.shade200;
   final _backgroundColor = Colors.white70;
   final _toolbarIconColor = Colors.black87;
   final _editorTextStyle = const TextStyle(
       fontSize: 18, color: Colors.black, fontWeight: FontWeight.normal);
   final _hintTextStyle = const TextStyle(
-      fontSize: 18, color: Colors.teal, fontWeight: FontWeight.normal);
+      fontSize: 18, color: Colors.black12, fontWeight: FontWeight.normal);
 
   @override
   void initState() {
@@ -56,41 +62,44 @@ class _MyAppState extends State<MyApp> {
   Widget build(BuildContext context) {
     return SafeArea(
       child: Scaffold(
+        backgroundColor: Colors.white,
         resizeToAvoidBottomInset: true,
-        backgroundColor: Colors.white70,
-        body: Column(
+        body: Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           mainAxisAlignment: MainAxisAlignment.start,
           children: [
-            ToolBar(
-              toolBarColor: _toolbarColor,
-              padding: const EdgeInsets.all(8),
-              iconSize: 25,
-              iconColor: _toolbarIconColor,
-              activeIconColor: Colors.purple.shade300,
-              controller: controller,
-              alignment: WrapAlignment.start,
-              crossAxisAlignment: WrapCrossAlignment.center,
-              customButtons: [
-                InkWell(
-                    onTap: () => unFocusEditor(),
-                    child: const Icon(
-                      Icons.favorite,
-                      color: Colors.black,
-                    )),
-                InkWell(
-                    onTap: () async {
-                      var selectedText = await controller.getSelectedText();
-                      debugPrint('selectedText $selectedText');
-                      var selectedHtmlText =
-                          await controller.getSelectedHtmlText();
-                      debugPrint('selectedHtmlText $selectedHtmlText');
-                    },
-                    child: const Icon(
-                      Icons.add_circle,
-                      color: Colors.black,
-                    )),
-              ],
+            SizedBox(
+              width: 50,
+              child: ToolBar.scroll(
+                toolBarColor: _toolbarColor,
+                padding: const EdgeInsets.all(8),
+                iconSize: 25,
+                iconColor: _toolbarIconColor,
+                activeIconColor: Colors.greenAccent.shade400,
+                controller: controller,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                direction: Axis.vertical,
+                customButtons: [
+                  InkWell(
+                      onTap: () => unFocusEditor(),
+                      child: const Icon(
+                        Icons.favorite,
+                        color: Colors.black,
+                      )),
+                  InkWell(
+                      onTap: () async {
+                        var selectedText = await controller.getSelectedText();
+                        debugPrint('selectedText $selectedText');
+                        var selectedHtmlText =
+                            await controller.getSelectedHtmlText();
+                        debugPrint('selectedHtmlText $selectedHtmlText');
+                      },
+                      child: const Icon(
+                        Icons.add_circle,
+                        color: Colors.black,
+                      )),
+                ],
+              ),
             ),
             Flexible(
               fit: FlexFit.tight,
@@ -99,7 +108,7 @@ class _MyAppState extends State<MyApp> {
                 hintText: 'Hint text goes here',
                 controller: controller,
                 isEnabled: true,
-                minHeight: 300,
+                minHeight: 500,
                 textStyle: _editorTextStyle,
                 hintTextStyle: _hintTextStyle,
                 hintTextAlign: TextAlign.start,
@@ -108,7 +117,10 @@ class _MyAppState extends State<MyApp> {
                 backgroundColor: _backgroundColor,
                 onFocusChanged: (hasFocus) => debugPrint('has focus $hasFocus'),
                 onTextChanged: (text) => debugPrint('widget text change $text'),
-                onEditorCreated: () => debugPrint('Editor has been loaded'),
+                onEditorCreated: () {
+                  debugPrint('Editor has been loaded');
+                  setHtmlText('Testing text on load');
+                },
                 onEditorResized: (height) =>
                     debugPrint('Editor resized $height'),
                 onSelectionChanged: (sel) =>
@@ -127,8 +139,7 @@ class _MyAppState extends State<MyApp> {
                 textButton(
                     text: 'Set Text',
                     onPressed: () {
-                      setHtmlText(
-                          '<iframe src="https://www.youtube.com/embed/JCDfh5bs1xc" width="100%" height="315"</iframe>');
+                      setHtmlText('This text is set by you 🫵');
                     }),
                 textButton(
                     text: 'Get Text',
diff --git a/example/pubspec.lock b/example/pubspec.lock
index 0f8f19e..27e19e1 100644
--- a/example/pubspec.lock
+++ b/example/pubspec.lock
@@ -238,7 +238,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "2.1.7"
+    version: "2.1.8"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -328,10 +328,10 @@ packages:
     dependency: transitive
     description:
       name: webview_flutter_android
-      sha256: "9e223788e1954087dac30d813dc151f8e12f09f1139f116ce20b5658893f3627"
+      sha256: "5906c9aa8c88ed372b2ad3c88c942790b4fb16f73fdd1c0647b4d747d9cf5b3f"
       url: "https://pub.dev"
     source: hosted
-    version: "3.4.4"
+    version: "3.4.5"
   webview_flutter_platform_interface:
     dependency: transitive
     description:
@@ -344,10 +344,10 @@ packages:
     dependency: transitive
     description:
       name: webview_flutter_wkwebview
-      sha256: d601aba11ad8d4481e17a34a76fa1d30dee92dcbbe2c58b0df3120e9453099c7
+      sha256: "9a78d963cce191dd6a9df547301fc5c008bf3dae95a323ec281fff1284e0a037"
       url: "https://pub.dev"
     source: hosted
-    version: "3.2.3"
+    version: "3.2.4"
   win32:
     dependency: transitive
     description:
diff --git a/lib/src/quill_editor_wrapper.dart b/lib/src/quill_editor_wrapper.dart
index 03cec29..a6c41fd 100644
--- a/lib/src/quill_editor_wrapper.dart
+++ b/lib/src/quill_editor_wrapper.dart
@@ -4,6 +4,7 @@ import 'dart:math';
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
 import 'package:quill_html_editor/quill_html_editor.dart';
 import 'package:quill_html_editor/src/utils/hex_color.dart';
 import 'package:quill_html_editor/src/utils/string_util.dart';
@@ -124,26 +125,47 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
   bool isEnabled = true;
 
   late double _currentHeight;
-
+  late StreamSubscription<bool> _keyboardSubscription;
+  bool _isKeyboardVisible = false;
+  bool _hasFocus = false;
+  bool _editorLoaded = false;
   @override
   void initState() {
     isEnabled = widget.isEnabled;
     _currentHeight = widget.minHeight;
+
+    var keyboardVisibilityController = KeyboardVisibilityController();
+
+    _keyboardSubscription =
+        keyboardVisibilityController.onChange.listen((bool visible) {
+      _isKeyboardVisible = visible;
+      if (!kIsWeb) {
+        if (!_isKeyboardVisible) {
+          _unFocus();
+        }
+        if (widget.onFocusChanged != null) {
+          widget.onFocusChanged!(_hasFocus && _isKeyboardVisible);
+        }
+      }
+    });
     super.initState();
   }
 
   @override
   void dispose() {
+    _keyboardSubscription.cancel();
     _webviewController.dispose();
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
-    return LayoutBuilder(builder: (context, constraints) {
-      _initialContent = _getQuillPage(width: constraints.maxWidth);
-      return _buildEditorView(context: context, width: constraints.maxWidth);
-    });
+    return KeyboardVisibilityProvider(
+      child: LayoutBuilder(builder: (context, constraints) {
+        _initialContent = _getQuillPage(width: constraints.maxWidth);
+        return _buildEditorView(context: context, width: constraints.maxWidth);
+      }),
+    );
   }
 
   Widget _buildEditorView(
@@ -163,6 +185,9 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
           if (widget.text != null) {
             _setHtmlTextToEditor(htmlText: widget.text!);
           }
+          if (widget.onEditorCreated != null) {
+            widget.onEditorCreated!();
+          }
         });
       },
       dartCallBacks: {
@@ -200,6 +225,12 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
         DartCallback(
             name: 'OnTextChanged',
             callBack: (map) {
+              var tempText = "";
+              if (tempText == map) {
+                return;
+              } else {
+                tempText = map;
+              }
               try {
                 if (widget.controller._changeController != null) {
                   String finalText = "";
@@ -224,26 +255,30 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
         DartCallback(
             name: 'FocusChanged',
             callBack: (map) {
-              if (widget.onFocusChanged != null) {
-                widget.onFocusChanged!(map?.toString() == 'true');
+              _hasFocus = map?.toString() == 'true';
+              if (kIsWeb) {
+                if (widget.onFocusChanged != null) {
+                  widget.onFocusChanged!(_hasFocus);
+                }
               }
             }),
         DartCallback(
             name: 'OnSelectionChanged',
             callBack: (selection) {
               if (widget.onSelectionChanged != null) {
+                if (!_hasFocus) {
+                  if (widget.onFocusChanged != null) {
+                    _hasFocus = true;
+                    widget.onFocusChanged!(_hasFocus);
+                  }
+                }
                 widget.onSelectionChanged!(selection != null
                     ? SelectionModel.fromJson(jsonDecode(selection))
                     : SelectionModel(index: 0, length: 0));
               }
             }),
         DartCallback(
-            name: 'EditorLoaded',
-            callBack: (map) {
-              if (widget.onEditorCreated != null) {
-                widget.onEditorCreated!();
-              }
-            }),
+            name: 'EditorLoaded', callBack: (map) => _editorLoaded = map == 'true'),
       },
       webSpecificParams: const WebSpecificParams(
         printDebugInfo: false,
@@ -368,6 +403,7 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
 
   /// a private method to undo the history
   Future _undo() async {
+    return await _webviewController.callJsMethod("scrollToView", []);
     return await _webviewController.callJsMethod("undo", []);
   }
 
@@ -391,12 +427,16 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
         <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">    
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.4/quill.snow.min.css" />
           <!-- Include the Quill library -->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.4/quill.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.4/quill.js"></script>
         <style>
-        body{
-           margin:0px !important;
+        body, html{
+        -webkit-user-select: text !important;
+        margin:0px !important;
+        background-color:${widget.backgroundColor.toRGBA()};
+        color: ${widget.backgroundColor.toRGBA()};
         }
         .ql-editor.ql-blank::before{
+        -webkit-user-select: text !important;
           padding-left:${widget.hintTextPadding?.left ?? '0'}px !important;
           padding-right:${widget.hintTextPadding?.right ?? '0'}px !important;
           padding-top:${widget.hintTextPadding?.top ?? '0'}px !important;
@@ -409,8 +449,10 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
           background-color:${widget.backgroundColor.toRGBA()};
           font-style: ${StringUtil.getCssFontStyle(widget.hintTextStyle?.fontStyle)};
           font-weight: ${StringUtil.getCssFontWeight(widget.hintTextStyle?.fontWeight)};
+          
         }
         .ql-container.ql-snow{
+        -webkit-user-select: text !important;
           white-space:nowrap !important;
           margin-top:0px !important;
           margin-bottom:0px !important;
@@ -427,17 +469,17 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
           padding-top:${widget.padding?.top ?? '0'}px;
           padding-bottom:${widget.padding?.bottom ?? '0'}px;
           min-height:100%;
-          contenteditable=true !important;
+          contenteditable: true !important;
+          data-gramm: false !important;
+         
         }
         .ql-editor { 
-          -webkit-user-select: text;
+          -webkit-user-select: text !important;
           padding-left:${widget.padding?.left ?? '0'}px !important;
           padding-right:${widget.padding?.right ?? '0'}px !important;
           padding-top:${widget.padding?.top ?? '0'}px !important;
           padding-bottom:${widget.padding?.bottom ?? '0'}px !important;
         }
-        
-        
         .ql-toolbar { 
           position: absolute; 
           top: 0;
@@ -448,14 +490,17 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
           display:none; 
         }
         
+        .ql-editor.ql-blank:focus::before {
+          content: '';
+          }
         #toolbar-container{
          display:none;
         }     
-        #scrolling-container {
-          height: 100%;
-          min-height: 100%;
-          overflow-y: auto;
-         }
+        #scrolling-container {  
+          min-height: ${widget.minHeight}px !important;
+          overflow-y: scroll  !important;
+          -webkit-user-select: text !important;
+         } 
         </style>
    
         </head>
@@ -478,8 +523,8 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
         
         <!-- Create the editor container -->
         <div style="position:relative;margin-top:0em;">
-        <div id="editorcontainer" style= "min-height:0%; overflow-y:auto;margin-top:0em;">
-        <div id="editor" style="min-height:0%; width:100%;"></div>
+        <div id="editorcontainer" style= "min-height:${widget.minHeight}px; overflow-y:scroll;margin-top:0em;">
+        <div id="editor" style="min-height:${widget.minHeight}px; width:100%;"></div>
         </div>
         </div> 
         </div>
@@ -590,6 +635,35 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
                 console.log(e);
               } 
             }
+            
+            /// observer to listen to the editor div changes 
+            // select the target node
+            var target = document.querySelector('#editor');
+            
+            // create an observer instance
+            var tempText = "";
+            var observer = new MutationObserver(function(mutations) {
+                 var text = quilleditor.root.innerHTML; 
+                 if(text != tempText){
+                      tempText = text;
+                     if($kIsWeb) {
+                      OnTextChanged(text);
+                    } else {
+                      OnTextChanged.postMessage(text);
+                    }
+                     onRangeChanged(); 
+                     quilleditor.focus();
+                 }
+            });
+
+            // configuration of the observer:
+            var config = { attributes: true, childList: true, characterData: true, subtree: true };
+
+            // pass in the target node, as well as the observer options
+            observer.observe(target, config);
+    
+           // stops the listener
+           // // observer.disconnect();
 
             const Inline = Quill.import('blots/inline');
             class RequirementBlot extends Inline {}
@@ -605,6 +679,7 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
             var quilleditor = new Quill('#editor', {
               modules: {
                 toolbar: '#toolbar-container',
+                matchVisual: false,
                 table: true,
                 history: {
                   delay: 2000,
@@ -643,21 +718,9 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
               OnSelectionChanged(getSelectionRange());
               }else{
               OnSelectionChanged.postMessage(getSelectionRange());
-              }
-            });
-            
-            quilleditor.on('text-change', function(eventName, ...args) {
-               
-              // console.log('text changed');
-          
-              if($kIsWeb) {
-                OnTextChanged(quilleditor.root.innerHTML);
-              } else {
-                OnTextChanged.postMessage(quilleditor.root.innerHTML);
-              }
-               onRangeChanged();
+              }            
             });
-            
+                  
             function onRangeChanged() { 
               try {
                 var range = quilleditor.getSelection(true);
@@ -723,16 +786,15 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
             quilleditor.root.addEventListener("blur", function() {
                if($kIsWeb) {
                 FocusChanged(false);
-              } else {
-                FocusChanged.postMessage(false);
-              }
+              } 
             });
             
             quilleditor.root.addEventListener("focus", function() {
                if($kIsWeb) {
                 FocusChanged(true);
               } else {
-                FocusChanged.postMessage(true);
+              var focus  = quilleditor.hasFocus();
+                FocusChanged.postMessage(focus);
               }
             });
             
@@ -797,7 +859,8 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
             }
             
             function setHtmlText(htmlString) {
-              quilleditor.clipboard.dangerouslyPasteHTML(htmlString);         
+              quilleditor.clipboard.dangerouslyPasteHTML(htmlString);        
+              setTimeout(() => quilleditor.setSelection(quilleditor.getSelection().index + 100, 0), 10); 
               return '';
             }
             
@@ -805,12 +868,20 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
               try{
                const obj = JSON.parse(deltaMap);
                 quilleditor.setContents(obj);
+                setTimeout(() => quilleditor.setSelection(quilleditor.getSelection().index + 100, 0), 10);
               }catch(e){
                 console.log(e);
               }
               return '';
             }
             
+            function scrollToView(){
+               var target = document.querySelector('#editor');
+               target.scrollIntoView(false);
+               return '';
+            }
+           
+            
             function getDelta() {
               return JSON.stringify(quilleditor.getContents()); 
             }
diff --git a/lib/src/tool_bar.dart b/lib/src/tool_bar.dart
index 979b4ec..f22282a 100644
--- a/lib/src/tool_bar.dart
+++ b/lib/src/tool_bar.dart
@@ -120,7 +120,7 @@ class ToolBar extends StatefulWidget {
   ///    relative to each other in the main axis.
   ///  * [runAlignment], which controls how the runs are placed relative to each
   ///    other in the cross axis.
-  final WrapCrossAlignment crossAxisAlignment;
+  final dynamic crossAxisAlignment;
 
   /// Determines the order to lay children out horizontally and how to interpret
   /// `start` and `end` in the horizontal direction.
@@ -179,7 +179,78 @@ class ToolBar extends StatefulWidget {
   /// Defaults to [Clip.none].
   final Clip clipBehavior;
 
-  ///[ToolBar] widget to show the quill toolbar
+  /// How the children should be placed along the main axis.
+  ///
+  /// For example, [MainAxisAlignment.start], the default, places the children
+  /// at the start (i.e., the left for a [Row] or the top for a [Column]) of the
+  /// main axis.
+  final MainAxisAlignment? mainAxisAlignment;
+
+  /// How much space should be occupied in the main axis.
+  ///
+  /// After allocating space to children, there might be some remaining free
+  /// space. This value controls whether to maximize or minimize the amount of
+  /// free space, subject to the incoming layout constraints.
+  ///
+  /// If some children have a non-zero flex factors (and none have a fit of
+  /// [FlexFit.loose]), they will expand to consume all the available space and
+  /// there will be no remaining free space to maximize or minimize, making this
+  /// value irrelevant to the final layout.
+  final MainAxisSize? mainAxisSize;
+
+  /// Determines the order to lay children out horizontally and how to interpret
+  /// `start` and `end` in the horizontal direction.
+  ///
+  /// Defaults to the ambient [Directionality].
+  ///
+  /// If [textDirection] is [TextDirection.rtl], then the direction in which
+  /// text flows starts from right to left. Otherwise, if [textDirection] is
+  /// [TextDirection.ltr], then the direction in which text flows starts from
+  /// left to right.
+  ///
+  /// If the [direction] is [Axis.horizontal], this controls the order in which
+  /// the children are positioned (left-to-right or right-to-left), and the
+  /// meaning of the [mainAxisAlignment] property's [MainAxisAlignment.start] and
+  /// [MainAxisAlignment.end] values.
+  ///
+  /// If the [direction] is [Axis.horizontal], and either the
+  /// [mainAxisAlignment] is either [MainAxisAlignment.start] or
+  /// [MainAxisAlignment.end], or there's more than one child, then the
+  /// [textDirection] (or the ambient [`Directionality]) must not be null.
+  ///
+  /// If the [direction] is [Axis.vertical], this controls the meaning of the
+  /// [crossAxisAlignment] property's [CrossAxisAlignment.start] and
+  /// [CrossAxisAlignment.end] values.
+  ///
+  /// Determines the order to lay children out vertically and how to interpret
+  /// `start` and `end` in the vertical direction.
+  ///
+  /// Defaults to [VerticalDirection.down].
+  ///
+  /// If the [direction] is [Axis.vertical], this controls which order children
+  /// are painted in (down or up), the meaning of the [mainAxisAlignment]
+  /// property's [MainAxisAlignment.start] and [MainAxisAlignment.end] values.
+  ///
+  /// If the [direction] is [Axis.vertical], and either the [mainAxisAlignment]
+  /// is either [MainAxisAlignment.start] or [MainAxisAlignment.end], or there's
+  /// more than one child, then the [verticalDirection] must not be null.
+  ///
+  /// If the [direction] is [Axis.horizontal], this controls the meaning of the
+  /// [crossAxisAlignment] property's [CrossAxisAlignment.start] and
+  /// [CrossAxisAlignment.end] values.
+  ///
+  /// If aligning items according to their baseline, which baseline to use.
+  ///
+  /// This must be set if using baseline alignment. There is no default because there is no
+  /// way for the framework to know the correct baseline _a priori_.
+  final TextBaseline? textBaseline;
+
+  final bool? _isScrollable;
+
+  ///[ToolBar] widget to show the quill
+  /// The toolbar items will be auto aligned based on the screen's width or height
+  /// The behaviour of the widget's alignment is similar to [Wrap] widget
+
   ToolBar({
     this.direction = Axis.horizontal,
     this.alignment = WrapAlignment.start,
@@ -198,10 +269,47 @@ class ToolBar extends StatefulWidget {
     this.iconColor = Colors.black,
     this.activeIconColor = Colors.blue,
     this.toolBarColor = Colors.white,
-  }) : super(
+    this.mainAxisSize,
+  })  : assert(crossAxisAlignment is WrapCrossAlignment,
+            "Please pass WrapCrossAlignment, instead of CrossAxisAlignment"),
+        mainAxisAlignment = MainAxisAlignment.start,
+        textBaseline = TextBaseline.alphabetic,
+        _isScrollable = false,
+        super(
           key: controller.toolBarKey,
         );
 
+  ///[ToolBar.scroll] shows the widget in a single row/column
+  ///Please define the [direction], to make it a row or a column
+  ///the direction defaults to [Axis.horizontal]
+
+  ToolBar.scroll({
+    this.direction = Axis.horizontal,
+    this.textDirection,
+    this.verticalDirection = VerticalDirection.down,
+    this.clipBehavior = Clip.none,
+    this.toolBarConfig,
+    required this.controller,
+    this.customButtons,
+    this.padding,
+    this.iconSize = 25,
+    this.iconColor = Colors.black,
+    this.activeIconColor = Colors.blue,
+    this.toolBarColor = Colors.white,
+    this.crossAxisAlignment = CrossAxisAlignment.start,
+    this.mainAxisAlignment = MainAxisAlignment.start,
+    this.mainAxisSize = MainAxisSize.min,
+    this.textBaseline = TextBaseline.alphabetic,
+  })  : assert(crossAxisAlignment is CrossAxisAlignment,
+            "Please pass CrossAxisAlignment, instead of WrapCrossAlignment"),
+        spacing = 0.0,
+        runSpacing = 0.0,
+        alignment = WrapAlignment.start,
+        runAlignment = WrapAlignment.start,
+        _isScrollable = true,
+        super(
+          key: controller.toolBarKey,
+        );
   @override
   State<ToolBar> createState() => ToolBarState();
 }
@@ -254,6 +362,25 @@ class ToolBarState extends State<ToolBar> {
 
   @override
   Widget build(BuildContext context) {
+    if (widget._isScrollable!) {
+      return Container(
+        width: double.maxFinite,
+        decoration: BoxDecoration(
+          color: widget.toolBarColor,
+        ),
+        child: SingleChildScrollView(
+          scrollDirection: widget.direction,
+          child: Flex(
+            direction: widget.direction,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            textDirection: widget.textDirection,
+            verticalDirection: widget.verticalDirection,
+            clipBehavior: widget.clipBehavior,
+            children: _generateToolBar(context),
+          ),
+        ),
+      );
+    }
     return Container(
       width: double.maxFinite,
       decoration: BoxDecoration(
@@ -397,6 +524,8 @@ class ToolBarState extends State<ToolBar> {
           break;
         case ToolBarStyle.undo:
         case ToolBarStyle.redo:
+        case ToolBarStyle.editTable:
+        case ToolBarStyle.addTable:
         case ToolBarStyle.clearHistory:
           break;
       }
@@ -475,7 +604,7 @@ class ToolBarState extends State<ToolBar> {
               height: widget.iconSize,
               child: _getFontBackgroundColorWidget(i)),
         ));
-
+      } else if (toolbarItem.style == ToolBarStyle.addTable) {
         tempToolBarList.add(Padding(
           padding: _buttonPadding,
           child: SizedBox(
@@ -483,7 +612,7 @@ class ToolBarState extends State<ToolBar> {
               height: widget.iconSize,
               child: _getTablePickerWidget(i)),
         ));
-
+      } else if (toolbarItem.style == ToolBarStyle.editTable) {
         tempToolBarList.add(EditTableDropDown(
           padding: _buttonPadding,
           iconColor: widget.iconColor!,
@@ -611,6 +740,8 @@ class ToolBarState extends State<ToolBar> {
       case ToolBarStyle.undo:
       case ToolBarStyle.redo:
       case ToolBarStyle.clearHistory:
+      case ToolBarStyle.editTable:
+      case ToolBarStyle.addTable:
         return {'format': 'undo', 'value': ''};
     }
   }
@@ -742,7 +873,6 @@ class ToolBarState extends State<ToolBar> {
           _fontColorKey.currentState!.showOverlayOnTap();
         }
       },
-      position: ElTooltipPosition.bottomEnd,
       key: _fontColorKey,
       content: ColorPicker(
         onColorPicked: (color) {
@@ -794,7 +924,6 @@ class ToolBarState extends State<ToolBar> {
 
   Widget _getFontBackgroundColorWidget(int i) {
     return ElTooltip(
-      position: ElTooltipPosition.bottomEnd,
       onTap: () {
         if (_fontBgColorKey.currentState != null) {
           _fontBgColorKey.currentState!.showOverlayOnTap();
@@ -848,7 +977,6 @@ class ToolBarState extends State<ToolBar> {
     return ElTooltip(
       color: widget.toolBarColor!,
       distance: 0,
-      position: ElTooltipPosition.bottomCenter,
       onTap: () {
         if (_tablePickerKey.currentState != null) {
           _tablePickerKey.currentState!.showOverlayOnTap();
@@ -967,16 +1095,18 @@ class ToolBarItem extends StatelessWidget {
         return _getIconWidget(Icons.font_download_sharp);
       case ToolBarStyle.image:
         return _getIconWidget(Icons.image);
-      case ToolBarStyle.link:
-      case ToolBarStyle.video:
-      case ToolBarStyle.size:
-        return const SizedBox();
       case ToolBarStyle.undo:
         return _getIconWidget(Icons.undo_sharp);
       case ToolBarStyle.redo:
         return _getIconWidget(Icons.redo_sharp);
       case ToolBarStyle.clearHistory:
         return _getIconWidget(Icons.layers_clear_sharp);
+      case ToolBarStyle.link:
+      case ToolBarStyle.video:
+      case ToolBarStyle.size:
+      case ToolBarStyle.addTable:
+      case ToolBarStyle.editTable:
+        return const SizedBox();
     }
   }
 
@@ -1105,7 +1235,13 @@ enum ToolBarStyle {
   redo,
 
   /// [clearHistory] to undo the editor change
-  clearHistory
+  clearHistory,
+
+  /// [addTable] to add table to the editor
+  addTable,
+
+  /// [editTable] to edit rows, columns or delete table
+  editTable,
 
   ///font - later releases
 }
diff --git a/lib/src/widgets/edit_table_drop_down.dart b/lib/src/widgets/edit_table_drop_down.dart
index 6ede4e6..a4f004c 100644
--- a/lib/src/widgets/edit_table_drop_down.dart
+++ b/lib/src/widgets/edit_table_drop_down.dart
@@ -54,17 +54,19 @@ class _EditTableDropDownState extends State<EditTableDropDown> {
         height: widget.iconSize,
         child: ElTooltip(
           color: widget.dropDownColor,
-          distance: 0,
-          position: ElTooltipPosition.bottomEnd,
+          // distance: 0,
+          position: ElTooltipPosition.topCenter,
           onTap: () {
             if (_editTableETKey.currentState != null) {
               _editTableETKey.currentState!.showOverlayOnTap();
             }
           },
           key: _editTableETKey,
-          content: SizedBox(
-            width: 180,
+          content: Container(alignment: Alignment.center,
+            width: 200,
+            height: MediaQuery.of(context).size.width<450?350:null,
             child: ListView.builder(
+              padding: EdgeInsets.zero,
               shrinkWrap: true,
               itemCount: EditTableEnum.values.length,
               itemBuilder: (context, i) {
diff --git a/pubspec.yaml b/pubspec.yaml
index 683c724..f9408a9 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -23,9 +23,9 @@ dependencies:
   pointer_interceptor: ^0.9.3+4
   uuid: ^3.0.7
   webview_flutter: ^4.0.7
-  webview_flutter_android: ^3.4.4
+  webview_flutter_android: ^3.4.5
   webview_flutter_platform_interface: ^2.1.0
-  webview_flutter_wkwebview: ^3.2.3
+  webview_flutter_wkwebview: ^3.2.4
   flutter_keyboard_visibility: ^5.4.0
 
 dev_dependencies: