appflowy_code_block 1.1.1 appflowy_code_block: ^1.1.1 copied to clipboard
CodeBlock Component that provides a rich code block using AppFlowy Editor.
Our Goal #
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.
Features #
Supported #
- Syntax Highlighting
- Multiple Programming Language Support
- Copy All Code
- Paste Multiple lines of code
- Export code
- Import code
- Cool Dark and Light Theme
Future Scope #
- Copy the entire Code Block
- Line numbering
- Auto-Indentation
Getting started #
To use this package you need a project with AppFlowy Editor.
Usage #
- Import the package:
import 'package:code_block/code_block.dart';
- Add Codeblock item to Selection Menu Items of AppFlowyEditor:
late final List<SelectionMenuItem> slashMenuItems = [
...standardSelectionMenuItems,
codeBlockItem,
];
- Add Codeblock shortcuts to AppFlowy Editor Shortcuts:
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.
- Add
CodeblockComponentBuilder
to AppFlowy Editor's Block Component Builder Map.
final customBlockComponentBuilderMap = {
CodeBlockKeys.type: CodeBlockComponentBuilder(
editorState: editorState,
),
};
final builders = {
...standardBlockComponentBuilderMap,
...customBlockComponentBuilderMap,
};
- Make sure you pass the shortcuts and blockComponentBuilderMap to AppFlowyEditor class.
// gets the block component builder map from a method
blockComponentBuilders = customBlockComponentBuilderMap();
AppFlowyEditor(
editorState: editorState,
autoFocus: true,
characterShortcutEvents: characterShortcutEvents,
commandShortcutEvents: commandShortcutEvents,
blockComponentBuilders: blockComponentBuilders,
);
- That's it, check out your codeblock in action by pressing the slash menu in your editor page and selecting the Codeblock option.
Additional information #
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