AppFlowy Editor Documentation

The editor's visual appearance is controlled by two main components:

1. EditorStyle: Controls global editor properties such as padding, cursor color, selection color, and TextStyleConfiguration (styles for normal text, bold, href, and code). It also supports a textSpanDecorator for custom logic when rendering text spans (e.g., adding tap recognizers to links).

2. BlockComponentConfiguration: Used within block builders to define block-specific styles like padding and textStyle based on the block type. This is passed to specific block builders (like HeadingBlockComponentBuilder or TodoListBlockComponentBuilder).

To apply a custom theme, pass your EditorStyle to the editorStyle parameter and your custom map of builders to the blockComponentBuilders parameter in the AppFlowyEditor widget.

// Define global styles
EditorStyle customizeEditorStyle() {
  return EditorStyle(
    padding: const EdgeInsets.symmetric(horizontal: 20),
    cursorColor: Colors.green,
    selectionColor: Colors.green,
    textStyleConfiguration: TextStyleConfiguration(
      text: const TextStyle(fontSize: 18.0, color: Colors.white54),
      bold: const TextStyle(fontWeight: FontWeight.w900),
      href: const TextStyle(color: Colors.amber),
      code: const TextStyle(fontSize: 14.0, color: Colors.blue),
    ),
  );
}

// Define block-specific styles and builders
Map<String, BlockComponentBuilder> customBuilder() {
  final configuration = BlockComponentConfiguration(
    padding: (node) => const EdgeInsets.symmetric(vertical: 10),
    textStyle: (node) => const TextStyle(color: Colors.yellow),
  );

  return {
    ...standardBlockComponentBuilderMap,
    HeadingBlockKeys.type: HeadingBlockComponentBuilder(configuration: configuration),
    TodoListBlockKeys.type: TodoListBlockComponentBuilder(
      configuration: configuration,
      iconBuilder: (context, node) => Icon(Icons.check_box),
    ),
  };
}

// Apply to the editor
AppFlowyEditor(
  editorState: EditorState.blank(),
  editorStyle: customizeEditorStyle(),
  blockComponentBuilders: customBuilder(),
)

To test new translations, you can force the editor to use a specific locale in the example application.

Static Method

In example/lib/main.dart, replace the default supportedLocales assignment with a specific Locale list:

// Change this:
supportedLocales: AppFlowyEditorLocalizations.delegate.supportedLocales,
// To a specific locale:
supportedLocales: const [Locale('fr', 'FR')],

Interactive Method

You can implement a toggle in example/lib/home_page.dart using AppFlowyEditorLocalizations.load() to switch locales at runtime. Note that you must rebuild the application to see the changes in translated strings.

Note: You must rebuild the app to see the changes of the translated strings.

// example/lib/home_page.dart
void toggleLocale() {
  final locale = Intl.getCurrentLocale();
  if (locale.startsWith('en')) {
    // Change to the locale you want to test
    AppFlowyEditorLocalizations.load(const Locale('pt', 'BR')); 
  } else {
    AppFlowyEditorLocalizations.load(const Locale('en', 'US'));
  }
}

When writing tests for the Appflowy Editor, you can manipulate the document state and simulate user interactions using the editor instance provided by your test infrastructure.

Setup

You must call editor.startTesting() before performing any testing operations.

Document Manipulation

• Insert Nodes: Use editor.insertEmptyTextNode() for empty nodes or editor.insertTextNode(text, {attributes}) to insert text with specific styles.
• Styling with Attributes: Use BuiltInAttributeKey to apply styles like heading or bulletedList. For complex styling (e.g., bolding specific parts of an insertion), use the delta parameter with a Delta object containing TextInsert operations.
• Text Insertion: Use editor.insertText(node, text, offset) to insert text at a specific position within a node.

Selection and Navigation

• Accessing Nodes: Use editor.nodeAtPath(path) to retrieve a node at a specific location (e.g., [0] for the first node).
• Updating Selection: Use editor.updateSelection(Selection.single(path: ..., startOffset: ...)) to programmatically move the cursor or select text.
• Querying Selection: Access editor.documentSelection to get the current selection state.

Simulating Input

• Keyboard Shortcuts: Use editor.pressLogicKey(key, {isMetaPressed, isShiftPressed}) to simulate key presses like Meta + A (Select All).

// Setup
await editor.startTesting();

// Insert text with heading style
editor.insertTextNode('Hello', attributes: {
    BuiltInAttributeKey.subtype: BuiltInAttributeKey.heading,
    BuiltInAttributeKey.heading: BuiltInAttributeKey.h1,
});

// Insert text with complex styling via Delta
editor.insertTextNode('', 
    attributes: {BuiltInAttributeKey.subtype: BuiltInAttributeKey.bulletedList}, 
    delta: Delta([
        TextInsert('Bold Text', {BuiltInAttributeKey.bold: true}),
    ]),
);

// Simulate Meta + A
await editor.pressLogicKey(LogicalKeyboardKey.keyA, isMetaPressed: true);