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

1. Import the package:

import 'package:code_block/code_block.dart';

2. Add Codeblock item to Selection Menu Items of AppFlowyEditor:

late final List<SelectionMenuItem> slashMenuItems = [
    ...standardSelectionMenuItems,
    codeBlockItem,
];

3. 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.

4. Add CodeblockComponentBuilder to AppFlowy Editor's Block Component Builder Map.

final customBlockComponentBuilderMap = {
    CodeBlockKeys.type: CodeBlockComponentBuilder(
      editorState: editorState,
    ),
  };

  final builders = {
    ...standardBlockComponentBuilderMap,
    ...customBlockComponentBuilderMap,
  };

5. 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,
    );

6. 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

Acknowledgements

• https://github.com/git-touch/highlight.dart