README_CN.md

Re-Editor

Re-Editor是一个强大的轻量级文本和代码编辑器组件，是Reqable项目中的一个模块。Re-Editor既可以作为一个简单文本输入组件，也可以用来开发一个功能复杂的代码编辑器。和Flutter官方默认的TextField组件不一样的是，Re-Editor是专为多行文本的显示和输入量身定制，具备下面这些特性：

• 横向和纵向双向滚动。
• 文本语法高亮。
• 内容折叠和展开。
• 输入提示和自动补全。
• 搜索替换功能。
• 自定义上下文菜单。
• 快捷键支持。
• 大文本显示和编辑。
• 显示行号和焦点行。
• 智能输入。

Re-Editor并非基于TextField进行二次封装，而是自行实现了各项元素的布局、绘制、事件处理等，针对大文本进行了特定优化，因此具备极高的性能，同时解决了TextField的各项痛点。

Re-Editor提供了非常大的自由度，例如开发者可以控制是否横行滚动（Word Wrap），是否只读，是否显示行号，是否显示分析内容折叠，自定义快捷键，指定文本高亮语法等等。

您可以运行example项目进行体验各项功能。

开始使用

添加依赖到 pubspec.yaml.

dependencies:
  re_editor: ^0.4.0

和TextField一样，Re-Editor使用CodeLineEditingController作为控制器，下面的示例代码创建了一个最简单的编辑器组件，在显示样式上和TextField并没有什么太大的区别。

Widget build(BuildContext context) {
  return CodeEditor(
    controller: CodeLineEditingController.fromText('Hello Reqable'),
  );
}

文本高亮

Re-Editor的文本高亮是基于Re-Highlight实现，支持近百种语言和主题样式，开发者可以自由选择并配置代码高亮。下面的代码就指定了JSON语法高亮规则以及应用了Atom One Light代码配色。

CodeEditor(
  style: CodeEditorStyle(
    codeTheme: CodeHighlightTheme(
      languages: {
        'json': CodeHighlightThemeMode(
          mode: langJson
        )
      },
      theme: atomOneLightTheme
    ),
  ),
);

行号以及折叠/展开标记

Re-Editor支持配置是否显示代码行号和代码折叠标记，也可以由开发者自行实现显示样式和排版。下面的示例代码显示了默认的样式，通过indicatorBuilder来构建。

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

代码折叠展开检测

默认情况下，Re-Editor会自动检测{}和[]的折叠区域，开发者可以控制是否检测，也可以自行编写检测规则。DefaultCodeChunkAnalyzer是默认的检测器，如果希望禁用检测，可以使用NonCodeChunkAnalyzer。

CodeEditor(
  chunkAnalyzer: DefaultCodeChunkAnalyzer(),
);

如果希望自定义，实现CodeChunkAnalyzer接口即可。

abstract class CodeChunkAnalyzer {

  List<CodeChunk> run(CodeLines codeLines);

}

滚动控制

Re-Editor支持双向滚动，因此使用了两个ScrollController，开发者可以用CodeScrollController进行构造。

CodeEditor(
  scrollController: CodeScrollController(
    verticalScroller: ScrollController(),
    horizontalScroller: ScrollController(),
  )
);

搜索和替换

Re-Editor实现了持搜索和替换逻辑，但是并没有提供默认的样式。开发者需要根据自己项目的实际情况编写搜索面板的UI，使用findBuilder属性来设置自己实现的搜索和替换UI。

CodeEditor(
  findBuilder: (context, controller, readOnly) => CodeFindPanelView(controller: controller, readOnly: readOnly),
);

上面示例中的CodeFindPanelView由开发者自己实现，详细实现过程可以参考example中的代码。

上下文菜单

Re-Editor实现了桌面端右键菜单和移动端长按选中菜单的控制逻辑，但是并没有提供默认的样式。开发者需要实现SelectionToolbarController接口，并通过toolbarController进行配置。

CodeEditor(
  toolbarController: _MyToolbarController(),
);

快捷键

Re-Editor内置了默认的快捷键功能，开发者也可以使用shortcutsActivatorsBuilder来设置自定义的快捷热键。当然，快捷键功能仅在桌面端有效。

Re-Editor支持的快捷键功能如下：

• 全选（Control/Command + A）
• 剪切选中/当前行（Control/Command + V）
• 复制选中/当前行（Control/Command + C）
• 粘贴（Control/Command + V）
• 撤销（Control/Command + Z）
• 重做（Shift + Control/Command + Z）
• 选中当前行（Control/Command + L）
• 删除当前行（Control/Command + D）
• 移动当前行（Alt + ↑/↓）
• 连续选择（Shift + ↑/↓/←/→）
• 移动光标（↑/↓/←/→）
• 移动光标（单词边界） (Alt + ←/→)
• 移动到页首/页尾（Control/Command + ↑/↓）
• 缩进（Tab）
• 取消缩进（Shift + Tab）
• 注释/取消单行注释（Control/Command + /）
• 注释/取消多行注释（Shift + Control/Command + /）
• 字符转换（Control/Command + T）
• 搜索（Control/Command + F）
• 替换（Alt + Control/Command + F）
• 保存（Control/Command + S）

代码提示和补全

Re-Editor支持使用CodeAutocomplete组件来实现代码输入提示和自动补全。Re-Editor实现了基本的控制逻辑，但是代码提示内容、自动补全规则和显示样式需要由开发者来自行定义。

CodeAutocomplete(
  viewBuilder: (context, notifier, onSelected) {
    // 创建代码提示View
  },
  promptsBuilder: DefaultCodeAutocompletePromptsBuilder(
    language: langDart,
  ),
  child: CodeEditor()
);

注意，Re-Editor只是一个轻量级的编辑器，不具备IDE动态语法分析功能，因此代码提示和补全功能存在较多的局限性。您可以参考example中的代码实现一个简单的代码提示和补全功能。

实现范例

Re-Editor在Reqable项目中有着深度实践，欢迎下载 Reqable 进行体验。

许可证

MIT License

赞助

如果您希望赞助本项目，可以通过购买Reqable的许可证来赞助我们。