Refactor(collaborative-editing): 协同编辑模块依赖注入 (#380)

* Refactor: 协同编辑模块依赖注入

* chore: add collaborative editing dependencies to lock.yaml

Author: Yinlin124

packages/docs/fluent-editor/demos/collaborative-editing.vue

@@ -51,10 +51,22 @@ onMounted(() => {
   Promise.all([
     import('@opentiny/fluent-editor'),
     import('quill-table-up'),
+    import('yjs'),
+    import('y-protocols/awareness'),
+    import('y-quill'),
+    import('y-websocket'),
+    import('y-indexeddb'),
+    import('quill-cursors'),
   ]).then(
     ([
       { default: FluentEditor, generateTableUp, CollaborationModule },
       { defaultCustomSelect, TableMenuContextmenu, TableSelection, TableUp },
+      Y,
+      { Awareness },
+      { QuillBinding },
+      { WebsocketProvider },
+      { IndexeddbPersistence },
+      { default: QuillCursors },
     ]) => {
       if (!editorRef.value) return
 
@@ -93,6 +105,14 @@ onMounted(() => {
             },
           },
           'collaborative-editing': {
+            deps: {
+              Y,
+              Awareness,
+              QuillBinding,
+              QuillCursors,
+              WebsocketProvider,
+              IndexeddbPersistence,
+            },
             provider: {
               type: 'websocket',
               options: {

packages/docs/fluent-editor/docs/demo/collaborative-editing.md

@@ -9,7 +9,8 @@
 
 ## 在线协同演示
 
-整个协同编辑系统由三部分组成：前端 `TinyEditor`、中间层协作引擎 `Yjs` 和后端服务（用于数据同步和持久化）。前端编辑器将操作传递给 `Yjs`，`Yjs` 通过不同的连接协议（如 `WebSocket` 或 `WebRTC`）实现多端同步, 并支持将数据持久化到后端数据库（如 `MongoDB`）。
+整个协同编辑系统由三部分组成：前端 `TinyEditor`、中间层协作引擎 `Yjs` 和后端服务（用于数据同步和持久化）。前端编辑器将操作传递给 `Yjs`，`Yjs` 通过不同的连接协议（如 `WebSocket` 或 `WebRTC`）实现多端同步, 并支持将数据持久化到后端数据库（如 `MongoDB`）.
+
 <img src="/Collab-arch.png" alt="Tiny-editor-demo">
 
 下面是一个完整的协同编辑演示：
@@ -29,29 +30,52 @@
 pnpm i quill-cursors y-protocols y-quill yjs y-indexeddb y-websocket
 ```
 
-引入协同编辑模块
-
-```javascript
-import FluentEditor, { CollaborationModule } from '@opentiny/fluent-editor'
-FluentEditor.register('modules/collaborative-editing', CollaborationModule, true)
-```
-
-编辑器基础配置：
+引入协同编辑模块和依赖
 
 ```javascript
-const editor = new FluentEditor('#editor', {
-  theme: 'snow',
-  modules: {
-    'collaborative-editing': {
-      provider: {
-        type: 'websocket',
-        options: {
-          serverUrl: 'ws://localhost:1234',
-          roomName: 'Tiny-Editor-Demo',
+import FluentEditor from '@opentiny/fluent-editor'
+
+let editor
+const editorRef = document.querySelector('#editor')
+
+Promise.all([
+  import('@opentiny/fluent-editor'),
+  import('yjs'),
+  import('y-protocols/awareness'),
+  import('y-quill'),
+  import('y-websocket'),
+  import('y-indexeddb'),
+  import('quill-cursors'),
+]).then(
+  ([
+    { default: FluentEditor, CollaborationModule },
+    Y,
+    { Awareness },
+    { QuillBinding },
+    { WebsocketProvider },
+    { IndexeddbPersistence },
+    { default: QuillCursors },
+  ]) => {
+    FluentEditor.register('modules/collaborative-editing', CollaborationModule, true)
+
+    editor = new FluentEditor(editorRef, {
+      theme: 'snow',
+      modules: {
+        'collaborative-editing': {
+          deps: { Y, Awareness, QuillBinding, QuillCursors, WebsocketProvider, IndexeddbPersistence },
+          provider: {
+            type: 'websocket',
+            options: {
+              serverUrl: 'wss://demos.yjs.dev/ws',
+              roomName: 'Tiny-Editor-Demo',
+            },
+          },
         },
       },
-    },
+    })
   },
+).catch((error) => {
+  console.error('Failed to initialize FluentEditor:', error)
 })
 ```
 
@@ -192,6 +216,7 @@ const editor = new FluentEditor('#editor', {
   theme: 'snow',
   modules: {
     'collaborative-editing': {
+      deps: { Y, Awareness, QuillBinding, QuillCursors, WebsocketProvider, IndexeddbPersistence },
       provider: {
         type: 'websocket',
         options: {
@@ -229,19 +254,49 @@ const editor = new FluentEditor('#editor', {
 #### WebRTC 前端配置示例
 
 ```javascript
-const editor = new FluentEditor('#editor', {
-  theme: 'snow',
-  modules: {
-    'collaborative-editing': {
-      provider: {
-        type: 'webrtc',
-        options: {
-          roomName: 'Tiny-Editor-WebRTC',
-          signaling: ['wss://signaling.yjs.dev'],
+import FluentEditor from '@opentiny/fluent-editor'
+
+let editor
+const editorRef = document.querySelector('#editor')
+
+Promise.all([
+  import('@opentiny/fluent-editor'),
+  import('yjs'),
+  import('y-protocols/awareness'),
+  import('y-quill'),
+  import('y-webrtc'),
+  import('y-indexeddb'),
+  import('quill-cursors'),
+]).then(
+  ([
+    { default: FluentEditor, CollaborationModule },
+    Y,
+    { Awareness },
+    { QuillBinding },
+    { WebrtcProvider },
+    { IndexeddbPersistence },
+    { default: QuillCursors },
+  ]) => {
+    FluentEditor.register('modules/collaborative-editing', CollaborationModule, true)
+
+    editor = new FluentEditor(editorRef, {
+      theme: 'snow',
+      modules: {
+        'collaborative-editing': {
+          deps: { Y, Awareness, QuillBinding, QuillCursors, WebrtcProvider, IndexeddbPersistence },
+          provider: {
+            type: 'webrtc',
+            options: {
+              roomName: 'Tiny-Editor-WebRTC',
+              signaling: ['wss://signaling.yjs.dev'],
+            },
+          },
         },
       },
-    },
+    })
   },
+).catch((error) => {
+  console.error('Failed to initialize FluentEditor:', error)
 })
 ```
 
@@ -425,6 +480,7 @@ const editor = new FluentEditor('#editor', {
   theme: 'snow',
   modules: {
     'collaborative-editing': {
+      deps: { Y, Awareness, QuillBinding, QuillCursors, WebsocketProvider, IndexeddbPersistence },
       cursors: {
         template: `
           <span class="${CURSOR_CLASSES.SELECTION_CLASS}"></span>

packages/docs/package.json

@@ -24,14 +24,21 @@
     "html2canvas": "^1.4.1",
     "katex": "^0.16.11",
     "mathlive": "^0.101.0",
+    "quill-cursors": "^4.0.3",
     "quill-header-list": "0.0.2",
     "quill-markdown-shortcuts": "^0.0.10",
     "quill-table-up": "^3.0.1",
     "quill-toolbar-tip": "^0.0.13",
     "simple-mind-map": "0.14.0-fix.1",
     "simple-mind-map-plugin-themes": "^1.0.1",
     "vue": "^3.5.13",
-    "vue-toastification": "2.0.0-rc.5"
+    "vue-toastification": "2.0.0-rc.5",
+    "y-indexeddb": "^9.0.12",
+    "y-protocols": "^1.0.6",
+    "y-quill": "^1.0.0",
+    "y-webrtc": "^10.3.0",
+    "y-websocket": "^3.0.0",
+    "yjs": "^13.6.27"
   },
   "devDependencies": {
     "@playwright/test": "^1.46.1",

packages/fluent-editor/src/modules/collaborative-editing/awareness/awareness.ts

@@ -1,7 +1,7 @@
 import type QuillCursors from 'quill-cursors'
 import type { Awareness } from 'y-protocols/awareness'
+import type * as Y from 'yjs'
 import type FluentEditor from '../../../core/fluent-editor'
-import * as Y from 'yjs'
 
 export interface AwarenessState {
   name?: string
@@ -37,6 +37,7 @@ export function bindAwarenessToCursors(
   cursorsModule: QuillCursors,
   quill: FluentEditor,
   yText: Y.Text,
+  Yjs: typeof Y,
 ): (() => void) | void {
   if (!cursorsModule || !awareness) return
 
@@ -51,8 +52,8 @@ export function bindAwarenessToCursors(
 
         cursorsModule.createCursor(clientId.toString(), name, color)
 
-        const anchor = Y.createAbsolutePositionFromRelativePosition(Y.createRelativePositionFromJSON(state.cursor.anchor), doc)
-        const head = Y.createAbsolutePositionFromRelativePosition(Y.createRelativePositionFromJSON(state.cursor.head), doc)
+        const anchor = Yjs.createAbsolutePositionFromRelativePosition(Yjs.createRelativePositionFromJSON(state.cursor.anchor), doc)
+        const head = Yjs.createAbsolutePositionFromRelativePosition(Yjs.createRelativePositionFromJSON(state.cursor.head), doc)
 
         if (anchor && head && anchor.type === yText && clientId) {
           setTimeout(() => {
@@ -75,13 +76,13 @@ export function bindAwarenessToCursors(
   const selectionChangeHandler = (range: { index: number, length: number } | null) => {
     setTimeout(() => {
       if (range) {
-        const anchor = Y.createRelativePositionFromTypeIndex(yText, range.index)
-        const head = Y.createRelativePositionFromTypeIndex(yText, range.index + range.length)
+        const anchor = Yjs.createRelativePositionFromTypeIndex(yText, range.index)
+        const head = Yjs.createRelativePositionFromTypeIndex(yText, range.index + range.length)
 
         const currentState = awareness.getLocalState()
         if (!currentState?.cursor
-          || !Y.compareRelativePositions(anchor, currentState.cursor.anchor)
-          || !Y.compareRelativePositions(head, currentState.cursor.head)) {
+          || !Yjs.compareRelativePositions(anchor, currentState.cursor.anchor)
+          || !Yjs.compareRelativePositions(head, currentState.cursor.head)) {
           awareness.setLocalStateField('cursor', { anchor, head })
         }
       }

packages/fluent-editor/src/modules/collaborative-editing/awareness/y-indexeddb.ts

@@ -1,10 +1,15 @@
-import type { Doc } from 'yjs'
-import { IndexeddbPersistence } from 'y-indexeddb'
+import type { IndexeddbPersistence } from 'y-indexeddb'
+import type * as Y from 'yjs'
+
+export function setupIndexedDB(doc: Y.Doc, IndexeddbPersistenceClass?: typeof IndexeddbPersistence): () => void {
+  if (!IndexeddbPersistenceClass) {
+    console.warn('[yjs] IndexeddbPersistence not provided, offline support disabled')
+    return () => {}
+  }
 
-export function setupIndexedDB(doc: Doc): () => void {
   const fullDbName = `tiny-editor-${doc.guid}`
 
-  new IndexeddbPersistence(fullDbName, doc)
+  new IndexeddbPersistenceClass(fullDbName, doc)
 
   return (): void => {
     indexedDB.deleteDatabase(fullDbName)

packages/fluent-editor/src/modules/collaborative-editing/collaborative-editing.ts

@@ -1,26 +1,36 @@
+import type QuillCursors from 'quill-cursors'
+import type { Awareness } from 'y-protocols/awareness'
+import type * as Y from 'yjs'
 import type FluentEditor from '../../fluent-editor'
 import type { UnifiedProvider } from './provider/providerRegistry'
-import type { YjsOptions } from './types'
-import QuillCursors from 'quill-cursors'
-import { Awareness } from 'y-protocols/awareness'
-import { QuillBinding } from 'y-quill'
-import * as Y from 'yjs'
+import type { CollaborativeEditingDeps, YjsOptions } from './types'
 import { bindAwarenessToCursors, setupAwareness } from './awareness'
 import { setupIndexedDB } from './awareness/y-indexeddb'
 import { createProvider } from './provider/providerRegistry'
 
 export class CollaborativeEditor {
-  private ydoc: Y.Doc = new Y.Doc()
+  private ydoc: Y.Doc
   private provider: UnifiedProvider
   private awareness: Awareness
   private cursors: QuillCursors | null
   private cleanupBindings: (() => void) | null = null
   private clearIndexedDB: (() => void) | null = null
+  private deps: CollaborativeEditingDeps
 
   constructor(
     public quill: FluentEditor,
     public options: YjsOptions,
   ) {
+    this.deps = this.options.deps || (window as any)
+    const { Y, Awareness, QuillBinding, QuillCursors } = this.deps
+
+    if (!Y || !Awareness || !QuillBinding || !QuillCursors) {
+      throw new Error(
+        'Missing required dependencies for collaborative editing. '
+        + 'Please provide Y, Awareness, QuillBinding, and QuillCursors in the deps option.',
+      )
+    }
+
     this.ydoc = this.options.ydoc || new Y.Doc()
 
     if (this.options.cursors !== false) {
@@ -51,6 +61,7 @@ export class CollaborativeEditor {
           onDisconnect: this.options.onDisconnect,
           onError: this.options.onError,
           onSyncChange: this.options.onSyncChange,
+          deps: this.deps,
         })
         this.provider = provider
       }
@@ -64,7 +75,7 @@ export class CollaborativeEditor {
 
     if (this.provider) {
       const ytext = this.ydoc.getText('tiny-editor')
-      this.cleanupBindings = bindAwarenessToCursors(this.awareness, this.cursors, quill, ytext) || null
+      this.cleanupBindings = bindAwarenessToCursors(this.awareness, this.cursors, quill, ytext, Y) || null
       new QuillBinding(
         ytext,
         this.quill,
@@ -76,7 +87,7 @@ export class CollaborativeEditor {
     }
 
     if (this.options.offline !== false) {
-      this.clearIndexedDB = setupIndexedDB(this.ydoc)
+      this.clearIndexedDB = setupIndexedDB(this.ydoc, this.deps.IndexeddbPersistence)
     }
   }
 

packages/fluent-editor/src/modules/collaborative-editing/provider/providerRegistry.ts

@@ -1,6 +1,6 @@
 import type { Awareness } from 'y-protocols/awareness'
 import type * as Y from 'yjs'
-import type { ProviderEventHandlers } from '../types'
+import type { CollaborativeEditingDeps, ProviderEventHandlers } from '../types'
 import { WebRTCProviderWrapper } from './webrtc'
 import { WebsocketProviderWrapper } from './websocket'
 
@@ -14,6 +14,7 @@ export type ProviderConstructorProps<T = any> = {
   options: T
   awareness?: Awareness
   doc?: Y.Doc
+  deps?: CollaborativeEditingDeps
 } & ProviderEventHandlers
 
 export interface UnifiedProvider extends ProviderEventHandlers {