Merge pull request #15 from codenameakshay/master

Added support for strikethrough, code, blockquote, separator and images
playmoweb · Jul 29, 2021 · 2940f0e · 2940f0e
2 parents 4794e60 + ca7fb8d
commit 2940f0e
Show file tree

Hide file tree

Showing 6 changed files with 335 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -7,11 +7,13 @@
 MarkdownEditableTextInput is a TextField Widget that allow you to convert easily what's in the TextField to Markdown.
 
 ## Features
-- [x] Convert to Bold, Italic, Title (h1,h2,h3), List and Link
+- [x] Convert to Bold, Italic, Strikethrough
+- [x] Convert to Code, Quote, Links
+- [x] Convert to Heading (H1, H2, H3, H4, H5, H6) and Links
 - [x] Support text direction
 
 ## Demo
-![](pictures/test_edition.gif)
+https://user-images.githubusercontent.com/60510869/119675122-65409f00-be5a-11eb-8cc4-c0f8757030ab.mp4
 
 ## Usage
 The color of the MarkdownTextInput is defined by the color set in your Theme :

diff --git a/lib/format_markdown.dart b/lib/format_markdown.dart
@@ -17,6 +17,10 @@ class FormatMarkdown {
         changedData = '_${data.substring(fromIndex, toIndex)}_';
         replaceCursorIndex = 1;
         break;
+      case MarkdownType.strikethrough:
+        changedData = '~~${data.substring(fromIndex, toIndex)}~~';
+        replaceCursorIndex = 2;
+        break;
       case MarkdownType.link:
         changedData = '[${data.substring(fromIndex, toIndex)}](${data.substring(fromIndex, toIndex)})';
         replaceCursorIndex = 3;
@@ -34,6 +38,27 @@ class FormatMarkdown {
         }).join();
         replaceCursorIndex = 0;
         break;
+      case MarkdownType.code:
+        changedData = '```${data.substring(fromIndex, toIndex)}```';
+        replaceCursorIndex = 3;
+        break;
+      case MarkdownType.blockquote:
+        var index = 0;
+        final splitedData = data.substring(fromIndex, toIndex).split('\n');
+        changedData = splitedData.map((value) {
+          index++;
+          return index == splitedData.length ? '> $value' : '> $value\n';
+        }).join();
+        replaceCursorIndex = 0;
+        break;
+      case MarkdownType.separator:
+        changedData = '\n------\n${data.substring(fromIndex, toIndex)}';
+        replaceCursorIndex = 0;
+        break;
+      case MarkdownType.image:
+        changedData = '![${data.substring(fromIndex, toIndex)}](${data.substring(fromIndex, toIndex)})';
+        replaceCursorIndex = 3;
+        break;
     }
 
     final cursorIndex = changedData.length;
@@ -67,6 +92,9 @@ enum MarkdownType {
   /// For _italic_ text
   italic,
 
+  /// For ~~strikethrough~~ text
+  strikethrough,
+
   /// For [link](https://flutter.dev)
   link,
 
@@ -77,5 +105,20 @@ enum MarkdownType {
   ///   * Item 1
   ///   * Item 2
   ///   * Item 3
-  list
+  list,
+
+  /// For ```code``` text
+  code,
+
+  /// For :
+  ///   > Item 1
+  ///   > Item 2
+  ///   > Item 3
+  blockquote,
+
+  /// For adding ------
+  separator,
+
+  /// For ![Alt text](https://picsum.photos/500/500)
+  image,
 }
diff --git a/lib/markdown_text_input.dart b/lib/markdown_text_input.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:markdown_editable_textinput/format_markdown.dart';
+import 'package:expandable/expandable.dart';
 
 /// Widget with markdown buttons
 class MarkdownTextInput extends StatefulWidget {
@@ -91,64 +92,149 @@ class _MarkdownTextInputState extends State<MarkdownTextInput> {
               contentPadding: const EdgeInsets.symmetric(vertical: 15, horizontal: 10),
             ),
           ),
-          Material(
-            color: Theme.of(context).cardColor,
-            borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10)),
-            child: Row(
-              children: [
-                InkWell(
-                  key: const Key('bold_button'),
-                  onTap: () => onTap(MarkdownType.bold),
-                  child: const Padding(
-                    padding: EdgeInsets.all(10),
-                    child: Icon(
-                      Icons.format_bold,
+          SizedBox(
+            height: 44,
+            child: Material(
+              color: Theme.of(context).cardColor,
+              borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10)),
+              child: ListView(
+                scrollDirection: Axis.horizontal,
+                children: [
+                  InkWell(
+                    key: const Key('bold_button'),
+                    onTap: () => onTap(MarkdownType.bold),
+                    child: const Padding(
+                      padding: EdgeInsets.all(10),
+                      child: Icon(
+                        Icons.format_bold,
+                      ),
+                    ),
+                  ),
+                  InkWell(
+                    key: const Key('italic_button'),
+                    onTap: () => onTap(MarkdownType.italic),
+                    child: const Padding(
+                      padding: EdgeInsets.all(10),
+                      child: Icon(
+                        Icons.format_italic,
+                      ),
+                    ),
+                  ),
+                  InkWell(
+                    key: const Key('strikethrough_button'),
+                    onTap: () => onTap(MarkdownType.strikethrough),
+                    child: const Padding(
+                      padding: EdgeInsets.all(10),
+                      child: Icon(
+                        Icons.format_strikethrough,
+                      ),
+                    ),
+                  ),
+                  InkWell(
+                    key: const Key('code_button'),
+                    onTap: () => onTap(MarkdownType.code),
+                    child: const Padding(
+                      padding: EdgeInsets.all(10),
+                      child: Icon(
+                        Icons.code,
+                      ),
                     ),
                   ),
-                ),
-                InkWell(
-                  key: const Key('italic_button'),
-                  onTap: () => onTap(MarkdownType.italic),
-                  child: const Padding(
-                    padding: EdgeInsets.all(10),
-                    child: Icon(
-                      Icons.format_italic,
+                  ExpandableNotifier(
+                    child: Expandable(
+                      key: Key('H#_button'),
+                      collapsed: ExpandableButton(
+                        child: const Center(
+                          child: Padding(
+                            padding: EdgeInsets.all(10),
+                            child: Text(
+                              'H#',
+                              style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
+                            ),
+                          ),
+                        ),
+                      ),
+                      expanded: Container(
+                        color: Colors.white10,
+                        child: Row(
+                          children: [
+                            for (int i = 1; i <= 6; i++)
+                              InkWell(
+                                key: Key('H${i}_button'),
+                                onTap: () => onTap(MarkdownType.title, titleSize: i),
+                                child: Padding(
+                                  padding: const EdgeInsets.all(10),
+                                  child: Text(
+                                    'H$i',
+                                    style: TextStyle(fontSize: (18 - i).toDouble(), fontWeight: FontWeight.w700),
+                                  ),
+                                ),
+                              ),
+                            ExpandableButton(
+                              child: const Padding(
+                                padding: EdgeInsets.all(10),
+                                child: Icon(
+                                  Icons.close,
+                                ),
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                    ),
+                  ),
+                  InkWell(
+                    key: const Key('link_button'),
+                    onTap: () => onTap(MarkdownType.link),
+                    child: const Padding(
+                      padding: EdgeInsets.all(10),
+                      child: Icon(
+                        Icons.link,
+                      ),
+                    ),
+                  ),
+                  InkWell(
+                    key: const Key('list_button'),
+                    onTap: () => onTap(MarkdownType.list),
+                    child: const Padding(
+                      padding: EdgeInsets.all(10),
+                      child: Icon(
+                        Icons.list,
+                      ),
                     ),
                   ),
-                ),
-                for (int i = 1; i <= 3; i++)
                   InkWell(
-                    key: Key('H${i}_button'),
-                    onTap: () => onTap(MarkdownType.title, titleSize: i),
-                    child: Padding(
-                      padding: const EdgeInsets.all(10),
-                      child: Text(
-                        'H$i',
-                        style: TextStyle(fontSize: (18 - i).toDouble(), fontWeight: FontWeight.w700),
+                    key: const Key('quote_button'),
+                    onTap: () => onTap(MarkdownType.blockquote),
+                    child: const Padding(
+                      padding: EdgeInsets.all(10),
+                      child: Icon(
+                        Icons.format_quote_rounded,
                       ),
                     ),
                   ),
-                InkWell(
-                  key: const Key('link_button'),
-                  onTap: () => onTap(MarkdownType.link),
-                  child: const Padding(
-                    padding: EdgeInsets.all(10),
-                    child: Icon(
-                      Icons.link,
+                  InkWell(
+                    key: const Key('separator_button'),
+                    onTap: () => onTap(MarkdownType.separator),
+                    child: const Padding(
+                      padding: EdgeInsets.all(10),
+                      child: Icon(
+                        Icons.minimize_rounded,
+                      ),
                     ),
                   ),
-                ),
-                InkWell(
-                  key: const Key('list_button'),
-                  onTap: () => onTap(MarkdownType.list),
-                  child: const Padding(
-                    padding: EdgeInsets.all(10),
-                    child: Icon(
-                      Icons.list,
+                  InkWell(
+                    key: const Key('image_button'),
+                    onTap: () => onTap(MarkdownType.image),
+                    child: const Padding(
+                      padding: EdgeInsets.all(10),
+                      child: Icon(
+                        Icons.image_rounded,
+                      ),
                     ),
                   ),
-                ),
-              ],
+                ],
+              ),
             ),
           )
         ],

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -11,6 +11,7 @@ dependencies:
   flutter:
     sdk: flutter
   effective_dart: ^1.3.1
+  expandable: ^5.0.1
 
 
 dev_dependencies: