Flutter编辑器增强插件appflowy_editor_plugins的使用

AppFlowy Editor Plugins 是为 AppFlowy Editor 提供的一系列插件。这些插件增强了编辑器的功能，使其更加灵活和强大。

插件列表

• Code Block
• Link Preview Block
• Video Block ! See instructions

示例代码

以下是一个完整的示例，展示如何在Flutter应用中使用 appflowy_editor_plugins 来增强编辑器功能。

main.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:appflowy_editor_plugins/appflowy_editor_plugins.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  VideoBlockKit.ensureInitialized();

  runApp(const AppWidget());
}

class AppWidget extends StatefulWidget {
  const AppWidget({Key? key}) : super(key: key);

  @override
  State<AppWidget> createState() => _AppWidgetState();
}

class _AppWidgetState extends State<AppWidget> {
  ThemeData theme = ThemeData.light();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Plugins',
      theme: theme,
      home: Editor(
        toggleBrightness: () => setState(() {
          theme = theme.brightness == Brightness.light
              ? ThemeData.dark()
              : ThemeData.light();
        }),
      ),
    );
  }
}

class Editor extends StatefulWidget {
  const Editor({Key? key, required this.toggleBrightness}) : super(key: key);

  final VoidCallback toggleBrightness;

  @override
  State<Editor> createState() => _EditorState();
}

class _EditorState extends State<Editor> {
  late final EditorState editorState;
  late final List<CharacterShortcutEvent>? shortcutEvents;
  late final List<CommandShortcutEvent>? commandEvents;
  late final Map<String, BlockComponentBuilder>? blockComponentBuilders;

  @override
  void initState() {
    super.initState();
    editorState = EditorState(
      document: Document.fromJson(jsonDecode(_initialDocumentData)),
    );

    shortcutEvents = [
      ...codeBlockCharacterEvents,
      ...standardCharacterShortcutEvents,
    ];

    commandEvents = [
      ...codeBlockCommands(),
      ...standardCommandShortcutEvents.where((event) => event != pasteCommand),
      linkPreviewCustomPasteCommand,
      convertUrlToLinkPreviewBlockCommand,
    ];

    blockComponentBuilders = {
      ...standardBlockComponentBuilderMap,
      CodeBlockKeys.type: CodeBlockComponentBuilder(
        configuration: BlockComponentConfiguration(
          textStyle: (_) => const TextStyle(
            fontFamily: 'RobotoMono',
            fontSize: 14,
            height: 1.5,
          ),
        ),
        styleBuilder: () => CodeBlockStyle(
          backgroundColor: Theme.of(context).brightness == Brightness.light
              ? Colors.grey[200]!
              : Colors.grey[800]!,
          foregroundColor: Theme.of(context).brightness == Brightness.light
              ? Colors.blue
              : Colors.blue[800]!,
        ),
        actions: CodeBlockActions(
          onCopy: (code) => Clipboard.setData(ClipboardData(text: code)),
        ),
      ),
      LinkPreviewBlockKeys.type: LinkPreviewBlockComponentBuilder(
        showMenu: true,
        menuBuilder: (context, node, state) => Positioned(
          top: 8,
          right: 4,
          child: SizedBox(
            height: 32.0,
            child: InkWell(
              borderRadius: BorderRadius.circular(4.0),
              onTap: () => Clipboard.setData(ClipboardData(
                  text: node.attributes[LinkPreviewBlockKeys.url])),
              child: const Padding(
                padding: EdgeInsets.symmetric(horizontal: 8),
                child: Icon(Icons.copy, size: 18.0),
              ),
            ),
          ),
        ),
      ),
      VideoBlockKeys.type: VideoBlockComponentBuilder(
        showMenu: true,
        menuBuilder: (Node node, VideoBlockComponentState state) => Positioned(
          top: 0,
          right: 10,
          child: VideoBlockMenu(node: node, state: state),
        ),
      ),
    };
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Editor Plugins'),
        actions: [
          IconButton(
            onPressed: widget.toggleBrightness,
            icon: Icon(
              Theme.of(context).brightness == Brightness.light
                  ? Icons.dark_mode
                  : Icons.light_mode,
            ),
          ),
        ],
      ),
      body: AppFlowyEditor(
        editorState: editorState,
        editorStyle: PlatformExtension.isMobile
            ? const EditorStyle.mobile()
            : const EditorStyle.desktop(),
        characterShortcutEvents: shortcutEvents,
        commandShortcutEvents: commandEvents,
        blockComponentBuilders: blockComponentBuilders,
      ),
    );
  }
}

const _initialDocumentData = """{
  "document": {
    "type": "page",
    "children": [
      {
        "type": "paragraph",
        "data": {"delta": []}
      },
      {
        "type": "video",
        "data": {
          "url": "https://ia600507.us.archive.org/13/items/09--0125--cars2-Trailer/Tumbacof-Cars2Trailer894_512kb.mp4",
          "width": 320.0
        }
      },
      {
        "type": "code",
        "data": {"delta": []}
      },
      {
        "type": "paragraph",
        "data": {"delta": []}
      }
    ]
  }
}""";

说明

1. 初始化：确保在应用启动时调用 WidgetsFlutterBinding.ensureInitialized() 和 VideoBlockKit.ensureInitialized()。
2. 主题切换：通过 toggleBrightness 方法实现主题切换。
3. 编辑器状态：editorState 初始化时从 JSON 数据创建文档。
4. 快捷键事件：定义了字符快捷键和命令快捷键事件。
5. 块组件构建器：配置了代码块、链接预览块和视频块的构建器。
6. 初始文档数据：包含一个段落、一个视频块、一个代码块和另一个段落。

通过上述步骤，您可以轻松地在Flutter应用中集成和使用 appflowy_editor_plugins 插件，从而增强您的文本编辑器功能。