@textbus/collaborate 4.0.0-alpha.7 → 4.0.0-alpha.72

package/bundles/index.esm.js

@@ -1,7 +1,8 @@
 import { Injectable, Inject, Optional } from '@viewfly/core';
-import { Subject, map, filter } from '@tanbo/stream';
-import { makeError, HISTORY_STACK_SIZE, ChangeOrigin, Slot, RootComponentRef, Scheduler, Registry, Selection, History } from '@textbus/core';
-import { Doc, UndoManager, Array, createAbsolutePositionFromRelativePosition, createRelativePositionFromTypeIndex, Map, Text } from 'yjs';
+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.
@@ -41,38 +42,38 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 const collaborateErrorFn = makeError('Collaborate');
-class ContentMap {
+class SlotMap {
     constructor() {
         this.slotAndYTextMap = new WeakMap();
-        this.yTextAndSLotMap = new WeakMap();
+        this.yTextAndSlotMap = new WeakMap();
     }
     set(key, value) {
         if (key instanceof Slot) {
             this.slotAndYTextMap.set(key, value);
-            this.yTextAndSLotMap.set(value, key);
+            this.yTextAndSlotMap.set(value, key);
         }
         else {
             this.slotAndYTextMap.set(value, key);
-            this.yTextAndSLotMap.set(key, value);
+            this.yTextAndSlotMap.set(key, value);
         }
     }
     get(key) {
         if (key instanceof Slot) {
             return this.slotAndYTextMap.get(key) || null;
         }
-        return this.yTextAndSLotMap.get(key) || null;
+        return this.yTextAndSlotMap.get(key) || null;
     }
     delete(key) {
         if (key instanceof Slot) {
             const v = this.slotAndYTextMap.get(key);
             this.slotAndYTextMap.delete(key);
             if (v) {
-                this.yTextAndSLotMap.delete(v);
+                this.yTextAndSlotMap.delete(v);
             }
         }
         else {
-            const v = this.yTextAndSLotMap.get(key);
-            this.yTextAndSLotMap.delete(key);
+            const v = this.yTextAndSlotMap.get(key);
+            this.yTextAndSlotMap.delete(key);
             if (v) {
                 this.slotAndYTextMap.delete(v);
             }
@@ -105,13 +106,9 @@ let Collaborate = class Collaborate {
         this.manager = null;
         this.subscriptions = [];
         this.updateFromRemote = false;
-        this.contentSyncCaches = new WeakMap();
-        this.slotStateSyncCaches = new WeakMap();
-        this.slotsSyncCaches = new WeakMap();
-        this.componentStateSyncCaches = new WeakMap();
         this.localChangesAppliedEvent = new Subject();
         this.selectionChangeEvent = new Subject();
-        this.contentMap = new ContentMap();
+        this.slotMap = new SlotMap();
         this.updateRemoteActions = [];
         this.noRecord = {};
         this.historyItems = [];
@@ -146,7 +143,7 @@ let Collaborate = class Collaborate {
         this.subscriptions.push(this.scheduler.onLocalChangeBefore.subscribe(() => {
             beforePosition = this.getRelativeCursorLocation();
         }));
-        manager.on('stack-item-added', event => {
+        manager.on('stack-item-added', (event) => {
             if (event.type === 'undo') {
                 if (event.origin === manager) {
                     this.index++;
@@ -258,50 +255,145 @@ let Collaborate = class Collaborate {
         (_a = this.manager) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     syncRootComponent(root, rootComponent) {
-        let slots = root.get('slots');
-        if (!slots) {
-            slots = new Array();
-            rootComponent.slots.toArray().forEach(i => {
-                const sharedSlot = this.createSharedSlotBySlot(i);
-                slots.push([sharedSlot]);
-            });
+        let state = root.get('state');
+        if (!state) {
+            state = new Map();
+            this.syncLocalMapToSharedMap(rootComponent.state, state);
             this.yDoc.transact(() => {
-                root.set('state', rootComponent.state);
-                root.set('slots', slots);
+                root.set('state', state);
             });
         }
-        else if (slots.length === 0) {
-            rootComponent.updateState(() => {
-                return root.get('state');
+        else {
+            Object.keys(rootComponent.state).forEach(key => {
+                Reflect.deleteProperty(rootComponent.state, key);
             });
-            this.yDoc.transact(() => {
-                rootComponent.slots.toArray().forEach(i => {
-                    const sharedSlot = this.createSharedSlotBySlot(i);
-                    slots.push([sharedSlot]);
+            this.syncSharedMapToLocalMap(state, rootComponent.state);
+        }
+    }
+    syncSharedMapToLocalMap(sharedMap, localMap) {
+        sharedMap.forEach((value, key) => {
+            localMap[key] = this.createLocalModelBySharedByModel(value);
+        });
+        this.syncObject(sharedMap, localMap);
+    }
+    createLocalMapBySharedMap(sharedMap) {
+        const localMap = createObjectProxy({});
+        this.syncSharedMapToLocalMap(sharedMap, localMap);
+        return localMap;
+    }
+    createLocalArrayBySharedArray(sharedArray) {
+        const localArray = createArrayProxy([]);
+        localArray.push(...sharedArray.map(item => this.createLocalModelBySharedByModel(item)));
+        this.syncArray(sharedArray, localArray);
+        return localArray;
+    }
+    syncLocalMapToSharedMap(localMap, sharedMap) {
+        Object.entries(localMap).forEach(([key, value]) => {
+            sharedMap.set(key, this.createSharedModelByLocalModel(value));
+        });
+        this.syncObject(sharedMap, localMap);
+    }
+    createSharedMapByLocalMap(localMap) {
+        const sharedMap = new Map();
+        this.syncLocalMapToSharedMap(localMap, sharedMap);
+        return sharedMap;
+    }
+    createSharedArrayByLocalArray(localArray) {
+        const sharedArray = new Array$1();
+        localArray.forEach(value => {
+            sharedArray.push([this.createSharedModelByLocalModel(value)]);
+        });
+        this.syncArray(sharedArray, localArray);
+        return sharedArray;
+    }
+    createSharedSlotByLocalSlot(localSlot) {
+        const sharedSlot = new Text();
+        sharedSlot.setAttribute('__schema__', [...localSlot.schema]);
+        let offset = 0;
+        localSlot.toDelta().forEach(i => {
+            let formats = {};
+            if (i.formats) {
+                i.formats.forEach(item => {
+                    formats[item[0].name] = item[1];
                 });
-            });
+            }
+            else {
+                formats = null;
+            }
+            if (typeof i.insert === 'string') {
+                sharedSlot.insert(offset, i.insert, formats);
+            }
+            else {
+                const sharedComponent = this.createSharedComponentByLocalComponent(i.insert);
+                sharedSlot.insertEmbed(offset, sharedComponent, formats);
+            }
+            offset += i.insert.length;
+        });
+        localSlot.getAttributes().forEach(item => {
+            sharedSlot.setAttribute(item[0].name, item[1]);
+        });
+        this.syncSlot(sharedSlot, localSlot);
+        return sharedSlot;
+    }
+    createLocalSlotBySharedSlot(sharedSlot) {
+        const delta = sharedSlot.toDelta();
+        const localSlot = new Slot(sharedSlot.getAttribute('__schema__') || []); // TODO 这里有潜在的问题
+        const attrs = sharedSlot.getAttributes();
+        Object.keys(attrs).forEach(key => {
+            const attribute = this.registry.getAttribute(key);
+            if (attribute) {
+                localSlot.setAttribute(attribute, attrs[key]);
+            }
+        });
+        for (const action of delta) {
+            if (action.insert) {
+                if (typeof action.insert === 'string') {
+                    const formats = remoteFormatsToLocal(this.registry, action.attributes);
+                    localSlot.insert(action.insert, formats);
+                }
+                else {
+                    const sharedComponent = action.insert;
+                    const component = this.createLocalComponentBySharedComponent(sharedComponent);
+                    localSlot.insert(component, remoteFormatsToLocal(this.registry, action.attributes));
+                }
+            }
+            else {
+                throw collaborateErrorFn('unexpected delta action.');
+            }
         }
-        else {
-            rootComponent.updateState(() => {
-                return root.get('state');
-            });
-            rootComponent.slots.clean();
-            slots.forEach(sharedSlot => {
-                const slot = this.createSlotBySharedSlot(sharedSlot);
-                this.syncSlotContent(sharedSlot.get('content'), slot);
-                this.syncSlotState(sharedSlot, slot);
-                rootComponent.slots.insert(slot);
-            });
+        this.syncSlot(sharedSlot, localSlot);
+        return localSlot;
+    }
+    createSharedModelByLocalModel(localModel) {
+        if (localModel instanceof Slot) {
+            return this.createSharedSlotByLocalSlot(localModel);
+        }
+        if (Array.isArray(localModel)) {
+            return this.createSharedArrayByLocalArray(localModel);
+        }
+        if (typeof localModel === 'object' && localModel !== null) {
+            return this.createSharedMapByLocalMap(localModel);
         }
-        this.syncComponentState(root, rootComponent);
-        this.syncComponentSlots(slots, rootComponent);
+        return localModel;
+    }
+    createLocalModelBySharedByModel(sharedModel) {
+        if (sharedModel instanceof Map) {
+            return this.createLocalMapBySharedMap(sharedModel);
+        }
+        if (sharedModel instanceof Array$1) {
+            return this.createLocalArrayBySharedArray(sharedModel);
+        }
+        if (sharedModel instanceof Text) {
+            return this.createLocalSlotBySharedSlot(sharedModel);
+        }
+        return sharedModel;
     }
     getAbstractSelection(position) {
         const anchorPosition = createAbsolutePositionFromRelativePosition(position.anchor, this.yDoc);
         const focusPosition = createAbsolutePositionFromRelativePosition(position.focus, this.yDoc);
         if (anchorPosition && focusPosition) {
-            const focusSlot = this.contentMap.get(focusPosition.type);
-            const anchorSlot = this.contentMap.get(anchorPosition.type);
+            const focusSlot = this.slotMap.get(focusPosition.type);
+            const anchorSlot = this.slotMap.get(anchorPosition.type);
             if (focusSlot && anchorSlot) {
                 return {
                     anchorSlot,
@@ -316,11 +408,11 @@ let Collaborate = class Collaborate {
     getRelativeCursorLocation() {
         const { anchorSlot, anchorOffset, focusSlot, focusOffset } = this.selection;
         if (anchorSlot) {
-            const anchorYText = this.contentMap.get(anchorSlot);
+            const anchorYText = this.slotMap.get(anchorSlot);
             if (anchorYText) {
                 const anchorPosition = createRelativePositionFromTypeIndex(anchorYText, anchorOffset);
                 if (focusSlot) {
-                    const focusYText = this.contentMap.get(focusSlot);
+                    const focusYText = this.slotMap.get(focusSlot);
                     if (focusYText) {
                         const focusPosition = createRelativePositionFromTypeIndex(focusYText, focusOffset);
                         return {
@@ -333,11 +425,10 @@ let Collaborate = class Collaborate {
         }
         return null;
     }
-    syncSlotContent(content, slot) {
-        this.contentMap.set(slot, content);
+    syncSlot(sharedSlot, localSlot) {
         const syncRemote = (ev, tr) => {
             this.runRemoteUpdate(tr, () => {
-                slot.retain(0);
+                localSlot.retain(0);
                 ev.keysChanged.forEach(key => {
                     const change = ev.keys.get(key);
                     if (!change) {
@@ -347,13 +438,13 @@ let Collaborate = class Collaborate {
                     if (updateType === 'update' || updateType === 'add') {
                         const attribute = this.registry.getAttribute(key);
                         if (attribute) {
-                            slot.setAttribute(attribute, content.getAttribute(key));
+                            localSlot.setAttribute(attribute, sharedSlot.getAttribute(key));
                         }
                     }
                     else if (updateType === 'delete') {
                         const attribute = this.registry.getAttribute(key);
                         if (attribute) {
-                            slot.removeAttribute(attribute);
+                            localSlot.removeAttribute(attribute);
                         }
                     }
                 });
@@ -362,54 +453,52 @@ let Collaborate = class Collaborate {
                         if (action.attributes) {
                             const formats = remoteFormatsToLocal(this.registry, action.attributes);
                             if (formats.length) {
-                                slot.retain(action.retain, formats);
+                                localSlot.retain(action.retain, formats);
                             }
-                            slot.retain(slot.index + action.retain);
+                            localSlot.retain(localSlot.index + action.retain);
                         }
                         else {
-                            slot.retain(action.retain);
+                            localSlot.retain(action.retain);
                         }
                     }
                     else if (action.insert) {
-                        const index = slot.index;
+                        const index = localSlot.index;
                         let length = 1;
                         if (typeof action.insert === 'string') {
                             length = action.insert.length;
-                            slot.insert(action.insert, remoteFormatsToLocal(this.registry, action.attributes));
+                            localSlot.insert(action.insert, remoteFormatsToLocal(this.registry, action.attributes));
                         }
                         else {
                             const sharedComponent = action.insert;
-                            const component = this.createComponentBySharedComponent(sharedComponent);
-                            this.syncComponentSlots(sharedComponent.get('slots'), component);
-                            this.syncComponentState(sharedComponent, component);
-                            slot.insert(component);
+                            const component = this.createLocalComponentBySharedComponent(sharedComponent);
+                            localSlot.insert(component);
                         }
                         if (this.selection.isSelected && tr.origin !== this.manager) {
-                            if (slot === this.selection.anchorSlot && this.selection.anchorOffset > index) {
-                                this.selection.setAnchor(slot, this.selection.anchorOffset + length);
+                            if (localSlot === this.selection.anchorSlot && this.selection.anchorOffset > index) {
+                                this.selection.setAnchor(localSlot, this.selection.anchorOffset + length);
                             }
-                            if (slot === this.selection.focusSlot && this.selection.focusOffset > index) {
-                                this.selection.setFocus(slot, this.selection.focusOffset + length);
+                            if (localSlot === this.selection.focusSlot && this.selection.focusOffset > index) {
+                                this.selection.setFocus(localSlot, this.selection.focusOffset + length);
                             }
                         }
                     }
                     else if (action.delete) {
-                        const index = slot.index;
-                        slot.delete(action.delete);
+                        const index = localSlot.index;
+                        localSlot.delete(action.delete);
                         if (this.selection.isSelected && tr.origin !== this.manager) {
-                            if (slot === this.selection.anchorSlot && this.selection.anchorOffset >= index) {
-                                this.selection.setAnchor(slot, this.selection.startOffset - action.delete);
+                            if (localSlot === this.selection.anchorSlot && this.selection.anchorOffset >= index) {
+                                this.selection.setAnchor(localSlot, this.selection.startOffset - action.delete);
                             }
-                            if (slot === this.selection.focusSlot && this.selection.focusOffset >= index) {
-                                this.selection.setFocus(slot, this.selection.focusOffset - action.delete);
+                            if (localSlot === this.selection.focusSlot && this.selection.focusOffset >= index) {
+                                this.selection.setFocus(localSlot, this.selection.focusOffset - action.delete);
                             }
                         }
                     }
                 });
             });
         };
-        content.observe(syncRemote);
-        const sub = slot.onContentChange.subscribe(actions => {
+        sharedSlot.observe(syncRemote);
+        const sub = localSlot.onContentChange.subscribe(actions => {
             this.runLocalUpdate(() => {
                 var _a;
                 let offset = 0;
@@ -428,170 +517,176 @@ let Collaborate = class Collaborate {
                                 }
                             });
                             if (length) {
-                                content.format(offset, action.offset, formats);
+                                sharedSlot.format(offset, action.offset, formats);
                             }
                         }
                         else {
                             offset = action.offset;
                         }
                     }
-                    else if (action.type === 'insert') {
-                        const delta = content.toDelta();
+                    else if (action.type === 'contentInsert') {
+                        const delta = sharedSlot.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 || {});
+                            sharedSlot.insert(offset, action.content, action.formats || {});
                         }
                         else {
                             length = 1;
-                            const sharedComponent = this.createSharedComponentByComponent(action.ref);
-                            content.insertEmbed(offset, sharedComponent, action.formats || {});
+                            const sharedComponent = this.createSharedComponentByLocalComponent(action.ref);
+                            sharedSlot.insertEmbed(offset, sharedComponent, action.formats || {});
                         }
                         if (isEmpty && offset === 0) {
-                            content.delete(content.length - 1, 1);
+                            sharedSlot.delete(sharedSlot.length - 1, 1);
                         }
                         offset += length;
                     }
                     else if (action.type === 'delete') {
-                        const delta = content.toDelta();
-                        if (content.length) {
-                            content.delete(offset, action.count);
+                        const delta = sharedSlot.toDelta();
+                        if (sharedSlot.length) {
+                            sharedSlot.delete(offset, action.count);
                         }
-                        if (content.length === 0) {
-                            content.insert(0, '\n', (_a = delta[0]) === null || _a === void 0 ? void 0 : _a.attributes);
+                        if (sharedSlot.length === 0) {
+                            sharedSlot.insert(0, '\n', (_a = delta[0]) === null || _a === void 0 ? void 0 : _a.attributes);
                         }
                     }
                     else if (action.type === 'attrSet') {
-                        content.setAttribute(action.name, action.value);
+                        sharedSlot.setAttribute(action.name, action.value);
                     }
-                    else if (action.type === 'attrRemove') {
-                        content.removeAttribute(action.name);
+                    else if (action.type === 'attrDelete') {
+                        sharedSlot.removeAttribute(action.name);
                     }
                 }
             });
         });
-        sub.add(slot.onChildComponentRemove.subscribe(components => {
-            components.forEach(c => {
-                this.cleanSubscriptionsByComponent(c);
-            });
-        }));
-        this.contentSyncCaches.set(slot, () => {
-            content.unobserve(syncRemote);
+        this.slotMap.set(localSlot, sharedSlot);
+        localSlot.__changeMarker__.destroyCallbacks.push(() => {
+            this.slotMap.delete(localSlot);
+            sharedSlot.unobserve(syncRemote);
             sub.unsubscribe();
         });
     }
-    syncSlotState(remoteSlot, slot) {
-        const syncRemote = (ev, tr) => {
-            this.runRemoteUpdate(tr, () => {
-                ev.keysChanged.forEach(key => {
-                    if (key === 'state') {
-                        const state = ev.target.get('state');
-                        slot.updateState(draft => {
-                            if (typeof draft === 'object' && draft !== null) {
-                                Object.assign(draft, state);
+    createSharedComponentByLocalComponent(component) {
+        const sharedComponent = new Map();
+        const sharedState = this.createSharedMapByLocalMap(component.state);
+        sharedComponent.set('name', component.name);
+        sharedComponent.set('state', sharedState);
+        return sharedComponent;
+    }
+    createLocalComponentBySharedComponent(yMap) {
+        const componentName = yMap.get('name');
+        const sharedState = yMap.get('state');
+        const state = this.createLocalMapBySharedMap(sharedState);
+        const instance = this.registry.createComponentByData(componentName, state);
+        if (instance) {
+            return instance;
+        }
+        throw collaborateErrorFn(`cannot find component factory \`${componentName}\`.`);
+    }
+    /**
+     * 双向同步数组
+     * @param sharedArray
+     * @param localArray
+     * @private
+     */
+    syncArray(sharedArray, localArray) {
+        const sub = localArray.__changeMarker__.onSelfChange.subscribe((actions) => {
+            this.runLocalUpdate(() => {
+                let index = 0;
+                for (const action of actions) {
+                    switch (action.type) {
+                        case 'retain':
+                            index = action.offset;
+                            break;
+                        case 'insert':
+                            {
+                                const ref = action.ref;
+                                if (!Array.isArray(ref)) {
+                                    throw collaborateErrorFn('The insertion action must have a reference value.');
+                                }
+                                const data = ref.map(item => {
+                                    return this.createSharedModelByLocalModel(item);
+                                });
+                                sharedArray.insert(index, data);
                             }
-                            else {
-                                return state;
+                            break;
+                        case 'delete':
+                            if (action.count <= 0) {
+                                break;
                             }
-                        });
+                            sharedArray.delete(index, action.count);
+                            break;
+                        case 'setIndex':
+                            sharedArray.delete(action.index, 1);
+                            sharedArray.insert(action.index, [this.createSharedModelByLocalModel(action.ref)]);
+                            break;
                     }
-                });
+                }
             });
-        };
-        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();
-        });
-    }
-    syncComponentSlots(remoteSlots, component) {
-        const slots = component.slots;
         const syncRemote = (ev, tr) => {
             this.runRemoteUpdate(tr, () => {
                 let index = 0;
-                slots.retain(index);
-                ev.delta.forEach(action => {
+                ev.delta.forEach((action) => {
                     if (Reflect.has(action, 'retain')) {
                         index += action.retain;
-                        slots.retain(index);
                     }
                     else if (action.insert) {
-                        action.insert.forEach(item => {
-                            const slot = this.createSlotBySharedSlot(item);
-                            slots.insert(slot);
-                            this.syncSlotContent(item.get('content'), slot);
-                            this.syncSlotState(item, slot);
-                            index++;
+                        const data = action.insert.map((item) => {
+                            return this.createLocalModelBySharedByModel(item);
                         });
+                        localArray.splice(index, 0, ...data);
+                        index += data.length;
                     }
                     else if (action.delete) {
-                        slots.retain(index);
-                        slots.delete(action.delete);
+                        localArray.splice(index, action.delete);
                     }
                 });
             });
         };
-        remoteSlots.observe(syncRemote);
-        const sub = slots.onChange.subscribe(operations => {
-            this.runLocalUpdate(() => {
-                const applyActions = operations.apply;
-                let index;
-                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);
+        sharedArray.observe(syncRemote);
+        localArray.__changeMarker__.destroyCallbacks.push(() => {
             sub.unsubscribe();
+            sharedArray.unobserve(syncRemote);
         });
     }
-    syncComponentState(remoteComponent, component) {
+    /**
+     * 双向同步对象
+     * @param sharedObject
+     * @param localObject
+     * @private
+     */
+    syncObject(sharedObject, localObject) {
         const syncRemote = (ev, tr) => {
             this.runRemoteUpdate(tr, () => {
-                ev.keysChanged.forEach(key => {
-                    if (key === 'state') {
-                        const state = ev.target.get('state');
-                        component.updateState(draft => {
-                            if (typeof draft === 'object' && draft !== null) {
-                                Object.assign(draft, state);
-                            }
-                            else {
-                                return state;
-                            }
-                        });
+                ev.changes.keys.forEach((item, key) => {
+                    if (item.action === 'add' || item.action === 'update') {
+                        const value = sharedObject.get(key);
+                        localObject[key] = this.createLocalModelBySharedByModel(value);
+                    }
+                    else {
+                        Reflect.deleteProperty(localObject, key);
                     }
                 });
             });
         };
-        remoteComponent.observe(syncRemote);
-        const sub = component.onStateChange.subscribe(change => {
+        sharedObject.observe(syncRemote);
+        const sub = localObject.__changeMarker__.onSelfChange.subscribe((actions) => {
             this.runLocalUpdate(() => {
-                remoteComponent.set('state', change.newState);
-            }, change.record);
+                for (const action of actions) {
+                    switch (action.type) {
+                        case 'propSet':
+                            sharedObject.set(action.key, this.createSharedModelByLocalModel(action.ref));
+                            break;
+                        case 'propDelete':
+                            sharedObject.delete(action.key);
+                            break;
+                    }
+                }
+            });
         });
-        this.componentStateSyncCaches.set(component, () => {
-            remoteComponent.unobserve(syncRemote);
+        localObject.__changeMarker__.destroyCallbacks.push(function () {
+            sharedObject.unobserve(syncRemote);
             sub.unsubscribe();
         });
     }
@@ -617,140 +712,6 @@ let Collaborate = class Collaborate {
         }
         this.updateFromRemote = false;
     }
-    createSharedComponentByComponent(component) {
-        const sharedComponent = new Map();
-        sharedComponent.set('state', component.state);
-        sharedComponent.set('name', component.name);
-        const sharedSlots = new Array();
-        sharedComponent.set('slots', sharedSlots);
-        component.slots.toArray().forEach(slot => {
-            const sharedSlot = this.createSharedSlotBySlot(slot);
-            sharedSlots.push([sharedSlot]);
-        });
-        this.syncComponentSlots(sharedSlots, component);
-        this.syncComponentState(sharedComponent, component);
-        return sharedComponent;
-    }
-    createSharedSlotBySlot(slot) {
-        const sharedSlot = new Map();
-        sharedSlot.set('schema', slot.schema);
-        sharedSlot.set('state', slot.state);
-        const sharedContent = new Text();
-        sharedSlot.set('content', sharedContent);
-        let offset = 0;
-        slot.toDelta().forEach(i => {
-            let formats = {};
-            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;
-        });
-        slot.getAttributes().forEach(item => {
-            sharedContent.setAttribute(item[0].name, item[1]);
-        });
-        this.syncSlotContent(sharedContent, slot);
-        this.syncSlotState(sharedSlot, slot);
-        return sharedSlot;
-    }
-    createComponentBySharedComponent(yMap) {
-        const sharedSlots = yMap.get('slots');
-        const slots = [];
-        sharedSlots.forEach(sharedSlot => {
-            const slot = this.createSlotBySharedSlot(sharedSlot);
-            slots.push(slot);
-        });
-        const name = yMap.get('name');
-        const state = yMap.get('state');
-        const instance = this.registry.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.syncSlotState(sharedSlot, slot);
-                this.syncSlotContent(sharedSlot.get('content'), slot);
-            });
-            return instance;
-        }
-        throw collaborateErrorFn(`cannot find component factory \`${name}\`.`);
-    }
-    createSlotBySharedSlot(sharedSlot) {
-        const content = sharedSlot.get('content');
-        const delta = content.toDelta();
-        const slot = this.registry.createSlot({
-            schema: sharedSlot.get('schema'),
-            state: sharedSlot.get('state'),
-            attributes: {},
-            formats: {},
-            content: []
-        });
-        const attrs = content.getAttributes();
-        Object.keys(attrs).forEach(key => {
-            const attribute = this.registry.getAttribute(key);
-            if (attribute) {
-                slot.setAttribute(attribute, attrs[key]);
-            }
-        });
-        for (const action of delta) {
-            if (action.insert) {
-                if (typeof action.insert === 'string') {
-                    const formats = remoteFormatsToLocal(this.registry, action.attributes);
-                    slot.insert(action.insert, formats);
-                }
-                else {
-                    const sharedComponent = action.insert;
-                    const component = this.createComponentBySharedComponent(sharedComponent);
-                    slot.insert(component, remoteFormatsToLocal(this.registry, action.attributes));
-                    this.syncComponentSlots(sharedComponent.get('slots'), component);
-                    this.syncComponentState(sharedComponent, component);
-                }
-            }
-            else {
-                throw collaborateErrorFn('unexpected delta action.');
-            }
-        }
-        return slot;
-    }
-    cleanSubscriptionsBySlot(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);
-            }
-        });
-    }
-    cleanSubscriptionsByComponent(component) {
-        [this.slotsSyncCaches.get(component), this.componentStateSyncCaches.get(component)].forEach(fn => {
-            if (fn) {
-                fn();
-            }
-        });
-        component.slots.toArray().forEach(slot => {
-            this.cleanSubscriptionsBySlot(slot);
-        });
-    }
 };
 Collaborate = __decorate([
     Injectable(),
@@ -775,16 +736,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 };