feat: added more editor settings

README.md

@@ -34,6 +34,15 @@ Based on https://github.com/dankito/RichTextEditor, but for Flutter.
       RichEditor(
         key: keyEditor,
         value: 'initial html here',
+        placeholder: 'Start typing',
+        // backgroundColor: Colors.blueGrey, // Editor's bg color
+        // baseTextColor: Colors.white,
+        // editor padding
+        padding: EdgeInsets.symmetric(horizontal: 5.0),
+        // font name
+        baseFontFamily: 'sans-serif',
+        // Position of the editing bar (BarPosition.TOP or BarPosition.BOTTOM)
+        barPosition: BarPosition.TOP,
         // You can return a Link (maybe you need to upload the image to your
         // storage before displaying in the editor or you can also use base64
         getImageUrl: (image) {

example/lib/main.dart

@@ -101,12 +101,16 @@ class _MyHomePageState extends State<MyHomePage> {
 // <h4>Heading 4</h4>
 // <h5>Heading 5</h5>
 // <h6>Heading 6</h6>
-//         ''',
+//         ''', // initial HTML data
         placeholder: 'Start typing',
-        // backgroundColor: Colors.blueGrey,
+        // backgroundColor: Colors.blueGrey, // Editor's bg color
         // baseTextColor: Colors.white,
+        // editor padding
         padding: EdgeInsets.symmetric(horizontal: 5.0),
+        // font name
         baseFontFamily: 'sans-serif',
+        // Position of the editing bar (BarPosition.TOP or BarPosition.BOTTOM)
+        barPosition: BarPosition.TOP,
         // You can return a Link (maybe you need to upload the image to your
         // storage before displaying in the editor or you can also use base64
         getImageUrl: (image) {

lib/rich_editor.dart

@@ -3,3 +3,4 @@ library rich_editor;
 export 'src/rendering/rich_editor.dart';
 export 'src/widgets/editor_tool_bar.dart';
 export 'src/widgets/tab_button.dart';
+export 'src/models/enum.dart';

lib/src/models/enum.dart

@@ -42,3 +42,5 @@ enum CommandName {
   TOGGLE_GROUPED_TEXT_STYLES_COMMANDS_VIEW,
   TOGGLE_GROUPED_INSERT_COMMANDS_COMMANDS_VIEW
 }
+
+enum BarPosition {TOP, BOTTOM}

lib/src/rendering/rich_editor.dart

@@ -4,6 +4,7 @@ import 'dart:io';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
+import 'package:rich_editor/src/models/enum.dart';
 import 'package:rich_editor/src/services/local_server.dart';
 import 'package:rich_editor/src/utils/javascript_executor_base.dart';
 import 'package:rich_editor/src/widgets/editor_tool_bar.dart';
@@ -16,6 +17,7 @@ class RichEditor extends StatefulWidget {
   final EdgeInsets? padding;
   final String? placeholder;
   final String? baseFontFamily;
+  final BarPosition barPosition;
   final Function(File image)? getImageUrl;
   final Function(File video)? getVideoUrl;
 
@@ -27,6 +29,7 @@ class RichEditor extends StatefulWidget {
     this.padding,
     this.placeholder,
     this.baseFontFamily,
+    this.barPosition = BarPosition.TOP,
     this.getImageUrl,
     this.getVideoUrl,
   }) : super(key: key);
@@ -89,11 +92,14 @@ class RichEditorState extends State<RichEditor> {
   Widget build(BuildContext context) {
     return Column(
       children: [
-        EditorToolBar(
+        Visibility(
+          visible: widget.barPosition == BarPosition.TOP,
+          child: EditorToolBar(
             controller: _controller,
             getImageUrl: widget.getImageUrl,
             javascriptExecutor: javascriptExecutor,
           ),
+        ),
         Expanded(
           child: WebView(
             key: _mapKey,
@@ -120,7 +126,15 @@ class RichEditorState extends State<RichEditor> {
               print("error ${e.description}");
             },
           ),
-        )
+        ),
+        Visibility(
+          visible: widget.barPosition == BarPosition.BOTTOM,
+          child: EditorToolBar(
+            controller: _controller,
+            getImageUrl: widget.getImageUrl,
+            javascriptExecutor: javascriptExecutor,
+          ),
+        ),
       ],
     );
   }
@@ -192,4 +206,14 @@ class RichEditorState extends State<RichEditor> {
     html = await javascriptExecutor.getCurrentHtml();
     return html == '<p>​</p>';
   }
+
+  /// Enable Editing (If editing is disabled)
+  enableEditing() async {
+    await javascriptExecutor.setInputEnabled(true);
+  }
+
+  /// Disable Editing (Could be used for a 'view mode')
+  disableEditing() async {
+    await javascriptExecutor.setInputEnabled(false);
+  }
 }

lib/src/utils/javascript_executor_base.dart

@@ -55,113 +55,113 @@ class JavascriptExecutorBase {
 
   // Text commands
   undo() async {
-    await executeJavascript("undo()");
+    await executeJavascript("undo();");
   }
 
   redo() async {
-    await executeJavascript("redo()");
+    await executeJavascript("redo();");
   }
 
   setBold() async {
-    await executeJavascript("setBold()");
+    await executeJavascript("setBold();");
   }
 
   setItalic() async {
-    await executeJavascript("setItalic()");
+    await executeJavascript("setItalic();");
   }
 
   setUnderline() async {
-    await executeJavascript("setUnderline()");
+    await executeJavascript("setUnderline();");
   }
 
   setSubscript() async {
-    await executeJavascript("setSubscript()");
+    await executeJavascript("setSubscript();");
   }
 
   setSuperscript() async {
-    await executeJavascript("setSuperscript()");
+    await executeJavascript("setSuperscript();");
   }
 
   setStrikeThrough() async {
-    await executeJavascript("setStrikeThrough()");
+    await executeJavascript("setStrikeThrough();");
   }
 
   setTextColor(Color? color) async {
     String? hex = color!.toHexColorString();
-    await executeJavascript("setTextColor('$hex')");
+    await executeJavascript("setTextColor('$hex');");
   }
 
   setTextBackgroundColor(Color? color) async {
     String? hex = color!.toHexColorString();
-    await executeJavascript("setTextBackgroundColor('$hex')");
+    await executeJavascript("setTextBackgroundColor('$hex');");
   }
 
   setFontName(String fontName) async {
-    await executeJavascript("setFontName('$fontName')");
+    await executeJavascript("setFontName('$fontName');");
   }
 
   setFontSize(int fontSize) async {
     if (fontSize < 1 || fontSize > 7) {
       throw ("Font size should have a value between 1-7");
     }
-    await executeJavascript("setFontSize('$fontSize')");
+    await executeJavascript("setFontSize('$fontSize');");
   }
 
   setHeading(int heading) async {
-    await executeJavascript("setHeading('$heading')");
+    await executeJavascript("setHeading('$heading');");
   }
 
   setFormattingToParagraph() async {
-    await executeJavascript("setFormattingToParagraph()");
+    await executeJavascript("setFormattingToParagraph();");
   }
 
   setPreformat() async {
-    await executeJavascript("setPreformat()");
+    await executeJavascript("setPreformat();");
   }
 
   setBlockQuote() async {
-    await executeJavascript("setBlockQuote()");
+    await executeJavascript("setBlockQuote();");
   }
 
   removeFormat() async {
-    await executeJavascript("removeFormat()");
+    await executeJavascript("removeFormat();");
   }
 
   setJustifyLeft() async {
-    await executeJavascript("setJustifyLeft()");
+    await executeJavascript("setJustifyLeft();");
   }
 
   setJustifyCenter() async {
-    await executeJavascript("setJustifyCenter()");
+    await executeJavascript("setJustifyCenter();");
   }
 
   setJustifyRight() async {
-    await executeJavascript("setJustifyRight()");
+    await executeJavascript("setJustifyRight();");
   }
 
   setJustifyFull() async {
-    await executeJavascript("setJustifyFull()");
+    await executeJavascript("setJustifyFull();");
   }
 
   setIndent() async {
-    await executeJavascript("setIndent()");
+    await executeJavascript("setIndent();");
   }
 
   setOutdent() async {
-    await executeJavascript("setOutdent()");
+    await executeJavascript("setOutdent();");
   }
 
   insertBulletList() async {
-    await executeJavascript("insertBulletList()");
+    await executeJavascript("insertBulletList();");
   }
 
   insertNumberedList() async {
-    await executeJavascript("insertNumberedList()");
+    await executeJavascript("insertNumberedList();");
   }
 
   // Insert element
   insertLink(String url, String title) async {
-    await executeJavascript("insertLink('$url', '$title')");
+    await executeJavascript("insertLink('$url', '$title');");
   }
 
   /// The rotation parameter is used to signal that the image is rotated and should be rotated by CSS by given value.
@@ -243,6 +243,10 @@ class JavascriptExecutorBase {
     await executeJavascript("setHeight('" + px.toString() + "px');");
   }
 
+  setInputEnabled(bool inputEnabled) async {
+    await executeJavascript("setInputEnabled($inputEnabled);");
+  }
+
   static decodeHtml(String html) {
     return Uri.decodeFull(html);
   }

lib/src/widgets/editor_tool_bar.dart

@@ -183,7 +183,6 @@ class EditorToolBar extends StatelessWidget {
                           return FontsDialog();
                         },
                       );
-                      print(command);
                       if (command != null)
                         await javascriptExecutor.setFontName(command);
                     },
@@ -299,7 +298,6 @@ class EditorToolBar extends StatelessWidget {
                         return CheckDialog();
                       },
                     );
-                    print(text);
                     if (text != null)
                       await javascriptExecutor.insertCheckbox(text);
                   },