@textbus/collaborate 2.0.0-beta.3 → 2.0.0-beta.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/collaborate",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.33",
   "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",
@@ -25,10 +25,10 @@
     "typescript editor"
   ],
   "dependencies": {
-    "@tanbo/di": "^1.1.0",
-    "@tanbo/stream": "^1.0.0",
-    "@textbus/browser": "^2.0.0-beta.3",
-    "@textbus/core": "^2.0.0-beta.3",
+    "@tanbo/di": "^1.1.1",
+    "@tanbo/stream": "^1.0.2",
+    "@textbus/browser": "^2.0.0-beta.33",
+    "@textbus/core": "^2.0.0-beta.32",
     "reflect-metadata": "^0.1.13",
     "y-protocols": "^1.0.5",
     "yjs": "^13.5.27"
@@ -44,5 +44,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "9c79a02ea3e9b54d9b5813e76859224a17f67fe8"
+  "gitHead": "c6b0779f8b3064ff6bded293ac6afa8c193fe6c8"
 }

package/src/collaborate-cursor.ts

@@ -0,0 +1,289 @@
+import { Inject, Injectable, Optional } from '@tanbo/di'
+import {
+  createElement,
+  VIEW_CONTAINER,
+  getLayoutRectByRange,
+  SelectionBridge
+} from '@textbus/browser'
+import { Selection, SelectionPaths, Range as TBRange } from '@textbus/core'
+import { fromEvent, Subject, Subscription } from '@tanbo/stream'
+
+export interface RemoteSelection {
+  color: string
+  username: string
+  paths: SelectionPaths
+}
+
+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 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: CollaborateCursorAwarenessDelegate,
+              private nativeSelection: SelectionBridge,
+              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.x, rect.y, rect.width, rect.height)
+        this.context.fill()
+        this.context.closePath()
+      }
+    }), fromEvent(window, 'resize').subscribe(() => {
+      this.canvas.style.height = document.documentElement.clientHeight + 'px'
+      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.y * -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({
+          color: item.color,
+          username: item.username,
+          x: rect.x - containerRect.x,
+          y: rect.y,
+          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)
+
+      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)
+  }
+
+  private 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.x + 'px',
+        top: rect.y + '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,24 +1,24 @@
 import { Injectable } from '@tanbo/di'
-import { merge, microTask, Observable, Subject, Subscription } from '@tanbo/stream'
+import { delay, 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')
 
@@ -60,12 +60,12 @@ export class Collaborate implements History {
 
   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) {
-    this.onSelectionChange = this.selectionChangeEvent.asObservable()
+    this.onSelectionChange = this.selectionChangeEvent.asObservable().pipe(delay())
     this.onBack = this.backEvent.asObservable()
     this.onForward = this.forwardEvent.asObservable()
     this.onChange = this.changeEvent.asObservable()
@@ -74,14 +74,12 @@ export class Collaborate implements History {
 
   setup() {
     this.subscriptions.push(
-      this.starter.onReady.subscribe(() => {
-        this.listen2()
-      }),
       this.selection.onChange.subscribe(() => {
         const paths = this.selection.getPaths()
         this.selectionChangeEvent.next(paths)
       })
     )
+    this.syncRootComponent()
   }
 
   updateRemoteSelection(paths: RemoteSelection[]) {
@@ -94,21 +92,26 @@ export class Collaborate implements History {
 
   back() {
     if (this.canBack) {
+      this.scheduler.stopBroadcastChanges = true
       this.manager.undo()
+      this.scheduler.stopBroadcastChanges = false
     }
   }
 
   forward() {
     if (this.canForward) {
+      this.scheduler.stopBroadcastChanges = true
       this.manager.redo()
+      this.scheduler.stopBroadcastChanges = false
     }
   }
 
   destroy() {
     this.subscriptions.forEach(i => i.unsubscribe())
+    this.collaborateCursor.destroy()
   }
 
-  private listen2() {
+  private syncRootComponent() {
     const root = this.yDoc.getText('content')
     const rootComponent = this.rootComponentRef.component!
     this.manager = new UndoManager(root, {
@@ -117,20 +120,13 @@ 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.scheduler.onDocChange.subscribe(() => {
         this.yDoc.transact(() => {
           this.updateRemoteActions.forEach(fn => {
             fn()
           })
           this.updateRemoteActions = []
         }, this.yDoc)
-        this.renderer.render()
-        this.selection.restore()
       })
     )
   }
@@ -157,17 +153,18 @@ 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)
             }
             if (this.selection.isSelected) {
-              if (slot === this.selection.startSlot && this.selection.startOffset! >= index) {
-                this.selection.setStart(slot, this.selection.startOffset! + length)
+              if (slot === this.selection.anchorSlot && this.selection.anchorOffset! > index) {
+                this.selection.setAnchor(slot, this.selection.anchorOffset! + length)
               }
-              if (slot === this.selection.endSlot && this.selection.endOffset! >= index) {
-                this.selection.setEnd(slot, this.selection.endOffset! + length)
+              if (slot === this.selection.focusSlot && this.selection.focusOffset! > index) {
+                this.selection.setFocus(slot, this.selection.focusOffset! + length)
               }
             }
           } else if (action.delete) {
@@ -175,11 +172,11 @@ export class Collaborate implements History {
             slot.retain(slot.index)
             slot.delete(action.delete)
             if (this.selection.isSelected) {
-              if (slot === this.selection.startSlot && this.selection.startOffset! >= index) {
-                this.selection.setStart(slot, this.selection.startOffset! - action.delete)
+              if (slot === this.selection.anchorSlot && this.selection.anchorOffset! >= index) {
+                this.selection.setAnchor(slot, this.selection.startOffset! - action.delete)
               }
-              if (slot === this.selection.endSlot && this.selection.endOffset! >= index) {
-                this.selection.setEnd(slot, this.selection.endOffset! - action.delete)
+              if (slot === this.selection.focusSlot && this.selection.focusOffset! >= index) {
+                this.selection.setFocus(slot, this.selection.focusOffset! - action.delete)
               }
             }
           } else if (action.attributes) {
@@ -219,16 +216,14 @@ export class Collaborate implements History {
             const isEmpty = delta.length === 1 && delta[0].insert === Slot.emptyPlaceholder
             if (typeof action.content === 'string') {
               length = action.content.length
-              content.insert(offset, action.content)
+              content.insert(offset, action.content, action.formats || {})
             } else {
               length = 1
               const component = slot.getContentAtIndex(offset) as ComponentInstance
               const sharedComponent = this.createSharedComponentByComponent(component)
               content.insertEmbed(offset, sharedComponent)
             }
-            if (action.formats) {
-              content.format(offset, length, action.formats)
-            }
+
             if (isEmpty && offset === 0) {
               content.delete(content.length - 1, 1)
             }
@@ -243,6 +238,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()
@@ -281,18 +282,21 @@ export class Collaborate implements History {
     const slots = component.slots
     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
+            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(slots.index)
+            slots.retain(index)
             slots.delete(action.delete)
           }
         })
@@ -313,15 +317,18 @@ export class Collaborate implements History {
             remoteSlots.insert(index, [sharedSlot])
             index++
           } else if (action.type === 'delete') {
-            slots.slice(index, index + action.count).forEach(slot => {
-              this.cleanSubscriptionsBySlot(slot)
-            })
             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()
@@ -366,7 +373,7 @@ export class Collaborate implements History {
       return
     }
     this.updateFromRemote = true
-    fn()
+    this.scheduler.remoteUpdateTransact(fn)
     this.updateFromRemote = false
   }
 
@@ -414,7 +421,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 => {
@@ -428,13 +435,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 {
@@ -454,7 +465,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)
@@ -494,7 +506,7 @@ export class Collaborate implements History {
 function makeFormats(registry: Registry, attrs?: any) {
   const formats: Formats = []
   if (attrs) {
-    Object.keys(attrs).map(key => {
+    Object.keys(attrs).forEach(key => {
       const formatter = registry.getFormatter(key)
       if (formatter) {
         formats.push([formatter, attrs[key]])

package/src/fixed-caret.plugin.ts

@@ -0,0 +1,35 @@
+import { Plugin, Renderer, Scheduler } from '@textbus/core'
+import { Injector } from '@tanbo/di'
+import { Caret, CaretPosition } from '@textbus/browser'
+import { Subscription } from '@tanbo/stream'
+
+export class FixedCaretPlugin implements Plugin {
+  private subscriptions = new Subscription()
+
+  constructor(public scrollContainer: HTMLElement) {
+  }
+
+  setup(injector: Injector) {
+    const scheduler = injector.get(Scheduler)
+    const caret = injector.get(Caret)
+    const renderer = injector.get(Renderer)
+
+    let isChanged = false
+    let caretPosition: CaretPosition | null = null
+    renderer.onViewChecked.subscribe(() => {
+      isChanged = true
+    })
+    this.subscriptions.add(caret.onPositionChange.subscribe(position => {
+      if (isChanged && caretPosition && position && !scheduler.hasLocalUpdate) {
+        const offset = position.top - caretPosition.top
+        this.scrollContainer.scrollTop += offset
+        isChanged = false
+      }
+      caretPosition = position
+    }))
+  }
+
+  onDestroy() {
+    this.subscriptions.unsubscribe()
+  }
+}

package/src/public-api.ts

@@ -1,2 +1,19 @@
-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 * from './fixed-caret.plugin'
+
+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=