mosaica_md_editor 0.6.2

mosaica_md_editor - A modern rich text editor for Flutter with support for multiple content types, rich formatting, and Markdown export.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:mosaica_md_editor/mosaica_md_editor.dart';

void main() {
  runApp(const MosaicaExample());
}

class MosaicaExample extends StatelessWidget {
  const MosaicaExample({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mosaica Editor Example',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: const EditorPage(),
    );
  }
}

class EditorPage extends StatefulWidget {
  const EditorPage({super.key});

  @override
  State<EditorPage> createState() => _EditorPageState();
}

class _EditorPageState extends State<EditorPage> {
  bool _isDarkMode = false;

  void _toggleTheme() {
    setState(() => _isDarkMode = !_isDarkMode);
  }

  @override
  Widget build(BuildContext context) {
    final theme = _isDarkMode ? EditorTheme.dark : EditorTheme.light;

    return EditorThemeProvider(
      theme: theme,
      onToggleTheme: _toggleTheme,
      child: Scaffold(
        backgroundColor: theme.canvasColor,
        appBar: AppBar(
          backgroundColor: theme.surfaceColor,
          elevation: 0,
          title: Row(
            children: [
              Container(
                width: 28,
                height: 28,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      theme.primaryColor,
                      theme.primaryColor.withAlpha(179) // 0.7 * 255 ≈ 179
                    ],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                  borderRadius: BorderRadius.circular(6),
                ),
                child: const Center(
                  child: Text(
                    'M',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
              const SizedBox(width: 10),
              Text(
                'Mosaica Example',
                style: TextStyle(
                  color: theme.textColor,
                  fontWeight: FontWeight.w600,
                  fontSize: 16,
                ),
              ),
            ],
          ),
          actions: [
            IconButton(
              onPressed: _toggleTheme,
              icon: Icon(
                _isDarkMode ? Icons.light_mode : Icons.dark_mode,
                color: theme.textSecondaryColor,
                size: 20,
              ),
              tooltip: _isDarkMode ? '亮色模式' : '暗黑模式',
            ),
            const SizedBox(width: 8),
          ],
        ),
        body: Center(
          child: Container(
            constraints: const BoxConstraints(maxWidth: 900),
            margin: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
            decoration: BoxDecoration(
              color: theme.backgroundColor,
              borderRadius: BorderRadius.circular(8),
              boxShadow: [
                BoxShadow(
                  color: theme.shadowColor,
                  blurRadius: 20,
                  offset: const Offset(0, 4),
                ),
              ],
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: RichEditor(
                nodes: _createExampleNodes(),
              ),
            ),
          ),
        ),
      ),
    );
  }

  List<EditorNode> _createExampleNodes() {
    return [
      // 标题
      H1Node.from([
        RichTextSpan(text: '欢迎使用 Mosaica 编辑器')
      ]),

      // 介绍段落
      RichTextNode.from([
        RichTextSpan(text: '这是一个简单的示例，展示如何使用 '),
        RichTextSpan(text: 'Mosaica', tags: {RichTextTag.bold.name}),
        RichTextSpan(text: ' 富文本编辑器。'),
      ]),

      // 二级标题
      H2Node.from([
        RichTextSpan(text: '功能特性')
      ]),

      // 无序列表
      UnorderedNode.from([
        RichTextSpan(text: '支持多种文本样式：'),
        RichTextSpan(text: '加粗', tags: {RichTextTag.bold.name}),
        RichTextSpan(text: '、'),
        RichTextSpan(text: '斜体', tags: {RichTextTag.italic.name}),
        RichTextSpan(text: '、'),
        RichTextSpan(text: '下划线', tags: {RichTextTag.underline.name}),
      ]),
      UnorderedNode.from([
        RichTextSpan(text: '支持标题、列表、引用、代码块等节点类型')
      ]),
      UnorderedNode.from([
        RichTextSpan(text: '支持表格和图片')
      ]),
      UnorderedNode.from([
        RichTextSpan(text: '支持 Markdown 导出')
      ]),

      // 任务列表
      H2Node.from([
        RichTextSpan(text: '任务清单')
      ]),
      TodoNode.from([
        RichTextSpan(text: '创建编辑器实例')
      ], done: true),
      TodoNode.from([
        RichTextSpan(text: '添加初始内容')
      ], done: true),
      TodoNode.from([
        RichTextSpan(text: '开始编辑文档')
      ], done: false),

      // 引用块
      H2Node.from([
        RichTextSpan(text: '引用示例')
      ]),
      QuoteNode.from([
        RichTextSpan(text: '这是一个引用块，可以用来突出显示重要信息。')
      ]),

      // 代码块
      H2Node.from([
        RichTextSpan(text: '代码示例')
      ]),
      RichTextNode.from([
        RichTextSpan(text: '以下是如何在您的项目中使用 Mosaica：')
      ]),
      CodeBlockNode.from([
        'import \'package:mosaica_md_editor/mosaica_md_editor.dart\';',
        '',
        'RichEditor(',
        '  nodes: [],',
        '  onControllerReady: (controller) {',
        '    // 获取编辑器控制器',
        '  },',
        ')',
      ], language: 'dart'),

      // 分割线
      DividerNode(),

      // 结尾段落
      RichTextNode.from([
        RichTextSpan(text: '💡 '),
        RichTextSpan(text: '提示：', tags: {RichTextTag.bold.name}),
        RichTextSpan(text: '您可以点击任意位置开始编辑，使用「+」按钮添加新内容，选中文本后使用底部工具栏设置格式。'),
      ]),
    ];
  }
}