@textbus/collaborate 2.5.7 → 2.5.8

package/bundles/index.js

@@ -36,965 +36,966 @@ function __metadata(metadataKey, metadataValue) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
 }
 
-class CollaborateSelectionAwarenessDelegate {
-}
-exports.CollaborateCursor = class CollaborateCursor {
-    constructor(injector, nativeSelection, scheduler, selection, awarenessDelegate = null) {
-        this.injector = injector;
-        this.nativeSelection = nativeSelection;
-        this.scheduler = scheduler;
-        this.selection = selection;
-        this.awarenessDelegate = awarenessDelegate;
-        this.host = browser.createElement('div', {
-            styles: {
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                width: '100%',
-                height: '100%',
-                pointerEvents: 'none',
-                zIndex: 1
-            }
-        });
-        this.canvasContainer = browser.createElement('div', {
-            styles: {
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                width: '100%',
-                height: '100%',
-                overflow: 'hidden'
-            }
-        });
-        this.canvas = browser.createElement('canvas', {
-            styles: {
-                position: 'absolute',
-                opacity: 0.5,
-                left: 0,
-                top: 0,
-                width: '100%',
-                height: document.documentElement.clientHeight + 'px',
-                pointerEvents: 'none',
-            }
-        });
-        this.context = this.canvas.getContext('2d');
-        this.tooltips = browser.createElement('div', {
-            styles: {
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                width: '100%',
-                height: '100%',
-                pointerEvents: 'none',
-                fontSize: '12px',
-                zIndex: 10
-            }
-        });
-        this.onRectsChange = new stream.Subject();
-        this.subscription = new stream.Subscription();
-        this.currentSelection = [];
-        this.container = injector.get(browser.VIEW_CONTAINER);
-        this.canvasContainer.append(this.canvas);
-        this.host.append(this.canvasContainer, this.tooltips);
-        this.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.left, rect.top, rect.width, rect.height);
-                this.context.fill();
-                this.context.closePath();
-            }
-        }), stream.fromEvent(window, 'resize').subscribe(() => {
-            this.canvas.style.height = document.documentElement.clientHeight + 'px';
-            this.refresh();
-        }), this.scheduler.onDocChanged.subscribe(() => {
-            this.refresh();
-        }));
-    }
-    refresh() {
-        this.draw(this.currentSelection);
-    }
-    destroy() {
-        this.subscription.unsubscribe();
-    }
-    draw(paths) {
-        this.currentSelection = paths;
-        const containerRect = this.container.getBoundingClientRect();
-        this.canvas.style.top = containerRect.top * -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 = [];
-        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 = false;
-            if (this.awarenessDelegate) {
-                rects = this.awarenessDelegate.getRects({
-                    focusOffset,
-                    anchorOffset,
-                    focusSlot,
-                    anchorSlot
-                }, nativeRange);
-            }
-            if (!rects) {
-                rects = nativeRange.getClientRects();
-            }
-            const selectionRects = [];
-            for (let i = rects.length - 1; i >= 0; i--) {
-                const rect = rects[i];
-                selectionRects.push({
-                    id: item.id,
-                    color: item.color,
-                    username: item.username,
-                    left: rect.left - containerRect.left,
-                    top: rect.top,
-                    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 = browser.getLayoutRectByRange(cursorRange);
-            const rect = {
-                id: item.id,
-                username: item.username,
-                color: item.color,
-                left: cursorRect.left - containerRect.left,
-                top: cursorRect.top - containerRect.top,
-                width: 1,
-                height: cursorRect.height
-            };
-            if (rect.left < 0 || rect.top < 0 || rect.left > containerRect.width) {
-                return;
-            }
-            users.push(rect);
-        });
-        this.drawUserCursor(users);
-    }
-    drawUserCursor(rects) {
-        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.left + 'px',
-                top: rect.top + '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]);
-        }
-    }
-    getUserCursor(index) {
-        let child = this.tooltips.children[index];
-        if (child) {
-            const anchor = child.children[0];
-            return {
-                cursor: child,
-                anchor,
-                userTip: anchor.children[0]
-            };
-        }
-        const userTip = browser.createElement('span', {
-            styles: {
-                position: 'absolute',
-                left: '50%',
-                transform: 'translateX(-50%)',
-                marginBottom: '2px',
-                bottom: '100%',
-                whiteSpace: 'nowrap',
-                color: '#fff',
-                boxShadow: '0 1px 2px rgba(0,0,0,.1)',
-                opacity: 0.8,
-                borderRadius: '3px',
-                padding: '3px 5px',
-                pointerEvents: 'none',
-            }
-        });
-        const anchor = browser.createElement('span', {
-            styles: {
-                position: 'absolute',
-                top: '-2px',
-                left: '-2px',
-                width: '5px',
-                height: '5px',
-                borderRadius: '50%',
-                pointerEvents: 'auto',
-                pointer: 'cursor',
-            },
-            children: [userTip]
-        });
-        child = browser.createElement('span', {
-            styles: {
-                position: 'absolute',
-            },
-            children: [
-                anchor
-            ]
-        });
-        this.tooltips.append(child);
-        return {
-            cursor: child,
-            anchor,
-            userTip
-        };
-    }
-};
-exports.CollaborateCursor = __decorate([
-    di.Injectable(),
-    __param(4, di.Optional()),
-    __metadata("design:paramtypes", [di.Injector,
-        browser.SelectionBridge,
-        core.Scheduler,
-        core.Selection, Object])
+class CollaborateSelectionAwarenessDelegate {
+}
+exports.CollaborateCursor = class CollaborateCursor {
+    constructor(injector, nativeSelection, scheduler, selection, awarenessDelegate) {
+        this.injector = injector;
+        this.nativeSelection = nativeSelection;
+        this.scheduler = scheduler;
+        this.selection = selection;
+        this.awarenessDelegate = awarenessDelegate;
+        this.host = browser.createElement('div', {
+            styles: {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none',
+                zIndex: 1
+            }
+        });
+        this.canvasContainer = browser.createElement('div', {
+            styles: {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: '100%',
+                overflow: 'hidden'
+            }
+        });
+        this.canvas = browser.createElement('canvas', {
+            styles: {
+                position: 'absolute',
+                opacity: 0.5,
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: document.documentElement.clientHeight + 'px',
+                pointerEvents: 'none',
+            }
+        });
+        this.context = this.canvas.getContext('2d');
+        this.tooltips = browser.createElement('div', {
+            styles: {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none',
+                fontSize: '12px',
+                zIndex: 10
+            }
+        });
+        this.onRectsChange = new stream.Subject();
+        this.subscription = new stream.Subscription();
+        this.currentSelection = [];
+        this.container = injector.get(browser.VIEW_CONTAINER);
+        this.canvasContainer.append(this.canvas);
+        this.host.append(this.canvasContainer, this.tooltips);
+        this.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.left, rect.top, rect.width, rect.height);
+                this.context.fill();
+                this.context.closePath();
+            }
+        }), stream.fromEvent(window, 'resize').subscribe(() => {
+            this.canvas.style.height = document.documentElement.clientHeight + 'px';
+            this.refresh();
+        }), this.scheduler.onDocChanged.subscribe(() => {
+            this.refresh();
+        }));
+    }
+    refresh() {
+        this.draw(this.currentSelection);
+    }
+    destroy() {
+        this.subscription.unsubscribe();
+    }
+    draw(paths) {
+        this.currentSelection = paths;
+        const containerRect = this.container.getBoundingClientRect();
+        this.canvas.style.top = containerRect.top * -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 = [];
+        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 = false;
+            if (this.awarenessDelegate) {
+                rects = this.awarenessDelegate.getRects({
+                    focusOffset,
+                    anchorOffset,
+                    focusSlot,
+                    anchorSlot
+                }, nativeRange);
+            }
+            if (!rects) {
+                rects = nativeRange.getClientRects();
+            }
+            const selectionRects = [];
+            for (let i = rects.length - 1; i >= 0; i--) {
+                const rect = rects[i];
+                selectionRects.push({
+                    id: item.id,
+                    color: item.color,
+                    username: item.username,
+                    left: rect.left - containerRect.left,
+                    top: rect.top,
+                    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 = browser.getLayoutRectByRange(cursorRange);
+            const rect = {
+                id: item.id,
+                username: item.username,
+                color: item.color,
+                left: cursorRect.left - containerRect.left,
+                top: cursorRect.top - containerRect.top,
+                width: 1,
+                height: cursorRect.height
+            };
+            if (rect.left < 0 || rect.top < 0 || rect.left > containerRect.width) {
+                return;
+            }
+            users.push(rect);
+        });
+        this.drawUserCursor(users);
+    }
+    drawUserCursor(rects) {
+        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.left + 'px',
+                top: rect.top + '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]);
+        }
+    }
+    getUserCursor(index) {
+        let child = this.tooltips.children[index];
+        if (child) {
+            const anchor = child.children[0];
+            return {
+                cursor: child,
+                anchor,
+                userTip: anchor.children[0]
+            };
+        }
+        const userTip = browser.createElement('span', {
+            styles: {
+                position: 'absolute',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                marginBottom: '2px',
+                bottom: '100%',
+                whiteSpace: 'nowrap',
+                color: '#fff',
+                boxShadow: '0 1px 2px rgba(0,0,0,.1)',
+                opacity: 0.8,
+                borderRadius: '3px',
+                padding: '3px 5px',
+                pointerEvents: 'none',
+            }
+        });
+        const anchor = browser.createElement('span', {
+            styles: {
+                position: 'absolute',
+                top: '-2px',
+                left: '-2px',
+                width: '5px',
+                height: '5px',
+                borderRadius: '50%',
+                pointerEvents: 'auto',
+                pointer: 'cursor',
+            },
+            children: [userTip]
+        });
+        child = browser.createElement('span', {
+            styles: {
+                position: 'absolute',
+            },
+            children: [
+                anchor
+            ]
+        });
+        this.tooltips.append(child);
+        return {
+            cursor: child,
+            anchor,
+            userTip
+        };
+    }
+};
+exports.CollaborateCursor = __decorate([
+    di.Injectable(),
+    __param(4, di.Optional()),
+    __metadata("design:paramtypes", [di.Injector,
+        browser.SelectionBridge,
+        core.Scheduler,
+        core.Selection,
+        CollaborateSelectionAwarenessDelegate])
 ], exports.CollaborateCursor);
 
-function createUnknownComponent(factoryName, canInsertInlineComponent) {
-    const unknownComponent = core.defineComponent({
-        type: canInsertInlineComponent ? core.ContentType.InlineComponent : core.ContentType.BlockComponent,
-        name: 'UnknownComponent',
-        setup() {
-            console.error(`cannot find component factory \`${factoryName}\`.`);
-            return {
-                render() {
-                    return core.VElement.createElement('textbus-unknown-component', {
-                        style: {
-                            display: canInsertInlineComponent ? 'inline' : 'block',
-                            color: '#f00'
-                        }
-                    }, unknownComponent.name);
-                }
-            };
-        }
-    });
-    return unknownComponent;
+function createUnknownComponent(factoryName, canInsertInlineComponent) {
+    const unknownComponent = core.defineComponent({
+        type: canInsertInlineComponent ? core.ContentType.InlineComponent : core.ContentType.BlockComponent,
+        name: 'UnknownComponent',
+        setup() {
+            console.error(`cannot find component factory \`${factoryName}\`.`);
+            return {
+                render() {
+                    return core.VElement.createElement('textbus-unknown-component', {
+                        style: {
+                            display: canInsertInlineComponent ? 'inline' : 'block',
+                            color: '#f00'
+                        }
+                    }, unknownComponent.name);
+                }
+            };
+        }
+    });
+    return unknownComponent;
 }
 
-const collaborateErrorFn = core.makeError('Collaborate');
-class ContentMap {
-    constructor() {
-        this.slotAndYTextMap = new WeakMap();
-        this.yTextAndSLotMap = new WeakMap();
-    }
-    set(key, value) {
-        if (key instanceof core.Slot) {
-            this.slotAndYTextMap.set(key, value);
-            this.yTextAndSLotMap.set(value, key);
-        }
-        else {
-            this.slotAndYTextMap.set(value, key);
-            this.yTextAndSLotMap.set(key, value);
-        }
-    }
-    get(key) {
-        if (key instanceof core.Slot) {
-            return this.slotAndYTextMap.get(key) || null;
-        }
-        return this.yTextAndSLotMap.get(key) || null;
-    }
-    delete(key) {
-        if (key instanceof core.Slot) {
-            const v = this.slotAndYTextMap.get(key);
-            this.slotAndYTextMap.delete(key);
-            if (v) {
-                this.yTextAndSLotMap.delete(v);
-            }
-        }
-        else {
-            const v = this.yTextAndSLotMap.get(key);
-            this.yTextAndSLotMap.delete(key);
-            if (v) {
-                this.slotAndYTextMap.delete(v);
-            }
-        }
-    }
-}
-exports.Collaborate = class Collaborate {
-    constructor(stackSize, rootComponentRef, collaborateCursor, controller, scheduler, translator, registry, selection, starter) {
-        this.stackSize = stackSize;
-        this.rootComponentRef = rootComponentRef;
-        this.collaborateCursor = collaborateCursor;
-        this.controller = controller;
-        this.scheduler = scheduler;
-        this.translator = translator;
-        this.registry = registry;
-        this.selection = selection;
-        this.starter = starter;
-        this.yDoc = new yjs.Doc();
-        this.backEvent = new stream.Subject();
-        this.forwardEvent = new stream.Subject();
-        this.changeEvent = new stream.Subject();
-        this.pushEvent = new stream.Subject();
-        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 stream.Subject();
-        this.selectionChangeEvent = new stream.Subject();
-        this.contentMap = new ContentMap();
-        this.updateRemoteActions = [];
-        this.noRecord = {};
-        this.onSelectionChange = this.selectionChangeEvent.asObservable().pipe(stream.delay());
-        this.onBack = this.backEvent.asObservable();
-        this.onForward = this.forwardEvent.asObservable();
-        this.onChange = this.changeEvent.asObservable();
-        this.onPush = this.pushEvent.asObservable();
-        this.onLocalChangesApplied = this.localChangesAppliedEvent.asObservable();
-    }
-    get canBack() {
-        var _a;
-        return ((_a = this.manager) === null || _a === void 0 ? void 0 : _a.canUndo()) || false;
-    }
-    get canForward() {
-        var _a;
-        return ((_a = this.manager) === null || _a === void 0 ? void 0 : _a.canRedo()) || false;
-    }
-    listen() {
-        const root = this.yDoc.getMap('RootComponent');
-        const rootComponent = this.rootComponentRef.component;
-        this.manager = new yjs.UndoManager(root, {
-            trackedOrigins: new Set([this.yDoc])
-        });
-        const cursorKey = 'cursor-position';
-        this.manager.on('stack-item-added', event => {
-            event.stackItem.meta.set(cursorKey, this.getRelativeCursorLocation());
-            if (this.manager.undoStack.length > this.stackSize) {
-                this.manager.undoStack.shift();
-            }
-            if (event.origin === this.yDoc) {
-                this.pushEvent.next();
-            }
-            this.changeEvent.next();
-        });
-        this.manager.on('stack-item-popped', event => {
-            const position = event.stackItem.meta.get(cursorKey);
-            if (position) {
-                this.restoreCursorLocation(position);
-            }
-        });
-        this.subscriptions.push(this.selection.onChange.subscribe(() => {
-            const paths = this.selection.getPaths();
-            this.selectionChangeEvent.next(paths);
-        }), this.scheduler.onDocChanged.pipe(stream.map(item => {
-            return item.filter(i => {
-                return i.from !== core.ChangeOrigin.Remote;
-            });
-        }), stream.filter(item => {
-            return item.length;
-        })).subscribe(() => {
-            const updates = [];
-            let update = null;
-            for (const item of this.updateRemoteActions) {
-                if (!update) {
-                    update = {
-                        record: item.record,
-                        actions: []
-                    };
-                    updates.push(update);
-                }
-                if (update.record === item.record) {
-                    update.actions.push(item.action);
-                }
-                else {
-                    update = {
-                        record: item.record,
-                        actions: [item.action]
-                    };
-                    updates.push(update);
-                }
-            }
-            this.updateRemoteActions = [];
-            for (const item of updates) {
-                this.yDoc.transact(() => {
-                    item.actions.forEach(fn => {
-                        fn();
-                    });
-                }, item.record ? this.yDoc : this.noRecord);
-            }
-            this.localChangesAppliedEvent.next();
-        }));
-        this.syncRootComponent(root, rootComponent);
-    }
-    updateRemoteSelection(paths) {
-        this.collaborateCursor.draw(paths);
-    }
-    back() {
-        var _a;
-        if (this.canBack) {
-            (_a = this.manager) === null || _a === void 0 ? void 0 : _a.undo();
-            this.backEvent.next();
-        }
-    }
-    forward() {
-        var _a;
-        if (this.canForward) {
-            (_a = this.manager) === null || _a === void 0 ? void 0 : _a.redo();
-            this.forwardEvent.next();
-        }
-    }
-    clear() {
-        var _a;
-        (_a = this.manager) === null || _a === void 0 ? void 0 : _a.clear();
-        this.changeEvent.next();
-    }
-    destroy() {
-        var _a;
-        this.subscriptions.forEach(i => i.unsubscribe());
-        this.collaborateCursor.destroy();
-        (_a = this.manager) === null || _a === void 0 ? void 0 : _a.destroy();
-    }
-    syncRootComponent(root, rootComponent) {
-        let slots = root.get('slots');
-        if (!slots) {
-            slots = new yjs.Array();
-            rootComponent.slots.toArray().forEach(i => {
-                const sharedSlot = this.createSharedSlotBySlot(i);
-                slots.push([sharedSlot]);
-            });
-            this.yDoc.transact(() => {
-                root.set('state', rootComponent.state);
-                root.set('slots', slots);
-            });
-        }
-        else if (slots.length === 0) {
-            rootComponent.updateState(() => {
-                return root.get('state');
-            });
-            this.yDoc.transact(() => {
-                rootComponent.slots.toArray().forEach(i => {
-                    const sharedSlot = this.createSharedSlotBySlot(i);
-                    slots.push([sharedSlot]);
-                });
-            });
-        }
-        else {
-            rootComponent.updateState(() => {
-                return root.get('state');
-            });
-            rootComponent.slots.clean();
-            slots.forEach(sharedSlot => {
-                const slot = this.createSlotBySharedSlot(sharedSlot);
-                this.syncContent(sharedSlot.get('content'), slot);
-                this.syncSlot(sharedSlot, slot);
-                rootComponent.slots.insert(slot);
-            });
-        }
-        this.syncComponent(root, rootComponent);
-        this.syncSlots(slots, rootComponent);
-    }
-    restoreCursorLocation(position) {
-        const anchorPosition = yjs.createAbsolutePositionFromRelativePosition(position.anchor, this.yDoc);
-        const focusPosition = yjs.createAbsolutePositionFromRelativePosition(position.focus, this.yDoc);
-        if (anchorPosition && focusPosition) {
-            const focusSlot = this.contentMap.get(focusPosition.type);
-            const anchorSlot = this.contentMap.get(anchorPosition.type);
-            if (focusSlot && anchorSlot) {
-                this.selection.setBaseAndExtent(anchorSlot, anchorPosition.index, focusSlot, focusPosition.index);
-                return;
-            }
-        }
-        this.selection.unSelect();
-    }
-    getRelativeCursorLocation() {
-        const { anchorSlot, anchorOffset, focusSlot, focusOffset } = this.selection;
-        if (anchorSlot) {
-            const anchorYText = this.contentMap.get(anchorSlot);
-            if (anchorYText) {
-                const anchorPosition = yjs.createRelativePositionFromTypeIndex(anchorYText, anchorOffset);
-                if (focusSlot) {
-                    const focusYText = this.contentMap.get(focusSlot);
-                    if (focusYText) {
-                        const focusPosition = yjs.createRelativePositionFromTypeIndex(focusYText, focusOffset);
-                        return {
-                            focus: focusPosition,
-                            anchor: anchorPosition
-                        };
-                    }
-                }
-            }
-        }
-        return null;
-    }
-    syncContent(content, slot) {
-        this.contentMap.set(slot, content);
-        const syncRemote = (ev, tr) => {
-            this.runRemoteUpdate(tr, () => {
-                slot.retain(0);
-                ev.delta.forEach(action => {
-                    if (Reflect.has(action, 'retain')) {
-                        if (action.attributes) {
-                            const formats = remoteFormatsToLocal(this.registry, action.attributes);
-                            if (formats.length) {
-                                slot.retain(action.retain, formats);
-                            }
-                            slot.retain(slot.index + action.retain);
-                        }
-                        else {
-                            slot.retain(action.retain);
-                        }
-                    }
-                    else if (action.insert) {
-                        const index = slot.index;
-                        let length = 1;
-                        if (typeof action.insert === 'string') {
-                            length = action.insert.length;
-                            slot.insert(action.insert, remoteFormatsToLocal(this.registry, action.attributes));
-                        }
-                        else {
-                            const sharedComponent = action.insert;
-                            const canInsertInlineComponent = slot.schema.includes(core.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.anchorSlot && this.selection.anchorOffset > index) {
-                                this.selection.setAnchor(slot, this.selection.anchorOffset + length);
-                            }
-                            if (slot === this.selection.focusSlot && this.selection.focusOffset > index) {
-                                this.selection.setFocus(slot, this.selection.focusOffset + length);
-                            }
-                        }
-                    }
-                    else if (action.delete) {
-                        const index = slot.index;
-                        slot.retain(slot.index);
-                        slot.delete(action.delete);
-                        if (this.selection.isSelected) {
-                            if (slot === this.selection.anchorSlot && this.selection.anchorOffset >= index) {
-                                this.selection.setAnchor(slot, this.selection.startOffset - action.delete);
-                            }
-                            if (slot === this.selection.focusSlot && this.selection.focusOffset >= index) {
-                                this.selection.setFocus(slot, this.selection.focusOffset - action.delete);
-                            }
-                        }
-                    }
-                    else if (action.attributes) {
-                        slot.updateState(draft => {
-                            if (typeof draft === 'object' && draft !== null) {
-                                Object.assign(draft, action.attributes);
-                            }
-                            else {
-                                return action.attributes;
-                            }
-                        });
-                    }
-                });
-            });
-        };
-        content.observe(syncRemote);
-        const sub = slot.onContentChange.subscribe(actions => {
-            this.runLocalUpdate(() => {
-                var _a;
-                let offset = 0;
-                let length = 0;
-                for (const action of actions) {
-                    if (action.type === 'retain') {
-                        const formats = action.formats;
-                        if (formats) {
-                            const keys = Object.keys(formats);
-                            let length = keys.length;
-                            keys.forEach(key => {
-                                const formatter = this.registry.getFormatter(key);
-                                if (!formatter) {
-                                    length--;
-                                    Reflect.deleteProperty(formats, key);
-                                }
-                            });
-                            if (length) {
-                                content.format(offset, action.offset, formats);
-                            }
-                        }
-                        else {
-                            offset = action.offset;
-                        }
-                    }
-                    else if (action.type === 'insert') {
-                        const delta = content.toDelta();
-                        const isEmpty = delta.length === 1 && delta[0].insert === core.Slot.emptyPlaceholder;
-                        if (typeof action.content === 'string') {
-                            length = action.content.length;
-                            content.insert(offset, action.content, action.formats || {});
-                        }
-                        else {
-                            length = 1;
-                            const sharedComponent = this.createSharedComponentByComponent(action.ref);
-                            content.insertEmbed(offset, sharedComponent, action.formats || {});
-                        }
-                        if (isEmpty && offset === 0) {
-                            content.delete(content.length - 1, 1);
-                        }
-                        offset += length;
-                    }
-                    else if (action.type === 'delete') {
-                        const delta = content.toDelta();
-                        if (content.length) {
-                            content.delete(offset, action.count);
-                        }
-                        if (content.length === 0) {
-                            content.insert(0, '\n', (_a = delta[0]) === null || _a === void 0 ? void 0 : _a.attributes);
-                        }
-                    }
-                }
-            });
-        });
-        sub.add(slot.onChildComponentRemove.subscribe(components => {
-            components.forEach(c => {
-                this.cleanSubscriptionsByComponent(c);
-            });
-        }));
-        this.contentSyncCaches.set(slot, () => {
-            content.unobserve(syncRemote);
-            sub.unsubscribe();
-        });
-    }
-    syncSlot(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);
-                            }
-                            else {
-                                return state;
-                            }
-                        });
-                    }
-                });
-            });
-        };
-        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();
-        });
-    }
-    syncSlots(remoteSlots, component) {
-        const slots = component.slots;
-        const syncRemote = (ev, tr) => {
-            this.runRemoteUpdate(tr, () => {
-                let index = 0;
-                slots.retain(index);
-                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.syncContent(item.get('content'), slot);
-                            this.syncSlot(item, slot);
-                            index++;
-                        });
-                    }
-                    else if (action.delete) {
-                        slots.retain(index);
-                        slots.delete(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);
-            sub.unsubscribe();
-        });
-    }
-    syncComponent(remoteComponent, component) {
-        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;
-                            }
-                        });
-                    }
-                });
-            });
-        };
-        remoteComponent.observe(syncRemote);
-        const sub = component.onStateChange.subscribe(change => {
-            this.runLocalUpdate(() => {
-                remoteComponent.set('state', change.newState);
-            }, change.record);
-        });
-        this.componentStateSyncCaches.set(component, () => {
-            remoteComponent.unobserve(syncRemote);
-            sub.unsubscribe();
-        });
-    }
-    runLocalUpdate(fn, record = true) {
-        if (this.updateFromRemote || this.controller.readonly) {
-            return;
-        }
-        this.updateRemoteActions.push({
-            record,
-            action: fn
-        });
-    }
-    runRemoteUpdate(tr, fn) {
-        if (tr.origin === this.yDoc) {
-            return;
-        }
-        this.updateFromRemote = true;
-        if (tr.origin === this.manager) {
-            this.scheduler.historyApplyTransact(fn);
-        }
-        else {
-            this.scheduler.remoteUpdateTransact(fn);
-        }
-        this.updateFromRemote = false;
-    }
-    createSharedComponentByComponent(component) {
-        const sharedComponent = new yjs.Map();
-        sharedComponent.set('state', component.state);
-        sharedComponent.set('name', component.name);
-        const sharedSlots = new yjs.Array();
-        sharedComponent.set('slots', sharedSlots);
-        component.slots.toArray().forEach(slot => {
-            const sharedSlot = this.createSharedSlotBySlot(slot);
-            sharedSlots.push([sharedSlot]);
-        });
-        this.syncSlots(sharedSlots, component);
-        this.syncComponent(sharedComponent, component);
-        return sharedComponent;
-    }
-    createSharedSlotBySlot(slot) {
-        const sharedSlot = new yjs.Map();
-        sharedSlot.set('schema', slot.schema);
-        sharedSlot.set('state', slot.state);
-        const sharedContent = new yjs.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;
-        });
-        this.syncContent(sharedContent, slot);
-        this.syncSlot(sharedSlot, slot);
-        return sharedSlot;
-    }
-    createComponentBySharedComponent(yMap, canInsertInlineComponent) {
-        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.translator.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.syncSlot(sharedSlot, slot);
-                this.syncContent(sharedSlot.get('content'), slot);
-            });
-            return instance;
-        }
-        return createUnknownComponent(name, canInsertInlineComponent).createInstance(this.starter);
-    }
-    createSlotBySharedSlot(sharedSlot) {
-        const content = sharedSlot.get('content');
-        const delta = content.toDelta();
-        const slot = this.translator.createSlot({
-            schema: sharedSlot.get('schema'),
-            state: sharedSlot.get('state'),
-            formats: {},
-            content: []
-        });
-        for (const action of delta) {
-            if (action.insert) {
-                if (typeof action.insert === 'string') {
-                    const blockFormats = [];
-                    const formats = remoteFormatsToLocal(this.registry, action.attributes).filter(item => {
-                        if (item[0].type === core.FormatType.Block) {
-                            blockFormats.push(item);
-                            return false;
-                        }
-                        return true;
-                    });
-                    slot.insert(action.insert, formats);
-                    const index = slot.index;
-                    blockFormats.forEach(item => {
-                        slot.setAttribute(item[0], item[1]);
-                    });
-                    slot.retain(index);
-                }
-                else {
-                    const sharedComponent = action.insert;
-                    const canInsertInlineComponent = slot.schema.includes(core.ContentType.InlineComponent);
-                    const component = this.createComponentBySharedComponent(sharedComponent, canInsertInlineComponent);
-                    slot.insert(component, remoteFormatsToLocal(this.registry, action.attributes));
-                    this.syncSlots(sharedComponent.get('slots'), component);
-                    this.syncComponent(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);
-        });
-    }
-};
-exports.Collaborate = __decorate([
-    di.Injectable(),
-    __param(0, di.Inject(core.HISTORY_STACK_SIZE)),
-    __metadata("design:paramtypes", [Number, core.RootComponentRef,
-        exports.CollaborateCursor,
-        core.Controller,
-        core.Scheduler,
-        core.Translator,
-        core.Registry,
-        core.Selection,
-        core.Starter])
-], exports.Collaborate);
-function remoteFormatsToLocal(registry, attrs) {
-    const formats = [];
-    if (attrs) {
-        Object.keys(attrs).forEach(key => {
-            const formatter = registry.getFormatter(key);
-            if (formatter) {
-                formats.push([formatter, attrs[key]]);
-            }
-        });
-    }
-    return formats;
+const collaborateErrorFn = core.makeError('Collaborate');
+class ContentMap {
+    constructor() {
+        this.slotAndYTextMap = new WeakMap();
+        this.yTextAndSLotMap = new WeakMap();
+    }
+    set(key, value) {
+        if (key instanceof core.Slot) {
+            this.slotAndYTextMap.set(key, value);
+            this.yTextAndSLotMap.set(value, key);
+        }
+        else {
+            this.slotAndYTextMap.set(value, key);
+            this.yTextAndSLotMap.set(key, value);
+        }
+    }
+    get(key) {
+        if (key instanceof core.Slot) {
+            return this.slotAndYTextMap.get(key) || null;
+        }
+        return this.yTextAndSLotMap.get(key) || null;
+    }
+    delete(key) {
+        if (key instanceof core.Slot) {
+            const v = this.slotAndYTextMap.get(key);
+            this.slotAndYTextMap.delete(key);
+            if (v) {
+                this.yTextAndSLotMap.delete(v);
+            }
+        }
+        else {
+            const v = this.yTextAndSLotMap.get(key);
+            this.yTextAndSLotMap.delete(key);
+            if (v) {
+                this.slotAndYTextMap.delete(v);
+            }
+        }
+    }
+}
+exports.Collaborate = class Collaborate {
+    constructor(stackSize, rootComponentRef, collaborateCursor, controller, scheduler, translator, registry, selection, starter) {
+        this.stackSize = stackSize;
+        this.rootComponentRef = rootComponentRef;
+        this.collaborateCursor = collaborateCursor;
+        this.controller = controller;
+        this.scheduler = scheduler;
+        this.translator = translator;
+        this.registry = registry;
+        this.selection = selection;
+        this.starter = starter;
+        this.yDoc = new yjs.Doc();
+        this.backEvent = new stream.Subject();
+        this.forwardEvent = new stream.Subject();
+        this.changeEvent = new stream.Subject();
+        this.pushEvent = new stream.Subject();
+        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 stream.Subject();
+        this.selectionChangeEvent = new stream.Subject();
+        this.contentMap = new ContentMap();
+        this.updateRemoteActions = [];
+        this.noRecord = {};
+        this.onSelectionChange = this.selectionChangeEvent.asObservable().pipe(stream.delay());
+        this.onBack = this.backEvent.asObservable();
+        this.onForward = this.forwardEvent.asObservable();
+        this.onChange = this.changeEvent.asObservable();
+        this.onPush = this.pushEvent.asObservable();
+        this.onLocalChangesApplied = this.localChangesAppliedEvent.asObservable();
+    }
+    get canBack() {
+        var _a;
+        return ((_a = this.manager) === null || _a === void 0 ? void 0 : _a.canUndo()) || false;
+    }
+    get canForward() {
+        var _a;
+        return ((_a = this.manager) === null || _a === void 0 ? void 0 : _a.canRedo()) || false;
+    }
+    listen() {
+        const root = this.yDoc.getMap('RootComponent');
+        const rootComponent = this.rootComponentRef.component;
+        this.manager = new yjs.UndoManager(root, {
+            trackedOrigins: new Set([this.yDoc])
+        });
+        const cursorKey = 'cursor-position';
+        this.manager.on('stack-item-added', event => {
+            event.stackItem.meta.set(cursorKey, this.getRelativeCursorLocation());
+            if (this.manager.undoStack.length > this.stackSize) {
+                this.manager.undoStack.shift();
+            }
+            if (event.origin === this.yDoc) {
+                this.pushEvent.next();
+            }
+            this.changeEvent.next();
+        });
+        this.manager.on('stack-item-popped', event => {
+            const position = event.stackItem.meta.get(cursorKey);
+            if (position) {
+                this.restoreCursorLocation(position);
+            }
+        });
+        this.subscriptions.push(this.selection.onChange.subscribe(() => {
+            const paths = this.selection.getPaths();
+            this.selectionChangeEvent.next(paths);
+        }), this.scheduler.onDocChanged.pipe(stream.map(item => {
+            return item.filter(i => {
+                return i.from !== core.ChangeOrigin.Remote;
+            });
+        }), stream.filter(item => {
+            return item.length;
+        })).subscribe(() => {
+            const updates = [];
+            let update = null;
+            for (const item of this.updateRemoteActions) {
+                if (!update) {
+                    update = {
+                        record: item.record,
+                        actions: []
+                    };
+                    updates.push(update);
+                }
+                if (update.record === item.record) {
+                    update.actions.push(item.action);
+                }
+                else {
+                    update = {
+                        record: item.record,
+                        actions: [item.action]
+                    };
+                    updates.push(update);
+                }
+            }
+            this.updateRemoteActions = [];
+            for (const item of updates) {
+                this.yDoc.transact(() => {
+                    item.actions.forEach(fn => {
+                        fn();
+                    });
+                }, item.record ? this.yDoc : this.noRecord);
+            }
+            this.localChangesAppliedEvent.next();
+        }));
+        this.syncRootComponent(root, rootComponent);
+    }
+    updateRemoteSelection(paths) {
+        this.collaborateCursor.draw(paths);
+    }
+    back() {
+        var _a;
+        if (this.canBack) {
+            (_a = this.manager) === null || _a === void 0 ? void 0 : _a.undo();
+            this.backEvent.next();
+        }
+    }
+    forward() {
+        var _a;
+        if (this.canForward) {
+            (_a = this.manager) === null || _a === void 0 ? void 0 : _a.redo();
+            this.forwardEvent.next();
+        }
+    }
+    clear() {
+        var _a;
+        (_a = this.manager) === null || _a === void 0 ? void 0 : _a.clear();
+        this.changeEvent.next();
+    }
+    destroy() {
+        var _a;
+        this.subscriptions.forEach(i => i.unsubscribe());
+        this.collaborateCursor.destroy();
+        (_a = this.manager) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    syncRootComponent(root, rootComponent) {
+        let slots = root.get('slots');
+        if (!slots) {
+            slots = new yjs.Array();
+            rootComponent.slots.toArray().forEach(i => {
+                const sharedSlot = this.createSharedSlotBySlot(i);
+                slots.push([sharedSlot]);
+            });
+            this.yDoc.transact(() => {
+                root.set('state', rootComponent.state);
+                root.set('slots', slots);
+            });
+        }
+        else if (slots.length === 0) {
+            rootComponent.updateState(() => {
+                return root.get('state');
+            });
+            this.yDoc.transact(() => {
+                rootComponent.slots.toArray().forEach(i => {
+                    const sharedSlot = this.createSharedSlotBySlot(i);
+                    slots.push([sharedSlot]);
+                });
+            });
+        }
+        else {
+            rootComponent.updateState(() => {
+                return root.get('state');
+            });
+            rootComponent.slots.clean();
+            slots.forEach(sharedSlot => {
+                const slot = this.createSlotBySharedSlot(sharedSlot);
+                this.syncContent(sharedSlot.get('content'), slot);
+                this.syncSlot(sharedSlot, slot);
+                rootComponent.slots.insert(slot);
+            });
+        }
+        this.syncComponent(root, rootComponent);
+        this.syncSlots(slots, rootComponent);
+    }
+    restoreCursorLocation(position) {
+        const anchorPosition = yjs.createAbsolutePositionFromRelativePosition(position.anchor, this.yDoc);
+        const focusPosition = yjs.createAbsolutePositionFromRelativePosition(position.focus, this.yDoc);
+        if (anchorPosition && focusPosition) {
+            const focusSlot = this.contentMap.get(focusPosition.type);
+            const anchorSlot = this.contentMap.get(anchorPosition.type);
+            if (focusSlot && anchorSlot) {
+                this.selection.setBaseAndExtent(anchorSlot, anchorPosition.index, focusSlot, focusPosition.index);
+                return;
+            }
+        }
+        this.selection.unSelect();
+    }
+    getRelativeCursorLocation() {
+        const { anchorSlot, anchorOffset, focusSlot, focusOffset } = this.selection;
+        if (anchorSlot) {
+            const anchorYText = this.contentMap.get(anchorSlot);
+            if (anchorYText) {
+                const anchorPosition = yjs.createRelativePositionFromTypeIndex(anchorYText, anchorOffset);
+                if (focusSlot) {
+                    const focusYText = this.contentMap.get(focusSlot);
+                    if (focusYText) {
+                        const focusPosition = yjs.createRelativePositionFromTypeIndex(focusYText, focusOffset);
+                        return {
+                            focus: focusPosition,
+                            anchor: anchorPosition
+                        };
+                    }
+                }
+            }
+        }
+        return null;
+    }
+    syncContent(content, slot) {
+        this.contentMap.set(slot, content);
+        const syncRemote = (ev, tr) => {
+            this.runRemoteUpdate(tr, () => {
+                slot.retain(0);
+                ev.delta.forEach(action => {
+                    if (Reflect.has(action, 'retain')) {
+                        if (action.attributes) {
+                            const formats = remoteFormatsToLocal(this.registry, action.attributes);
+                            if (formats.length) {
+                                slot.retain(action.retain, formats);
+                            }
+                            slot.retain(slot.index + action.retain);
+                        }
+                        else {
+                            slot.retain(action.retain);
+                        }
+                    }
+                    else if (action.insert) {
+                        const index = slot.index;
+                        let length = 1;
+                        if (typeof action.insert === 'string') {
+                            length = action.insert.length;
+                            slot.insert(action.insert, remoteFormatsToLocal(this.registry, action.attributes));
+                        }
+                        else {
+                            const sharedComponent = action.insert;
+                            const canInsertInlineComponent = slot.schema.includes(core.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.anchorSlot && this.selection.anchorOffset > index) {
+                                this.selection.setAnchor(slot, this.selection.anchorOffset + length);
+                            }
+                            if (slot === this.selection.focusSlot && this.selection.focusOffset > index) {
+                                this.selection.setFocus(slot, this.selection.focusOffset + length);
+                            }
+                        }
+                    }
+                    else if (action.delete) {
+                        const index = slot.index;
+                        slot.retain(slot.index);
+                        slot.delete(action.delete);
+                        if (this.selection.isSelected) {
+                            if (slot === this.selection.anchorSlot && this.selection.anchorOffset >= index) {
+                                this.selection.setAnchor(slot, this.selection.startOffset - action.delete);
+                            }
+                            if (slot === this.selection.focusSlot && this.selection.focusOffset >= index) {
+                                this.selection.setFocus(slot, this.selection.focusOffset - action.delete);
+                            }
+                        }
+                    }
+                    else if (action.attributes) {
+                        slot.updateState(draft => {
+                            if (typeof draft === 'object' && draft !== null) {
+                                Object.assign(draft, action.attributes);
+                            }
+                            else {
+                                return action.attributes;
+                            }
+                        });
+                    }
+                });
+            });
+        };
+        content.observe(syncRemote);
+        const sub = slot.onContentChange.subscribe(actions => {
+            this.runLocalUpdate(() => {
+                var _a;
+                let offset = 0;
+                let length = 0;
+                for (const action of actions) {
+                    if (action.type === 'retain') {
+                        const formats = action.formats;
+                        if (formats) {
+                            const keys = Object.keys(formats);
+                            let length = keys.length;
+                            keys.forEach(key => {
+                                const formatter = this.registry.getFormatter(key);
+                                if (!formatter) {
+                                    length--;
+                                    Reflect.deleteProperty(formats, key);
+                                }
+                            });
+                            if (length) {
+                                content.format(offset, action.offset, formats);
+                            }
+                        }
+                        else {
+                            offset = action.offset;
+                        }
+                    }
+                    else if (action.type === 'insert') {
+                        const delta = content.toDelta();
+                        const isEmpty = delta.length === 1 && delta[0].insert === core.Slot.emptyPlaceholder;
+                        if (typeof action.content === 'string') {
+                            length = action.content.length;
+                            content.insert(offset, action.content, action.formats || {});
+                        }
+                        else {
+                            length = 1;
+                            const sharedComponent = this.createSharedComponentByComponent(action.ref);
+                            content.insertEmbed(offset, sharedComponent, action.formats || {});
+                        }
+                        if (isEmpty && offset === 0) {
+                            content.delete(content.length - 1, 1);
+                        }
+                        offset += length;
+                    }
+                    else if (action.type === 'delete') {
+                        const delta = content.toDelta();
+                        if (content.length) {
+                            content.delete(offset, action.count);
+                        }
+                        if (content.length === 0) {
+                            content.insert(0, '\n', (_a = delta[0]) === null || _a === void 0 ? void 0 : _a.attributes);
+                        }
+                    }
+                }
+            });
+        });
+        sub.add(slot.onChildComponentRemove.subscribe(components => {
+            components.forEach(c => {
+                this.cleanSubscriptionsByComponent(c);
+            });
+        }));
+        this.contentSyncCaches.set(slot, () => {
+            content.unobserve(syncRemote);
+            sub.unsubscribe();
+        });
+    }
+    syncSlot(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);
+                            }
+                            else {
+                                return state;
+                            }
+                        });
+                    }
+                });
+            });
+        };
+        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();
+        });
+    }
+    syncSlots(remoteSlots, component) {
+        const slots = component.slots;
+        const syncRemote = (ev, tr) => {
+            this.runRemoteUpdate(tr, () => {
+                let index = 0;
+                slots.retain(index);
+                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.syncContent(item.get('content'), slot);
+                            this.syncSlot(item, slot);
+                            index++;
+                        });
+                    }
+                    else if (action.delete) {
+                        slots.retain(index);
+                        slots.delete(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);
+            sub.unsubscribe();
+        });
+    }
+    syncComponent(remoteComponent, component) {
+        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;
+                            }
+                        });
+                    }
+                });
+            });
+        };
+        remoteComponent.observe(syncRemote);
+        const sub = component.onStateChange.subscribe(change => {
+            this.runLocalUpdate(() => {
+                remoteComponent.set('state', change.newState);
+            }, change.record);
+        });
+        this.componentStateSyncCaches.set(component, () => {
+            remoteComponent.unobserve(syncRemote);
+            sub.unsubscribe();
+        });
+    }
+    runLocalUpdate(fn, record = true) {
+        if (this.updateFromRemote || this.controller.readonly) {
+            return;
+        }
+        this.updateRemoteActions.push({
+            record,
+            action: fn
+        });
+    }
+    runRemoteUpdate(tr, fn) {
+        if (tr.origin === this.yDoc) {
+            return;
+        }
+        this.updateFromRemote = true;
+        if (tr.origin === this.manager) {
+            this.scheduler.historyApplyTransact(fn);
+        }
+        else {
+            this.scheduler.remoteUpdateTransact(fn);
+        }
+        this.updateFromRemote = false;
+    }
+    createSharedComponentByComponent(component) {
+        const sharedComponent = new yjs.Map();
+        sharedComponent.set('state', component.state);
+        sharedComponent.set('name', component.name);
+        const sharedSlots = new yjs.Array();
+        sharedComponent.set('slots', sharedSlots);
+        component.slots.toArray().forEach(slot => {
+            const sharedSlot = this.createSharedSlotBySlot(slot);
+            sharedSlots.push([sharedSlot]);
+        });
+        this.syncSlots(sharedSlots, component);
+        this.syncComponent(sharedComponent, component);
+        return sharedComponent;
+    }
+    createSharedSlotBySlot(slot) {
+        const sharedSlot = new yjs.Map();
+        sharedSlot.set('schema', slot.schema);
+        sharedSlot.set('state', slot.state);
+        const sharedContent = new yjs.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;
+        });
+        this.syncContent(sharedContent, slot);
+        this.syncSlot(sharedSlot, slot);
+        return sharedSlot;
+    }
+    createComponentBySharedComponent(yMap, canInsertInlineComponent) {
+        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.translator.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.syncSlot(sharedSlot, slot);
+                this.syncContent(sharedSlot.get('content'), slot);
+            });
+            return instance;
+        }
+        return createUnknownComponent(name, canInsertInlineComponent).createInstance(this.starter);
+    }
+    createSlotBySharedSlot(sharedSlot) {
+        const content = sharedSlot.get('content');
+        const delta = content.toDelta();
+        const slot = this.translator.createSlot({
+            schema: sharedSlot.get('schema'),
+            state: sharedSlot.get('state'),
+            formats: {},
+            content: []
+        });
+        for (const action of delta) {
+            if (action.insert) {
+                if (typeof action.insert === 'string') {
+                    const blockFormats = [];
+                    const formats = remoteFormatsToLocal(this.registry, action.attributes).filter(item => {
+                        if (item[0].type === core.FormatType.Block) {
+                            blockFormats.push(item);
+                            return false;
+                        }
+                        return true;
+                    });
+                    slot.insert(action.insert, formats);
+                    const index = slot.index;
+                    blockFormats.forEach(item => {
+                        slot.setAttribute(item[0], item[1]);
+                    });
+                    slot.retain(index);
+                }
+                else {
+                    const sharedComponent = action.insert;
+                    const canInsertInlineComponent = slot.schema.includes(core.ContentType.InlineComponent);
+                    const component = this.createComponentBySharedComponent(sharedComponent, canInsertInlineComponent);
+                    slot.insert(component, remoteFormatsToLocal(this.registry, action.attributes));
+                    this.syncSlots(sharedComponent.get('slots'), component);
+                    this.syncComponent(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);
+        });
+    }
+};
+exports.Collaborate = __decorate([
+    di.Injectable(),
+    __param(0, di.Inject(core.HISTORY_STACK_SIZE)),
+    __metadata("design:paramtypes", [Number, core.RootComponentRef,
+        exports.CollaborateCursor,
+        core.Controller,
+        core.Scheduler,
+        core.Translator,
+        core.Registry,
+        core.Selection,
+        core.Starter])
+], exports.Collaborate);
+function remoteFormatsToLocal(registry, attrs) {
+    const formats = [];
+    if (attrs) {
+        Object.keys(attrs).forEach(key => {
+            const formatter = registry.getFormatter(key);
+            if (formatter) {
+                formats.push([formatter, attrs[key]]);
+            }
+        });
+    }
+    return formats;
 }
 
-const collaborateModule = {
-    providers: [
-        exports.Collaborate,
-        exports.CollaborateCursor,
-        {
-            provide: core.History,
-            useClass: exports.Collaborate
-        }
-    ]
+const collaborateModule = {
+    providers: [
+        exports.Collaborate,
+        exports.CollaborateCursor,
+        {
+            provide: core.History,
+            useClass: exports.Collaborate
+        }
+    ]
 };
 
 exports.CollaborateSelectionAwarenessDelegate = CollaborateSelectionAwarenessDelegate;