v0.2.7

lib/pages/note/note_form_page.dart

@@ -4,7 +4,6 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:image_picker/image_picker.dart';
 import 'package:path/path.dart' as p;
-import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
 import '../../providers/app_provider.dart';
 import 'package:uuid/uuid.dart';
 import '../../models/data_models.dart';
@@ -12,6 +11,7 @@ import '../../utils/toast_util.dart';
 import '../../utils/image_path_helper.dart';
 import '../../widgets/fade_in_local_image.dart';
 import '../../widgets/tag_side_panel.dart';
+import '../../widgets/vditor_editor.dart';
 
 /// 添加/编辑笔记页面 - 极简书写界面
 class NoteFormPage extends StatefulWidget {
@@ -32,11 +32,13 @@ class _NoteFormPageState extends State<NoteFormPage> {
   bool _isEditing = false;
   final ImagePicker _picker = ImagePicker();
   String? _tempNoteId; // 新建模式时使用的临时笔记ID
-  String _editorMode = 'edit'; // 'edit' | 'preview'
   Timer? _autoSaveTimer;
   Timer? _saveStatusTimer;
   String _saveStatus = ''; // '', 'saved'
   Note? _savedNote; // 新建模式首次自动保存后的笔记引用
+  final _vditorKey = GlobalKey<VditorEditorState>();
+  final _scrollController = ScrollController();
+  bool _editorTouched = false;
 
   static const _weekdays = ['一', '二', '三', '四', '五', '六', '日'];
 
@@ -51,6 +53,9 @@ class _NoteFormPageState extends State<NoteFormPage> {
     _tags = note != null ? List.from(note.tags) : [];
     _images = note != null ? List.from(note.images) : [];
     _isEditing = note != null;
+    if (!_isEditing) {
+      _tempNoteId = const Uuid().v4();
+    }
     _titleController.addListener(_onTextChanged);
     _contentController.addListener(_onTextChanged);
   }
@@ -72,7 +77,12 @@ class _NoteFormPageState extends State<NoteFormPage> {
   }
 
   Future<void> _autoSave() async {
-    final content = _contentController.text.trim();
+    String content;
+    if (_vditorKey.currentState != null && _vditorKey.currentState!.isReady) {
+      content = (await _vditorKey.currentState!.getValue()).trim();
+    } else {
+      content = _contentController.text.trim();
+    }
     final title = _titleController.text.trim();
     if (title.isEmpty && content.isEmpty) return;
 
@@ -157,13 +167,22 @@ class _NoteFormPageState extends State<NoteFormPage> {
                   // 可滚动内容
                   Expanded(
                     child: CustomScrollView(
+                      controller: _scrollController,
+                      physics: _editorTouched ? const NeverScrollableScrollPhysics() : null,
                       slivers: [
                         // 标题行（点击编辑）
                         SliverToBoxAdapter(child: _buildTitleInput(colors)),
 
-                        // 编辑区域 — 固定高度
+                        // 编辑区域 — 高度随内容撑开，触摸时禁用外层滚动
                         SliverToBoxAdapter(
-                          child: SizedBox(height: contentH, child: _buildContentArea()),
+                          child: ConstrainedBox(
+                            constraints: BoxConstraints(minHeight: contentH),
+                            child: GestureDetector(
+                              onTapDown: (_) => setState(() => _editorTouched = true),
+                              onTapUp: (_) => setState(() => _editorTouched = false),
+                              onTapCancel: () => setState(() => _editorTouched = false),
+                              child: _buildEditor(),
+                          )),
                         ),
 
                         // 图片 + 标签 + 字数 — 随内容撑开
@@ -256,31 +275,7 @@ class _NoteFormPageState extends State<NoteFormPage> {
     );
   }
 
-  /// 在光标处插入 Markdown 语法，光标自动放到正确位置
-  void _insertMarkdown(String left, String right) {
-    final text = _contentController.text;
-    final selection = _contentController.selection;
-    final start = selection.start;
-    final end = selection.end;
-
-    String selectedText = '';
-    if (end > start) {
-      selectedText = text.substring(start, end);
-    }
-
-    final insertion = '$left$selectedText$right';
-    // 原子更新：一次性设置 text 和 selection，避免分步操作导致光标跳动
-    _contentController.value = TextEditingValue(
-      text: text.substring(0, start) + insertion + text.substring(end),
-      selection: TextSelection.collapsed(
-        offset: selectedText.isEmpty
-            ? start + left.length
-            : start + left.length + selectedText.length + right.length,
-      ),
-    );
-  }
-
-  /// 现代极简底部工具栏
+  /// 底部浮动工具栏
   Widget _buildFloatingToolbar() {
     final colors = Theme.of(context).colorScheme;
     return Container(
@@ -313,12 +308,15 @@ class _NoteFormPageState extends State<NoteFormPage> {
                   _toolGap(),
                   _toolBtn(Icons.format_list_bulleted, '无序列表', () => _insertMarkdown('- ', '')),
                   _toolBtn(Icons.format_list_numbered, '有序列表', () => _insertMarkdown('1. ', '')),
+                  _toolBtn(Icons.check_box_outlined, '待办', () => _insertMarkdown('- [ ] ', '')),
                   _toolBtn(Icons.format_quote, '引用', () => _insertMarkdown('> ', '')),
                   _toolBtn(Icons.insert_link, '链接', () => _insertMarkdown('[', '](url)')),
                   _toolGap(),
                   _toolBtn(Icons.code, '行内代码', () => _insertMarkdown('`', '`')),
                   _toolBtn(Icons.data_object, '代码块', () => _insertMarkdown('```\n', '\n```')),
                   _toolBtn(Icons.horizontal_rule, '分割线', () => _insertMarkdown('---\n', '')),
+                  _toolGap(),
+                  _toolBtn(Icons.add_photo_alternate_outlined, '图片', _pickImage),
                 ],
               ),
             ),
@@ -357,194 +355,38 @@ class _NoteFormPageState extends State<NoteFormPage> {
     );
   }
 
-  Widget _modeSwitch(IconData icon, String mode) {
-    final colors = Theme.of(context).colorScheme;
-    final active = _editorMode == mode;
-    return Material(
-      color: Colors.transparent,
-      child: InkWell(
-        onTap: () => setState(() => _editorMode = mode),
-        borderRadius: BorderRadius.circular(8),
-        child: Container(
-          padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 6),
-          decoration: BoxDecoration(
-            color: active ? colors.primary : Colors.transparent,
-            borderRadius: BorderRadius.circular(8),
-          ),
-          child: Icon(
-            icon,
-            size: 18,
-            color: active ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.35),
-          ),
-        ),
-      ),
-    );
+  /// 在光标处插入 Markdown 语法（通过 VditorEditor）
+  void _insertMarkdown(String left, String right) {
+    final vditor = _vditorKey.currentState;
+    if (vditor != null && vditor.isReady) {
+      vditor.insertValue(left + right);
+    }
   }
 
-  /// 插入标题（在当前行首插入 # ，如果已有则升级 ## → ### → ####）
+  /// 插入标题（通过 VditorEditor）
   void _insertHeading() {
-    final text = _contentController.text;
-    final selection = _contentController.selection;
-    final start = selection.start;
-
-    // 找到当前行起始位置
-    int lineStart = start;
-    while (lineStart > 0 && text[lineStart - 1] != '\n') {
-      lineStart--;
-    }
-
-    // 计算当前行的 # 前缀
-    int hashCount = 0;
-    int pos = lineStart;
-    while (pos < text.length && text[pos] == '#') {
-      hashCount++;
-      pos++;
-    }
-    // 跳过 # 后的空格
-    if (pos < text.length && text[pos] == ' ') pos++;
-
-    String newPrefix;
-    int cursorOffset;
-    if (hashCount > 0 && hashCount < 6) {
-      // 升级标题级别
-      hashCount++;
-      newPrefix = '${'#' * hashCount} ';
-      cursorOffset = newPrefix.length;
-      // 替换旧前缀
-      _contentController.value = TextEditingValue(
-        text: text.substring(0, lineStart) + newPrefix + text.substring(pos),
-        selection: TextSelection.collapsed(offset: lineStart + cursorOffset),
-      );
-    } else if (hashCount >= 6) {
-      // 已经是 H6，重置为普通文本
-      _contentController.value = TextEditingValue(
-        text: text.substring(0, lineStart) + text.substring(pos),
-        selection: TextSelection.collapsed(offset: lineStart),
-      );
-    } else {
-      // 没有 # 前缀，添加 H1
-      newPrefix = '# ';
-      _contentController.value = TextEditingValue(
-        text: text.substring(0, lineStart) + newPrefix + text.substring(lineStart),
-        selection: TextSelection.collapsed(offset: lineStart + 2),
-      );
+    final vditor = _vditorKey.currentState;
+    if (vditor != null && vditor.isReady) {
+      vditor.insertValue('# ');
     }
   }
 
-  /// 根据 _editorMode 构建内容区域
-  Widget _buildContentArea() {
-    switch (_editorMode) {
-      case 'preview':
-        return _buildPreview();
-      case 'edit':
-      default:
-        return _buildEditor();
-    }
-  }
-
-  /// 编辑器
+  /// 编辑器 — 使用 VditorEditor 替代原来的 TextField
   Widget _buildEditor() {
     final colors = Theme.of(context).colorScheme;
-    return TextField(
-      controller: _contentController,
-      maxLines: null,
-      expands: true,
-      textAlignVertical: TextAlignVertical.top,
-      strutStyle: const StrutStyle(
-        forceStrutHeight: true,
-        height: 1.6,
-        fontSize: 14,
-      ),
-      style: TextStyle(
-        fontSize: 14,
-        color: colors.onSurface,
-        height: 1.6,
-      ),
-      decoration: InputDecoration(
-        hintText: '使用 Markdown 格式书写...',
-        hintStyle: TextStyle(
-          fontSize: 14,
-          color: colors.onSurface.withValues(alpha: 0.25),
-          height: 1.6,
-        ),
-        border: InputBorder.none,
-        enabledBorder: InputBorder.none,
-        focusedBorder: InputBorder.none,
-        contentPadding: const EdgeInsets.all(16),
-      ),
+    return VditorEditor(
+      key: _vditorKey,
+      initialContent: _contentController.text,
+      noteId: _isEditing && widget.note != null ? widget.note!.id : (_tempNoteId ?? ''),
+      isDark: Theme.of(context).brightness == Brightness.dark,
+      surfaceColor: colors.surface,
+      onContentChanged: (value) {
+        _contentController.text = value;
+        _onTextChanged();
+      },
     );
   }
 
-  /// 实时 Markdown 预览（点击回到编辑）
-  Widget _buildPreview() {
-    final colors = Theme.of(context).colorScheme;
-    final text = _contentController.text;
-    return GestureDetector(
-      onTap: () => setState(() => _editorMode = 'edit'),
-      behavior: HitTestBehavior.opaque,
-      child: Container(
-      color: colors.surfaceContainerHigh,
-      child: text.isEmpty
-          ? Center(
-              child: Text(
-                '预览区域',
-                style: TextStyle(
-                  fontSize: 14,
-                  color: colors.onSurface.withValues(alpha: 0.25),
-                ),
-              ),
-            )
-          : Markdown(
-              data: text,
-              selectable: true,
-              padding: const EdgeInsets.all(16),
-              styleSheet: MarkdownStyleSheet(
-                h1: TextStyle(
-                  fontSize: 22,
-                  fontWeight: FontWeight.w600,
-                  color: colors.onSurface,
-                  height: 1.4,
-                ),
-                h2: TextStyle(
-                  fontSize: 19,
-                  fontWeight: FontWeight.w600,
-                  color: colors.onSurface,
-                  height: 1.4,
-                ),
-                h3: TextStyle(
-                  fontSize: 17,
-                  fontWeight: FontWeight.w600,
-                  color: colors.onSurface,
-                  height: 1.4,
-                ),
-                p: TextStyle(
-                  fontSize: 15,
-                  color: colors.onSurface.withValues(alpha: 0.75),
-                  height: 1.7,
-                ),
-                code: TextStyle(
-                  fontSize: 14,
-                  color: colors.onSurface,
-                  backgroundColor: colors.outlineVariant,
-                ),
-                codeblockDecoration: BoxDecoration(
-                  color: colors.outlineVariant,
-                  borderRadius: BorderRadius.circular(6),
-                ),
-                blockquote: TextStyle(
-                  fontSize: 15,
-                  color: colors.onSurface.withValues(alpha: 0.6),
-                ),
-                blockquoteDecoration: BoxDecoration(
-                  border: Border(
-                    left: BorderSide(color: colors.onSurface.withValues(alpha: 0.25), width: 3),
-                  ),
-                ),
-              ),
-            ),
-    ));
-  }
-
   /// 标签 chips 行（右侧展示）
   Widget _buildTagChips() {
     return Wrap(
@@ -631,10 +473,10 @@ class _NoteFormPageState extends State<NoteFormPage> {
       child: TextField(
         controller: _titleController,
         maxLines: 1,
-        style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: colors.onSurface),
+        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700, color: colors.onSurface),
         decoration: InputDecoration(
           hintText: '添加标题',
-          hintStyle: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: colors.onSurface.withValues(alpha: 0.2)),
+          hintStyle: TextStyle(fontSize: 20, fontWeight: FontWeight.w700, color: colors.onSurface.withValues(alpha: 0.2)),
           border: InputBorder.none,
           enabledBorder: InputBorder.none,
           focusedBorder: InputBorder.none,
@@ -665,7 +507,12 @@ class _NoteFormPageState extends State<NoteFormPage> {
 
   Future<void> _saveNote() async {
     _autoSaveTimer?.cancel();
-    final content = _contentController.text.trim();
+    String content;
+    if (_vditorKey.currentState != null && _vditorKey.currentState!.isReady) {
+      content = (await _vditorKey.currentState!.getValue()).trim();
+    } else {
+      content = _contentController.text.trim();
+    }
     final title = _titleController.text.trim();
 
     if (title.isEmpty && content.isEmpty) {
@@ -679,7 +526,7 @@ class _NoteFormPageState extends State<NoteFormPage> {
     if (_isEditing && widget.note != null) {
       // 更新现有笔记（编辑已有笔记）
       final updatedNote = widget.note!.copyWith(
-        title: _titleController.text.trim(),
+        title: title,
         content: content,
         tags: _tags,
         images: _images,
@@ -689,7 +536,7 @@ class _NoteFormPageState extends State<NoteFormPage> {
     } else if (_savedNote != null) {
       // 自动保存过的新笔记，更新它
       final updatedNote = _savedNote!.copyWith(
-        title: _titleController.text.trim(),
+        title: title,
         content: content,
         tags: _tags,
         images: _images,
@@ -709,8 +556,6 @@ class _NoteFormPageState extends State<NoteFormPage> {
         finalImages = await _moveImagesToNewId(oldNoteId, newNoteId);
       }
 
-      final title = _titleController.text.trim();
-
       final newNote = Note(
         id: noteId,
         title: title,