@textbus/platform-browser 4.0.0-alpha.5 → 4.0.0-alpha.50

package/bundles/index.js

@@ -2,8 +2,9 @@
 
 require('reflect-metadata');
 var core$1 = require('@textbus/core');
-var core = require('@viewfly/core');
 var stream = require('@tanbo/stream');
+var core = require('@viewfly/core');
+var collaborate = require('@textbus/collaborate');
 
 function createElement(tagName, options = {}) {
     const el = document.createElement(tagName);
@@ -168,9 +169,9 @@ exports.Parser = Parser_1 = class Parser {
     static parseHTML(html) {
         return new DOMParser().parseFromString(html, 'text/html').body;
     }
-    constructor(options, injector) {
+    constructor(options, textbus) {
         this.options = options;
-        this.injector = injector;
+        this.textbus = textbus;
         const componentLoaders = [
             ...(options.componentLoaders || [])
         ];
@@ -195,7 +196,7 @@ exports.Parser = Parser_1 = class Parser {
      */
     parseDoc(html, rootComponentLoader) {
         const element = typeof html === 'string' ? Parser_1.parseHTML(html) : html;
-        return rootComponentLoader.read(element, this.injector, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
+        return rootComponentLoader.read(element, this.textbus, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
             return this.readSlot(childSlot, slotRootElement, slotContentHostElement);
         });
     }
@@ -216,7 +217,7 @@ exports.Parser = Parser_1 = class Parser {
             }
             for (const t of this.componentLoaders) {
                 if (t.match(el)) {
-                    const result = t.read(el, this.injector, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
+                    const result = t.read(el, this.textbus, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
                         return this.readSlot(childSlot, slotRootElement, slotContentHostElement);
                     });
                     if (!result) {
@@ -296,19 +297,16 @@ exports.Parser = Parser_1 = class Parser {
 exports.Parser = Parser_1 = __decorate([
     core.Injectable(),
     __param(0, core.Inject(EDITOR_OPTIONS)),
-    __metadata("design:paramtypes", [Object, core.Injector])
+    __metadata("design:paramtypes", [Object, core$1.Textbus])
 ], exports.Parser);
 
 class Input {
 }
 
-/**
- * Textbus PC 端浏览器渲染能力桥接器抽象类，提供了 DOM 元素查询能力，具体渲染能力由各前端框架实现相应桥接
- */
-class DomAdapter extends core$1.ViewAdapter {
-    constructor(mount) {
-        super();
-        this.mount = mount;
+class DomAdapter extends core$1.Adapter {
+    constructor() {
+        super(...arguments);
+        this.onViewUpdated = new stream.Subject();
         this.host = createElement('div', {
             styles: {
                 cursor: 'text',
@@ -324,126 +322,6 @@ class DomAdapter extends core$1.ViewAdapter {
                 id: 'textbus-' + Number((Math.random() + '').substring(2)).toString(16)
             }
         });
-        this.componentRootElementCaches = core$1.createBidirectionalMapping(a => {
-            return a instanceof core$1.ComponentInstance;
-        });
-        this.slotRootNativeElementCaches = core$1.createBidirectionalMapping(a => {
-            return a instanceof core$1.Slot;
-        });
-        this.slotRootVElementCaches = new WeakMap();
-    }
-    render(rootComponent) {
-        const view = this.componentRender(rootComponent);
-        return this.mount(this.host, view);
-    }
-    copy() {
-        document.execCommand('copy');
-    }
-    /**
-     * 根据组件获取组件的根 DOM 节点
-     * @param component
-     */
-    getNativeNodeByComponent(component) {
-        return this.componentRootElementCaches.get(component) || null;
-    }
-    /**
-     * 根据 DOM 节点，获对对应的组件根节点，如传入的 DOM 节点不为组件的根节点，则返回 null
-     * @param node
-     */
-    getComponentByNativeNode(node) {
-        return this.componentRootElementCaches.get(node) || null;
-    }
-    /**
-     * 根据插槽获取插槽的根 DOM 节点
-     * @param slot
-     */
-    getNativeNodeBySlot(slot) {
-        return this.slotRootNativeElementCaches.get(slot) || null;
-    }
-    /**
-     * 根据 DOM 节点，获对对应的插槽根节点，如传入的 DOM 节点不为插槽的根节点，则返回 null
-     * @param node
-     */
-    getSlotByNativeNode(node) {
-        return this.slotRootNativeElementCaches.get(node) || null;
-    }
-    /**
-     * 获取插槽内容节点集合
-     * @param slot
-     */
-    getNodesBySlot(slot) {
-        const rootNativeNode = this.getNativeNodeBySlot(slot);
-        if (!rootNativeNode) {
-            return [];
-        }
-        const rootVNode = this.slotRootVElementCaches.get(slot);
-        const getNodes = (vElement, nativeNode, result) => {
-            if (vElement.location) {
-                result.push(nativeNode);
-            }
-            for (let i = 0; i < vElement.children.length; i++) {
-                const vChild = vElement.children[i];
-                const nativeChild = nativeNode.childNodes[i];
-                if (vChild instanceof core$1.VElement) {
-                    getNodes(vChild, nativeChild, result);
-                }
-                else if (vChild instanceof core$1.VTextNode) {
-                    result.push(nativeChild);
-                }
-                else {
-                    result.push(this.getNativeNodeByComponent(vChild));
-                }
-            }
-            return result;
-        };
-        return getNodes(rootVNode, rootNativeNode, []);
-    }
-    /**
-     * 获取原生节点的原始数据在文档中的位置
-     * @param node
-     */
-    getLocationByNativeNode(node) {
-        let slotRootNode = node;
-        while (!this.slotRootNativeElementCaches.get(slotRootNode)) {
-            slotRootNode = slotRootNode.parentNode;
-            if (!slotRootNode) {
-                return null;
-            }
-        }
-        const slot = this.slotRootNativeElementCaches.get(slotRootNode);
-        const rootVNode = this.slotRootVElementCaches.get(slot);
-        const getLocation = (target, tree, vNodeTree) => {
-            if (target === tree) {
-                return Object.assign({}, vNodeTree.location);
-            }
-            const childNodes = tree.childNodes;
-            for (let i = 0; i < childNodes.length; i++) {
-                const child = vNodeTree.children[i];
-                const nativeChild = tree.childNodes[i];
-                if (nativeChild === target) {
-                    if (child instanceof core$1.ComponentInstance) {
-                        const index = child.parent.indexOf(child);
-                        return {
-                            slot: child.parent,
-                            startIndex: index,
-                            endIndex: index + 1
-                        };
-                    }
-                    return child.location;
-                }
-                else if (child instanceof core$1.VElement) {
-                    let r = null;
-                    if (nativeChild.nodeType === Node.ELEMENT_NODE) {
-                        r = getLocation(target, nativeChild, child);
-                    }
-                    if (r) {
-                        return r;
-                    }
-                }
-            }
-            return null;
-        };
-        return getLocation(node, slotRootNode, rootVNode);
     }
 }
 
@@ -451,7 +329,7 @@ class DomAdapter extends core$1.ViewAdapter {
  * Textbus PC 端选区桥接实现
  */
 exports.SelectionBridge = class SelectionBridge {
-    constructor(config, injector, controller, selection, rootComponentRef, input, domAdapter) {
+    constructor(config, textbus, controller, selection, rootComponentRef, input, domAdapter) {
         this.config = config;
         this.selection = selection;
         this.rootComponentRef = rootComponentRef;
@@ -463,7 +341,7 @@ exports.SelectionBridge = class SelectionBridge {
         this.connector = null;
         this.ignoreSelectionChange = false;
         this.changeFromUser = false;
-        this.docContainer = injector.get(VIEW_DOCUMENT);
+        this.docContainer = textbus.get(VIEW_DOCUMENT);
         this.onSelectionChange = this.selectionChangeEvent.asObservable().pipe(stream.filter(() => {
             return !controller.readonly;
         }));
@@ -647,6 +525,7 @@ exports.SelectionBridge = class SelectionBridge {
                 }
                 minLeft = rect2.left;
                 minTop = rect2.top;
+                oldPosition = position;
             }
             if (isToPrevLine) {
                 if (rect2.left < startLeft) {
@@ -753,7 +632,7 @@ exports.SelectionBridge = class SelectionBridge {
             this.input.composition ||
             selection.rangeCount === 0 ||
             !this.docContainer.contains(selection.anchorNode) ||
-            this.rootComponentRef.component.slots.length === 0) {
+            this.rootComponentRef.component.__slots__.length === 0) {
             return;
         }
         const rawRange = selection.getRangeAt(0);
@@ -762,14 +641,14 @@ exports.SelectionBridge = class SelectionBridge {
         const isFocusStart = selection.focusNode === nativeRange.startContainer && selection.focusOffset === nativeRange.startOffset;
         if (!this.docContainer.contains(selection.focusNode)) {
             if (isFocusEnd) {
-                const nativeNode = this.domAdapter.getNativeNodeBySlot(this.rootComponentRef.component.slots.first);
+                const nativeNode = this.domAdapter.getNativeNodeBySlot(this.rootComponentRef.component.__slots__.first);
                 if (!nativeNode) {
                     return;
                 }
                 nativeRange.setEndAfter(nativeNode.lastChild);
             }
             else {
-                const nativeNode = this.domAdapter.getNativeNodeBySlot(this.rootComponentRef.component.slots.last);
+                const nativeNode = this.domAdapter.getNativeNodeBySlot(this.rootComponentRef.component.__slots__.last);
                 if (!nativeNode) {
                     return;
                 }
@@ -992,7 +871,7 @@ exports.SelectionBridge = class SelectionBridge {
 exports.SelectionBridge = __decorate([
     core.Injectable(),
     __param(0, core.Inject(EDITOR_OPTIONS)),
-    __metadata("design:paramtypes", [Object, core.Injector,
+    __metadata("design:paramtypes", [Object, core$1.Textbus,
         core$1.Controller,
         core$1.Selection,
         core$1.RootComponentRef,
@@ -1030,15 +909,10 @@ class ExperimentalCaret {
     get display() {
         return this._display;
     }
-    constructor(scheduler, editorMask) {
+    constructor(domRenderer, scheduler, editorMask) {
+        this.domRenderer = domRenderer;
         this.scheduler = scheduler;
         this.editorMask = editorMask;
-        this.compositionState = null;
-        this.compositionElement = createElement('span', {
-            styles: {
-                textDecoration: 'underline'
-            }
-        });
         this.timer = null;
         this.oldPosition = null;
         this._display = true;
@@ -1182,12 +1056,10 @@ class ExperimentalCaret {
             this.positionChangeEvent.next(null);
             return;
         }
-        if (this.compositionState) {
-            const compositionElement = this.compositionElement;
-            compositionElement.innerText = this.compositionState.data;
+        const compositionNode = this.domRenderer.compositionNode;
+        if (compositionNode) {
             nativeRange = nativeRange.cloneRange();
-            nativeRange.insertNode(compositionElement);
-            nativeRange.selectNodeContents(compositionElement);
+            nativeRange.selectNodeContents(compositionNode);
             nativeRange.collapse();
         }
         const rect = getLayoutRectByRange(nativeRange);
@@ -1248,18 +1120,18 @@ exports.MagicInput = class MagicInput extends Input {
     get disabled() {
         return this._disabled;
     }
-    constructor(parser, keyboard, commander, selection, controller, scheduler, injector) {
+    constructor(domAdapter, parser, keyboard, commander, selection, controller, scheduler, textbus) {
         super();
+        this.domAdapter = domAdapter;
         this.parser = parser;
         this.keyboard = keyboard;
         this.commander = commander;
         this.selection = selection;
         this.controller = controller;
         this.scheduler = scheduler;
-        this.injector = injector;
+        this.textbus = textbus;
         this.composition = false;
-        this.compositionState = null;
-        this.caret = new ExperimentalCaret(this.scheduler, this.injector.get(VIEW_MASK));
+        this.caret = new ExperimentalCaret(this.domAdapter, this.scheduler, this.textbus.get(VIEW_MASK));
         this.isSafari = isSafari();
         this.isFirefox = isFirefox();
         this.isMac = isMac();
@@ -1299,13 +1171,8 @@ exports.MagicInput = class MagicInput extends Input {
         if (!this.isFocus) {
             (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.focus();
             setTimeout(() => {
-                var _a, _b, _c;
                 if (!this.nativeFocus && this.isFocus) {
-                    this.subscription.unsubscribe();
-                    (_b = (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(this.textarea);
-                    this.subscription = new stream.Subscription();
-                    this.init();
-                    (_c = this.textarea) === null || _c === void 0 ? void 0 : _c.focus();
+                    this.reInit();
                 }
             });
         }
@@ -1321,6 +1188,22 @@ exports.MagicInput = class MagicInput extends Input {
         this.caret.destroy();
         this.subscription.unsubscribe();
     }
+    reInit(delay = false) {
+        var _a, _b, _c;
+        this.subscription.unsubscribe();
+        (_b = (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(this.textarea);
+        this.subscription = new stream.Subscription();
+        this.init();
+        if (delay) {
+            setTimeout(() => {
+                var _a;
+                (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        else {
+            (_c = this.textarea) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+    }
     init() {
         const doc = this.doc;
         const contentBody = doc.body;
@@ -1329,9 +1212,19 @@ exports.MagicInput = class MagicInput extends Input {
         contentBody.appendChild(textarea);
         this.textarea = textarea;
         this.subscription.add(stream.fromEvent(textarea, 'blur').subscribe(() => {
+            // if (this.isFocus) {
+            //   this.isFocus = false
+            //   this.reInit(true)
+            // }
             this.isFocus = false;
             this.nativeFocus = false;
             this.caret.hide();
+            if (this.domAdapter.composition) {
+                const slot = this.domAdapter.composition.slot;
+                this.domAdapter.composition = null;
+                this.domAdapter.compositionNode = null;
+                slot.__changeMarker__.forceMarkDirtied();
+            }
         }), stream.fromEvent(textarea, 'focus').subscribe(() => {
             this.nativeFocus = true;
         }), this.caret.onStyleChange.subscribe(style => {
@@ -1342,7 +1235,7 @@ exports.MagicInput = class MagicInput extends Input {
         this.handleDefaultActions(textarea);
     }
     handleDefaultActions(textarea) {
-        this.subscription.add(stream.fromEvent(document, 'copy').subscribe(ev => {
+        this.subscription.add(stream.fromEvent(isFirefox() ? textarea : document, 'copy').subscribe(ev => {
             const selection = this.selection;
             if (!selection.isSelected) {
                 return;
@@ -1454,7 +1347,6 @@ exports.MagicInput = class MagicInput extends Input {
                 this.commander.delete();
             }
             this.composition = true;
-            this.caret.compositionState = this.compositionState = null;
             startIndex = this.selection.startOffset;
             const startSlot = this.selection.startSlot;
             const event = new core$1.Event(startSlot, {
@@ -1471,10 +1363,11 @@ exports.MagicInput = class MagicInput extends Input {
                 return;
             }
             const startSlot = this.selection.startSlot;
-            this.caret.compositionState = this.compositionState = {
+            this.domAdapter.composition = {
                 slot: startSlot,
-                index: startIndex,
-                data: ev.data
+                text: ev.data,
+                offset: ev.data.length,
+                index: startIndex
             };
             this.caret.refresh(true);
             const event = new core$1.Event(startSlot, {
@@ -1482,6 +1375,7 @@ exports.MagicInput = class MagicInput extends Input {
                 data: ev.data
             });
             core$1.invokeListener(startSlot.parent, 'onCompositionUpdate', event);
+            startSlot.__changeMarker__.forceMarkDirtied();
         }));
         let isCompositionEnd = false;
         this.subscription.add(stream.merge(stream.fromEvent(textarea, 'beforeinput').pipe(stream.filter(ev => {
@@ -1505,24 +1399,15 @@ exports.MagicInput = class MagicInput extends Input {
             textarea.value = '';
             return ev.data;
         }))).subscribe(text => {
+            var _a;
             this.composition = false;
-            this.caret.compositionState = this.compositionState = null;
-            const compositionElement = this.caret.compositionElement;
-            let nextSibling = compositionElement.nextSibling;
-            while (nextSibling) {
-                if (!nextSibling.textContent) {
-                    const next = nextSibling.nextSibling;
-                    nextSibling.remove();
-                    nextSibling = next;
-                    continue;
-                }
-                nextSibling.remove();
-                break;
-            }
-            compositionElement.remove();
+            this.domAdapter.composition = null;
             if (text) {
                 this.commander.write(text);
             }
+            else {
+                (_a = this.selection.startSlot) === null || _a === void 0 ? void 0 : _a.__changeMarker__.forceMarkDirtied();
+            }
             if (isCompositionEnd) {
                 const startSlot = this.selection.startSlot;
                 if (startSlot) {
@@ -1551,13 +1436,14 @@ exports.MagicInput = class MagicInput extends Input {
 };
 exports.MagicInput = __decorate([
     core.Injectable(),
-    __metadata("design:paramtypes", [exports.Parser,
+    __metadata("design:paramtypes", [DomAdapter,
+        exports.Parser,
         core$1.Keyboard,
         core$1.Commander,
         core$1.Selection,
         core$1.Controller,
         core$1.Scheduler,
-        core.Injector])
+        core$1.Textbus])
 ], exports.MagicInput);
 
 /**
@@ -1569,10 +1455,11 @@ class CollaborateSelectionAwarenessDelegate {
  * 协作光标绘制类
  */
 exports.CollaborateCursor = class CollaborateCursor {
-    constructor(injector, nativeSelection, scheduler, selection, awarenessDelegate) {
+    constructor(textbus, nativeSelection, scheduler, selection, userActivity, awarenessDelegate) {
         this.nativeSelection = nativeSelection;
         this.scheduler = scheduler;
         this.selection = selection;
+        this.userActivity = userActivity;
         this.awarenessDelegate = awarenessDelegate;
         this.host = createElement('div', {
             styles: {
@@ -1622,7 +1509,8 @@ exports.CollaborateCursor = class CollaborateCursor {
         this.onRectsChange = new stream.Subject();
         this.subscription = new stream.Subscription();
         this.currentSelection = [];
-        this.container = injector.get(VIEW_CONTAINER);
+        this.ratio = window.devicePixelRatio || 1;
+        this.container = textbus.get(VIEW_CONTAINER);
         this.canvasContainer.append(this.canvas);
         this.host.append(this.canvasContainer, this.tooltips);
         this.container.prepend(this.host);
@@ -1641,6 +1529,13 @@ exports.CollaborateCursor = class CollaborateCursor {
             this.refresh();
         }));
     }
+    init() {
+        if (this.userActivity) {
+            this.subscription.add(this.userActivity.onStateChange.subscribe(v => {
+                this.draw(v);
+            }));
+        }
+    }
     /**
      * 刷新协作光标，由于 Textbus 只会绘制可视区域的光标，当可视区域发生变化时，需要重新绘制
      */
@@ -1658,15 +1553,16 @@ exports.CollaborateCursor = class CollaborateCursor {
         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.canvas.width = this.canvas.offsetWidth * this.ratio;
+        this.canvas.height = this.canvas.offsetHeight * this.ratio;
+        this.context.scale(this.ratio, this.ratio);
         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;
+            return i.selection.anchor.length && i.selection.focus.length;
         }).forEach(item => {
-            const anchorPaths = [...item.paths.anchor];
-            const focusPaths = [...item.paths.focus];
+            const anchorPaths = [...item.selection.anchor];
+            const focusPaths = [...item.selection.focus];
             const anchorOffset = anchorPaths.pop();
             const anchorSlot = this.selection.findSlotByPaths(anchorPaths);
             const focusOffset = focusPaths.pop();
@@ -1684,8 +1580,13 @@ exports.CollaborateCursor = class CollaborateCursor {
                 return;
             }
             const nativeRange = document.createRange();
-            nativeRange.setStart(anchor.node, anchor.offset);
-            nativeRange.setEnd(focus.node, focus.offset);
+            try {
+                nativeRange.setStart(anchor.node, anchor.offset);
+                nativeRange.setEnd(focus.node, focus.offset);
+            }
+            catch (e) {
+                return;
+            }
             if ((anchor.node !== focus.node || anchor.offset !== focus.offset) && nativeRange.collapsed) {
                 nativeRange.setStart(focus.node, focus.offset);
                 nativeRange.setEnd(anchor.node, anchor.offset);
@@ -1814,10 +1715,12 @@ exports.CollaborateCursor = class CollaborateCursor {
 exports.CollaborateCursor = __decorate([
     core.Injectable(),
     __param(4, core.Optional()),
-    __metadata("design:paramtypes", [core.Injector,
+    __param(5, core.Optional()),
+    __metadata("design:paramtypes", [core$1.Textbus,
         exports.SelectionBridge,
         core$1.Scheduler,
         core$1.Selection,
+        collaborate.UserActivity,
         CollaborateSelectionAwarenessDelegate])
 ], exports.CollaborateCursor);
 
@@ -1923,7 +1826,7 @@ class NativeCaret {
         this.subs = [];
     }
 }
-let NativeInput = class NativeInput extends Input {
+exports.NativeInput = class NativeInput extends Input {
     set disabled(b) {
         this._disabled = b;
         if (this.controller.readonly) {
@@ -1935,7 +1838,7 @@ let NativeInput = class NativeInput extends Input {
     get disabled() {
         return this._disabled;
     }
-    constructor(injector, parser, scheduler, selection, keyboard, domAdapter, commander, controller) {
+    constructor(textbus, parser, scheduler, selection, keyboard, domAdapter, commander, controller) {
         super();
         this.parser = parser;
         this.scheduler = scheduler;
@@ -1946,7 +1849,7 @@ let NativeInput = class NativeInput extends Input {
         this.controller = controller;
         this.caret = new NativeCaret(this.scheduler);
         this.composition = false;
-        this.compositionState = null;
+        // compositionState: CompositionState | null = null
         this.onReady = Promise.resolve();
         this._disabled = false;
         this.nativeSelection = document.getSelection();
@@ -1956,7 +1859,7 @@ let NativeInput = class NativeInput extends Input {
         this.isMac = isMac();
         this.isMobileBrowser = isMobileBrowser();
         this.ignoreComposition = false; // 有 bug 版本搜狗拼音
-        this.documentView = injector.get(VIEW_DOCUMENT);
+        this.documentView = textbus.get(VIEW_DOCUMENT);
         if (!controller.readonly) {
             this.documentView.contentEditable = 'true';
         }
@@ -1989,7 +1892,7 @@ let NativeInput = class NativeInput extends Input {
         this.subscription.unsubscribe();
     }
     handleDefaultActions(textarea) {
-        this.subscription.add(stream.fromEvent(document, 'copy').subscribe(ev => {
+        this.subscription.add(stream.fromEvent(isFirefox() ? textarea : document, 'copy').subscribe(ev => {
             const selection = this.selection;
             if (!selection.isSelected) {
                 return;
@@ -2043,8 +1946,8 @@ let NativeInput = class NativeInput extends Input {
             });
         }));
     }
-    handlePaste(html, text) {
-        const slot = this.parser.parse(html, new core$1.Slot([
+    handlePaste(dom, text) {
+        const slot = this.parser.parse(dom, new core$1.Slot([
             core$1.ContentType.BlockComponent,
             core$1.ContentType.InlineComponent,
             core$1.ContentType.Text
@@ -2104,7 +2007,6 @@ let NativeInput = class NativeInput extends Input {
         let startIndex;
         const compositionStart = () => {
             this.composition = true;
-            this.compositionState = null;
             startIndex = this.selection.startOffset;
             const startSlot = this.selection.startSlot;
             const event = new core$1.Event(startSlot, {
@@ -2114,11 +2016,6 @@ let NativeInput = class NativeInput extends Input {
         };
         const compositionUpdate = (data) => {
             const startSlot = this.selection.startSlot;
-            this.compositionState = {
-                slot: startSlot,
-                index: startIndex,
-                data
-            };
             const event = new core$1.Event(startSlot, {
                 index: startIndex,
                 data
@@ -2205,7 +2102,6 @@ let NativeInput = class NativeInput extends Input {
             return !this.ignoreComposition;
         })).subscribe(() => {
             this.composition = true;
-            this.compositionState = null;
             startIndex = this.selection.startOffset;
             const startSlot = this.selection.startSlot;
             const event = new core$1.Event(startSlot, {
@@ -2216,11 +2112,6 @@ let NativeInput = class NativeInput extends Input {
             return !this.ignoreComposition;
         })).subscribe(ev => {
             const startSlot = this.selection.startSlot;
-            this.compositionState = {
-                slot: startSlot,
-                index: startIndex,
-                data: ev.data
-            };
             const event = new core$1.Event(startSlot, {
                 index: startIndex,
                 data: ev.data
@@ -2270,7 +2161,6 @@ let NativeInput = class NativeInput extends Input {
                 return !b;
             }))).subscribe(text => {
             this.composition = false;
-            this.compositionState = null;
             if (text) {
                 this.commander.write(text);
             }
@@ -2285,9 +2175,9 @@ let NativeInput = class NativeInput extends Input {
         }));
     }
 };
-NativeInput = __decorate([
+exports.NativeInput = __decorate([
     core.Injectable(),
-    __metadata("design:paramtypes", [core.Injector,
+    __metadata("design:paramtypes", [core$1.Textbus,
         exports.Parser,
         core$1.Scheduler,
         core$1.Selection,
@@ -2295,11 +2185,11 @@ NativeInput = __decorate([
         DomAdapter,
         core$1.Commander,
         core$1.Controller])
-], NativeInput);
+], exports.NativeInput);
 
+const browserErrorFn = core$1.makeError('BrowserModule');
 class BrowserModule {
-    constructor(host, config) {
-        this.host = host;
+    constructor(config) {
         this.config = config;
         const { mask, wrapper } = BrowserModule.createLayout();
         wrapper.prepend(config.adapter.host);
@@ -2323,26 +2213,79 @@ class BrowserModule {
                 useExisting: exports.SelectionBridge
             }, {
                 provide: Input,
-                useClass: config.useContentEditable ? NativeInput : exports.MagicInput
+                useClass: config.useContentEditable ? exports.NativeInput : exports.MagicInput
             }, {
-                provide: core$1.ViewAdapter,
-                useFactory(v) {
-                    return v;
-                },
-                deps: [DomAdapter]
+                provide: core$1.Adapter,
+                useValue: config.adapter
             }, {
                 provide: DomAdapter,
                 useValue: config.adapter
+            }, {
+                provide: core$1.FocusManager,
+                useFactory: (input) => {
+                    const focusEvent = new stream.Subject();
+                    const blurEvent = new stream.Subject();
+                    input.caret.onPositionChange.pipe(stream.map(p => !!p), stream.distinctUntilChanged()).subscribe(b => {
+                        if (b) {
+                            focusEvent.next();
+                        }
+                        else {
+                            blurEvent.next();
+                        }
+                    });
+                    return {
+                        onFocus: focusEvent,
+                        onBlur: blurEvent
+                    };
+                },
+                deps: [Input]
             },
             exports.Parser,
             exports.SelectionBridge,
-            exports.CollaborateCursor
-        ];
+            exports.CollaborateCursor];
         this.workbench = wrapper;
-        this.host.append(wrapper);
     }
-    onDestroy() {
-        this.workbench.remove();
+    /**
+     * 解析 HTML 并返回一个组件实例
+     * @param html 要解析的 HTML
+     * @param rootComponentLoader 文档根组件加载器
+     * @param textbus
+     */
+    readDocumentByHTML(html, rootComponentLoader, textbus) {
+        const parser = textbus.get(exports.Parser);
+        const doc = parser.parseDoc(html, rootComponentLoader);
+        if (doc instanceof core$1.Component) {
+            return doc;
+        }
+        throw browserErrorFn('rootComponentLoader must return a component instance.');
+    }
+    /**
+     * 将组件数据解析到组件实例中
+     * @param data 要解析的 JSON 数据
+     * @param rootComponent 根组件
+     * @param textbus
+     */
+    readDocumentByComponentLiteral(data, rootComponent, textbus) {
+        const registry = textbus.get(core$1.Registry);
+        return registry.createComponentByFactory(data, rootComponent);
+    }
+    setup(textbus) {
+        const host = this.config.renderTo();
+        if (!(host instanceof HTMLElement)) {
+            throw browserErrorFn('view container is not a HTMLElement');
+        }
+        const cursor = textbus.get(exports.CollaborateCursor);
+        cursor.init();
+        host.append(this.workbench);
+        return () => {
+            cursor.destroy();
+            this.workbench.remove();
+        };
+    }
+    onAfterStartup(textbus) {
+        if (this.config.autoFocus) {
+            textbus.focus();
+        }
     }
     static createLayout() {
         const mask = createElement('div', {