✨ Markdown toolbar

lib/screens/posts/post_editor.dart

@@ -3,6 +3,7 @@ import 'package:flutter_animate/flutter_animate.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:get/get.dart';
 import 'package:intl/intl.dart';
+import 'package:markdown_toolbar/markdown_toolbar.dart';
 import 'package:solian/controllers/post_editor_controller.dart';
 import 'package:solian/exts.dart';
 import 'package:solian/models/post.dart';
@@ -46,6 +47,7 @@ class PostPublishScreen extends StatefulWidget {
 
 class _PostPublishScreenState extends State<PostPublishScreen> {
   final _editorController = PostEditorController();
+  final _contentFocusNode = FocusNode();
 
   bool _isBusy = false;
 
@@ -99,6 +101,7 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
   @override
   void initState() {
     super.initState();
+    _editorController.contentController.addListener(() => setState(() {}));
     syncWidget();
   }
 
@@ -139,6 +142,7 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
           ],
         ),
         body: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             ListTile(
               tileColor: Theme.of(context).colorScheme.surfaceContainerLow,
@@ -167,56 +171,55 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
                 },
               ),
             ),
+            if (_editTo != null && _editTo!.isDraft != true)
+              MaterialBanner(
+                leading: const Icon(Icons.edit),
+                leadingPadding: const EdgeInsets.only(left: 10, right: 20),
+                dividerColor: Colors.transparent,
+                content: Text('postEditingNotify'.tr),
+                actions: notifyBannerActions,
+              ),
+            if (_replyTo != null)
+              ExpansionTile(
+                leading: const FaIcon(
+                  FontAwesomeIcons.reply,
+                  size: 18,
+                ).paddingOnly(left: 2),
+                title: Text('postReplyingNotify'.trParams(
+                  {'username': '@${widget.reply!.author.name}'},
+                )),
+                collapsedBackgroundColor:
+                    Theme.of(context).colorScheme.surfaceContainer,
+                children: [
+                  PostItem(
+                    item: _replyTo!,
+                    isReactable: false,
+                  ).paddingOnly(bottom: 8),
+                ],
+              ),
+            if (_repostTo != null)
+              ExpansionTile(
+                leading: const FaIcon(
+                  FontAwesomeIcons.retweet,
+                  size: 18,
+                ).paddingOnly(left: 2),
+                title: Text('postRepostingNotify'.trParams(
+                  {'username': '@${widget.repost!.author.name}'},
+                )),
+                collapsedBackgroundColor:
+                    Theme.of(context).colorScheme.surfaceContainer,
+                children: [
+                  PostItem(
+                    item: _repostTo!,
+                    isReactable: false,
+                  ).paddingOnly(bottom: 8),
+                ],
+              ),
             Expanded(
               child: ListView(
                 children: [
                   if (_isBusy)
                     const LinearProgressIndicator().animate().scaleX(),
-                  if (_editTo != null && _editTo!.isDraft != true)
-                    MaterialBanner(
-                      leading: const Icon(Icons.edit),
-                      leadingPadding:
-                          const EdgeInsets.only(left: 10, right: 20),
-                      dividerColor: Colors.transparent,
-                      content: Text('postEditingNotify'.tr),
-                      actions: notifyBannerActions,
-                    ),
-                  if (_replyTo != null)
-                    ExpansionTile(
-                      leading: const FaIcon(
-                        FontAwesomeIcons.reply,
-                        size: 18,
-                      ).paddingOnly(left: 2),
-                      title: Text('postReplyingNotify'.trParams(
-                        {'username': '@${widget.reply!.author.name}'},
-                      )),
-                      collapsedBackgroundColor:
-                          Theme.of(context).colorScheme.surfaceContainer,
-                      children: [
-                        PostItem(
-                          item: _replyTo!,
-                          isReactable: false,
-                        ).paddingOnly(bottom: 8),
-                      ],
-                    ),
-                  if (_repostTo != null)
-                    ExpansionTile(
-                      leading: const FaIcon(
-                        FontAwesomeIcons.retweet,
-                        size: 18,
-                      ).paddingOnly(left: 2),
-                      title: Text('postRepostingNotify'.trParams(
-                        {'username': '@${widget.repost!.author.name}'},
-                      )),
-                      collapsedBackgroundColor:
-                          Theme.of(context).colorScheme.surfaceContainer,
-                      children: [
-                        PostItem(
-                          item: _repostTo!,
-                          isReactable: false,
-                        ).paddingOnly(bottom: 8),
-                      ],
-                    ),
                   if (_realm != null)
                     MaterialBanner(
                       leading: const Icon(Icons.group),
@@ -240,8 +243,8 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
                       autocorrect: true,
                       keyboardType: TextInputType.multiline,
                       controller: _editorController.contentController,
-                      decoration: InputDecoration(
+                      focusNode: _contentFocusNode,
-                        border: InputBorder.none,
+                      decoration: InputDecoration.collapsed(
                         hintText: 'postContentPlaceholder'.tr,
                       ),
                       onTapOutside: (_) =>
@@ -407,6 +410,17 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
                             _editorController.editCategoriesAndTags(context);
                           },
                         ),
+                        MarkdownToolbar(
+                          hideImage: true,
+                          useIncludedTextField: false,
+                          backgroundColor: Colors.transparent,
+                          iconColor: Theme.of(context).colorScheme.onSurface,
+                          controller: _editorController.contentController,
+                          focusNode: _contentFocusNode,
+                          borderRadius:
+                              const BorderRadius.all(Radius.circular(20)),
+                          width: 40,
+                        ).paddingSymmetric(horizontal: 4),
                       ],
                     ).paddingSymmetric(horizontal: 6, vertical: 8),
                   ),
@@ -421,6 +435,7 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
 
   @override
   void dispose() {
+    _contentFocusNode.dispose();
     _editorController.dispose();
     super.dispose();
   }

pubspec.lock

@@ -538,10 +538,10 @@ packages:
     dependency: "direct main"
     description:
       name: flutter_cache_manager
-      sha256: ceff65d74d907b1b772e22cf04daad60fb472461638977d9fae8b00a63e01e3d
+      sha256: a77f77806a790eb9ba0118a5a3a936e81c4fea2b61533033b2b0c3d50bbde5ea
       url: "https://pub.dev"
     source: hosted
-    version: "3.3.3"
+    version: "3.4.0"
   flutter_card_swiper:
     dependency: "direct main"
     description:
@@ -960,6 +960,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "7.2.2"
+  markdown_toolbar:
+    dependency: "direct main"
+    description:
+      name: markdown_toolbar
+      sha256: "5f4e2548afe96cc2ccdad22da87d380e4726d2d3385ddbb7035aa94daf9a4d47"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.5.0"
   matcher:
     dependency: transitive
     description:
@@ -1889,10 +1897,10 @@ packages:
     dependency: transitive
     description:
       name: win32
-      sha256: a79dbe579cb51ecd6d30b17e0cae4e0ea15e2c0e66f69ad4198f22a6789e94f4
+      sha256: "015002c060f1ae9f41a818f2d5640389cc05283e368be19dc8d77cecb43c40c9"
       url: "https://pub.dev"
     source: hosted
-    version: "5.5.1"
+    version: "5.5.3"
   win32_registry:
     dependency: transitive
     description:

pubspec.yaml

@@ -65,6 +65,7 @@ dependencies:
   gal: ^2.3.0
   dio: ^5.5.0+1
   image_cropper: ^8.0.1
+  markdown_toolbar: ^0.5.0
 
 dev_dependencies:
   flutter_test: