@textbus/collaborate 4.0.0-alpha.28 → 4.0.0-alpha.30

package/bundles/collaborate-module.d.ts

@@ -1,5 +1,14 @@
-import { Module } from '@textbus/core';
+import { Module, Textbus } from '@textbus/core';
 import { Provider } from '@viewfly/core';
+import { UserInfo } from './user-activity';
+export interface CollaborateConfig {
+    url: string;
+    roomName: string;
+    userinfo: UserInfo;
+}
 export declare class CollaborateModule implements Module {
+    config: CollaborateConfig;
     providers: Provider[];
+    constructor(config: CollaborateConfig);
+    setup(textbus: Textbus): Promise<(() => void) | void> | (() => void) | void;
 }

package/bundles/index.esm.js

@@ -1,7 +1,8 @@
 import { Injectable, Inject, Optional } from '@viewfly/core';
-import { Subject, map, filter } from '@tanbo/stream';
+import { Subject, map, filter, Subscription } from '@tanbo/stream';
 import { makeError, HISTORY_STACK_SIZE, ChangeOrigin, createObjectProxy, createArrayProxy, Slot, RootComponentRef, Scheduler, Registry, Selection, History } from '@textbus/core';
 import { Doc, UndoManager, Map, Array as Array$1, Text, createAbsolutePositionFromRelativePosition, createRelativePositionFromTypeIndex } from 'yjs';
+import { WebsocketProvider } from 'y-websocket';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -729,16 +730,82 @@ function remoteFormatsToLocal(registry, attrs) {
     return formats;
 }
 
+let UserActivity = class UserActivity {
+    constructor(websocketProvider, selection) {
+        this.websocketProvider = websocketProvider;
+        this.selection = selection;
+        this.stateChangeEvent = new Subject();
+        this.userChangeEvent = new Subject();
+        this.subscription = new Subscription();
+        this.onStateChange = this.stateChangeEvent.asObservable();
+        this.onUserChange = this.userChangeEvent.asObservable();
+    }
+    init(userinfo) {
+        const provide = this.websocketProvider;
+        provide.awareness.setLocalStateField('user', userinfo);
+        this.subscription.add(this.selection.onChange.subscribe(() => {
+            const selection = this.selection.getPaths();
+            provide.awareness.setLocalStateField('selection', Object.assign(Object.assign({}, userinfo), { selection }));
+        }));
+        provide.awareness.on('update', () => {
+            const users = [];
+            const remoteSelections = [];
+            provide.awareness.getStates().forEach(state => {
+                if (state.user) {
+                    users.push(state.user);
+                }
+                if (state.selection) {
+                    remoteSelections.push(state.selection);
+                }
+            });
+            const selections = remoteSelections.filter(i => i.id !== userinfo.id);
+            this.userChangeEvent.next(users);
+            this.stateChangeEvent.next(selections);
+        });
+    }
+    destroy() {
+        this.subscription.unsubscribe();
+    }
+};
+UserActivity = __decorate([
+    Injectable(),
+    __metadata("design:paramtypes", [WebsocketProvider,
+        Selection])
+], UserActivity);
+
 class CollaborateModule {
-    constructor() {
+    constructor(config) {
+        this.config = config;
         this.providers = [
             Collaborate,
+            UserActivity,
             {
                 provide: History,
                 useExisting: Collaborate
+            }, {
+                provide: WebsocketProvider,
+                useFactory: (collab) => {
+                    return new WebsocketProvider(this.config.url, this.config.roomName, collab.yDoc);
+                },
+                deps: [Collaborate]
             }
         ];
     }
+    setup(textbus) {
+        const provide = textbus.get(WebsocketProvider);
+        const userActivity = textbus.get(UserActivity);
+        userActivity.init(this.config.userinfo);
+        return new Promise((resolve) => {
+            provide.on('sync', (is) => {
+                if (is) {
+                    resolve(() => {
+                        provide.disconnect();
+                        userActivity.destroy();
+                    });
+                }
+            });
+        });
+    }
 }
 
-export { Collaborate, CollaborateModule, CustomUndoManagerConfig };
+export { Collaborate, CollaborateModule, CustomUndoManagerConfig, UserActivity };

package/bundles/index.js

@@ -4,6 +4,7 @@ var core$1 = require('@viewfly/core');
 var stream = require('@tanbo/stream');
 var core = require('@textbus/core');
 var yjs = require('yjs');
+var yWebsocket = require('y-websocket');
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -731,16 +732,82 @@ function remoteFormatsToLocal(registry, attrs) {
     return formats;
 }
 
+exports.UserActivity = class UserActivity {
+    constructor(websocketProvider, selection) {
+        this.websocketProvider = websocketProvider;
+        this.selection = selection;
+        this.stateChangeEvent = new stream.Subject();
+        this.userChangeEvent = new stream.Subject();
+        this.subscription = new stream.Subscription();
+        this.onStateChange = this.stateChangeEvent.asObservable();
+        this.onUserChange = this.userChangeEvent.asObservable();
+    }
+    init(userinfo) {
+        const provide = this.websocketProvider;
+        provide.awareness.setLocalStateField('user', userinfo);
+        this.subscription.add(this.selection.onChange.subscribe(() => {
+            const selection = this.selection.getPaths();
+            provide.awareness.setLocalStateField('selection', Object.assign(Object.assign({}, userinfo), { selection }));
+        }));
+        provide.awareness.on('update', () => {
+            const users = [];
+            const remoteSelections = [];
+            provide.awareness.getStates().forEach(state => {
+                if (state.user) {
+                    users.push(state.user);
+                }
+                if (state.selection) {
+                    remoteSelections.push(state.selection);
+                }
+            });
+            const selections = remoteSelections.filter(i => i.id !== userinfo.id);
+            this.userChangeEvent.next(users);
+            this.stateChangeEvent.next(selections);
+        });
+    }
+    destroy() {
+        this.subscription.unsubscribe();
+    }
+};
+exports.UserActivity = __decorate([
+    core$1.Injectable(),
+    __metadata("design:paramtypes", [yWebsocket.WebsocketProvider,
+        core.Selection])
+], exports.UserActivity);
+
 class CollaborateModule {
-    constructor() {
+    constructor(config) {
+        this.config = config;
         this.providers = [
             exports.Collaborate,
+            exports.UserActivity,
             {
                 provide: core.History,
                 useExisting: exports.Collaborate
+            }, {
+                provide: yWebsocket.WebsocketProvider,
+                useFactory: (collab) => {
+                    return new yWebsocket.WebsocketProvider(this.config.url, this.config.roomName, collab.yDoc);
+                },
+                deps: [exports.Collaborate]
             }
         ];
     }
+    setup(textbus) {
+        const provide = textbus.get(yWebsocket.WebsocketProvider);
+        const userActivity = textbus.get(exports.UserActivity);
+        userActivity.init(this.config.userinfo);
+        return new Promise((resolve) => {
+            provide.on('sync', (is) => {
+                if (is) {
+                    resolve(() => {
+                        provide.disconnect();
+                        userActivity.destroy();
+                    });
+                }
+            });
+        });
+    }
 }
 
 exports.CollaborateModule = CollaborateModule;

package/bundles/public-api.d.ts

@@ -1,2 +1,3 @@
 export * from './collaborate';
 export * from './collaborate-module';
+export * from './user-activity';

package/bundles/user-activity.d.ts

@@ -0,0 +1,23 @@
+import { Observable } from '@tanbo/stream';
+import { Selection, SelectionPaths } from '@textbus/core';
+import { WebsocketProvider } from 'y-websocket';
+export interface UserInfo {
+    username: string;
+    color: string;
+    id: string;
+}
+export interface ActivityInfo extends UserInfo {
+    selection: SelectionPaths;
+}
+export declare class UserActivity {
+    private websocketProvider;
+    private selection;
+    onStateChange: Observable<ActivityInfo[]>;
+    onUserChange: Observable<UserInfo[]>;
+    private stateChangeEvent;
+    private userChangeEvent;
+    private subscription;
+    constructor(websocketProvider: WebsocketProvider, selection: Selection);
+    init(userinfo: UserInfo): void;
+    destroy(): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/collaborate",
-  "version": "4.0.0-alpha.28",
+  "version": "4.0.0-alpha.30",
   "description": "Textbus is a rich text editor and framework that is highly customizable and extensible to achieve rich wysiwyg effects.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -26,11 +26,11 @@
   ],
   "dependencies": {
     "@tanbo/stream": "^1.2.3",
-    "@textbus/core": "^4.0.0-alpha.28",
+    "@textbus/core": "^4.0.0-alpha.30",
     "@viewfly/core": "^0.6.0",
     "reflect-metadata": "^0.1.13",
-    "y-protocols": "^1.0.5",
-    "yjs": "^13.6.7"
+    "y-websocket": "^1.4.3",
+    "yjs": "^13.6.14"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^23.0.2",
@@ -50,5 +50,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "afb457beb39742c7e00f78b71cd24e13443bae56"
+  "gitHead": "9b14d8cf2a2473f31a36b51ee3d988ddecf776fb"
 }