added reset and clear buttons

Author: OmkarDabade

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.2.12 - 30-June-2022
+* Added clear and reset buttons in toolbar
+* Added readOnly option in Split Markdown Field
+
 ## 0.2.11+1 - 10-June-2022
 * Minor fixes
 

example/lib/main.dart

@@ -44,6 +44,7 @@ class _HomeScreenState extends State<HomeScreen> {
             // expands: true,
           ),
           SplittedMarkdownFormField(
+            markdownSyntax: '## Headline',
             decoration: InputDecoration(
               hintText: 'Splitted Markdown FormField',
             ),

example/pubspec.lock

@@ -115,7 +115,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.2.11+1"
+    version: "0.2.12"
   matcher:
     dependency: transitive
     description:

lib/widgets/markdown_auto_preview.dart

@@ -16,6 +16,7 @@ class MarkdownAutoPreview extends StatefulWidget {
     this.expandableBackground,
     this.maxLines,
     this.minLines,
+    this.markdownSyntax,
     this.emojiConvert = false,
     this.enableToolBar = true,
     this.showEmojiSelection = true,
@@ -26,6 +27,13 @@ class MarkdownAutoPreview extends StatefulWidget {
     this.decoration = const InputDecoration(isDense: true),
   }) : super(key: key);
 
+  /// Markdown syntax to reset the field to
+  ///
+  /// ## Headline
+  /// - some text here
+  ///
+  final String? markdownSyntax;
+
   /// For enable toolbar options
   ///
   /// if false, toolbar widget will not display
@@ -192,8 +200,6 @@ class _MarkdownAutoPreviewState extends State<MarkdownAutoPreview> {
     return FocusScope(
       debugLabel: 'Markdown-Form-Field-FocusNode',
       onFocusChange: (focus) {
-        // print('Focus Changed: $focus');
-
         setState(() {
           _focused = focus;
         });
@@ -219,7 +225,7 @@ class _MarkdownAutoPreviewState extends State<MarkdownAutoPreview> {
                 child: MarkdownBody(
                   key: const ValueKey<String>("zmarkdown-parse-body"),
                   data: _internalController.text == ""
-                      ? "Type here. . ."
+                      ? "_Markdown text_"
                       : _internalController.text,
                 ),
               ),
@@ -239,25 +245,20 @@ class _MarkdownAutoPreviewState extends State<MarkdownAutoPreview> {
               // show toolbar
               if (!widget.readOnly)
                 MarkdownToolbar(
+                  markdownSyntax: widget.markdownSyntax,
                   // key: const ValueKey<String>("zmarkdowntoolbar"),
                   controller: _internalController,
                   autoCloseAfterSelectEmoji: widget.autoCloseAfterSelectEmoji,
                   bringEditorToFocus: () {
-                    // print('bringEditorToFocus');
-
                     if (!_textFieldFocusNode.hasFocus) {
                       setState(() {
                         _focused = true;
                       });
 
-                      // print('Brought Editor to focus');
-
                       _textFieldFocusNode.requestFocus();
                     }
                   },
                   onPreviewChanged: () {
-                    // print('onPreviewChanged');
-
                     // Remove focus first
                     _internalFocus.unfocus();
 

lib/widgets/markdown_field.dart

@@ -122,8 +122,7 @@ class MarkdownField extends StatelessWidget {
     return Padding(
       padding: padding,
       child: TextField(
-        key: key,
-        // const ValueKey<String>("markdown_editor_plus"),
+        // key: const ValueKey<String>("markdown_editor_plus"),
         maxLines: expands ? null : maxLines,
         minLines: expands ? null : minLines,
         expands: expands,

lib/widgets/markdown_toolbar.dart

@@ -19,10 +19,12 @@ class MarkdownToolbar extends StatelessWidget {
   final bool showPreviewButton;
   final bool showEmojiSelection;
   final VoidCallback? onActionCompleted;
+  final String? markdownSyntax;
 
   MarkdownToolbar({
     Key? key,
     this.onPreviewChanged,
+    this.markdownSyntax,
     required this.controller,
     this.emojiConvert = true,
     this.unfocus,
@@ -57,6 +59,31 @@ class MarkdownToolbar extends StatelessWidget {
                 onPressedButton: onPreviewChanged,
                 tooltip: 'Show/Hide markdown preview',
               ),
+
+            // Clear the field
+            ToolbarItem(
+              key: const ValueKey<String>("toolbar_clear_action"),
+              icon: FontAwesomeIcons.trashCan,
+              onPressedButton: () {
+                controller.clear();
+                onActionCompleted?.call();
+              },
+              tooltip: 'Clear the text field',
+            ),
+
+            // Reset the text field
+            ToolbarItem(
+              key: const ValueKey<String>("toolbar_reset_action"),
+              icon: FontAwesomeIcons.arrowRotateLeft,
+              onPressedButton: () {
+                if (markdownSyntax != null) {
+                  controller.text = markdownSyntax!;
+                  onActionCompleted?.call();
+                }
+              },
+              tooltip: 'Reset the text field to specified format',
+            ),
+
             // select single line
             ToolbarItem(
               key: const ValueKey<String>("toolbar_selection_action"),
@@ -154,7 +181,7 @@ class MarkdownToolbar extends StatelessWidget {
                 ToolbarItem(
                   key: const ValueKey<String>("checkbox"),
                   icon: FontAwesomeIcons.solidSquareCheck,
-                  tooltip: 'Checked box',
+                  tooltip: 'Checked checkbox',
                   onPressedButton: () {
                     toolbar.action("- [x] ", "");
                     onActionCompleted?.call();
@@ -163,7 +190,7 @@ class MarkdownToolbar extends StatelessWidget {
                 ToolbarItem(
                   key: const ValueKey<String>("uncheckbox"),
                   icon: FontAwesomeIcons.square,
-                  tooltip: 'Unchecked box',
+                  tooltip: 'Unchecked checkbox',
                   onPressedButton: () {
                     toolbar.action("- [ ] ", "");
                     onActionCompleted?.call();
@@ -175,7 +202,7 @@ class MarkdownToolbar extends StatelessWidget {
             if (showEmojiSelection)
               ToolbarItem(
                 key: const ValueKey<String>("toolbar_emoji_action"),
-                icon: FontAwesomeIcons.solidFaceSmile,
+                icon: FontAwesomeIcons.faceSmile,
                 tooltip: 'Select emoji',
                 onPressedButton: () async {
                   await _showModalSelectEmoji(context, controller.selection);

lib/widgets/splitted_markdown_form_field.dart

@@ -19,6 +19,8 @@ class SplittedMarkdownFormField extends StatefulWidget {
     this.validator,
     this.autovalidateMode,
     this.onSaved,
+    this.markdownSyntax,
+    this.readOnly = false,
     this.expands = false,
     this.emojiConvert = false,
     this.enableToolBar = true,
@@ -28,11 +30,25 @@ class SplittedMarkdownFormField extends StatefulWidget {
     this.decoration = const InputDecoration(isDense: true),
   }) : super(key: key);
 
+  /// Markdown syntax to reset the field to
+  ///
+  /// ## Headline
+  /// - some text here
+  ///
+  final String? markdownSyntax;
+
   /// For enable toolbar options
   ///
   /// if false, toolbar widget will not display
   final bool enableToolBar;
 
+  /// Whether the text can be changed.
+  ///
+  /// When this is set to true, the text cannot be modified by any shortcut or keyboard operation. The text is still selectable.
+  ///
+  /// Defaults to false. Must not be null.
+  final bool readOnly;
+
   /// Enable Emoji options
   ///
   /// if false, Emoji selection widget will not be displayed
@@ -207,6 +223,7 @@ class _SplittedMarkdownFormFieldState extends State<SplittedMarkdownFormField> {
               children: [
                 Expanded(
                   child: TextFormField(
+                    readOnly: widget.readOnly,
                     controller: _internalController,
                     cursorColor: widget.cursorColor,
                     focusNode: _focusNode,
@@ -236,8 +253,9 @@ class _SplittedMarkdownFormFieldState extends State<SplittedMarkdownFormField> {
                   child: MarkdownBody(
                     // key: const ValueKey<String>("zmarkdown-parse-body"),
                     data: _internalController.text == ""
-                        ? "**Text in markdown**"
+                        ? "_Markdown text_"
                         : _internalController.text,
+                    selectable: true,
                   ),
                 ),
               ],
@@ -246,6 +264,7 @@ class _SplittedMarkdownFormFieldState extends State<SplittedMarkdownFormField> {
             // show toolbar
             if (widget.enableToolBar)
               MarkdownToolbar(
+                markdownSyntax: widget.markdownSyntax,
                 showPreviewButton: false,
                 // key: const ValueKey<String>("zmarkdowntoolbar"),
                 controller: _internalController,

pubspec.yaml

@@ -2,7 +2,7 @@ name: markdown_editor_plus
 description: A TextField Widget that allow you to convert easily what's in the
   TextField to Markdown with custom toolbar support.
 
-version: 0.2.11+1
+version: 0.2.12
 homepage: https://github.com/OmkarDabade/markdown_editor_plus
 repository: https://github.com/OmkarDabade/markdown_editor_plus