@textbus/collaborate 2.0.0-alpha.79 → 2.0.0-beta.10

package/src/{collab/collaborate-cursor.ts → collaborate-cursor.ts}

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from '@tanbo/di'
+import { Inject, Injectable, Optional } from '@tanbo/di'
 import {
   createElement,
   EDITABLE_DOCUMENT,
@@ -6,7 +6,7 @@ import {
   getLayoutRectByRange,
   SelectionBridge
 } from '@textbus/browser'
-import { Selection, SelectionPaths } from '@textbus/core'
+import { Selection, SelectionPaths, Range as TBRange } from '@textbus/core'
 import { Subject } from '@tanbo/stream'
 
 export interface RemoteSelection {
@@ -15,21 +15,28 @@ export interface RemoteSelection {
   paths: SelectionPaths
 }
 
-export interface SelectionRect {
-  color: string
-  username: string
+export interface Rect {
   x: number
   y: number
   width: number
   height: number
 }
 
+export interface SelectionRect extends Rect {
+  color: string
+  username: string
+}
+
 export interface RemoteSelectionCursor {
   cursor: HTMLElement
   anchor: HTMLElement
   userTip: HTMLElement
 }
 
+export abstract class CollaborateCursorAwarenessDelegate {
+  abstract getRects(range: TBRange, nativeRange: Range): false | Rect[]
+}
+
 @Injectable()
 export class CollaborateCursor {
   private canvas = createElement('canvas', {
@@ -61,6 +68,7 @@ export class CollaborateCursor {
 
   constructor(@Inject(EDITOR_CONTAINER) private container: HTMLElement,
               @Inject(EDITABLE_DOCUMENT) private document: Document,
+              @Optional() private awarenessDelegate: CollaborateCursorAwarenessDelegate,
               private nativeSelection: SelectionBridge,
               private selection: Selection) {
     container.prepend(this.canvas, this.tooltips)
@@ -91,49 +99,62 @@ export class CollaborateCursor {
       const startSlot = this.selection.findSlotByPaths(item.paths.start)
       const endOffset = item.paths.end.pop()!
       const endSlot = this.selection.findSlotByPaths(item.paths.end)
+      if (!startSlot || !endSlot) {
+        return
+      }
 
-      if (startSlot && endSlot) {
-        const position = this.nativeSelection.getPositionByRange({
+      const {start, end} = this.nativeSelection.getPositionByRange({
+        startOffset,
+        endOffset,
+        startSlot,
+        endSlot
+      })
+      if (!start || !end) {
+        return
+      }
+      const nativeRange = this.document.createRange()
+      nativeRange.setStart(start.node, start.offset)
+      nativeRange.setEnd(end.node, end.offset)
+
+      let rects: Rect[] | DOMRectList | false = false
+      if (this.awarenessDelegate) {
+        rects = this.awarenessDelegate.getRects({
           startOffset,
           endOffset,
           startSlot,
           endSlot
+        }, nativeRange)
+      }
+      if (!rects) {
+        rects = nativeRange.getClientRects()
+      }
+      const selectionRects: SelectionRect[] = []
+      for (let i = rects.length - 1; i >= 0; i--) {
+        const rect = rects[i]
+        selectionRects.push({
+          color: item.color,
+          username: item.username,
+          x: rect.x - containerRect.x,
+          y: rect.y - containerRect.y,
+          width: rect.width,
+          height: rect.height,
         })
-        if (position.start && position.end) {
-          const nativeRange = this.document.createRange()
-          nativeRange.setStart(position.start.node, position.start.offset)
-          nativeRange.setEnd(position.end.node, position.end.offset)
-
-          const rects = nativeRange.getClientRects()
-          const selectionRects: SelectionRect[] = []
-          for (let i = rects.length - 1; i >= 0; i--) {
-            const rect = rects[i]
-            selectionRects.push({
-              color: item.color,
-              username: item.username,
-              x: rect.x - containerRect.x,
-              y: rect.y - containerRect.y,
-              width: rect.width,
-              height: rect.height,
-            })
-          }
-          this.onRectsChange.next(selectionRects)
-
-          const cursorRange = nativeRange.cloneRange()
-          cursorRange.collapse(!item.paths.focusEnd)
-
-          const cursorRect = getLayoutRectByRange(cursorRange)
-
-          users.push({
-            username: item.username,
-            color: item.color,
-            x: cursorRect.x - containerRect.x,
-            y: cursorRect.y - containerRect.y,
-            width: 2,
-            height: cursorRect.height
-          })
-        }
       }
+      this.onRectsChange.next(selectionRects)
+
+      const cursorRange = nativeRange.cloneRange()
+      cursorRange.collapse(!item.paths.focusEnd)
+
+      const cursorRect = getLayoutRectByRange(cursorRange)
+
+      users.push({
+        username: item.username,
+        color: item.color,
+        x: cursorRect.x - containerRect.x,
+        y: cursorRect.y - containerRect.y,
+        width: 2,
+        height: cursorRect.height
+      })
     })
     this.drawUserCursor(users)
   }

package/src/collaborate.ts

@@ -1,24 +1,24 @@
 import { Injectable } from '@tanbo/di'
-import { merge, microTask, Observable, Subject, Subscription } from '@tanbo/stream'
+import { Observable, Subject, Subscription } from '@tanbo/stream'
 import {
-  RootComponentRef,
-  Starter,
-  Translator,
+  ComponentInstance,
+  ContentType,
+  Formats,
+  History,
+  makeError,
   Registry,
+  RootComponentRef,
+  Scheduler,
   Selection,
   SelectionPaths,
-  History, Renderer, Slot, ComponentInstance, makeError, Formats
+  Slot,
+  Starter,
+  Translator
 } from '@textbus/core'
-import {
-  Doc as YDoc,
-  Map as YMap,
-  Text as YText,
-  Array as YArray,
-  UndoManager,
-  Transaction
-} from 'yjs'
+import { Array as YArray, Doc as YDoc, Map as YMap, Text as YText, Transaction, UndoManager } from 'yjs'
 
-import { CollaborateCursor, RemoteSelection } from './collab/_api'
+import { CollaborateCursor, RemoteSelection } from './collaborate-cursor'
+import { createUnknownComponent } from './unknown.component'
 
 const collaborateErrorFn = makeError('Collaborate')
 
@@ -56,10 +56,12 @@ export class Collaborate implements History {
 
   private selectionChangeEvent = new Subject<SelectionPaths>()
 
+  private updateRemoteActions: Array<() => void> = []
+
   constructor(private rootComponentRef: RootComponentRef,
               private collaborateCursor: CollaborateCursor,
+              private scheduler: Scheduler,
               private translator: Translator,
-              private renderer: Renderer,
               private registry: Registry,
               private selection: Selection,
               private starter: Starter) {
@@ -92,13 +94,17 @@ export class Collaborate implements History {
 
   back() {
     if (this.canBack) {
+      this.scheduler.ignoreChanges = true
       this.manager.undo()
+      this.scheduler.ignoreChanges = false
     }
   }
 
   forward() {
     if (this.canForward) {
+      this.scheduler.ignoreChanges = true
       this.manager.redo()
+      this.scheduler.ignoreChanges = false
     }
   }
 
@@ -115,29 +121,31 @@ export class Collaborate implements History {
     this.syncContent(root, rootComponent.slots.get(0)!)
 
     this.subscriptions.push(
-      merge(
-        rootComponent.changeMarker.onForceChange,
-        rootComponent.changeMarker.onChange
-      ).pipe(
-        microTask()
-      ).subscribe(() => {
-        this.renderer.render()
-        this.selection.restore()
+      this.scheduler.onDocChange.subscribe(() => {
+        this.yDoc.transact(() => {
+          this.updateRemoteActions.forEach(fn => {
+            fn()
+          })
+          this.updateRemoteActions = []
+        }, this.yDoc)
       })
     )
   }
 
   private syncContent(content: YText, slot: Slot) {
-    const fn = this.contentSyncCaches.get(slot)
-    if (fn) {
-      fn()
-    }
     const syncRemote = (ev, tr) => {
       this.runRemoteUpdate(tr, () => {
         slot.retain(0)
         ev.delta.forEach(action => {
           if (Reflect.has(action, 'retain')) {
-            slot.retain(action.retain!, makeFormats(this.registry, action.attributes))
+            if (action.attributes) {
+              const formats = makeFormats(this.registry, action.attributes)
+              if (formats.length) {
+                slot.retain(action.retain!, formats)
+              }
+            } else {
+              slot.retain(action.retain)
+            }
           } else if (action.insert) {
             const index = slot.index
             let length = 1
@@ -146,7 +154,8 @@ export class Collaborate implements History {
               slot.insert(action.insert, makeFormats(this.registry, action.attributes))
             } else {
               const sharedComponent = action.insert as YMap<any>
-              const component = this.createComponentBySharedComponent(sharedComponent)
+              const canInsertInlineComponent = slot.schema.includes(ContentType.InlineComponent)
+              const component = this.createComponentBySharedComponent(sharedComponent, canInsertInlineComponent)
               this.syncSlots(sharedComponent.get('slots'), component)
               this.syncComponent(sharedComponent, component)
               slot.insert(component)
@@ -187,8 +196,19 @@ export class Collaborate implements History {
         let length = 0
         for (const action of actions) {
           if (action.type === 'retain') {
-            if (action.formats) {
-              content.format(offset, action.offset, action.formats)
+            const formats = action.formats
+            if (formats) {
+              const keys = Object.keys(formats)
+              let length = keys.length
+              keys.forEach(key => {
+                if (!this.registry.getFormatter(key)) {
+                  length--
+                  Reflect.deleteProperty(formats, key)
+                }
+              })
+              if (length) {
+                content.format(offset, action.offset, formats)
+              }
             } else {
               offset = action.offset
             }
@@ -221,6 +241,12 @@ export class Collaborate implements History {
         }
       })
     })
+
+    sub.add(slot.onChildComponentRemove.subscribe(components => {
+      components.forEach(c => {
+        this.cleanSubscriptionsByComponent(c)
+      })
+    }))
     this.contentSyncCaches.set(slot, () => {
       content.unobserve(syncRemote)
       sub.unsubscribe()
@@ -228,10 +254,6 @@ export class Collaborate implements History {
   }
 
   private syncSlot(remoteSlot: YMap<any>, slot: Slot) {
-    const fn = this.slotStateSyncCaches.get(slot)
-    if (fn) {
-      fn()
-    }
     const syncRemote = (ev, tr) => {
       this.runRemoteUpdate(tr, () => {
         ev.keysChanged.forEach(key => {
@@ -261,24 +283,23 @@ export class Collaborate implements History {
 
   private syncSlots(remoteSlots: YArray<any>, component: ComponentInstance) {
     const slots = component.slots
-    const fn = this.slotsSyncCaches.get(component)
-    if (fn) {
-      fn()
-    }
     const syncRemote = (ev, tr) => {
       this.runRemoteUpdate(tr, () => {
+        let index = 0
         ev.delta.forEach(action => {
           if (Reflect.has(action, 'retain')) {
             slots.retain(action.retain!)
+            index += action.retain
           } else if (action.insert) {
             (action.insert as Array<YMap<any>>).forEach(item => {
               const slot = this.createSlotBySharedSlot(item)
               slots.insert(slot)
               this.syncContent(item.get('content'), slot)
               this.syncSlot(item, slot)
+              index++
             })
           } else if (action.delete) {
-            slots.retain(slots.index)
+            slots.retain(index)
             slots.delete(action.delete)
           }
         })
@@ -305,6 +326,12 @@ export class Collaborate implements History {
       })
     })
 
+    sub.add(slots.onChildSlotRemove.subscribe(slots => {
+      slots.forEach(slot => {
+        this.cleanSubscriptionsBySlot(slot)
+      })
+    }))
+
     this.slotsSyncCaches.set(component, () => {
       remoteSlots.unobserve(syncRemote)
       sub.unsubscribe()
@@ -312,10 +339,6 @@ export class Collaborate implements History {
   }
 
   private syncComponent(remoteComponent: YMap<any>, component: ComponentInstance) {
-    const fn = this.componentStateSyncCaches.get(component)
-    if (fn) {
-      fn()
-    }
     const syncRemote = (ev, tr) => {
       this.runRemoteUpdate(tr, () => {
         ev.keysChanged.forEach(key => {
@@ -345,11 +368,11 @@ export class Collaborate implements History {
     if (this.updateFromRemote) {
       return
     }
-    fn()
+    this.updateRemoteActions.push(fn)
   }
 
   private runRemoteUpdate(tr: Transaction, fn: () => void) {
-    if (!tr.origin) {
+    if (tr.origin === this.yDoc) {
       return
     }
     this.updateFromRemote = true
@@ -401,7 +424,7 @@ export class Collaborate implements History {
     return sharedSlot
   }
 
-  private createComponentBySharedComponent(yMap: YMap<any>): ComponentInstance {
+  private createComponentBySharedComponent(yMap: YMap<any>, canInsertInlineComponent: boolean): ComponentInstance {
     const sharedSlots = yMap.get('slots') as YArray<YMap<any>>
     const slots: Slot[] = []
     sharedSlots.forEach(sharedSlot => {
@@ -415,13 +438,17 @@ export class Collaborate implements History {
     })
     if (instance) {
       instance.slots.toArray().forEach((slot, index) => {
-        const sharedSlot = sharedSlots.get(index)
+        let sharedSlot = sharedSlots.get(index)
+        if (!sharedSlot) {
+          sharedSlot = this.createSharedSlotBySlot(slot)
+          sharedSlots.push([sharedSlot])
+        }
         this.syncSlot(sharedSlot, slot)
         this.syncContent(sharedSlot.get('content'), slot)
       })
       return instance
     }
-    throw collaborateErrorFn(`cannot find component factory \`${name}\`.`)
+    return createUnknownComponent(name, canInsertInlineComponent).createInstance(this.starter)
   }
 
   private createSlotBySharedSlot(sharedSlot: YMap<any>): Slot {
@@ -441,7 +468,8 @@ export class Collaborate implements History {
           slot.insert(action.insert, makeFormats(this.registry, action.attributes))
         } else {
           const sharedComponent = action.insert as YMap<any>
-          const component = this.createComponentBySharedComponent(sharedComponent)
+          const canInsertInlineComponent = slot.schema.includes(ContentType.InlineComponent)
+          const component = this.createComponentBySharedComponent(sharedComponent, canInsertInlineComponent)
           slot.insert(component)
           this.syncSlots(sharedComponent.get('slots'), component)
           this.syncComponent(sharedComponent, component)
@@ -452,6 +480,30 @@ export class Collaborate implements History {
     }
     return slot
   }
+
+  private cleanSubscriptionsBySlot(slot: Slot) {
+    [this.contentSyncCaches.get(slot), this.slotStateSyncCaches.get(slot)].forEach(fn => {
+      if (fn) {
+        fn()
+      }
+    })
+    slot.sliceContent().forEach(i => {
+      if (typeof i !== 'string') {
+        this.cleanSubscriptionsByComponent(i)
+      }
+    })
+  }
+
+  private cleanSubscriptionsByComponent(component: ComponentInstance) {
+    [this.slotsSyncCaches.get(component), this.componentStateSyncCaches.get(component)].forEach(fn => {
+      if (fn) {
+        fn()
+      }
+    })
+    component.slots.toArray().forEach(slot => {
+      this.cleanSubscriptionsBySlot(slot)
+    })
+  }
 }
 
 function makeFormats(registry: Registry, attrs?: any) {

package/src/public-api.ts

@@ -1,2 +1,18 @@
-export * from './collab/_api'
+import { History, Module } from '@textbus/core'
+
+import { Collaborate } from './collaborate'
+import { CollaborateCursor } from './collaborate-cursor'
+
 export * from './collaborate'
+export * from './collaborate-cursor'
+
+export const collaborateModule: Module = {
+  providers: [
+    Collaborate,
+    CollaborateCursor,
+    {
+      provide: History,
+      useClass: Collaborate
+    }
+  ]
+}

package/src/unknown.component.ts

@@ -0,0 +1,22 @@
+import { ContentType, defineComponent, VElement } from '@textbus/core'
+
+export function createUnknownComponent(factoryName: string, canInsertInlineComponent: boolean) {
+  const unknownComponent = defineComponent({
+    type: canInsertInlineComponent ? ContentType.InlineComponent : ContentType.BlockComponent,
+    name: 'UnknownComponent',
+    setup() {
+      console.error(`cannot find component factory \`${factoryName}\`.`)
+      return {
+        render() {
+          return VElement.createElement('textbus-unknown-component', {
+            style: {
+              display: canInsertInlineComponent ? 'inline' : 'block',
+              color: '#f00'
+            }
+          }, unknownComponent.name)
+        }
+      }
+    }
+  })
+  return unknownComponent
+}

package/bundles/collab/_api.d.ts

@@ -1 +0,0 @@
-export * from './collaborate-cursor';

package/bundles/collab/_api.js

@@ -1,2 +0,0 @@
-export * from './collaborate-cursor';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb2xsYWIvX2FwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLHNCQUFzQixDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9jb2xsYWJvcmF0ZS1jdXJzb3InXG4iXX0=