@textbus/collaborate 2.2.0 → 2.3.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/collaborate",
-  "version": "2.2.0",
+  "version": "2.3.0-alpha.0",
   "description": "Textbus is a rich text editor and framework that is highly customizable and extensible to achieve rich wysiwyg effects.",
   "main": "./bundles/public-api.js",
   "module": "./bundles/public-api.js",
@@ -27,8 +27,8 @@
   "dependencies": {
     "@tanbo/di": "^1.1.3",
     "@tanbo/stream": "^1.1.8",
-    "@textbus/browser": "^2.2.0",
-    "@textbus/core": "^2.2.0",
+    "@textbus/browser": "^2.3.0-alpha.0",
+    "@textbus/core": "^2.3.0-alpha.0",
     "reflect-metadata": "^0.1.13",
     "y-protocols": "^1.0.5",
     "yjs": "^13.5.39"
@@ -44,5 +44,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "0f4df8ccc348301a844f9c14eca88a0b7e8a2c7f"
+  "gitHead": "74a364ab9a43e4942bbbc710f9b769060c9bfd07"
 }

package/src/collaborate-cursor.ts

@@ -1,293 +0,0 @@
-import { Inject, Injectable, Optional } from '@tanbo/di'
-import {
-  createElement,
-  VIEW_CONTAINER,
-  getLayoutRectByRange,
-  SelectionBridge
-} from '@textbus/browser'
-import { Selection, SelectionPaths, AbstractSelection, Scheduler, Rect } from '@textbus/core'
-import { fromEvent, Subject, Subscription } from '@tanbo/stream'
-
-export interface RemoteSelection {
-  id: string
-  color: string
-  username: string
-  paths: SelectionPaths
-}
-
-export interface SelectionRect extends Rect {
-  color: string
-  username: string
-  id: string
-}
-
-export interface RemoteSelectionCursor {
-  cursor: HTMLElement
-  anchor: HTMLElement
-  userTip: HTMLElement
-}
-
-export abstract class CollaborateSelectionAwarenessDelegate {
-  abstract getRects(abstractSelection: AbstractSelection, nativeRange: Range): false | Rect[]
-}
-
-@Injectable()
-export class CollaborateCursor {
-  private host = createElement('div', {
-    styles: {
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      width: '100%',
-      height: '100%',
-      pointerEvents: 'none',
-      zIndex: 1
-    }
-  })
-  private canvasContainer = createElement('div', {
-    styles: {
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      width: '100%',
-      height: '100%',
-      overflow: 'hidden'
-    }
-  })
-  private canvas = createElement('canvas', {
-    styles: {
-      position: 'absolute',
-      opacity: 0.5,
-      left: 0,
-      top: 0,
-      width: '100%',
-      height: document.documentElement.clientHeight + 'px',
-      pointerEvents: 'none',
-    }
-  }) as HTMLCanvasElement
-  private context = this.canvas.getContext('2d')!
-  private tooltips = createElement('div', {
-    styles: {
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      width: '100%',
-      height: '100%',
-      pointerEvents: 'none',
-      fontSize: '12px',
-      zIndex: 10
-    }
-  })
-
-  private onRectsChange = new Subject<SelectionRect[]>()
-
-  private subscription = new Subscription()
-  private currentSelection: RemoteSelection[] = []
-
-  constructor(@Inject(VIEW_CONTAINER) private container: HTMLElement,
-              @Optional() private awarenessDelegate: CollaborateSelectionAwarenessDelegate,
-              private nativeSelection: SelectionBridge,
-              private scheduler: Scheduler,
-              private selection: Selection) {
-    this.canvasContainer.append(this.canvas)
-    this.host.append(this.canvasContainer, this.tooltips)
-    container.prepend(this.host)
-    this.subscription.add(this.onRectsChange.subscribe(rects => {
-      for (const rect of rects) {
-        this.context.fillStyle = rect.color
-        this.context.beginPath()
-        this.context.rect(rect.left, rect.top, rect.width, rect.height)
-        this.context.fill()
-        this.context.closePath()
-      }
-    }), fromEvent(window, 'resize').subscribe(() => {
-      this.canvas.style.height = document.documentElement.clientHeight + 'px'
-      this.refresh()
-    }), this.scheduler.onDocChanged.subscribe(() => {
-      this.refresh()
-    }))
-  }
-
-  refresh() {
-    this.draw(this.currentSelection)
-  }
-
-  destroy() {
-    this.subscription.unsubscribe()
-  }
-
-  draw(paths: RemoteSelection[]) {
-    this.currentSelection = paths
-    const containerRect = this.container.getBoundingClientRect()
-    this.canvas.style.top = containerRect.top * -1 + 'px'
-    this.canvas.width = this.canvas.offsetWidth
-    this.canvas.height = this.canvas.offsetHeight
-    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
-
-    const users: SelectionRect[] = []
-
-    paths.filter(i => {
-      return i.paths.anchor.length && i.paths.focus.length
-    }).forEach(item => {
-      const anchorPaths = [...item.paths.anchor]
-      const focusPaths = [...item.paths.focus]
-      const anchorOffset = anchorPaths.pop()!
-      const anchorSlot = this.selection.findSlotByPaths(anchorPaths)
-      const focusOffset = focusPaths.pop()!
-      const focusSlot = this.selection.findSlotByPaths(focusPaths)
-      if (!anchorSlot || !focusSlot) {
-        return
-      }
-
-      const { focus, anchor } = this.nativeSelection.getPositionByRange({
-        focusOffset,
-        anchorOffset,
-        focusSlot,
-        anchorSlot
-      })
-      if (!focus || !anchor) {
-        return
-      }
-      const nativeRange = document.createRange()
-      nativeRange.setStart(anchor.node, anchor.offset)
-      nativeRange.setEnd(focus.node, focus.offset)
-      if ((anchor.node !== focus.node || anchor.offset !== focus.offset) && nativeRange.collapsed) {
-        nativeRange.setStart(focus.node, focus.offset)
-        nativeRange.setEnd(anchor.node, anchor.offset)
-      }
-
-      let rects: Rect[] | DOMRectList | false = false
-      if (this.awarenessDelegate) {
-        rects = this.awarenessDelegate.getRects({
-          focusOffset,
-          anchorOffset,
-          focusSlot,
-          anchorSlot
-        }, nativeRange)
-      }
-      if (!rects) {
-        rects = nativeRange.getClientRects()
-      }
-      const selectionRects: SelectionRect[] = []
-      for (let i = rects.length - 1; i >= 0; i--) {
-        const rect = rects[i]
-        selectionRects.push({
-          id: item.id,
-          color: item.color,
-          username: item.username,
-          left: rect.left - containerRect.left,
-          top: rect.top,
-          width: rect.width,
-          height: rect.height,
-        })
-      }
-      this.onRectsChange.next(selectionRects)
-
-      const cursorRange = nativeRange.cloneRange()
-      cursorRange.setStart(focus.node, focus.offset)
-      cursorRange.collapse(true)
-
-      const cursorRect = getLayoutRectByRange(cursorRange)
-
-      const rect: SelectionRect = {
-        id: item.id,
-        username: item.username,
-        color: item.color,
-        left: cursorRect.left - containerRect.left,
-        top: cursorRect.top - containerRect.top,
-        width: 2,
-        height: cursorRect.height
-      }
-      if (rect.left < 0 || rect.top < 0 || rect.left > containerRect.width) {
-        return
-      }
-      users.push(rect)
-    })
-    this.drawUserCursor(users)
-  }
-
-  protected drawUserCursor(rects: SelectionRect[]) {
-    for (let i = 0; i < rects.length; i++) {
-      const rect = rects[i]
-      const { cursor, userTip, anchor } = this.getUserCursor(i)
-      Object.assign(cursor.style, {
-        left: rect.left + 'px',
-        top: rect.top + 'px',
-        width: rect.width + 'px',
-        height: rect.height + 'px',
-        background: rect.color,
-        display: 'block'
-      })
-      anchor.style.background = rect.color
-      userTip.innerText = rect.username
-      userTip.style.background = rect.color
-    }
-
-    for (let i = rects.length; i < this.tooltips.children.length; i++) {
-      this.tooltips.removeChild(this.tooltips.children[i])
-    }
-  }
-
-  private getUserCursor(index: number): RemoteSelectionCursor {
-    let child: HTMLElement = this.tooltips.children[index] as HTMLElement
-    if (child) {
-      const anchor = child.children[0] as HTMLElement
-      return {
-        cursor: child,
-        anchor,
-        userTip: anchor.children[0] as HTMLElement
-      }
-    }
-    const userTip = createElement('span', {
-      styles: {
-        position: 'absolute',
-        display: 'none',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        marginBottom: '2px',
-        bottom: '100%',
-        whiteSpace: 'nowrap',
-        color: '#fff',
-        boxShadow: '0 1px 2px rgba(0,0,0,.1)',
-        borderRadius: '3px',
-        padding: '3px 5px',
-        pointerEvents: 'none',
-      }
-    })
-
-    const anchor = createElement('span', {
-      styles: {
-        position: 'absolute',
-        top: '-2px',
-        left: '-2px',
-        width: '6px',
-        height: '6px',
-        pointerEvents: 'auto',
-        pointer: 'cursor',
-      },
-      children: [userTip],
-      on: {
-        mouseenter() {
-          userTip.style.display = 'block'
-        },
-        mouseleave() {
-          userTip.style.display = 'none'
-        }
-      }
-    })
-    child = createElement('span', {
-      styles: {
-        position: 'absolute',
-      },
-      children: [
-        anchor
-      ]
-    })
-    this.tooltips.append(child)
-    return {
-      cursor: child,
-      anchor,
-      userTip
-    }
-  }
-}

package/src/collaborate.ts

@@ -1,732 +0,0 @@
-import { Inject, Injectable } from '@tanbo/di'
-import { delay, filter, map, Observable, Subject, Subscription } from '@tanbo/stream'
-import {
-  ChangeOrigin,
-  ComponentInstance,
-  ContentType,
-  Controller,
-  Formats,
-  History,
-  HISTORY_STACK_SIZE,
-  makeError,
-  Registry,
-  RootComponentRef,
-  Scheduler,
-  Selection,
-  SelectionPaths,
-  Slot,
-  Starter,
-  Translator
-} from '@textbus/core'
-import {
-  Array as YArray,
-  Doc as YDoc,
-  Map as YMap,
-  RelativePosition,
-  Text as YText,
-  Transaction,
-  UndoManager,
-  createAbsolutePositionFromRelativePosition,
-  createRelativePositionFromTypeIndex
-} from 'yjs'
-
-import { CollaborateCursor, RemoteSelection } from './collaborate-cursor'
-import { createUnknownComponent } from './unknown.component'
-
-const collaborateErrorFn = makeError('Collaborate')
-
-interface CursorPosition {
-  anchor: RelativePosition
-  focus: RelativePosition
-}
-
-class ContentMap {
-  private slotAndYTextMap = new WeakMap<Slot, YText>()
-  private yTextAndSLotMap = new WeakMap<YText, Slot>()
-
-  set(key: Slot, value: YText): void
-  set(key: YText, value: Slot): void
-  set(key: any, value: any) {
-    if (key instanceof Slot) {
-      this.slotAndYTextMap.set(key, value)
-      this.yTextAndSLotMap.set(value, key)
-    } else {
-      this.slotAndYTextMap.set(value, key)
-      this.yTextAndSLotMap.set(key, value)
-    }
-  }
-
-  get(key: Slot): YText | null
-  get(key: YText): Slot | null
-  get(key: any) {
-    if (key instanceof Slot) {
-      return this.slotAndYTextMap.get(key) || null
-    }
-    return this.yTextAndSLotMap.get(key) || null
-  }
-
-  delete(key: Slot | YText) {
-    if (key instanceof Slot) {
-      const v = this.slotAndYTextMap.get(key)
-      this.slotAndYTextMap.delete(key)
-      if (v) {
-        this.yTextAndSLotMap.delete(v)
-      }
-    } else {
-      const v = this.yTextAndSLotMap.get(key)
-      this.yTextAndSLotMap.delete(key)
-      if (v) {
-        this.slotAndYTextMap.delete(v)
-      }
-    }
-  }
-}
-
-interface Update {
-  record: boolean
-  actions: Array<() => void>
-}
-
-interface UpdateItem {
-  record: boolean
-
-  action(): void
-}
-
-@Injectable()
-export class Collaborate implements History {
-  onSelectionChange: Observable<SelectionPaths>
-  yDoc = new YDoc()
-  onBack: Observable<void>
-  onForward: Observable<void>
-  onChange: Observable<void>
-  onPush: Observable<void>
-
-  get canBack() {
-    return this.manager?.canUndo() || false
-  }
-
-  get canForward() {
-    return this.manager?.canRedo() || false
-  }
-
-  protected backEvent = new Subject<void>()
-  protected forwardEvent = new Subject<void>()
-  protected changeEvent = new Subject<void>()
-  protected pushEvent = new Subject<void>()
-
-  protected manager: UndoManager | null = null
-
-  protected subscriptions: Subscription[] = []
-  protected updateFromRemote = false
-
-  protected contentSyncCaches = new WeakMap<Slot, () => void>()
-  protected slotStateSyncCaches = new WeakMap<Slot, () => void>()
-  protected slotsSyncCaches = new WeakMap<ComponentInstance, () => void>()
-  protected componentStateSyncCaches = new WeakMap<ComponentInstance, () => void>()
-
-  protected selectionChangeEvent = new Subject<SelectionPaths>()
-  protected contentMap = new ContentMap()
-
-  protected updateRemoteActions: Array<UpdateItem> = []
-  protected noRecord = {}
-
-  constructor(@Inject(HISTORY_STACK_SIZE) protected stackSize: number,
-              protected rootComponentRef: RootComponentRef,
-              protected collaborateCursor: CollaborateCursor,
-              protected controller: Controller,
-              protected scheduler: Scheduler,
-              protected translator: Translator,
-              protected registry: Registry,
-              protected selection: Selection,
-              protected starter: Starter) {
-    this.onSelectionChange = this.selectionChangeEvent.asObservable().pipe(delay())
-    this.onBack = this.backEvent.asObservable()
-    this.onForward = this.forwardEvent.asObservable()
-    this.onChange = this.changeEvent.asObservable()
-    this.onPush = this.pushEvent.asObservable()
-  }
-
-  listen() {
-    const root = this.yDoc.getMap('RootComponent')
-    const rootComponent = this.rootComponentRef.component!
-    this.manager = new UndoManager(root, {
-      trackedOrigins: new Set<any>([this.yDoc])
-    })
-    const cursorKey = 'cursor-position'
-    this.manager.on('stack-item-added', event => {
-      event.stackItem.meta.set(cursorKey, this.getRelativeCursorLocation())
-      if (this.manager!.undoStack.length > this.stackSize) {
-        this.manager!.undoStack.shift()
-      }
-      if (event.origin === this.yDoc) {
-        this.pushEvent.next()
-      }
-      this.changeEvent.next()
-    })
-    this.manager.on('stack-item-popped', event => {
-      const position = event.stackItem.meta.get(cursorKey) as CursorPosition
-      if (position) {
-        this.restoreCursorLocation(position)
-      }
-    })
-    this.subscriptions.push(
-      this.selection.onChange.subscribe(() => {
-        const paths = this.selection.getPaths()
-        this.selectionChangeEvent.next(paths)
-      }),
-      this.scheduler.onDocChanged.pipe(
-        map(item => {
-          return item.filter(i => {
-            return i.from !== ChangeOrigin.Remote
-          })
-        }),
-        filter(item => {
-          return item.length
-        })
-      ).subscribe(() => {
-        const updates: Update[] = []
-
-        let update: Update | null = null
-
-        for (const item of this.updateRemoteActions) {
-          if (!update) {
-            update = {
-              record: item.record,
-              actions: []
-            }
-            updates.push(update)
-          }
-          if (update.record === item.record) {
-            update.actions.push(item.action)
-          } else {
-            update = {
-              record: item.record,
-              actions: [item.action]
-            }
-            updates.push(update)
-          }
-        }
-
-        this.updateRemoteActions = []
-
-        for (const item of updates) {
-          this.yDoc.transact(() => {
-            item.actions.forEach(fn => {
-              fn()
-            })
-          }, item.record ? this.yDoc : this.noRecord)
-        }
-      })
-    )
-    this.syncRootComponent(root, rootComponent)
-  }
-
-  updateRemoteSelection(paths: RemoteSelection[]) {
-    this.collaborateCursor.draw(paths)
-  }
-
-  back() {
-    if (this.canBack) {
-      this.manager?.undo()
-      this.backEvent.next()
-    }
-  }
-
-  forward() {
-    if (this.canForward) {
-      this.manager?.redo()
-      this.forwardEvent.next()
-    }
-  }
-
-  clear() {
-    this.manager?.clear()
-    this.changeEvent.next()
-  }
-
-  destroy() {
-    this.subscriptions.forEach(i => i.unsubscribe())
-    this.collaborateCursor.destroy()
-    this.manager?.destroy()
-  }
-
-  protected syncRootComponent(root: YMap<any>, rootComponent: ComponentInstance) {
-    let slots = root.get('slots') as YArray<YMap<any>>
-    if (!slots) {
-      slots = new YArray()
-      rootComponent.slots.toArray().forEach(i => {
-        const sharedSlot = this.createSharedSlotBySlot(i)
-        slots.push([sharedSlot])
-      })
-      this.yDoc.transact(() => {
-        root.set('state', rootComponent.state)
-        root.set('slots', slots)
-      })
-    } else if (slots.length === 0) {
-      rootComponent.updateState(() => {
-        return root.get('state')
-      })
-      this.yDoc.transact(() => {
-        rootComponent.slots.toArray().forEach(i => {
-          const sharedSlot = this.createSharedSlotBySlot(i)
-          slots.push([sharedSlot])
-        })
-      })
-    } else {
-      rootComponent.updateState(() => {
-        return root.get('state')
-      })
-      rootComponent.slots.clean()
-      slots.forEach(sharedSlot => {
-        const slot = this.createSlotBySharedSlot(sharedSlot)
-        this.syncContent(sharedSlot.get('content'), slot)
-        this.syncSlot(sharedSlot, slot)
-        rootComponent.slots.insert(slot)
-      })
-    }
-    this.syncComponent(root, rootComponent)
-    this.syncSlots(slots, rootComponent)
-  }
-
-  protected restoreCursorLocation(position: CursorPosition) {
-    const anchorPosition = createAbsolutePositionFromRelativePosition(position.anchor, this.yDoc)
-    const focusPosition = createAbsolutePositionFromRelativePosition(position.focus, this.yDoc)
-    if (anchorPosition && focusPosition) {
-      const focusSlot = this.contentMap.get(focusPosition.type as YText)
-      const anchorSlot = this.contentMap.get(anchorPosition.type as YText)
-      if (focusSlot && anchorSlot) {
-        this.selection.setBaseAndExtent(anchorSlot, anchorPosition.index, focusSlot, focusPosition.index)
-        return
-      }
-    }
-    this.selection.unSelect()
-  }
-
-  protected getRelativeCursorLocation(): CursorPosition | null {
-    const { anchorSlot, anchorOffset, focusSlot, focusOffset } = this.selection
-    if (anchorSlot) {
-      const anchorYText = this.contentMap.get(anchorSlot)
-      if (anchorYText) {
-        const anchorPosition = createRelativePositionFromTypeIndex(anchorYText, anchorOffset!)
-        if (focusSlot) {
-          const focusYText = this.contentMap.get(focusSlot)
-          if (focusYText) {
-            const focusPosition = createRelativePositionFromTypeIndex(focusYText, focusOffset!)
-            return {
-              focus: focusPosition,
-              anchor: anchorPosition
-            }
-          }
-        }
-      }
-    }
-    return null
-  }
-
-  protected syncContent(content: YText, slot: Slot) {
-    this.contentMap.set(slot, content)
-    const syncRemote = (ev, tr) => {
-      this.runRemoteUpdate(tr, () => {
-        slot.retain(0)
-        ev.delta.forEach(action => {
-          if (Reflect.has(action, 'retain')) {
-            if (action.attributes) {
-              const formats = remoteFormatsToLocal(this.registry, action.attributes)
-              if (formats.length) {
-                slot.retain(action.retain!, formats)
-              }
-              slot.retain(slot.index + action.retain)
-            } else {
-              slot.retain(action.retain)
-            }
-          } else if (action.insert) {
-            const index = slot.index
-            let length = 1
-            if (typeof action.insert === 'string') {
-              length = action.insert.length
-              slot.insert(action.insert, remoteFormatsToLocal(this.registry, action.attributes))
-            } else {
-              const sharedComponent = action.insert as YMap<any>
-              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)
-            }
-            if (this.selection.isSelected) {
-              if (slot === this.selection.anchorSlot && this.selection.anchorOffset! > index) {
-                this.selection.setAnchor(slot, this.selection.anchorOffset! + length)
-              }
-              if (slot === this.selection.focusSlot && this.selection.focusOffset! > index) {
-                this.selection.setFocus(slot, this.selection.focusOffset! + length)
-              }
-            }
-          } else if (action.delete) {
-            const index = slot.index
-            slot.retain(slot.index)
-            slot.delete(action.delete)
-            if (this.selection.isSelected) {
-              if (slot === this.selection.anchorSlot && this.selection.anchorOffset! >= index) {
-                this.selection.setAnchor(slot, this.selection.startOffset! - action.delete)
-              }
-              if (slot === this.selection.focusSlot && this.selection.focusOffset! >= index) {
-                this.selection.setFocus(slot, this.selection.focusOffset! - action.delete)
-              }
-            }
-          } else if (action.attributes) {
-            slot.updateState(draft => {
-              if (typeof draft === 'object' && draft !== null) {
-                Object.assign(draft, action.attributes)
-              } else {
-                return action.attributes
-              }
-            })
-          }
-        })
-      })
-    }
-    content.observe(syncRemote)
-
-    const sub = slot.onContentChange.subscribe(actions => {
-      this.runLocalUpdate(() => {
-        let offset = 0
-        let length = 0
-        for (const action of actions) {
-          if (action.type === 'retain') {
-            const formats = action.formats
-            if (formats) {
-              const keys = Object.keys(formats)
-              let length = keys.length
-              keys.forEach(key => {
-                const formatter = this.registry.getFormatter(key)
-                if (!formatter) {
-                  length--
-                  Reflect.deleteProperty(formats, key)
-                }
-              })
-              if (length) {
-                content.format(offset, action.offset, formats)
-              }
-            } else {
-              offset = action.offset
-            }
-          } else if (action.type === 'insert') {
-            const delta = content.toDelta()
-            const isEmpty = delta.length === 1 && delta[0].insert === Slot.emptyPlaceholder
-            if (typeof action.content === 'string') {
-              length = action.content.length
-              content.insert(offset, action.content, action.formats || {})
-            } else {
-              length = 1
-              const sharedComponent = this.createSharedComponentByComponent(action.ref as ComponentInstance)
-              content.insertEmbed(offset, sharedComponent, action.formats || {})
-            }
-
-            if (isEmpty && offset === 0) {
-              content.delete(content.length - 1, 1)
-            }
-            offset += length
-          } else if (action.type === 'delete') {
-            const delta = content.toDelta()
-            if (content.length) {
-              content.delete(offset, action.count)
-            }
-            if (content.length === 0) {
-              content.insert(0, '\n', delta[0]?.attributes)
-            }
-          }
-        }
-      })
-    })
-
-    sub.add(slot.onChildComponentRemove.subscribe(components => {
-      components.forEach(c => {
-        this.cleanSubscriptionsByComponent(c)
-      })
-    }))
-    this.contentSyncCaches.set(slot, () => {
-      content.unobserve(syncRemote)
-      sub.unsubscribe()
-    })
-  }
-
-  protected syncSlot(remoteSlot: YMap<any>, slot: Slot) {
-    const syncRemote = (ev, tr) => {
-      this.runRemoteUpdate(tr, () => {
-        ev.keysChanged.forEach(key => {
-          if (key === 'state') {
-            const state = (ev.target as YMap<any>).get('state')
-            slot.updateState(draft => {
-              if (typeof draft === 'object' && draft !== null) {
-                Object.assign(draft, state)
-              } else {
-                return state
-              }
-            })
-          }
-        })
-      })
-    }
-    remoteSlot.observe(syncRemote)
-
-    const sub = slot.onStateChange.subscribe(change => {
-      this.runLocalUpdate(() => {
-        remoteSlot.set('state', change.newState)
-      }, change.record)
-    })
-    this.slotStateSyncCaches.set(slot, () => {
-      remoteSlot.unobserve(syncRemote)
-      sub.unsubscribe()
-    })
-  }
-
-  protected syncSlots(remoteSlots: YArray<any>, component: ComponentInstance) {
-    const slots = component.slots
-    const syncRemote = (ev, tr) => {
-      this.runRemoteUpdate(tr, () => {
-        let index = 0
-        ev.delta.forEach(action => {
-          if (Reflect.has(action, 'retain')) {
-            index += action.retain
-            slots.retain(index)
-          } 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(index)
-            slots.delete(action.delete)
-          }
-        })
-      })
-    }
-    remoteSlots.observe(syncRemote)
-
-    const sub = slots.onChange.subscribe(operations => {
-      this.runLocalUpdate(() => {
-        const applyActions = operations.apply
-        let index: number
-        applyActions.forEach(action => {
-          if (action.type === 'retain') {
-            index = action.offset
-          } else if (action.type === 'insertSlot') {
-            const sharedSlot = this.createSharedSlotBySlot(action.ref)
-            remoteSlots.insert(index, [sharedSlot])
-            index++
-          } else if (action.type === 'delete') {
-            remoteSlots.delete(index, action.count)
-          }
-        })
-      })
-    })
-
-    sub.add(slots.onChildSlotRemove.subscribe(slots => {
-      slots.forEach(slot => {
-        this.cleanSubscriptionsBySlot(slot)
-      })
-    }))
-
-    this.slotsSyncCaches.set(component, () => {
-      remoteSlots.unobserve(syncRemote)
-      sub.unsubscribe()
-    })
-  }
-
-  protected syncComponent(remoteComponent: YMap<any>, component: ComponentInstance) {
-    const syncRemote = (ev, tr) => {
-      this.runRemoteUpdate(tr, () => {
-        ev.keysChanged.forEach(key => {
-          if (key === 'state') {
-            const state = (ev.target as YMap<any>).get('state')
-            component.updateState(draft => {
-              if (typeof draft === 'object' && draft !== null) {
-                Object.assign(draft, state)
-              } else {
-                return state
-              }
-            })
-          }
-        })
-      })
-    }
-    remoteComponent.observe(syncRemote)
-
-    const sub = component.onStateChange.subscribe(change => {
-      this.runLocalUpdate(() => {
-        remoteComponent.set('state', change.newState)
-      }, change.record)
-    })
-    this.componentStateSyncCaches.set(component, () => {
-      remoteComponent.unobserve(syncRemote)
-      sub.unsubscribe()
-    })
-  }
-
-  protected runLocalUpdate(fn: () => void, record = true) {
-    if (this.updateFromRemote || this.controller.readonly) {
-      return
-    }
-    this.updateRemoteActions.push({
-      record,
-      action: fn
-    })
-  }
-
-  protected runRemoteUpdate(tr: Transaction, fn: () => void) {
-    if (tr.origin === this.yDoc) {
-      return
-    }
-    this.updateFromRemote = true
-    if (tr.origin === this.manager) {
-      this.scheduler.historyApplyTransact(fn)
-    } else {
-      this.scheduler.remoteUpdateTransact(fn)
-    }
-    this.updateFromRemote = false
-  }
-
-  protected createSharedComponentByComponent(component: ComponentInstance): YMap<any> {
-    const sharedComponent = new YMap()
-    sharedComponent.set('state', component.state)
-    sharedComponent.set('name', component.name)
-    const sharedSlots = new YArray()
-    sharedComponent.set('slots', sharedSlots)
-    component.slots.toArray().forEach(slot => {
-      const sharedSlot = this.createSharedSlotBySlot(slot)
-      sharedSlots.push([sharedSlot])
-    })
-    this.syncSlots(sharedSlots, component)
-    this.syncComponent(sharedComponent, component)
-    return sharedComponent
-  }
-
-  protected createSharedSlotBySlot(slot: Slot): YMap<any> {
-    const sharedSlot = new YMap()
-    sharedSlot.set('schema', slot.schema)
-    sharedSlot.set('state', slot.state)
-    const sharedContent = new YText()
-    sharedSlot.set('content', sharedContent)
-    let offset = 0
-    slot.toDelta().forEach(i => {
-      let formats: any = {}
-      if (i.formats) {
-        i.formats.forEach(item => {
-          formats[item[0].name] = item[1]
-        })
-      } else {
-        formats = null
-      }
-      if (typeof i.insert === 'string') {
-        sharedContent.insert(offset, i.insert, formats)
-      } else {
-        const sharedComponent = this.createSharedComponentByComponent(i.insert)
-        sharedContent.insertEmbed(offset, sharedComponent, formats)
-      }
-      offset += i.insert.length
-    })
-    this.syncContent(sharedContent, slot)
-    this.syncSlot(sharedSlot, slot)
-    return sharedSlot
-  }
-
-  protected createComponentBySharedComponent(yMap: YMap<any>, canInsertInlineComponent: boolean): ComponentInstance {
-    const sharedSlots = yMap.get('slots') as YArray<YMap<any>>
-    const slots: Slot[] = []
-    sharedSlots.forEach(sharedSlot => {
-      const slot = this.createSlotBySharedSlot(sharedSlot)
-      slots.push(slot)
-    })
-    const name = yMap.get('name')
-    const state = yMap.get('state')
-    const instance = this.translator.createComponentByData(name, {
-      state,
-      slots
-    })
-    if (instance) {
-      instance.slots.toArray().forEach((slot, 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
-    }
-    return createUnknownComponent(name, canInsertInlineComponent).createInstance(this.starter)
-  }
-
-  protected createSlotBySharedSlot(sharedSlot: YMap<any>): Slot {
-    const content = sharedSlot.get('content') as YText
-    const delta = content.toDelta()
-
-    const slot = this.translator.createSlot({
-      schema: sharedSlot.get('schema'),
-      state: sharedSlot.get('state'),
-      formats: {},
-      content: []
-    })
-
-    for (const action of delta) {
-      if (action.insert) {
-        if (typeof action.insert === 'string') {
-          slot.insert(action.insert, remoteFormatsToLocal(this.registry, action.attributes))
-        } else {
-          const sharedComponent = action.insert as YMap<any>
-          const canInsertInlineComponent = slot.schema.includes(ContentType.InlineComponent)
-          const component = this.createComponentBySharedComponent(sharedComponent, canInsertInlineComponent)
-          slot.insert(component, remoteFormatsToLocal(this.registry, action.attributes))
-          this.syncSlots(sharedComponent.get('slots'), component)
-          this.syncComponent(sharedComponent, component)
-        }
-      } else {
-        throw collaborateErrorFn('unexpected delta action.')
-      }
-    }
-    return slot
-  }
-
-  protected cleanSubscriptionsBySlot(slot: Slot) {
-    this.contentMap.delete(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)
-      }
-    })
-  }
-
-  protected 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 remoteFormatsToLocal(registry: Registry, attrs?: any,) {
-  const formats: Formats = []
-  if (attrs) {
-    Object.keys(attrs).forEach(key => {
-      const formatter = registry.getFormatter(key)
-      if (formatter) {
-        formats.push([formatter, attrs[key]])
-      }
-    })
-  }
-  return formats
-}

package/src/public-api.ts

@@ -1,18 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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/tsconfig-build.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "declaration": true,
-    "useDefineForClassFields": false,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
-    "lib": ["esnext", "dom"],
-    "target": "es6",
-    "strict": true,
-    "module": "es2020",
-    "moduleResolution": "node",
-    "inlineSourceMap": true,
-    "inlineSources": true,
-    "noImplicitAny": false,
-    "suppressImplicitAnyIndexErrors": true,
-    "outDir": "bundles/",
-    "downlevelIteration": true,
-    "jsx": "react",
-    "jsxFactory": "VElement.createElement",
-    "paths": {
-      "@textbus/collaborate": ["./src/public-api.ts"],
-    }
-  },
-  "include": [
-    "src/"
-  ]
-}