docs: add documentation for selectable

frontend/app_flowy/packages/flowy_editor/README.md

@@ -11,20 +11,20 @@ and the Flutter guide for
 [developing packages and plugins](https://flutter.dev/developing-packages). 
 -->
 
-<center><big><b>FlowyEditor</b></big></center>
+<h1 align="center"><b>FlowyEditor</b></h1>
 
 <p align="center">An easily extensible, test-covered rich text editing component for Flutter</p>
 
 
 <div align="center">
-    <img src="https://github.com/LucasXu0/AppFlowy/blob/documentation/flowy_editor/frontend/app_flowy/packages/flowy_editor/documentation/images/example.png?raw=true" width = "600"/>
+    <img src="https://raw.githubusercontent.com/LucasXu0/AppFlowy/documentation/flowy_editor/frontend/app_flowy/packages/flowy_editor/documentation/images/example.png" width = "900"/>
 </div>
 
 ## Features
 
 * Extensible
-    * Support for extending different styles of views.
-    * 支持扩展不同样式的视图
+    * Support extending custom components.
+    * 支持扩展自定义的组件
     * Support extending custom shortcut key parsing
     * 支持扩展自定义快捷键解析
     * Support extending toolbar/popup list(WIP)
@@ -34,11 +34,9 @@ and the Flutter guide for
     * All changes to the document are based on **operation**. Theoretically, collaborative editing will be supported in the future.
     * 所有对文档的修改都是基于operation。理论上未来会支持协同编辑。
 * Good stability guarantees
-    * Current code coverage >= 60%, we will still continue to add more test cases.
+    * Current code coverage >= 63%, we will still continue to add more test cases.
 
-> 由于可扩展的结构，以及随着功能的增多，我们鼓励每个提交的文件或者代码段，都可以在test下增加对应的测试用例代码，尽可能得保证提交者不需要担心自己的代码影响了已有的逻辑。
-
-> Due to the extensible structure and the increase in functionality, we encourage each commit to add test case code under test to ensure that the committer does not have to worry about their code affecting the existing logic as much as possible.
+> Due to the extensible structure and the increase in functionality, we encourage each commit to add test case code under test to ensure that the other committer does not have to worry about their code affecting the existing logic as much as possible. For more testing information, please check [TESTING.md](https://github.com/LucasXu0/AppFlowy/blob/documentation/flowy_editor/frontend/app_flowy/packages/flowy_editor/documentation/testing.md)
 
 
 ## Getting started
@@ -79,17 +77,17 @@ flutter run
 ```
 
 ## Examples
-* 样式扩展
-    * [Checkbox Text](https://github.com/LucasXu0/AppFlowy/blob/documentation/flowy_editor/frontend/app_flowy/packages/flowy_editor/lib/src/render/rich_text/checkbox_text.dart) - 展示如何基于已有的富文本组件扩展新的样式，
-    * [Image](https://github.com/LucasXu0/AppFlowy/blob/documentation/flowy_editor/frontend/app_flowy/packages/flowy_editor/example/lib/plugin/image_node_widget.dart) - 展示如何扩展新的节点，并且渲染
-    * 更多请参照 [rich text plugins](https://github.com/LucasXu0/AppFlowy/tree/documentation/flowy_editor/frontend/app_flowy/packages/flowy_editor/lib/src/render/rich_text)
-* 快捷键扩展
-    * [BUIS](https://github.com/LucasXu0/AppFlowy/blob/documentation/flowy_editor/frontend/app_flowy/packages/flowy_editor/lib/src/service/internal_key_event_handlers/update_text_style_by_command_x_handler.dart) - 展示如何通过快捷键对文字进行加粗/下划线/斜体/加粗
-    * [粘贴HTML](https://github.com/LucasXu0/AppFlowy/blob/documentation/flowy_editor/frontend/app_flowy/packages/flowy_editor/lib/src/service/internal_key_event_handlers/copy_paste_handler.dart) - 展示如何通过快捷键处理粘贴的样式
-    * 更多请参照 [internal key event handlers](https://github.com/LucasXu0/AppFlowy/tree/documentation/flowy_editor/frontend/app_flowy/packages/flowy_editor/lib/src/service/internal_key_event_handlers)
+* Extends custom components.
+    * [Checkbox Text](https://github.com/LucasXu0/AppFlowy/blob/documentation/flowy_editor/frontend/app_flowy/packages/flowy_editor/lib/src/render/rich_text/checkbox_text.dart) - Showing how to extend new styles based on existing rich text components.
+    * [Image](https://github.com/LucasXu0/AppFlowy/blob/documentation/flowy_editor/frontend/app_flowy/packages/flowy_editor/example/lib/plugin/image_node_widget.dart) - Showing how to extend a new node and render it.
+    * More examples. [rich text plugins](https://github.com/LucasXu0/AppFlowy/tree/documentation/flowy_editor/frontend/app_flowy/packages/flowy_editor/lib/src/render/rich_text)
+* Extends custom shortcut keys.
+    * [BUIS](https://github.com/LucasXu0/AppFlowy/blob/documentation/flowy_editor/frontend/app_flowy/packages/flowy_editor/lib/src/service/internal_key_event_handlers/update_text_style_by_command_x_handler.dart) - Showing how to make text bold/underline/italic/strikethrough through shortcut keys
+    * [Paste HTML](https://github.com/LucasXu0/AppFlowy/blob/documentation/flowy_editor/frontend/app_flowy/packages/flowy_editor/lib/src/service/internal_key_event_handlers/copy_paste_handler.dart) - Showing how to handle pasted styles through shortcut keys
+    * More examples. [internal key event handlers](https://github.com/LucasXu0/AppFlowy/tree/documentation/flowy_editor/frontend/app_flowy/packages/flowy_editor/lib/src/service/internal_key_event_handlers)
 
 ## Glossary
-我们正在编写更详细的说明，目前使用请查照API文档
+We are working on more detailed instructions, for now please refer to the API documentation.
 
 ## Contributing
 Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated. Please look at [CONTRIBUTING.md](documentation/contributing.md) for details.

frontend/app_flowy/packages/flowy_editor/documentation/contributing.md

@@ -1,14 +1,17 @@
 # Contributing
 
 ## Reporting Bugs
-补充截图，在 Appflowy 仓库增加一个 editor bug 的截图
+Please click this [link](https://github.com/AppFlowy-IO/AppFlowy/issues/new?assignees=&labels=bug,editor&template=bug_report.md&title=%5BFlowyEditor%20Bug%5D+Untitled+Bug+Issue) to report bugs.
 
-## 技术讨论与支持
-补充discord截图，editor那个群
+![](../documentation/images/reporting_bugs.png)
 
-## 提交PR
-我们很欢迎和appreciate大家提交的PR。我们也有很多first-contributor-welcome or help-wanted 的 issue 欢迎大家一起来实现。
+## Technical Discussion And Support
+Discord link ...
 
-BTW: 正如ReadMe所说，我们想保证大家提交的代码不会影响到现有的代码逻辑和功能，所以每次提交PR请附上对应的test，建议在test加上对测试用例，范围的简单描述。更多细节请看test.md
+## Submitting Pull Request
 
-最后，重复一句，由于我们是社区驱动的开源编辑器，所以我们会认真对待每一个PR以及每一次的PR，非常感觉大家的贡献。
+We welcome and appreciate your pull request submissions, and we have many good-first-issue-for-devs or help-wanted issues that we welcome you to implement.
+
+As [README](../README.md) said, we want to make sure that the code you submit will not affect the existing code logic and functionality, so please attach the corresponding test for each PR submission, and it is recommended to add a brief description of the test case and scope to the test. For more details, please see [TESTING.md](./testing.md)
+
+Finally, to repeat, since the FlowyEditor is a community-driven open source editor, we take every PR seriously and feel very much for everyone's contribution.

frontend/app_flowy/packages/flowy_editor/documentation/node.md

@@ -1,51 +0,0 @@
-# Node
-
-Node is the data structure used to describe the rendering information.
-
-## JSON
-
-FlowyEditor uses a specific JSON data format to describe documents. 
-
-![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7bd4be04-82c8-458c-9321-a5ed79aa94ed/Untitled.png)
-
-Each part of a document can be converted by the above format, for example
-
-![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/930ae42a-055f-4d79-bc83-921fa7845b4d/Untitled.png)
-
-An outermost layer is an object whose type is ‘editor’, which is used as the entry for FlowyEditor to parse data. And children are the details of the document.
-
-## Node
-
-The state tree is an in-memory mapping of a JSON file, consisting of nodes**,** and its property names are consistent with JSON keys. So each node must contain fields for **type, attributes, and children**.
-
-![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/04986ead-9bb6-4f32-9584-190bd70ce5e8/Untitled.png)
-
-### **Type**
-
-Type is an identifier describing the current node. The render system distributes to the corresponding builders according to the type. Note that nodes whose type is equal to ‘text’ are used as internal reserved fields.
-
-### Attributes
-
-Attributes is an information data describing the current node. We reserve the **subtype** field to describe the derived type of the current node, and other fields can be extended at will.
-
-### Children
-
-Children are the child node describing the current node. We assume that each node can nest the other nodes.
-
-We encapsulate operations on Node, such as insert, delete and modify info StateTree. It holds the root node and is responsible for converting between JSON to and from it.
-
-### Path
-
-Path is an array of integer numbers to locate a node in the state tree. For example, [0, 1] represents the second child of the first child of the root node. 
-
-### Selection
-
-### Reversed field
-
-**Type**
-
-- text
-
-**Attributes**
-
-- subtype

frontend/app_flowy/packages/flowy_editor/example/assets/example.json

@@ -6,7 +6,7 @@
       {
         "type": "image",
         "attributes": {
-          "image_src": "https://images.squarespace-cdn.com/content/v1/617f6f16b877c06711e87373/c3f23723-37f4-44d7-9c5d-6e2a53064ae7/Asset+10.png?format=500w"
+          "image_src": "https://images.squarespace-cdn.com/content/v1/617f6f16b877c06711e87373/c3f23723-37f4-44d7-9c5d-6e2a53064ae7/Asset+10.png"
         }
       },
       {
@@ -37,15 +37,7 @@
         "type": "text",
         "delta": [
           {
-            "insert": "Since we are a community-driven open source editor, we very welcome and appreciate every pull request submissions from everyone.😄😄😄"
-          }
-        ]
-      },
-      {
-        "type": "text",
-        "delta": [
-          {
-            "insert": "To be honest, we are still in the alpha stage, there are still many functions that need to be completed. And we are still developing more features. Please give us a star if the "
+            "insert": "To be honest, we are still in the alpha stage. There are still many functions that need to be completed. And we are developing more features. Please give us a star if the "
           },
           {
             "insert": "FlowyEditor",
@@ -58,6 +50,14 @@
           }
         ]
       },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Since the FlowyEditor are a community-driven open source editor, we very welcome and appreciate every pull request submissions from everyone.😄😄😄"
+          }
+        ]
+      },
       {
         "type": "text",
         "delta": [

frontend/app_flowy/packages/flowy_editor/lib/src/service/keyboard_service.dart

@@ -31,7 +31,7 @@ abstract class FlowyKeyboardService {
   ///   keyboard events separately,
   ///   you can disable the keyboard service of flowy_editor.
   /// But you need to call the `enable` function to restore after exiting
-  ///   your custom component, otherwise the keyboard service will fail.
+  ///   your custom component, otherwise the keyboard service will fails.
   void disable();
 }