@opentiny/fluent-editor 4.0.0-alpha.6 → 4.0.0-alpha.8

package/src/modules/ai/types.ts

@@ -0,0 +1,18 @@
+export interface OperationMenuItem {
+  id: string
+  text: string
+  icon?: string
+}
+
+export interface ResultMenuItem {
+  text: string
+  icon: string
+  selectText?: string
+}
+
+export interface AIOptions {
+  host?: string
+  apiKey: string
+  model?: string
+  contentMaxLength?: number
+}

package/src/modules/collaborative-editing/awareness/awareness.ts

@@ -0,0 +1,141 @@
+import type QuillCursors from 'quill-cursors'
+import type { Awareness } from 'y-protocols/awareness'
+import type FluentEditor from '../../../core/fluent-editor'
+import * as Y from 'yjs'
+
+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
+}
+
+export function bindAwarenessToCursors(
+  awareness: Awareness,
+  cursorsModule: QuillCursors,
+  quill: FluentEditor,
+  yText: Y.Text,
+): (() => void) | void {
+  if (!cursorsModule || !awareness) return
+
+  const doc = yText.doc!
+
+  const updateCursor = (clientId: number, state: any) => {
+    try {
+      if (state?.cursor && clientId !== awareness.clientID) {
+        const user = state.user || {}
+        const color = user.color || '#ff6b6b'
+        const name = user.name || `User ${clientId}`
+
+        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)
+
+        if (anchor && head && anchor.type === yText && clientId) {
+          setTimeout(() => {
+            cursorsModule.moveCursor(clientId.toString(), {
+              index: anchor.index,
+              length: head.index - anchor.index,
+            })
+          }, 0)
+        }
+      }
+      else {
+        cursorsModule.removeCursor(clientId.toString())
+      }
+    }
+    catch (err) {
+      console.error('Cursor update failed:', err)
+    }
+  }
+
+  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 currentState = awareness.getLocalState()
+        if (!currentState?.cursor
+          || !Y.compareRelativePositions(anchor, currentState.cursor.anchor)
+          || !Y.compareRelativePositions(head, currentState.cursor.head)) {
+          awareness.setLocalStateField('cursor', { anchor, head })
+        }
+      }
+      else {
+        if (awareness.getLocalState()?.cursor !== null) {
+          awareness.setLocalStateField('cursor', null)
+        }
+      }
+    }, 0)
+  }
+
+  const changeHandler = ({ added, updated, removed }: {
+    added: number[]
+    updated: number[]
+    removed: number[]
+  }) => {
+    if (quill.composition.isComposing) return
+    const states = awareness.getStates()
+
+    added.forEach((id) => {
+      updateCursor(id, states.get(id))
+    })
+
+    updated.forEach((id) => {
+      updateCursor(id, states.get(id))
+    })
+
+    removed.forEach((id) => {
+      cursorsModule.removeCursor(id.toString())
+    })
+  }
+
+  awareness.on('change', changeHandler)
+  quill.on('editor-change', (eventName, ...args) => {
+    if (quill.composition.isComposing) return
+    if (eventName === 'text-change') {
+      if (args[2] === 'user') {
+        const range = quill.getSelection()
+        selectionChangeHandler(range)
+      }
+    }
+    else if (eventName === 'selection-change') {
+      if (args[2] === 'user') {
+        selectionChangeHandler(args[0] as { index: number, length: number } | null)
+      }
+    }
+  })
+
+  awareness.getStates().forEach((state, clientId) => {
+    updateCursor(clientId, state)
+  })
+
+  return () => {
+    awareness.off('change', changeHandler)
+    quill.off('editor-change', selectionChangeHandler)
+  }
+}

package/src/modules/collaborative-editing/awareness/index.ts

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

package/src/modules/collaborative-editing/awareness/y-indexeddb.ts

@@ -0,0 +1,12 @@
+import type { Doc } from 'yjs'
+import { IndexeddbPersistence } from 'y-indexeddb'
+
+export function setupIndexedDB(doc: Doc): () => void {
+  const fullDbName = `tiny-editor-${doc.guid}`
+
+  new IndexeddbPersistence(fullDbName, doc)
+
+  return (): void => {
+    indexedDB.deleteDatabase(fullDbName)
+  }
+}

package/src/modules/collaborative-editing/collaborative-editing.ts

@@ -0,0 +1,115 @@
+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 { 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 provider: UnifiedProvider
+  private awareness: Awareness
+  private cursors: QuillCursors | null
+  private cleanupBindings: (() => void) | null = null
+  private clearIndexedDB: (() => void) | null = null
+
+  constructor(
+    public quill: FluentEditor,
+    public options: YjsOptions,
+  ) {
+    this.ydoc = this.options.ydoc || new Y.Doc()
+
+    if (this.options.cursors !== false) {
+      const cursorsOptions = typeof this.options.cursors === 'object' ? this.options.cursors : {}
+      this.cursors = new QuillCursors(quill, cursorsOptions)
+    }
+
+    if (this.options.awareness) {
+      const awareness = setupAwareness(this.options.awareness, new Awareness(this.ydoc))
+      if (!awareness) {
+        throw new Error('Failed to initialize awareness')
+      }
+      this.awareness = awareness
+    }
+    else {
+      this.awareness = new Awareness(this.ydoc)
+    }
+
+    if (this.options.provider) {
+      const providerConfig = this.options.provider
+      try {
+        const provider = createProvider({
+          doc: this.ydoc,
+          options: providerConfig.options,
+          type: providerConfig.type,
+          awareness: this.awareness,
+          onConnect: this.options.onConnect,
+          onDisconnect: this.options.onDisconnect,
+          onError: this.options.onError,
+          onSyncChange: this.options.onSyncChange,
+        })
+        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')
+      this.cleanupBindings = bindAwarenessToCursors(this.awareness, this.cursors, quill, ytext) || null
+      new QuillBinding(
+        ytext,
+        this.quill,
+        this.awareness,
+      )
+    }
+    else {
+      console.error('Failed to initialize collaborative editor: no valid provider configured')
+    }
+
+    if (this.options.offline !== false) {
+      this.clearIndexedDB = setupIndexedDB(this.ydoc)
+    }
+  }
+
+  public getAwareness() {
+    return this.awareness
+  }
+
+  public getProvider() {
+    return this.provider
+  }
+
+  public getYDoc() {
+    return this.ydoc
+  }
+
+  get isConnected() {
+    return this.provider?.isConnected ?? false
+  }
+
+  get isSynced() {
+    return this.provider?.isSynced ?? false
+  }
+
+  public getCursors() {
+    return this.cursors
+  }
+
+  public async destroy() {
+    this.cleanupBindings?.()
+    this.provider?.destroy?.()
+    this.cursors?.clearCursors()
+    this.awareness?.destroy?.()
+    this.clearIndexedDB?.()
+    this.ydoc?.destroy?.()
+  }
+}

package/src/modules/collaborative-editing/index.ts

@@ -0,0 +1,2 @@
+export * from './module'
+export * from './types'

package/src/modules/collaborative-editing/module.ts

@@ -0,0 +1,32 @@
+import type FluentEditor from '../../fluent-editor'
+import { CollaborativeEditor } from './collaborative-editing'
+
+export class CollaborationModule {
+  private collaborativeEditor: CollaborativeEditor
+
+  constructor(public quill: FluentEditor, public options: any) {
+    this.collaborativeEditor = new CollaborativeEditor(quill, options)
+
+    window.addEventListener(
+      'beforeunload',
+      () => { void this.collaborativeEditor.destroy().catch(err => console.warn('[yjs] destroy failed:', err)) },
+      { once: true },
+    )
+  }
+
+  public getCursors() {
+    return this.collaborativeEditor.getCursors()
+  }
+
+  public getAwareness() {
+    return this.collaborativeEditor.getAwareness()
+  }
+
+  public getProvider() {
+    return this.collaborativeEditor.getProvider()
+  }
+
+  public async destroy() {
+    await this.collaborativeEditor.destroy()
+  }
+}

package/src/modules/collaborative-editing/provider/index.ts

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

package/src/modules/collaborative-editing/provider/providerRegistry.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 extends ProviderEventHandlers {
+  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)
+}

package/src/modules/collaborative-editing/provider/webrtc.ts

@@ -0,0 +1,125 @@
+import type { Awareness } from 'y-protocols/awareness'
+import type { ProviderEventHandlers } from '../types'
+import type { UnifiedProvider } from './providerRegistry'
+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
+
+  onConnect?: () => void
+  onDisconnect?: () => void
+  onError?: (error: Error) => void
+  onSyncChange?: (isSynced: boolean) => void
+
+  document: Y.Doc
+  awareness: Awareness
+  type: 'webrtc'
+
+  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.document = doc || new Y.Doc()
+    try {
+      this.provider = new WebrtcProvider(options.roomName, this.document, {
+        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
+              this.onSyncChange?.(false)
+            }
+          }
+        }
+      })
+    }
+    catch (error) {
+      console.warn('[yjs] Error creating WebRTC provider:', error)
+      onError?.(error instanceof Error ? error : new Error(String(error)))
+    }
+  }
+
+  get isConnected() {
+    return this._isConnected
+  }
+
+  get isSynced() {
+    return this._isSynced
+  }
+
+  getProvider() {
+    return this.provider
+  }
+}

package/src/modules/collaborative-editing/provider/websocket.ts

@@ -0,0 +1,142 @@
+import type { ProviderEventHandlers } from '../types'
+import type { UnifiedProvider } from './providerRegistry'
+import { Awareness } from 'y-protocols/awareness'
+import { WebsocketProvider } from 'y-websocket'
+import * as Y from 'yjs'
+
+export interface WebsocketProviderOptions {
+  serverUrl: string
+  roomName: string
+  connect?: boolean
+  awareness?: any
+  params?: Record<string, string>
+  protocols?: string[]
+  WebSocketPolyfill?: typeof WebSocket
+  resyncInterval?: number
+  maxBackoffTime?: number
+  disableBc?: boolean
+}
+
+export class WebsocketProviderWrapper implements UnifiedProvider {
+  private provider: WebsocketProvider
+
+  private _isConnected = false
+  private _isSynced = false
+
+  onConnect?: () => void
+  onDisconnect?: () => void
+  onError?: (error: Error) => void
+  onSyncChange?: (isSynced: boolean) => void
+
+  document: Y.Doc
+  awareness: Awareness
+  type: 'websocket'
+
+  connect = () => {
+    try {
+      this.provider.connect()
+    }
+    catch (error) {
+      console.warn('[yjs] Error connecting WebSocket provider:', error)
+    }
+  }
+
+  destroy = () => {
+    try {
+      this.provider.destroy()
+    }
+    catch (error) {
+      console.warn('[yjs] Error destroying WebSocket provider:', error)
+    }
+  }
+
+  disconnect = () => {
+    try {
+      this.provider.disconnect()
+      const wasSynced = this._isSynced
+
+      this._isConnected = false
+      this._isSynced = false
+
+      if (wasSynced) {
+        this.onSyncChange?.(false)
+      }
+    }
+    catch (error) {
+      console.warn('[yjs] Error disconnecting WebSocket provider:', error)
+    }
+  }
+
+  constructor({
+    awareness,
+    doc,
+    options,
+    onConnect,
+    onDisconnect,
+    onError,
+    onSyncChange,
+  }: {
+    options: WebsocketProviderOptions
+    awareness?: Awareness
+    doc?: Y.Doc
+  } & ProviderEventHandlers) {
+    this.onConnect = onConnect
+    this.onDisconnect = onDisconnect
+    this.onError = onError
+    this.onSyncChange = onSyncChange
+
+    this.document = doc || new Y.Doc()
+    this.awareness = awareness ?? new Awareness(this.document)
+    try {
+      this.provider = new WebsocketProvider(
+        options.serverUrl,
+        options.roomName,
+        this.document,
+        {
+          awareness: this.awareness,
+          ...options,
+        },
+      )
+
+      this.provider.on('status', (event: { status: 'connected' | 'disconnected' | 'connecting' }) => {
+        const wasConnected = this._isConnected
+        this._isConnected = event.status === 'connected'
+
+        if (event.status === 'connected') {
+          if (!wasConnected) {
+            this.onConnect?.()
+          }
+          if (!this._isSynced) {
+            this._isSynced = true
+            this.onSyncChange?.(true)
+          }
+        }
+        else if (event.status === 'disconnected') {
+          if (wasConnected) {
+            this.onDisconnect?.()
+            if (this._isSynced) {
+              this._isSynced = false
+              this.onSyncChange?.(false)
+            }
+          }
+        }
+      })
+    }
+    catch (error) {
+      console.warn('[yjs] Error creating WebSocket provider:', error)
+      onError?.(error instanceof Error ? error : new Error(String(error)))
+    }
+  }
+
+  get isConnected() {
+    return this._isConnected
+  }
+
+  get isSynced() {
+    return this._isSynced
+  }
+
+  getProvider() {
+    return this.provider
+  }
+}

package/src/modules/collaborative-editing/types.ts

@@ -0,0 +1,44 @@
+import type * as Y from 'yjs'
+import type { AwarenessOptions } from './awareness'
+import type { WebRTCProviderOptions, WebsocketProviderOptions } from './provider'
+
+export interface ProviderEventHandlers {
+  onConnect?: () => void
+  onDisconnect?: () => void
+  onError?: (error: Error) => void
+  onSyncChange?: (isSynced: boolean) => void
+}
+export interface BaseYjsProviderConfig extends ProviderEventHandlers {
+  options: Record<string, any>
+  type: string
+}
+
+export type WebRTCProviderConfig = BaseYjsProviderConfig & {
+  options: WebRTCProviderOptions
+  type: 'webrtc'
+}
+export type WebsocketProviderConfig = BaseYjsProviderConfig & {
+  options: WebsocketProviderOptions
+  type: 'websocket'
+}
+
+export type CustomProviderConfig = BaseYjsProviderConfig & {
+  options: Record<string, any>
+  type: string
+}
+
+export type CursorsConfig = boolean | object
+
+export interface YjsOptions {
+  ydoc?: Y.Doc
+  provider: (WebRTCProviderConfig | WebsocketProviderConfig | CustomProviderConfig)
+  awareness?: AwarenessOptions
+  offline?: boolean
+  cursors?: CursorsConfig
+
+  // callback
+  onConnect?: () => void
+  onDisconnect?: () => void
+  onError?: (error) => void
+  onSyncChange?: (isSynced: boolean) => void
+}