@textbus/collaborate 4.0.4 → 4.1.0-alpha.0

package/bundles/index.esm.js

@@ -2,8 +2,8 @@ import { HocuspocusProvider } from '@hocuspocus/provider';
 import { Subject, map, filter, Subscription } from '@tanbo/stream';
 import { WebsocketProvider } from 'y-websocket';
 import { Injectable, Inject, Optional } from '@viewfly/core';
-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 { makeError, ChangeOrigin, Slot, createObjectProxy, createArrayProxy, AsyncSlot, AsyncComponent, Component, Scheduler, Registry, Selection, HISTORY_STACK_SIZE, RootComponentRef, History } from '@textbus/core';
+import { Doc, Map, Array as Array$1, Text, UndoManager, createAbsolutePositionFromRelativePosition, createRelativePositionFromTypeIndex } from 'yjs';
 
 /**
  * 协作通信通用接口
@@ -112,6 +112,36 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+const subModelLoaderErrorFn = makeError('subModelLoaderError');
+/**
+ * 子文档加载器
+ */
+class SubModelLoader {
+}
+let NonSubModelLoader = class NonSubModelLoader extends SubModelLoader {
+    createSubModelBySlot() {
+        throw subModelLoaderErrorFn('single document does not support async slot.');
+    }
+    createSubModelByComponent() {
+        throw subModelLoaderErrorFn('single document does not support async component.');
+    }
+    loadSubModelByComponent() {
+        throw subModelLoaderErrorFn('single document does not support async component.');
+    }
+    loadSubModelBySlot() {
+        throw subModelLoaderErrorFn('single document does not support async slot.');
+    }
+    getLoadedModelBySlot() {
+        throw subModelLoaderErrorFn('single document does not support async slot.');
+    }
+    getLoadedModelByComponent() {
+        throw subModelLoaderErrorFn('single document does not support async component.');
+    }
+};
+NonSubModelLoader = __decorate([
+    Injectable()
+], NonSubModelLoader);
+
 const collaborateErrorFn = makeError('Collaborate');
 class SlotMap {
     constructor() {
@@ -151,112 +181,41 @@ class SlotMap {
         }
     }
 }
-class CustomUndoManagerConfig {
-}
 let Collaborate = class Collaborate {
-    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;
-    }
-    constructor(stackSize, rootComponentRef, scheduler, registry, selection, undoManagerConfig) {
-        this.stackSize = stackSize;
-        this.rootComponentRef = rootComponentRef;
+    constructor(scheduler, registry, selection, subModelLoader) {
         this.scheduler = scheduler;
         this.registry = registry;
         this.selection = selection;
-        this.undoManagerConfig = undoManagerConfig;
+        this.subModelLoader = subModelLoader;
         this.yDoc = new Doc();
-        this.backEvent = new Subject();
-        this.forwardEvent = new Subject();
-        this.changeEvent = new Subject();
-        this.pushEvent = new Subject();
-        this.manager = null;
+        this.slotMap = new SlotMap();
         this.subscriptions = [];
         this.updateFromRemote = false;
-        this.localChangesAppliedEvent = new Subject();
-        this.selectionChangeEvent = new Subject();
-        this.slotMap = new SlotMap();
-        this.updateRemoteActions = [];
+        this.addSubModelEvent = new Subject();
+        this.updateRemoteActions = new WeakMap();
         this.noRecord = {};
-        this.historyItems = [];
-        this.index = 0;
-        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();
+        this.onAddSubModel = this.addSubModelEvent.asObservable();
     }
-    listen() {
-        const root = this.yDoc.getMap('RootComponent');
-        const rootComponent = this.rootComponentRef.component;
-        const undoManagerConfig = this.undoManagerConfig || {};
-        const manager = new UndoManager(root, {
-            trackedOrigins: new Set([this.yDoc]),
-            captureTransaction(arg) {
-                if (undoManagerConfig.captureTransaction) {
-                    return undoManagerConfig.captureTransaction(arg);
-                }
-                return true;
-            },
-            deleteFilter(item) {
-                if (undoManagerConfig.deleteFilter) {
-                    return undoManagerConfig.deleteFilter(item);
-                }
-                return true;
-            }
-        });
-        this.manager = manager;
-        let beforePosition = null;
-        this.subscriptions.push(this.scheduler.onLocalChangeBefore.subscribe(() => {
-            beforePosition = this.getRelativeCursorLocation();
-        }));
-        manager.on('stack-item-added', (event) => {
-            if (event.type === 'undo') {
-                if (event.origin === manager) {
-                    this.index++;
-                }
-                else {
-                    this.historyItems.length = this.index;
-                    this.historyItems.push({
-                        before: beforePosition,
-                        after: this.getRelativeCursorLocation()
-                    });
-                    this.index++;
-                }
-            }
-            else {
-                this.index--;
-            }
-            if (manager.undoStack.length > this.stackSize) {
-                this.historyItems.shift();
-                manager.undoStack.shift();
-            }
-            if (event.origin === this.yDoc) {
-                this.pushEvent.next();
-            }
-            this.changeEvent.next();
-        });
-        manager.on('stack-item-popped', (ev) => {
-            const index = ev.type === 'undo' ? this.index : this.index - 1;
-            const position = this.historyItems[index] || null;
-            const p = ev.type === 'undo' ? position === null || position === void 0 ? void 0 : position.before : position === null || position === void 0 ? void 0 : position.after;
-            if (p) {
-                const selection = this.getAbstractSelection(p);
-                if (selection) {
-                    this.selection.setBaseAndExtent(selection.anchorSlot, selection.anchorOffset, selection.focusSlot, selection.focusOffset);
-                    return;
-                }
-            }
-            this.selection.unSelect();
-        });
-        this.subscriptions.push(this.selection.onChange.subscribe(() => {
-            const paths = this.selection.getPaths();
-            this.selectionChangeEvent.next(paths);
-        }), this.scheduler.onDocChanged.pipe(map(item => {
+    syncRootComponent(yDoc, sharedComponent, localComponent) {
+        this.initSyncEvent(yDoc);
+        this.syncComponent(yDoc, sharedComponent, localComponent);
+    }
+    syncRootSlot(yDoc, sharedSlot, localSlot) {
+        if (sharedSlot.length) {
+            localSlot.retain(0);
+            localSlot.delete(localSlot.length);
+            localSlot.cleanAttributes();
+            localSlot.cleanFormats();
+            this.initLocalSlotBySharedSlot(sharedSlot, localSlot);
+        }
+        else {
+            this.initSharedSlotByLocalSlot(sharedSlot, localSlot);
+        }
+        this.initSyncEvent(yDoc);
+        this.syncSlot(sharedSlot, localSlot);
+    }
+    initSyncEvent(yDoc) {
+        this.subscriptions.push(this.scheduler.onDocChanged.pipe(map(item => {
             return item.filter(i => {
                 return i.from !== ChangeOrigin.Remote;
             });
@@ -265,7 +224,8 @@ let Collaborate = class Collaborate {
         })).subscribe(() => {
             const updates = [];
             let update = null;
-            for (const item of this.updateRemoteActions) {
+            const updateRemoteActions = this.updateRemoteActions.get(yDoc) || [];
+            for (const item of updateRemoteActions) {
                 if (!update) {
                     update = {
                         record: item.record,
@@ -284,240 +244,54 @@ let Collaborate = class Collaborate {
                     updates.push(update);
                 }
             }
-            this.updateRemoteActions = [];
+            this.updateRemoteActions.delete(yDoc);
             for (const item of updates) {
-                this.yDoc.transact(() => {
+                yDoc.transact(() => {
                     item.actions.forEach(fn => {
                         fn();
                     });
-                }, item.record ? this.yDoc : this.noRecord);
+                }, item.record ? yDoc : this.noRecord);
             }
-            this.localChangesAppliedEvent.next();
         }));
-        this.syncRootComponent(root, rootComponent);
-    }
-    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;
-        const last = this.historyItems.pop();
-        this.historyItems = last ? [last] : [];
-        this.index = last ? 1 : 0;
-        (_a = this.manager) === null || _a === void 0 ? void 0 : _a.clear();
-        this.changeEvent.next();
-    }
-    destroy() {
-        var _a;
-        this.index = 0;
-        this.historyItems = [];
-        this.subscriptions.forEach(i => i.unsubscribe());
-        (_a = this.manager) === null || _a === void 0 ? void 0 : _a.destroy();
     }
-    syncRootComponent(root, rootComponent) {
-        let state = root.get('state');
+    syncComponent(yDoc, sharedComponent, localComponent) {
+        let state = sharedComponent.get('state');
         if (!state) {
             state = new Map();
-            this.syncLocalMapToSharedMap(rootComponent.state, state);
-            this.yDoc.transact(() => {
-                root.set('state', state);
+            this.syncLocalMapToSharedMap(localComponent.state, state);
+            yDoc.transact(() => {
+                sharedComponent.set('state', state);
             });
         }
         else {
-            Object.keys(rootComponent.state).forEach(key => {
-                Reflect.deleteProperty(rootComponent.state, key);
+            Object.keys(localComponent.state).forEach(key => {
+                Reflect.deleteProperty(localComponent.state, key);
             });
-            this.syncSharedMapToLocalMap(state, rootComponent.state);
+            this.syncSharedMapToLocalMap(state, localComponent.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.');
-            }
-        }
-        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);
-        }
-        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.slotMap.get(focusPosition.type);
-            const anchorSlot = this.slotMap.get(anchorPosition.type);
-            if (focusSlot && anchorSlot) {
-                return {
-                    anchorSlot,
-                    anchorOffset: anchorPosition.index,
-                    focusSlot,
-                    focusOffset: focusPosition.index
-                };
-            }
-        }
-        return null;
-    }
-    getRelativeCursorLocation() {
-        const { anchorSlot, anchorOffset, focusSlot, focusOffset } = this.selection;
-        if (anchorSlot) {
-            const anchorYText = this.slotMap.get(anchorSlot);
-            if (anchorYText) {
-                const anchorPosition = createRelativePositionFromTypeIndex(anchorYText, anchorOffset);
-                if (focusSlot) {
-                    const focusYText = this.slotMap.get(focusSlot);
-                    if (focusYText) {
-                        const focusPosition = createRelativePositionFromTypeIndex(focusYText, focusOffset);
-                        return {
-                            focus: focusPosition,
-                            anchor: anchorPosition
-                        };
-                    }
-                }
-            }
-        }
-        return null;
-    }
-    syncSlot(sharedSlot, localSlot) {
-        const syncRemote = (ev, tr) => {
-            this.runRemoteUpdate(tr, () => {
-                localSlot.retain(0);
-                ev.keysChanged.forEach(key => {
-                    const change = ev.keys.get(key);
-                    if (!change) {
-                        return;
-                    }
-                    const updateType = change.action;
-                    if (updateType === 'update' || updateType === 'add') {
-                        const attribute = this.registry.getAttribute(key);
-                        if (attribute) {
-                            localSlot.setAttribute(attribute, sharedSlot.getAttribute(key));
-                        }
-                    }
-                    else if (updateType === 'delete') {
-                        const attribute = this.registry.getAttribute(key);
-                        if (attribute) {
-                            localSlot.removeAttribute(attribute);
-                        }
-                    }
+    syncSlot(sharedSlot, localSlot) {
+        const syncRemote = (ev, tr) => {
+            this.runRemoteUpdate(tr, () => {
+                localSlot.retain(0);
+                ev.keysChanged.forEach(key => {
+                    const change = ev.keys.get(key);
+                    if (!change) {
+                        return;
+                    }
+                    const updateType = change.action;
+                    if (updateType === 'update' || updateType === 'add') {
+                        const attribute = this.registry.getAttribute(key);
+                        if (attribute) {
+                            localSlot.setAttribute(attribute, sharedSlot.getAttribute(key));
+                        }
+                    }
+                    else if (updateType === 'delete') {
+                        const attribute = this.registry.getAttribute(key);
+                        if (attribute) {
+                            localSlot.removeAttribute(attribute);
+                        }
+                    }
                 });
                 ev.delta.forEach(action => {
                     if (Reflect.has(action, 'retain')) {
@@ -544,7 +318,7 @@ let Collaborate = class Collaborate {
                             const component = this.createLocalComponentBySharedComponent(sharedComponent);
                             localSlot.insert(component);
                         }
-                        if (this.selection.isSelected && tr.origin !== this.manager) {
+                        if (this.selection.isSelected && !(tr.origin instanceof UndoManager)) {
                             if (localSlot === this.selection.anchorSlot && this.selection.anchorOffset > index) {
                                 this.selection.setAnchor(localSlot, this.selection.anchorOffset + length);
                             }
@@ -556,7 +330,7 @@ let Collaborate = class Collaborate {
                     else if (action.delete) {
                         const index = localSlot.index;
                         localSlot.delete(action.delete);
-                        if (this.selection.isSelected && tr.origin !== this.manager) {
+                        if (this.selection.isSelected && !(tr.origin instanceof UndoManager)) {
                             if (localSlot === this.selection.anchorSlot && this.selection.anchorOffset >= index) {
                                 this.selection.setAnchor(localSlot, this.selection.startOffset - action.delete);
                             }
@@ -570,7 +344,7 @@ let Collaborate = class Collaborate {
         };
         sharedSlot.observe(syncRemote);
         const sub = localSlot.onContentChange.subscribe(actions => {
-            this.runLocalUpdate(() => {
+            this.runLocalUpdate(sharedSlot.doc, true, () => {
                 var _a;
                 let offset = 0;
                 let length = 0;
@@ -628,7 +402,7 @@ let Collaborate = class Collaborate {
                         sharedSlot.removeAttribute(action.name);
                     }
                 }
-            }, true);
+            });
         });
         this.slotMap.set(localSlot, sharedSlot);
         localSlot.__changeMarker__.destroyCallbacks.push(() => {
@@ -637,18 +411,279 @@ let Collaborate = class Collaborate {
             sub.unsubscribe();
         });
     }
+    destroy() {
+        this.subscriptions.forEach(i => i.unsubscribe());
+    }
+    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();
+        const isAsyncSlot = localSlot instanceof AsyncSlot;
+        sharedSlot.setAttribute('schema', [...localSlot.schema]);
+        sharedSlot.setAttribute('type', isAsyncSlot ? 'async' : 'sync');
+        if (isAsyncSlot) {
+            let isDestroyed = false;
+            sharedSlot.setAttribute('metadata', localSlot.metadata);
+            this.subModelLoader.createSubModelBySlot(localSlot).then(subDocument => {
+                if (isDestroyed) {
+                    return;
+                }
+                const content = subDocument.getText('content');
+                this.initSharedSlotByLocalSlot(content, localSlot);
+                this.syncSlot(content, localSlot);
+                this.addSubModelEvent.next({
+                    yDoc: subDocument,
+                    yType: content
+                });
+                localSlot.loader.markAsLoaded();
+            });
+            localSlot.__changeMarker__.destroyCallbacks.push(() => {
+                isDestroyed = true;
+            });
+            return sharedSlot;
+        }
+        const sharedContent = new Text();
+        this.initSharedSlotByLocalSlot(sharedContent, localSlot);
+        sharedSlot.insertEmbed(0, sharedContent);
+        this.syncSlot(sharedContent, localSlot);
+        return sharedSlot;
+    }
+    initSharedSlotByLocalSlot(sharedContent, localSlot) {
+        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') {
+                sharedContent.insert(offset, i.insert, formats);
+            }
+            else {
+                const sharedComponent = this.createSharedComponentByLocalComponent(i.insert);
+                sharedContent.insertEmbed(offset, sharedComponent, formats);
+            }
+            offset += i.insert.length;
+        });
+        localSlot.getAttributes().forEach(item => {
+            sharedContent.setAttribute(item[0].name, item[1]);
+        });
+    }
+    createLocalSlotBySharedSlot(sharedSlot) {
+        var _a;
+        const type = sharedSlot.getAttribute('type');
+        const schema = sharedSlot.getAttribute('schema');
+        if (type === 'async') {
+            const metadata = sharedSlot.getAttribute('metadata');
+            const slot = new AsyncSlot(schema || [], metadata);
+            const loadedSubDocument = this.subModelLoader.getLoadedModelBySlot(slot);
+            if (loadedSubDocument) {
+                const subContent = loadedSubDocument.getText('content');
+                this.syncRootSlot(loadedSubDocument, subContent, slot);
+                this.addSubModelEvent.next({
+                    yDoc: loadedSubDocument,
+                    yType: subContent
+                });
+                slot.loader.markAsLoaded();
+                return slot;
+            }
+            let isDestroyed = false;
+            slot.loader.onRequestLoad.toPromise().then(() => {
+                return this.subModelLoader.loadSubModelBySlot(slot);
+            }).then(subDocument => {
+                if (isDestroyed) {
+                    return;
+                }
+                slot.loader.markAsLoaded();
+                const subContent = subDocument.getText('content');
+                this.syncRootSlot(subDocument, subContent, slot);
+                this.addSubModelEvent.next({
+                    yDoc: subDocument,
+                    yType: subContent
+                });
+            });
+            slot.__changeMarker__.destroyCallbacks.push(() => {
+                isDestroyed = true;
+            });
+            return slot;
+        }
+        const contentDelta = sharedSlot.toDelta();
+        const content = (_a = contentDelta[0]) === null || _a === void 0 ? void 0 : _a.insert;
+        if (!(content instanceof Text)) {
+            throw collaborateErrorFn('shared slot content type is not `YText`.');
+        }
+        const localSlot = new Slot(schema || []);
+        this.initLocalSlotBySharedSlot(content, localSlot);
+        this.syncSlot(content, localSlot);
+        return localSlot;
+    }
+    initLocalSlotBySharedSlot(content, localSlot) {
+        const delta = content.toDelta();
+        const attrs = content.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.');
+            }
+        }
+    }
+    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);
+        }
+        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;
+    }
     createSharedComponentByLocalComponent(component) {
         const sharedComponent = new Map();
-        const sharedState = this.createSharedMapByLocalMap(component.state);
         sharedComponent.set('name', component.name);
+        if (component instanceof AsyncComponent) {
+            sharedComponent.set('type', 'async');
+            sharedComponent.set('metadata', component.getMetadata());
+            const state = component.state;
+            let isDestroyed = false;
+            state.__changeMarker__.destroyCallbacks.push(() => {
+                isDestroyed = true;
+            });
+            this.subModelLoader.createSubModelByComponent(component).then(subDocument => {
+                if (isDestroyed) {
+                    return;
+                }
+                const state = subDocument.getMap('state');
+                this.syncComponent(subDocument, state, component);
+                this.addSubModelEvent.next({
+                    yType: state,
+                    yDoc: subDocument
+                });
+                component.loader.markAsLoaded();
+            });
+            return sharedComponent;
+        }
+        const sharedState = this.createSharedMapByLocalMap(component.state);
         sharedComponent.set('state', sharedState);
+        sharedComponent.set('type', 'sync');
         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);
+        const type = yMap.get('type');
+        let instance;
+        if (type === 'async') {
+            instance = this.registry.createComponentByData(componentName, {});
+            if (instance instanceof AsyncComponent) {
+                instance.setMetadata(yMap.get('metadata'));
+                const loadedSubDocument = this.subModelLoader.getLoadedModelByComponent(instance);
+                if (loadedSubDocument) {
+                    const state = loadedSubDocument.getMap('state');
+                    this.syncComponent(loadedSubDocument, state, instance);
+                    this.addSubModelEvent.next({
+                        yType: state,
+                        yDoc: loadedSubDocument
+                    });
+                    instance.loader.markAsLoaded();
+                    return instance;
+                }
+                const state = instance.state;
+                let isDestroyed = false;
+                instance.loader.onRequestLoad.toPromise().then(() => {
+                    return this.subModelLoader.loadSubModelByComponent(instance);
+                })
+                    .then(subDocument => {
+                    if (isDestroyed) {
+                        return;
+                    }
+                    instance.loader.markAsLoaded();
+                    const state = subDocument.getMap('state');
+                    this.syncComponent(subDocument, state, instance);
+                    this.addSubModelEvent.next({
+                        yType: state,
+                        yDoc: subDocument
+                    });
+                });
+                state.__changeMarker__.destroyCallbacks.push(() => {
+                    isDestroyed = true;
+                });
+            }
+            else if (instance instanceof Component) {
+                throw collaborateErrorFn(`component name \`${componentName}\` is not a async component.`);
+            }
+        }
+        else {
+            const sharedState = yMap.get('state');
+            const state = this.createLocalMapBySharedMap(sharedState);
+            instance = this.registry.createComponentByData(componentName, state);
+        }
         if (instance) {
             return instance;
         }
@@ -662,7 +697,7 @@ let Collaborate = class Collaborate {
      */
     syncArray(sharedArray, localArray) {
         const sub = localArray.__changeMarker__.onSelfChange.subscribe((actions) => {
-            this.runLocalUpdate(() => {
+            this.runLocalUpdate(sharedArray.doc, !localArray.__changeMarker__.irrevocableUpdate, () => {
                 let index = 0;
                 for (const action of actions) {
                     switch (action.type) {
@@ -693,7 +728,7 @@ let Collaborate = class Collaborate {
                             break;
                     }
                 }
-            }, !localArray.__changeMarker__.irrevocableUpdate);
+            });
         });
         const syncRemote = (ev, tr) => {
             this.runRemoteUpdate(tr, () => {
@@ -743,7 +778,7 @@ let Collaborate = class Collaborate {
         };
         sharedObject.observe(syncRemote);
         const sub = localObject.__changeMarker__.onSelfChange.subscribe((actions) => {
-            this.runLocalUpdate(() => {
+            this.runLocalUpdate(sharedObject.doc, !localObject.__changeMarker__.irrevocableUpdate, () => {
                 for (const action of actions) {
                     switch (action.type) {
                         case 'propSet':
@@ -754,28 +789,33 @@ let Collaborate = class Collaborate {
                             break;
                     }
                 }
-            }, !localObject.__changeMarker__.irrevocableUpdate);
+            });
         });
         localObject.__changeMarker__.destroyCallbacks.push(function () {
             sharedObject.unobserve(syncRemote);
             sub.unsubscribe();
         });
     }
-    runLocalUpdate(fn, record) {
-        if (this.updateFromRemote) {
+    runLocalUpdate(yDoc, record, fn) {
+        if (this.updateFromRemote || !yDoc) {
             return;
         }
-        this.updateRemoteActions.push({
+        let changeList = this.updateRemoteActions.get(yDoc);
+        if (!changeList) {
+            changeList = [];
+            this.updateRemoteActions.set(yDoc, changeList);
+        }
+        changeList.push({
             record,
             action: fn
         });
     }
     runRemoteUpdate(tr, fn) {
-        if (tr.origin === this.yDoc) {
+        if (tr.origin === tr.doc) {
             return;
         }
         this.updateFromRemote = true;
-        if (tr.origin === this.manager) {
+        if (tr.origin instanceof UndoManager) {
             this.scheduler.historyApplyTransact(fn);
         }
         else {
@@ -786,13 +826,10 @@ let Collaborate = class Collaborate {
 };
 Collaborate = __decorate([
     Injectable(),
-    __param(0, Inject(HISTORY_STACK_SIZE)),
-    __param(5, Optional()),
-    __metadata("design:paramtypes", [Number, RootComponentRef,
-        Scheduler,
+    __metadata("design:paramtypes", [Scheduler,
         Registry,
         Selection,
-        CustomUndoManagerConfig])
+        SubModelLoader])
 ], Collaborate);
 function remoteFormatsToLocal(registry, attrs) {
     const formats = [];
@@ -807,6 +844,182 @@ function remoteFormatsToLocal(registry, attrs) {
     return formats;
 }
 
+class CustomUndoManagerConfig {
+}
+const collabHistoryErrorFn = makeError('CollabHistory');
+let CollabHistory = class CollabHistory {
+    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;
+    }
+    constructor(rootComponentRef, collaborate, scheduler, selection, stackSize, undoManagerConfig) {
+        this.rootComponentRef = rootComponentRef;
+        this.collaborate = collaborate;
+        this.scheduler = scheduler;
+        this.selection = selection;
+        this.stackSize = stackSize;
+        this.undoManagerConfig = undoManagerConfig;
+        this.manager = null;
+        this.historyItems = [];
+        this.index = 0;
+        this.subscriptions = [];
+        this.backEvent = new Subject();
+        this.forwardEvent = new Subject();
+        this.changeEvent = new Subject();
+        this.pushEvent = new Subject();
+        this.onBack = this.backEvent.asObservable();
+        this.onForward = this.forwardEvent.asObservable();
+        this.onChange = this.changeEvent.asObservable();
+        this.onPush = this.pushEvent.asObservable();
+    }
+    listen() {
+        const root = this.collaborate.yDoc.getMap('RootComponent');
+        const rootComponent = this.rootComponentRef.component;
+        this.collaborate.syncRootComponent(this.collaborate.yDoc, root, rootComponent);
+        const undoManagerConfig = this.undoManagerConfig || {};
+        const manager = new UndoManager(root, {
+            trackedOrigins: new Set([this.collaborate.yDoc]),
+            captureTransaction(arg) {
+                if (undoManagerConfig.captureTransaction) {
+                    return undoManagerConfig.captureTransaction(arg);
+                }
+                return true;
+            },
+            deleteFilter(item) {
+                if (undoManagerConfig.deleteFilter) {
+                    return undoManagerConfig.deleteFilter(item);
+                }
+                return true;
+            }
+        });
+        this.manager = manager;
+        let beforePosition = null;
+        this.subscriptions.push(this.scheduler.onLocalChangeBefore.subscribe(() => {
+            beforePosition = this.getRelativeCursorLocation();
+        }), this.collaborate.onAddSubModel.subscribe(() => {
+            throw collabHistoryErrorFn('single document does not support submodels.');
+        }));
+        manager.on('stack-item-added', (event) => {
+            if (event.type === 'undo') {
+                if (event.origin === manager) {
+                    this.index++;
+                }
+                else {
+                    this.historyItems.length = this.index;
+                    this.historyItems.push({
+                        before: beforePosition,
+                        after: this.getRelativeCursorLocation()
+                    });
+                    this.index++;
+                }
+            }
+            else {
+                this.index--;
+            }
+            if (manager.undoStack.length > this.stackSize) {
+                this.historyItems.shift();
+                manager.undoStack.shift();
+            }
+            if (event.origin === this.collaborate.yDoc) {
+                this.pushEvent.next();
+            }
+            this.changeEvent.next();
+        });
+        manager.on('stack-item-popped', (ev) => {
+            const index = ev.type === 'undo' ? this.index : this.index - 1;
+            const position = this.historyItems[index] || null;
+            const p = ev.type === 'undo' ? position === null || position === void 0 ? void 0 : position.before : position === null || position === void 0 ? void 0 : position.after;
+            if (p) {
+                const selection = this.getAbstractSelection(p);
+                if (selection) {
+                    this.selection.setBaseAndExtent(selection.anchorSlot, selection.anchorOffset, selection.focusSlot, selection.focusOffset);
+                    return;
+                }
+            }
+            this.selection.unSelect();
+        });
+    }
+    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;
+        const last = this.historyItems.pop();
+        this.historyItems = last ? [last] : [];
+        this.index = last ? 1 : 0;
+        (_a = this.manager) === null || _a === void 0 ? void 0 : _a.clear();
+        this.changeEvent.next();
+    }
+    destroy() {
+        var _a;
+        this.index = 0;
+        this.historyItems = [];
+        this.subscriptions.forEach(i => i.unsubscribe());
+        (_a = this.manager) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    getAbstractSelection(position) {
+        const anchorPosition = createAbsolutePositionFromRelativePosition(position.anchor, this.collaborate.yDoc);
+        const focusPosition = createAbsolutePositionFromRelativePosition(position.focus, this.collaborate.yDoc);
+        if (anchorPosition && focusPosition) {
+            const focusSlot = this.collaborate.slotMap.get(focusPosition.type);
+            const anchorSlot = this.collaborate.slotMap.get(anchorPosition.type);
+            if (focusSlot && anchorSlot) {
+                return {
+                    anchorSlot,
+                    anchorOffset: anchorPosition.index,
+                    focusSlot,
+                    focusOffset: focusPosition.index
+                };
+            }
+        }
+        return null;
+    }
+    getRelativeCursorLocation() {
+        const { anchorSlot, anchorOffset, focusSlot, focusOffset } = this.selection;
+        if (anchorSlot) {
+            const anchorYText = this.collaborate.slotMap.get(anchorSlot);
+            if (anchorYText) {
+                const anchorPosition = createRelativePositionFromTypeIndex(anchorYText, anchorOffset);
+                if (focusSlot) {
+                    const focusYText = this.collaborate.slotMap.get(focusSlot);
+                    if (focusYText) {
+                        const focusPosition = createRelativePositionFromTypeIndex(focusYText, focusOffset);
+                        return {
+                            focus: focusPosition,
+                            anchor: anchorPosition
+                        };
+                    }
+                }
+            }
+        }
+        return null;
+    }
+};
+CollabHistory = __decorate([
+    Injectable(),
+    __param(4, Inject(HISTORY_STACK_SIZE)),
+    __param(5, Optional()),
+    __metadata("design:paramtypes", [RootComponentRef,
+        Collaborate,
+        Scheduler,
+        Selection, Number, CustomUndoManagerConfig])
+], CollabHistory);
+
 let UserActivity = class UserActivity {
     constructor(syncConnector, selection) {
         this.syncConnector = syncConnector;
@@ -855,15 +1068,219 @@ class CollaborateModule {
         this.providers = [
             Collaborate,
             UserActivity,
+            CollabHistory,
+            {
+                provide: History,
+                useExisting: CollabHistory
+            }, {
+                provide: SyncConnector,
+                useFactory: (collab) => {
+                    return this.config.createConnector(collab.yDoc);
+                },
+                deps: [Collaborate]
+            }, {
+                provide: SubModelLoader,
+                useClass: NonSubModelLoader
+            }
+        ];
+    }
+    setup(textbus) {
+        const connector = textbus.get(SyncConnector);
+        const userActivity = textbus.get(UserActivity);
+        userActivity.init(this.config.userinfo);
+        return connector.onLoad.toPromise();
+    }
+    onDestroy(textbus) {
+        textbus.get(Collaborate).destroy();
+        textbus.get(History).destroy();
+        textbus.get(UserActivity).destroy();
+        textbus.get(SyncConnector).onDestroy();
+    }
+}
+
+let MultipleDocCollabHistory = class MultipleDocCollabHistory {
+    get canBack() {
+        return this.actionStack.length > 0 && this.index > 0;
+    }
+    get canForward() {
+        return this.actionStack.length > 0 && this.index < this.actionStack.length;
+    }
+    constructor(collaborate, rootComponentRef, stackSize, undoManagerConfig) {
+        this.collaborate = collaborate;
+        this.rootComponentRef = rootComponentRef;
+        this.stackSize = stackSize;
+        this.undoManagerConfig = undoManagerConfig;
+        this.isListen = false;
+        this.changeEvent = new Subject();
+        this.backEvent = new Subject();
+        this.forwardEvent = new Subject();
+        this.pushEvent = new Subject();
+        this.actionStack = [];
+        this.index = 0;
+        this.stackItem = null;
+        this.timer = null;
+        this.subscription = new Subscription();
+        this.subDocs = new Set();
+        this.listenerCaches = new Set();
+        this.onChange = this.changeEvent.asObservable();
+        this.onBack = this.backEvent.asObservable();
+        this.onForward = this.forwardEvent.asObservable();
+        this.onPush = this.pushEvent.asObservable();
+    }
+    listen() {
+        this.isListen = true;
+        const root = this.collaborate.yDoc.getMap('RootComponent');
+        const rootComponent = this.rootComponentRef.component;
+        this.collaborate.syncRootComponent(this.collaborate.yDoc, root, rootComponent);
+        this.listenItem(root, this.collaborate.yDoc);
+        this.subscription.add(this.collaborate.onAddSubModel.subscribe(({ yType, yDoc }) => {
+            if (this.subDocs.has(yType)) {
+                return;
+            }
+            this.subDocs.add(yType);
+            if (this.isListen) {
+                this.listenItem(yType, yDoc);
+            }
+        }));
+    }
+    forward() {
+        if (!this.canForward) {
+            return;
+        }
+        clearTimeout(this.timer);
+        const item = this.actionStack[this.index];
+        if (item) {
+            for (const i of item) {
+                i.redo();
+            }
+        }
+        this.index++;
+        this.forwardEvent.next();
+        this.changeEvent.next();
+    }
+    back() {
+        if (!this.canBack) {
+            return;
+        }
+        clearTimeout(this.timer);
+        let actions;
+        if (this.stackItem) {
+            actions = this.stackItem;
+            this.stackItem = null;
+        }
+        else {
+            this.index--;
+            actions = this.actionStack[this.index];
+        }
+        let len = actions.length;
+        while (len > 0) {
+            len--;
+            actions[len].undo();
+        }
+        if (actions) {
+            this.backEvent.next();
+            this.changeEvent.next();
+        }
+    }
+    clear() {
+        this.actionStack = [];
+        this.stackItem = [];
+        this.index = 0;
+        clearTimeout(this.timer);
+        this.listenerCaches.forEach((undoManager) => {
+            undoManager.clear();
+        });
+        this.changeEvent.next();
+    }
+    destroy() {
+        this.clear();
+        this.subscription.unsubscribe();
+        this.listenerCaches.forEach((undoManager) => {
+            undoManager.destroy();
+        });
+        this.subDocs.clear();
+        this.listenerCaches.clear();
+    }
+    listenItem(yType, yDoc) {
+        const undoManagerConfig = this.undoManagerConfig || {};
+        const undoManager = new UndoManager(yType, {
+            trackedOrigins: new Set([yDoc]),
+            captureTimeout: 0,
+            captureTransaction(arg) {
+                if (undoManagerConfig.captureTransaction) {
+                    return undoManagerConfig.captureTransaction(arg);
+                }
+                return true;
+            },
+            deleteFilter(item) {
+                if (undoManagerConfig.deleteFilter) {
+                    return undoManagerConfig.deleteFilter(item);
+                }
+                return true;
+            }
+        });
+        undoManager.on('stack-item-added', (event) => {
+            if (event.type === 'undo' && !(event.origin instanceof UndoManager)) {
+                if (this.index != this.actionStack.length) {
+                    const redoStack = this.actionStack.slice(this.index);
+                    redoStack.forEach(item => {
+                        item.forEach(i => {
+                            i.clear(false, true);
+                        });
+                    });
+                    this.actionStack.length = this.index;
+                    this.changeEvent.next();
+                }
+                if (this.stackItem === null) {
+                    this.stackItem = [];
+                    this.timer = setTimeout(() => {
+                        if (this.actionStack.length >= this.stackSize) {
+                            this.actionStack.shift();
+                        }
+                        else {
+                            this.index++;
+                        }
+                        this.actionStack.push(this.stackItem);
+                        this.stackItem = null;
+                        this.pushEvent.next();
+                        this.changeEvent.next();
+                    }, 500);
+                }
+                this.stackItem.push(undoManager);
+            }
+        });
+        this.listenerCaches.add(undoManager);
+    }
+};
+MultipleDocCollabHistory = __decorate([
+    Injectable(),
+    __param(2, Inject(HISTORY_STACK_SIZE)),
+    __param(3, Optional()),
+    __metadata("design:paramtypes", [Collaborate,
+        RootComponentRef, Number, CustomUndoManagerConfig])
+], MultipleDocCollabHistory);
+
+class MultipleDocumentCollaborateModule {
+    constructor(config) {
+        this.config = config;
+        this.providers = [
+            Collaborate,
+            UserActivity,
+            MultipleDocCollabHistory,
             {
                 provide: History,
-                useExisting: Collaborate
+                useExisting: MultipleDocCollabHistory
             }, {
                 provide: SyncConnector,
                 useFactory: (collab) => {
                     return this.config.createConnector(collab.yDoc);
                 },
                 deps: [Collaborate]
+            }, {
+                provide: SubModelLoader,
+                useFactory: () => {
+                    return this.config.subModelLoader;
+                }
             }
         ];
     }
@@ -874,9 +1291,11 @@ class CollaborateModule {
         return connector.onLoad.toPromise();
     }
     onDestroy(textbus) {
+        textbus.get(Collaborate).destroy();
+        textbus.get(History).destroy();
         textbus.get(UserActivity).destroy();
         textbus.get(SyncConnector).onDestroy();
     }
 }
 
-export { Collaborate, CollaborateModule, CustomUndoManagerConfig, HocuspocusConnector, SyncConnector, UserActivity, YWebsocketConnector };
+export { CollabHistory, Collaborate, CollaborateModule, CustomUndoManagerConfig, HocuspocusConnector, MultipleDocCollabHistory, MultipleDocumentCollaborateModule, NonSubModelLoader, SubModelLoader, SyncConnector, UserActivity, YWebsocketConnector };