base on Re-Editor is a powerful lightweight text and code editor widget. # Re-Editor [](https://pub.dev/packages/re_editor) [中文版本](./README_CN.md) `Re-Editor` is a powerful lightweight text and code editor widget and a module in the [Reqable](https://reqable.com) project. It can be used as a simple text area or to develop a code editor with complex functions. Unlike Flutter's default `TextField`, `Re-Editor` is specifically tailored for the display and input of multi-line text and offers the following features: - Two-way horizontal and vertical scrolling. - Text syntax highlighting. - Content collapsing and expanding. - Input hints and auto-completion. - Search and replace. - Custom context menu builder. - Shortcut keys. - Large text display and editing. - Line numbers and focus line builder. - Smart input. `Re-Editor` is not a secondary encapsulation based on `TextField`, but independently implements the layout, drawing, event processing, etc. It is specifically optimized for large texts, providing extremely high performance and fixed some issues of `TextField`. `Re-Editor` offers a high degree of freedom. For example, developers can control whether to enable horizontal scrolling (word wrap), enable read-only mode, display line numbers, display content folding, define custom shortcut keys, and specify text syntax highlighting. You can run the `example` project to experience it.  ## Getting Started Add the followings in `pubspec.yaml`. ```yaml dependencies: re_editor: ^0.6.0 ``` Like `TextField`, `Re-Editor` uses `CodeLineEditingController` as the controller. The following sample code creates the simplest multi-line input area, which is not much different from `TextField`. ```dart Widget build(BuildContext context) { return CodeEditor( controller: CodeLineEditingController.fromText('Hello Reqable'), ); } ``` ### Text Syntax Highlighting The text highlighting of `Re-Editor` is based on [Re-Highlight](https://github.com/reqable/re-highlight) and supports nearly a hundred languages ​​and theme styles. Developers can freely choose and configure the code Highlight. The following code specifies the `JSON` syntax highlighting rules and applies the `Atom One Light` code coloring. ```dart CodeEditor( style: CodeEditorStyle( codeTheme: CodeHighlightTheme( languages: { 'json': CodeHighlightThemeMode( mode: langJson ) }, theme: atomOneLightTheme ), ), ); ``` ### Line Numbers and Fold/Unfold Markers `Re-Editor` supports configuring whether to display code line numbers and code folding marks, and developers can also implement display styles and layouts by themselves. The example code below shows the default style, built with `indicatorBuilder`. ```dart CodeEditor( indicatorBuilder: (context, editingController, chunkController, notifier) { return Row( children: [ DefaultCodeLineNumber( controller: editingController, notifier: notifier, ), DefaultCodeChunkIndicator( width: 20, controller: chunkController, notifier: notifier ) ], ); }, ); ``` ### Code Folding and Unfolding Detection By default, `Re-Editor` will automatically detect the folding areas of `{}` and `[]`. Developers can control whether to detect or write their own detection rules. `DefaultCodeChunkAnalyzer` is the default detector. If you wish to disable detection, you can use `NonCodeChunkAnalyzer`. ```dart CodeEditor( chunkAnalyzer: DefaultCodeChunkAnalyzer(), ); ``` If you want to customize it, just implement the `CodeChunkAnalyzer` interface. ```dart abstract class CodeChunkAnalyzer { List<CodeChunk> run(CodeLines codeLines); } ``` ### Scroll Control `Re-Editor` supports two-way scrolling, so two `ScrollController` are used, and developers can use `CodeScrollController` to construct. ```dart CodeEditor( scrollController: CodeScrollController( verticalScroller: ScrollController(), horizontalScroller: ScrollController(), ) ); ``` ### Find and Replace `Re-Editor` implements search and replace control logic, but does not provide a default UI. Developers need to write the UI of the search panel according to the actual situation of their own projects, and use the `findBuilder` attribute to set up their own search and replace UI. ```dart CodeEditor( findBuilder: (context, controller, readOnly) => CodeFindPanelView(controller: controller, readOnly: readOnly), ); ``` The `CodeFindPanelView` in the above example is implemented by the developer himself. For the detailed implementation process, please refer to the code in `example`. ### Context Menu `Re-Editor` implements the control logic of the desktop context menu and the mobile long-press selection menu, but does not provide a default UI. Developers need to implement the `SelectionToolbarController` interface and setup it through `toolbarController`. ```dart CodeEditor( toolbarController: _MyToolbarController(), ); ``` ### Shortcuts `Re-Editor` has the built-in default shortcut hotkeys, and developers can also use `shortcutsActivatorsBuilder` to set custom shortcut hotkeys. Of course, the shortcut keys only work on the desktop. The shortcut keys supported by `Re-Editor` are as follows: - Select all (Control/Command + A) - Cut selected/current line (Control/Command + V) - Copy selected/current line (Control/Command + C) - Paste (Control/Command + V) - Undo (Control/Command + Z) - Redo (Shift + Control/Command + Z) - Select the current line (Control/Command + L) - Delete current line (Control/Command + D) - Move current line (Alt + ↑/↓) - Continuous selection (Shift + ↑/↓/←/→) - Move cursor (↑/↓/←/→) - Move cursor between word boundaries (Alt + ←/→) - Move to top/bottom of page (Control/Command + ↑/↓) - Indent (Tab) - Unindent (Shift + Tab) - Comment/uncomment a single line (Control/Command + /) - Comment/uncomment multiple lines (Shift + Control/Command + /) - Character transpose (Control/Command + T) - Search (Control/Command + F) - Replace (Alt + Control/Command + F) - Save (Control/Command + S) ### Code Hints and Auto-Completion `Re-Editor` supports using the `CodeAutocomplete` widget to implement code input prompts and automatic completion. `Re-Editor` implements basic control logic, but the code prompt content, auto-completion rules and display UI need to be defined by the developer. ```dart CodeAutocomplete( viewBuilder: (context, notifier, onSelected) { // build the code prompts view }, promptsBuilder: DefaultCodeAutocompletePromptsBuilder( language: langDart, ), child: CodeEditor() ); ``` Note that `Re-Editor` is only a lightweight editor and does not have the IDE dynamic syntax analysis, so the code prompts and completion have many limitations. You can refer to the code in `example` to implement a simple code prompt and completion. ## Used By `Re-Editor` has been extensively practiced in the Reqable project. You are welcome to download [Reqable](https://reqable.com/download) to experience it.  ## License MIT License ## Sponsor If you would like to sponsor this project, you can support us by purchasing a [Reqable](https://reqable.com/pricing) license. ", Assign "at most 3 tags" to the expected json: {"id":"7582","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"