feat: collaborative-editing modules init and import quill-cursor modules

Author: yinlin124

packages/fluent-editor/package.json

@@ -34,8 +34,15 @@
   "dependencies": {
     "lodash-es": "^4.17.15",
     "quill": "^2.0.0",
+    "quill-cursors": "^4.0.4",
     "quill-easy-color": "^0.0.9",
-    "quill-shortcut-key": "^0.0.5"
+    "quill-shortcut-key": "^0.0.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": {
     "@emoji-mart/data": "^1.2.1",

packages/fluent-editor/src/fluent-editor.ts

@@ -1,7 +1,9 @@
+import QuillCursors from 'quill-cursors'
 import { FontStyle, LineHeightStyle, SizeStyle, TextIndentStyle } from './attributors'
 import { EN_US } from './config/i18n/en-us'
 import { ZH_CN } from './config/i18n/zh-cn'
 import FluentEditor from './core/fluent-editor'
+import CollaborativeEditor from './modules/collaborative-editing'
 import { EmojiBlot, SoftBreak, StrikeBlot, Video } from './formats'
 import Counter from './modules/counter' // 字符统计
 import { CustomClipboard } from './modules/custom-clipboard' // 粘贴板
@@ -45,6 +47,7 @@ FluentEditor.register(
     'formats/divider': DividerBlot,
     'formats/link': LinkBlot,
 
+    'modules/collaboration': CollaborativeEditor,
     'modules/clipboard': CustomClipboard,
     'modules/counter': Counter,
     'modules/emoji': EmojiModule,
@@ -57,6 +60,7 @@ FluentEditor.register(
     'modules/toolbar': BetterToolbar,
     'modules/uploader': FileUploader,
     'modules/shortcut-key': ShortCutKey,
+    'modules/cursors': QuillCursors,
 
     'themes/snow': SnowTheme,
 

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

@@ -0,0 +1,30 @@
+import type { Awareness } from 'y-protocols/awareness'
+
+export interface AwarenessState {
+  name?: string
+  color?: string
+}
+
+export interface AwarenessEvents {
+  change?: (changes: { added: number[], updated: number[], removed: number[] }, transactionOrigin: any) => void
+  update?: ({ added, updated, removed }: { added: number[], updated: number[], removed: number[] }, origin: any) => void
+  destroy?: () => void
+}
+
+export interface AwarenessOptions {
+  state?: AwarenessState
+  events?: AwarenessEvents
+  timeout?: number | undefined
+}
+
+export function setupAwareness(options?: AwarenessOptions, defaultAwareness?: Awareness): Awareness | null {
+  if (!defaultAwareness) return null
+
+  const awareness = defaultAwareness
+
+  if (options?.state) {
+    awareness.setLocalStateField('user', options.state)
+  }
+
+  return awareness
+}

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

@@ -0,0 +1,2 @@
+export * from './awareness'
+export * from './y-indexeddb'

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

@@ -0,0 +1,12 @@
+import type { Doc } from 'yjs'
+import { IndexeddbPersistence } from 'y-indexeddb'
+
+export interface IndexedDBOptions {
+  dbName: string
+}
+
+export function setupIndexedDB(doc: Doc, options?: IndexedDBOptions) {
+  const id = 'tiny-editor'
+  const dbName = options?.dbName || 'document'
+  return new IndexeddbPersistence(`${id}-${dbName}`, doc)
+}

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

@@ -0,0 +1,98 @@
+import type FluentEditor from '../../fluent-editor'
+import type { YjsOptions } from './types'
+import { Awareness } from 'y-protocols/awareness'
+import { QuillBinding } from 'y-quill'
+import * as Y from 'yjs'
+import { setupAwareness } from './awareness'
+import { setupIndexedDB } from './awareness/y-indexeddb'
+import { createProvider } from './provider/customProvider'
+
+export class CollaborativeEditor {
+  private ydoc: Y.Doc = new Y.Doc()
+  private provider: any
+  private awareness: Awareness
+  private _isConnected = false // 插件级别
+  private _isSynced = false
+
+  constructor(
+    public quill: FluentEditor,
+    private options: YjsOptions,
+  ) {
+    this.ydoc = this.options.ydoc || new Y.Doc()
+
+    if (this.options.awareness) {
+      this.awareness = setupAwareness(this.options.awareness, new Awareness(this.ydoc))
+    }
+
+    if (this.options.provider) {
+      const providerConfig = this.options.provider
+      try {
+        // Create provider with shared handlers, Y.Doc, and Awareness
+        const provider = createProvider({
+          doc: this.ydoc,
+          options: providerConfig.options,
+          type: providerConfig.type,
+          awareness: this.awareness,
+          onConnect: () => {
+            this._isConnected = true
+            this.options.onConnect?.()
+          },
+          onDisconnect: () => {
+            this._isConnected = false
+            this.options.onDisconnect?.()
+          },
+          onError: (error) => {
+            this.options.onError?.(error)
+          },
+          onSyncChange: (isSynced) => {
+            this._isSynced = isSynced
+            this.options.onSyncChange?.(isSynced)
+          },
+        })
+        this.provider = provider
+      }
+      catch (error) {
+        console.warn(
+          `[yjs] Error creating provider of type ${providerConfig.type}:`,
+          error,
+        )
+      }
+    }
+
+    if (this.provider) {
+      const ytext = this.ydoc.getText('tiny-editor')
+      new QuillBinding(
+        ytext,
+        this.quill,
+        this.awareness,
+      )
+    }
+    else {
+      console.error('Failed to initialize collaborative editor: no valid provider configured')
+    }
+
+    if (this.options.offline) {
+      setupIndexedDB(this.ydoc, typeof this.options.offline === 'object' ? this.options.offline : undefined)
+    }
+  }
+
+  public getAwareness(): Awareness {
+    return this.awareness
+  }
+
+  public getProvider() {
+    return this.provider
+  }
+
+  public getYDoc() {
+    return this.ydoc
+  }
+
+  get isConnected() {
+    return this._isConnected
+  }
+
+  get isSynced() {
+    return this._isSynced
+  }
+}

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

@@ -0,0 +1,8 @@
+import { CollaborativeEditor } from './collaborative-editing'
+
+export const collaborationModule = {
+  name: 'collaboration',
+  component: CollaborativeEditor,
+}
+
+export default CollaborativeEditor

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

@@ -0,0 +1,57 @@
+import type { Awareness } from 'y-protocols/awareness'
+import type * as Y from 'yjs'
+import type { ProviderEventHandlers } from '../types'
+import { WebRTCProviderWrapper } from './webrtc'
+import { WebsocketProviderWrapper } from './websocket'
+
+export type ProviderRegistry = Record<string, ProviderConstructor>
+
+export type ProviderConstructor<T = any> = new (
+  props: ProviderConstructorProps<T>
+) => UnifiedProvider
+
+export type ProviderConstructorProps<T = any> = {
+  options: T
+  awareness?: Awareness
+  doc?: Y.Doc
+} & ProviderEventHandlers
+
+export interface UnifiedProvider {
+  awareness: Awareness
+  document: Y.Doc
+  type: 'webrtc' | 'websocket' | string
+  connect: () => void
+  destroy: () => void
+  disconnect: () => void
+  isConnected: boolean
+  isSynced: boolean
+}
+
+const providerRegistry: ProviderRegistry = {
+  websocket: WebsocketProviderWrapper,
+  webrtc: WebRTCProviderWrapper,
+}
+
+export function registerProviderType<T>(type: string, providerClass: ProviderConstructor<T>) {
+  providerRegistry[type as string]
+    = providerClass as ProviderConstructor
+}
+
+export function getProviderClass(type: string): ProviderConstructor | undefined {
+  return providerRegistry[type]
+}
+
+export function createProvider({
+  type,
+  ...props
+}: ProviderConstructorProps & {
+  type: string
+}) {
+  const ProviderClass = getProviderClass(type)
+
+  if (!ProviderClass) {
+    throw new Error(`Provider type "${type}" not found in registry`)
+  }
+
+  return new ProviderClass(props)
+}

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

@@ -0,0 +1,3 @@
+export * from './customProvider'
+export * from './webrtc'
+export * from './websocket'

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

@@ -0,0 +1,132 @@
+import type { Awareness } from 'y-protocols/awareness'
+import type { ProviderEventHandlers } from '../types'
+import type { UnifiedProvider } from './customProvider'
+import { WebrtcProvider } from 'y-webrtc'
+import * as Y from 'yjs'
+
+export interface WebRTCProviderOptions {
+  roomname: string
+  filterBcConns?: boolean
+  maxConns?: number
+  password?: string
+  peerOpts?: Record<string, unknown>
+  signaling?: string[]
+}
+
+export class WebRTCProviderWrapper implements UnifiedProvider {
+  private provider: WebrtcProvider
+  private _isConnected = false
+  private _isSynced = false
+  private doc: Y.Doc
+
+  private onConnect?: () => void
+  private onDisconnect?: () => void
+  private onError?: (error: Error) => void
+  private onSyncChange?: (isSynced: boolean) => void
+
+  connect = () => {
+    try {
+      this.provider.connect()
+    }
+    catch (error) {
+      console.warn('[yjs] Error connecting WebRTC provider:', error)
+    }
+  }
+
+  destroy = () => {
+    try {
+      this.provider.destroy()
+    }
+    catch (error) {
+      console.warn('[yjs] Error destroying WebRTC provider:', error)
+    }
+  }
+
+  disconnect = () => {
+    try {
+      this.provider.disconnect()
+      this._isConnected = false
+      this._isSynced = false
+    }
+    catch (error) {
+      console.warn('[yjs] Error disconnecting WebRTC provider:', error)
+    }
+  }
+
+  constructor({
+    awareness,
+    doc,
+    options,
+    onConnect,
+    onDisconnect,
+    onError,
+    onSyncChange,
+  }: {
+    options: WebRTCProviderOptions
+    awareness?: Awareness
+    doc?: Y.Doc
+  } & ProviderEventHandlers) {
+    this.onConnect = onConnect
+    this.onDisconnect = onDisconnect
+    this.onError = onError
+    this.onSyncChange = onSyncChange
+
+    this.doc = doc || new Y.Doc()
+    try {
+      this.provider = new WebrtcProvider(options.roomname, this.doc, {
+        awareness,
+        ...options,
+      })
+
+      this.provider.on('status', (status: { connected: boolean }) => {
+        const wasConnected = this._isConnected
+        this._isConnected = status.connected
+        if (status.connected) {
+          if (!wasConnected) {
+            this.onConnect?.()
+          }
+          if (!this._isSynced) {
+            this._isSynced = true
+            this.onSyncChange?.(true)
+          }
+        }
+        else {
+          if (wasConnected) {
+            this.onDisconnect?.()
+
+            if (this._isSynced) {
+              this._isSynced = false
+              onSyncChange?.(false)
+            }
+          }
+        }
+      })
+    }
+    catch (error) {
+      console.warn('[yjs] Error creating WebRTC provider:', error)
+      onError?.(error instanceof Error ? error : new Error(String(error)))
+    }
+  }
+
+  type: 'webrtc'
+
+  get awareness(): Awareness {
+    return this.provider!.awareness
+  }
+
+  get document() {
+    return this.doc
+  }
+
+  get isConnected() {
+    return this._isConnected
+  }
+
+  get isSynced() {
+    return this._isSynced
+  }
+
+  getProvider() {
+    return this.provider
+  }
+}