zh3w4ng / code_block Goto Github PK

This project forked from mayursmahajan/code_block

Code Block is a feature that allows you to write and display code snippets within your notes taken in the AppFlowy Editor. It provides a distinct format for code, using a monospaced font and syntax highlighting to enhance readability.

Home Page: https://pub.dev/packages/appflowy_code_block

License: Other

C++ 13.41% C 0.80% Objective-C 0.02% Kotlin 0.07% Dart 72.70% Swift 1.25% HTML 1.04% CMake 10.71%

code_block's Introduction

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

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