@textbus/platform-browser 4.0.0-alpha.8 → 4.0.1

package/bundles/index.esm.js

@@ -1,7 +1,8 @@
 import 'reflect-metadata';
-import { Slot, Textbus, ViewAdapter, createBidirectionalMapping, ComponentInstance, VElement, VTextNode, Controller, Selection, RootComponentRef, ContentType, Event, invokeListener, Keyboard, Commander, Scheduler, NativeSelectionBridge, FocusManager } from '@textbus/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);
@@ -33,9 +34,6 @@ function createElement(tagName, options = {}) {
     }
     return el;
 }
-function createTextNode(content) {
-    return document.createTextNode(content);
-}
 function getLayoutRectByRange(range) {
     let { startContainer, startOffset } = range;
     if (startContainer.nodeType === Node.TEXT_NODE) {
@@ -53,7 +51,7 @@ function getLayoutRectByRange(range) {
             return {
                 left: rect.right,
                 top: rect.top,
-                width: rect.width,
+                width: range.collapsed ? 0 : rect.width,
                 height: rect.height
             };
         }
@@ -61,7 +59,13 @@ function getLayoutRectByRange(range) {
             const range2 = document.createRange();
             range2.setStart(beforeNode, beforeNode.textContent.length);
             range2.setEnd(beforeNode, beforeNode.textContent.length);
-            return range2.getBoundingClientRect();
+            const rect = range2.getBoundingClientRect();
+            return {
+                left: rect.right,
+                top: rect.top,
+                width: range.collapsed ? 0 : rect.width,
+                height: rect.height
+            };
         }
     }
     const offsetNode = startContainer.childNodes[startOffset];
@@ -73,14 +77,20 @@ function getLayoutRectByRange(range) {
             return {
                 left: rect.right,
                 top: rect.top,
-                width: rect.width,
+                width: range.collapsed ? 0 : rect.width,
                 height: rect.height
             };
         }
     }
     if (offsetNode) {
         if (offsetNode.nodeType === Node.ELEMENT_NODE && offsetNode.nodeName.toLowerCase() !== 'br') {
-            return offsetNode.getBoundingClientRect();
+            const rect = offsetNode.getBoundingClientRect();
+            return {
+                left: rect.left,
+                top: rect.top,
+                width: range.collapsed ? 0 : rect.width,
+                height: rect.height
+            };
         }
         isInsertBefore = true;
     }
@@ -95,7 +105,12 @@ function getLayoutRectByRange(range) {
     }
     const rect = span.getBoundingClientRect();
     startContainer.removeChild(span);
-    return rect;
+    return {
+        left: rect.left,
+        top: rect.top,
+        width: range.collapsed ? 0 : rect.width,
+        height: rect.height
+    };
 }
 
 const isWindows = () => /win(dows|32|64)/i.test(navigator.userAgent);
@@ -167,7 +182,6 @@ let Parser = Parser_1 = class Parser {
         return new DOMParser().parseFromString(html, 'text/html').body;
     }
     constructor(options, textbus) {
-        this.options = options;
         this.textbus = textbus;
         const componentLoaders = [
             ...(options.componentLoaders || [])
@@ -212,8 +226,9 @@ let Parser = Parser_1 = class Parser {
                 slot.insert('\n');
                 return;
             }
+            const schema = [...slot.schema];
             for (const t of this.componentLoaders) {
-                if (t.match(el)) {
+                if (t.match(el, schema)) {
                     const result = t.read(el, this.textbus, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
                         return this.readSlot(childSlot, slotRootElement, slotContentHostElement);
                     });
@@ -300,13 +315,10 @@ Parser = Parser_1 = __decorate([
 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 +334,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);
     }
 }
 
@@ -540,7 +432,33 @@ let SelectionBridge = class SelectionBridge {
             this.listen(this.connector);
             return;
         }
-        this.nativeSelection.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
+        function tryOffset(position) {
+            if (!position.node) {
+                return;
+            }
+            if (position.node.nodeType === Node.TEXT_NODE) {
+                const len = position.node.textContent.length;
+                if (position.offset > len) {
+                    position.offset = len;
+                }
+            }
+            else if (position.node.nodeType === Node.ELEMENT_NODE) {
+                const len = position.node.childNodes.length;
+                if (position.offset > len) {
+                    position.offset = len;
+                }
+            }
+        }
+        try {
+            tryOffset(focus);
+            tryOffset(anchor);
+            this.nativeSelection.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
+        }
+        catch (e) {
+            setTimeout(() => {
+                throw e;
+            });
+        }
         if (this.nativeSelection.rangeCount) {
             const nativeRange = this.nativeSelection.getRangeAt(0);
             this.selectionChangeEvent.next(nativeRange);
@@ -563,6 +481,7 @@ let SelectionBridge = class SelectionBridge {
         // hack end
     }
     destroy() {
+        this.subs.forEach(i => i.unsubscribe());
         this.sub.unsubscribe();
     }
     getPositionByRange(abstractSelection) {
@@ -645,9 +564,10 @@ let SelectionBridge = class SelectionBridge {
                 }
                 minLeft = rect2.left;
                 minTop = rect2.top;
+                // oldPosition = position
             }
             if (isToPrevLine) {
-                if (rect2.left < startLeft) {
+                if (rect2.left <= startLeft) {
                     return position;
                 }
                 if (oldPosition) {
@@ -760,14 +680,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.at(0));
                 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.at(-1));
                 if (!nativeNode) {
                     return;
                 }
@@ -1028,25 +948,24 @@ 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.changeFromSelf = false;
+        this.getLimit = function () {
+            return {
+                top: 0,
+                bottom: document.documentElement.clientHeight
+            };
+        };
         this.timer = null;
-        this.oldPosition = null;
         this._display = true;
         this.flashing = true;
-        this.subs = [];
         this.subscription = new Subscription();
         this.positionChangeEvent = new Subject();
         this.styleChangeEvent = new Subject();
         this.oldRange = null;
-        this.isFixed = false;
         this.onPositionChange = this.positionChangeEvent.pipe(distinctUntilChanged());
         this.onStyleChange = this.styleChangeEvent.asObservable();
         this.elementRef = createElement('div', {
@@ -1074,20 +993,12 @@ class ExperimentalCaret {
         }));
         this.editorMask.appendChild(this.elementRef);
     }
-    refresh(isFixedCaret = false) {
-        this.isFixed = isFixedCaret;
+    refresh() {
         if (this.oldRange) {
             this.show(this.oldRange, false);
         }
-        this.isFixed = false;
     }
     show(range, restart) {
-        const oldRect = this.elementRef.getBoundingClientRect();
-        this.oldPosition = {
-            top: oldRect.top,
-            left: oldRect.left,
-            height: oldRect.height
-        };
         this.oldRange = range;
         if (restart || this.scheduler.lastChangesHasLocalUpdate) {
             clearTimeout(this.timer);
@@ -1116,62 +1027,8 @@ class ExperimentalCaret {
     }
     destroy() {
         clearTimeout(this.timer);
+        // this.caret.
         this.subscription.unsubscribe();
-        this.subs.forEach(i => i.unsubscribe());
-    }
-    correctScrollTop(scroller) {
-        this.subs.forEach(i => i.unsubscribe());
-        this.subs = [];
-        const scheduler = this.scheduler;
-        let docIsChanged = true;
-        function limitPosition(position) {
-            const { top, bottom } = scroller.getLimit();
-            const caretTop = position.top;
-            if (caretTop + position.height > bottom) {
-                const offset = caretTop - bottom + position.height;
-                scroller.setOffset(offset);
-            }
-            else if (position.top < top) {
-                scroller.setOffset(-(top - position.top));
-            }
-        }
-        let isPressed = false;
-        this.subs.push(scroller.onScroll.subscribe(() => {
-            if (this.oldPosition) {
-                const rect = this.rect;
-                this.oldPosition.top = rect.top;
-                this.oldPosition.left = rect.left;
-                this.oldPosition.height = rect.height;
-            }
-        }), fromEvent(document, 'mousedown', true).subscribe(() => {
-            isPressed = true;
-        }), fromEvent(document, 'mouseup', true).subscribe(() => {
-            isPressed = false;
-        }), scheduler.onDocChange.subscribe(() => {
-            docIsChanged = true;
-        }), this.onPositionChange.subscribe(position => {
-            if (position) {
-                if (docIsChanged) {
-                    if (scheduler.lastChangesHasLocalUpdate) {
-                        limitPosition(position);
-                    }
-                    else if (this.oldPosition) {
-                        const offset = Math.floor(position.top - this.oldPosition.top);
-                        scroller.setOffset(offset);
-                    }
-                }
-                else if (!isPressed) {
-                    if (this.isFixed && this.oldPosition) {
-                        const offset = Math.floor(position.top - this.oldPosition.top);
-                        scroller.setOffset(offset);
-                    }
-                    else {
-                        limitPosition(position);
-                    }
-                }
-            }
-            docIsChanged = false;
-        }));
     }
     updateCursorPosition(nativeRange) {
         const startContainer = nativeRange.startContainer;
@@ -1180,12 +1037,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);
@@ -1212,13 +1067,34 @@ class ExperimentalCaret {
         rectTop = Math.floor(rectTop);
         const containerRect = this.editorMask.getBoundingClientRect();
         const top = Math.floor(rectTop - containerRect.top);
-        const left = Math.floor(rect.left - containerRect.left);
+        const left = Math.floor(rect.left + rect.width / 2 - containerRect.left);
+        let rotate = 0;
+        if (nativeRange.collapsed) {
+            rotate = Math.round(Math.atan2(rect.width, rect.height) * 180 / Math.PI);
+            if (rotate !== 0) {
+                const hackEle = document.createElement('span');
+                hackEle.style.cssText = 'display: inline-block; width: 10px; height: 10px; position: relative; contain: layout style size;';
+                const pointEle = document.createElement('span');
+                pointEle.style.cssText = 'position: absolute; left: 0; top: 0; width:0;height:0';
+                hackEle.append(pointEle);
+                node.append(hackEle);
+                const t1 = pointEle.getBoundingClientRect().top;
+                pointEle.style.right = '0';
+                pointEle.style.left = '';
+                const t2 = pointEle.getBoundingClientRect().top;
+                if (t2 < t1) {
+                    rotate = -rotate;
+                }
+                hackEle.remove();
+            }
+        }
         Object.assign(this.elementRef.style, {
             left: left + 'px',
             top: top + 'px',
             height: boxHeight + 'px',
             lineHeight: boxHeight + 'px',
-            fontSize
+            fontSize,
+            transform: `rotate(${rotate}deg)`,
         });
         this.caret.style.backgroundColor = color;
         this.styleChangeEvent.next({
@@ -1231,6 +1107,21 @@ class ExperimentalCaret {
             top: rectTop,
             height: boxHeight
         });
+        if (this.changeFromSelf) {
+            this.changeFromSelf = false;
+            const selfRect = this.elementRef.getBoundingClientRect();
+            const limit = this.getLimit();
+            if (selfRect.top < limit.top) {
+                this.elementRef.scrollIntoView({
+                    block: 'start'
+                });
+            }
+            else if (selfRect.bottom > limit.bottom) {
+                this.elementRef.scrollIntoView({
+                    block: 'end'
+                });
+            }
+        }
     }
 }
 /**
@@ -1246,8 +1137,9 @@ let MagicInput = class MagicInput extends Input {
     get disabled() {
         return this._disabled;
     }
-    constructor(parser, keyboard, commander, selection, controller, scheduler, textbus) {
+    constructor(domAdapter, parser, keyboard, commander, selection, controller, scheduler, textbus) {
         super();
+        this.domAdapter = domAdapter;
         this.parser = parser;
         this.keyboard = keyboard;
         this.commander = commander;
@@ -1256,8 +1148,7 @@ let MagicInput = class MagicInput extends Input {
         this.scheduler = scheduler;
         this.textbus = textbus;
         this.composition = false;
-        this.compositionState = null;
-        this.caret = new ExperimentalCaret(this.scheduler, this.textbus.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 +1188,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 +1205,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 +1229,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 +1252,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;
@@ -1410,6 +1322,7 @@ let MagicInput = class MagicInput extends Input {
         }), fromEvent(textarea, 'compositionend').subscribe(() => {
             isWriting = false;
         }), fromEvent(textarea, 'beforeinput').subscribe(ev => {
+            this.ignoreComposition = false;
             if (this.isSafari) {
                 if (ev.inputType === 'insertFromComposition') {
                     isIgnore = true;
@@ -1431,6 +1344,7 @@ let MagicInput = class MagicInput extends Input {
                 key = keys.charAt(+ev.code.substring(5));
                 ev.preventDefault();
             }
+            this.caret.changeFromSelf = true;
             const is = this.keyboard.execShortcut({
                 key: key,
                 altKey: ev.altKey,
@@ -1441,6 +1355,9 @@ let MagicInput = class MagicInput extends Input {
                 this.ignoreComposition = true;
                 ev.preventDefault();
             }
+            else {
+                this.caret.changeFromSelf = false;
+            }
         }));
     }
     handleInput(textarea) {
@@ -1449,10 +1366,10 @@ let MagicInput = class MagicInput extends Input {
             return !this.ignoreComposition;
         })).subscribe(() => {
             if (!this.selection.isCollapsed) {
+                this.caret.changeFromSelf = true;
                 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,17 +1386,20 @@ 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);
+            this.caret.changeFromSelf = true;
+            this.caret.refresh();
             const event = new Event(startSlot, {
                 index: startIndex,
                 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 +1423,16 @@ 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.caret.changeFromSelf = true;
                 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,7 +1461,8 @@ let MagicInput = class MagicInput extends Input {
 };
 MagicInput = __decorate([
     Injectable(),
-    __metadata("design:paramtypes", [Parser,
+    __metadata("design:paramtypes", [DomAdapter,
+        Parser,
         Keyboard,
         Commander,
         Selection,
@@ -1567,10 +1480,11 @@ class CollaborateSelectionAwarenessDelegate {
  * 协作光标绘制类
  */
 let CollaborateCursor = class CollaborateCursor {
-    constructor(textbus, 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,6 +1534,7 @@ let CollaborateCursor = class CollaborateCursor {
         this.onRectsChange = new Subject();
         this.subscription = new Subscription();
         this.currentSelection = [];
+        this.ratio = window.devicePixelRatio || 1;
         this.container = textbus.get(VIEW_CONTAINER);
         this.canvasContainer.append(this.canvas);
         this.host.append(this.canvasContainer, this.tooltips);
@@ -1639,6 +1554,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 +1578,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 +1605,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 +1740,12 @@ let CollaborateCursor = class CollaborateCursor {
 CollaborateCursor = __decorate([
     Injectable(),
     __param(4, Optional()),
+    __param(5, Optional()),
     __metadata("design:paramtypes", [Textbus,
         SelectionBridge,
         Scheduler,
         Selection,
+        UserActivity,
         CollaborateSelectionAwarenessDelegate])
 ], CollaborateCursor);
 
@@ -1852,9 +1782,7 @@ class NativeCaret {
             height: 0
         };
     }
-    constructor(scheduler) {
-        this.scheduler = scheduler;
-        this.oldPosition = null;
+    constructor() {
         this._nativeRange = null;
         this.subs = [];
         this.positionChangeEvent = new Subject();
@@ -1863,59 +1791,6 @@ class NativeCaret {
     refresh() {
         //
     }
-    correctScrollTop(scroller) {
-        this.destroy();
-        const scheduler = this.scheduler;
-        let docIsChanged = true;
-        function limitPosition(position) {
-            const { top, bottom } = scroller.getLimit();
-            const caretTop = position.top;
-            if (caretTop + position.height > bottom) {
-                const offset = caretTop - bottom + position.height;
-                scroller.setOffset(offset);
-            }
-            else if (position.top < top) {
-                scroller.setOffset(-(top - position.top));
-            }
-        }
-        let isPressed = false;
-        this.subs.push(scroller.onScroll.subscribe(() => {
-            if (this.oldPosition) {
-                const rect = this.rect;
-                this.oldPosition.top = rect.top;
-                this.oldPosition.left = rect.left;
-                this.oldPosition.height = rect.height;
-            }
-        }), fromEvent(document, 'mousedown', true).subscribe(() => {
-            isPressed = true;
-        }), fromEvent(document, 'mouseup', true).subscribe(() => {
-            isPressed = false;
-        }), scheduler.onDocChange.subscribe(() => {
-            docIsChanged = true;
-        }), this.onPositionChange.subscribe(position => {
-            if (position) {
-                if (docIsChanged) {
-                    if (scheduler.lastChangesHasLocalUpdate) {
-                        limitPosition(position);
-                    }
-                    else if (this.oldPosition) {
-                        const offset = Math.floor(position.top - this.oldPosition.top);
-                        scroller.setOffset(offset);
-                    }
-                }
-                else if (!isPressed) {
-                    if (this.oldPosition) {
-                        const offset = Math.floor(position.top - this.oldPosition.top);
-                        scroller.setOffset(offset);
-                    }
-                    else {
-                        limitPosition(position);
-                    }
-                }
-            }
-            docIsChanged = false;
-        }));
-    }
     destroy() {
         this.subs.forEach(i => i.unsubscribe());
         this.subs = [];
@@ -1933,18 +1808,17 @@ let NativeInput = class NativeInput extends Input {
     get disabled() {
         return this._disabled;
     }
-    constructor(textbus, parser, scheduler, selection, keyboard, domAdapter, commander, controller) {
+    constructor(textbus, parser, selection, keyboard, domAdapter, commander, controller) {
         super();
         this.parser = parser;
-        this.scheduler = scheduler;
         this.selection = selection;
         this.keyboard = keyboard;
         this.domAdapter = domAdapter;
         this.commander = commander;
         this.controller = controller;
-        this.caret = new NativeCaret(this.scheduler);
+        this.caret = new NativeCaret();
         this.composition = false;
-        this.compositionState = null;
+        // compositionState: CompositionState | null = null
         this.onReady = Promise.resolve();
         this._disabled = false;
         this.nativeSelection = document.getSelection();
@@ -1987,7 +1861,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 +1915,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 +1976,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 +1985,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
@@ -2140,6 +2008,10 @@ let NativeInput = class NativeInput extends Input {
             compositionUpdate(ev.data);
         }), fromEvent(input, 'compositionend').subscribe(ev => {
             compositionEnd(ev.data);
+            const startContainer = this.nativeSelection.focusNode;
+            if (startContainer instanceof Text && startContainer.textContent === ev.data) {
+                startContainer.remove();
+            }
         }), fromEvent(input, 'beforeinput').subscribe(ev => {
             var _a;
             switch (ev.inputType) {
@@ -2203,7 +2075,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 +2085,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,8 +2134,11 @@ let NativeInput = class NativeInput extends Input {
                 return !b;
             }))).subscribe(text => {
             this.composition = false;
-            this.compositionState = null;
             if (text) {
+                const startContainer = this.nativeSelection.focusNode;
+                if (startContainer instanceof Text && startContainer.textContent === text) {
+                    startContainer.remove();
+                }
                 this.commander.write(text);
             }
             if (isCompositionEnd) {
@@ -2287,7 +2156,6 @@ NativeInput = __decorate([
     Injectable(),
     __metadata("design:paramtypes", [Textbus,
         Parser,
-        Scheduler,
         Selection,
         Keyboard,
         DomAdapter,
@@ -2295,9 +2163,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,11 +2191,8 @@ 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
@@ -2355,10 +2220,54 @@ class BrowserModule {
             SelectionBridge,
             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) {
+        this.textbus = 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();
+        }
+    }
+    onDestroy(textbus) {
+        textbus.get(Input).destroy();
+        textbus.get(SelectionBridge).destroy();
+        textbus.get(CollaborateCursor).destroy();
     }
     static createLayout() {
         const mask = createElement('div', {
@@ -2371,10 +2280,23 @@ class BrowserModule {
                 right: 0,
                 top: 0,
                 bottom: 0,
+                pointerEvents: 'none',
+                // overflow: 'hidden'
+            }
+        });
+        const maskWrapper = createElement('div', {
+            styles: {
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+                margin: '0 -2px',
                 zIndex: 1,
                 pointerEvents: 'none',
                 overflow: 'hidden'
-            }
+            },
+            children: [mask]
         });
         const wrapper = createElement('div', {
             attrs: {
@@ -2386,7 +2308,7 @@ class BrowserModule {
                 position: 'relative',
                 flexDirection: 'column'
             },
-            children: [mask]
+            children: [maskWrapper]
         });
         return {
             wrapper,
@@ -2395,4 +2317,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, getLayoutRectByRange, isFirefox, isMac, isMobileBrowser, isSafari, isWindows };