Merge branch 'dev-docs' into docs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "md-editor-rt",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "keywords": [
     "react",
     "nextjs",
@@ -33,7 +33,7 @@
     "markdown-it-anchor": "^9.0.1",
     "markdown-it-link-attributes": "^4.0.1",
     "markdown-it-mark": "^4.0.0",
-    "md-editor-rt": "^4.19.2",
+    "md-editor-rt": "^4.20.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^7.2.6",

public/demo-en-US.md

@@ -974,6 +974,75 @@ config({
 <MdEditor editorId="myId" modelValue={text} onChange={setText} />
 ```
 
+### 🎳 co-working
+
+Install [yjs](https://github.com/yjs/yjs)
+
+```shell
+npm i yjs y-codemirror.next y-websocket
+```
+
+Add the `yjs` extension in main.js:
+
+```js
+import { config } from 'md-editor-rt';
+import 'md-editor-rt/lib/style.css';
+
+import * as Y from 'yjs';
+import * as random from 'lib0/random';
+import { yCollab } from 'y-codemirror.next';
+import { WebsocketProvider } from 'y-websocket';
+
+const usercolors = [
+  { color: '#30bced', light: '#30bced33' },
+  { color: '#6eeb83', light: '#6eeb8333' },
+  { color: '#ffbc42', light: '#ffbc4233' },
+  { color: '#ecd444', light: '#ecd44433' },
+  { color: '#ee6352', light: '#ee635233' },
+  { color: '#9ac2c9', light: '#9ac2c933' },
+  { color: '#8acb88', light: '#8acb8833' },
+  { color: '#1be7ff', light: '#1be7ff33' }
+];
+
+// select a random color for this user
+const userColor = usercolors[random.uint32() % usercolors.length];
+
+const ydoc = new Y.Doc();
+const provider = new WebsocketProvider(
+  // Start a websocket server quickly: https://github.com/yjs/y-websocket?tab=readme-ov-file#start-a-y-websocket-server
+  'ws://127.0.0.1:1234',
+  'md-editor-v3-room',
+  ydoc
+);
+const ytext = ydoc.getText('module-name');
+
+const undoManager = new Y.UndoManager(ytext);
+
+provider.awareness.setLocalStateField('user', {
+  name: 'Anonymous ' + Math.floor(Math.random() * 100),
+  color: userColor.color,
+  colorLight: userColor.light
+});
+
+config({
+  codeMirrorExtensions(_theme, extensions) {
+    return [...extensions, yCollab(ytext, provider.awareness, { undoManager })];
+  }
+});
+```
+
+If you want to use it in only one editor, try distinguishing using `editorId` (`^4.20.0`):
+
+```js
+config({
+  codeMirrorExtensions(_theme, extensions, _keyBindings, { editorId }) {
+    return editorId === 'myId'
+      ? [...extensions, yCollab(ytext, provider.awareness, { undoManager })]
+      : extensions;
+  }
+});
+
 ## 🧻 Edit This Page
 
 [demo-en-US](https://github.com/imzbf/md-editor-rt/blob/dev-docs/public/demo-en-US.md)
+```

public/demo-zh-CN.md

@@ -990,6 +990,75 @@ config({
 <MdEditor editorId="myId" modelValue={text} onChange={setText} />
 ```
 
+### 🎳 协同办公
+
+安装[yjs](https://github.com/yjs/yjs)及相关库
+
+```shell
+npm i yjs y-codemirror.next y-websocket
+```
+
+在 main.js 中添加 yjs 扩展：
+
+```js
+import { config } from 'md-editor-rt';
+import 'md-editor-rt/lib/style.css';
+
+import * as Y from 'yjs';
+import * as random from 'lib0/random';
+import { yCollab } from 'y-codemirror.next';
+import { WebsocketProvider } from 'y-websocket';
+
+const usercolors = [
+  { color: '#30bced', light: '#30bced33' },
+  { color: '#6eeb83', light: '#6eeb8333' },
+  { color: '#ffbc42', light: '#ffbc4233' },
+  { color: '#ecd444', light: '#ecd44433' },
+  { color: '#ee6352', light: '#ee635233' },
+  { color: '#9ac2c9', light: '#9ac2c933' },
+  { color: '#8acb88', light: '#8acb8833' },
+  { color: '#1be7ff', light: '#1be7ff33' }
+];
+
+// select a random color for this user
+const userColor = usercolors[random.uint32() % usercolors.length];
+
+const ydoc = new Y.Doc();
+const provider = new WebsocketProvider(
+  // Start a websocket server quickly: https://github.com/yjs/y-websocket?tab=readme-ov-file#start-a-y-websocket-server
+  'ws://127.0.0.1:1234',
+  'md-editor-v3-room',
+  ydoc
+);
+const ytext = ydoc.getText('module-name');
+
+const undoManager = new Y.UndoManager(ytext);
+
+provider.awareness.setLocalStateField('user', {
+  name: 'Anonymous ' + Math.floor(Math.random() * 100),
+  color: userColor.color,
+  colorLight: userColor.light
+});
+
+config({
+  codeMirrorExtensions(_theme, extensions) {
+    return [...extensions, yCollab(ytext, provider.awareness, { undoManager })];
+  }
+});
+```
+
+如果只想在某一个编辑器中使用，尝试通过`editorId`进行区别(`^4.20.0`)：
+
+```js
+config({
+  codeMirrorExtensions(_theme, extensions, _keyBindings, { editorId }) {
+    return editorId === 'myId'
+      ? [...extensions, yCollab(ytext, provider.awareness, { undoManager })]
+      : extensions;
+  }
+});
+```
+
 ## 🧻 编辑此页面
 
 [demo-zh-CN](https://github.com/imzbf/md-editor-rt/blob/dev-docs/public/demo-zh-CN.md)

public/doc-en-US.md

@@ -1233,6 +1233,12 @@ editorRef.current?.execCommand('bold');
 
 ---
 
+### 🔖 getEditorView
+
+Get codemirror instance.
+
+---
+
 ## 💴 Config Editor
 
 Use `config(option: ConfigOption)` to reconfigure `markdown-it` and so on.
@@ -1247,6 +1253,17 @@ We recommend configuring it at the project entry point, such as in `main.js` for
 
 Customize new extensions based on theme and default extensions f codeMirror.
 
+```ts
+type CodeMirrorExtensions = (
+  theme: Themes,
+  extensions: Array<Extension>,
+  keyBindings: Array<KeyBinding>,
+  options: {
+    editorId: string;
+  }
+) => Array<Extension>;
+```
+
 Example: Editor does not render the line number of textarea by default, this extension needs to be manually added
 
 ```js

public/doc-zh-CN.md

@@ -1265,6 +1265,12 @@ editorRef.current?.execCommand('bold');
 
 ---
 
+### 🔖 getEditorView
+
+获取 codemirror 实例。
+
+---
+
 ## 💴 配置编辑器
 
 使用`config(option: ConfigOption)`方法，可以对构建实例进行定制。
@@ -1279,6 +1285,17 @@ editorRef.current?.execCommand('bold');
 
 根据主题和内部默认的 codeMirror 扩展自定义新的扩展。
 
+```ts
+type CodeMirrorExtensions = (
+  theme: Themes,
+  extensions: Array<Extension>,
+  keyBindings: Array<KeyBinding>,
+  options: {
+    editorId: string;
+  }
+) => Array<Extension>;
+```
+
 使用示例：编辑器默认不显示输入框的行号，需要手动添加扩展
 
 ```js

public/grammar-en-US.md

@@ -68,20 +68,20 @@ _It is a dream deeply rooted in the American dream._
 
 ## 🙊 Superscript
 
-I have a dream that one day this nation will rise up.<sup>[1]</sup>
+I have a dream that one day this nation will rise up.^[1]^
 
 ```markdown
-I have a dream that one day this nation will rise up.<sup>[1]</sup>
+I have a dream that one day this nation will rise up.^[1]^
 ```
 
 ---
 
 ## 🐒 Subscript
 
-I have a dream that one day this nation will rise up.<sub>[2]</sub>
+I have a dream that one day this nation will rise up.~[2]~
 
 ```markdown
-I have a dream that one day this nation will rise up.<sub>[2]</sub>
+I have a dream that one day this nation will rise up.~[2]~
 ```
 
 ---

public/grammar-zh-CN.md

@@ -68,20 +68,20 @@ _It is a dream deeply rooted in the American dream._
 
 ## 🙊 上标
 
-I have a dream that one day this nation will rise up.<sup>[1]</sup>
+I have a dream that one day this nation will rise up.^[1]^
 
 ```markdown
-I have a dream that one day this nation will rise up.<sup>[1]</sup>
+I have a dream that one day this nation will rise up.^[1]^
 ```
 
 ---
 
 ## 🐒 下标
 
-I have a dream that one day this nation will rise up.<sub>[2]</sub>
+I have a dream that one day this nation will rise up.~[2]~
 
 ```markdown
-I have a dream that one day this nation will rise up.<sub>[2]</sub>
+I have a dream that one day this nation will rise up.~[2]~
 ```
 
 ---

public/preview-en-US.md

@@ -4,7 +4,7 @@ Markdown Editor for React, developed in jsx and typescript, support different th
 
 ### 🤖 Base
 
-**bold**, <u>underline</u>, _italic_, ~~line-through~~, superscript<sup>26</sup>，subscript<sub>[1]</sub>，`inline code`，[link](https://github.com/imzbf)
+**bold**, <u>underline</u>, _italic_, ~~line-through~~, superscript^26^, subscript~1~, `inline code`, [link](https://github.com/imzbf)
 
 > quote: I Have a Dream
 

public/preview-zh-CN.md

@@ -4,7 +4,7 @@ Markdown 编辑器，React 版本，使用 jsx 和 typescript 语法开发，支
 
 ### 🤖 基本演示
 
-**加粗**，<u>下划线</u>，_斜体_，~~删除线~~，上标<sup>26</sup>，下标<sub>[1]</sub>，`inline code`，[超链接](https://github.com/imzbf)
+**加粗**，<u>下划线</u>，_斜体_，~~删除线~~，上标^26^，下标~1~，`inline code`，[超链接](https://github.com/imzbf)
 
 > 引用：《I Have a Dream》
 

yarn.lock

@@ -3447,6 +3447,16 @@ markdown-it-mark@^4.0.0:
   resolved "https://registry.npmjs.org/markdown-it-mark/-/markdown-it-mark-4.0.0.tgz#c19cbc87d9cb9fd1a495e8fe31b740b6d9ebf8c8"
   integrity sha512-YLhzaOsU9THO/cal0lUjfMjrqSMPjjyjChYM7oyj4DnyaXEzA8gnW6cVJeyCrCVeyesrY2PlEdUYJSPFYL4Nkg==
 
+markdown-it-sub@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/markdown-it-sub/-/markdown-it-sub-2.0.0.tgz#10f6c7bbf2faacf71ae1a64c75009c40ef9b2c94"
+  integrity sha512-iCBKgwCkfQBRg2vApy9vx1C1Tu6D8XYo8NvevI3OlwzBRmiMtsJ2sXupBgEA7PPxiDwNni3qIUkhZ6j5wofDUA==
+
+markdown-it-sup@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/markdown-it-sup/-/markdown-it-sup-2.0.0.tgz#683b9390929f3024fcd5291799c466ce3d367f44"
+  integrity sha512-5VgmdKlkBd8sgXuoDoxMpiU+BiEt3I49GItBzzw7Mxq9CxvnhE/k09HFli09zgfFDRixDQDfDxi0mgBCXtaTvA==
+
 markdown-it@^14.0.0:
   version "14.1.0"
   resolved "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz#3c3c5992883c633db4714ccb4d7b5935d98b7d45"
@@ -3464,10 +3474,10 @@ marked@*:
   resolved "https://registry.npmjs.org/marked/-/marked-13.0.2.tgz#d5d05bd2683a85cb9cc6afbe5240e3a8bffcb92a"
   integrity sha512-J6CPjP8pS5sgrRqxVRvkCIkZ6MFdRIjDkwUwgJ9nL2fbmM6qGQeB2C16hi8Cc9BOzj6xXzy0jyi0iPIfnMHYzA==
 
-md-editor-rt@^4.19.2:
-  version "4.19.2"
-  resolved "https://registry.npmjs.org/md-editor-rt/-/md-editor-rt-4.19.2.tgz#0dd7c80c0c70567e783fe9591b55867ad28d77ad"
-  integrity sha512-BHeo0L8sly/EfHQZi09l7wFugFry1MCrM0dAHCa/wF+xiqv7FowI2g2oiYu2S3l4H9qVdvfxqcj/D6YnYtZEeg==
+md-editor-rt@^4.20.0:
+  version "4.20.0"
+  resolved "https://registry.npmjs.org/md-editor-rt/-/md-editor-rt-4.20.0.tgz#7ebd610d68440fd4cb2cb2be771c07ffcc0be377"
+  integrity sha512-jBZclNYRDhNnkTw+yvyBIC5bbVn/9ie8NPkNiDNFyEbmF9NceY8QIzRoYvpcele5sa/vgElnw2SZ/rNuG7stiQ==
   dependencies:
     "@codemirror/lang-markdown" "^6.2.5"
     "@codemirror/language-data" "^6.5.1"
@@ -3478,6 +3488,8 @@ md-editor-rt@^4.19.2:
     lru-cache "^10.2.0"
     markdown-it "^14.0.0"
     markdown-it-image-figures "^2.1.1"
+    markdown-it-sub "^2.0.0"
+    markdown-it-sup "^2.0.0"
     medium-zoom "^1.1.0"
     punycode "^2.3.1"
     xss "^1.0.15"