@textbus/collaborate 2.0.0-beta.5 → 2.0.0-beta.50

package/bundles/public-api.d.ts

@@ -1,2 +1,4 @@
+import { Module } from '@textbus/core';
 export * from './collaborate';
 export * from './collaborate-cursor';
+export declare const collaborateModule: Module;

package/bundles/public-api.js

@@ -1,3 +1,16 @@
+import { History } from '@textbus/core';
+import { Collaborate } from './collaborate';
+import { CollaborateCursor } from './collaborate-cursor';
 export * from './collaborate';
 export * from './collaborate-cursor';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsZUFBZSxDQUFBO0FBQzdCLGNBQWMsc0JBQXNCLENBQUEiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2NvbGxhYm9yYXRlJ1xuZXhwb3J0ICogZnJvbSAnLi9jb2xsYWJvcmF0ZS1jdXJzb3InXG4iXX0=
+export const collaborateModule = {
+    providers: [
+        Collaborate,
+        CollaborateCursor,
+        {
+            provide: History,
+            useClass: Collaborate
+        }
+    ]
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxPQUFPLEVBQVUsTUFBTSxlQUFlLENBQUE7QUFFL0MsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQTtBQUMzQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUV4RCxjQUFjLGVBQWUsQ0FBQTtBQUM3QixjQUFjLHNCQUFzQixDQUFBO0FBRXBDLE1BQU0sQ0FBQyxNQUFNLGlCQUFpQixHQUFXO0lBQ3ZDLFNBQVMsRUFBRTtRQUNULFdBQVc7UUFDWCxpQkFBaUI7UUFDakI7WUFDRSxPQUFPLEVBQUUsT0FBTztZQUNoQixRQUFRLEVBQUUsV0FBVztTQUN0QjtLQUNGO0NBQ0YsQ0FBQSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEhpc3RvcnksIE1vZHVsZSB9IGZyb20gJ0B0ZXh0YnVzL2NvcmUnXG5cbmltcG9ydCB7IENvbGxhYm9yYXRlIH0gZnJvbSAnLi9jb2xsYWJvcmF0ZSdcbmltcG9ydCB7IENvbGxhYm9yYXRlQ3Vyc29yIH0gZnJvbSAnLi9jb2xsYWJvcmF0ZS1jdXJzb3InXG5cbmV4cG9ydCAqIGZyb20gJy4vY29sbGFib3JhdGUnXG5leHBvcnQgKiBmcm9tICcuL2NvbGxhYm9yYXRlLWN1cnNvcidcblxuZXhwb3J0IGNvbnN0IGNvbGxhYm9yYXRlTW9kdWxlOiBNb2R1bGUgPSB7XG4gIHByb3ZpZGVyczogW1xuICAgIENvbGxhYm9yYXRlLFxuICAgIENvbGxhYm9yYXRlQ3Vyc29yLFxuICAgIHtcbiAgICAgIHByb3ZpZGU6IEhpc3RvcnksXG4gICAgICB1c2VDbGFzczogQ29sbGFib3JhdGVcbiAgICB9XG4gIF1cbn1cbiJdfQ==

package/bundles/unknown.component.d.ts

@@ -0,0 +1 @@
+export declare function createUnknownComponent(factoryName: string, canInsertInlineComponent: boolean): any;

package/bundles/unknown.component.js

@@ -0,0 +1,22 @@
+import { ContentType, defineComponent, VElement } from '@textbus/core';
+export function createUnknownComponent(factoryName, canInsertInlineComponent) {
+    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;
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidW5rbm93bi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvdW5rbm93bi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxlQUFlLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFBO0FBRXRFLE1BQU0sVUFBVSxzQkFBc0IsQ0FBQyxXQUFtQixFQUFFLHdCQUFpQztJQUMzRixNQUFNLGdCQUFnQixHQUFHLGVBQWUsQ0FBQztRQUN2QyxJQUFJLEVBQUUsd0JBQXdCLENBQUMsQ0FBQyxDQUFDLFdBQVcsQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDLFdBQVcsQ0FBQyxjQUFjO1FBQ3pGLElBQUksRUFBRSxrQkFBa0I7UUFDeEIsS0FBSztZQUNILE9BQU8sQ0FBQyxLQUFLLENBQUMsbUNBQW1DLFdBQVcsS0FBSyxDQUFDLENBQUE7WUFDbEUsT0FBTztnQkFDTCxNQUFNO29CQUNKLE9BQU8sUUFBUSxDQUFDLGFBQWEsQ0FBQywyQkFBMkIsRUFBRTt3QkFDekQsS0FBSyxFQUFFOzRCQUNMLE9BQU8sRUFBRSx3QkFBd0IsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxPQUFPOzRCQUN0RCxLQUFLLEVBQUUsTUFBTTt5QkFDZDtxQkFDRixFQUFFLGdCQUFnQixDQUFDLElBQUksQ0FBQyxDQUFBO2dCQUMzQixDQUFDO2FBQ0YsQ0FBQTtRQUNILENBQUM7S0FDRixDQUFDLENBQUE7SUFDRixPQUFPLGdCQUFnQixDQUFBO0FBQ3pCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb250ZW50VHlwZSwgZGVmaW5lQ29tcG9uZW50LCBWRWxlbWVudCB9IGZyb20gJ0B0ZXh0YnVzL2NvcmUnXG5cbmV4cG9ydCBmdW5jdGlvbiBjcmVhdGVVbmtub3duQ29tcG9uZW50KGZhY3RvcnlOYW1lOiBzdHJpbmcsIGNhbkluc2VydElubGluZUNvbXBvbmVudDogYm9vbGVhbikge1xuICBjb25zdCB1bmtub3duQ29tcG9uZW50ID0gZGVmaW5lQ29tcG9uZW50KHtcbiAgICB0eXBlOiBjYW5JbnNlcnRJbmxpbmVDb21wb25lbnQgPyBDb250ZW50VHlwZS5JbmxpbmVDb21wb25lbnQgOiBDb250ZW50VHlwZS5CbG9ja0NvbXBvbmVudCxcbiAgICBuYW1lOiAnVW5rbm93bkNvbXBvbmVudCcsXG4gICAgc2V0dXAoKSB7XG4gICAgICBjb25zb2xlLmVycm9yKGBjYW5ub3QgZmluZCBjb21wb25lbnQgZmFjdG9yeSBcXGAke2ZhY3RvcnlOYW1lfVxcYC5gKVxuICAgICAgcmV0dXJuIHtcbiAgICAgICAgcmVuZGVyKCkge1xuICAgICAgICAgIHJldHVybiBWRWxlbWVudC5jcmVhdGVFbGVtZW50KCd0ZXh0YnVzLXVua25vd24tY29tcG9uZW50Jywge1xuICAgICAgICAgICAgc3R5bGU6IHtcbiAgICAgICAgICAgICAgZGlzcGxheTogY2FuSW5zZXJ0SW5saW5lQ29tcG9uZW50ID8gJ2lubGluZScgOiAnYmxvY2snLFxuICAgICAgICAgICAgICBjb2xvcjogJyNmMDAnXG4gICAgICAgICAgICB9XG4gICAgICAgICAgfSwgdW5rbm93bkNvbXBvbmVudC5uYW1lKVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuICB9KVxuICByZXR1cm4gdW5rbm93bkNvbXBvbmVudFxufVxuIl19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/collaborate",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.50",
   "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,13 +25,13 @@
     "typescript editor"
   ],
   "dependencies": {
-    "@tanbo/di": "^1.1.0",
-    "@tanbo/stream": "^1.0.0",
-    "@textbus/browser": "^2.0.0-beta.5",
-    "@textbus/core": "^2.0.0-beta.4",
+    "@tanbo/di": "^1.1.1",
+    "@tanbo/stream": "^1.1.3",
+    "@textbus/browser": "^2.0.0-beta.50",
+    "@textbus/core": "^2.0.0-beta.50",
     "reflect-metadata": "^0.1.13",
     "y-protocols": "^1.0.5",
-    "yjs": "^13.5.27"
+    "yjs": "^13.5.39"
   },
   "author": {
     "name": "Tanbo",
@@ -44,5 +44,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "c2d4326a24e8e2acf969737b315cfef462b16b2f"
+  "gitHead": "62add70ee0449f8d23a398ef67a3041e3d72e9b7"
 }

package/src/collaborate-cursor.ts

@@ -1,13 +1,12 @@
-import { Inject, Injectable } from '@tanbo/di'
+import { Inject, Injectable, Optional } from '@tanbo/di'
 import {
   createElement,
-  EDITABLE_DOCUMENT,
-  EDITOR_CONTAINER,
+  VIEW_CONTAINER,
   getLayoutRectByRange,
-  SelectionBridge
+  SelectionBridge, VIEW_SCROLLER
 } from '@textbus/browser'
-import { Selection, SelectionPaths } from '@textbus/core'
-import { Subject } from '@tanbo/stream'
+import { Selection, SelectionPaths, Range as TBRange } from '@textbus/core'
+import { fromEvent, Subject, Subscription } from '@tanbo/stream'
 
 export interface RemoteSelection {
   color: string
@@ -15,23 +14,51 @@ 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 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',
@@ -39,8 +66,8 @@ export class CollaborateCursor {
       left: 0,
       top: 0,
       width: '100%',
-      height: '100%',
-      pointerEvents: 'none'
+      height: document.documentElement.clientHeight + 'px',
+      pointerEvents: 'none',
     }
   }) as HTMLCanvasElement
   private context = this.canvas.getContext('2d')!
@@ -59,12 +86,18 @@ export class CollaborateCursor {
 
   private onRectsChange = new Subject<SelectionRect[]>()
 
-  constructor(@Inject(EDITOR_CONTAINER) private container: HTMLElement,
-              @Inject(EDITABLE_DOCUMENT) private document: Document,
+  private subscription = new Subscription()
+  private currentSelection: RemoteSelection[] = []
+
+  constructor(@Inject(VIEW_CONTAINER) private container: HTMLElement,
+              @Optional() @Inject(VIEW_SCROLLER) private scroller: HTMLElement,
+              @Optional() private awarenessDelegate: CollaborateCursorAwarenessDelegate,
               private nativeSelection: SelectionBridge,
               private selection: Selection) {
-    container.prepend(this.canvas, this.tooltips)
-    this.onRectsChange.subscribe(rects => {
+    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()
@@ -72,68 +105,110 @@ export class CollaborateCursor {
         this.context.fill()
         this.context.closePath()
       }
-    })
+    }), fromEvent(window, 'resize').subscribe(() => {
+      this.canvas.style.height = document.documentElement.clientHeight + 'px'
+      this.refresh()
+    }))
+
+    if (scroller) {
+      this.subscription.add(fromEvent(scroller, 'scroll').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.width = containerRect.width
-    this.canvas.height = containerRect.height
+    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.start.length && i.paths.end.length
+      return i.paths.anchor.length && i.paths.focus.length
     }).forEach(item => {
-      const startOffset = item.paths.start.pop()!
-      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) {
-        const position = this.nativeSelection.getPositionByRange({
-          startOffset,
-          endOffset,
-          startSlot,
-          endSlot
+      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,
         })
-        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.setStart(focus.node, focus.offset)
+      cursorRange.collapse(true)
+
+      const cursorRect = getLayoutRectByRange(cursorRange)
+
+      const rect: SelectionRect = {
+        username: item.username,
+        color: item.color,
+        x: cursorRect.x - containerRect.x,
+        y: cursorRect.y - containerRect.y,
+        width: 2,
+        height: cursorRect.height
+      }
+      if (rect.x < 0 || rect.y < 0 || rect.x > containerRect.width) {
+        return
+      }
+      users.push(rect)
     })
     this.drawUserCursor(users)
   }
@@ -141,7 +216,7 @@ export class CollaborateCursor {
   private drawUserCursor(rects: SelectionRect[]) {
     for (let i = 0; i < rects.length; i++) {
       const rect = rects[i]
-      const {cursor, userTip, anchor} = this.getUserCursor(i)
+      const { cursor, userTip, anchor } = this.getUserCursor(i)
       Object.assign(cursor.style, {
         left: rect.x + 'px',
         top: rect.y + 'px',