Re-Editor

repository·main·Indexed 20 days ago

https://github.com/reqable/re-editor

A high-performance, lightweight text and code editor widget for Flutter designed for large texts and complex editing. Features include syntax highlighting via Re-Highlight, code folding with customizable CodeChunkAnalyzer, auto-completion using CodeAutocomplete, and support for two-way scrolling. It provides a more capable alternative to Flutter's default TextField for code-centric applications, including built-in desktop shortcut keys and a configurable CodeEditorStyle.

Tokens
11.1K
Snippets
34
Records
44
Agent score
72%

What's inside re-editor

  1. Configure code folding detection

    main

    By default, Re-Editor automatically detects folding regions for {} and [].

    • To use the default detector: Use DefaultCodeChunkAnalyzer().
    • To disable detection: Use NonCodeChunkAnalyzer().
    • To implement custom logic: Implement the CodeChunkAnalyzer interface.
    // Using default analyzer
    CodeEditor(
      chunkAnalyzer: DefaultCodeChunkAnalyzer(),
    );
    
    // Custom implementation interface
    abstract class CodeChunkAnalyzer {
      List<CodeChunk> run(CodeLines codeLines);
    }
  2. Customize code folding detection

    main

    By default, Re-Editor uses DefaultCodeChunkAnalyzer to detect folding areas for {} and [].

    • To disable detection: Use NonCodeChunkAnalyzer().
    • To implement custom rules: Implement the CodeChunkAnalyzer interface.
    // To disable detection
    CodeEditor(
      chunkAnalyzer: NonCodeChunkAnalyzer(),
    );
    
    // To implement custom detection
    abstract class CodeChunkAnalyzer {
      List<CodeChunk> run(CodeLines codeLines);
    }
  3. Basic usage of CodeEditor

    main

    The simplest way to use Re-Editor is by providing a CodeLineEditingController. This controller manages the text content, similar to how TextEditingController works with Flutter's TextField.

    Widget build(BuildContext context) {
      return CodeEditor(
        controller: CodeLineEditingController.fromText('Hello Reqable'),
      );
    }
  4. Create a basic multi-line input area

    main

    The simplest way to use Re-Editor is by providing a CodeLineEditingController. Use CodeLineEditingController.fromText() to initialize the editor with content.

    Widget build(BuildContext context) {
      return CodeEditor(
        controller: CodeLineEditingController.fromText('Hello Reqable'),
      );
    }
  5. Customize the iOS launch screen assets

    main

    To change the image displayed during the app's launch screen on iOS, you can use one of two methods:

    1. Direct File Replacement: Replace the existing image files located in the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory with your own assets.
    2. Xcode Interface:
      • Open the iOS workspace using open ios/Runner.xcworkspace.
      • In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
      • Drag and drop your desired images into the asset catalog.
    open ios/Runner.xcworkspace
  6. Understand CodeLineSegment and the 'dirty' flag

    main

    A CodeLines object is composed of multiple CodeLineSegment objects. Segments are used to group CodeLine elements to manage memory and performance.

    The dirty flag

    Segments have a dirty property. This flag indicates whether the segment is in a state that allows direct mutation.

    • When dirty is false: The segment is considered immutable or managed by the parent. Attempting to use write operators like []= or add() on a non-dirty segment will throw an UnimplementedError.
    • When dirty is true: The segment can be cloned or modified. The CodeLines class handles cloning segments automatically when performing write operations to ensure data integrity.
  7. Define autocomplete prompts using CodePrompt subclasses

    main

    The CodePrompt abstraction allows you to define different types of code suggestions. Use the following subclasses to match specific code patterns:

    • CodeKeywordPrompt: Used for language keywords like return, class, or new. It simply matches the input against the keyword.
    • CodeFieldPrompt: Used for variable or field names. It includes a type string (e.g., String) and can optionally provide a customAutocomplete result.
    • CodeFunctionPrompt: Used for function calls. It includes the return type, a map of required parameters, and a map of optionalParameters. By default, it generates an autocomplete string in the format word(param1, param2).

    All prompts implement match(String input) to determine if the current user input qualifies for the suggestion.

  8. Implement code autocomplete with CodeAutocomplete

    main

    To enable code autocomplete in a CodeEditor, wrap it with the CodeAutocomplete widget. You must provide a viewBuilder to define how the autocomplete overlay (the list of suggestions) is rendered and a promptsBuilder to define the logic for generating suggestions.

    Commonly, you use DefaultCodeAutocompletePromptsBuilder to supply keywords, direct prompts (like specific fields or functions), and related prompts based on the language mode.

    CodeAutocomplete(
      viewBuilder: (context, notifier, onSelected) {
        // TODO: build the options list widget (e.g., a ListView or PopupMenu).
      },
      promptsBuilder: DefaultCodeAutocompletePromptsBuilder(
        language: langDart,
        directPrompts: [
          CodeFieldPrompt(
            word: 'foo',
            type: 'String'
          ),
          CodeFunctionPrompt(
            word: 'hello',
            type: 'void',
            parameters: {
              'value': 'String',
            }
          )
        ],
      ),
      child: CodeEditor(),
    )
  9. Implement Find and Replace UI

    main

    Re-Editor manages the search and replace logic but does not provide a default UI. You must implement your own search panel and assign it to the findBuilder attribute.

    CodeEditor(
      findBuilder: (context, controller, readOnly) => CodeFindPanelView(controller: controller, readOnly: readOnly),
    );
  10. Customize line numbers and folding indicators

    main

    Use the indicatorBuilder property to define how line numbers and code folding/unfolding markers are displayed. Re-Editor provides default implementations like DefaultCodeLineNumber and DefaultCodeChunkIndicator which you can compose in a Row.

    CodeEditor(
      indicatorBuilder: (context, editingController, chunkController, notifier) {
        return Row(
          children: [
            DefaultCodeLineNumber(
              controller: editingController,
              notifier: notifier,
            ),
            DefaultCodeChunkIndicator(
              width: 20,
              controller: chunkController,
              notifier: notifier
            )
          ],
        );
      },
    );