✨ Markdown toolbar

2024-08-01 14:46:01 +08:00
parent d02ed68afa
commit 190bb34958
3 changed files with 75 additions and 51 deletions
--- a/lib/screens/posts/post_editor.dart
+++ b/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(
-                        border: InputBorder.none,
+                      focusNode: _contentFocusNode,
+                      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();
  }
--- a/pubspec.lock
+++ b/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:
--- a/pubspec.yaml
+++ b/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: