docs

README.md

@@ -289,39 +289,17 @@ return (
 
 For more complex toolbar configuration, please check the document [https://editor.aomao.com/config/toolbar](https://editor.aomao.com/config/toolbar)
 
-### Collaborative editing
+### Collaborative Editing
 
-Use the `MutationObserver` to monitor the mutation of the `html` structure in the editable area (contenteditable root node) to reverse infer OT. Connect to [ShareDB](https://github.com/share/sharedb) through `Websocket`, and then use commands to add, delete, modify, and check the data saved in ShareDB.
+This open-source library listens to changes in the `HTML` structure of the editing area (contenteditable root node), uses `MutationObserver` to reverse-engineer the data structure, and connects and interacts with [Yjs](https://github.com/yjs/yjs) through `WebSocket` to achieve multi-user collaborative editing.
 
 #### Interactive mode
 
-Each editor acts as a [Client](https://github.com/big-camel/am-editor/tree/master/examples/react/components/editor/ot/client.ts) through `WebSocket` and [ Server](https://github.com/big-camel/am-editor/tree/master/ot-server) Communication and exchange of data in `json0` format generated by the editor.
+Each editor, as a [client](https://github.com/red-axe/am-editor/blob/master/examples/react/components/editor/index.tsx#L250), communicates and interacts with the [server](https://github.com/big-camel/am-editor/tree/master/yjs-server) through the `WebSocket` function in the `@aomao/yjs-websocket` plugin.
 
-The server will keep a copy of the `html` structure data in the `json` format. After receiving the instructions from the client, it will modify the data, and finally forward it to each client.
-
-Before enabling collaborative editing, we need to configure [Client](https://github.com/big-camel/am-editor/tree/master/examples/react/components/editor/ot/client.ts) and [Server](https://github.com/big-camel/am-editor/tree/master/ot-server)
-
-The server is a `NodeJs` environment, and a network service built using `express` + `WebSocket`.
-
-#### Example
-
-In the example, we have a relatively basic client code
-
-[View the complete React example](https://github.com/big-camel/am-editor/tree/master/examples/react)
-
-[View the complete example of Vue3](https://github.com/red-axe/am-editor-vue3-demo)
-
-[View the complete example of Vue2](https://github.com/zb201307/am-editor-vue2)
-
-```tsx
-//Instantiate the collaborative editing client and pass in the current editor engine instance
-const otClient = new OTClient(engine);
-//Connect to the collaboration server, `demo` is the same as the server document ID
-otClient.connect(
-	`ws://127.0.0.1:8080${currentMember ? '?uid=' + currentMember.id : ''}`,
-	'demo',
-);
-```
+-   `@aomao/yjs` implements the conversion of editor and `Yjs` data
+-   `@aomao/yjs-websocket` provides the `WebSocket` client function of the editor and `Yjs`
+-   `@aomao/yjs-websocket/server` provides the `WebSocket` server of `Yjs`, written in Node.js, and supports data storage using `MongoDB` and `LevelDB`.
 
 ### Project icon
 
@@ -331,20 +309,26 @@ otClient.connect(
 
 ### React
 
-Need to install dependencies in `am-editor
+Before using this open-source library, you need to install dependencies in the project root directory.
 
 ```base
-//After the dependencies are installed, you only need to execute the following commands in the root directory
+yarn install
 
+leran bootstrap
+```
+
+After installing the dependencies, you only need to execute the following command in the root directory to start the project:
+
+```base
 yarn start
 ```
 
--   `packages` engine and toolbar
--   `plugins` all plugins
--   `api` supports api access required by some plugins. By default, https://editor.aomao.com is used as the api service
--   `ot-server` collaborative server. Start: yarn dev
+The development directory structure of this open-source library is as follows:
 
-Visit localhost:7001 after startup
+-   `packages` contains the engine and toolbar-related code
+-   `plugins` contains all plugins
+-   `api` provides API access required by some plugins, and uses https://editor.aomao.com as the default API service
+-   `yjs-server` contains collaborative server code, which can be started by `yarn dev`.
 
 ### Vue
 

README.zh-CN.md

@@ -289,15 +289,15 @@ return (
 
 ### 协同编辑
 
-通过 `MutationObserver` 监听编辑区域(contenteditable 根节点)内的 `html` 结构的突变反推数据结构。通过`Websocket`与 [Yjs](https://github.com/yjs/yjs) 连接交互
+该开源库通过监听编辑区域(contenteditable 根节点)内的 html 结构的变化，使用 `MutationObserver` 反推数据结构，并通过 `WebSocket` 与 [Yjs](https://github.com/yjs/yjs) 连接交互，实现多用户协同编辑的功能。
 
 #### 交互模式
 
-每位编辑者作为 [客户端](https://github.com/red-axe/am-editor/blob/master/examples/react/components/editor/index.tsx#L250) 通过 `@aomao/yjs-websocket` 插件中的 `websocket` 与 [服务端](https://github.com/big-camel/am-editor/tree/master/yjs-server) 通信交互。
+每位编辑者作为 [客户端](https://github.com/red-axe/am-editor/blob/master/examples/react/components/editor/index.tsx#L250) 通过 `@aomao/yjs-websocket` 插件中的 `Websocket` 与 [服务端](https://github.com/big-camel/am-editor/tree/master/yjs-server) 进行通信交互。
 
--   @aomao/yjs 编辑器与`yjs`的数据转换
--   @aomao/yjs-websocket 编辑器与`yjs`的`websocket`客户端
--   @aomao/yjs-websocket/server `yjs`的`websocket`服务端，使用 nodejs 编写，可以配置 `mongodb` 和 `leveldb` 存储数据
+-   `@aomao/yjs` 实现编辑器与 `Yjs` 数据的转换
+-   `@aomao/yjs-websocket` 提供编辑器与 `Yjs` 的 `WebSocket` 客户端功能
+-   `@aomao/yjs-websocket/server` 提供 `Yjs` 的 `WebSocket` 服务端，使用 Node.js 编写，并支持使用 `MongoDB` 和 `LevelDB` 存储数据。
 
 ### 项目图标
 
@@ -307,18 +307,26 @@ return (
 
 ### React
 
-需要在 `am-editor 安装依赖
+在使用该开源库之前，需要先在项目根目录中安装依赖。
 
 ```base
-//依赖安装好后，只需要在根目录执行以下命令
+yarn install
 
+leran bootstrap
+```
+
+依赖安装好后，只需要在根目录执行以下命令即可启动项目：
+
+```base
 yarn start
 ```
 
--   `packages` 引擎和工具栏
--   `plugins` 所有的插件
--   `api` 支持一些插件所需要的 api 访问，默认使用 https://editor.aomao.com 作为 api 服务
--   `yjs-server` 协同服务端。启动：yarn dev
+该开源库的开发目录结构如下：
+
+-   `packages` 存放引擎和工具栏相关代码
+-   `plugins` 存放所有的插件
+-   `api` 提供一些插件所需要的 API 访问，默认使用 https://editor.aomao.com 作为 API 服务
+-   `yjs-server` 存放协同服务端代码，可通过 `yarn dev` 启动服务。
 
 ### Vue
 

examples/react/components/comment/index.tsx

@@ -20,13 +20,14 @@ import {
 import Loading from '../loading';
 import CommentButton from './button';
 import { CommentContent, DataItem, DataSourceItem } from './types';
+import { CursorData } from '@aomao/plugin-yjs';
 import CommentItem from './item';
 import context from '../../context';
 import { useDispatch, useSelector } from '../../hooks';
 import 'antd/es/message/style';
 import './index.css';
 
-export type CommentProps<T = CollaborationMember> = {
+export type CommentProps<T = CursorData> = {
 	editor: EditorInterface;
 	member: T;
 	onUpdate?: () => void;

examples/react/components/editor/index.tsx

@@ -54,7 +54,7 @@ export type EditorProps = Omit<EngineProps, 'defaultValue'> & {
 				id: string;
 		  }
 		| false;
-	member?: CollaborationMember;
+	member?: CursorData;
 	comment?: boolean;
 	toc?: boolean;
 	toolbar?: ToolbarItemProps;
@@ -452,7 +452,7 @@ const EditorComponent: React.FC<EditorProps> = ({
 										avatar: 'https://cdn-image.aomao.com/10016/avatar/2020/04/17/1587113793-da092550-5b12-477e-b229-631908d0ac2b.png',
 										name: 'test',
 										uuid: 'test',
-									} as unknown as CollaborationMember)
+									} as unknown as CursorData)
 								}
 								onUpdate={onCommentRequestUpdate}
 								{...(props.comment === true

examples/react/editor.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState, useCallback } from 'react';
-import { isServer, EngineInterface, CollaborationMember } from '@aomao/engine';
+import { isServer, EngineInterface } from '@aomao/engine';
+import { CursorData } from '@aomao/plugin-yjs';
+import { faker } from '@faker-js/faker';
 import Context from './context';
 import useDispatch from './hooks/use-dispatch';
 import useSelector from './hooks/use-selector';
@@ -16,8 +18,18 @@ import React from 'react';
 const localMember =
 	typeof localStorage === 'undefined' ? null : localStorage.getItem('member');
 
-const getMember = (): CollaborationMember => {
-	return !!localMember ? JSON.parse(localMember) : null;
+const getMember = (): CursorData => {
+	if (localMember === null) {
+		const { name } = faker;
+		const member = {
+			name: `${name.firstName()} ${name.lastName()}`,
+			avatar: faker.image.avatar(),
+			color: faker.color.rgb(),
+		};
+		localStorage.setItem('member', JSON.stringify(member));
+		return member;
+	}
+	return JSON.parse(localMember);
 };
 
 const wsUrl =

package.json

@@ -54,6 +54,7 @@
         "yorkie": "^2.0.0"
     },
     "dependencies": {
+        "@faker-js/faker": "^7.6.0",
         "markdown-it-container": "^3.0.0"
     }
 }

yarn.lock

@@ -1402,6 +1402,11 @@
     unique-filename "^1.1.1"
     which "^1.3.1"
 
+"@faker-js/faker@^7.6.0":
+  version "7.6.0"
+  resolved "https://registry.npmjs.org/@faker-js/faker/-/faker-7.6.0.tgz#9ea331766084288634a9247fcd8b84f16ff4ba07"
+  integrity sha512-XK6BTq1NDMo9Xqw/YkYyGjSsg44fbNwYRx7QK2CuoQgyy+f1rrTDHoExVM5PsyXCtfl2vs2vVJ0MN0yN6LppRw==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"