docs: add documentation for selectable

This commit is contained in:
Lucas.Xu
2022-08-16 18:34:37 +08:00
parent 713e6abaa6
commit 2224aa271e
7 changed files with 36 additions and 86 deletions

View File

@ -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.

View File

@ -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.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 918 KiB

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

View File

@ -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

View File

@ -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": [

View File

@ -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();
}