feat(yjs): Improve local collaboration example

cycleccc · Sep 15, 2024 · 4bd3d49 · 4bd3d49
1 parent 88f7762
commit 4bd3d49
Show file tree

Hide file tree

Showing 6 changed files with 487 additions and 67 deletions.
diff --git a/packages/yjs/examples/frontend/package.json b/packages/yjs/examples/frontend/package.json
@@ -25,7 +25,7 @@
     "react-router-dom": "^6.0.1",
     "slate": "^0.82.1",
     "y-protocols": "^1.0.6",
-    "y-websocket": "^10.3.0",
+    "y-websocket": "^2.0.4",
     "yjs": "^13.6.19"
   },
   "devDependencies": {

diff --git a/packages/yjs/examples/frontend/src/pages/Simple.tsx b/packages/yjs/examples/frontend/src/pages/Simple.tsx
@@ -1,5 +1,5 @@
 import { WebsocketProvider } from 'y-websocket'
-import { withYHistory, withYjs, YjsEditor } from '@wangeditor-next/yjs'
+import { withYHistory, withYjs, YjsEditor, slateNodesToInsertDelta } from '@wangeditor-next/yjs'
 import React, { useEffect, useState } from 'react'
 import { Descendant } from 'slate'
 import * as Y from 'yjs'
@@ -10,7 +10,13 @@ import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor-next/edit
 import { Boot } from '@wangeditor-next/editor'
 
 const yDoc = new Y.Doc()
-const wsProvider = new WebsocketProvider('ws://localhost:1234', 'my-roomname', yDoc)
+const wsProvider = new WebsocketProvider('ws://localhost:1234', 'wangeditor-next-yjs', yDoc)
+const sharedType = yDoc.get('content', Y.XmlText)
+console.log('🚀 ~ SimplePage ~ sharedType:', sharedType.toJSON())
+// @ts-ignore
+Boot.registerPlugin(withYjs(sharedType))
+// @ts-ignore
+Boot.registerPlugin(withYHistory())
 
 wsProvider.on('status', event => {
   console.log(event.status)
@@ -19,7 +25,7 @@ wsProvider.on('status', event => {
 const initialValue: Descendant[] = [
   {
     type: 'paragraph',
-    children: [{ text: 'Try it out for yourself!' }],
+    children: [{ text: 'hello' }],
   },
 ]
 
@@ -35,13 +41,19 @@ export const SimplePage = () => {
   const editorConfig: Partial<IEditorConfig> = {
     placeholder: '请输入内容...',
   }
-  const sharedType = yDoc.get('content', Y.XmlText)
-  // @ts-ignore
-  Boot.registerPlugin(withYjs(sharedType))
-  // Boot.registerPlugin(withYHistory())
+
+  console.log(Boot.plugins)
+
+  //   useEffect(() => {
+  //     setTimeout(() => {
+  //       setHtml('<p>hello&nbsp;<strong>world</strong>.</p>\n<p><br></p>')
+  //     }, 1500)
+  //   }, [])
 
   useEffect(() => {
     if (editor) {
+      sharedType.applyDelta(slateNodesToInsertDelta(initialValue))
+      //   sharedType.insert(0, 'hello')
       YjsEditor.connect(editor)
     }
     return () => {
@@ -74,14 +86,14 @@ export const SimplePage = () => {
         <Editor
           defaultConfig={editorConfig}
           value={html}
-          defaultContent={initialValue}
           onCreated={setEditor}
           onChange={editor => setHtml(editor.getHtml())}
           mode="default"
           style={{ height: '500px', overflowY: 'hidden' }}
         />
       </div>
       <div style={{ marginTop: '15px' }}>{html}</div>
+      <div style={{ marginTop: '15px' }}>{editor && JSON.stringify(editor.selection)}</div>
     </>
   )
 }

diff --git a/packages/yjs/examples/frontend/yarn.lock b/packages/yjs/examples/frontend/yarn.lock
@@ -2244,11 +2244,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/is-hotkey@^0.1.1":
-  version "0.1.10"
-  resolved "https://registry.npmjs.org/@types/is-hotkey/-/is-hotkey-0.1.10.tgz#cf440fab9bf75ffba4e1a16e8df28938de0778c9"
-  integrity sha512-RvC8KMw5BCac1NvRRyaHgMMEtBaZ6wh0pyPTBu7izn4Sj/AX9Y4aXU5c7rX8PnM/knsuUpC1IeoBkANtxBypsQ==
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.6"
   resolved "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7"
@@ -2283,11 +2278,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/lodash@^4.14.149":
-  version "4.17.7"
-  resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz#2f776bcb53adc9e13b2c0dfd493dfcbd7de43612"
-  integrity sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==
-
 "@types/minimatch@*":
   version "5.1.2"
   resolved "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz#07508b45797cb81ec3f273011b054cd0755eddca"
@@ -4359,11 +4349,6 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
-direction@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz#2b86fb686967e987088caf8b89059370d4837442"
-  integrity sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==
-
 dom7@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/dom7/-/dom7-3.0.0.tgz#b861ce5d67a6becd7aaa3ad02942ff14b1240331"
@@ -6147,11 +6132,6 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
-is-hotkey@^0.1.6:
-  version "0.1.8"
-  resolved "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.1.8.tgz#6b1f4b2d0e5639934e20c05ed24d623a21d36d25"
-  integrity sha512-qs3NZ1INIS+H+yeo7cD9pDfwYV/jqRh1JG9S9zYrNudkoUQg7OL7ziXqRKu+InFjUIDoP2o6HIkLYMh1pcWgyQ==
-
 is-hotkey@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.2.0.tgz#1835a68171a91e5c9460869d96336947c8340cef"
@@ -6872,7 +6852,7 @@ lodash.union@^4.6.0:
   resolved "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88"
   integrity sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw==
 
-lodash@^4.17.12, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.4:
+lodash@^4.17.12, lodash@^4.17.15, lodash@^4.17.20:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -8995,7 +8975,7 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scroll-into-view-if-needed@^2.2.20, scroll-into-view-if-needed@^2.2.28:
+scroll-into-view-if-needed@^2.2.28:
   version "2.2.31"
   resolved "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz#d3c482959dc483e37962d1521254e3295d0d1587"
   integrity sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==
@@ -9174,20 +9154,6 @@ slate-history@^0.66.0:
   dependencies:
     is-plain-object "^5.0.0"
 
-slate-react@^0.83.0:
-  version "0.83.2"
-  resolved "https://registry.npmjs.org/slate-react/-/slate-react-0.83.2.tgz#7099db1607b79c95cc2a41e2df1e04982b7e26a5"
-  integrity sha512-V5qtPsCOiDVCMU3ovj/CWndxx9/as5/wGJxnbJDRVzuazSh+NVw/YuGTlus1fCt+Nlt6UHOhFvM7C9pXYaftPA==
-  dependencies:
-    "@types/is-hotkey" "^0.1.1"
-    "@types/lodash" "^4.14.149"
-    direction "^1.0.3"
-    is-hotkey "^0.1.6"
-    is-plain-object "^5.0.0"
-    lodash "^4.17.4"
-    scroll-into-view-if-needed "^2.2.20"
-    tiny-invariant "1.0.6"
-
 slate@^0.72.0:
   version "0.72.8"
   resolved "https://registry.npmjs.org/slate/-/slate-0.72.8.tgz#5a018edf24e45448655293a68bfbcf563aa5ba81"
@@ -9741,11 +9707,6 @@ timed-out@^4.0.1:
   resolved "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
   integrity sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA==
 
-[email protected]:
-  version "1.0.6"
-  resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73"
-  integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==
-
 tiny-warning@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
@@ -10345,9 +10306,9 @@ y-protocols@^1.0.5, y-protocols@^1.0.6:
   dependencies:
     lib0 "^0.2.85"
 
-y-websocket@^10.3.0:
+y-websocket@^2.0.4:
   version "2.0.4"
-  resolved "https://registry.npmjs.org/y-websocket/-/y-websocket-2.0.4.tgz#7f4072f06229629ed625d1eb4c7cad3a559f0db4"
+  resolved "https://registry.npmmirror.com/y-websocket/-/y-websocket-2.0.4.tgz#7f4072f06229629ed625d1eb4c7cad3a559f0db4"
   integrity sha512-UbrkOU4GPNFFTDlJYAxAmzZhia8EPxHkngZ6qjrxgIYCN3gI2l+zzLzA9p4LQJ0IswzpioeIgmzekWe7HoBBjg==
   dependencies:
     lib0 "^0.2.52"

diff --git a/packages/yjs/src/utils/convert.ts b/packages/yjs/src/utils/convert.ts
@@ -8,12 +8,8 @@ export function yTextToSlateElement(yText: Y.XmlText): Element {
   const delta = yTextToInsertDelta(yText)
 
   const children = delta.length > 0 ? delta.map(deltaInsertToSlateNode) : [{ text: '' }]
-  if (delta.length > 0) {
-    return { ...yText.getAttributes(), children }
-  } else {
-    //@ts-ignore
-    return { type: 'paragraph', children }
-  }
+
+  return { ...yText.getAttributes(), children }
 }
 
 export function deltaInsertToSlateNode(insert: DeltaInsert): Node {

diff --git a/packages/yjs/tsconfig.json b/packages/yjs/tsconfig.json
@@ -3,5 +3,6 @@
   "extends": "../../tsconfig.json",
   "include": [
     "./src/**/*",
+    // "../custom-types.d.ts"
   ]
 }