### 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
the-airbender · May 6, 2023 · c5ad91a · c5ad91a
1 parent 37d2125
commit c5ad91a
Show file tree

Hide file tree

Showing 10 changed files with 253 additions and 74 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,14 @@
+### 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
+
 ### 2.1.8
 - Added `setDelta` & `getDelta` methods,
 - Fixed bug:getText() returns empty string if QuillEditor contains only <img> or <iframe> tags

diff --git a/README.md b/README.md
@@ -6,10 +6,12 @@ Quill Html Editor is a HTML rich text editor for Android, iOS, and Web, it is bu
 
 ## Features
 - Highly customizable **Editor** and **Toolbar** widgets
+- Supports `Delta` format, can pass delta with `setDelta`and get with `getDelta` methods.
 - Supports copy pasting the RichText from other files or webpages
 - Because the Toolbar is completely detached from editor, it can be placed anywhere in the page, as per the requirement
 - We can also add custom buttons to the toolbar
 - Supports Embedding Images, Videos, Inserting Tables
+- Set or get text in html/delta formats
 
 ## Quill Html Editor Demo
 Please go to [Demo Page](https://the-airbender.github.io/) to try out the Quill Editor on Web
@@ -131,10 +133,22 @@ We can also add custom buttons to our **ToolBar** as shown below
 ```dart
  await controller.setText(text);
 ```
+
+##### To get the text in delta format
+```dart
+ await controller.getDelta();
+```
+
+##### To set the text in delta format
+```dart
+ controller.setDelta(deltaMap);
+```
+
 ##### To insert the html string to editor
 ```dart
- await controller.insertText(text, index: 10);  /// index is optional
+/// index is optional
 /// If the index is not passed, the text will be inserted at the cursor position
+await controller.insertText(text, index: 10);  
 ```
 ##### To clear the editor
 ```dart

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -112,7 +112,7 @@ class _MyAppState extends State<MyApp> {
                 textStyle: _editorTextStyle,
                 hintTextStyle: _hintTextStyle,
                 hintTextAlign: TextAlign.start,
-                padding: const EdgeInsets.only(left: 0, top: 0),
+                padding: const EdgeInsets.only(left: 10, top: 10),
                 hintTextPadding: const EdgeInsets.only(left: 20),
                 backgroundColor: _backgroundColor,
                 onFocusChanged: (hasFocus) => debugPrint('has focus $hasFocus'),

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -238,7 +238,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "2.1.8"
+    version: "2.1.9"
   sky_engine:
     dependency: transitive
     description: flutter

diff --git a/lib/src/quill_editor_wrapper.dart b/lib/src/quill_editor_wrapper.dart
@@ -128,7 +128,6 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
   late StreamSubscription<bool> _keyboardSubscription;
   bool _isKeyboardVisible = false;
   bool _hasFocus = false;
-  bool _editorLoaded = false;
   @override
   void initState() {
     isEnabled = widget.isEnabled;
@@ -277,8 +276,7 @@ class QuillHtmlEditorState extends State<QuillHtmlEditor> {
                     : SelectionModel(index: 0, length: 0));
               }
             }),
-        DartCallback(
-            name: 'EditorLoaded', callBack: (map) => _editorLoaded = map == 'true'),
+        DartCallback(name: 'EditorLoaded', callBack: (map) {}),
       },
       webSpecificParams: const WebSpecificParams(
         printDebugInfo: false,
@@ -403,7 +401,6 @@ 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", []);
   }
 

diff --git a/lib/src/tool_bar.dart b/lib/src/tool_bar.dart
@@ -610,7 +610,7 @@ class ToolBarState extends State<ToolBar> {
           child: SizedBox(
               width: widget.iconSize,
               height: widget.iconSize,
-              child: _getTablePickerWidget(i)),
+              child: _getTablePickerWidget(i, context)),
         ));
       } else if (toolbarItem.style == ToolBarStyle.editTable) {
         tempToolBarList.add(EditTableDropDown(
@@ -973,13 +973,17 @@ class ToolBarState extends State<ToolBar> {
     );
   }
 
-  Widget _getTablePickerWidget(int i) {
+  Widget _getTablePickerWidget(int i, BuildContext context) {
     return ElTooltip(
       color: widget.toolBarColor!,
       distance: 0,
       onTap: () {
-        if (_tablePickerKey.currentState != null) {
-          _tablePickerKey.currentState!.showOverlayOnTap();
+        if (MediaQuery.of(context).size.width < 480) {
+          _showTablePickerDialog(context);
+        } else {
+          if (_tablePickerKey.currentState != null) {
+            _tablePickerKey.currentState!.showOverlayOnTap();
+          }
         }
       },
       key: _tablePickerKey,
@@ -1004,6 +1008,64 @@ class ToolBarState extends State<ToolBar> {
       ),
     );
   }
+
+  void _showTablePickerDialog(BuildContext context) {
+    showDialog(
+        context: context,
+        builder: (context) {
+          return AlertDialog(
+            shape:
+                RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+            contentPadding: EdgeInsets.zero,
+            content: WebViewAware(
+              child: Builder(
+                builder: (context) {
+                  return SizedBox(
+                    width: 300,
+                    height: 310,
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Row(
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            const SizedBox(
+                              width: 15,
+                            ),
+                            const Expanded(
+                                child: Text(
+                              'Select Rows x Columns',
+                              style: TextStyle(
+                                  fontSize: 16, fontWeight: FontWeight.w600),
+                            )),
+                            IconButton(
+                                onPressed: () => Navigator.of(context).pop(),
+                                icon: const Icon(Icons.close))
+                          ],
+                        ),
+                        Expanded(
+                          child: TablePicker(
+                            rowCount: 8,
+                            width: 300,
+                            onTablePicked: (int row, int column) {
+                              widget.controller.insertTable(row, column);
+                              Navigator.of(context).pop();
+                            },
+                          ),
+                        ),
+                        const SizedBox(
+                          height: 10,
+                        )
+                      ],
+                    ),
+                  );
+                },
+              ),
+            ),
+          );
+        });
+  }
 }
 
 ///[ToolBarItem] toolbaritem widget to show buttons based on style

diff --git a/lib/src/widgets/edit_table_drop_down.dart b/lib/src/widgets/edit_table_drop_down.dart
@@ -54,26 +54,18 @@ class _EditTableDropDownState extends State<EditTableDropDown> {
         height: widget.iconSize,
         child: ElTooltip(
           color: widget.dropDownColor,
-          // distance: 0,
-          position: ElTooltipPosition.topCenter,
+          distance: 0,
           onTap: () {
-            if (_editTableETKey.currentState != null) {
-              _editTableETKey.currentState!.showOverlayOnTap();
+            if (MediaQuery.of(context).size.width < 480) {
+              _showEditTableSheet(true, context);
+            } else {
+              if (_editTableETKey.currentState != null) {
+                _editTableETKey.currentState!.showOverlayOnTap();
+              }
             }
           },
           key: _editTableETKey,
-          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) {
-                return _getEditTableItem(EditTableEnum.values.toList()[i]);
-              },
-            ),
-          ),
+          content: _editTableListView(false, context),
           child: SizedBox(
             width: widget.iconSize,
             height: widget.iconSize,
@@ -87,7 +79,8 @@ class _EditTableDropDownState extends State<EditTableDropDown> {
     );
   }
 
-  Widget _getEditTableItem(EditTableEnum type) {
+  Widget _getEditTableItem(
+      EditTableEnum type, BuildContext context, bool isMobile) {
     String value = "";
     String imagePath = ImageConstant.kiInsertRowBelowPng;
 
@@ -131,6 +124,7 @@ class _EditTableDropDownState extends State<EditTableDropDown> {
             child: Row(
               mainAxisAlignment: MainAxisAlignment.start,
               mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.center,
               children: [
                 SizedBox(
                     width: widget.iconSize,
@@ -139,29 +133,127 @@ class _EditTableDropDownState extends State<EditTableDropDown> {
                       imagePath,
                       color: widget.iconColor,
                     )),
+                const SizedBox(
+                  width: 8,
+                ),
                 Expanded(
-                  child: Padding(
-                    padding: const EdgeInsets.all(8.0),
-                    child: Text(
-                      value,
-                      style: TextStyle(
-                          fontWeight: FontWeight.w500, color: widget.iconColor),
-                    ),
+                  child: Text(
+                    value,
+                    style: TextStyle(
+                        fontWeight: FontWeight.w500, color: widget.iconColor),
                   ),
                 ),
               ],
             ),
           ),
           onTap: () {
             widget.onOptionSelected(type);
-            if (_editTableETKey.currentState != null) {
-              _editTableETKey.currentState!.hideOverlay();
+            if (isMobile) {
+              Navigator.of(context).pop();
+            } else {
+              if (_editTableETKey.currentState != null) {
+                _editTableETKey.currentState!.hideOverlay();
+              }
             }
           },
         ),
       ),
     );
   }
+
+  void _showEditTableSheet(bool isMobileView, BuildContext context) {
+    showDialog(
+        context: context,
+        builder: (context) {
+          return _editTableListView(isMobileView, context);
+        });
+  }
+
+  Widget _editTableListView(bool isMobileView, BuildContext context) {
+    if (isMobileView) {
+      return AlertDialog(
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+          contentPadding: EdgeInsets.zero,
+          content: WebViewAware(
+            child: Builder(builder: (context) {
+              return SizedBox(
+                width: 400,
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Row(
+                      children: const [
+                        Expanded(
+                          child: Padding(
+                            padding: EdgeInsets.only(left: 8.0),
+                            child: Text(
+                              'Edit Table',
+                              style: TextStyle(
+                                  fontSize: 16, fontWeight: FontWeight.bold),
+                            ),
+                          ),
+                        ),
+                        CloseButton(),
+                      ],
+                    ),
+                    Flexible(
+                      fit: FlexFit.loose,
+                      child: Padding(
+                        padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                        child: MediaQuery.of(context).size.width < 380
+                            ? ListView.builder(
+                                shrinkWrap: true,
+                                itemCount: EditTableEnum.values.length,
+                                itemBuilder: (context, i) {
+                                  return _getEditTableItem(
+                                      EditTableEnum.values.toList()[i],
+                                      context,
+                                      isMobileView);
+                                })
+                            : GridView.builder(
+                                shrinkWrap: true,
+                                itemCount: EditTableEnum.values.length,
+                                gridDelegate:
+                                    SliverGridDelegateWithFixedCrossAxisCount(
+                                        crossAxisCount:
+                                            MediaQuery.of(context).size.width <
+                                                    380
+                                                ? 1
+                                                : 2,
+                                        childAspectRatio: 1 / .3),
+                                itemBuilder: (context, i) {
+                                  return _getEditTableItem(
+                                      EditTableEnum.values.toList()[i],
+                                      context,
+                                      isMobileView);
+                                }),
+                      ),
+                    ),
+                    const SizedBox(
+                      height: 10,
+                    )
+                  ],
+                ),
+              );
+            }),
+          ));
+    }
+
+    return SizedBox(
+      width: 200,
+      height: MediaQuery.of(context).size.width < 450 ? 350 : null,
+      child: ListView.builder(
+        reverse: true,
+        padding: EdgeInsets.zero,
+        shrinkWrap: true,
+        itemCount: EditTableEnum.values.length,
+        itemBuilder: (context, i) {
+          return _getEditTableItem(
+              EditTableEnum.values.toList()[i], context, isMobileView);
+        },
+      ),
+    );
+  }
 }
 
 ///[EditTableEnum] enum options for edit table dropdown

diff --git a/lib/src/widgets/input_url_widget.dart b/lib/src/widgets/input_url_widget.dart
@@ -85,7 +85,7 @@ class _InputUrlWidgetState extends State<InputUrlWidget> {
       return InkWell(
         onTap: () async {
           await widget.controller.getSelectionRange().then((selectionModel) {
-            showBottomSheet(
+            showModalBottomSheet(
                 context: context,
                 builder: (context) {
                   return _getTextFieldBytType(false, onDoneLastClicked,