The goal of this project is to develop a Code Block in Flutter as a standalone package that AppFlowy and other Flutter applications can use. Code Block is a feature that allows you to write and display code snippets.
To use this package you need a project with AppFlowy Editor.
import 'package:code_block/code_block.dart';
late final List<SelectionMenuItem> slashMenuItems = [
...standardSelectionMenuItems,
codeBlockItem,
];
List<CharacterShortcutEvent> get characterShortcutEvents => [
// code block
...codeBlockCharacterEvents,
// customize the slash menu command
customSlashCommand(
slashMenuItems,
),
...standardCharacterShortcutEvents
..removeWhere(
(element) => element == slashCommand,
), // remove the default slash command.
];
final List<CommandShortcutEvent> commandShortcutEvents = [
...codeBlockCommandEvents,
...standardCommandShortcutEvents,
];
It is important that you customize the slash menu command, this way you will be able to add Codeblock Item to the Selection Menu Items.
CodeblockComponentBuilder
to AppFlowy Editor's Block Component Builder Map.final customBlockComponentBuilderMap = {
CodeBlockKeys.type: CodeBlockComponentBuilder(
editorState: editorState,
),
};
final builders = {
...standardBlockComponentBuilderMap,
...customBlockComponentBuilderMap,
};
// gets the block component builder map from a method
blockComponentBuilders = customBlockComponentBuilderMap();
AppFlowyEditor(
editorState: editorState,
autoFocus: true,
characterShortcutEvents: characterShortcutEvents,
commandShortcutEvents: commandShortcutEvents,
blockComponentBuilders: blockComponentBuilders,
);
Find out more about this here: https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/appflowy-mentorship-program/mentorship-2022/mentee-projects/code-block