Merge pull request #127 from ZhuJHua/dev

feat(markdown): add support for markdown diary
ZhuJHua · Jan 21, 2025 · b31c741 · b31c741
2 parents 3c5dea3 + 581655b
commit b31c741
Show file tree

Hide file tree

Showing 8 changed files with 1,439 additions and 58 deletions.
diff --git a/lib/components/markdown_bar/markdown_bar.dart b/lib/components/markdown_bar/markdown_bar.dart
diff --git a/lib/components/markdown_bar/parser.dart b/lib/components/markdown_bar/parser.dart
diff --git a/lib/pages/edit/edit_logic.dart b/lib/pages/edit/edit_logic.dart
@@ -35,12 +35,16 @@ class EditLogic extends GetxController {
   final EditState state = EditState();
 
   //标题
-  late TextEditingController titleTextEditingController =
+  late final TextEditingController titleTextEditingController =
       TextEditingController();
 
   //编辑器控制器
   late QuillController quillController;
 
+  // markdown控制器
+  late final TextEditingController markdownTextEditingController =
+      TextEditingController();
+
   //聚焦对象
   late FocusNode contentFocusNode = FocusNode();
   late FocusNode titleFocusNode = FocusNode();
@@ -93,6 +97,7 @@ class EditLogic extends GetxController {
     titleFocusNode.dispose();
     contentFocusNode.dispose();
     quillController.dispose();
+    markdownTextEditingController.dispose();
     _timer?.cancel();
     _timer = null;
     super.onClose();
@@ -564,4 +569,12 @@ class EditLogic extends GetxController {
     }
     update(['CategoryName']);
   }
+
+  void renderMarkdown() {
+    state.renderMarkdown.value = !state.renderMarkdown.value;
+  }
+
+  void focusContent() {
+    if (!contentFocusNode.hasFocus) contentFocusNode.requestFocus();
+  }
 }
diff --git a/lib/pages/edit/edit_state.dart b/lib/pages/edit/edit_state.dart
@@ -53,6 +53,9 @@ class EditState {
   // 日记的类型
   late DiaryType type;
 
+  // 是否渲染markdown
+  RxBool renderMarkdown = false.obs;
+
   // 自动获取天气
   bool get autoWeather => PrefUtil.getValue<bool>('autoWeather')!;
 

diff --git a/lib/pages/edit/edit_view.dart b/lib/pages/edit/edit_view.dart
@@ -6,14 +6,18 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_quill/flutter_quill.dart';
 import 'package:image_picker/image_picker.dart';
-import 'package:markdown_toolbar/markdown_toolbar.dart';
+import 'package:markdown_widget/config/configs.dart';
+import 'package:markdown_widget/widget/markdown.dart';
 import 'package:mood_diary/common/values/border.dart';
 import 'package:mood_diary/common/values/colors.dart';
+import 'package:mood_diary/common/values/diary_type.dart';
 import 'package:mood_diary/components/base/sheet.dart';
 import 'package:mood_diary/components/category_add/category_add_view.dart';
 import 'package:mood_diary/components/expand_button/expand_button_view.dart';
 import 'package:mood_diary/components/lottie_modal/lottie_modal.dart';
+import 'package:mood_diary/components/markdown_bar/markdown_bar.dart';
 import 'package:mood_diary/components/mood_icon/mood_icon_view.dart';
+import 'package:mood_diary/components/quill_embed/audio_embed.dart';
 import 'package:mood_diary/components/quill_embed/image_embed.dart';
 import 'package:mood_diary/components/quill_embed/text_indent.dart';
 import 'package:mood_diary/components/quill_embed/video_embed.dart';
@@ -23,8 +27,6 @@ import 'package:mood_diary/main.dart';
 import 'package:mood_diary/utils/theme_util.dart';
 import 'package:refreshed/refreshed.dart';
 
-import '../../common/values/diary_type.dart';
-import '../../components/quill_embed/audio_embed.dart';
 import 'edit_logic.dart';
 
 class EditPage extends StatelessWidget {
@@ -853,61 +855,116 @@ class EditPage extends StatelessWidget {
 
     Widget markdownToolBar() {
       return Row(
-        spacing: 4.0,
+        spacing: 8.0,
         children: [
           IconButton.filled(
             icon: const Icon(Icons.keyboard_command_key),
             style: const ButtonStyle(
                 tapTargetSize: MaterialTapTargetSize.shrinkWrap),
             onPressed: () {
-              showFloatingModalBottomSheet(
-                context: context,
-                builder: (context) {
-                  return buildDetail();
-                },
-              );
+              logic.renderMarkdown();
+              // showFloatingModalBottomSheet(
+              //   context: context,
+              //   builder: (context) {
+              //     return buildDetail();
+              //   },
+              // );
             },
           ),
-          const Expanded(
+          Expanded(
             child: SingleChildScrollView(
               scrollDirection: Axis.horizontal,
-              child: MarkdownToolbar(useIncludedTextField: false),
+              child: MarkdownToolbar(
+                useIncludedTextField: false,
+                collapsable: false,
+                controller: logic.markdownTextEditingController,
+                focusNode: logic.contentFocusNode,
+                backgroundColor: colorScheme.surfaceContainer,
+                iconColor: colorScheme.onSurface,
+                dropdownTextColor: colorScheme.onSurface,
+                borderRadius: BorderRadius.circular(20),
+                width: 40,
+                height: 40,
+              ),
             ),
           ),
         ],
       );
     }
 
+    Widget buildContent() {
+      if (state.type == DiaryType.markdown) {
+        return Positioned.fill(
+          child: Obx(() {
+            return AnimatedSwitcher(
+              duration: const Duration(milliseconds: 300),
+              child: !state.renderMarkdown.value
+                  ? GestureDetector(
+                      onTap: logic.focusContent,
+                      behavior: HitTestBehavior.translucent,
+                      child: Align(
+                        alignment: Alignment.topCenter,
+                        child: TextField(
+                          controller: logic.markdownTextEditingController,
+                          focusNode: logic.contentFocusNode,
+                          maxLength: null,
+                          decoration: InputDecoration(
+                              border: InputBorder.none,
+                              hintText: l10n.editContent,
+                              contentPadding:
+                                  const EdgeInsets.fromLTRB(16, 20, 16, 20),
+                              hintStyle: textStyle.bodyLarge?.copyWith(
+                                fontSize: 20,
+                                height: 1.5,
+                                color: Colors.grey.withValues(alpha: 0.6),
+                              )),
+                          maxLines: null,
+                        ),
+                      ),
+                    )
+                  : MarkdownWidget(
+                      config: colorScheme.brightness == Brightness.dark
+                          ? MarkdownConfig.darkConfig
+                          : MarkdownConfig.defaultConfig,
+                      data: logic.markdownTextEditingController.text,
+                      padding: const EdgeInsets.fromLTRB(16, 20, 16, 20),
+                    ),
+            );
+          }),
+        );
+      } else {
+        return QuillEditor.basic(
+          focusNode: logic.contentFocusNode,
+          controller: logic.quillController,
+          config: QuillEditorConfig(
+            padding: const EdgeInsets.fromLTRB(16, 20, 16, 20),
+            placeholder: l10n.editContent,
+            expands: true,
+            paintCursorAboveText: true,
+            keyboardAppearance: CupertinoTheme.maybeBrightnessOf(context) ??
+                Theme.of(context).brightness,
+            customStyles:
+                ThemeUtil.getInstance(context, customColorScheme: colorScheme),
+            embedBuilders: [
+              if (state.type == DiaryType.richText) ...[
+                ImageEmbedBuilder(isEdit: true),
+                VideoEmbedBuilder(isEdit: true),
+                AudioEmbedBuilder(isEdit: true),
+              ],
+              TextIndentEmbedBuilder(isEdit: true),
+            ],
+          ),
+        );
+      }
+    }
+
     Widget buildWriting() {
       return Column(
         children: [
           Flexible(
             child: Stack(
-              alignment: Alignment.center,
               children: [
-                QuillEditor.basic(
-                  focusNode: logic.contentFocusNode,
-                  controller: logic.quillController,
-                  config: QuillEditorConfig(
-                    padding: const EdgeInsets.fromLTRB(16, 20, 16, 20),
-                    placeholder: l10n.editContent,
-                    expands: true,
-                    paintCursorAboveText: true,
-                    keyboardAppearance:
-                        CupertinoTheme.maybeBrightnessOf(context) ??
-                            Theme.of(context).brightness,
-                    customStyles: ThemeUtil.getInstance(context,
-                        customColorScheme: colorScheme),
-                    embedBuilders: [
-                      if (state.type == DiaryType.richText) ...[
-                        ImageEmbedBuilder(isEdit: true),
-                        VideoEmbedBuilder(isEdit: true),
-                        AudioEmbedBuilder(isEdit: true),
-                      ],
-                      TextIndentEmbedBuilder(isEdit: true),
-                    ],
-                  ),
-                ),
+                buildContent(),
                 Positioned(
                     top: 2,
                     left: 16,
@@ -924,7 +981,11 @@ class EditPage extends StatelessWidget {
             ),
           ),
           Padding(
-            padding: const EdgeInsets.all(16.0),
+            padding: const EdgeInsets.only(
+              left: 16.0,
+              right: 16.0,
+              bottom: 16.0,
+            ),
             child: switch (state.type) {
               DiaryType.text => textToolBar(),
               DiaryType.richText => richTextToolBar(),

diff --git a/lib/pages/home/home_view.dart b/lib/pages/home/home_view.dart
@@ -220,7 +220,7 @@ class HomePage extends StatelessWidget {
             height: 56 +
                 8 +
                 56 +
-                ((46 + 8) * 2 - 56 - 8) * (logic.fabAnimation.value),
+                ((46 + 8) * 3 - 56 - 8) * (logic.fabAnimation.value),
             child: child,
           );
         },
@@ -229,13 +229,13 @@ class HomePage extends StatelessWidget {
           clipBehavior: Clip.none,
           children: [
             buildToTopButton(),
-            // buildAnimatedActionButton(
-            //     label: l10n.homeNewDiaryMarkdown,
-            //     onTap: () async {
-            //       await logic.toEditPage(type: DiaryType.markdown);
-            //     },
-            //     iconData: FontAwesomeIcons.markdown,
-            //     index: 3),
+            buildAnimatedActionButton(
+                label: l10n.homeNewDiaryMarkdown,
+                onTap: () async {
+                  await logic.toEditPage(type: DiaryType.markdown);
+                },
+                iconData: FontAwesomeIcons.markdown,
+                index: 3),
             buildAnimatedActionButton(
                 label: l10n.homeNewDiaryPlainText,
                 onTap: () async {

diff --git a/pubspec.lock b/pubspec.lock
@@ -522,10 +522,10 @@ packages:
     dependency: transitive
     description:
       name: dbus
-      sha256: "365c771ac3b0e58845f39ec6deebc76e3276aa9922b0cc60840712094d9047ac"
+      sha256: "79e0c23480ff85dc68de79e2cd6334add97e48f7f4865d17686dd6ea81a47e8c"
       url: "https://pub.dev"
     source: hosted
-    version: "0.7.10"
+    version: "0.7.11"
   device_info_plus:
     dependency: "direct main"
     description:
@@ -1515,21 +1515,13 @@ packages:
     source: hosted
     version: "0.1.3-main.0"
   markdown:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: markdown
       sha256: "935e23e1ff3bc02d390bad4d4be001208ee92cc217cb5b5a6c19bc14aaa318c1"
       url: "https://pub.dev"
     source: hosted
     version: "7.3.0"
-  markdown_toolbar:
-    dependency: "direct main"
-    description:
-      name: markdown_toolbar
-      sha256: "5f4e2548afe96cc2ccdad22da87d380e4726d2d3385ddbb7035aa94daf9a4d47"
-      url: "https://pub.dev"
-    source: hosted
-    version: "0.5.0"
   markdown_widget:
     dependency: "direct main"
     description:

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -113,8 +113,8 @@ dependencies:
   tutorial_coach_mark: 1.2.12
   adaptive_dialog: 2.4.0
   flutter_inappwebview: 6.1.5
-  markdown_toolbar: 0.5.0
   sensors_plus: 6.1.1
+  markdown: 7.3.0
 
 
 dev_dependencies: