@textbus/collaborate 2.0.0-beta.4 → 2.0.0-beta.40

package/bundles/fixed-caret.plugin.d.ts

@@ -0,0 +1,9 @@
+import { Plugin } from '@textbus/core';
+import { Injector } from '@tanbo/di';
+export declare class FixedCaretPlugin implements Plugin {
+    scrollContainer: HTMLElement;
+    private subscriptions;
+    constructor(scrollContainer: HTMLElement);
+    setup(injector: Injector): void;
+    onDestroy(): void;
+}

package/bundles/fixed-caret.plugin.js

@@ -0,0 +1,41 @@
+import { Renderer, Scheduler } from '@textbus/core';
+import { Caret } from '@textbus/browser';
+import { Subscription } from '@tanbo/stream';
+export class FixedCaretPlugin {
+    constructor(scrollContainer) {
+        Object.defineProperty(this, "scrollContainer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: scrollContainer
+        });
+        Object.defineProperty(this, "subscriptions", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subscription()
+        });
+    }
+    setup(injector) {
+        const scheduler = injector.get(Scheduler);
+        const caret = injector.get(Caret);
+        const renderer = injector.get(Renderer);
+        let isChanged = false;
+        let caretPosition = 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();
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZml4ZWQtY2FyZXQucGx1Z2luLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vc3JjL2ZpeGVkLWNhcmV0LnBsdWdpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQVUsUUFBUSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQTtBQUUzRCxPQUFPLEVBQUUsS0FBSyxFQUFpQixNQUFNLGtCQUFrQixDQUFBO0FBQ3ZELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUE7QUFFNUMsTUFBTSxPQUFPLGdCQUFnQjtJQUczQixZQUFtQixlQUE0Qjs7Ozs7bUJBQTVCOztRQUZuQjs7OzttQkFBd0IsSUFBSSxZQUFZLEVBQUU7V0FBQTtJQUcxQyxDQUFDO0lBRUQsS0FBSyxDQUFDLFFBQWtCO1FBQ3RCLE1BQU0sU0FBUyxHQUFHLFFBQVEsQ0FBQyxHQUFHLENBQUMsU0FBUyxDQUFDLENBQUE7UUFDekMsTUFBTSxLQUFLLEdBQUcsUUFBUSxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQTtRQUNqQyxNQUFNLFFBQVEsR0FBRyxRQUFRLENBQUMsR0FBRyxDQUFDLFFBQVEsQ0FBQyxDQUFBO1FBRXZDLElBQUksU0FBUyxHQUFHLEtBQUssQ0FBQTtRQUNyQixJQUFJLGFBQWEsR0FBeUIsSUFBSSxDQUFBO1FBQzlDLFFBQVEsQ0FBQyxhQUFhLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUNwQyxTQUFTLEdBQUcsSUFBSSxDQUFBO1FBQ2xCLENBQUMsQ0FBQyxDQUFBO1FBQ0YsSUFBSSxDQUFDLGFBQWEsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLGdCQUFnQixDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsRUFBRTtZQUNqRSxJQUFJLFNBQVMsSUFBSSxhQUFhLElBQUksUUFBUSxJQUFJLENBQUMsU0FBUyxDQUFDLGNBQWMsRUFBRTtnQkFDdkUsTUFBTSxNQUFNLEdBQUcsUUFBUSxDQUFDLEdBQUcsR0FBRyxhQUFhLENBQUMsR0FBRyxDQUFBO2dCQUMvQyxJQUFJLENBQUMsZUFBZSxDQUFDLFNBQVMsSUFBSSxNQUFNLENBQUE7Z0JBQ3hDLFNBQVMsR0FBRyxLQUFLLENBQUE7YUFDbEI7WUFDRCxhQUFhLEdBQUcsUUFBUSxDQUFBO1FBQzFCLENBQUMsQ0FBQyxDQUFDLENBQUE7SUFDTCxDQUFDO0lBRUQsU0FBUztRQUNQLElBQUksQ0FBQyxhQUFhLENBQUMsV0FBVyxFQUFFLENBQUE7SUFDbEMsQ0FBQztDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGx1Z2luLCBSZW5kZXJlciwgU2NoZWR1bGVyIH0gZnJvbSAnQHRleHRidXMvY29yZSdcbmltcG9ydCB7IEluamVjdG9yIH0gZnJvbSAnQHRhbmJvL2RpJ1xuaW1wb3J0IHsgQ2FyZXQsIENhcmV0UG9zaXRpb24gfSBmcm9tICdAdGV4dGJ1cy9icm93c2VyJ1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAnQHRhbmJvL3N0cmVhbSdcblxuZXhwb3J0IGNsYXNzIEZpeGVkQ2FyZXRQbHVnaW4gaW1wbGVtZW50cyBQbHVnaW4ge1xuICBwcml2YXRlIHN1YnNjcmlwdGlvbnMgPSBuZXcgU3Vic2NyaXB0aW9uKClcblxuICBjb25zdHJ1Y3RvcihwdWJsaWMgc2Nyb2xsQ29udGFpbmVyOiBIVE1MRWxlbWVudCkge1xuICB9XG5cbiAgc2V0dXAoaW5qZWN0b3I6IEluamVjdG9yKSB7XG4gICAgY29uc3Qgc2NoZWR1bGVyID0gaW5qZWN0b3IuZ2V0KFNjaGVkdWxlcilcbiAgICBjb25zdCBjYXJldCA9IGluamVjdG9yLmdldChDYXJldClcbiAgICBjb25zdCByZW5kZXJlciA9IGluamVjdG9yLmdldChSZW5kZXJlcilcblxuICAgIGxldCBpc0NoYW5nZWQgPSBmYWxzZVxuICAgIGxldCBjYXJldFBvc2l0aW9uOiBDYXJldFBvc2l0aW9uIHwgbnVsbCA9IG51bGxcbiAgICByZW5kZXJlci5vblZpZXdDaGVja2VkLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICBpc0NoYW5nZWQgPSB0cnVlXG4gICAgfSlcbiAgICB0aGlzLnN1YnNjcmlwdGlvbnMuYWRkKGNhcmV0Lm9uUG9zaXRpb25DaGFuZ2Uuc3Vic2NyaWJlKHBvc2l0aW9uID0+IHtcbiAgICAgIGlmIChpc0NoYW5nZWQgJiYgY2FyZXRQb3NpdGlvbiAmJiBwb3NpdGlvbiAmJiAhc2NoZWR1bGVyLmhhc0xvY2FsVXBkYXRlKSB7XG4gICAgICAgIGNvbnN0IG9mZnNldCA9IHBvc2l0aW9uLnRvcCAtIGNhcmV0UG9zaXRpb24udG9wXG4gICAgICAgIHRoaXMuc2Nyb2xsQ29udGFpbmVyLnNjcm9sbFRvcCArPSBvZmZzZXRcbiAgICAgICAgaXNDaGFuZ2VkID0gZmFsc2VcbiAgICAgIH1cbiAgICAgIGNhcmV0UG9zaXRpb24gPSBwb3NpdGlvblxuICAgIH0pKVxuICB9XG5cbiAgb25EZXN0cm95KCkge1xuICAgIHRoaXMuc3Vic2NyaXB0aW9ucy51bnN1YnNjcmliZSgpXG4gIH1cbn1cbiJdfQ==

package/bundles/public-api.d.ts

@@ -1,2 +1,5 @@
-export * from './collab/_api';
+import { Module } from '@textbus/core';
 export * from './collaborate';
+export * from './collaborate-cursor';
+export * from './fixed-caret.plugin';
+export declare const collaborateModule: Module;

package/bundles/public-api.js

@@ -1,3 +1,17 @@
-export * from './collab/_api';
+import { History } from '@textbus/core';
+import { Collaborate } from './collaborate';
+import { CollaborateCursor } from './collaborate-cursor';
 export * from './collaborate';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsZUFBZSxDQUFBO0FBQzdCLGNBQWMsZUFBZSxDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9jb2xsYWIvX2FwaSdcbmV4cG9ydCAqIGZyb20gJy4vY29sbGFib3JhdGUnXG4iXX0=
+export * from './collaborate-cursor';
+export * from './fixed-caret.plugin';
+export const collaborateModule = {
+    providers: [
+        Collaborate,
+        CollaborateCursor,
+        {
+            provide: History,
+            useClass: Collaborate
+        }
+    ]
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxPQUFPLEVBQVUsTUFBTSxlQUFlLENBQUE7QUFFL0MsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQTtBQUMzQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUV4RCxjQUFjLGVBQWUsQ0FBQTtBQUM3QixjQUFjLHNCQUFzQixDQUFBO0FBQ3BDLGNBQWMsc0JBQXNCLENBQUE7QUFFcEMsTUFBTSxDQUFDLE1BQU0saUJBQWlCLEdBQVc7SUFDdkMsU0FBUyxFQUFFO1FBQ1QsV0FBVztRQUNYLGlCQUFpQjtRQUNqQjtZQUNFLE9BQU8sRUFBRSxPQUFPO1lBQ2hCLFFBQVEsRUFBRSxXQUFXO1NBQ3RCO0tBQ0Y7Q0FDRixDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSGlzdG9yeSwgTW9kdWxlIH0gZnJvbSAnQHRleHRidXMvY29yZSdcblxuaW1wb3J0IHsgQ29sbGFib3JhdGUgfSBmcm9tICcuL2NvbGxhYm9yYXRlJ1xuaW1wb3J0IHsgQ29sbGFib3JhdGVDdXJzb3IgfSBmcm9tICcuL2NvbGxhYm9yYXRlLWN1cnNvcidcblxuZXhwb3J0ICogZnJvbSAnLi9jb2xsYWJvcmF0ZSdcbmV4cG9ydCAqIGZyb20gJy4vY29sbGFib3JhdGUtY3Vyc29yJ1xuZXhwb3J0ICogZnJvbSAnLi9maXhlZC1jYXJldC5wbHVnaW4nXG5cbmV4cG9ydCBjb25zdCBjb2xsYWJvcmF0ZU1vZHVsZTogTW9kdWxlID0ge1xuICBwcm92aWRlcnM6IFtcbiAgICBDb2xsYWJvcmF0ZSxcbiAgICBDb2xsYWJvcmF0ZUN1cnNvcixcbiAgICB7XG4gICAgICBwcm92aWRlOiBIaXN0b3J5LFxuICAgICAgdXNlQ2xhc3M6IENvbGxhYm9yYXRlXG4gICAgfVxuICBdXG59XG4iXX0=

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.4",
+  "version": "2.0.0-beta.40",
   "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.4",
-    "@textbus/core": "^2.0.0-beta.4",
+    "@tanbo/di": "^1.1.1",
+    "@tanbo/stream": "^1.1.2",
+    "@textbus/browser": "^2.0.0-beta.40",
+    "@textbus/core": "^2.0.0-beta.40",
     "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": "81d69ab7d830e36737120e065ccfcf32eca22492"
+  "gitHead": "903507660b3a6b02716560ea6357a10d49e7d4b9"
 }

package/src/collaborate-cursor.ts

@@ -0,0 +1,293 @@
+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)
+
+      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)
+  }
+
+  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
+    }
+  }
+}