dellevin/MookNote
1
0
Fork 0
generated from dellevin/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: markdown reader, data migration, 编辑器增强等

Browse Source
This commit is contained in:
DelLevin-Home
2026-05-22 03:24:17 +08:00
parent edf35c5844
commit 8d5e1642d6
19 changed files with 2371 additions and 1177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

373
lib/widgets/markdown_editing_controller.dart Normal file
View File

@@ -0,0 +1,373 @@
import 'package:flutter/material.dart';
/// Markdown 编辑器控制器
/// 实现 Typora 风格的所见即所得 Markdown 编辑体验
/// 输入 # 标题 时，# 变小变淡，标题文字变大加粗
/// 输入 **粗体** 时，文字自动加粗
class MarkdownEditingController extends TextEditingController {
MarkdownEditingController({String? text}) : super(text: text);
@override
TextSpan buildTextSpan({
required BuildContext context,
TextStyle? style,
required bool withComposing,
}) {
return _buildMarkdownSpan(text, style);
}
/// 构建 Markdown 样式的 TextSpan
TextSpan _buildMarkdownSpan(String text, TextStyle? baseStyle) {
if (text.isEmpty) {
return TextSpan(text: '', style: baseStyle);
}
final spans = <InlineSpan>[];
final lines = text.split('\n');
for (var i = 0; i < lines.length; i++) {
if (i > 0) {
spans.add(const TextSpan(text: '\n'));
}
spans.add(_parseLine(lines[i], baseStyle));
}
return TextSpan(children: spans);
}
/// 解析单行文本
InlineSpan _parseLine(String line, TextStyle? baseStyle) {
// 空行
if (line.isEmpty) {
return const TextSpan(text: '');
}
// 代码块分隔符 ```
if (line.startsWith('```')) {
return TextSpan(
text: line,
style: _codeBlockStyle(baseStyle),
);
}
// 标题 # ## ### 等
if (line.startsWith('#')) {
final headerMatch = RegExp(r'^(#{1,6})\s+(.*)$').firstMatch(line);
if (headerMatch != null) {
final level = headerMatch.group(1)!.length;
final content = headerMatch.group(2)!;
return _buildHeaderSpan(level, content, baseStyle);
}
}
// 引用 >
if (line.startsWith('>')) {
final quoteMatch = RegExp(r'^>\s?(.*)$').firstMatch(line);
if (quoteMatch != null) {
final content = quoteMatch.group(1)!;
return _buildQuoteSpan(content, baseStyle);
}
}
// 无序列表 - 或 *
final ulMatch = RegExp(r'^([\-\*])\s+(.*)$').firstMatch(line);
if (ulMatch != null) {
final content = ulMatch.group(2)!;
return _buildListSpan(content, baseStyle, isOrdered: false);
}
// 有序列表 1. 2. 等
final olMatch = RegExp(r'^(\d+)\.\s+(.*)$').firstMatch(line);
if (olMatch != null) {
final number = olMatch.group(1)!;
final content = olMatch.group(2)!;
return _buildListSpan(content, baseStyle, isOrdered: true, number: number);
}
// 分割线 --- *** ___
if (RegExp(r'^( {0,3}([-_*])\s*\2\s*\2[\s\2]*)$').hasMatch(line)) {
return _buildDividerSpan(line, baseStyle);
}
// 普通行 - 解析行内元素
return _parseInline(line, baseStyle);
}
// ==================== 标题 ====================
InlineSpan _buildHeaderSpan(int level, String content, TextStyle? baseStyle) {
// 标题只改变颜色和粗细，不改变字体大小，避免光标错位
final headerStyle = (baseStyle ?? const TextStyle()).copyWith(
fontWeight: FontWeight.w600,
color: const Color(0xFF1A1A1A),
);
return TextSpan(
children: [
TextSpan(
text: '${'#' * level} ',
style: const TextStyle(
color: Color(0xFFCCCCCC),
fontWeight: FontWeight.w400,
),
),
..._parseInlineSpans(content, headerStyle),
],
);
}
// ==================== 引用 ====================
InlineSpan _buildQuoteSpan(String content, TextStyle? baseStyle) {
final quoteStyle = (baseStyle ?? const TextStyle()).copyWith(
color: const Color(0xFF666666),
fontStyle: FontStyle.italic,
height: 1.8,
);
return TextSpan(
children: [
const TextSpan(
text: '> ',
style: TextStyle(
color: Color(0xFF999999),
fontWeight: FontWeight.bold,
),
),
..._parseInlineSpans(content, quoteStyle),
],
);
}
// ==================== 列表 ====================
InlineSpan _buildListSpan(String content, TextStyle? baseStyle,
{required bool isOrdered, String? number}) {
return TextSpan(
children: [
TextSpan(
text: isOrdered ? '$number. ' : '• ',
style: const TextStyle(
color: Color(0xFF333333),
fontWeight: FontWeight.w600,
),
),
..._parseInlineSpans(
content,
(baseStyle ?? const TextStyle()).copyWith(
color: const Color(0xFF333333),
),
),
],
);
}
// ==================== 分割线 ====================
InlineSpan _buildDividerSpan(String line, TextStyle? baseStyle) {
// 返回原始文本，但用灰色显示
return TextSpan(
text: line,
style: const TextStyle(
color: Color(0xFFCCCCCC),
),
);
}
// ==================== 行内元素解析 ====================
InlineSpan _parseInline(String text, TextStyle? baseStyle) {
return TextSpan(children: _parseInlineSpans(text, baseStyle));
}
/// 解析行内 Markdown 元素
/// 返回 InlineSpan 列表
List<InlineSpan> _parseInlineSpans(String text, TextStyle? baseStyle) {
if (text.isEmpty) {
return [const TextSpan(text: '')];
}
// 收集所有匹配的模式
final patterns = <_MatchPattern>[];
// 粗体 **text**
for (final match in RegExp(r'\*\*([^*]+)\*\*').allMatches(text)) {
if (match.group(1)!.isNotEmpty) {
patterns.add(_MatchPattern(
match.start,
match.end,
_InlineType.bold,
match.group(0)!,
match.group(1)!,
));
}
}
// 斜体 *text* (排除 **)
for (final match in RegExp(r'(?<!\*)\*([^*]+)\*(?!\*)').allMatches(text)) {
if (match.group(1)!.isNotEmpty) {
patterns.add(_MatchPattern(
match.start,
match.end,
_InlineType.italic,
match.group(0)!,
match.group(1)!,
));
}
}
// 删除线 ~~text~~
for (final match in RegExp(r'~~([^~]+)~~').allMatches(text)) {
if (match.group(1)!.isNotEmpty) {
patterns.add(_MatchPattern(
match.start,
match.end,
_InlineType.strikethrough,
match.group(0)!,
match.group(1)!,
));
}
}
// 行内代码 `code`
for (final match in RegExp(r'`([^`]+)`').allMatches(text)) {
if (match.group(1)!.isNotEmpty) {
patterns.add(_MatchPattern(
match.start,
match.end,
_InlineType.inlineCode,
match.group(0)!,
match.group(1)!,
));
}
}
// 链接 [text](url)
for (final match in RegExp(r'\[([^\]]+)\]\(([^)]+)\)').allMatches(text)) {
if (match.group(1)!.isNotEmpty) {
patterns.add(_MatchPattern(
match.start,
match.end,
_InlineType.link,
match.group(0)!,
match.group(1)!,
url: match.group(2),
));
}
}
// 如果没有匹配到任何模式，返回原始文本
if (patterns.isEmpty) {
return [TextSpan(text: text, style: baseStyle)];
}
// 按起始位置排序
patterns.sort((a, b) => a.start.compareTo(b.start));
// 过滤重叠的模式（选择第一个匹配的，跳过被包含的）
final filtered = <_MatchPattern>[];
_MatchPattern? last;
for (final pattern in patterns) {
if (last == null || pattern.start >= last.end) {
filtered.add(pattern);
last = pattern;
}
}
// 构建 InlineSpan 列表
final spans = <InlineSpan>[];
var currentPos = 0;
for (final pattern in filtered) {
// 添加匹配前的普通文本
if (pattern.start > currentPos) {
spans.add(TextSpan(
text: text.substring(currentPos, pattern.start),
style: baseStyle,
));
}
// 添加带样式的匹配内容
final style = _getInlineStyle(pattern.type, baseStyle);
spans.add(TextSpan(
text: pattern.content,
style: style,
));
currentPos = pattern.end;
}
// 添加剩余的普通文本
if (currentPos < text.length) {
spans.add(TextSpan(
text: text.substring(currentPos),
style: baseStyle,
));
}
return spans;
}
/// 获取行内元素的样式
TextStyle? _getInlineStyle(_InlineType type, TextStyle? base) {
final baseStyle = base ?? const TextStyle();
switch (type) {
case _InlineType.bold:
return baseStyle.copyWith(fontWeight: FontWeight.bold);
case _InlineType.italic:
return baseStyle.copyWith(fontStyle: FontStyle.italic);
case _InlineType.strikethrough:
return baseStyle.copyWith(
decoration: TextDecoration.lineThrough,
color: const Color(0xFF999999),
);
case _InlineType.inlineCode:
return baseStyle.copyWith(
fontFamily: 'monospace',
backgroundColor: const Color(0xFFF5F5F5),
color: const Color(0xFF1A1A1A),
);
case _InlineType.link:
return baseStyle.copyWith(
color: const Color(0xFF4A90D9),
decoration: TextDecoration.underline,
);
}
}
/// 代码块样式
TextStyle _codeBlockStyle(TextStyle? baseStyle) {
return (baseStyle ?? const TextStyle()).copyWith(
fontFamily: 'monospace',
color: const Color(0xFF999999),
fontSize: 14,
);
}
}
/// 行内元素类型
enum _InlineType {
bold,
italic,
strikethrough,
inlineCode,
link,
}
/// 匹配模式
class _MatchPattern {
final int start;
final int end;
final _InlineType type;
final String fullMatch;
final String content;
final String? url;
_MatchPattern(
this.start,
this.end,
this.type,
this.fullMatch,
this.content, {
this.url,
});
}

177
lib/widgets/note_list_item.dart
View File

@@ -1,4 +1,3 @@
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/app_provider.dart';
@@ -28,8 +27,6 @@ class _NoteListItemContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
final isPlainText = note.contentType == 'plain_text';
return InkWell(
onTap: () {
Navigator.pushNamed(context, '/note-detail', arguments: note).then((_) async {
@@ -50,28 +47,10 @@ class _NoteListItemContent extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
// 顶部：格式标记 + 时间 + 图片数
// 顶部：时间 + MD标记
Row(
children: [
// 格式标记
Container(
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 1),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(3),
border: Border.all(color: const Color(0xFFE8E8E8), width: 0.5),
),
child: Text(
isPlainText ? 'TXT' : 'MD',
style: const TextStyle(
fontSize: 9,
fontWeight: FontWeight.w600,
color: Color(0xFF999999),
),
),
),
const SizedBox(width: 8),
// 时间 - 使用缓存的格式化结果
// 时间
Text(
_formatDateCached(note.updatedAt),
style: const TextStyle(
@@ -79,64 +58,60 @@ class _NoteListItemContent extends StatelessWidget {
color: Color(0xFF999999),
),
),
const Spacer(),
// 图片数量（如果有图片）
if (note.images.isNotEmpty) ...[
const Icon(
Icons.image_outlined,
size: 12,
color: Color(0xFF999999),
const SizedBox(width: 8),
// MD标记
Container(
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 1),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(3),
border: Border.all(color: const Color(0xFFE8E8E8), width: 0.5),
),
const SizedBox(width: 3),
Text(
'${note.images.length}',
style: const TextStyle(
fontSize: 11,
child: const Text(
'MD',
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.w600,
color: Color(0xFF999999),
),
),
],
),
],
),
const SizedBox(height: 8),
const SizedBox(height: 6),
// 内容摘要（去除首尾空格）
Text(
note.summary.trim(),
style: TextStyle(
fontSize: 14,
color: const Color(0xFF1A1A1A),
height: isPlainText ? 1.5 : 1.45,
// 标题
if (note.title.isNotEmpty) ...[
Text(
note.title,
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: Color(0xFF1A1A1A),
height: 1.4,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
maxLines: isPlainText ? 3 : 2,
const SizedBox(height: 4),
],
// 内容摘要（去除Markdown标记）
Text(
_cleanMarkdown(note.content).trim(),
style: const TextStyle(
fontSize: 13,
color: Color(0xFF666666),
height: 1.5,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
// 图片预览区域（显示前4张图片）
if (note.images.isNotEmpty) ...[
const SizedBox(height: 8),
SizedBox(
height: 52,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: note.images.length > 4 ? 4 : note.images.length,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return _NoteImage(
imagePath: note.images[index],
index: index,
totalCount: note.images.length,
showMore: index == 3 && note.images.length > 4,
);
},
),
),
],
// 底部标签
if (note.tags.isNotEmpty) ...[
const SizedBox(height: 8),
const SizedBox(height: 6),
Wrap(
spacing: 6,
runSpacing: 4,
@@ -165,6 +140,20 @@ class _NoteListItemContent extends StatelessWidget {
);
}
/// 清理 Markdown 标记，提取纯文本
String _cleanMarkdown(String text) {
return text
.replaceAll(RegExp(r'^#+\s+', multiLine: true), '') // 标题
.replaceAll(RegExp(r'\*\*(.+?)\*\*'), r'$1') // 粗体
.replaceAll(RegExp(r'\*(.+?)\*'), r'$1') // 斜体
.replaceAll(RegExp(r'`(.+?)`'), r'$1') // 行内代码
.replaceAll(RegExp(r'^\s*[-*+]\s', multiLine: true), '') // 列表
.replaceAll(RegExp(r'^\s*>\s', multiLine: true), '') // 引用
.replaceAll(RegExp(r'\[([^\]]+)\]\([^)]+\)'), r'$1') // 链接
.replaceAll(RegExp(r'!\[([^\]]*)\]\([^)]+\)'), '') // 图片
.trim();
}
/// 显示删除确认对话框
void _showDeleteDialog(BuildContext context) {
showDialog(
@@ -221,60 +210,6 @@ class _NoteListItemContent extends StatelessWidget {
}
}
/// 笔记图片组件 - 独立出来便于优化
class _NoteImage extends StatelessWidget {
final String imagePath;
final int index;
final int totalCount;
final bool showMore;
const _NoteImage({
required this.imagePath,
required this.index,
this.totalCount = 0,
this.showMore = false,
});
@override
Widget build(BuildContext context) {
return Container(
width: 52,
height: 52,
margin: EdgeInsets.only(right: index < 3 ? 6 : 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
border: Border.all(color: const Color(0xFFE8E8E8), width: 0.5),
),
clipBehavior: Clip.antiAlias,
child: showMore
? Container(
color: const Color(0xFFF5F5F5),
child: Center(
child: Text(
'+${totalCount - 4}',
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: Color(0xFF666666),
),
),
),
)
: Image.file(
File(imagePath),
fit: BoxFit.cover,
cacheWidth: 104,
cacheHeight: 104,
errorBuilder: (_, __, ___) => const Icon(
Icons.broken_image,
size: 20,
color: Color(0xFFCCCCCC),
),
),
);
}
}
// 日期格式化缓存
final Map<DateTime, String> _dateFormatCache = {};