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

package/bundles/index.esm.js

@@ -1,7 +1,8 @@
 import 'reflect-metadata';
-import { Slot, ViewAdapter, createBidirectionalMapping, ComponentInstance, VElement, VTextNode, Controller, Selection, RootComponentRef, ContentType, Event, invokeListener, Keyboard, Commander, Scheduler, NativeSelectionBridge } from '@textbus/core';
-import { InjectionToken, Injectable, Inject, Injector, Optional } from '@viewfly/core';
+import { Slot, Textbus, Adapter, Controller, Selection, RootComponentRef, ContentType, Event, invokeListener, Keyboard, Commander, Scheduler, makeError, NativeSelectionBridge, FocusManager, Component, Registry } from '@textbus/core';
 import { Subject, filter, fromEvent, Subscription, distinctUntilChanged, merge, map, Observable } from '@tanbo/stream';
+import { InjectionToken, Injectable, Inject, Optional } from '@viewfly/core';
+import { UserActivity } from '@textbus/collaborate';
 
 function createElement(tagName, options = {}) {
     const el = document.createElement(tagName);
@@ -166,9 +167,9 @@ let 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 || [])
         ];
@@ -193,7 +194,7 @@ let 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);
         });
     }
@@ -214,7 +215,7 @@ let 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) {
@@ -294,19 +295,16 @@ let Parser = Parser_1 = class Parser {
 Parser = Parser_1 = __decorate([
     Injectable(),
     __param(0, Inject(EDITOR_OPTIONS)),
-    __metadata("design:paramtypes", [Object, Injector])
+    __metadata("design:paramtypes", [Object, Textbus])
 ], Parser);
 
 class Input {
 }
 
-/**
- * Textbus PC 端浏览器渲染能力桥接器抽象类，提供了 DOM 元素查询能力，具体渲染能力由各前端框架实现相应桥接
- */
-class DomAdapter extends ViewAdapter {
-    constructor(mount) {
-        super();
-        this.mount = mount;
+class DomAdapter extends Adapter {
+    constructor() {
+        super(...arguments);
+        this.onViewUpdated = new Subject();
         this.host = createElement('div', {
             styles: {
                 cursor: 'text',
@@ -322,126 +320,6 @@ class DomAdapter extends ViewAdapter {
                 id: 'textbus-' + Number((Math.random() + '').substring(2)).toString(16)
             }
         });
-        this.componentRootElementCaches = createBidirectionalMapping(a => {
-            return a instanceof ComponentInstance;
-        });
-        this.slotRootNativeElementCaches = createBidirectionalMapping(a => {
-            return a instanceof 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 VElement) {
-                    getNodes(vChild, nativeChild, result);
-                }
-                else if (vChild instanceof 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 ComponentInstance) {
-                        const index = child.parent.indexOf(child);
-                        return {
-                            slot: child.parent,
-                            startIndex: index,
-                            endIndex: index + 1
-                        };
-                    }
-                    return child.location;
-                }
-                else if (child instanceof 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);
     }
 }
 
@@ -449,7 +327,7 @@ class DomAdapter extends ViewAdapter {
  * Textbus PC 端选区桥接实现
  */
 let 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;
@@ -461,7 +339,7 @@ let 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(filter(() => {
             return !controller.readonly;
         }));
@@ -645,6 +523,7 @@ let SelectionBridge = class SelectionBridge {
                 }
                 minLeft = rect2.left;
                 minTop = rect2.top;
+                oldPosition = position;
             }
             if (isToPrevLine) {
                 if (rect2.left < startLeft) {
@@ -751,7 +630,7 @@ let 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);
@@ -760,14 +639,14 @@ let 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;
                 }
@@ -990,7 +869,7 @@ let SelectionBridge = class SelectionBridge {
 SelectionBridge = __decorate([
     Injectable(),
     __param(0, Inject(EDITOR_OPTIONS)),
-    __metadata("design:paramtypes", [Object, Injector,
+    __metadata("design:paramtypes", [Object, Textbus,
         Controller,
         Selection,
         RootComponentRef,
@@ -1028,15 +907,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;
@@ -1180,12 +1054,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);
@@ -1246,18 +1118,18 @@ let 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();
@@ -1297,13 +1169,8 @@ let 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 Subscription();
-                    this.init();
-                    (_c = this.textarea) === null || _c === void 0 ? void 0 : _c.focus();
+                    this.reInit();
                 }
             });
         }
@@ -1319,6 +1186,22 @@ let 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 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;
@@ -1327,9 +1210,19 @@ let MagicInput = class MagicInput extends Input {
         contentBody.appendChild(textarea);
         this.textarea = textarea;
         this.subscription.add(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();
+            }
         }), fromEvent(textarea, 'focus').subscribe(() => {
             this.nativeFocus = true;
         }), this.caret.onStyleChange.subscribe(style => {
@@ -1340,7 +1233,7 @@ let MagicInput = class MagicInput extends Input {
         this.handleDefaultActions(textarea);
     }
     handleDefaultActions(textarea) {
-        this.subscription.add(fromEvent(document, 'copy').subscribe(ev => {
+        this.subscription.add(fromEvent(isFirefox() ? textarea : document, 'copy').subscribe(ev => {
             const selection = this.selection;
             if (!selection.isSelected) {
                 return;
@@ -1452,7 +1345,6 @@ let 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 Event(startSlot, {
@@ -1469,10 +1361,11 @@ let 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 Event(startSlot, {
@@ -1480,6 +1373,7 @@ let MagicInput = class MagicInput extends Input {
                 data: ev.data
             });
             invokeListener(startSlot.parent, 'onCompositionUpdate', event);
+            startSlot.__changeMarker__.forceMarkDirtied();
         }));
         let isCompositionEnd = false;
         this.subscription.add(merge(fromEvent(textarea, 'beforeinput').pipe(filter(ev => {
@@ -1503,24 +1397,15 @@ let 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) {
@@ -1549,13 +1434,14 @@ let MagicInput = class MagicInput extends Input {
 };
 MagicInput = __decorate([
     Injectable(),
-    __metadata("design:paramtypes", [Parser,
+    __metadata("design:paramtypes", [DomAdapter,
+        Parser,
         Keyboard,
         Commander,
         Selection,
         Controller,
         Scheduler,
-        Injector])
+        Textbus])
 ], MagicInput);
 
 /**
@@ -1567,10 +1453,11 @@ class CollaborateSelectionAwarenessDelegate {
  * 协作光标绘制类
  */
 let 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: {
@@ -1620,7 +1507,8 @@ let CollaborateCursor = class CollaborateCursor {
         this.onRectsChange = new Subject();
         this.subscription = new 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);
@@ -1639,6 +1527,13 @@ let CollaborateCursor = class CollaborateCursor {
             this.refresh();
         }));
     }
+    init() {
+        if (this.userActivity) {
+            this.subscription.add(this.userActivity.onStateChange.subscribe(v => {
+                this.draw(v);
+            }));
+        }
+    }
     /**
      * 刷新协作光标，由于 Textbus 只会绘制可视区域的光标，当可视区域发生变化时，需要重新绘制
      */
@@ -1656,15 +1551,16 @@ let 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();
@@ -1682,8 +1578,13 @@ let 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);
@@ -1812,10 +1713,12 @@ let CollaborateCursor = class CollaborateCursor {
 CollaborateCursor = __decorate([
     Injectable(),
     __param(4, Optional()),
-    __metadata("design:paramtypes", [Injector,
+    __param(5, Optional()),
+    __metadata("design:paramtypes", [Textbus,
         SelectionBridge,
         Scheduler,
         Selection,
+        UserActivity,
         CollaborateSelectionAwarenessDelegate])
 ], CollaborateCursor);
 
@@ -1933,7 +1836,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;
@@ -1944,7 +1847,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();
@@ -1954,7 +1857,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';
         }
@@ -1987,7 +1890,7 @@ let NativeInput = class NativeInput extends Input {
         this.subscription.unsubscribe();
     }
     handleDefaultActions(textarea) {
-        this.subscription.add(fromEvent(document, 'copy').subscribe(ev => {
+        this.subscription.add(fromEvent(isFirefox() ? textarea : document, 'copy').subscribe(ev => {
             const selection = this.selection;
             if (!selection.isSelected) {
                 return;
@@ -2041,8 +1944,8 @@ let NativeInput = class NativeInput extends Input {
             });
         }));
     }
-    handlePaste(html, text) {
-        const slot = this.parser.parse(html, new Slot([
+    handlePaste(dom, text) {
+        const slot = this.parser.parse(dom, new Slot([
             ContentType.BlockComponent,
             ContentType.InlineComponent,
             ContentType.Text
@@ -2102,7 +2005,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 Event(startSlot, {
@@ -2112,11 +2014,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 Event(startSlot, {
                 index: startIndex,
                 data
@@ -2203,7 +2100,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 Event(startSlot, {
@@ -2214,11 +2110,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 Event(startSlot, {
                 index: startIndex,
                 data: ev.data
@@ -2268,7 +2159,6 @@ let NativeInput = class NativeInput extends Input {
                 return !b;
             }))).subscribe(text => {
             this.composition = false;
-            this.compositionState = null;
             if (text) {
                 this.commander.write(text);
             }
@@ -2285,7 +2175,7 @@ let NativeInput = class NativeInput extends Input {
 };
 NativeInput = __decorate([
     Injectable(),
-    __metadata("design:paramtypes", [Injector,
+    __metadata("design:paramtypes", [Textbus,
         Parser,
         Scheduler,
         Selection,
@@ -2295,9 +2185,9 @@ NativeInput = __decorate([
         Controller])
 ], NativeInput);
 
+const browserErrorFn = 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,24 +2213,77 @@ class BrowserModule {
                 provide: Input,
                 useClass: config.useContentEditable ? NativeInput : MagicInput
             }, {
-                provide: ViewAdapter,
-                useFactory(v) {
-                    return v;
-                },
-                deps: [DomAdapter]
+                provide: Adapter,
+                useValue: config.adapter
             }, {
                 provide: DomAdapter,
                 useValue: config.adapter
+            }, {
+                provide: FocusManager,
+                useFactory: (input) => {
+                    const focusEvent = new Subject();
+                    const blurEvent = new Subject();
+                    input.caret.onPositionChange.pipe(map(p => !!p), distinctUntilChanged()).subscribe(b => {
+                        if (b) {
+                            focusEvent.next();
+                        }
+                        else {
+                            blurEvent.next();
+                        }
+                    });
+                    return {
+                        onFocus: focusEvent,
+                        onBlur: blurEvent
+                    };
+                },
+                deps: [Input]
             },
             Parser,
             SelectionBridge,
-            CollaborateCursor
-        ];
+            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(Parser);
+        const doc = parser.parseDoc(html, rootComponentLoader);
+        if (doc instanceof 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(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(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', {
@@ -2355,7 +2298,7 @@ class BrowserModule {
                 bottom: 0,
                 zIndex: 1,
                 pointerEvents: 'none',
-                overflow: 'hidden'
+                // overflow: 'hidden'
             }
         });
         const wrapper = createElement('div', {
@@ -2377,4 +2320,4 @@ class BrowserModule {
     }
 }
 
-export { BrowserModule, CollaborateCursor, CollaborateSelectionAwarenessDelegate, DomAdapter, EDITOR_OPTIONS, Input, MagicInput, Parser, SelectionBridge, VIEW_CONTAINER, VIEW_DOCUMENT, VIEW_MASK, createElement, createTextNode, getLayoutRectByRange, isFirefox, isMac, isMobileBrowser, isSafari, isWindows };
+export { BrowserModule, CollaborateCursor, CollaborateSelectionAwarenessDelegate, DomAdapter, EDITOR_OPTIONS, Input, MagicInput, NativeInput, Parser, SelectionBridge, VIEW_CONTAINER, VIEW_DOCUMENT, VIEW_MASK, createElement, createTextNode, getLayoutRectByRange, isFirefox, isMac, isMobileBrowser, isSafari, isWindows };